orcs-design-system 3.3.65 → 3.3.67

package/es/components/ColorPicker/ColorPicker.stories.js

@@ -123,6 +123,53 @@ export const Controlled = () => {
     })
   });
 };
+export const DefaultOpen = () => {
+  const [color, setColor] = useState(initialColor);
+  return /*#__PURE__*/_jsx(Box, {
+    p: "l",
+    position: "relative",
+    children: /*#__PURE__*/_jsx(Flex, {
+      width: "100%",
+      height: "150px",
+      justifyContent: "flex-end",
+      alignItems: "flex-start",
+      background: color,
+      borderRadius: "2",
+      p: "r",
+      children: /*#__PURE__*/_jsx(ColorPicker, {
+        value: color,
+        onChange: setColor,
+        position: "bottom-start",
+        defaultOpen: true,
+        children: _ref3 => {
+          let {
+            toggleColorPicker
+          } = _ref3;
+          return /*#__PURE__*/_jsx(Popover, {
+            direction: "left",
+            height: "35px",
+            width: "fit-content",
+            text: "Picker locked open",
+            ml: "auto",
+            children: /*#__PURE__*/_jsx(Button, {
+              onClick: toggleColorPicker,
+              height: "35px",
+              width: "35px",
+              borderRadius: "35px",
+              borderColor: "white30",
+              bg: "white30",
+              ariaLabel: "Colour picker always open",
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: ["fas", "palette"],
+                color: "white"
+              })
+            })
+          });
+        }
+      })
+    })
+  });
+};
 Default.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -132,4 +179,9 @@ Controlled.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "Controlled"
+};
+DefaultOpen.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "DefaultOpen"
 };

package/es/components/ColorPicker/index.js

@@ -38,11 +38,12 @@ const ColorPicker = _ref => {
     onReset,
     isSaving,
     isResetting,
+    defaultOpen = false,
     // Spread all other props to the underlying library
     ...colorPickerProps
   } = _ref;
   const [initialColor, setInitialColor] = useState(value);
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
   const [color, setColor] = useState(value);
   const toggleColorPicker = () => setIsOpen(!isOpen);
   const baseStyles = useMemo(() => ({
@@ -169,7 +170,8 @@ ColorPicker.propTypes = {
   onSave: PropTypes.func,
   onReset: PropTypes.func,
   isSaving: PropTypes.bool,
-  isResetting: PropTypes.bool
+  isResetting: PropTypes.bool,
+  defaultOpen: PropTypes.bool
   // Note: We don't need to define PropTypes for the spread props
   // as they'll be passed directly to the underlying library
 };
@@ -423,6 +425,17 @@ ColorPicker.__docgenInfo = {
       },
       "required": false
     },
+    "defaultOpen": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "value": {
       "description": "",
       "type": {

package/es/components/SideNavV2/SideNav.js

@@ -73,6 +73,8 @@ const SideNavV2 = _ref => {
   // Memoize expensive calculations to prevent unnecessary re-renders
   const currentItem = useMemo(() => expandedItem !== null ? items[expandedItem] : null, [expandedItem, items]);
   const {
+    isResizing,
+    hasResized,
     handleResizeStart
   } = useResize(expandedRef, isSmallScreen, expandedItem, handleWidthChange, currentItem);
 
@@ -147,7 +149,9 @@ const SideNavV2 = _ref => {
         isSmallScreen: isSmallScreen,
         expandedRef: expandedRef,
         onResizeStart: handleResizeStart,
-        onItemClick: handleItemClick
+        onItemClick: handleItemClick,
+        isResizing: isResizing,
+        hasResized: hasResized
       }, item.name);
     })]
   });

package/es/components/SideNavV2/__tests__/resize.test.js

@@ -31,6 +31,9 @@ const TestComponent = _ref => {
     }), /*#__PURE__*/_jsx("div", {
       "data-testid": "resize-status",
       children: resizeHandlers.isResizing ? "resizing" : "not-resizing"
+    }), /*#__PURE__*/_jsx("div", {
+      "data-testid": "has-resized-status",
+      children: resizeHandlers.hasResized ? "has-resized" : "not-resized"
     })]
   });
 };
