Merge pull request #395 from qoretechnologies/feature/editable-tree

Editable Tree component
qoretechnologies · Jul 3, 2024 · 989d5df · 989d5df
2 parents 768ef9b + a368541
commit 989d5df
Show file tree

Hide file tree

Showing 10 changed files with 617 additions and 127 deletions.
diff --git a/__tests__/tree.test.tsx b/__tests__/tree.test.tsx
@@ -13,7 +13,7 @@ test('Renders basic <Tree /> properly', () => {
     </ReqoreUIProvider>
   );
 
-  expect(document.querySelectorAll('.reqore-tree-toggle').length).toBe(7);
+  expect(document.querySelectorAll('.reqore-tree-toggle').length).toBe(8);
 });
 
 test('<Tree /> items can be expanded and collapsed', () => {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.46.9",
+  "version": "0.47.0",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/Drawer/index.tsx b/src/components/Drawer/index.tsx
@@ -26,6 +26,7 @@ export interface IReqoreDrawerProps extends Omit<IReqorePanelProps, 'size' | 're
   onHideToggle?: (isHidden: boolean) => void;
   hasBackdrop?: boolean;
   size?: string | 'auto';
+  panelSize?: IReqorePanelProps['size'];
   maxSize?: string;
   minSize?: string;
   opacity?: number;
@@ -157,6 +158,7 @@ export const ReqoreDrawer: React.FC<IReqoreDrawerProps> = ({
   height,
   actions = [],
   customZIndex,
+  panelSize,
   ...rest
 }: IReqoreDrawerProps) => {
   const animations = useReqoreProperty('animations');
@@ -337,6 +339,7 @@ export const ReqoreDrawer: React.FC<IReqoreDrawerProps> = ({
             {!_isHidden && (
               <ReqorePanel
                 {...rest}
+                size={panelSize}
                 opacity={opacity}
                 blur={hasBackdrop ? 0 : blur}
                 actions={_actions}

diff --git a/src/components/Paragraph/index.tsx b/src/components/Paragraph/index.tsx
@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { forwardRef, memo } from 'react';
 import styled from 'styled-components';
 import { TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { isStringSize } from '../../helpers/utils';
@@ -23,21 +23,24 @@ export const StyledParagraph = styled(StyledTextEffect)`
 `;
 
 export const ReqoreP = memo(
-  ({ size, children, customTheme, intent, className, ...props }: IReqoreParagraphProps) => {
-    const theme = useReqoreTheme('main', customTheme, intent);
+  forwardRef(
+    ({ size, children, customTheme, intent, className, ...props }: IReqoreParagraphProps, ref) => {
+      const theme = useReqoreTheme('main', customTheme, intent);
 
-    return (
-      <StyledParagraph
-        as='p'
-        theme={theme}
-        color={theme.text.color}
-        intent={intent}
-        {...props}
-        _size={size}
-        className={`${className || ''} reqore-paragraph`}
-      >
-        {children}
-      </StyledParagraph>
-    );
-  }
+      return (
+        <StyledParagraph
+          ref={ref}
+          as='p'
+          theme={theme}
+          color={theme.text.color}
+          intent={intent}
+          {...props}
+          _size={size}
+          className={`${className || ''} reqore-paragraph`}
+        >
+          {children}
+        </StyledParagraph>
+      );
+    }
+  )
 );