Merge pull request #427 from qoretechnologies/bugfix/panel-collapsed-…

…resizable Bump version to 0.49.1 and update panel component logic for better collapse handling
qoretechnologies · Jan 2, 2025 · 1105b3e · 1105b3e
2 parents 9011e40 + 49ae52c
commit 1105b3e
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.49.0",
+  "version": "0.49.1",
   "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/Panel/index.tsx b/src/components/Panel/index.tsx
@@ -446,12 +446,12 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         },
       };
 
-      if (isCollapsed || disabled) {
+      if (_isCollapsed || disabled) {
         return disabledProps;
       }
 
       return resizable || disabledProps;
-    }, [resizable, isCollapsed, disabled]);
+    }, [resizable, _isCollapsed, disabled]);
 
     // Return true if the card has a title bar, otherwise return false.
     const hasTitleBar: boolean = useMemo(
@@ -709,7 +709,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       <StyledPanel
         {...omit(rest, ['onResize'])}
         {..._resizable}
-        as={rest.as || !!resizable ? Resizable : 'div'}
+        as={rest.as || (!!resizable && !disabled && !_isCollapsed) ? Resizable : 'div'}
         ref={(ref) => {
           let _ref = ref;
 

diff --git a/src/stories/Panel/Panel.stories.tsx b/src/stories/Panel/Panel.stories.tsx
@@ -733,9 +733,11 @@ export const Resizable: Story = {
   render: Template,
 
   args: {
+    isCollapsed: true,
     resizable: {
       minWidth: 400,
       maxWidth: 600,
+
       defaultSize: { width: 400, height: '100%' },
       enable: { right: true },
     },