@hitachivantara/uikit-react-core 5.0.0-next.9 → 5.0.0

package/dist/esm/components/VerticalNavigation/Header/Header.js

@@ -0,0 +1,62 @@
+import { Backwards, Forwards, Menu } from "@hitachivantara/uikit-react-icons";
+import clsx from "clsx";
+import { useContext } from "react";
+import { VerticalNavigationContext } from "../VerticalNavigationContext.js";
+import { StyledHeader, StyledCollapseButton } from "./Header.styles.js";
+import verticalNavigationHeaderClasses from "./headerClasses.js";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { HvButton } from "../../Button/Button.js";
+import { HvTypography } from "../../Typography/Typography.js";
+const HvVerticalNavigationHeader = ({
+  title,
+  openIcon = /* @__PURE__ */ jsx(Forwards, {}),
+  closeIcon = /* @__PURE__ */ jsx(Backwards, {}),
+  collapseButtonProps,
+  backButtonProps,
+  className,
+  classes,
+  onCollapseButtonClick,
+  ...others
+}) => {
+  const {
+    isOpen,
+    collapsedMode,
+    headerTitle,
+    slider,
+    navigateToParentHandler
+  } = useContext(VerticalNavigationContext);
+  openIcon = collapsedMode === "simple" ? /* @__PURE__ */ jsx(Menu, {}) : openIcon;
+  const backButtonClickHandler = () => {
+    if (navigateToParentHandler)
+      navigateToParentHandler();
+  };
+  return /* @__PURE__ */ jsxs(StyledHeader, {
+    className: clsx(className, verticalNavigationHeaderClasses.root, classes == null ? void 0 : classes.root, !isOpen && clsx(verticalNavigationHeaderClasses.minimized, classes == null ? void 0 : classes.minimized)),
+    ...others,
+    children: [isOpen && headerTitle && slider && /* @__PURE__ */ jsx(HvButton, {
+      icon: true,
+      variant: "secondaryGhost",
+      onClick: backButtonClickHandler,
+      ...backButtonProps,
+      children: /* @__PURE__ */ jsx(Backwards, {
+        iconSize: "XS"
+      })
+    }), isOpen && /* @__PURE__ */ jsx(HvTypography, {
+      variant: slider ? "label" : "title3",
+      children: headerTitle && slider ? headerTitle : title
+    }), onCollapseButtonClick && /* @__PURE__ */ jsx(StyledCollapseButton, {
+      icon: true,
+      variant: "secondaryGhost",
+      onClick: onCollapseButtonClick,
+      classes: {
+        root: isOpen ? "" : verticalNavigationHeaderClasses.minimized
+      },
+      ...collapseButtonProps,
+      children: isOpen ? closeIcon : openIcon
+    })]
+  });
+};
+export {
+  HvVerticalNavigationHeader
+};
+//# sourceMappingURL=Header.js.map

package/dist/esm/components/VerticalNavigation/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../../src/components/VerticalNavigation/Header/Header.tsx"],"sourcesContent":["import { Backwards, Forwards, Menu } from \"@hitachivantara/uikit-react-icons\";\nimport clsx from \"clsx\";\nimport { HvButton, HvButtonProps, HvTypography } from \"components\";\nimport { MouseEventHandler, useContext } from \"react\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { StyledCollapseButton, StyledHeader } from \"./Header.styles\";\nimport verticalNavigationHeaderClasses, {\n  HvVerticalNavigationHeaderClasses,\n} from \"./headerClasses\";\n\nexport type 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    collapsedMode,\n    headerTitle,\n    slider,\n    navigateToParentHandler,\n  } = useContext(VerticalNavigationContext);\n\n  openIcon = collapsedMode === \"simple\" ? <Menu /> : openIcon;\n\n  const backButtonClickHandler = () => {\n    if (navigateToParentHandler) navigateToParentHandler();\n  };\n\n  return (\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\n          icon\n          variant=\"secondaryGhost\"\n          onClick={backButtonClickHandler}\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        <StyledCollapseButton\n          icon\n          variant=\"secondaryGhost\"\n          onClick={onCollapseButtonClick}\n          classes={{\n            root: isOpen ? \"\" : verticalNavigationHeaderClasses.minimized,\n          }}\n          {...collapseButtonProps}\n        >\n          {isOpen ? closeIcon : openIcon}\n        </StyledCollapseButton>\n      )}\n    </StyledHeader>\n  );\n};\n"],"names":["HvVerticalNavigationHeader","title","openIcon","_jsx","Forwards","closeIcon","Backwards","collapseButtonProps","backButtonProps","className","classes","onCollapseButtonClick","others","isOpen","collapsedMode","headerTitle","slider","navigateToParentHandler","useContext","VerticalNavigationContext","Menu","backButtonClickHandler","StyledHeader","clsx","verticalNavigationHeaderClasses","root","minimized","children","HvButton","icon","variant","onClick","iconSize","HvTypography","StyledCollapseButton"],"mappings":";;;;;;;;;AAiDO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC,WAAWC,oBAACC,UAAW,EAAA;AAAA,EACvBC,YAAYF,oBAACG,WAAY,EAAA;AAAA,EACzBC;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,EAAAA,IACEC,WAAWC,yBAAyB;AAExCjB,aAAWY,kBAAkB,WAAWX,oBAACiB,MAAO,CAAA,CAAA,IAAGlB;AAEnD,QAAMmB,yBAAyBA,MAAM;AAC/BJ,QAAAA;AAAkD;EAAA;AAGxD,8BACGK,cAAY;AAAA,IACXb,WAAWc,KACTd,WACAe,gCAAgCC,MAChCf,mCAASe,MACT,CAACZ,UACCU,KAAKC,gCAAgCE,WAAWhB,mCAASgB,SAAS,CAAC;AAAA,IACrE,GACEd;AAAAA,IAAMe,UAAA,CAETd,UAAUE,eAAeC,8BACvBY,UAAQ;AAAA,MACPC,MAAI;AAAA,MACJC,SAAQ;AAAA,MACRC,SAASV;AAAAA,MAAuB,GAC5Bb;AAAAA,MAAemB,8BAElBrB,WAAS;AAAA,QAAC0B,UAAS;AAAA,MAAA,CAAI;AAAA,IAAA,CAAG,GAG9BnB,UACCV,oBAAC8B,cAAY;AAAA,MAACH,SAASd,SAAS,UAAU;AAAA,MAASW,UAChDZ,eAAeC,SAASD,cAAcd;AAAAA,IAAAA,CAAK,GAG/CU,yBACCR,oBAAC+B,sBAAoB;AAAA,MACnBL,MAAI;AAAA,MACJC,SAAQ;AAAA,MACRC,SAASpB;AAAAA,MACTD,SAAS;AAAA,QACPe,MAAMZ,SAAS,KAAKW,gCAAgCE;AAAAA,MACtD;AAAA,MAAE,GACEnB;AAAAA,MAAmBoB,UAEtBd,SAASR,YAAYH;AAAAA,IAAAA,CAEzB,CAAA;AAAA,EAAA,CACY;AAEnB;"}

