@hitachivantara/uikit-react-core 5.66.9 → 5.66.11

package/dist/esm/VerticalNavigation/NavigationPopup/NavigationPopupContainer.js

@@ -1,20 +1,34 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Popper } from "@mui/base";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
+import { useTheme } from "../../hooks/useTheme.js";
+import { getContainerElement } from "../../utils/document.js";
 import { HvVerticalNavigation } from "../VerticalNavigation.js";
-import { useClasses, StyledPopper } from "./NavigationPopup.styles.js";
+import { useClasses } from "./NavigationPopup.styles.js";
 import { staticClasses } from "./NavigationPopup.styles.js";
 const NavigationPopupContainer = ({
   anchorEl,
   onClose,
   children,
   classes: classesProp,
+  className,
   ...others
 }) => {
-  const { classes } = useClasses(classesProp);
-  const handleClickAway = () => {
-    onClose?.();
-  };
-  return /* @__PURE__ */ jsx(StyledPopper, { open: true, anchorEl, placement: "right-start", ...others, children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleClickAway, children: /* @__PURE__ */ jsx("div", { className: classes.container, children: /* @__PURE__ */ jsx(HvVerticalNavigation, { open: true, useIcons: true, children }) }) }) });
+  const { classes, cx } = useClasses(classesProp);
+  const { rootId } = useTheme();
+  const handleClickAway = () => onClose?.();
+  return /* @__PURE__ */ jsx(
+    Popper,
+    {
+      open: true,
+      anchorEl,
+      placement: "right-start",
+      container: getContainerElement(rootId),
+      className: cx(classes.popper, classes.popup, className),
+      ...others,
+      children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleClickAway, children: /* @__PURE__ */ jsx("div", { className: classes.container, children: /* @__PURE__ */ jsx(HvVerticalNavigation, { open: true, useIcons: true, children }) }) })
+    }
+  );
 };
 export {
   NavigationPopupContainer,

package/dist/esm/VerticalNavigation/NavigationPopup/NavigationPopupContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationPopupContainer.js","sources":["../../../../src/VerticalNavigation/NavigationPopup/NavigationPopupContainer.tsx"],"sourcesContent":["import ClickAwayListener from \"@mui/material/ClickAwayListener\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvVerticalNavigation } from \"../VerticalNavigation\";\nimport {\n  staticClasses,\n  StyledPopper,\n  useClasses,\n} from \"./NavigationPopup.styles\";\n\nexport { staticClasses as verticalNavigationPopupClasses };\n\nexport type HvVerticalNavigationPopupClasses = ExtractNames<typeof useClasses>;\n\nexport interface NavigationPopupContainerProps extends HvBaseProps {\n  anchorEl?: HTMLElement | null;\n  onClose?: () => void;\n  classes?: HvVerticalNavigationPopupClasses;\n}\n\nexport const NavigationPopupContainer = ({\n  anchorEl,\n  onClose,\n  children,\n  classes: classesProp,\n  ...others\n}: NavigationPopupContainerProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const handleClickAway = () => {\n    onClose?.();\n  };\n\n  return (\n    <StyledPopper open anchorEl={anchorEl} placement=\"right-start\" {...others}>\n      <ClickAwayListener onClickAway={handleClickAway}>\n        <div className={classes.container}>\n          <HvVerticalNavigation open useIcons>\n            {children}\n          </HvVerticalNavigation>\n        </div>\n      </ClickAwayListener>\n    </StyledPopper>\n  );\n};\n"],"names":[],"mappings":";;;;;AAqBO,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACL,MAAqC;AACnC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,kBAAkB,MAAM;AAClB;EAAA;AAIV,SAAA,oBAAC,cAAa,EAAA,MAAI,MAAC,UAAoB,WAAU,eAAe,GAAG,QACjE,UAAC,oBAAA,mBAAA,EAAkB,aAAa,iBAC9B,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,WACtB,UAAA,oBAAC,sBAAqB,EAAA,MAAI,MAAC,UAAQ,MAChC,SAAA,CACH,EACF,CAAA,EAAA,CACF,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"NavigationPopupContainer.js","sources":["../../../../src/VerticalNavigation/NavigationPopup/NavigationPopupContainer.tsx"],"sourcesContent":["import { Popper } from \"@mui/base\";\nimport ClickAwayListener from \"@mui/material/ClickAwayListener\";\n\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { getContainerElement } from \"../../utils/document\";\nimport { HvVerticalNavigation } from \"../VerticalNavigation\";\nimport { staticClasses, useClasses } from \"./NavigationPopup.styles\";\n\nexport { staticClasses as verticalNavigationPopupClasses };\n\nexport type HvVerticalNavigationPopupClasses = ExtractNames<typeof useClasses>;\n\nexport interface NavigationPopupContainerProps extends HvBaseProps {\n  anchorEl?: HTMLElement | null;\n  onClose?: () => void;\n  classes?: HvVerticalNavigationPopupClasses;\n}\n\nexport const NavigationPopupContainer = ({\n  anchorEl,\n  onClose,\n  children,\n  classes: classesProp,\n  className,\n  ...others\n}: NavigationPopupContainerProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const handleClickAway = () => onClose?.();\n\n  return (\n    <Popper\n      open\n      anchorEl={anchorEl}\n      placement=\"right-start\"\n      container={getContainerElement(rootId)}\n      className={cx(classes.popper, classes.popup, className)}\n      {...others}\n    >\n      <ClickAwayListener onClickAway={handleClickAway}>\n        <div className={classes.container}>\n          <HvVerticalNavigation open useIcons>\n            {children}\n          </HvVerticalNavigation>\n        </div>\n      </ClickAwayListener>\n    </Popper>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAoBO,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAAqC;AACnC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,EAAE,WAAW;AAEb,QAAA,kBAAkB,MAAM;AAG5B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAI;AAAA,MACJ;AAAA,MACA,WAAU;AAAA,MACV,WAAW,oBAAoB,MAAM;AAAA,MACrC,WAAW,GAAG,QAAQ,QAAQ,QAAQ,OAAO,SAAS;AAAA,MACrD,GAAG;AAAA,MAEJ,8BAAC,mBAAkB,EAAA,aAAa,iBAC9B,UAAA,oBAAC,SAAI,WAAW,QAAQ,WACtB,UAAA,oBAAC,wBAAqB,MAAI,MAAC,UAAQ,MAChC,UACH,GACF,EACF,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { DropRightXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useClasses } from "./NavigationSlider.styles.js";
@@ -9,45 +9,56 @@ import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
 const HvVerticalNavigationSlider = (props) => {
   const {
-    id,
+    className,
     classes: classesProp,
     data,
     selected,
     onNavigateToTarget,
     onNavigateToChild,
-    forwardButtonAriaLabel = "Navigate to submenu"
+    forwardButtonAriaLabel = "Navigate to submenu",
+    ...others
   } = useDefaultProps("HvVerticalNavigationSlider", props);
-  const { classes } = useClasses(classesProp);
-  return /* @__PURE__ */ jsx(HvListContainer, { interactive: true, id, children: data && data.map((item) => /* @__PURE__ */ jsx(
-    HvListItem,
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    HvListContainer,
     {
-      classes: {
-        root: classes.root,
-        selected: classes.listItemSelected,
-        focus: classes.listItemFocus
-      },
-      onClick: (event) => {
-        onNavigateToTarget?.(event, item);
-      },
-      "aria-label": item.label,
-      "aria-current": selected === item.id ? item.href ? "page" : true : void 0,
-      selected: selected === item.id,
-      startAdornment: item.icon ? /* @__PURE__ */ jsx("div", { children: item.icon }) : void 0,
-      endAdornment: item.data && item.data.length > 0 ? /* @__PURE__ */ jsx(
-        HvButton,
+      interactive: true,
+      className: cx(classes.listContainer, className),
+      ...others,
+      children: data?.map((item) => /* @__PURE__ */ jsx(
+        HvListItem,
         {
-          icon: true,
+          classes: {
+            root: classes.root,
+            selected: classes.listItemSelected,
+            focus: classes.listItemFocus,
+            disabled: classes.listItemDisabled
+          },
           onClick: (event) => {
-            onNavigateToChild?.(event, item);
+            onNavigateToTarget?.(event, item);
           },
-          "aria-label": forwardButtonAriaLabel,
-          children: /* @__PURE__ */ jsx(DropRightXS, {})
-        }
-      ) : void 0,
-      children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label })
-    },
-    item.id
-  )) });
+          "aria-label": item.label,
+          "aria-current": selected === item.id ? item.href ? "page" : true : void 0,
+          selected: selected === item.id,
+          startAdornment: item.icon ? /* @__PURE__ */ jsx("div", { children: item.icon }) : void 0,
+          endAdornment: item.data && item.data.length > 0 ? /* @__PURE__ */ jsx(
+            HvButton,
+            {
+              icon: true,
+              onClick: (event) => {
+                onNavigateToChild?.(event, item);
+              },
+              className: classes.forwardButton,
+              "aria-label": forwardButtonAriaLabel,
+              children: /* @__PURE__ */ jsx(DropRightXS, {})
+            }
+          ) : void 0,
+          children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label })
+        },
+        item.id
+      ))
+    }
+  );
 };
 export {
   HvVerticalNavigationSlider,

package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationSlider.js","sources":["../../../../src/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../../Button\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvListContainer, HvListItem } from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { NavigationData } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./NavigationSlider.styles\";\n\nexport { staticClasses as verticalNavigationSliderClasses };\n\nexport type HvVerticalNavigationSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationSliderProps {\n  /**\n   * Id to be applied to the root node of the panel.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvVerticalNavigationSliderClasses;\n  /**\n   * An array containing the data for each menu item.\n   *\n   * id - the id to be applied to the root element.\n   * label - the label to be rendered on the menu item.\n   * icon - the icon react element\n   * data - sub-menu items\n   * href - the url used for navigation.\n   * target - the behavior when opening an url.\n   */\n  data?: NavigationData[];\n  /**\n   * The selected item id.\n   */\n  selected?: string;\n  /**\n   * Triggered when the item is clicked.\n   */\n  onNavigateToTarget?: (\n    event: React.MouseEvent<HTMLLIElement>,\n    item: NavigationData,\n  ) => void;\n  /**\n   * Triggered when the navigate to child button is clicked.\n   */\n  onNavigateToChild?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    item: NavigationData,\n  ) => void;\n  /** Aria label to apply to the navigate to submenu button on the list items. */\n  forwardButtonAriaLabel?: string;\n}\n\nexport const HvVerticalNavigationSlider = (\n  props: HvVerticalNavigationSliderProps,\n) => {\n  const {\n    id,\n    classes: classesProp,\n    data,\n    selected,\n    onNavigateToTarget,\n    onNavigateToChild,\n    forwardButtonAriaLabel = \"Navigate to submenu\",\n  } = useDefaultProps(\"HvVerticalNavigationSlider\", props);\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <HvListContainer interactive id={id}>\n      {data &&\n        data.map((item) => (\n          <HvListItem\n            key={item.id}\n            classes={{\n              root: classes.root,\n              selected: classes.listItemSelected,\n              focus: classes.listItemFocus,\n            }}\n            onClick={(event) => {\n              onNavigateToTarget?.(event, item);\n            }}\n            aria-label={item.label}\n            aria-current={\n              selected === item.id ? (item.href ? \"page\" : true) : undefined\n            }\n            selected={selected === item.id}\n            startAdornment={item.icon ? <div>{item.icon}</div> : undefined}\n            endAdornment={\n              item.data && item.data.length > 0 ? (\n                <HvButton\n                  icon\n                  onClick={(event) => {\n                    onNavigateToChild?.(event, item);\n                  }}\n                  aria-label={forwardButtonAriaLabel}\n                >\n                  <DropRightXS />\n                </HvButton>\n              ) : undefined\n            }\n          >\n            <HvOverflowTooltip data={item.label} />\n          </HvListItem>\n        ))}\n    </HvListContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAwDa,MAAA,6BAA6B,CACxC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,yBAAyB;AAAA,EAAA,IACvB,gBAAgB,8BAA8B,KAAK;AACvD,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAGxC,SAAA,oBAAC,mBAAgB,aAAW,MAAC,IAC1B,UACC,QAAA,KAAK,IAAI,CAAC,SACR;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,UAAU,QAAQ;AAAA,QAClB,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA,SAAS,CAAC,UAAU;AAClB,6BAAqB,OAAO,IAAI;AAAA,MAClC;AAAA,MACA,cAAY,KAAK;AAAA,MACjB,gBACE,aAAa,KAAK,KAAM,KAAK,OAAO,SAAS,OAAQ;AAAA,MAEvD,UAAU,aAAa,KAAK;AAAA,MAC5B,gBAAgB,KAAK,2BAAQ,OAAK,EAAA,UAAA,KAAK,MAAK,IAAS;AAAA,MACrD,cACE,KAAK,QAAQ,KAAK,KAAK,SAAS,IAC9B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,SAAS,CAAC,UAAU;AAClB,gCAAoB,OAAO,IAAI;AAAA,UACjC;AAAA,UACA,cAAY;AAAA,UAEZ,8BAAC,aAAY,EAAA;AAAA,QAAA;AAAA,MAEb,IAAA;AAAA,MAGN,UAAC,oBAAA,mBAAA,EAAkB,MAAM,KAAK,OAAO;AAAA,IAAA;AAAA,IA7BhC,KAAK;AAAA,EA+Bb,CAAA,EACL,CAAA;AAEJ;"}
+{"version":3,"file":"NavigationSlider.js","sources":["../../../../src/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../../Button\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport {\n  HvListContainer,\n  HvListContainerProps,\n  HvListItem,\n} from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { NavigationData } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./NavigationSlider.styles\";\n\nexport { staticClasses as verticalNavigationSliderClasses };\n\nexport type HvVerticalNavigationSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationSliderProps\n  extends Omit<HvListContainerProps, \"classes\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalNavigationSliderClasses;\n  /**\n   * An array containing the data for each menu item.\n   *\n   * id - the id to be applied to the root element.\n   * label - the label to be rendered on the menu item.\n   * icon - the icon react element\n   * data - sub-menu items\n   * href - the url used for navigation.\n   * target - the behavior when opening an url.\n   */\n  data?: NavigationData[];\n  /** The selected item id. */\n  selected?: string;\n  /** Triggered when the item is clicked. */\n  onNavigateToTarget?: (\n    event: React.MouseEvent<HTMLLIElement>,\n    item: NavigationData,\n  ) => void;\n  /** Triggered when the navigate to child button is clicked. */\n  onNavigateToChild?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    item: NavigationData,\n  ) => void;\n  /** Aria label to apply to the navigate to submenu button on the list items. */\n  forwardButtonAriaLabel?: string;\n}\n\nexport const HvVerticalNavigationSlider = (\n  props: HvVerticalNavigationSliderProps,\n) => {\n  const {\n    className,\n    classes: classesProp,\n    data,\n    selected,\n    onNavigateToTarget,\n    onNavigateToChild,\n    forwardButtonAriaLabel = \"Navigate to submenu\",\n    ...others\n  } = useDefaultProps(\"HvVerticalNavigationSlider\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <HvListContainer\n      interactive\n      className={cx(classes.listContainer, className)}\n      {...others}\n    >\n      {data?.map((item) => (\n        <HvListItem\n          key={item.id}\n          classes={{\n            root: classes.root,\n            selected: classes.listItemSelected,\n            focus: classes.listItemFocus,\n            disabled: classes.listItemDisabled,\n          }}\n          onClick={(event) => {\n            onNavigateToTarget?.(event, item);\n          }}\n          aria-label={item.label}\n          aria-current={\n            selected === item.id ? (item.href ? \"page\" : true) : undefined\n          }\n          selected={selected === item.id}\n          startAdornment={item.icon ? <div>{item.icon}</div> : undefined}\n          endAdornment={\n            item.data && item.data.length > 0 ? (\n              <HvButton\n                icon\n                onClick={(event) => {\n                  onNavigateToChild?.(event, item);\n                }}\n                className={classes.forwardButton}\n                aria-label={forwardButtonAriaLabel}\n              >\n                <DropRightXS />\n              </HvButton>\n            ) : undefined\n          }\n        >\n          <HvOverflowTooltip data={item.label} />\n        </HvListItem>\n      ))}\n    </HvListContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAiDa,MAAA,6BAA6B,CACxC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,yBAAyB;AAAA,IACzB,GAAG;AAAA,EAAA,IACD,gBAAgB,8BAA8B,KAAK;AAEvD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAW;AAAA,MACX,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC7C,GAAG;AAAA,MAEH,UAAA,MAAM,IAAI,CAAC,SACV;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,YACd,UAAU,QAAQ;AAAA,YAClB,OAAO,QAAQ;AAAA,YACf,UAAU,QAAQ;AAAA,UACpB;AAAA,UACA,SAAS,CAAC,UAAU;AAClB,iCAAqB,OAAO,IAAI;AAAA,UAClC;AAAA,UACA,cAAY,KAAK;AAAA,UACjB,gBACE,aAAa,KAAK,KAAM,KAAK,OAAO,SAAS,OAAQ;AAAA,UAEvD,UAAU,aAAa,KAAK;AAAA,UAC5B,gBAAgB,KAAK,2BAAQ,OAAK,EAAA,UAAA,KAAK,MAAK,IAAS;AAAA,UACrD,cACE,KAAK,QAAQ,KAAK,KAAK,SAAS,IAC9B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAI;AAAA,cACJ,SAAS,CAAC,UAAU;AAClB,oCAAoB,OAAO,IAAI;AAAA,cACjC;AAAA,cACA,WAAW,QAAQ;AAAA,cACnB,cAAY;AAAA,cAEZ,8BAAC,aAAY,EAAA;AAAA,YAAA;AAAA,UAEb,IAAA;AAAA,UAGN,UAAC,oBAAA,mBAAA,EAAkB,MAAM,KAAK,OAAO;AAAA,QAAA;AAAA,QA/BhC,KAAK;AAAA,MAAA,CAiCb;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.styles.js

@@ -15,17 +15,14 @@ const { staticClasses, useClasses } = createClasses(
     },
     listItemSelected: {
       background: theme.colors.atmo3,
-      borderLeft: `4px solid ${theme.colors.secondary}`,
-      "& *": {
-        background: theme.colors.atmo3
-      }
+      borderLeft: `4px solid ${theme.colors.secondary}`
     },
     listItemFocus: {
-      background: theme.colors.atmo3,
-      "& *": {
-        background: theme.colors.atmo3
-      }
-    }
+      background: theme.colors.atmo3
+    },
+    forwardButton: {},
+    listContainer: {},
+    listItemDisabled: {}
   }
 );
 export {

package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationSlider.styles.js","sources":["../../../../src/VerticalNavigation/NavigationSlider/NavigationSlider.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationSlider\",\n  {\n    root: {\n      display: \"flex\",\n      alignItems: \"center\",\n      borderLeft: `4px solid transparent`,\n      minHeight: \"48px\",\n      marginBottom: \"8px\",\n      \"& > button\": {\n        marginLeft: \"auto\",\n      },\n    },\n    listItemSelected: {\n      background: theme.colors.atmo3,\n      borderLeft: `4px solid ${theme.colors.secondary}`,\n      \"& *\": {\n        background: theme.colors.atmo3,\n      },\n    },\n    listItemFocus: {\n      background: theme.colors.atmo3,\n      \"& *\": {\n        background: theme.colors.atmo3,\n      },\n    },\n  },\n);\n"],"names":[],"mappings":";;AAIa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,QACZ,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB,YAAY,MAAM,OAAO;AAAA,MACzB,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,MAC/C,OAAO;AAAA,QACL,YAAY,MAAM,OAAO;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,eAAe;AAAA,MACb,YAAY,MAAM,OAAO;AAAA,MACzB,OAAO;AAAA,QACL,YAAY,MAAM,OAAO;AAAA,MAC3B;AAAA,IACF;AAAA,EACF;AACF;"}
+{"version":3,"file":"NavigationSlider.styles.js","sources":["../../../../src/VerticalNavigation/NavigationSlider/NavigationSlider.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationSlider\",\n  {\n    root: {\n      display: \"flex\",\n      alignItems: \"center\",\n      borderLeft: `4px solid transparent`,\n      minHeight: \"48px\",\n      marginBottom: \"8px\",\n      \"& > button\": {\n        marginLeft: \"auto\",\n      },\n    },\n    listItemSelected: {\n      background: theme.colors.atmo3,\n      borderLeft: `4px solid ${theme.colors.secondary}`,\n    },\n    listItemFocus: {\n      background: theme.colors.atmo3,\n    },\n    forwardButton: {},\n    listContainer: {},\n    listItemDisabled: {},\n  },\n);\n"],"names":[],"mappings":";;AAIa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,QACZ,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB,YAAY,MAAM,OAAO;AAAA,MACzB,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,IACjD;AAAA,IACA,eAAe;AAAA,MACb,YAAY,MAAM,OAAO;AAAA,IAC3B;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,eAAe,CAAC;AAAA,IAChB,kBAAkB,CAAC;AAAA,EACrB;AACF;"}

