orcs-design-system 3.3.66 → 3.3.68

package/es/components/Avatar/Avatar.stories.js

@@ -4,6 +4,7 @@ import Flex from "../Flex";
 import Box from "../Box";
 import Spacer from "../Spacer";
 import StyledLink from "../StyledLink";
+import Header from "../Typography";
 import Avatar from ".";
 import { action } from "@storybook/addon-actions";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -436,6 +437,37 @@ export const headerAvatarVariants = () => {
   });
 };
 headerAvatarVariants.storyName = "Header Avatar Variants";
+export const withCropData = () => /*#__PURE__*/_jsxs(Flex, {
+  gap: "xxl",
+  p: "r",
+  flexWrap: "wrap",
+  children: [/*#__PURE__*/_jsxs(Box, {
+    children: [/*#__PURE__*/_jsx(Header.H4, {
+      children: "Without Crop Data"
+    }), /*#__PURE__*/_jsx(Avatar, {
+      sizing: "large",
+      shape: "square",
+      image: "https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxNjAxODB8MHwxfHNlYXJjaHwzfHxjYXJ8ZW58MHwwfHx8MTc2MDMwNzg1MHww&ixlib=rb-4.1.0&q=80&w=1440&h=1440",
+      imageAlt: "Avatar without crop"
+    })]
+  }), /*#__PURE__*/_jsxs(Box, {
+    children: [/*#__PURE__*/_jsx(Header.H4, {
+      children: "With Crop Data"
+    }), /*#__PURE__*/_jsx(Avatar, {
+      sizing: "large",
+      shape: "square",
+      image: "https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxNjAxODB8MHwxfHNlYXJjaHwzfHxjYXJ8ZW58MHwwfHx8MTc2MDMwNzg1MHww&ixlib=rb-4.1.0&q=80&w=1440&h=1440",
+      imageAlt: "Avatar with crop",
+      croppedAreaPercent: {
+        x: 49,
+        y: 39,
+        width: 33,
+        height: 50
+      }
+    })]
+  })]
+});
+withCropData.storyName = "With Crop Data";
 defaultAvatar.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -505,4 +537,9 @@ headerAvatarVariants.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "headerAvatarVariants"
+};
+withCropData.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "withCropData"
 };

package/es/components/Avatar/CroppedImage.js

@@ -0,0 +1,188 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { variant } from "styled-system";
+import css from "@styled-system/css";
+import { themeGet } from "@styled-system/theme-get";
+import { jsx as _jsx } from "react/jsx-runtime";
+const CroppedImageContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CroppedImageContainer",
+  componentId: "sc-1bfrurv-0"
+})(["position:relative;width:100%;height:100%;overflow:hidden;"]);
+const CroppedImageInner = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CroppedImageInner",
+  componentId: "sc-1bfrurv-1"
+})(["padding-bottom:100%;position:relative;width:100%;"]);
+const CroppedImageElement = /*#__PURE__*/styled.img.withConfig({
+  displayName: "CroppedImageElement",
+  componentId: "sc-1bfrurv-2"
+})(["position:absolute;top:0;left:0;transform-origin:top left;height:auto;width:calc(100% + 0.5px);"]);
+const resolveCustomSize = (customSize, props) => {
+  if (!customSize) return null;
+  if (customSize.includes("px") || customSize.includes("rem") || customSize.includes("em") || customSize.includes("%")) {
+    return customSize;
+  } else {
+    return themeGet(`avatarScale.${customSize}`)(props) || customSize;
+  }
+};
+const CroppedImage = _ref => {
+  let {
+    src,
+    alt,
+    croppedAreaPercent,
+    className,
+    style
+  } = _ref;
+  const scale = 100 / (croppedAreaPercent.width || 1);
+  const transform = {
+    x: `${-(croppedAreaPercent.x ?? 0) * scale}%`,
+    y: `${-(croppedAreaPercent.y ?? 0) * scale}%`,
+    scale
+  };
+  const imageStyle = {
+    transform: `translate3d(${transform.x}, ${transform.y}, 0) scale3d(${transform.scale}, ${transform.scale}, 1)`,
+    width: "calc(100% + 0.5px)",
+    height: "auto"
+  };
+  return /*#__PURE__*/_jsx(CroppedImageContainer, {
+    className: className,
+    style: style,
+    children: /*#__PURE__*/_jsx(CroppedImageInner, {
+      children: /*#__PURE__*/_jsx(CroppedImageElement, {
+        src: src,
+        alt: alt,
+        style: imageStyle
+      })
+    })
+  });
+};
+CroppedImage.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+  croppedAreaPercent: PropTypes.shape({
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired
+  }).isRequired,
+  className: PropTypes.string,
+  style: PropTypes.object
+};
+export const CroppedImageWrapper = /*#__PURE__*/styled(CroppedImage).withConfig({
+  displayName: "CroppedImageWrapper",
+  componentId: "sc-1bfrurv-3"
+})(props => css({
+  width: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
+  height: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
+  flex: "0 0 auto",
+  backgroundColor: themeGet("colors.greyLighter")(props),
+  border: "0",
+  display: "block",
+  borderRadius: "50%",
+  overflow: "hidden"
+}), props => variant({
+  prop: "sizing",
+  variants: {
+    small: {
+      width: themeGet("avatarScale.avatarSmall")(props),
+      height: themeGet("avatarScale.avatarSmall")(props)
+    },
+    large: {
+      width: themeGet("avatarScale.avatarLarge")(props),
+      height: themeGet("avatarScale.avatarLarge")(props)
+    }
+  }
+}), props => variant({
+  prop: "shape",
+  variants: {
+    square: {
+      borderRadius: themeGet("radii.2")(props)
+    },
+    hexagon: {
+      borderRadius: "0",
+      clipPath: "polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)"
+    },
+    tag: {
+      borderRadius: "0",
+      clipPath: "polygon(6% 0, 95% 0, 95% 65%, 50% 100%, 6% 65%)"
+    }
+  }
+}));
+export const HeaderAvatarCroppedImage = /*#__PURE__*/styled(CroppedImage).withConfig({
+  displayName: "HeaderAvatarCroppedImage",
+  componentId: "sc-1bfrurv-4"
+})(_ref2 => {
+  let {
+    $size,
+    $shape
+  } = _ref2;
+  return {
+    width: $size,
+    height: $size,
+    transition: "width 200ms ease-in-out, height 200ms ease-in-out",
+    borderRadius: $shape === "circle" || !$shape ? "50%" : $shape === "square" ? "6px" : "0",
+    overflow: "hidden",
+    display: "block"
+  };
+});
+CroppedImage.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "CroppedImage",
+  "props": {
+    "src": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": true
+    },
+    "alt": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "croppedAreaPercent": {
+      "description": "",
+      "type": {
+        "name": "shape",
+        "value": {
+          "x": {
+            "name": "number",
+            "required": true
+          },
+          "y": {
+            "name": "number",
+            "required": true
+          },
+          "width": {
+            "name": "number",
+            "required": true
+          },
+          "height": {
+            "name": "number",
+            "required": true
+          }
+        }
+      },
+      "required": true
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "style": {
+      "description": "",
+      "type": {
+        "name": "object"
+      },
+      "required": false
+    }
+  }
+};
+export default CroppedImage;