package/dist/esm/components/VerticalNavigation/Header/Header.styles.js

@@ -0,0 +1,34 @@
+import _styled from "@emotion/styled/base";
+import verticalNavigationHeaderClasses from "./headerClasses.js";
+import { HvButton } from "../../Button/Button.js";
+const StyledHeader = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1arrhkt1"
+} : {
+  target: "e1arrhkt1",
+  label: "StyledHeader"
+})({
+  width: "100%",
+  display: "flex",
+  marginTop: "12px",
+  alignItems: "center",
+  [`&.${verticalNavigationHeaderClasses.minimized}`]: {
+    justifyContent: "center",
+    paddingRight: 0
+  }
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0hlYWRlci9IZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJNEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9WZXJ0aWNhbE5hdmlnYXRpb24vSGVhZGVyL0hlYWRlci5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBIdkJ1dHRvbiB9IGZyb20gXCJjb21wb25lbnRzXCI7XG5pbXBvcnQgdmVydGljYWxOYXZpZ2F0aW9uSGVhZGVyQ2xhc3NlcyBmcm9tIFwiLi9oZWFkZXJDbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRIZWFkZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBtYXJnaW5Ub3A6IFwiMTJweFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuXG4gIFtgJi4ke3ZlcnRpY2FsTmF2aWdhdGlvbkhlYWRlckNsYXNzZXMubWluaW1pemVkfWBdOiB7XG4gICAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG4gICAgcGFkZGluZ1JpZ2h0OiAwLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb2xsYXBzZUJ1dHRvbiA9IHN0eWxlZChIdkJ1dHRvbikoe1xuICBtYXJnaW5MZWZ0OiBcImF1dG9cIixcblxuICBbYCYuJHt2ZXJ0aWNhbE5hdmlnYXRpb25IZWFkZXJDbGFzc2VzLm1pbmltaXplZH1gXToge1xuICAgIG1hcmdpbkxlZnQ6IDAsXG4gIH0sXG59KTtcbiJdfQ== */");
+const StyledCollapseButton = /* @__PURE__ */ _styled(HvButton, process.env.NODE_ENV === "production" ? {
+  target: "e1arrhkt0"
+} : {
+  target: "e1arrhkt0",
+  label: "StyledCollapseButton"
+})({
+  marginLeft: "auto",
+  [`&.${verticalNavigationHeaderClasses.minimized}`]: {
+    marginLeft: 0
+  }
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0hlYWRlci9IZWFkZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQm9DIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0hlYWRlci9IZWFkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgSHZCdXR0b24gfSBmcm9tIFwiY29tcG9uZW50c1wiO1xuaW1wb3J0IHZlcnRpY2FsTmF2aWdhdGlvbkhlYWRlckNsYXNzZXMgZnJvbSBcIi4vaGVhZGVyQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSGVhZGVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgbWFyZ2luVG9wOiBcIjEycHhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcblxuICBbYCYuJHt2ZXJ0aWNhbE5hdmlnYXRpb25IZWFkZXJDbGFzc2VzLm1pbmltaXplZH1gXToge1xuICAgIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICAgIHBhZGRpbmdSaWdodDogMCxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29sbGFwc2VCdXR0b24gPSBzdHlsZWQoSHZCdXR0b24pKHtcbiAgbWFyZ2luTGVmdDogXCJhdXRvXCIsXG5cbiAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uSGVhZGVyQ2xhc3Nlcy5taW5pbWl6ZWR9YF06IHtcbiAgICBtYXJnaW5MZWZ0OiAwLFxuICB9LFxufSk7XG4iXX0= */");
+export {
+  StyledCollapseButton,
+  StyledHeader
+};
+//# sourceMappingURL=Header.styles.js.map

package/dist/esm/components/VerticalNavigation/Header/Header.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.styles.js","sources":["../../../../../src/components/VerticalNavigation/Header/Header.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvButton } from \"components\";\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(HvButton)({\n  marginLeft: \"auto\",\n\n  [`&.${verticalNavigationHeaderClasses.minimized}`]: {\n    marginLeft: 0,\n  },\n});\n"],"names":["StyledHeader","process","env","NODE_ENV","target","label","width","display","marginTop","alignItems","verticalNavigationHeaderClasses","minimized","justifyContent","paddingRight","StyledCollapseButton","HvButton","marginLeft"],"mappings":";;;AAIO,MAAMA,eAAsB,wBAAA,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,gCAAgCC,WAAW,GAAG;AAAA,IAClDC,gBAAgB;AAAA,IAChBC,cAAc;AAAA,EAChB;AACF,GAACZ,QAAAC,IAAAC,aAAC,eAAA,KAAA,ixCAAA;AAEK,MAAMW,uBAA8BC,wBAAAA,UAAQd,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACnDW,YAAY;AAAA,EAEZ,CAAE,KAAIN,gCAAgCC,WAAW,GAAG;AAAA,IAClDK,YAAY;AAAA,EACd;AACF,GAACf,QAAAC,IAAAC,aAAC,eAAA,KAAA,ixCAAA;"}

package/dist/esm/components/VerticalNavigation/Header/headerClasses.js

@@ -0,0 +1,8 @@
+import { getClasses } from "../../../utils/classes.js";
+const classKeys = ["root", "minimized"];
+const verticalNavigationHeaderClasses = getClasses(classKeys, "HvVerticalNavigationHeader");
+const verticalNavigationHeaderClasses$1 = verticalNavigationHeaderClasses;
+export {
+  verticalNavigationHeaderClasses$1 as default
+};
+//# sourceMappingURL=headerClasses.js.map

package/dist/esm/components/VerticalNavigation/Header/headerClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"headerClasses.js","sources":["../../../../../src/components/VerticalNavigation/Header/headerClasses.ts"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvVerticalNavigationHeaderClasses = {\n  root?: string;\n  minimized?: string;\n};\n\nconst classKeys: string[] = [\"root\", \"minimized\"];\n\nconst verticalNavigationHeaderClasses =\n  getClasses<HvVerticalNavigationHeaderClasses>(\n    classKeys,\n    \"HvVerticalNavigationHeader\"\n  );\n\nexport default verticalNavigationHeaderClasses;\n"],"names":["classKeys","verticalNavigationHeaderClasses","getClasses"],"mappings":";AAOA,MAAMA,YAAsB,CAAC,QAAQ,WAAW;AAEhD,MAAMC,kCACJC,WACEF,WACA,4BAA4B;AAGhC,MAAA,oCAAeC;"}

package/dist/esm/components/VerticalNavigation/Navigation/Navigation.js

@@ -0,0 +1,155 @@
+import { useCallback, useContext, useMemo, useEffect } from "react";
+import clsx from "clsx";
+import verticalNavigationTreeClasses from "./navigationClasses.js";
+import { StyledNav } from "./Navigation.styles.js";
+import { VerticalNavigationContext } from "../VerticalNavigationContext.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { HvVerticalNavigationSlider } from "../NavigationSlider/NavigationSlider.js";
+import { HvVerticalNavigationTreeView } from "../TreeView/TreeView.js";
+import { HvVerticalNavigationTreeViewItem } from "../TreeView/TreeViewItem.js";
+import { useControlled } from "../../../hooks/useControlled.js";
+import { setId } from "../../../utils/setId.js";
+import { wrapperTooltip } from "../../../utils/wrapperTooltip.js";
+const createListHierarchy = (items, id, classes) => items.map((item) => {
+  const {
+    id: itemId,
+    label: itemLabel,
+    icon,
+    data: children,
+    selectable,
+    disabled,
+    href,
+    target
+  } = item;
+  const ItemText = wrapperTooltip(true, itemLabel, itemLabel);
+  return /* @__PURE__ */ jsx(HvVerticalNavigationTreeViewItem, {
+    id: setId(id, itemId),
+    className: classes == null ? void 0 : classes.listItem,
+    href,
+    target,
+    nodeId: itemId,
+    label: /* @__PURE__ */ jsx(ItemText, {}),
+    icon,
+    payload: item,
+    selectable,
+    disabled,
+    children: children ? createListHierarchy(children, id, classes) : void 0
+  }, itemId);
+});
+const getAllParents = (items) => {
+  const parents = items.filter((item) => item.data != null && item.data.length > 0);
+  const childParents = parents.flatMap((item) => getAllParents(item.data));
+  return [...parents, ...childParents];
+};
+function pathToElement(data, targetId) {
+  const path = [];
+  if (data != null && data.length > 0) {
+    for (let i = 0; i !== data.length; ++i) {
+      const item = data[i];
+      if (item.id === targetId) {
+        path.push(item.id);
+        break;
+      }
+      const subPaths = pathToElement(item.data, targetId);
+      if (subPaths.length > 0) {
+        path.push(item.id);
+        path.push(...subPaths);
+        break;
+      }
+    }
+  }
+  return path;
+}
+const HvVerticalNavigationTree = ({
+  id,
+  className,
+  classes,
+  data,
+  mode = "navigation",
+  collapsible = false,
+  expanded: expandedProp,
+  defaultExpanded,
+  onToggle,
+  selected: selectedProp,
+  defaultSelected,
+  onChange,
+  ...others
+}) => {
+  const [selected, setSelected] = useControlled(selectedProp, defaultSelected);
+  const [expanded, setExpanded] = useControlled(expandedProp, () => {
+    if (defaultExpanded === true) {
+      return getAllParents(data).map((item) => item.id);
+    }
+    if (defaultExpanded === false) {
+      return [];
+    }
+    if (defaultExpanded == null) {
+      if (selected != null) {
+        const path = pathToElement(data, selected);
+        return path.slice(0, -1);
+      }
+      return [];
+    }
+    return defaultExpanded;
+  });
+  const handleChange = useCallback((event, selectedId, selectedItem) => {
+    setSelected(selectedId);
+    if (onChange) {
+      onChange(event, selectedItem);
+    }
+  }, [onChange, setSelected]);
+  const handleToggle = useCallback((event, newExpanded) => {
+    setExpanded(newExpanded);
+    if (onToggle) {
+      onToggle(event, newExpanded);
+    }
+  }, [onToggle, setExpanded]);
+  const {
+    isOpen,
+    collapsedMode,
+    slider,
+    parentItem,
+    withParentData,
+    navigateToChildHandler,
+    setParentData,
+    setParentSelected
+  } = useContext(VerticalNavigationContext);
+  const children = useMemo(() => data && createListHierarchy(data, id, classes), [classes, data, id]);
+  useEffect(() => {
+    if (setParentSelected)
+      setParentSelected(selected);
+  }, [selected, setSelected]);
+  useEffect(() => {
+    if (setParentData)
+      setParentData(data);
+  }, [data]);
+  const navigateToTargetHandler = (event, selectedItem) => {
+    handleChange(event, selectedItem.id, selectedItem);
+  };
+  return /* @__PURE__ */ jsx(StyledNav, {
+    id,
+    className: clsx(className, verticalNavigationTreeClasses.root, classes == null ? void 0 : classes.root, !isOpen && collapsedMode == "simple" && clsx(verticalNavigationTreeClasses.collapsed, classes == null ? void 0 : classes.collapsed)),
+    ...others,
+    children: slider ? /* @__PURE__ */ jsx(HvVerticalNavigationSlider, {
+      data: parentItem.data || withParentData,
+      selected,
+      onNavigateToTarget: navigateToTargetHandler,
+      onNavigateToChild: navigateToChildHandler
+    }) : /* @__PURE__ */ jsx(HvVerticalNavigationTreeView, {
+      id: setId(id, "tree"),
+      className: clsx(verticalNavigationTreeClasses.list, classes == null ? void 0 : classes.list),
+      selectable: true,
+      mode,
+      collapsible,
+      selected,
+      onChange: handleChange,
+      expanded,
+      onToggle: handleToggle,
+      children
+    })
+  });
+};
+export {
+  HvVerticalNavigationTree
+};
+//# sourceMappingURL=Navigation.js.map

package/dist/esm/components/VerticalNavigation/Navigation/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/VerticalNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import { useCallback, useMemo, useContext, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { setId, wrapperTooltip } from \"utils\";\nimport { useControlled } from \"hooks\";\nimport {\n  HvVerticalNavigationTreeView,\n  HvVerticalNavigationTreeViewItem,\n} from \"../TreeView\";\nimport verticalNavigationTreeClasses, {\n  HvVerticalNavigationTreeClasses,\n} from \"./navigationClasses\";\nimport { StyledNav } from \"./Navigation.styles\";\nimport { HvVerticalNavigationSlider } from \"../\";\nimport { HvBaseProps } from \"../../../types\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\n\nexport interface NavigationData {\n  /**\n   * the id to be applied to the root element.\n   */\n  id: string;\n  /**\n   * the label to be rendered on the menu item.\n   */\n  label: string;\n  /**\n   * The url for the link.\n   */\n  href?: string;\n  /**\n   * The behavior when opening a link.\n   */\n  target?: string;\n  /**\n   * Icon to be render.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Data subset.\n   */\n  data?: NavigationData[];\n  /**\n   * if `true` the item is disabled and is not interactive.\n   */\n  disabled?: boolean;\n  /**\n   * if `true` the item doesn't have a selected state.\n   */\n  selectable?: boolean;\n  /**\n   * Any other properties.\n   */\n  [otherProperty: string]: any;\n}\n\nconst createListHierarchy = (\n  items,\n  id,\n  classes?: HvVerticalNavigationTreeClasses\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    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      >\n        {children ? createListHierarchy(children, id, classes) : 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  ...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 handleChange = useCallback(\n    (event, selectedId, selectedItem) => {\n      setSelected(selectedId);\n\n      if (onChange) {\n        onChange(event, selectedItem);\n      }\n    },\n    [onChange, setSelected]\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 {\n    isOpen,\n    collapsedMode,\n    slider,\n\n    parentItem,\n    withParentData,\n    navigateToChildHandler,\n\n    setParentData,\n    setParentSelected,\n  } = useContext(VerticalNavigationContext);\n\n  const children = useMemo(\n    () => data && createListHierarchy(data, id, classes),\n    [classes, data, id]\n  );\n\n  useEffect(() => {\n    if (setParentSelected) setParentSelected(selected);\n  }, [selected, setSelected]);\n\n  useEffect(() => {\n    if (setParentData) setParentData(data);\n  }, [data]);\n\n  //navigation slider\n  const navigateToTargetHandler = (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          collapsedMode == \"simple\" &&\n          clsx(verticalNavigationTreeClasses.collapsed, classes?.collapsed)\n      )}\n      {...others}\n    >\n      {slider ? (\n        <HvVerticalNavigationSlider\n          data={parentItem.data || withParentData}\n          selected={selected}\n          onNavigateToTarget={navigateToTargetHandler}\n          onNavigateToChild={navigateToChildHandler}\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          {children}\n        </HvVerticalNavigationTreeView>\n      )}\n    </StyledNav>\n  );\n};\n\nexport type HvVerticalNavigationTreeProps = HvBaseProps<\n  HTMLDivElement,\n  { onChange }\n> & {\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};\n\nexport type NavigationMode = \"treeview\" | \"navigation\" | \"slider\";\n"],"names":["createListHierarchy","items","id","classes","map","item","itemId","label","itemLabel","icon","data","children","selectable","disabled","href","target","ItemText","wrapperTooltip","HvVerticalNavigationTreeViewItem","setId","className","listItem","nodeId","_jsx","payload","undefined","getAllParents","parents","filter","length","childParents","flatMap","pathToElement","targetId","path","i","push","subPaths","HvVerticalNavigationTree","mode","collapsible","expanded","expandedProp","defaultExpanded","onToggle","selected","selectedProp","defaultSelected","onChange","others","setSelected","useControlled","setExpanded","slice","handleChange","useCallback","event","selectedId","selectedItem","handleToggle","newExpanded","isOpen","collapsedMode","slider","parentItem","withParentData","navigateToChildHandler","setParentData","setParentSelected","useContext","VerticalNavigationContext","useMemo","useEffect","navigateToTargetHandler","StyledNav","clsx","verticalNavigationTreeClasses","root","collapsed","HvVerticalNavigationSlider","onNavigateToTarget","onNavigateToChild","HvVerticalNavigationTreeView","list"],"mappings":"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"}

