orcs-design-system 3.3.43 → 3.3.44

package/es/components/ActionsMenu/ActionsMenu.stories.js

@@ -353,6 +353,41 @@ export const circleVariantActionsMenu = () => /*#__PURE__*/_jsxs(ActionsMenu, {
   })]
 });
 circleVariantActionsMenu.storyName = "Circle Variant";
+export const disabledActionsMenu = () => /*#__PURE__*/_jsxs(ActionsMenu, {
+  disabled: true,
+  children: [/*#__PURE__*/_jsx(ActionsMenuItem, {
+    href: "https://orchestrated.io/",
+    children: "Open details page"
+  }), /*#__PURE__*/_jsx(BrowserRouter, {
+    children: /*#__PURE__*/_jsx(ActionsMenuItem, {
+      as: Link,
+      to: "/",
+      children: "Edit"
+    })
+  }), /*#__PURE__*/_jsx(ActionsMenuItem, {
+    onClick: action("clicked"),
+    children: "Remove"
+  })]
+});
+disabledActionsMenu.storyName = "Disabled Default";
+export const disabledCircleVariantActionsMenu = () => /*#__PURE__*/_jsxs(ActionsMenu, {
+  variant: "circle",
+  disabled: true,
+  children: [/*#__PURE__*/_jsx(ActionsMenuItem, {
+    href: "https://orchestrated.io/",
+    children: "Open details page"
+  }), /*#__PURE__*/_jsx(BrowserRouter, {
+    children: /*#__PURE__*/_jsx(ActionsMenuItem, {
+      as: Link,
+      to: "/",
+      children: "Edit"
+    })
+  }), /*#__PURE__*/_jsx(ActionsMenuItem, {
+    onClick: action("clicked"),
+    children: "Remove"
+  })]
+});
+disabledCircleVariantActionsMenu.storyName = "Disabled Circle Variant";
 defaultActionsMenu.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -387,4 +422,14 @@ circleVariantActionsMenu.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "circleVariantActionsMenu"
+};
+disabledActionsMenu.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "disabledActionsMenu"
+};
+disabledCircleVariantActionsMenu.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "disabledCircleVariantActionsMenu"
 };

package/es/components/ActionsMenu/index.js

@@ -8,7 +8,6 @@ import useActionMenu from "./useActionMenu";
 import { crossFadeIn, beforeDotCollapsing, beforeDotExpanding, afterDotCollapsing, afterDotExpanding, beforeCrossExpanding, beforeCrossCollapsing, afterCrossExpanding, afterCrossCollapsing } from "./ActionsMenu.animations";
 import { FloatingFocusManager, FloatingPortal, useMergeRefs } from "@floating-ui/react";
 import { getFloatingUiRootElement, getFloatingUiZIndex } from "../../utils/floatingUiHelpers";