package/es/components/Avatar/index.js

@@ -6,6 +6,7 @@ import Header, { Text } from "../Typography";
 import Icon from "../Icon";
 import Popover from "../Popover";
 import StatusDot from "../StatusDot";
+import { CroppedImageWrapper, HeaderAvatarCroppedImage } from "./CroppedImage";
 import css from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -454,6 +455,7 @@ const Avatar = _ref0 => {
   let {
     sizing,
     image,
+    croppedAreaPercent,
     gradient,
     fallbackGradient,
     imageAlt,
@@ -500,7 +502,13 @@ const Avatar = _ref0 => {
         theme
       }) || customSize;
     }
-    const imgContent = image ? /*#__PURE__*/_jsx(HeaderAvatarImage, {
+    const imgContent = image ? croppedAreaPercent ? /*#__PURE__*/_jsx(HeaderAvatarCroppedImage, {
+      src: image,
+      alt: alt,
+      croppedAreaPercent: croppedAreaPercent,
+      $size: size,
+      $shape: shape
+    }) : /*#__PURE__*/_jsx(HeaderAvatarImage, {
       src: image,
       alt: alt,
       $size: size,
@@ -573,7 +581,14 @@ const Avatar = _ref0 => {
     ...props,
     type: type,
     sizing: sizing,
-    children: [image ? /*#__PURE__*/_jsx(Image, {
+    children: [image ? croppedAreaPercent ? /*#__PURE__*/_jsx(CroppedImageWrapper, {
+      src: image,
+      alt: alt,
+      croppedAreaPercent: croppedAreaPercent,
+      sizing: sizing,
+      shape: shape,
+      customSize: customSize
+    }) : /*#__PURE__*/_jsx(Image, {
       src: image,
       sizing: sizing,
       shape: shape,
@@ -647,6 +662,13 @@ Avatar.propTypes = {
   type: PropTypes.oneOf(["inverted", "default"]),
   /** Specifies a source path for an image */
   image: PropTypes.string,
+  /** Specifies crop data for the image with x, y, width, and height properties */
+  croppedAreaPercent: PropTypes.shape({
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired
+  }),
   /** Specifies the gradient for the avatar background */
   gradient: PropTypes.string,
   /** Specifies the fallback gradient when no image is provided */
@@ -821,6 +843,31 @@ Avatar.__docgenInfo = {
       },
       "required": false
     },
+    "croppedAreaPercent": {
+      "description": "Specifies crop data for the image with x, y, width, and height properties",
+      "type": {
+        "name": "shape",
+        "value": {
+          "x": {
+            "name": "number",
+            "required": true
+          },
+          "y": {
+            "name": "number",
+            "required": true
+          },
+          "width": {
+            "name": "number",
+            "required": true
+          },
+          "height": {
+            "name": "number",
+            "required": true
+          }
+        }
+      },
+      "required": false
+    },
     "gradient": {
       "description": "Specifies the gradient for the avatar background",
       "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.66",
+  "version": "3.3.68",
   "engines": {
     "node": "20.12.2"
   },