package/dist/esm/components/VerticalNavigation/Navigation/Navigation.styles.js

@@ -0,0 +1,20 @@
+import _styled from "@emotion/styled/base";
+import { theme } from "@hitachivantara/uikit-styles";
+import verticalNavigationTreeClasses from "./navigationClasses.js";
+const StyledNav = /* @__PURE__ */ _styled("nav", process.env.NODE_ENV === "production" ? {
+  target: "ejose0b0"
+} : {
+  target: "ejose0b0",
+  label: "StyledNav"
+})({
+  display: "block",
+  background: theme.colors.atmo1,
+  overflowY: "auto",
+  [`&.${verticalNavigationTreeClasses.collapsed}`]: {
+    display: "none"
+  }
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL05hdmlnYXRpb24vTmF2aWdhdGlvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUl5QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9OYXZpZ2F0aW9uL05hdmlnYXRpb24uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IG5hdmlnYXRpb25DbGFzc2VzIGZyb20gXCIuL25hdmlnYXRpb25DbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWROYXYgPSBzdHlsZWQoXCJuYXZcIikoe1xuICBkaXNwbGF5OiBcImJsb2NrXCIsXG4gIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMSxcblxuICBvdmVyZmxvd1k6IFwiYXV0b1wiLFxuXG4gIFtgJi4ke25hdmlnYXRpb25DbGFzc2VzLmNvbGxhcHNlZH1gXToge1xuICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICB9LFxufSk7XG4iXX0= */");
+export {
+  StyledNav
+};
+//# sourceMappingURL=Navigation.styles.js.map

package/dist/esm/components/VerticalNavigation/Navigation/Navigation.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.styles.js","sources":["../../../../../src/components/VerticalNavigation/Navigation/Navigation.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\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"],"names":["StyledNav","process","env","NODE_ENV","target","label","display","background","theme","colors","atmo1","overflowY","navigationClasses","collapsed"],"mappings":";;;AAIO,MAAMA,YAAmB,wBAAA,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,MAAMC,OAAOC;AAAAA,EAEzBC,WAAW;AAAA,EAEX,CAAE,KAAIC,8BAAkBC,WAAW,GAAG;AAAA,IACpCP,SAAS;AAAA,EACX;AACF,GAACL,QAAAC,IAAAC,aAAC,eAAA,KAAA,y/BAAA;"}

package/dist/esm/components/VerticalNavigation/Navigation/navigationClasses.js

@@ -0,0 +1,8 @@
+import { getClasses } from "../../../utils/classes.js";
+const classKeys = ["root", "list", "listItem", "collapsed"];
+const verticalNavigationTreeClasses = getClasses(classKeys, "HvVerticalNavigationTree");
+const verticalNavigationTreeClasses$1 = verticalNavigationTreeClasses;
+export {
+  verticalNavigationTreeClasses$1 as default
+};
+//# sourceMappingURL=navigationClasses.js.map

package/dist/esm/components/VerticalNavigation/Navigation/navigationClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigationClasses.js","sources":["../../../../../src/components/VerticalNavigation/Navigation/navigationClasses.ts"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvVerticalNavigationTreeClasses = {\n  root?: string;\n  list?: string;\n  listItem?: string;\n  collapsed?: string;\n};\n\nconst classKeys: string[] = [\"root\", \"list\", \"listItem\", \"collapsed\"];\n\nconst verticalNavigationTreeClasses =\n  getClasses<HvVerticalNavigationTreeClasses>(\n    classKeys,\n    \"HvVerticalNavigationTree\"\n  );\n\nexport default verticalNavigationTreeClasses;\n"],"names":["classKeys","verticalNavigationTreeClasses","getClasses"],"mappings":";AASA,MAAMA,YAAsB,CAAC,QAAQ,QAAQ,YAAY,WAAW;AAEpE,MAAMC,gCACJC,WACEF,WACA,0BAA0B;AAG9B,MAAA,kCAAeC;"}

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