-import { variant } from "styled-system";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ActionMenuContext = /*#__PURE__*/createContext({});
 const StyledActionsMenuContainer = styled.div.withConfig({
@@ -22,27 +21,7 @@ const Wrapper = styled.div.withConfig({
 const Control = styled.button.withConfig({
   displayName: "ActionsMenu__Control",
   componentId: "sc-yvbni2-2"
-})(["position:relative;display:flex;align-items:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;text-decoration:none;text-align:center;border-radius:", ";transition:", ";cursor:pointer;width:30px;height:30px;&:hover,&:focus{outline:0;border-color:", ";}", " &[data-state=\"open\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"open\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}"], props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primary")(props), variant({
-  prop: "variant",
-  variants: {
-    default: {
-      backgroundColor: "white",
-      border: "solid 1px",
-      borderColor: "greyLight",
-      width: "30px",
-      height: "30px",
-      borderRadius: 2
-    },
-    circle: {
-      backgroundColor: "greyDarkest",
-      border: "solid 2px",
-      borderColor: "greyDarkest",
-      width: "35px",
-      height: "35px",
-      borderRadius: "50%"
-    }
-  }
-}), beforeDotCollapsing, afterDotCollapsing, beforeCrossExpanding, afterCrossExpanding, beforeDotExpanding, afterDotExpanding, beforeCrossCollapsing, afterCrossCollapsing);
+})(["position:relative;display:flex;align-items:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;text-decoration:none;text-align:center;border-radius:", ";transition:", ";cursor:", ";width:", ";height:", ";border-radius:", ";border:", ";", " ", " &:hover,&:focus{outline:0;border-color:", ";}&[data-state=\"open\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"open\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}"], props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => props.disabled ? "not-allowed" : "pointer", props => props.variant === "circle" ? "35px" : "30px", props => props.variant === "circle" ? "35px" : "30px", props => props.variant === "circle" ? "50%" : themeGet("radii.2")(props), props => props.variant === "circle" ? "solid 2px" : "solid 1px", props => props.variant === "default" && css(["background-color:", ";border-color:", ";"], props.disabled ? themeGet("colors.greyLighter")(props) : "white", props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyLight")(props)), props => props.variant === "circle" && css(["background-color:", ";border-color:", ";"], props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyDarkest")(props), props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyDarkest")(props)), props => props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.primary")(props), beforeDotCollapsing, afterDotCollapsing, beforeCrossExpanding, afterCrossExpanding, beforeDotExpanding, afterDotExpanding, beforeCrossCollapsing, afterCrossCollapsing);
 const Dots = styled.div.withConfig({
   displayName: "ActionsMenu__Dots",
   componentId: "sc-yvbni2-3"
@@ -150,6 +129,7 @@ export const ActionsMenuBody = _ref2 => {
     closeOnClick = false,
     "data-testid": dataTestId = "ActionsMenu",
     variant = "default",
+    disabled = false,
     ...props
   } = _ref2;
   const id = useId();
@@ -169,17 +149,19 @@ export const ActionsMenuBody = _ref2 => {
     "aria-label": ariaLabel,
     onFocus: onTriggerFocus,
     id,
+    disabled,
     ...actionMenu.getReferenceProps({
       ...props,
-      onClick: onToggle,
+      onClick: disabled ? undefined : onToggle,
       ref: triggerRef,
       "data-state": actionMenu.open ? "open" : "closed",
       "data-testid": dataTestId
     })
-  }), [ariaLabel, onTriggerFocus, id, actionMenu, onToggle, props, triggerRef, dataTestId]);
+  }), [ariaLabel, onTriggerFocus, id, actionMenu, onToggle, props, triggerRef, dataTestId, disabled]);
   let triggerComponent = /*#__PURE__*/_jsxs(Control, {
     ...triggerProps,
     variant: variant,
+    disabled: disabled,
     children: [/*#__PURE__*/_jsx(Dots, {
       className: "actionsMenu__dots",
       variant: variant
@@ -283,7 +265,8 @@ ActionsMenuBody.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   theme: PropTypes.object,
   ariaLabel: PropTypes.string,
-  variant: PropTypes.oneOf(["default", "circle"])
+  variant: PropTypes.oneOf(["default", "circle"]),
+  disabled: PropTypes.bool
 };
 const ActionsMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [toggleState, setToggle] = useState(false);
@@ -316,7 +299,9 @@ ActionsMenu.propTypes = {
   /** Specifies the aria-label for the button */
   ariaLabel: PropTypes.string,
   /** Specifies the variant of the ActionsMenu */
-  variant: PropTypes.oneOf(["default", "circle"])
+  variant: PropTypes.oneOf(["default", "circle"]),
+  /** Specifies whether the ActionsMenu is disabled */
+  disabled: PropTypes.bool
 };
 ActionsMenu.__docgenInfo = {
   "description": "",
@@ -437,6 +422,13 @@ ActionsMenu.__docgenInfo = {
         }]
       },
       "required": false
+    },
+    "disabled": {
+      "description": "Specifies whether the ActionsMenu is disabled",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
     }
   }
 };
@@ -508,6 +500,17 @@ ActionsMenuBody.__docgenInfo = {
       },
       "required": false
     },
+    "disabled": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "onTriggerFocus": {
       "description": "",
       "type": {

package/es/components/Popover/index.js

@@ -94,6 +94,7 @@ export default function Popover(_ref) {
     withFocusControl = true,
     offset: customOffset,
     headerAvatarSizing,
+    disabled,
     ...props
   } = _ref;
   const [visible, setVisible] = useState(false);
@@ -131,7 +132,7 @@ export default function Popover(_ref) {
     context
   } = useFloating({
     open: visible,
-    onOpenChange: setVisible,
+    onOpenChange: disabled ? () => {} : setVisible,
     placement: DIRECTIONS_MAP[direction] || direction || "right",
     whileElementsMounted: autoUpdate,
     middleware
@@ -271,7 +272,9 @@ Popover.propTypes = {
   /** Custom offset configuration for the popover positioning. Can be an object with mainAxis and/or alignmentAxis properties, or a function that returns an offset object. */
   offset: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   /** Special prop for Header Avatar to apply CSS-based positioning adjustments when sizing changes dynamically */
-  headerAvatarSizing: PropTypes.oneOf(["large", "default", "small"])
+  headerAvatarSizing: PropTypes.oneOf(["large", "default", "small"]),
+  /** Disable the popover */
+  disabled: PropTypes.bool
 };
 Popover.__docgenInfo = {
   "description": "",
@@ -431,6 +434,13 @@ Popover.__docgenInfo = {
         }]
       },
       "required": false
+    },
+    "disabled": {
+      "description": "Disable the popover",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
     }
   }
 };

