@hitachivantara/uikit-react-core 5.25.0 → 5.25.1

package/dist/cjs/components/VerticalNavigation/Header/Header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.cjs","sources":["../../../../../src/components/VerticalNavigation/Header/Header.tsx"],"sourcesContent":["import { Backwards, Forwards, Menu } from \"@hitachivantara/uikit-react-icons\";\n\nimport { MouseEventHandler, useContext, useMemo } from \"react\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { StyledCollapseButton, StyledHeader } from \"./Header.styles\";\nimport verticalNavigationHeaderClasses, {\n  HvVerticalNavigationHeaderClasses,\n} from \"./headerClasses\";\n\nexport interface HvVerticalNavigationHeaderProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The title text to show on Header.\n   */\n  title?: string;\n  /**\n   * Icon to show when Vertical Navigation is collapsed.\n   */\n  openIcon?: React.ReactNode;\n  /**\n   * Icon to show when Vertical Navigation is expanded.\n   */\n  closeIcon?: React.ReactNode;\n  /**\n   * Props for the collapse button.\n   */\n  collapseButtonProps?: HvButtonProps;\n  /**\n   * Props for the back button.\n   */\n  backButtonProps?: HvButtonProps;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvVerticalNavigationHeaderClasses;\n  /**\n   * Handler for the collapse button.\n   */\n  onCollapseButtonClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport const HvVerticalNavigationHeader = ({\n  title,\n  openIcon = <Forwards />,\n  closeIcon = <Backwards />,\n  collapseButtonProps,\n  backButtonProps,\n  className,\n  classes,\n  onCollapseButtonClick,\n  ...others\n}: HvVerticalNavigationHeaderProps) => {\n  const {\n    isOpen,\n    useIcons,\n    headerTitle,\n    slider,\n    navigateToParentHandler,\n    parentItem,\n  } = useContext(VerticalNavigationContext);\n\n  openIcon = !useIcons ? <Menu /> : openIcon;\n\n  const backButtonClickHandler = () => {\n    if (navigateToParentHandler) navigateToParentHandler();\n  };\n\n  // whenever we're in a sublevel, the parentItem is always a single item.\n  // In the first level it's always an array with the first level elements.\n  const shouldShowTitle = useMemo(\n    () => !slider || (slider && !Array.isArray(parentItem)),\n    [parentItem, slider]\n  );\n\n  return shouldShowTitle ? (\n    <StyledHeader\n      className={clsx(\n        className,\n        verticalNavigationHeaderClasses.root,\n        classes?.root,\n        !isOpen &&\n          clsx(verticalNavigationHeaderClasses.minimized, classes?.minimized)\n      )}\n      {...others}\n    >\n      {isOpen && headerTitle && slider && (\n        <HvButton icon onClick={backButtonClickHandler} aria-label=\"Back\" {...backButtonProps}>\n          <Backwards iconSize=\"XS\" />\n        </HvButton>\n      )}\n      {isOpen && (\n        <HvTypography variant={slider ? \"label\" : \"title3\"}>\n          {headerTitle && slider ? headerTitle : title}\n        </HvTypography>\n      )}\n      {onCollapseButtonClick && (\n        <StyledCollapseButton\n          icon\n          onClick={onCollapseButtonClick}\n          classes={{\n            root: isOpen ? \"\" : verticalNavigationHeaderClasses.minimized,\n          }}\n          {...collapseButtonProps}\n        >\n          {isOpen ? closeIcon : openIcon}\n        </StyledCollapseButton>\n      )}\n    </StyledHeader>\n  ) : null;\n};\n"],"names":["HvVerticalNavigationHeader","title","openIcon","_jsx","Forwards","closeIcon","Backwards","collapseButtonProps","backButtonProps","className","classes","onCollapseButtonClick","others","isOpen","useIcons","headerTitle","slider","navigateToParentHandler","parentItem","useContext","VerticalNavigationContext","Menu","backButtonClickHandler","shouldShowTitle","useMemo","Array","isArray","StyledHeader","clsx","verticalNavigationHeaderClasses","root","minimized","children","HvButton","icon","onClick","iconSize","HvTypography","variant","StyledCollapseButton"],"mappings":";;;;;;;;;;;AAsDO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC,WAAWC,2BAAAA,IAACC,4BAAU;AAAA,EACtBC,YAAYF,2BAAAA,IAACG,6BAAW;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC4B,MAAM;AAC/B,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAExClB,aAAW,CAACY,WAAWX,2BAAAA,IAACkB,gBAAAA,MAAI,CAAA,CAAE,IAAInB;AAElC,QAAMoB,yBAAyBA,MAAM;AAC/BL,QAAAA;AAAiD;EAAA;AAKvD,QAAMM,kBAAkBC,MAAAA,QACtB,MAAM,CAACR,UAAWA,UAAU,CAACS,MAAMC,QAAQR,UAAU,GACrD,CAACA,YAAYF,MAAM,CACrB;AAEOO,SAAAA,kDACJI,4BAAY;AAAA,IACXlB,WAAWmB,KAAAA,KACTnB,WACAoB,cAAAA,QAAgCC,MAChCpB,mCAASoB,MACT,CAACjB,UACCe,KAAKC,KAAAA,cAAAA,QAAgCE,WAAWrB,mCAASqB,SAAS,CACtE;AAAA,IAAE,GACEnB;AAAAA,IAAMoB,UAAA,CAETnB,UAAUE,eAAeC,yCACvBiB,OAAAA,UAAQ;AAAA,MAACC,MAAI;AAAA,MAACC,SAASb;AAAAA,MAAwB,cAAW;AAAA,MAAM,GAAKd;AAAAA,MAAewB,yCAClF1B,2BAAS;AAAA,QAAC8B,UAAS;AAAA,MAAA,CAAM;AAAA,IAAA,CAClB,GAEXvB,UACCV,2BAAAA,IAACkC,yBAAY;AAAA,MAACC,SAAStB,SAAS,UAAU;AAAA,MAASgB,UAChDjB,eAAeC,SAASD,cAAcd;AAAAA,IAAAA,CAC3B,GAEfU,yBACCR,2BAAAA,IAACoC,oCAAoB;AAAA,MACnBL,MAAI;AAAA,MACJC,SAASxB;AAAAA,MACTD,SAAS;AAAA,QACPoB,MAAMjB,SAAS,KAAKgB,cAAAA,QAAgCE;AAAAA,MACtD;AAAA,MAAE,GACExB;AAAAA,MAAmByB,UAEtBnB,SAASR,YAAYH;AAAAA,IAAAA,CACF,CACvB;AAAA,EACW,CAAA,IACZ;AACN;;"}
+{"version":3,"file":"Header.cjs","sources":["../../../../../src/components/VerticalNavigation/Header/Header.tsx"],"sourcesContent":["import { Backwards, Forwards, Menu } from \"@hitachivantara/uikit-react-icons\";\n\nimport { MouseEventHandler, useContext, useMemo } from \"react\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as verticalNavigationHeaderClasses };\n\nexport type HvVerticalNavigationHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationHeaderProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The title text to show on Header.\n   */\n  title?: string;\n  /**\n   * Icon to show when Vertical Navigation is collapsed.\n   */\n  openIcon?: React.ReactNode;\n  /**\n   * Icon to show when Vertical Navigation is expanded.\n   */\n  closeIcon?: React.ReactNode;\n  /**\n   * Props for the collapse button.\n   */\n  collapseButtonProps?: HvButtonProps;\n  /**\n   * Props for the back button.\n   */\n  backButtonProps?: HvButtonProps;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvVerticalNavigationHeaderClasses;\n  /**\n   * Handler for the collapse button.\n   */\n  onCollapseButtonClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport const HvVerticalNavigationHeader = ({\n  title,\n  openIcon = <Forwards />,\n  closeIcon = <Backwards />,\n  collapseButtonProps,\n  backButtonProps,\n  className,\n  classes: classesProp,\n  onCollapseButtonClick,\n  ...others\n}: HvVerticalNavigationHeaderProps) => {\n  const {\n    isOpen,\n    useIcons,\n    headerTitle,\n    slider,\n    navigateToParentHandler,\n    parentItem,\n  } = useContext(VerticalNavigationContext);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  openIcon = !useIcons ? <Menu /> : openIcon;\n\n  const backButtonClickHandler = () => {\n    if (navigateToParentHandler) navigateToParentHandler();\n  };\n\n  // whenever we're in a sublevel, the parentItem is always a single item.\n  // In the first level it's always an array with the first level elements.\n  const shouldShowTitle = useMemo(\n    () => !slider || (slider && !Array.isArray(parentItem)),\n    [parentItem, slider]\n  );\n\n  return shouldShowTitle ? (\n    <div\n      className={cx(classes.root, { [classes.minimized]: !isOpen }, className)}\n      {...others}\n    >\n      {isOpen && headerTitle && slider && (\n        <HvButton\n          icon\n          onClick={backButtonClickHandler}\n          aria-label=\"Back\"\n          {...backButtonProps}\n        >\n          <Backwards iconSize=\"XS\" />\n        </HvButton>\n      )}\n      {isOpen && (\n        <HvTypography variant={slider ? \"label\" : \"title3\"}>\n          {headerTitle && slider ? headerTitle : title}\n        </HvTypography>\n      )}\n      {onCollapseButtonClick && (\n        <HvButton\n          icon\n          onClick={onCollapseButtonClick}\n          className={classes.collapseButton}\n          classes={{\n            root: isOpen ? \"\" : classes.minimized,\n          }}\n          {...collapseButtonProps}\n        >\n          {isOpen ? closeIcon : openIcon}\n        </HvButton>\n      )}\n    </div>\n  ) : null;\n};\n"],"names":["HvVerticalNavigationHeader","title","openIcon","_jsx","Forwards","closeIcon","Backwards","collapseButtonProps","backButtonProps","className","classes","classesProp","onCollapseButtonClick","others","isOpen","useIcons","headerTitle","slider","navigateToParentHandler","parentItem","useContext","VerticalNavigationContext","cx","useClasses","Menu","backButtonClickHandler","shouldShowTitle","useMemo","Array","isArray","root","minimized","children","HvButton","icon","onClick","iconSize","HvTypography","variant","collapseButton"],"mappings":";;;;;;;;;AAqDO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC,WAAWC,2BAAAA,IAACC,4BAAU;AAAA,EACtBC,YAAYF,2BAAAA,IAACG,6BAAW;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACA,GAAGC;AAC4B,MAAM;AAC/B,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAElC,QAAA;AAAA,IAAEX;AAAAA,IAASY;AAAAA,EAAAA,IAAOC,cAAAA,WAAWZ,WAAW;AAE9CT,aAAW,CAACa,WAAWZ,2BAAAA,IAACqB,gBAAAA,MAAI,CAAA,CAAE,IAAItB;AAElC,QAAMuB,yBAAyBA,MAAM;AAC/BP,QAAAA;AAAiD;EAAA;AAKvD,QAAMQ,kBAAkBC,MAAAA,QACtB,MAAM,CAACV,UAAWA,UAAU,CAACW,MAAMC,QAAQV,UAAU,GACrD,CAACA,YAAYF,MAAM,CACrB;AAEOS,SAAAA,kDACL,OAAA;AAAA,IACEjB,WAAWa,GAAGZ,QAAQoB,MAAM;AAAA,MAAE,CAACpB,QAAQqB,SAAS,GAAG,CAACjB;AAAAA,OAAUL,SAAS;AAAA,IAAE,GACrEI;AAAAA,IAAMmB,UAAA,CAETlB,UAAUE,eAAeC,yCACvBgB,OAAAA,UAAQ;AAAA,MACPC,MAAI;AAAA,MACJC,SAASV;AAAAA,MACT,cAAW;AAAA,MAAM,GACbjB;AAAAA,MAAewB,yCAElB1B,2BAAS;AAAA,QAAC8B,UAAS;AAAA,MAAA,CAAM;AAAA,IAAA,CAClB,GAEXtB,UACCX,2BAAAA,IAACkC,yBAAY;AAAA,MAACC,SAASrB,SAAS,UAAU;AAAA,MAASe,UAChDhB,eAAeC,SAASD,cAAcf;AAAAA,IAAAA,CAC3B,GAEfW,yBACCT,2BAAAA,IAAC8B,iBAAQ;AAAA,MACPC,MAAI;AAAA,MACJC,SAASvB;AAAAA,MACTH,WAAWC,QAAQ6B;AAAAA,MACnB7B,SAAS;AAAA,QACPoB,MAAMhB,SAAS,KAAKJ,QAAQqB;AAAAA,MAC9B;AAAA,MAAE,GACExB;AAAAA,MAAmByB,UAEtBlB,SAAST,YAAYH;AAAAA,IAAAA,CACd,CACX;AAAA,EACE,CAAA,IACH;AACN;;;"}