@@ -145,4 +148,66 @@ describe("useResize hook", () => {
     });
     expect(mockExpandedRef.current.style.height).toBe("250px");
   });
+  it("should track isResizing state correctly during resize operations", () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestComponent, {
+      expandedRef: mockExpandedRef,
+      isSmallScreen: false,
+      expandedItem: 0,
+      onWidthChange: mockOnWidthChange,
+      currentItem: 1
+    }));
+
+    // Initially not resizing
+    expect(getByTestId("resize-status")).toHaveTextContent("not-resizing");
+
+    // Start resizing
+    const resizeHandle = getByTestId("resize-handle");
+    fireEvent.mouseDown(resizeHandle);
+
+    // Should be resizing now
+    expect(getByTestId("resize-status")).toHaveTextContent("resizing");
+
+    // End resize
+    fireEvent.mouseUp(document);
+
+    // Should not be resizing anymore
+    expect(getByTestId("resize-status")).toHaveTextContent("not-resizing");
+  });
+  it("should track hasResized state correctly when resize movement occurs", () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestComponent, {
+      expandedRef: mockExpandedRef,
+      isSmallScreen: false,
+      expandedItem: 0,
+      onWidthChange: mockOnWidthChange,
+      currentItem: 1
+    }));
+
+    // Initially not resized
+    expect(getByTestId("has-resized-status")).toHaveTextContent("not-resized");
+
+    // Start resizing
+    const resizeHandle = getByTestId("resize-handle");
+    fireEvent.mouseDown(resizeHandle);
+
+    // Still not resized (no movement yet)
+    expect(getByTestId("has-resized-status")).toHaveTextContent("not-resized");
+
+    // Simulate mouse move (actual resize)
+    fireEvent.mouseMove(document, {
+      clientX: 600
+    });
+
+    // Should be marked as resized
+    expect(getByTestId("has-resized-status")).toHaveTextContent("has-resized");
+
+    // End resize
+    fireEvent.mouseUp(document);
+
+    // Should still be marked as resized
+    expect(getByTestId("has-resized-status")).toHaveTextContent("has-resized");
+  });
 });

package/es/components/SideNavV2/components/ExpandedPanel.js

@@ -21,6 +21,8 @@ import Icon from "../../Icon";
  * @param {React.RefObject} props.expandedRef - Ref for the expanded panel
  * @param {Function} props.onResizeStart - Resize start handler
  * @param {Function} props.onItemClick - Item click handler
+ * @param {boolean} props.isResizing - Whether a resize operation is currently active
+ * @param {boolean} props.hasResized - Whether any resize movement has occurred
  * @returns {JSX.Element} Rendered expanded panel or null if not applicable
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -33,7 +35,9 @@ const ExpandedPanel = _ref => {
     isSmallScreen,
     expandedRef,
     onResizeStart,
-    onItemClick
+    onItemClick,
+    isResizing,
+    hasResized
   } = _ref;
   const panelRef = useRef(null);
   const isHoveringInPanelRef = useRef(false);