package/es/components/SideNavV2/NavItem.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled, { css as styledCss } from "styled-components";
 import { css } from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
@@ -10,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sharedNavItemStyles = styledCss(["cursor:pointer;padding:", ";text-decoration:none;border-radius:", ";width:100%;position:relative;border:none;path{transition:", ";fill:", ";}font-family:", ";display:flex;align-items:center;justify-content:center;transition:", ";background-color:transparent;font-size:1.4rem;font-weight:", ";&:hover,&:focus{color:", ";path{fill:", ";}}@media screen and (max-width:", "px){width:auto;max-height:30px;height:30px;}&:focus{outline:0;color:", ";path{fill:", ";}}"], themeGet("space.s"), themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.greyDarker"), themeGet("fonts.main"), themeGet("transition.transitionDefault"), themeGet("fontWeights.1"), themeGet("colors.primary"), themeGet("colors.primary"), BREAKPOINTS.SMALL_SCREEN, themeGet("colors.primary"), themeGet("colors.primary"));
 const expandedNavItemStyles = props => styledCss(["justify-content:flex-start;gap:", ";.nav-item-text{font-size:", ";line-height:1;font-weight:", ";color:", ";white-space:nowrap;text-overflow:ellipsis;}&:hover .nav-item-text,&:focus .nav-item-text{color:", ";}"], themeGet("space.s"), themeGet("fontSizes.1"), themeGet("fontWeights.1"), props.active ? themeGet("colors.greyDarkest") : themeGet("colors.greyDarker"), props.active ? themeGet("colors.greyDarkest") : themeGet("colors.primary"));
 const variantActiveStyles = {
-  expandableItem: props => styledCss(["color:", ";path{fill:", ";}:after{height:100%;position:absolute;right:0;transform:", ";content:\"\";border-right:3px solid ", ";z-index:5;}@media screen and (max-width:", "px){:after{border-top:3px solid ", ";border-right:none;top:-16px;right:0;width:100%;}}"], themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"), props.isExpanded ? "translateX(8px)" : "translateX(10px)", themeGet("colors.primary"), BREAKPOINTS.SMALL_SCREEN, themeGet("colors.primary")),
+  expandableItem: props => styledCss(["color:", ";path{fill:", ";}:after{height:100%;position:absolute;right:0;transform:", ";content:\"\";border-right:3px solid ", ";z-index:5;}&:hover .nav-item-text,&:focus .nav-item-text{color:", ";}@media screen and (max-width:", "px){:after{border-top:3px solid ", ";border-right:none;transform:translateY(-10px);right:auto;width:100%;}}"], themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"), props.isExpanded ? "translateX(9px)" : "translateX(8px)", themeGet("colors.primary"), themeGet("colors.primary"), BREAKPOINTS.SMALL_SCREEN, themeGet("colors.primary")),
   default: styledCss(["background-color:", ";path{fill:", ";}&:hover,&:focus{path{fill:", ";}}&:focus{path{fill:", ";}}"], themeGet("colors.primaryLightest"), themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"))
 };
 const getActiveStyles = props => {
@@ -58,47 +58,12 @@ const BadgeDot = styled("div").withConfig({
   top: props.isExpanded ? "12px" : "2px",
   right: "0"
 }));
-const SideNavItemPopover = styled(Popover).withConfig({
-  displayName: "NavItem__SideNavItemPopover",
+const SideNavItemWrapper = styled.div.withConfig({
+  displayName: "NavItem__SideNavItemWrapper",
   componentId: "sc-1qz1q0h-4"
 })(props => css({
-  [`@media screen and (min-width: ${BREAKPOINTS.SMALL_SCREEN}px)`]: {
-    ":nth-child(1 of .bottom-aligned) ": {
-      marginTop: props.bottomAligned && "auto"
-    }
-  },
-  "&:hover,&:focus-within": {
-    "& .popoverText": {
-      opacity: "1",
-      zIndex: "100",
-      visibility: "visible",
-      pointerEvents: "auto",
-      display: "initial"
-    }
-  },
-  "&:focus-within": {
-    "& .popoverText": {
-      opacity: props.active ? "0" : "1",
-      zIndex: props.active ? "-100" : "100",
-      visibility: props.active ? "hidden" : "visible",
-      pointerEvents: props.active ? "none" : "auto",
-      display: props.active ? "none" : "initial"
-    }
-  },
-  [`@media screen and (max-width: ${BREAKPOINTS.SMALL_SCREEN}px)`]: {
-    width: "auto",
-    marginBottom: "0",
-    marginTop: "0",
-    "&:hover,&:focus-within": {
-      "& .popoverText": {
-        opacity: "0",
-        zIndex: "-100",
-        visibility: "hidden",
-        pointerEvents: "none",
-        justifyContent: "space-around",
-        display: "none"
-      }
-    }
+  "&:nth-child(1 of .bottom-aligned) ": {
+    marginTop: props.bottomAligned && "auto"
   }
 }));
 const NavItem = _ref => {
@@ -111,56 +76,63 @@ const NavItem = _ref => {
     isSmallScreen,
     isExpanded
   } = _ref;
-  // Use the ternary operator to render the appropriate component based on actionType
-  const accessibilityProps = {
-    ...(item.actionType === "component" && {
-      "aria-expanded": isActive ? "true" : "false"
-    }),
-    "aria-label": item.name
-  };
-  return /*#__PURE__*/_jsx(SideNavItemPopover, {
-    className: item.bottomAligned && "bottom-aligned",
-    text: !isExpanded ? item.name : "",
-    direction: isSmallScreen ? "top" : "right",
-    textAlign: "center",
-    width: "fit-content",
-    tabIndex: "-1",
-    active: isActive,
-    bottomAligned: item.bottomAligned,
-    children: item.actionType === "link" ? /*#__PURE__*/_jsx(SideNavItemLink, {
-      active: isActive,
-      bottomAligned: item.bottomAligned,
-      isExpanded: isExpanded,
-      onClick: () => handleItemClick(item),
-      ref: el => navItemRefs.current[item.index] = el,
-      children: /*#__PURE__*/_jsxs(Component, {
-        item: item,
-        children: [/*#__PURE__*/_jsx(Icon, {
+  const renderedNavItem = useMemo(() => {
+    const accessibilityProps = {
+      ...(item.actionType === "component" && {
+        "aria-expanded": isActive ? "true" : "false"
+      }),
+      "aria-label": item.name
+    };
+    if (item.actionType === "link") {
+      return /*#__PURE__*/_jsx(SideNavItemLink, {
+        active: isActive,
+        bottomAligned: item.bottomAligned,
+        isExpanded: isExpanded,
+        onClick: () => handleItemClick(item),
+        ref: el => navItemRefs.current[item.index] = el,
+        children: /*#__PURE__*/_jsxs(Component, {
+          item: item,
+          children: [/*#__PURE__*/_jsx(Icon, {
+            icon: ["far", item.iconName]
+          }), isExpanded && !isSmallScreen && /*#__PURE__*/_jsx("span", {
+            className: "nav-item-text",
+            children: item.name
+          })]
+        })
+      }, item.index);
+    } else {
+      return /*#__PURE__*/_jsxs(SideNavItem, {
+        active: isActive,
+        onClick: () => handleItemClick(item),
+        bottomAligned: item.bottomAligned,
+        isExpanded: isExpanded,
+        ...accessibilityProps,
+        ref: el => navItemRefs.current[item.index] = el,
+        children: [item.badgeNumber && /*#__PURE__*/_jsx(BadgeNumber, {
+          isExpanded: isExpanded,
+          children: item.badgeNumber
+        }), item.badgeDot && /*#__PURE__*/_jsx(BadgeDot, {
+          isExpanded: isExpanded
+        }), /*#__PURE__*/_jsx(Icon, {
           icon: ["far", item.iconName]
         }), isExpanded && !isSmallScreen && /*#__PURE__*/_jsx("span", {
           className: "nav-item-text",
           children: item.name
         })]
-      })
-    }, item.index) : /*#__PURE__*/_jsxs(SideNavItem, {
-      active: isActive,
-      onClick: () => handleItemClick(item),
-      bottomAligned: item.bottomAligned,
-      isExpanded: isExpanded,
-      ...accessibilityProps,
-      ref: el => navItemRefs.current[item.index] = el,
-      children: [item.badgeNumber && /*#__PURE__*/_jsx(BadgeNumber, {
-        isExpanded: isExpanded,
-        children: item.badgeNumber
-      }), item.badgeDot && /*#__PURE__*/_jsx(BadgeDot, {
-        isExpanded: isExpanded
-      }), /*#__PURE__*/_jsx(Icon, {
-        icon: ["far", item.iconName]
-      }), isExpanded && !isSmallScreen && /*#__PURE__*/_jsx("span", {
-        className: "nav-item-text",
-        children: item.name
-      })]
-    }, item.index)
+      }, item.index);
+    }
+  }, [item, isActive, isExpanded, isSmallScreen, handleItemClick, navItemRefs]);
+  return isSmallScreen ? /*#__PURE__*/_jsx(Popover, {
+    text: item.name,
+    direction: "top",
+    textAlign: "center",
+    width: "fit-content",
+    tabIndex: "-1",
+    children: renderedNavItem
+  }) : /*#__PURE__*/_jsx(SideNavItemWrapper, {
+    className: item.bottomAligned && "bottom-aligned",
+    bottomAligned: item.bottomAligned,
+    children: renderedNavItem
   });
 };
 NavItem.propTypes = {

package/es/components/SideNavV2/SideNav.js

@@ -33,17 +33,22 @@ const SideNavV2 = _ref => {
     expandedWidth,
     expandedRef,
     navItemRefs,
+    wrapperRef,
+    isLocked,
     handleItemClick,
     handleBlur,
-    handleExpandToggle,
-    handleWidthChange
+    handleWidthChange,
+    handleLockToggle
   } = useSideNavState(items);
   const {
     isSmallScreen
   } = useResponsive();
+
+  // Get the current expanded item
+  const currentItem = expandedItem !== null ? items[expandedItem] : null;
   const {
     handleResizeStart
-  } = useResize(expandedRef, isSmallScreen, expandedItem, handleWidthChange);
+  } = useResize(expandedRef, isSmallScreen, expandedItem, handleWidthChange, currentItem);
 
   // Categorize items
   const {
@@ -53,17 +58,20 @@ const SideNavV2 = _ref => {
     allItems
   } = categorizeItems(items);
   return /*#__PURE__*/_jsxs(SideNavWrapper, {
+    ref: wrapperRef,
     sideNavHeight: sideNavHeight,
     children: [/*#__PURE__*/_jsxs(SideNavItems, {
       isExpanded: isExpanded,
       "data-testid": "side-nav-items",
       children: [!isSmallScreen && /*#__PURE__*/_jsx(PanelControlComponent, {
         isExpanded: isExpanded,
-        onClick: handleExpandToggle,
-        ariaLabel: "toggle side navigation",
+        isLocked: isLocked,
+        onClick: handleLockToggle,
+        ariaLabel: isLocked ? "unlock navigation" : isExpanded ? "lock navigation" : "open navigation",
         mt: "10px",
         mb: "4px",
-        tooltipText: isExpanded ? "Collapse navigation" : "Expand navigation"
+        tooltipText: isLocked ? "Collapse" : isExpanded ? "Keep open" : "Expand navigation",
+        mode: "lock"
       }), /*#__PURE__*/_jsx(ItemSection, {
         items: topAlignedItems,
         isExpanded: isExpanded,

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { render, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
+import PropTypes from "prop-types";
 import useResize from "../hooks/useResize";
 import { calculateDesktopWidth, calculateMobileHeight } from "../utils/resizeUtils";
 
@@ -19,9 +20,10 @@ const TestComponent = _ref => {
     expandedRef,
     isSmallScreen,
     expandedItem,
-    onWidthChange
+    onWidthChange,
+    currentItem
   } = _ref;
-  const resizeHandlers = useResize(expandedRef, isSmallScreen, expandedItem, onWidthChange);
+  const resizeHandlers = useResize(expandedRef, isSmallScreen, expandedItem, onWidthChange, currentItem);
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx("div", {
       "data-testid": "resize-handle",
@@ -32,6 +34,13 @@ const TestComponent = _ref => {
     })]
   });
 };
+TestComponent.propTypes = {
+  expandedRef: PropTypes.object,
+  isSmallScreen: PropTypes.bool,
+  expandedItem: PropTypes.number,
+  onWidthChange: PropTypes.func,
+  currentItem: PropTypes.number
+};
 describe("useResize hook", () => {
   let mockExpandedRef;
   let mockOnWidthChange;
@@ -99,7 +108,7 @@ describe("useResize hook", () => {
     fireEvent.mouseMove(document, {
       clientX: 600
     });
-    expect(calculateDesktopWidth).toHaveBeenCalledWith(600, expect.any(Object));
+    expect(calculateDesktopWidth).toHaveBeenCalledWith(600, expect.any(Object), undefined);
     expect(mockOnWidthChange).toHaveBeenCalledWith(400);
   });
   it("should handle mobile resize correctly", () => {