@@ -0,0 +1,48 @@
+import { DropRightXS } from "@hitachivantara/uikit-react-icons";
+import clsx from "clsx";
+import { StyledListItem } from "./NavigationSlider.styles.js";
+import verticalNavigationSliderClasses from "./navigationSliderClasses.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { HvListContainer } from "../../ListContainer/ListContainer.js";
+import { HvButton } from "../../Button/Button.js";
+const HvVerticalNavigationSlider = ({
+  id,
+  classes,
+  data,
+  selected,
+  onNavigateToTarget,
+  onNavigateToChild
+}) => {
+  return /* @__PURE__ */ jsx(HvListContainer, {
+    interactive: true,
+    id,
+    children: data && data.map((item) => /* @__PURE__ */ jsx(StyledListItem, {
+      classes: {
+        root: classes == null ? void 0 : classes.root,
+        selected: clsx(classes == null ? void 0 : classes.listItemSelected, verticalNavigationSliderClasses.listItemSelected)
+      },
+      onClick: (event) => {
+        if (onNavigateToTarget)
+          onNavigateToTarget(event, item);
+      },
+      selected: selected === item.id,
+      startAdornment: item.icon,
+      endAdornment: item.data && item.data.length > 0 ? /* @__PURE__ */ jsx(HvButton, {
+        variant: "secondaryGhost",
+        icon: true,
+        onClick: (event) => {
+          if (onNavigateToChild)
+            onNavigateToChild(event, item);
+        },
+        children: /* @__PURE__ */ jsx(DropRightXS, {})
+      }) : /* @__PURE__ */ jsx("div", {}),
+      children: /* @__PURE__ */ jsx("span", {
+        children: item.label
+      })
+    }, item.id))
+  });
+};
+export {
+  HvVerticalNavigationSlider
+};
+//# sourceMappingURL=NavigationSlider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationSlider.js","sources":["../../../../../src/components/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport clsx from \"clsx\";\nimport { HvButton, HvListContainer, NavigationData } from \"components\";\nimport { StyledListItem } from \"./NavigationSlider.styles\";\nimport verticalNavigationSliderClasses, {\n  HvVerticalNavigationSliderClasses,\n} from \"./navigationSliderClasses\";\n\nexport type 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};\n\nexport const HvVerticalNavigationSlider = ({\n  id,\n  classes,\n  data,\n  selected,\n  onNavigateToTarget,\n  onNavigateToChild,\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              if (onNavigateToTarget) onNavigateToTarget(event, item);\n            }}\n            selected={selected === item.id}\n            startAdornment={item.icon}\n            endAdornment={\n              item.data && item.data.length > 0 ? (\n                <HvButton\n                  variant=\"secondaryGhost\"\n                  icon\n                  onClick={(event) => {\n                    if (onNavigateToChild) onNavigateToChild(event, item);\n                  }}\n                >\n                  <DropRightXS />\n                </HvButton>\n              ) : (\n                <div />\n              )\n            }\n          >\n            <span>{item.label}</span>\n          </StyledListItem>\n        ))}\n    </HvListContainer>\n  );\n};\n"],"names":["HvVerticalNavigationSlider","id","classes","data","selected","onNavigateToTarget","onNavigateToChild","HvListContainer","interactive","children","map","item","StyledListItem","root","clsx","listItemSelected","verticalNavigationSliderClasses","onClick","event","startAdornment","icon","endAdornment","length","HvButton","variant","_jsx","DropRightXS","label"],"mappings":";;;;;;;AAgDO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAC+B,MAAM;AACrC,6BACGC,iBAAe;AAAA,IAACC,aAAW;AAAA,IAACP;AAAAA,IAAOQ,UACjCN,QACCA,KAAKO,IAAKC,CAAAA,6BACPC,gBAAc;AAAA,MAEbV,SAAS;AAAA,QACPW,MAAMX,mCAASW;AAAAA,QACfT,UAAUU,KACRZ,mCAASa,kBACTC,gCAAgCD,gBAAgB;AAAA,MAEpD;AAAA,MACAE,SAAUC,CAAU,UAAA;AACdb,YAAAA;AAAoBA,6BAAmBa,OAAOP,IAAI;AAAA,MACxD;AAAA,MACAP,UAAUA,aAAaO,KAAKV;AAAAA,MAC5BkB,gBAAgBR,KAAKS;AAAAA,MACrBC,cACEV,KAAKR,QAAQQ,KAAKR,KAAKmB,SAAS,wBAC7BC,UAAQ;AAAA,QACPC,SAAQ;AAAA,QACRJ,MAAI;AAAA,QACJH,SAAUC,CAAU,UAAA;AACdZ,cAAAA;AAAmBA,8BAAkBY,OAAOP,IAAI;AAAA,QACtD;AAAA,QAAEF,UAEFgB,oBAACC,aAAW,EAAA;AAAA,MAAA,CACH,IAIdD,oBAAA,OAAA,EAAA;AAAA,MAAAhB,8BAED,QAAA;AAAA,QAAAA,UAAOE,KAAKgB;AAAAA,MAAAA,CAAK;AAAA,IAAA,GA7BZhB,KAAKV,EAAE,CA+Bf;AAAA,EAAA,CACa;AAEtB;"}

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