@@ -61,7 +65,7 @@ const ExpandedPanel = _ref => {
   return /*#__PURE__*/_jsxs(Box, {
     position: "relative",
     height: "100%",
-    zIndex: "15",
+    zIndex: "1",
     children: [/*#__PURE__*/_jsxs(SideNavExpanded, {
       ref: el => {
         expandedRef.current = el;
@@ -78,6 +82,15 @@ const ExpandedPanel = _ref => {
       }), item.component()]
     }), /*#__PURE__*/_jsx(ResizeHandle, {
       onMouseDown: onResizeStart,
+      onClick: e => {
+        // Prevent click from firing if we're currently resizing or if we've resized
+        if (isResizing || hasResized) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+        onItemClick(item, true);
+      },
       children: /*#__PURE__*/_jsxs(ToggleIcon, {
         className: "resize-icon",
         children: [/*#__PURE__*/_jsx(Icon, {
@@ -107,10 +120,12 @@ ExpandedPanel.propTypes = {
   isSmallScreen: PropTypes.bool,
   expandedRef: PropTypes.object,
   onResizeStart: PropTypes.func.isRequired,
-  onItemClick: PropTypes.func.isRequired
+  onItemClick: PropTypes.func.isRequired,
+  isResizing: PropTypes.bool,
+  hasResized: PropTypes.bool
 };
 ExpandedPanel.__docgenInfo = {
-  "description": "ExpandedPanel - A resizable panel component for expanded navigation items\n\nRenders an expandable panel that can be resized by the user. Supports both\ndesktop (horizontal resize) and mobile (vertical resize) orientations.\nHover behavior is handled at the parent component level.\n\n@param {Object} props - Component props\n@param {Object} props.item - Navigation item data\n@param {number} [props.expandedItem] - Currently expanded item index\n@param {boolean} props.isExpanded - Whether the navigation is expanded\n@param {number} [props.expandedWidth] - Width of the expanded panel (desktop)\n@param {boolean} props.isSmallScreen - Whether currently on a small screen\n@param {React.RefObject} props.expandedRef - Ref for the expanded panel\n@param {Function} props.onResizeStart - Resize start handler\n@param {Function} props.onItemClick - Item click handler\n@returns {JSX.Element} Rendered expanded panel or null if not applicable",
+  "description": "ExpandedPanel - A resizable panel component for expanded navigation items\n\nRenders an expandable panel that can be resized by the user. Supports both\ndesktop (horizontal resize) and mobile (vertical resize) orientations.\nHover behavior is handled at the parent component level.\n\n@param {Object} props - Component props\n@param {Object} props.item - Navigation item data\n@param {number} [props.expandedItem] - Currently expanded item index\n@param {boolean} props.isExpanded - Whether the navigation is expanded\n@param {number} [props.expandedWidth] - Width of the expanded panel (desktop)\n@param {boolean} props.isSmallScreen - Whether currently on a small screen\n@param {React.RefObject} props.expandedRef - Ref for the expanded panel\n@param {Function} props.onResizeStart - Resize start handler\n@param {Function} props.onItemClick - Item click handler\n@param {boolean} props.isResizing - Whether a resize operation is currently active\n@param {boolean} props.hasResized - Whether any resize movement has occurred\n@returns {JSX.Element} Rendered expanded panel or null if not applicable",
   "methods": [],
   "displayName": "ExpandedPanel",
   "props": {
@@ -191,6 +206,20 @@ ExpandedPanel.__docgenInfo = {
         "name": "func"
       },
       "required": true
+    },
+    "isResizing": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "hasResized": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
     }
   }
 };

package/es/components/SideNavV2/hooks/useResize.js

@@ -16,11 +16,13 @@ import { calculateDesktopWidth, calculateMobileHeight, applyResizeCursor, remove
  */
 const useResize = (expandedRef, isSmallScreen, expandedItem, onWidthChange, currentItem) => {
   const [isResizing, setIsResizing] = useState(false);
+  const [hasResized, setHasResized] = useState(false);
   const [resizeStartY, setResizeStartY] = useState(0);
   const [resizeStartHeight, setResizeStartHeight] = useState(0);
   const handleResizeStart = useCallback(e => {
     e.preventDefault();
     setIsResizing(true);
+    setHasResized(false); // Reset resize flag
     applyResizeCursor(isSmallScreen);
     if (isSmallScreen && expandedRef.current) {
       setResizeStartY(e.clientY);
@@ -31,6 +33,9 @@ const useResize = (expandedRef, isSmallScreen, expandedItem, onWidthChange, curr
     if (!isResizing || !expandedRef.current) {
       return;
     }
+
+    // Mark that we've actually resized
+    setHasResized(true);
     if (isSmallScreen) {
       // Vertical resizing for small screens
       const newHeight = calculateMobileHeight(e.clientY, resizeStartY, resizeStartHeight, currentItem);
@@ -84,6 +89,7 @@ const useResize = (expandedRef, isSmallScreen, expandedItem, onWidthChange, curr
   }, [isSmallScreen, expandedRef]);
   return {
     isResizing,
+    hasResized,
     handleResizeStart,
     handleResizeMove,
     handleResizeEnd

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.65",
+  "version": "3.3.67",
   "engines": {
     "node": "20.12.2"
   },