package/dist/cjs/components/VerticalNavigation/Header/Header.styles.cjs

@@ -1,43 +1,27 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
-const React = require("react");
-const headerClasses = require("./headerClasses.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const Button = require("../../Button/Button.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const StyledHeader = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e1arrhkt1"
-} : {
-  target: "e1arrhkt1",
-  label: "StyledHeader"
-})({
-  width: "100%",
-  display: "flex",
-  marginTop: "12px",
-  alignItems: "center",
-  [`&.${headerClasses.default.minimized}`]: {
+const classes = require("../../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvVerticalNavigationHeader", {
+  root: {
+    width: "100%",
+    display: "flex",
+    marginTop: "12px",
+    alignItems: "center"
+  },
+  minimized: {
     justifyContent: "center",
     paddingRight: 0
+  },
+  collapseButton: {
+    marginLeft: "auto",
+    "&$minimized": {
+      marginLeft: 0
+    }
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0hlYWRlci9IZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPNEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9WZXJ0aWNhbE5hdmlnYXRpb24vSGVhZGVyL0hlYWRlci5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBIdkJ1dHRvbiwgSHZCdXR0b25Qcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0J1dHRvblwiO1xuaW1wb3J0IHsgUG9seW1vcnBoaWNSZWYgfSBmcm9tIFwiQGNvcmUvdHlwZXMvZ2VuZXJpY1wiO1xuXG5pbXBvcnQgdmVydGljYWxOYXZpZ2F0aW9uSGVhZGVyQ2xhc3NlcyBmcm9tIFwiLi9oZWFkZXJDbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRIZWFkZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBtYXJnaW5Ub3A6IFwiMTJweFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuXG4gIFtgJi4ke3ZlcnRpY2FsTmF2aWdhdGlvbkhlYWRlckNsYXNzZXMubWluaW1pemVkfWBdOiB7XG4gICAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG4gICAgcGFkZGluZ1JpZ2h0OiAwLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb2xsYXBzZUJ1dHRvbiA9IHN0eWxlZChcbiAgZm9yd2FyZFJlZigocHJvcHM6IEh2QnV0dG9uUHJvcHMsIHJlZj86IFBvbHltb3JwaGljUmVmPFwiYnV0dG9uXCI+KSA9PiB7XG4gICAgcmV0dXJuIDxIdkJ1dHRvbiB7Li4ucHJvcHN9IHJlZj17cmVmfSAvPjtcbiAgfSlcbikoe1xuICBtYXJnaW5MZWZ0OiBcImF1dG9cIixcblxuICBbYCYuJHt2ZXJ0aWNhbE5hdmlnYXRpb25IZWFkZXJDbGFzc2VzLm1pbmltaXplZH1gXToge1xuICAgIG1hcmdpbkxlZnQ6IDAsXG4gIH0sXG59KTtcbiJdfQ== */");
-const StyledCollapseButton = /* @__PURE__ */ _styled__default.default(React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-    ...props,
-    ref
-  });
-}), process.env.NODE_ENV === "production" ? {
-  target: "e1arrhkt0"
-} : {
-  target: "e1arrhkt0",
-  label: "StyledCollapseButton"
-})({
-  marginLeft: "auto",
-  [`&.${headerClasses.default.minimized}`]: {
-    marginLeft: 0
-  }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0hlYWRlci9IZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQm9DIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0hlYWRlci9IZWFkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgZm9yd2FyZFJlZiB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgSHZCdXR0b24sIEh2QnV0dG9uUHJvcHMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9CdXR0b25cIjtcbmltcG9ydCB7IFBvbHltb3JwaGljUmVmIH0gZnJvbSBcIkBjb3JlL3R5cGVzL2dlbmVyaWNcIjtcblxuaW1wb3J0IHZlcnRpY2FsTmF2aWdhdGlvbkhlYWRlckNsYXNzZXMgZnJvbSBcIi4vaGVhZGVyQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSGVhZGVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgbWFyZ2luVG9wOiBcIjEycHhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcblxuICBbYCYuJHt2ZXJ0aWNhbE5hdmlnYXRpb25IZWFkZXJDbGFzc2VzLm1pbmltaXplZH1gXToge1xuICAgIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICAgIHBhZGRpbmdSaWdodDogMCxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29sbGFwc2VCdXR0b24gPSBzdHlsZWQoXG4gIGZvcndhcmRSZWYoKHByb3BzOiBIdkJ1dHRvblByb3BzLCByZWY/OiBQb2x5bW9ycGhpY1JlZjxcImJ1dHRvblwiPikgPT4ge1xuICAgIHJldHVybiA8SHZCdXR0b24gey4uLnByb3BzfSByZWY9e3JlZn0gLz47XG4gIH0pXG4pKHtcbiAgbWFyZ2luTGVmdDogXCJhdXRvXCIsXG5cbiAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uSGVhZGVyQ2xhc3Nlcy5taW5pbWl6ZWR9YF06IHtcbiAgICBtYXJnaW5MZWZ0OiAwLFxuICB9LFxufSk7XG4iXX0= */");
-exports.StyledCollapseButton = StyledCollapseButton;
-exports.StyledHeader = StyledHeader;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Header.styles.cjs.map

package/dist/cjs/components/VerticalNavigation/Header/Header.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.styles.cjs","sources":["../../../../../src/components/VerticalNavigation/Header/Header.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { forwardRef } from \"react\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { PolymorphicRef } from \"@core/types/generic\";\n\nimport verticalNavigationHeaderClasses from \"./headerClasses\";\n\nexport const StyledHeader = styled(\"div\")({\n  width: \"100%\",\n  display: \"flex\",\n  marginTop: \"12px\",\n  alignItems: \"center\",\n\n  [`&.${verticalNavigationHeaderClasses.minimized}`]: {\n    justifyContent: \"center\",\n    paddingRight: 0,\n  },\n});\n\nexport const StyledCollapseButton = styled(\n  forwardRef((props: HvButtonProps, ref?: PolymorphicRef<\"button\">) => {\n    return <HvButton {...props} ref={ref} />;\n  })\n)({\n  marginLeft: \"auto\",\n\n  [`&.${verticalNavigationHeaderClasses.minimized}`]: {\n    marginLeft: 0,\n  },\n});\n"],"names":["StyledHeader","_styled","process","env","NODE_ENV","target","label","width","display","marginTop","alignItems","verticalNavigationHeaderClasses","minimized","justifyContent","paddingRight","StyledCollapseButton","forwardRef","props","ref","HvButton","marginLeft"],"mappings":";;;;;;;;;AAOO,MAAMA,eAAsBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACxCC,OAAO;AAAA,EACPC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,YAAY;AAAA,EAEZ,CAAE,KAAIC,sBAAgCC,WAAW,GAAG;AAAA,IAClDC,gBAAgB;AAAA,IAChBC,cAAc;AAAA,EAChB;AACF,GAACZ,QAAAC,IAAAC,aAAC,eAAA,KAAA,6lDAAA;AAEK,MAAMW,uBAAuBd,iCAAAA,QAClCe,MAAAA,WAAW,CAACC,OAAsBC,QAAmC;AACnE,wCAAQC,OAAAA,UAAQ;AAAA,IAAA,GAAKF;AAAAA,IAAOC;AAAAA,EAAAA,CAAW;AACzC,CAAC,GAAChB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CACJ,EAAE;AAAA,EACAc,YAAY;AAAA,EAEZ,CAAE,KAAIT,sBAAgCC,WAAW,GAAG;AAAA,IAClDQ,YAAY;AAAA,EACd;AACF,GAAClB,QAAAC,IAAAC,aAAC,eAAA,KAAA,6lDAAA;;;"}
+{"version":3,"file":"Header.styles.cjs","sources":["../../../../../src/components/VerticalNavigation/Header/Header.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationHeader\",\n  {\n    root: {\n      width: \"100%\",\n      display: \"flex\",\n      marginTop: \"12px\",\n      alignItems: \"center\",\n    },\n    minimized: {\n      justifyContent: \"center\",\n      paddingRight: 0,\n    },\n    collapseButton: {\n      marginLeft: \"auto\",\n      \"&$minimized\": {\n        marginLeft: 0,\n      },\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","width","display","marginTop","alignItems","minimized","justifyContent","paddingRight","collapseButton","marginLeft"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAC3C,8BACA;AAAA,EACEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,YAAY;AAAA,EACd;AAAA,EACAC,WAAW;AAAA,IACTC,gBAAgB;AAAA,IAChBC,cAAc;AAAA,EAChB;AAAA,EACAC,gBAAgB;AAAA,IACdC,YAAY;AAAA,IACZ,eAAe;AAAA,MACbA,YAAY;AAAA,IACd;AAAA,EACF;AACF,CACF;;;"}

package/dist/cjs/components/VerticalNavigation/Navigation/Navigation.cjs

@@ -1,12 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const clsx = require("clsx");
 const uniqueId = require("lodash/uniqueId");
 const wrapperTooltip = require("../../../utils/wrapperTooltip.cjs");
 const setId = require("../../../utils/setId.cjs");
 const useControlled = require("../../../hooks/useControlled.cjs");
-const navigationClasses = require("./navigationClasses.cjs");
 const Navigation_styles = require("./Navigation.styles.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const NavigationSlider_utils = require("../NavigationSlider/utils/NavigationSlider.utils.cjs");
@@ -75,7 +73,7 @@ function pathToElement(data, targetId) {
 const HvVerticalNavigationTree = ({
   id,
   className,
-  classes,
+  classes: classesProp,
   data,
   mode = "navigation",
   collapsible = false,
@@ -88,6 +86,10 @@ const HvVerticalNavigationTree = ({
   sliderForwardButtonAriaLabel = "Navigate to submenu",
   ...others
 }) => {
+  const {
+    classes,
+    cx
+  } = Navigation_styles.useClasses(classesProp);
   const [selected, setSelected] = useControlled.useControlled(selectedProp, defaultSelected);
   const [expanded, setExpanded] = useControlled.useControlled(expandedProp, () => {
     if (defaultExpanded === true) {
@@ -201,9 +203,11 @@ const HvVerticalNavigationTree = ({
   const handleNavigationPopupChange = (event, selectedItem) => {
     handleChange(event, selectedItem.id, selectedItem);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Navigation_styles.StyledNav, {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", {
     id,
-    className: clsx.clsx(className, navigationClasses.default.root, classes == null ? void 0 : classes.root, !isOpen && !useIcons && clsx.clsx(navigationClasses.default.collapsed, classes == null ? void 0 : classes.collapsed)),
+    className: cx(classes.root, {
+      [classes.collapsed]: !isOpen && !useIcons
+    }, className),
     onMouseLeave: handleStyledNavMouseLeave,
     ...others,
     children: slider ? /* @__PURE__ */ jsxRuntime.jsx(NavigationSlider.HvVerticalNavigationSlider, {
@@ -214,7 +218,7 @@ const HvVerticalNavigationTree = ({
       forwardButtonAriaLabel: sliderForwardButtonAriaLabel
     }) : /* @__PURE__ */ jsxRuntime.jsxs(TreeView.HvVerticalNavigationTreeView, {
       id: setId.setId(id, "tree"),
-      className: clsx.clsx(navigationClasses.default.list, classes == null ? void 0 : classes.list),
+      className: classes.list,
       selectable: true,
       mode,
       collapsible,
@@ -225,9 +229,9 @@ const HvVerticalNavigationTree = ({
       children: [useIcons && !isOpen && navigationPopup && /* @__PURE__ */ jsxRuntime.jsx(NavigationPopupContainer.NavigationPopupContainer, {
         anchorEl: navigationPopup.anchorEl,
         onClose: handleNavigationPopupClose,
-        className: clsx.clsx(navigationClasses.default.navigationPopup, classes == null ? void 0 : classes.navigationPopup),
+        className: classes.navigationPopup,
         children: /* @__PURE__ */ jsxRuntime.jsx(HvVerticalNavigationTree, {
-          className: clsx.clsx(navigationClasses.default.popup),
+          className: classes.popup,
           id: setId.setId(id, "navigation-popup-tree"),
           collapsible: true,
           defaultExpanded: true,
@@ -240,5 +244,6 @@ const HvVerticalNavigationTree = ({
     })
   });
 };
+exports.verticalNavigationTreeClasses = Navigation_styles.staticClasses;
 exports.HvVerticalNavigationTree = HvVerticalNavigationTree;
 //# sourceMappingURL=Navigation.cjs.map

package/dist/cjs/components/VerticalNavigation/Navigation/Navigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.cjs","sources":["../../../../../src/components/VerticalNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import { useCallback, useMemo, useContext, useEffect, useState } from \"react\";\n\nimport { clsx } from \"clsx\";\n\nimport uniqueId from \"lodash/uniqueId\";\n\nimport { wrapperTooltip } from \"@core/utils/wrapperTooltip\";\nimport { setId } from \"@core/utils/setId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport {\n  HvVerticalNavigationTreeView,\n  HvVerticalNavigationTreeViewItem,\n  NavigationMode,\n} from \"../TreeView\";\nimport verticalNavigationTreeClasses, {\n  HvVerticalNavigationTreeClasses,\n} from \"./navigationClasses\";\nimport { StyledNav } from \"./Navigation.styles\";\nimport { HvVerticalNavigationSlider } from \"../NavigationSlider\";\nimport {\n  VerticalNavigationContext,\n  NavigationData,\n} from \"../VerticalNavigationContext\";\nimport { getParentItemById } from \"../NavigationSlider/utils/NavigationSlider.utils\";\nimport { NavigationPopupContainer } from \"../NavigationPopup/NavigationPopupContainer\";\n\nexport interface HvVerticalNavigationTreeProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvVerticalNavigationTreeClasses;\n  /**\n   * Modus operandi (role) of the widget instance.\n   */\n  mode?: NavigationMode;\n  /**\n   * Can non-leaf nodes be collapsed / expanded.\n   */\n  collapsible?: boolean;\n  /**\n   * The ID of the selected page.\n   */\n  selected?: string;\n  /**\n   * When uncontrolled, defines the initial selected page ID.\n   */\n  defaultSelected?: string;\n  /**\n   * Callback fired when a navigation item is selected.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {object} page The data of the selected page.\n   */\n  onChange?: (event, page) => void;\n  /**\n   * Expanded nodes' ids.\n   */\n  expanded?: string[];\n  /**\n   * When uncontrolled, defines the initial expanded nodes' ids.\n   *\n   * It also supports `true` for starting with all nodes expanded.\n   * With `false` all nodes will be collapsed.\n   *\n   * By default it expands the needed nodes to display the current selection, if any.\n   */\n  defaultExpanded?: string[] | boolean;\n  /**\n   * Callback fired when tree items are expanded/collapsed.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {array} nodeIds The ids of the expanded nodes (old and new).\n   */\n  onToggle?: (event, nodeIds) => void;\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   * data - sub-menu items\n   * href - the url used for navigation.\n   * target - the behavior when opening an url.\n   */\n  data?: NavigationData[];\n  /** Aria label to apply to the navigate to submenu button on the navigation slider list items. */\n  sliderForwardButtonAriaLabel?: string;\n}\n\nconst createListHierarchy = (\n  items,\n  id,\n  classes?: HvVerticalNavigationTreeClasses,\n  mouseEnterHandler?: (event, item) => void,\n  disableTooltip = false\n) =>\n  items.map((item) => {\n    const {\n      id: itemId,\n      label: itemLabel,\n      icon,\n      data: children,\n      selectable,\n      disabled,\n      href,\n      target,\n    } = item;\n\n    const ItemText = wrapperTooltip(true, itemLabel, itemLabel);\n\n    const itemMouseEnterHandler = (event) => {\n      mouseEnterHandler?.(event, item);\n    };\n\n    return (\n      <HvVerticalNavigationTreeViewItem\n        id={setId(id, itemId)}\n        className={classes?.listItem}\n        href={href}\n        target={target}\n        key={itemId}\n        nodeId={itemId}\n        label={<ItemText />}\n        icon={icon}\n        payload={item}\n        selectable={selectable}\n        disabled={disabled}\n        onMouseEnter={itemMouseEnterHandler}\n        disableTooltip={disableTooltip}\n      >\n        {children\n          ? createListHierarchy(\n              children,\n              id,\n              classes,\n              mouseEnterHandler,\n              disableTooltip\n            )\n          : undefined}\n      </HvVerticalNavigationTreeViewItem>\n    );\n  });\n\nconst getAllParents = (items) => {\n  const parents = items.filter(\n    (item) => item.data != null && item.data.length > 0\n  );\n  const childParents = parents.flatMap((item) => getAllParents(item.data));\n\n  return [...parents, ...childParents];\n};\n\nfunction pathToElement(data, targetId) {\n  const path: string[] = [];\n\n  if (data != null && data.length > 0) {\n    for (let i = 0; i !== data.length; ++i) {\n      const item = data[i];\n      if (item.id === targetId) {\n        path.push(item.id);\n        break;\n      }\n\n      const subPaths = pathToElement(item.data, targetId);\n      if (subPaths.length > 0) {\n        path.push(item.id);\n        path.push(...subPaths);\n        break;\n      }\n    }\n  }\n\n  return path;\n}\n\nexport const HvVerticalNavigationTree = ({\n  id,\n\n  className,\n  classes,\n\n  data,\n\n  mode = \"navigation\",\n\n  collapsible = false,\n  expanded: expandedProp,\n  defaultExpanded,\n  onToggle,\n\n  selected: selectedProp,\n  defaultSelected,\n  onChange,\n\n  sliderForwardButtonAriaLabel = \"Navigate to submenu\",\n\n  ...others\n}: HvVerticalNavigationTreeProps) => {\n  const [selected, setSelected] = useControlled(selectedProp, defaultSelected);\n  const [expanded, setExpanded] = useControlled(expandedProp, () => {\n    if (defaultExpanded === true) {\n      // all parent nodes will be expanded by default\n      return getAllParents(data).map((item) => item.id);\n    }\n\n    if (defaultExpanded === false) {\n      // all parent nodes will be collapsed by default\n      return [];\n    }\n\n    if (defaultExpanded == null) {\n      if (selected != null) {\n        // the path to the selected node will be expanded (default behaviour)\n        const path = pathToElement(data, selected);\n        return path.slice(0, -1);\n      }\n\n      // nothing is expanded\n      return [];\n    }\n\n    return defaultExpanded;\n  });\n\n  const {\n    isOpen,\n    useIcons,\n    slider,\n\n    parentItem,\n    setParentItem,\n    withParentData,\n    navigateToChildHandler,\n\n    setParentData,\n    setParentSelected,\n  } = useContext(VerticalNavigationContext);\n\n  const [navigationPopup, setNavigationPopup] = useState<{\n    // This value is needed to guarantee that the NavigationPopup is fully re-rendered with keeping any previous values\n    uniqueKey: string;\n    anchorEl: HTMLButtonElement | null;\n    fixedMode: boolean;\n    data: NavigationData[];\n  } | null>(null);\n\n  const handleChange = useCallback(\n    (event, selectedId, selectedItem) => {\n      if (useIcons && !isOpen && selectedItem.data) {\n        const currentEventTarget = event.currentTarget;\n        setNavigationPopup((prevState) => {\n          // We want to close the popup in case the clicked element is the same as the previous one\n          return prevState?.anchorEl === currentEventTarget\n            ? null\n            : {\n                uniqueKey: uniqueId(),\n                anchorEl: currentEventTarget,\n                fixedMode: true,\n                data: selectedItem.data,\n              };\n        });\n\n        // We need this stopPropagation or else the Popup will close due to the clickaway being triggered\n        event.stopPropagation();\n      } else {\n        setSelected(selectedId);\n        setExpanded((prevState) => {\n          if (!isOpen) {\n            return [...prevState, ...pathToElement(data, selectedId)];\n          }\n          return [...prevState];\n        });\n        setNavigationPopup(null);\n        if (onChange) {\n          onChange(event, selectedItem);\n        }\n      }\n    },\n    [onChange, setSelected, setExpanded, isOpen, useIcons, data]\n  );\n\n  const treeViewItemMouseEnterHandler = useCallback(\n    (event, item) => {\n      const isCollapsed = useIcons && !isOpen;\n\n      if (isCollapsed && item.data && !navigationPopup?.fixedMode) {\n        const currentEventTarget = event.currentTarget;\n\n        setNavigationPopup?.({\n          uniqueKey: uniqueId(),\n          anchorEl: currentEventTarget,\n          fixedMode: false,\n          data: item.data,\n        });\n      } else if (isCollapsed && !item.data && !navigationPopup?.fixedMode) {\n        setNavigationPopup(null);\n      }\n    },\n    [isOpen, useIcons, navigationPopup]\n  );\n\n  const handleToggle = useCallback(\n    (event, newExpanded) => {\n      setExpanded(newExpanded);\n\n      if (onToggle) {\n        onToggle(event, newExpanded);\n      }\n    },\n    [onToggle, setExpanded]\n  );\n\n  const children = useMemo(\n    () =>\n      data &&\n      createListHierarchy(\n        data,\n        id,\n        classes,\n        treeViewItemMouseEnterHandler,\n        navigationPopup?.fixedMode\n      ),\n    [classes, data, id, navigationPopup, treeViewItemMouseEnterHandler]\n  );\n\n  useEffect(() => {\n    if (!isOpen) {\n      setNavigationPopup?.(null);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (setParentSelected) setParentSelected(selected);\n  }, [selected, setSelected, setParentSelected]);\n\n  useEffect(() => {\n    if (setParentData) setParentData(data);\n  }, [data, setParentData]);\n\n  useEffect(() => {\n    if (\n      withParentData &&\n      selected &&\n      setParentItem &&\n      getParentItemById(withParentData, selected)\n    ) {\n      setParentItem(getParentItemById(withParentData, selected));\n    }\n  }, [withParentData, selected, setParentItem]);\n\n  // navigation slider\n  const navigateToTargetHandler = (event, selectedItem) => {\n    handleChange(event, selectedItem.id, selectedItem);\n  };\n\n  const handleNavigationPopupClose = () => {\n    setNavigationPopup(null);\n  };\n\n  const handleStyledNavMouseLeave = () => {\n    if (useIcons && !isOpen && !navigationPopup?.fixedMode) {\n      setNavigationPopup(null);\n    }\n  };\n\n  const handleNavigationPopupMouseLeave = () => {\n    if (!navigationPopup?.fixedMode) {\n      handleNavigationPopupClose();\n    }\n  };\n\n  const handleNavigationPopupChange = (event, selectedItem) => {\n    handleChange(event, selectedItem.id, selectedItem);\n  };\n\n  return (\n    <StyledNav\n      id={id}\n      className={clsx(\n        className,\n        verticalNavigationTreeClasses.root,\n        classes?.root,\n        !isOpen &&\n          !useIcons &&\n          clsx(verticalNavigationTreeClasses.collapsed, classes?.collapsed)\n      )}\n      onMouseLeave={handleStyledNavMouseLeave}\n      {...others}\n    >\n      {slider ? (\n        <HvVerticalNavigationSlider\n          data={parentItem.data || withParentData}\n          selected={selected}\n          onNavigateToTarget={navigateToTargetHandler}\n          onNavigateToChild={navigateToChildHandler}\n          forwardButtonAriaLabel={sliderForwardButtonAriaLabel}\n        />\n      ) : (\n        <HvVerticalNavigationTreeView\n          id={setId(id, \"tree\")}\n          className={clsx(verticalNavigationTreeClasses.list, classes?.list)}\n          selectable\n          mode={mode}\n          collapsible={collapsible}\n          selected={selected}\n          onChange={handleChange}\n          expanded={expanded}\n          onToggle={handleToggle}\n        >\n          {useIcons && !isOpen && navigationPopup && (\n            <NavigationPopupContainer\n              anchorEl={navigationPopup.anchorEl}\n              onClose={handleNavigationPopupClose}\n              key={navigationPopup.uniqueKey}\n              className={clsx(\n                verticalNavigationTreeClasses.navigationPopup,\n                classes?.navigationPopup\n              )}\n            >\n              <HvVerticalNavigationTree\n                className={clsx(verticalNavigationTreeClasses.popup)}\n                id={setId(id, \"navigation-popup-tree\")}\n                collapsible\n                defaultExpanded\n                selected={selected}\n                data={navigationPopup.data}\n                onChange={handleNavigationPopupChange}\n                onMouseLeave={handleNavigationPopupMouseLeave}\n              />\n            </NavigationPopupContainer>\n          )}\n          {children}\n        </HvVerticalNavigationTreeView>\n      )}\n    </StyledNav>\n  );\n};\n"],"names":["createListHierarchy","items","id","classes","mouseEnterHandler","disableTooltip","map","item","itemId","label","itemLabel","icon","data","children","selectable","disabled","href","target","ItemText","wrapperTooltip","itemMouseEnterHandler","event","HvVerticalNavigationTreeViewItem","setId","className","listItem","nodeId","_jsx","payload","onMouseEnter","undefined","getAllParents","parents","filter","length","childParents","flatMap","pathToElement","targetId","path","i","push","subPaths","HvVerticalNavigationTree","mode","collapsible","expanded","expandedProp","defaultExpanded","onToggle","selected","selectedProp","defaultSelected","onChange","sliderForwardButtonAriaLabel","others","setSelected","useControlled","setExpanded","slice","isOpen","useIcons","slider","parentItem","setParentItem","withParentData","navigateToChildHandler","setParentData","setParentSelected","useContext","VerticalNavigationContext","navigationPopup","setNavigationPopup","useState","handleChange","useCallback","selectedId","selectedItem","currentEventTarget","currentTarget","prevState","anchorEl","uniqueKey","uniqueId","fixedMode","stopPropagation","treeViewItemMouseEnterHandler","isCollapsed","handleToggle","newExpanded","useMemo","useEffect","getParentItemById","navigateToTargetHandler","handleNavigationPopupClose","handleStyledNavMouseLeave","handleNavigationPopupMouseLeave","handleNavigationPopupChange","StyledNav","clsx","verticalNavigationTreeClasses","root","collapsed","onMouseLeave","HvVerticalNavigationSlider","onNavigateToTarget","onNavigateToChild","forwardButtonAriaLabel","_jsxs","HvVerticalNavigationTreeView","list","NavigationPopupContainer","onClose","popup"],"mappings":"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"}
+{"version":3,"file":"Navigation.cjs","sources":["../../../../../src/components/VerticalNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import { useCallback, useMemo, useContext, useEffect, useState } from \"react\";\n\nimport uniqueId from \"lodash/uniqueId\";\n\nimport { wrapperTooltip } from \"@core/utils/wrapperTooltip\";\nimport { setId } from \"@core/utils/setId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  HvVerticalNavigationTreeView,\n  HvVerticalNavigationTreeViewItem,\n  NavigationMode,\n} from \"../TreeView\";\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\nimport { HvVerticalNavigationSlider } from \"../NavigationSlider\";\nimport {\n  VerticalNavigationContext,\n  NavigationData,\n} from \"../VerticalNavigationContext\";\nimport { getParentItemById } from \"../NavigationSlider/utils/NavigationSlider.utils\";\nimport { NavigationPopupContainer } from \"../NavigationPopup/NavigationPopupContainer\";\n\nexport { staticClasses as verticalNavigationTreeClasses };\n\nexport type HvVerticalNavigationTreeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationTreeProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvVerticalNavigationTreeClasses;\n  /**\n   * Modus operandi (role) of the widget instance.\n   */\n  mode?: NavigationMode;\n  /**\n   * Can non-leaf nodes be collapsed / expanded.\n   */\n  collapsible?: boolean;\n  /**\n   * The ID of the selected page.\n   */\n  selected?: string;\n  /**\n   * When uncontrolled, defines the initial selected page ID.\n   */\n  defaultSelected?: string;\n  /**\n   * Callback fired when a navigation item is selected.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {object} page The data of the selected page.\n   */\n  onChange?: (event, page) => void;\n  /**\n   * Expanded nodes' ids.\n   */\n  expanded?: string[];\n  /**\n   * When uncontrolled, defines the initial expanded nodes' ids.\n   *\n   * It also supports `true` for starting with all nodes expanded.\n   * With `false` all nodes will be collapsed.\n   *\n   * By default it expands the needed nodes to display the current selection, if any.\n   */\n  defaultExpanded?: string[] | boolean;\n  /**\n   * Callback fired when tree items are expanded/collapsed.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {array} nodeIds The ids of the expanded nodes (old and new).\n   */\n  onToggle?: (event, nodeIds) => void;\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   * data - sub-menu items\n   * href - the url used for navigation.\n   * target - the behavior when opening an url.\n   */\n  data?: NavigationData[];\n  /** Aria label to apply to the navigate to submenu button on the navigation slider list items. */\n  sliderForwardButtonAriaLabel?: string;\n}\n\nconst createListHierarchy = (\n  items,\n  id,\n  classes?: HvVerticalNavigationTreeClasses,\n  mouseEnterHandler?: (event, item) => void,\n  disableTooltip = false\n) =>\n  items.map((item) => {\n    const {\n      id: itemId,\n      label: itemLabel,\n      icon,\n      data: children,\n      selectable,\n      disabled,\n      href,\n      target,\n    } = item;\n\n    const ItemText = wrapperTooltip(true, itemLabel, itemLabel);\n\n    const itemMouseEnterHandler = (event) => {\n      mouseEnterHandler?.(event, item);\n    };\n\n    return (\n      <HvVerticalNavigationTreeViewItem\n        id={setId(id, itemId)}\n        className={classes?.listItem}\n        href={href}\n        target={target}\n        key={itemId}\n        nodeId={itemId}\n        label={<ItemText />}\n        icon={icon}\n        payload={item}\n        selectable={selectable}\n        disabled={disabled}\n        onMouseEnter={itemMouseEnterHandler}\n        disableTooltip={disableTooltip}\n      >\n        {children\n          ? createListHierarchy(\n              children,\n              id,\n              classes,\n              mouseEnterHandler,\n              disableTooltip\n            )\n          : undefined}\n      </HvVerticalNavigationTreeViewItem>\n    );\n  });\n\nconst getAllParents = (items) => {\n  const parents = items.filter(\n    (item) => item.data != null && item.data.length > 0\n  );\n  const childParents = parents.flatMap((item) => getAllParents(item.data));\n\n  return [...parents, ...childParents];\n};\n\nfunction pathToElement(data, targetId) {\n  const path: string[] = [];\n\n  if (data != null && data.length > 0) {\n    for (let i = 0; i !== data.length; ++i) {\n      const item = data[i];\n      if (item.id === targetId) {\n        path.push(item.id);\n        break;\n      }\n\n      const subPaths = pathToElement(item.data, targetId);\n      if (subPaths.length > 0) {\n        path.push(item.id);\n        path.push(...subPaths);\n        break;\n      }\n    }\n  }\n\n  return path;\n}\n\nexport const HvVerticalNavigationTree = ({\n  id,\n\n  className,\n  classes: classesProp,\n\n  data,\n\n  mode = \"navigation\",\n\n  collapsible = false,\n  expanded: expandedProp,\n  defaultExpanded,\n  onToggle,\n\n  selected: selectedProp,\n  defaultSelected,\n  onChange,\n\n  sliderForwardButtonAriaLabel = \"Navigate to submenu\",\n\n  ...others\n}: HvVerticalNavigationTreeProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const [selected, setSelected] = useControlled(selectedProp, defaultSelected);\n  const [expanded, setExpanded] = useControlled(expandedProp, () => {\n    if (defaultExpanded === true) {\n      // all parent nodes will be expanded by default\n      return getAllParents(data).map((item) => item.id);\n    }\n\n    if (defaultExpanded === false) {\n      // all parent nodes will be collapsed by default\n      return [];\n    }\n\n    if (defaultExpanded == null) {\n      if (selected != null) {\n        // the path to the selected node will be expanded (default behaviour)\n        const path = pathToElement(data, selected);\n        return path.slice(0, -1);\n      }\n\n      // nothing is expanded\n      return [];\n    }\n\n    return defaultExpanded;\n  });\n\n  const {\n    isOpen,\n    useIcons,\n    slider,\n\n    parentItem,\n    setParentItem,\n    withParentData,\n    navigateToChildHandler,\n\n    setParentData,\n    setParentSelected,\n  } = useContext(VerticalNavigationContext);\n\n  const [navigationPopup, setNavigationPopup] = useState<{\n    // This value is needed to guarantee that the NavigationPopup is fully re-rendered with keeping any previous values\n    uniqueKey: string;\n    anchorEl: HTMLButtonElement | null;\n    fixedMode: boolean;\n    data: NavigationData[];\n  } | null>(null);\n\n  const handleChange = useCallback(\n    (event, selectedId, selectedItem) => {\n      if (useIcons && !isOpen && selectedItem.data) {\n        const currentEventTarget = event.currentTarget;\n        setNavigationPopup((prevState) => {\n          // We want to close the popup in case the clicked element is the same as the previous one\n          return prevState?.anchorEl === currentEventTarget\n            ? null\n            : {\n                uniqueKey: uniqueId(),\n                anchorEl: currentEventTarget,\n                fixedMode: true,\n                data: selectedItem.data,\n              };\n        });\n\n        // We need this stopPropagation or else the Popup will close due to the clickaway being triggered\n        event.stopPropagation();\n      } else {\n        setSelected(selectedId);\n        setExpanded((prevState) => {\n          if (!isOpen) {\n            return [...prevState, ...pathToElement(data, selectedId)];\n          }\n          return [...prevState];\n        });\n        setNavigationPopup(null);\n        if (onChange) {\n          onChange(event, selectedItem);\n        }\n      }\n    },\n    [onChange, setSelected, setExpanded, isOpen, useIcons, data]\n  );\n\n  const treeViewItemMouseEnterHandler = useCallback(\n    (event, item) => {\n      const isCollapsed = useIcons && !isOpen;\n\n      if (isCollapsed && item.data && !navigationPopup?.fixedMode) {\n        const currentEventTarget = event.currentTarget;\n\n        setNavigationPopup?.({\n          uniqueKey: uniqueId(),\n          anchorEl: currentEventTarget,\n          fixedMode: false,\n          data: item.data,\n        });\n      } else if (isCollapsed && !item.data && !navigationPopup?.fixedMode) {\n        setNavigationPopup(null);\n      }\n    },\n    [isOpen, useIcons, navigationPopup]\n  );\n\n  const handleToggle = useCallback(\n    (event, newExpanded) => {\n      setExpanded(newExpanded);\n\n      if (onToggle) {\n        onToggle(event, newExpanded);\n      }\n    },\n    [onToggle, setExpanded]\n  );\n\n  const children = useMemo(\n    () =>\n      data &&\n      createListHierarchy(\n        data,\n        id,\n        classes,\n        treeViewItemMouseEnterHandler,\n        navigationPopup?.fixedMode\n      ),\n    [classes, data, id, navigationPopup, treeViewItemMouseEnterHandler]\n  );\n\n  useEffect(() => {\n    if (!isOpen) {\n      setNavigationPopup?.(null);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (setParentSelected) setParentSelected(selected);\n  }, [selected, setSelected, setParentSelected]);\n\n  useEffect(() => {\n    if (setParentData) setParentData(data);\n  }, [data, setParentData]);\n\n  useEffect(() => {\n    if (\n      withParentData &&\n      selected &&\n      setParentItem &&\n      getParentItemById(withParentData, selected)\n    ) {\n      setParentItem(getParentItemById(withParentData, selected));\n    }\n  }, [withParentData, selected, setParentItem]);\n\n  // navigation slider\n  const navigateToTargetHandler = (event, selectedItem) => {\n    handleChange(event, selectedItem.id, selectedItem);\n  };\n\n  const handleNavigationPopupClose = () => {\n    setNavigationPopup(null);\n  };\n\n  const handleStyledNavMouseLeave = () => {\n    if (useIcons && !isOpen && !navigationPopup?.fixedMode) {\n      setNavigationPopup(null);\n    }\n  };\n\n  const handleNavigationPopupMouseLeave = () => {\n    if (!navigationPopup?.fixedMode) {\n      handleNavigationPopupClose();\n    }\n  };\n\n  const handleNavigationPopupChange = (event, selectedItem) => {\n    handleChange(event, selectedItem.id, selectedItem);\n  };\n\n  return (\n    <nav\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.collapsed]: !isOpen && !useIcons },\n        className\n      )}\n      onMouseLeave={handleStyledNavMouseLeave}\n      {...others}\n    >\n      {slider ? (\n        <HvVerticalNavigationSlider\n          data={parentItem.data || withParentData}\n          selected={selected}\n          onNavigateToTarget={navigateToTargetHandler}\n          onNavigateToChild={navigateToChildHandler}\n          forwardButtonAriaLabel={sliderForwardButtonAriaLabel}\n        />\n      ) : (\n        <HvVerticalNavigationTreeView\n          id={setId(id, \"tree\")}\n          className={classes.list}\n          selectable\n          mode={mode}\n          collapsible={collapsible}\n          selected={selected}\n          onChange={handleChange}\n          expanded={expanded}\n          onToggle={handleToggle}\n        >\n          {useIcons && !isOpen && navigationPopup && (\n            <NavigationPopupContainer\n              anchorEl={navigationPopup.anchorEl}\n              onClose={handleNavigationPopupClose}\n              key={navigationPopup.uniqueKey}\n              className={classes.navigationPopup}\n            >\n              <HvVerticalNavigationTree\n                className={classes.popup}\n                id={setId(id, \"navigation-popup-tree\")}\n                collapsible\n                defaultExpanded\n                selected={selected}\n                data={navigationPopup.data}\n                onChange={handleNavigationPopupChange}\n                onMouseLeave={handleNavigationPopupMouseLeave}\n              />\n            </NavigationPopupContainer>\n          )}\n          {children}\n        </HvVerticalNavigationTreeView>\n      )}\n    </nav>\n  );\n};\n"],"names":["createListHierarchy","items","id","classes","mouseEnterHandler","disableTooltip","map","item","itemId","label","itemLabel","icon","data","children","selectable","disabled","href","target","ItemText","wrapperTooltip","itemMouseEnterHandler","event","HvVerticalNavigationTreeViewItem","setId","className","listItem","nodeId","_jsx","payload","onMouseEnter","undefined","getAllParents","parents","filter","length","childParents","flatMap","pathToElement","targetId","path","i","push","subPaths","HvVerticalNavigationTree","classesProp","mode","collapsible","expanded","expandedProp","defaultExpanded","onToggle","selected","selectedProp","defaultSelected","onChange","sliderForwardButtonAriaLabel","others","cx","useClasses","setSelected","useControlled","setExpanded","slice","isOpen","useIcons","slider","parentItem","setParentItem","withParentData","navigateToChildHandler","setParentData","setParentSelected","useContext","VerticalNavigationContext","navigationPopup","setNavigationPopup","useState","handleChange","useCallback","selectedId","selectedItem","currentEventTarget","currentTarget","prevState","anchorEl","uniqueKey","uniqueId","fixedMode","stopPropagation","treeViewItemMouseEnterHandler","isCollapsed","handleToggle","newExpanded","useMemo","useEffect","getParentItemById","navigateToTargetHandler","handleNavigationPopupClose","handleStyledNavMouseLeave","handleNavigationPopupMouseLeave","handleNavigationPopupChange","root","collapsed","onMouseLeave","HvVerticalNavigationSlider","onNavigateToTarget","onNavigateToChild","forwardButtonAriaLabel","_jsxs","HvVerticalNavigationTreeView","list","NavigationPopupContainer","onClose","popup"],"mappings":"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"}

package/dist/cjs/components/VerticalNavigation/Navigation/Navigation.styles.cjs

@@ -1,25 +1,28 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
+const classes = require("../../../utils/classes.cjs");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const navigationClasses = require("./navigationClasses.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const StyledNav = /* @__PURE__ */ _styled__default.default("nav", process.env.NODE_ENV === "production" ? {
-  target: "ejose0b0"
-} : {
-  target: "ejose0b0",
-  label: "StyledNav"
-})({
-  display: "block",
-  background: uikitStyles.theme.colors.atmo1,
-  overflowY: "auto",
-  [`&.${navigationClasses.default.collapsed}`]: {
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvVerticalNavigationTree", {
+  root: {
+    display: "block",
+    background: uikitStyles.theme.colors.atmo1,
+    overflowY: "auto"
+  },
+  list: {},
+  listItem: {},
+  collapsed: {
     display: "none"
   },
-  [`&.${navigationClasses.default.popup}`]: {
+  popup: {
+    boxShadow: "inset 5px 0 5px -3px rgb(65 65 65 / 12%)"
+  },
+  navigationPopup: {
     boxShadow: "inset 5px 0 5px -3px rgb(65 65 65 / 12%)"
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL05hdmlnYXRpb24vTmF2aWdhdGlvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU15QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9OYXZpZ2F0aW9uL05hdmlnYXRpb24uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCBuYXZpZ2F0aW9uQ2xhc3NlcyBmcm9tIFwiLi9uYXZpZ2F0aW9uQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTmF2ID0gc3R5bGVkKFwibmF2XCIpKHtcbiAgZGlzcGxheTogXCJibG9ja1wiLFxuICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG5cbiAgb3ZlcmZsb3dZOiBcImF1dG9cIixcblxuICBbYCYuJHtuYXZpZ2F0aW9uQ2xhc3Nlcy5jb2xsYXBzZWR9YF06IHtcbiAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgfSxcblxuICBbYCYuJHtuYXZpZ2F0aW9uQ2xhc3Nlcy5wb3B1cH1gXToge1xuICAgIGJveFNoYWRvdzogXCJpbnNldCA1cHggMCA1cHggLTNweCByZ2IoNjUgNjUgNjUgLyAxMiUpXCIsXG4gIH0sXG59KTtcbiJdfQ== */");
-exports.StyledNav = StyledNav;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Navigation.styles.cjs.map

package/dist/cjs/components/VerticalNavigation/Navigation/Navigation.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.styles.cjs","sources":["../../../../../src/components/VerticalNavigation/Navigation/Navigation.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport navigationClasses from \"./navigationClasses\";\n\nexport const StyledNav = styled(\"nav\")({\n  display: \"block\",\n  background: theme.colors.atmo1,\n\n  overflowY: \"auto\",\n\n  [`&.${navigationClasses.collapsed}`]: {\n    display: \"none\",\n  },\n\n  [`&.${navigationClasses.popup}`]: {\n    boxShadow: \"inset 5px 0 5px -3px rgb(65 65 65 / 12%)\",\n  },\n});\n"],"names":["StyledNav","_styled","process","env","NODE_ENV","target","label","display","background","theme","colors","atmo1","overflowY","navigationClasses","collapsed","popup","boxShadow"],"mappings":";;;;;;;AAMO,MAAMA,YAAmBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACrCC,SAAS;AAAA,EACTC,YAAYC,YAAAA,MAAMC,OAAOC;AAAAA,EAEzBC,WAAW;AAAA,EAEX,CAAE,KAAIC,0BAAkBC,WAAW,GAAG;AAAA,IACpCP,SAAS;AAAA,EACX;AAAA,EAEA,CAAE,KAAIM,0BAAkBE,OAAO,GAAG;AAAA,IAChCC,WAAW;AAAA,EACb;AACF,GAACd,QAAAC,IAAAC,aAAC,eAAA,KAAA,ipCAAA;;"}
+{"version":3,"file":"Navigation.styles.cjs","sources":["../../../../../src/components/VerticalNavigation/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationTree\",\n  {\n    root: {\n      display: \"block\",\n      background: theme.colors.atmo1,\n\n      overflowY: \"auto\",\n    },\n    list: {},\n    listItem: {},\n    collapsed: {\n      display: \"none\",\n    },\n    popup: {\n      boxShadow: \"inset 5px 0 5px -3px rgb(65 65 65 / 12%)\",\n    },\n    navigationPopup: {\n      boxShadow: \"inset 5px 0 5px -3px rgb(65 65 65 / 12%)\",\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","display","background","theme","colors","atmo1","overflowY","list","listItem","collapsed","popup","boxShadow","navigationPopup"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAC3C,4BACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAYC,YAAAA,MAAMC,OAAOC;AAAAA,IAEzBC,WAAW;AAAA,EACb;AAAA,EACAC,MAAM,CAAC;AAAA,EACPC,UAAU,CAAC;AAAA,EACXC,WAAW;AAAA,IACTR,SAAS;AAAA,EACX;AAAA,EACAS,OAAO;AAAA,IACLC,WAAW;AAAA,EACb;AAAA,EACAC,iBAAiB;AAAA,IACfD,WAAW;AAAA,EACb;AACF,CACF;;;"}

package/dist/cjs/components/VerticalNavigation/NavigationPopup/NavigationPopup.styles.cjs

@@ -1,18 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("@emotion/styled/base");
+const classes = require("../../../utils/classes.cjs");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const base = require("@mui/base");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const StyledPopupContainer = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "es2o9lp1"
-} : {
-  target: "es2o9lp1",
-  label: "StyledPopupContainer"
-})({
-  marginLeft: uikitStyles.theme.spacing("xs")
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL05hdmlnYXRpb25Qb3B1cC9OYXZpZ2F0aW9uUG9wdXAuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLNkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9WZXJ0aWNhbE5hdmlnYXRpb24vTmF2aWdhdGlvblBvcHVwL05hdmlnYXRpb25Qb3B1cC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IFBvcHBlciB9IGZyb20gXCJAbXVpL2Jhc2VcIjtcblxuY29uc3QgU3R5bGVkUG9wdXBDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5MZWZ0OiB0aGVtZS5zcGFjaW5nKFwieHNcIiksXG59KTtcblxuY29uc3QgU3R5bGVkUG9wcGVyID0gc3R5bGVkKFBvcHBlcikoe1xuICB6SW5kZXg6IHRoZW1lLnpJbmRpY2VzLnBvcG92ZXIsXG59KTtcblxuZXhwb3J0IHsgU3R5bGVkUG9wdXBDb250YWluZXIsIFN0eWxlZFBvcHBlciB9O1xuIl19 */");
 const StyledPopper = /* @__PURE__ */ _styled__default.default(base.Popper, process.env.NODE_ENV === "production" ? {
   target: "es2o9lp0"
 } : {
@@ -20,7 +13,20 @@ const StyledPopper = /* @__PURE__ */ _styled__default.default(base.Popper, proce
   label: "StyledPopper"
 })({
   zIndex: uikitStyles.theme.zIndices.popover
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL05hdmlnYXRpb25Qb3B1cC9OYXZpZ2F0aW9uUG9wdXAuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTcUIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9WZXJ0aWNhbE5hdmlnYXRpb24vTmF2aWdhdGlvblBvcHVwL05hdmlnYXRpb25Qb3B1cC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IFBvcHBlciB9IGZyb20gXCJAbXVpL2Jhc2VcIjtcblxuY29uc3QgU3R5bGVkUG9wdXBDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBtYXJnaW5MZWZ0OiB0aGVtZS5zcGFjaW5nKFwieHNcIiksXG59KTtcblxuY29uc3QgU3R5bGVkUG9wcGVyID0gc3R5bGVkKFBvcHBlcikoe1xuICB6SW5kZXg6IHRoZW1lLnpJbmRpY2VzLnBvcG92ZXIsXG59KTtcblxuZXhwb3J0IHsgU3R5bGVkUG9wdXBDb250YWluZXIsIFN0eWxlZFBvcHBlciB9O1xuIl19 */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL05hdmlnYXRpb25Qb3B1cC9OYXZpZ2F0aW9uUG9wdXAuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNcUIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9WZXJ0aWNhbE5hdmlnYXRpb24vTmF2aWdhdGlvblBvcHVwL05hdmlnYXRpb25Qb3B1cC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3JlYXRlQ2xhc3NlcyB9IGZyb20gXCJAY29yZS91dGlscy9jbGFzc2VzXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgUG9wcGVyIH0gZnJvbSBcIkBtdWkvYmFzZVwiO1xuXG5jb25zdCBTdHlsZWRQb3BwZXIgPSBzdHlsZWQoUG9wcGVyKSh7XG4gIHpJbmRleDogdGhlbWUuekluZGljZXMucG9wb3Zlcixcbn0pO1xuXG5leHBvcnQgeyBTdHlsZWRQb3BwZXIgfTtcblxuZXhwb3J0IGNvbnN0IHsgc3RhdGljQ2xhc3NlcywgdXNlQ2xhc3NlcyB9ID0gY3JlYXRlQ2xhc3NlcyhcbiAgXCJIdlZlcnRpY2FsTmF2aWdhdGlvblBvcHVwXCIsXG4gIHtcbiAgICBwb3B1cDoge30sXG4gICAgY29udGFpbmVyOiB7XG4gICAgICBtYXJnaW5MZWZ0OiB0aGVtZS5zcGFjaW5nKFwieHNcIiksXG4gICAgfSxcbiAgICBwb3BwZXI6IHtcbiAgICAgIHpJbmRleDogdGhlbWUuekluZGljZXMucG9wb3ZlcixcbiAgICB9LFxuICB9XG4pO1xuIl19 */");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvVerticalNavigationPopup", {
+  popup: {},
+  container: {
+    marginLeft: uikitStyles.theme.spacing("xs")
+  },
+  popper: {
+    zIndex: uikitStyles.theme.zIndices.popover
+  }
+});
 exports.StyledPopper = StyledPopper;
-exports.StyledPopupContainer = StyledPopupContainer;
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=NavigationPopup.styles.cjs.map

package/dist/cjs/components/VerticalNavigation/NavigationPopup/NavigationPopup.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationPopup.styles.cjs","sources":["../../../../../src/components/VerticalNavigation/NavigationPopup/NavigationPopup.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Popper } from \"@mui/base\";\n\nconst StyledPopupContainer = styled(\"div\")({\n  marginLeft: theme.spacing(\"xs\"),\n});\n\nconst StyledPopper = styled(Popper)({\n  zIndex: theme.zIndices.popover,\n});\n\nexport { StyledPopupContainer, StyledPopper };\n"],"names":["StyledPopupContainer","_styled","process","env","NODE_ENV","target","label","marginLeft","theme","spacing","StyledPopper","Popper","zIndex","zIndices","popover"],"mappings":";;;;;;;AAKA,MAAMA,uBAA8BC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACzCC,YAAYC,YAAAA,MAAMC,QAAQ,IAAI;AAChC,GAACP,QAAAC,IAAAC,aAAC,eAAA,KAAA,ihCAAA;AAEF,MAAMM,eAAsBC,iCAAAA,QAAAA,KAAAA,QAAMT,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAClCM,QAAQJ,YAAAA,MAAMK,SAASC;AACzB,GAACZ,QAAAC,IAAAC,aAAC,eAAA,KAAA,ihCAAA;;;"}
+{"version":3,"file":"NavigationPopup.styles.cjs","sources":["../../../../../src/components/VerticalNavigation/NavigationPopup/NavigationPopup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Popper } from \"@mui/base\";\n\nconst StyledPopper = styled(Popper)({\n  zIndex: theme.zIndices.popover,\n});\n\nexport { StyledPopper };\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationPopup\",\n  {\n    popup: {},\n    container: {\n      marginLeft: theme.spacing(\"xs\"),\n    },\n    popper: {\n      zIndex: theme.zIndices.popover,\n    },\n  }\n);\n"],"names":["StyledPopper","Popper","process","env","NODE_ENV","target","label","zIndex","theme","zIndices","popover","staticClasses","useClasses","createClasses","popup","container","marginLeft","spacing","popper"],"mappings":";;;;;;;;AAMA,MAAMA,eAAsBC,iCAAAA,QAAAA,KAAAA,QAAMC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAClCC,QAAQC,YAAAA,MAAMC,SAASC;AACzB,GAACR,QAAAC,IAAAC,aAAC,eAAA,KAAA,yxCAAA;AAIW,MAAA;AAAA,EAAEO;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAC3C,6BACA;AAAA,EACEC,OAAO,CAAC;AAAA,EACRC,WAAW;AAAA,IACTC,YAAYR,YAAAA,MAAMS,QAAQ,IAAI;AAAA,EAChC;AAAA,EACAC,QAAQ;AAAA,IACNX,QAAQC,YAAAA,MAAMC,SAASC;AAAAA,EACzB;AACF,CACF;;;;"}

package/dist/cjs/components/VerticalNavigation/NavigationPopup/NavigationPopupContainer.cjs

@@ -8,8 +8,12 @@ const NavigationPopupContainer = ({
   anchorEl,
   onClose,
   children,
+  classes: classesProp,
   ...others
 }) => {
+  const {
+    classes
+  } = NavigationPopup_styles.useClasses(classesProp);
   const handleClickAway = () => {
     onClose == null ? void 0 : onClose();
   };
@@ -20,7 +24,8 @@ const NavigationPopupContainer = ({
     ...others,
     children: /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, {
       onClickAway: handleClickAway,
-      children: /* @__PURE__ */ jsxRuntime.jsx(NavigationPopup_styles.StyledPopupContainer, {
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: classes.container,
         children: /* @__PURE__ */ jsxRuntime.jsx(VerticalNavigation.HvVerticalNavigation, {
           open: true,
           useIcons: true,
@@ -30,5 +35,6 @@ const NavigationPopupContainer = ({
     })
   });
 };
+exports.verticalNavigationPopupClasses = NavigationPopup_styles.staticClasses;
 exports.NavigationPopupContainer = NavigationPopupContainer;
 //# sourceMappingURL=NavigationPopupContainer.cjs.map

package/dist/cjs/components/VerticalNavigation/NavigationPopup/NavigationPopupContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationPopupContainer.cjs","sources":["../../../../../src/components/VerticalNavigation/NavigationPopup/NavigationPopupContainer.tsx"],"sourcesContent":["import { ClickAwayListener } from \"@mui/material\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { HvVerticalNavigation } from \"../VerticalNavigation\";\n\nimport { StyledPopper, StyledPopupContainer } from \"./NavigationPopup.styles\";\n\nexport interface NavigationPopupContainerProps extends HvBaseProps {\n  anchorEl?: HTMLElement | null;\n  onClose?: () => void;\n}\n\nexport const NavigationPopupContainer = ({\n  anchorEl,\n  onClose,\n  children,\n  ...others\n}: NavigationPopupContainerProps) => {\n  const handleClickAway = () => {\n    onClose?.();\n  };\n\n  return (\n    <StyledPopper open anchorEl={anchorEl} placement=\"right-start\" {...others}>\n      <ClickAwayListener onClickAway={handleClickAway}>\n        <StyledPopupContainer>\n          <HvVerticalNavigation open useIcons>\n            {children}\n          </HvVerticalNavigation>\n        </StyledPopupContainer>\n      </ClickAwayListener>\n    </StyledPopper>\n  );\n};\n"],"names":["NavigationPopupContainer","anchorEl","onClose","children","others","handleClickAway","StyledPopper","open","placement","ClickAwayListener","onClickAway","StyledPopupContainer","HvVerticalNavigation","useIcons"],"mappings":";;;;;;AAaO,MAAMA,2BAA2BA,CAAC;AAAA,EACvCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AACnC,QAAMC,kBAAkBA,MAAM;AAClB;AAAA,EAAA;AAGZ,wCACGC,uBAAAA,cAAY;AAAA,IAACC,MAAI;AAAA,IAACN;AAAAA,IAAoBO,WAAU;AAAA,IAAa,GAAKJ;AAAAA,IAAMD,yCACtEM,4BAAiB;AAAA,MAACC,aAAaL;AAAAA,MAAgBF,yCAC7CQ,6CAAoB;AAAA,QAAAR,yCAClBS,yCAAoB;AAAA,UAACL,MAAI;AAAA,UAACM,UAAQ;AAAA,UAAAV;AAAAA,QAAAA,CAEb;AAAA,MAAA,CACF;AAAA,IAAA,CACL;AAAA,EAAA,CACP;AAElB;;"}
+{"version":3,"file":"NavigationPopupContainer.cjs","sources":["../../../../../src/components/VerticalNavigation/NavigationPopup/NavigationPopupContainer.tsx"],"sourcesContent":["import { ClickAwayListener } from \"@mui/material\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvVerticalNavigation } from \"../VerticalNavigation\";\n\nimport {\n  StyledPopper,\n  staticClasses,\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":["NavigationPopupContainer","anchorEl","onClose","children","classes","classesProp","others","useClasses","handleClickAway","StyledPopper","open","placement","ClickAwayListener","onClickAway","className","container","HvVerticalNavigation","useIcons"],"mappings":";;;;;;AAuBO,MAAMA,2BAA2BA,CAAC;AAAA,EACvCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACT,GAAGC;AAC0B,MAAM;AAC7B,QAAA;AAAA,IAAEF;AAAAA,EAAAA,IAAYG,uBAAAA,WAAWF,WAAW;AAE1C,QAAMG,kBAAkBA,MAAM;AAClB;AAAA,EAAA;AAGZ,wCACGC,uBAAAA,cAAY;AAAA,IAACC,MAAI;AAAA,IAACT;AAAAA,IAAoBU,WAAU;AAAA,IAAa,GAAKL;AAAAA,IAAMH,yCACtES,4BAAiB;AAAA,MAACC,aAAaL;AAAAA,MAAgBL,yCAC9C,OAAA;AAAA,QAAKW,WAAWV,QAAQW;AAAAA,QAAUZ,yCAC/Ba,yCAAoB;AAAA,UAACN,MAAI;AAAA,UAACO,UAAQ;AAAA,UAAAd;AAAAA,QAAAA,CAEb;AAAA,MAAA,CACnB;AAAA,IAAA,CACY;AAAA,EAAA,CACP;AAElB;;;"}

package/dist/cjs/components/VerticalNavigation/NavigationSlider/NavigationSlider.cjs

@@ -1,29 +1,32 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const clsx = require("clsx");
 const NavigationSlider_styles = require("./NavigationSlider.styles.cjs");
-const navigationSliderClasses = require("./navigationSliderClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Button = require("../../Button/Button.cjs");
 const ListContainer = require("../../ListContainer/ListContainer.cjs");
+const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
 const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
 const HvVerticalNavigationSlider = ({
   id,
-  classes,
+  classes: classesProp,
   data,
   selected,
   onNavigateToTarget,
   onNavigateToChild,
   forwardButtonAriaLabel = "Navigate to submenu"
 }) => {
+  const {
+    classes
+  } = NavigationSlider_styles.useClasses(classesProp);
   return /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, {
     interactive: true,
     id,
-    children: data && data.map((item) => /* @__PURE__ */ jsxRuntime.jsx(NavigationSlider_styles.StyledListItem, {
+    children: data && data.map((item) => /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, {
       classes: {
-        root: classes == null ? void 0 : classes.root,
-        selected: clsx.clsx(classes == null ? void 0 : classes.listItemSelected, navigationSliderClasses.default.listItemSelected)
+        root: classes.root,
+        selected: classes.listItemSelected,
+        focus: classes.listItemFocus
       },
       onClick: (event) => {
         onNavigateToTarget == null ? void 0 : onNavigateToTarget(event, item);
@@ -48,5 +51,6 @@ const HvVerticalNavigationSlider = ({
     }, item.id))
   });
 };
+exports.verticalNavigationSliderClasses = NavigationSlider_styles.staticClasses;
 exports.HvVerticalNavigationSlider = HvVerticalNavigationSlider;
 //# sourceMappingURL=NavigationSlider.cjs.map

package/dist/cjs/components/VerticalNavigation/NavigationSlider/NavigationSlider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationSlider.cjs","sources":["../../../../../src/components/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvListContainer } from \"@core/components/ListContainer\";\nimport { HvOverflowTooltip } from \"@core/components/OverflowTooltip\";\n\nimport { StyledListItem } from \"./NavigationSlider.styles\";\nimport verticalNavigationSliderClasses, {\n  HvVerticalNavigationSliderClasses,\n} from \"./navigationSliderClasses\";\nimport { NavigationData } from \"../VerticalNavigationContext\";\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  id,\n  classes,\n  data,\n  selected,\n  onNavigateToTarget,\n  onNavigateToChild,\n  forwardButtonAriaLabel = \"Navigate to submenu\",\n}: HvVerticalNavigationSliderProps) => {\n  return (\n    <HvListContainer interactive id={id}>\n      {data &&\n        data.map((item) => (\n          <StyledListItem\n            key={item.id}\n            classes={{\n              root: classes?.root,\n              selected: clsx(\n                classes?.listItemSelected,\n                verticalNavigationSliderClasses.listItemSelected\n              ),\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          </StyledListItem>\n        ))}\n    </HvListContainer>\n  );\n};\n"],"names":["HvVerticalNavigationSlider","id","classes","data","selected","onNavigateToTarget","onNavigateToChild","forwardButtonAriaLabel","HvListContainer","interactive","children","map","item","StyledListItem","root","clsx","listItemSelected","verticalNavigationSliderClasses","onClick","event","label","href","undefined","startAdornment","icon","_jsx","endAdornment","length","HvButton","DropRightXS","HvOverflowTooltip"],"mappings":";;;;;;;;;;AAwDO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,yBAAyB;AACM,MAAM;AACrC,wCACGC,cAAAA,iBAAe;AAAA,IAACC,aAAW;AAAA,IAACR;AAAAA,IAAOS,UACjCP,QACCA,KAAKQ,IAAKC,CAAAA,wCACPC,wCAAc;AAAA,MAEbX,SAAS;AAAA,QACPY,MAAMZ,mCAASY;AAAAA,QACfV,UAAUW,KAAAA,KACRb,mCAASc,kBACTC,wBAAAA,QAAgCD,gBAClC;AAAA,MACF;AAAA,MACAE,SAAUC,CAAU,UAAA;AAClBd,iEAAqBc,OAAOP;AAAAA,MAC9B;AAAA,MACA,cAAYA,KAAKQ;AAAAA,MACjB,gBACEhB,aAAaQ,KAAKX,KAAMW,KAAKS,OAAO,SAAS,OAAQC;AAAAA,MAEvDlB,UAAUA,aAAaQ,KAAKX;AAAAA,MAC5BsB,gBAAgBX,KAAKY,OAAOC,2BAAAA,IAAA,OAAA;AAAA,QAAAf,UAAME,KAAKY;AAAAA,MAAU,CAAA,IAAIF;AAAAA,MACrDI,cACEd,KAAKT,QAAQS,KAAKT,KAAKwB,SAAS,mCAC7BC,iBAAQ;AAAA,QACPJ,MAAI;AAAA,QACJN,SAAUC,CAAU,UAAA;AAClBb,iEAAoBa,OAAOP;AAAAA,QAC7B;AAAA,QACA,cAAYL;AAAAA,QAAuBG,UAEnCe,2BAAAA,IAACI,gBAAa,aAAA,EAAA;AAAA,MACN,CAAA,IACRP;AAAAA,MACLZ,yCAEAoB,mCAAiB;AAAA,QAAC3B,MAAMS,KAAKQ;AAAAA,MAAAA,CAAQ;AAAA,IAAA,GA/BjCR,KAAKX,EAgCI,CACjB;AAAA,EAAA,CACY;AAErB;;"}
+{"version":3,"file":"NavigationSlider.cjs","sources":["../../../../../src/components/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvListContainer, HvListItem } from \"@core/components/ListContainer\";\nimport { HvOverflowTooltip } from \"@core/components/OverflowTooltip\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { NavigationData } from \"../VerticalNavigationContext\";\n\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  id,\n  classes: classesProp,\n  data,\n  selected,\n  onNavigateToTarget,\n  onNavigateToChild,\n  forwardButtonAriaLabel = \"Navigate to submenu\",\n}: HvVerticalNavigationSliderProps) => {\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":["HvVerticalNavigationSlider","id","classes","classesProp","data","selected","onNavigateToTarget","onNavigateToChild","forwardButtonAriaLabel","useClasses","HvListContainer","interactive","children","map","item","HvListItem","root","listItemSelected","focus","listItemFocus","onClick","event","label","href","undefined","startAdornment","icon","_jsx","endAdornment","length","HvButton","DropRightXS","HvOverflowTooltip"],"mappings":";;;;;;;;;AAyDO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,yBAAyB;AACM,MAAM;AAC/B,QAAA;AAAA,IAAEN;AAAAA,EAAAA,IAAYO,wBAAAA,WAAWN,WAAW;AAE1C,wCACGO,cAAAA,iBAAe;AAAA,IAACC,aAAW;AAAA,IAACV;AAAAA,IAAOW,UACjCR,QACCA,KAAKS,IAAKC,CAAAA,wCACPC,qBAAU;AAAA,MAETb,SAAS;AAAA,QACPc,MAAMd,QAAQc;AAAAA,QACdX,UAAUH,QAAQe;AAAAA,QAClBC,OAAOhB,QAAQiB;AAAAA,MACjB;AAAA,MACAC,SAAUC,CAAU,UAAA;AAClBf,iEAAqBe,OAAOP;AAAAA,MAC9B;AAAA,MACA,cAAYA,KAAKQ;AAAAA,MACjB,gBACEjB,aAAaS,KAAKb,KAAMa,KAAKS,OAAO,SAAS,OAAQC;AAAAA,MAEvDnB,UAAUA,aAAaS,KAAKb;AAAAA,MAC5BwB,gBAAgBX,KAAKY,OAAOC,2BAAAA,IAAA,OAAA;AAAA,QAAAf,UAAME,KAAKY;AAAAA,MAAU,CAAA,IAAIF;AAAAA,MACrDI,cACEd,KAAKV,QAAQU,KAAKV,KAAKyB,SAAS,mCAC7BC,iBAAQ;AAAA,QACPJ,MAAI;AAAA,QACJN,SAAUC,CAAU,UAAA;AAClBd,iEAAoBc,OAAOP;AAAAA,QAC7B;AAAA,QACA,cAAYN;AAAAA,QAAuBI,UAEnCe,2BAAAA,IAACI,gBAAa,aAAA,EAAA;AAAA,MACN,CAAA,IACRP;AAAAA,MACLZ,yCAEAoB,mCAAiB;AAAA,QAAC5B,MAAMU,KAAKQ;AAAAA,MAAAA,CAAQ;AAAA,IAAA,GA7BjCR,KAAKb,EA8BA,CACb;AAAA,EAAA,CACY;AAErB;;;"}

package/dist/cjs/components/VerticalNavigation/NavigationSlider/NavigationSlider.styles.cjs

@@ -1,38 +1,35 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const ListItem_styles = require("../../ListContainer/ListItem/ListItem.styles.cjs");
-const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const StyledListItem = /* @__PURE__ */ _styled__default.default(ListItem.HvListItem, process.env.NODE_ENV === "production" ? {
-  target: "e13y3edh0"
-} : {
-  target: "e13y3edh0",
-  label: "StyledListItem"
-})({
-  display: "flex",
-  alignItems: "center",
-  borderLeft: uikitStyles.theme.verticalNavigation.inactiveBorderLeft,
-  minHeight: "48px",
-  marginBottom: "8px",
-  "& > button": {
-    marginLeft: "auto"
+const classes = require("../../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvVerticalNavigationSlider", {
+  root: {
+    display: "flex",
+    alignItems: "center",
+    borderLeft: uikitStyles.theme.verticalNavigation.inactiveBorderLeft,
+    minHeight: "48px",
+    marginBottom: "8px",
+    "& > button": {
+      marginLeft: "auto"
+    }
   },
-  [`&.${ListItem_styles.staticClasses.selected}`]: {
+  listItemSelected: {
     background: uikitStyles.theme.colors.atmo3,
     borderLeft: uikitStyles.theme.verticalNavigation.activeBorderLeft,
     "& *": {
       background: uikitStyles.theme.colors.atmo3
     }
   },
-  [`&.${ListItem_styles.staticClasses.focus}`]: {
+  listItemFocus: {
     background: uikitStyles.theme.colors.atmo3,
     "& *": {
       background: uikitStyles.theme.colors.atmo3
     }
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL05hdmlnYXRpb25TbGlkZXIvTmF2aWdhdGlvblNsaWRlci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUk4QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9OYXZpZ2F0aW9uU2xpZGVyL05hdmlnYXRpb25TbGlkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgSHZMaXN0SXRlbSwgbGlzdEl0ZW1DbGFzc2VzIH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvTGlzdENvbnRhaW5lclwiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTGlzdEl0ZW0gPSBzdHlsZWQoSHZMaXN0SXRlbSkoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgYm9yZGVyTGVmdDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmluYWN0aXZlQm9yZGVyTGVmdCxcbiAgbWluSGVpZ2h0OiBcIjQ4cHhcIixcbiAgbWFyZ2luQm90dG9tOiBcIjhweFwiLFxuICBcIiYgPiBidXR0b25cIjoge1xuICAgIG1hcmdpbkxlZnQ6IFwiYXV0b1wiLFxuICB9LFxuXG4gIFtgJi4ke2xpc3RJdGVtQ2xhc3Nlcy5zZWxlY3RlZH1gXToge1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICBib3JkZXJMZWZ0OiB0aGVtZS52ZXJ0aWNhbE5hdmlnYXRpb24uYWN0aXZlQm9yZGVyTGVmdCxcbiAgICBcIiYgKlwiOiB7XG4gICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgfSxcbiAgfSxcblxuICBbYCYuJHtsaXN0SXRlbUNsYXNzZXMuZm9jdXN9YF06IHtcbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgXCImICpcIjoge1xuICAgICAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgIH0sXG4gIH0sXG59KTtcbiJdfQ== */");
-exports.StyledListItem = StyledListItem;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=NavigationSlider.styles.cjs.map