@@ -0,0 +1,36 @@
+import _styled from "@emotion/styled/base";
+import { theme } from "@hitachivantara/uikit-styles";
+import listItemClasses from "../../ListContainer/ListItem/listItemClasses.js";
+import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
+const StyledListItem = /* @__PURE__ */ _styled(HvListItem, process.env.NODE_ENV === "production" ? {
+  target: "e13y3edh0"
+} : {
+  target: "e13y3edh0",
+  label: "StyledListItem"
+})({
+  display: "flex",
+  alignItems: "center",
+  borderLeft: theme.verticalNavigation.inactiveBorderLeft,
+  minHeight: "48px",
+  marginBottom: "8px",
+  "& > button": {
+    marginLeft: "auto"
+  },
+  [`&.${listItemClasses.selected}`]: {
+    background: theme.colors.atmo3,
+    borderLeft: theme.verticalNavigation.activeBorderLeft,
+    "& *": {
+      background: theme.colors.atmo3
+    }
+  },
+  [`&.${listItemClasses.focus}`]: {
+    background: theme.colors.atmo3,
+    "& *": {
+      background: theme.colors.atmo3
+    }
+  }
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL05hdmlnYXRpb25TbGlkZXIvTmF2aWdhdGlvblNsaWRlci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUk4QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9OYXZpZ2F0aW9uU2xpZGVyL05hdmlnYXRpb25TbGlkZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgSHZMaXN0SXRlbSwgbGlzdEl0ZW1DbGFzc2VzIH0gZnJvbSBcImNvbXBvbmVudHNcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExpc3RJdGVtID0gc3R5bGVkKEh2TGlzdEl0ZW0pKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIGJvcmRlckxlZnQ6IHRoZW1lLnZlcnRpY2FsTmF2aWdhdGlvbi5pbmFjdGl2ZUJvcmRlckxlZnQsXG4gIG1pbkhlaWdodDogXCI0OHB4XCIsXG4gIG1hcmdpbkJvdHRvbTogXCI4cHhcIixcbiAgXCImID4gYnV0dG9uXCI6IHtcbiAgICBtYXJnaW5MZWZ0OiBcImF1dG9cIixcbiAgfSxcblxuICBbYCYuJHtsaXN0SXRlbUNsYXNzZXMuc2VsZWN0ZWR9YF06IHtcbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgYm9yZGVyTGVmdDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmFjdGl2ZUJvcmRlckxlZnQsXG4gICAgXCImICpcIjoge1xuICAgICAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgIH0sXG4gIH0sXG5cbiAgW2AmLiR7bGlzdEl0ZW1DbGFzc2VzLmZvY3VzfWBdOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgIFwiJiAqXCI6IHtcbiAgICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICB9LFxuICB9LFxufSk7XG4iXX0= */");
+export {
+  StyledListItem
+};
+//# sourceMappingURL=NavigationSlider.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationSlider.styles.js","sources":["../../../../../src/components/VerticalNavigation/NavigationSlider/NavigationSlider.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvListItem, listItemClasses } from \"components\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const StyledListItem = styled(HvListItem)({\n  display: \"flex\",\n  alignItems: \"center\",\n  borderLeft: theme.verticalNavigation.inactiveBorderLeft,\n  minHeight: \"48px\",\n  marginBottom: \"8px\",\n  \"& > button\": {\n    marginLeft: \"auto\",\n  },\n\n  [`&.${listItemClasses.selected}`]: {\n    background: theme.colors.atmo3,\n    borderLeft: theme.verticalNavigation.activeBorderLeft,\n    \"& *\": {\n      background: theme.colors.atmo3,\n    },\n  },\n\n  [`&.${listItemClasses.focus}`]: {\n    background: theme.colors.atmo3,\n    \"& *\": {\n      background: theme.colors.atmo3,\n    },\n  },\n});\n"],"names":["StyledListItem","HvListItem","process","env","NODE_ENV","target","label","display","alignItems","borderLeft","theme","verticalNavigation","inactiveBorderLeft","minHeight","marginBottom","marginLeft","listItemClasses","selected","background","colors","atmo3","activeBorderLeft","focus"],"mappings":";;;;AAIO,MAAMA,iBAAwBC,wBAAAA,YAAUC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC/CC,SAAS;AAAA,EACTC,YAAY;AAAA,EACZC,YAAYC,MAAMC,mBAAmBC;AAAAA,EACrCC,WAAW;AAAA,EACXC,cAAc;AAAA,EACd,cAAc;AAAA,IACZC,YAAY;AAAA,EACd;AAAA,EAEA,CAAE,KAAIC,gBAAgBC,UAAU,GAAG;AAAA,IACjCC,YAAYR,MAAMS,OAAOC;AAAAA,IACzBX,YAAYC,MAAMC,mBAAmBU;AAAAA,IACrC,OAAO;AAAA,MACLH,YAAYR,MAAMS,OAAOC;AAAAA,IAC3B;AAAA,EACF;AAAA,EAEA,CAAE,KAAIJ,gBAAgBM,OAAO,GAAG;AAAA,IAC9BJ,YAAYR,MAAMS,OAAOC;AAAAA,IACzB,OAAO;AAAA,MACLF,YAAYR,MAAMS,OAAOC;AAAAA,IAC3B;AAAA,EACF;AACF,GAAClB,QAAAC,IAAAC,aAAC,eAAA,KAAA,ykDAAA;"}

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

@@ -0,0 +1,8 @@
+import { getClasses } from "../../../utils/classes.js";
+const classKeys = ["root", "listItemSelected"];
+const verticalNavigationSliderClasses = getClasses(classKeys, "HvVerticalNavigationSlider");
+const verticalNavigationSliderClasses$1 = verticalNavigationSliderClasses;
+export {
+  verticalNavigationSliderClasses$1 as default
+};
+//# sourceMappingURL=navigationSliderClasses.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigationSliderClasses.js","sources":["../../../../../src/components/VerticalNavigation/NavigationSlider/navigationSliderClasses.ts"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvVerticalNavigationSliderClasses = {\n  root?: string;\n  listItemSelected?: string;\n};\n\nconst classKeys: string[] = [\"root\", \"listItemSelected\"];\n\nconst verticalNavigationSliderClasses =\n  getClasses<HvVerticalNavigationSliderClasses>(\n    classKeys,\n    \"HvVerticalNavigationSlider\"\n  );\n\nexport default verticalNavigationSliderClasses;\n"],"names":["classKeys","verticalNavigationSliderClasses","getClasses"],"mappings":";AAOA,MAAMA,YAAsB,CAAC,QAAQ,kBAAkB;AAEvD,MAAMC,kCACJC,WACEF,WACA,4BAA4B;AAGhC,MAAA,oCAAeC;"}

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

@@ -0,0 +1,41 @@
+const searchInCollection = (collection, childrenPropName, propName, propValue) => {
+  if (collection[propName] === propValue) {
+    return collection;
+  }
+  const items = collection[childrenPropName] || collection;
+  let foundItem = null;
+  for (let index = 0; foundItem === null && index < items.length; index += 1) {
+    foundItem = searchInCollection(items[index], childrenPropName, propName, propValue);
+  }
+  return foundItem;
+};
+const getNavigationItemById = (navigationItems, navigationItemId) => {
+  return searchInCollection(navigationItems, "data", "id", navigationItemId);
+};
+const getParentItemById = (navigationItems, navigationItemId) => {
+  var _a;
+  const parentId = (_a = getNavigationItemById(navigationItems, navigationItemId)) == null ? void 0 : _a.parent;
+  return getNavigationItemById(navigationItems, parentId);
+};
+const fillDataWithParentId = (navigationItems, parentItemId) => {
+  return navigationItems.map((item) => {
+    var _a;
+    if (((_a = item == null ? void 0 : item.data) == null ? void 0 : _a.length) > 0) {
+      return {
+        ...item,
+        parent: parentItemId,
+        data: fillDataWithParentId(item.data, item.id)
+      };
+    }
+    return {
+      ...item,
+      parent: parentItemId
+    };
+  });
+};
+export {
+  fillDataWithParentId,
+  getNavigationItemById,
+  getParentItemById
+};
+//# sourceMappingURL=NavigationSlider.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationSlider.utils.js","sources":["../../../../../../src/components/VerticalNavigation/NavigationSlider/utils/NavigationSlider.utils.tsx"],"sourcesContent":["/**\n * Recursively searches in a collection the first element where the property matches the specified value.\n *\n * @param collection - Collection where the search will be performed\n * @param childrenPropName - The children property name where the recursive search will be performed\n * @param propName - The name of the property to be used on the search\n * @param propValue - The value of the property to be used on the search\n * @returns The element that matches the requirement or null if none is found\n */\nconst searchInCollection = (\n  collection,\n  childrenPropName,\n  propName,\n  propValue\n) => {\n  if (collection[propName] === propValue) {\n    return collection;\n  }\n\n  const items = collection[childrenPropName] || collection;\n\n  let foundItem = null;\n  for (let index = 0; foundItem === null && index < items.length; index += 1) {\n    foundItem = searchInCollection(\n      items[index],\n      childrenPropName,\n      propName,\n      propValue\n    );\n  }\n  return foundItem;\n};\n\n/**\n * Returns the navigation item with the specified id.\n *\n * @param navigationItems - The collection of navigation items.\n * @param navigationItemId - The id to be used on the search\n * @returns The navigation item with the specified id.\n */\nconst getNavigationItemById = (navigationItems, navigationItemId) => {\n  return searchInCollection(navigationItems, \"data\", \"id\", navigationItemId);\n};\n\n/**\n * Returns the parent item for the received item id.\n *\n * @param navigationItems - The collection of navigation items.\n * @param navigationItemId - The id to be used on the search\n * @returns The parent navigation item.\n */\nconst getParentItemById = (navigationItems, navigationItemId) => {\n  const parentId = getNavigationItemById(\n    navigationItems,\n    navigationItemId\n  )?.parent;\n  return getNavigationItemById(navigationItems, parentId);\n};\n\n/**\n * Fills the data structure with the parent id on each one of the nodes.\n *\n * @param navigationItems - The collection of navigation items.\n * @param parentItemId - The parent id to be added.\n * @returns The structure now filled with the parent id.\n */\nconst fillDataWithParentId = (navigationItems, parentItemId?) => {\n  return navigationItems.map((item) => {\n    if (item?.data?.length > 0) {\n      return {\n        ...item,\n        parent: parentItemId,\n        data: fillDataWithParentId(item.data, item.id),\n      };\n    }\n    return { ...item, parent: parentItemId };\n  });\n};\n\nexport { getNavigationItemById, getParentItemById, fillDataWithParentId };\n"],"names":["searchInCollection","collection","childrenPropName","propName","propValue","items","foundItem","index","length","getNavigationItemById","navigationItems","navigationItemId","getParentItemById","parentId","parent","fillDataWithParentId","parentItemId","map","item","data","id"],"mappings":"AASA,MAAMA,qBAAqBA,CACzBC,YACAC,kBACAC,UACAC,cACG;AACCH,MAAAA,WAAWE,QAAQ,MAAMC,WAAW;AAC/BH,WAAAA;AAAAA,EACT;AAEMI,QAAAA,QAAQJ,WAAWC,gBAAgB,KAAKD;AAE9C,MAAIK,YAAY;AACPC,WAAAA,QAAQ,GAAGD,cAAc,QAAQC,QAAQF,MAAMG,QAAQD,SAAS,GAAG;AAC1ED,gBAAYN,mBACVK,MAAME,KAAK,GACXL,kBACAC,UACAC,SAAS;AAAA,EAEb;AACOE,SAAAA;AACT;AASMG,MAAAA,wBAAwBA,CAACC,iBAAiBC,qBAAqB;AACnE,SAAOX,mBAAmBU,iBAAiB,QAAQ,MAAMC,gBAAgB;AAC3E;AASMC,MAAAA,oBAAoBA,CAACF,iBAAiBC,qBAAqB;AA1CjE;AA2CE,QAAME,YAAWJ,2BACfC,iBACAC,gBAAgB,MAFDF,mBAGdK;AACIL,SAAAA,sBAAsBC,iBAAiBG,QAAQ;AACxD;AASME,MAAAA,uBAAuBA,CAACL,iBAAiBM,iBAAkB;AACxDN,SAAAA,gBAAgBO,IAAKC,CAAS,SAAA;AA1DvC;AA2DQA,UAAAA,kCAAMC,SAAND,mBAAYV,UAAS,GAAG;AACnB,aAAA;AAAA,QACL,GAAGU;AAAAA,QACHJ,QAAQE;AAAAA,QACRG,MAAMJ,qBAAqBG,KAAKC,MAAMD,KAAKE,EAAE;AAAA,MAAA;AAAA,IAEjD;AACO,WAAA;AAAA,MAAE,GAAGF;AAAAA,MAAMJ,QAAQE;AAAAA,IAAAA;AAAAA,EAAa,CACxC;AACH;"}