package/dist/esm/VerticalNavigation/TreeView/IconWrapper/IconWrapper.js

@@ -1,29 +1,18 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { useContext } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Forwards } from "@hitachivantara/uikit-react-icons";
-import { VerticalNavigationContext } from "../../VerticalNavigationContext.js";
-import { StyledIconsContainer, SpacerDiv } from "./IconWrapper.styles.js";
 import { HvAvatar } from "../../../Avatar/Avatar.js";
 const IconWrapper = ({
   icon,
   label,
   hasChildren,
   showAvatar,
-  isOpen
+  isOpen,
+  hasAnyChildWithData,
+  ...others
 }) => {
-  const { hasAnyChildWithData } = useContext(VerticalNavigationContext);
-  return /* @__PURE__ */ jsxs(StyledIconsContainer, { hasAnyChildWithData, children: [
-    showAvatar ? /* @__PURE__ */ jsx(
-      HvAvatar,
-      {
-        variant: "square",
-        size: "xs",
-        backgroundColor: "secondary_80",
-        style: { fontSize: "15px" },
-        children: label.substring(0, 1)
-      }
-    ) : icon,
-    hasChildren && !isOpen ? /* @__PURE__ */ jsx(Forwards, { iconSize: "XS" }) : hasAnyChildWithData && !isOpen && /* @__PURE__ */ jsx(SpacerDiv, {})
+  return /* @__PURE__ */ jsxs("div", { ...others, children: [
+    showAvatar ? /* @__PURE__ */ jsx(HvAvatar, { variant: "square", size: "xs", backgroundColor: "secondary_80", children: label?.substring(0, 1) }) : icon,
+    hasChildren && !isOpen ? /* @__PURE__ */ jsx(Forwards, { iconSize: "XS" }) : hasAnyChildWithData && !isOpen && /* @__PURE__ */ jsx("div", {})
   ] });
 };
 export {

package/dist/esm/VerticalNavigation/TreeView/IconWrapper/IconWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconWrapper.js","sources":["../../../../../src/VerticalNavigation/TreeView/IconWrapper/IconWrapper.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"../../../Avatar\";\nimport { VerticalNavigationContext } from \"../../VerticalNavigationContext\";\nimport { SpacerDiv, StyledIconsContainer } from \"./IconWrapper.styles\";\n\nexport const IconWrapper = ({\n  icon,\n  label,\n  hasChildren,\n  showAvatar,\n  isOpen,\n}) => {\n  const { hasAnyChildWithData } = useContext(VerticalNavigationContext);\n  return (\n    <StyledIconsContainer hasAnyChildWithData={hasAnyChildWithData}>\n      {showAvatar ? (\n        <HvAvatar\n          variant=\"square\"\n          size=\"xs\"\n          backgroundColor=\"secondary_80\"\n          style={{ fontSize: \"15px\" }}\n        >\n          {label.substring(0, 1)}\n        </HvAvatar>\n      ) : (\n        icon\n      )}\n\n      {hasChildren && !isOpen ? (\n        <Forwards iconSize=\"XS\" />\n      ) : (\n        hasAnyChildWithData && !isOpen && <SpacerDiv />\n      )}\n    </StyledIconsContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAOO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,oBAAA,IAAwB,WAAW,yBAAyB;AAElE,SAAA,qBAAC,wBAAqB,qBACnB,UAAA;AAAA,IACC,aAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,iBAAgB;AAAA,QAChB,OAAO,EAAE,UAAU,OAAO;AAAA,QAEzB,UAAA,MAAM,UAAU,GAAG,CAAC;AAAA,MAAA;AAAA,IAAA,IAGvB;AAAA,IAGD,eAAe,CAAC,SACf,oBAAC,UAAS,EAAA,UAAS,MAAK,IAExB,uBAAuB,CAAC,UAAU,oBAAC,WAAU,CAAA,CAAA;AAAA,EAEjD,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"IconWrapper.js","sources":["../../../../../src/VerticalNavigation/TreeView/IconWrapper/IconWrapper.tsx"],"sourcesContent":["import { HvBaseProps } from \"packages/core/src/types/generic\";\nimport { Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"../../../Avatar\";\n\ninterface IconWrapperProps extends HvBaseProps {\n  icon?: React.ReactNode;\n  label?: string;\n  hasChildren?: boolean;\n  showAvatar?: boolean;\n  isOpen?: boolean;\n  hasAnyChildWithData?: boolean;\n}\n\nexport const IconWrapper = ({\n  icon,\n  label,\n  hasChildren,\n  showAvatar,\n  isOpen,\n  hasAnyChildWithData,\n  ...others\n}: IconWrapperProps) => {\n  return (\n    <div {...others}>\n      {showAvatar ? (\n        <HvAvatar variant=\"square\" size=\"xs\" backgroundColor=\"secondary_80\">\n          {label?.substring(0, 1)}\n        </HvAvatar>\n      ) : (\n        icon\n      )}\n      {hasChildren && !isOpen ? (\n        <Forwards iconSize=\"XS\" />\n      ) : (\n        hasAnyChildWithData && !isOpen && <div />\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AAcO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AAEpB,SAAA,qBAAC,OAAK,EAAA,GAAG,QACN,UAAA;AAAA,IAAA,aACE,oBAAA,UAAA,EAAS,SAAQ,UAAS,MAAK,MAAK,iBAAgB,gBAClD,UAAO,OAAA,UAAU,GAAG,CAAC,EACxB,CAAA,IAEA;AAAA,IAED,eAAe,CAAC,SACf,oBAAC,UAAS,EAAA,UAAS,MAAK,IAExB,uBAAuB,CAAC,UAAU,oBAAC,OAAI,CAAA,CAAA;AAAA,EAE3C,EAAA,CAAA;AAEJ;"}