npm - @hitachivantara/uikit-react-core - Versions diffs - 5.0.1 → 5.1.0 - Mend

@hitachivantara/uikit-react-core 5.0.1 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (220) hide show

package/dist/esm/components/VerticalNavigation/NavigationPopup/NavigationPopup.js ADDED Viewed

@@ -0,0 +1,56 @@
+import { Popper, ClickAwayListener } from "@mui/material";
+import clsx from "clsx";
+import { StyledPopupContainer } from "./NavigationPopup.styles.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { HvVerticalNavigation } from "../VerticalNavigation.js";
+import { HvVerticalNavigationTree } from "../Navigation/Navigation.js";
+import verticalNavigationTreeClasses from "../Navigation/navigationClasses.js";
+import { setId } from "../../../utils/setId.js";
+const HvVerticalNavigationPopup = ({
+  id,
+  anchorEl,
+  fixedMode,
+  onClose,
+  data,
+  selected,
+  onChange
+}) => {
+  const handleClickAway = () => {
+    onClose == null ? void 0 : onClose();
+  };
+  const handleChange = (event, selectedItem) => {
+    onChange(event, selectedItem.id, selectedItem);
+  };
+  const handleMouseLeave = () => {
+    if (!fixedMode) {
+      onClose == null ? void 0 : onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(Popper, {
+    open: true,
+    anchorEl,
+    placement: "right-start",
+    children: /* @__PURE__ */ jsx(ClickAwayListener, {
+      onClickAway: handleClickAway,
+      children: /* @__PURE__ */ jsx(StyledPopupContainer, {
+        children: /* @__PURE__ */ jsx(HvVerticalNavigation, {
+          open: true,
+          children: /* @__PURE__ */ jsx(HvVerticalNavigationTree, {
+            className: clsx(verticalNavigationTreeClasses.popup),
+            id: setId(id, "tree"),
+            collapsible: true,
+            defaultExpanded: true,
+            selected,
+            onChange: handleChange,
+            data,
+            onMouseLeave: handleMouseLeave
+          })
+        })
+      })
+    })
+  });
+};
+export {
+  HvVerticalNavigationPopup
+};
+//# sourceMappingURL=NavigationPopup.js.map

package/dist/esm/components/VerticalNavigation/NavigationPopup/NavigationPopup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NavigationPopup.js","sources":["../../../../../src/components/VerticalNavigation/NavigationPopup/NavigationPopup.tsx"],"sourcesContent":["import { Popper, ClickAwayListener } from \"@mui/material\";\nimport clsx from \"clsx\";\n\nimport {\n NavigationData,\n HvVerticalNavigationTree,\n HvVerticalNavigation,\n verticalNavigationTreeClasses,\n} from \"~/components\";\nimport { setId } from \"~/utils\";\n\nimport { StyledPopupContainer } from \"./NavigationPopup.styles\";\n\nexport type HvVerticalNavigationPopupProps = {\n id?: string;\n anchorEl?: HTMLElement | null;\n fixedMode?: boolean;\n data?: NavigationData[];\n selected?: string;\n onClose?: () => void;\n onChange?: any;\n};\n\nexport const HvVerticalNavigationPopup = ({\n id,\n anchorEl,\n fixedMode,\n onClose,\n data,\n selected,\n onChange,\n}: HvVerticalNavigationPopupProps) => {\n const handleClickAway = () => {\n onClose?.();\n };\n\n const handleChange = (event, selectedItem) => {\n onChange(event, selectedItem.id, selectedItem);\n };\n\n const handleMouseLeave = () => {\n if (!fixedMode) {\n onClose?.();\n }\n };\n\n return (\n <Popper open anchorEl={anchorEl} placement=\"right-start\">\n <ClickAwayListener onClickAway={handleClickAway}>\n <StyledPopupContainer>\n <HvVerticalNavigation open>\n <HvVerticalNavigationTree\n className={clsx(verticalNavigationTreeClasses.popup)}\n id={setId(id, \"tree\")}\n collapsible\n defaultExpanded\n selected={selected}\n onChange={handleChange}\n data={data}\n onMouseLeave={handleMouseLeave}\n />\n </HvVerticalNavigation>\n </StyledPopupContainer>\n </ClickAwayListener>\n </Popper>\n );\n};\n"],"names":["HvVerticalNavigationPopup","id","anchorEl","fixedMode","onClose","data","selected","onChange","handleClickAway","handleChange","event","selectedItem","handleMouseLeave","Popper","open","placement","children","ClickAwayListener","onClickAway","StyledPopupContainer","HvVerticalNavigation","HvVerticalNavigationTree","className","clsx","verticalNavigationTreeClasses","popup","setId","collapsible","defaultExpanded","onMouseLeave"],"mappings":";;;;;;;;AAuBO,MAAMA,4BAA4BA,CAAC;AAAA,EACxCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAC8B,MAAM;AACpC,QAAMC,kBAAkBA,MAAM;AACjB;AAAA,EAAA;AAGPC,QAAAA,eAAeA,CAACC,OAAOC,iBAAiB;AACnCD,aAAAA,OAAOC,aAAaV,IAAIU,YAAY;AAAA,EAAA;AAG/C,QAAMC,mBAAmBA,MAAM;AAC7B,QAAI,CAACT,WAAW;AACH;AAAA,IACb;AAAA,EAAA;AAGF,6BACGU,QAAM;AAAA,IAACC,MAAI;AAAA,IAACZ;AAAAA,IAAoBa,WAAU;AAAA,IAAaC,8BACrDC,mBAAiB;AAAA,MAACC,aAAaV;AAAAA,MAAgBQ,8BAC7CG,sBAAoB;AAAA,QAAAH,8BAClBI,sBAAoB;AAAA,UAACN,MAAI;AAAA,UAAAE,8BACvBK,0BAAwB;AAAA,YACvBC,WAAWC,KAAKC,8BAA8BC,KAAK;AAAA,YACnDxB,IAAIyB,MAAMzB,IAAI,MAAM;AAAA,YACpB0B,aAAW;AAAA,YACXC,iBAAe;AAAA,YACftB;AAAAA,YACAC,UAAUE;AAAAA,YACVJ;AAAAA,YACAwB,cAAcjB;AAAAA,UAAAA,CAAiB;AAAA,QAAA,CAC/B;AAAA,MAAA,CACmB;AAAA,IAAA,CACF;AAAA,EAAA,CAElB;AAEb;"}

package/dist/esm/components/VerticalNavigation/NavigationPopup/NavigationPopup.styles.js ADDED Viewed

@@ -0,0 +1,14 @@
+import _styled from "@emotion/styled/base";
+import { theme } from "@hitachivantara/uikit-styles";
+const StyledPopupContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "es2o9lp0"
+} : {
+  target: "es2o9lp0",
+  label: "StyledPopupContainer"
+})({
+  marginLeft: theme.spacing("xs")
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL05hdmlnYXRpb25Qb3B1cC9OYXZpZ2F0aW9uUG9wdXAuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJb0MiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9WZXJ0aWNhbE5hdmlnYXRpb24vTmF2aWdhdGlvblBvcHVwL05hdmlnYXRpb25Qb3B1cC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFBvcHVwQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgbWFyZ2luTGVmdDogdGhlbWUuc3BhY2luZyhcInhzXCIpLFxufSk7XG4iXX0= */");
+export {
+  StyledPopupContainer
+};
+//# sourceMappingURL=NavigationPopup.styles.js.map

package/dist/esm/components/VerticalNavigation/NavigationPopup/NavigationPopup.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NavigationPopup.styles.js","sources":["../../../../../src/components/VerticalNavigation/NavigationPopup/NavigationPopup.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const StyledPopupContainer = styled(\"div\")({\n marginLeft: theme.spacing(\"xs\"),\n});\n"],"names":["StyledPopupContainer","process","env","NODE_ENV","target","label","marginLeft","theme","spacing"],"mappings":";;AAIO,MAAMA,uBAA8B,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAChDC,YAAYC,MAAMC,QAAQ,IAAI;AAChC,GAACP,QAAAC,IAAAC,aAAC,eAAA,KAAA,yzBAAA;"}

package/dist/esm/components/VerticalNavigation/TreeView/IconWrapper/IconWrapper.js ADDED Viewed

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

package/dist/esm/components/VerticalNavigation/TreeView/IconWrapper/IconWrapper.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"IconWrapper.js","sources":["../../../../../../src/components/VerticalNavigation/TreeView/IconWrapper/IconWrapper.tsx"],"sourcesContent":["import { Forwards } from \"@hitachivantara/uikit-react-icons\";\nimport { useContext } from \"react\";\n\nimport { HvAvatar, VerticalNavigationContext } from \"~/components\";\n\nimport { TooltipWrapper } from \"../TooltipWrapper\";\nimport { SpacerDiv, StyledIconsContainer } from \"./IconWrapper.styles\";\n\nexport const IconWrapper = ({\n icon,\n label,\n hasChildren,\n showAvatar,\n isOpen,\n disableTooltip,\n}) => {\n const { hasAnyChildWithData } = useContext(VerticalNavigationContext);\n return (\n <TooltipWrapper\n showTooltip={!hasChildren && !isOpen && !disableTooltip}\n label={label}\n >\n <StyledIconsContainer hasAnyChildWithData={hasAnyChildWithData}>\n {showAvatar ? (\n <HvAvatar\n variant=\"square\"\n size=\"xs\"\n backgroundColor=\"secondary_80\"\n style={{ fontSize: \"15px\" }}\n >\n {label.substring(0, 1)}\n </HvAvatar>\n ) : (\n icon\n )}\n\n {hasChildren && !isOpen ? (\n <Forwards iconSize=\"XS\" />\n ) : (\n hasAnyChildWithData && !isOpen && <SpacerDiv />\n )}\n </StyledIconsContainer>\n </TooltipWrapper>\n );\n};\n"],"names":["IconWrapper","icon","label","hasChildren","showAvatar","isOpen","disableTooltip","hasAnyChildWithData","useContext","VerticalNavigationContext","TooltipWrapper","showTooltip","children","StyledIconsContainer","_jsx","HvAvatar","variant","size","backgroundColor","style","fontSize","substring","Forwards","iconSize","SpacerDiv"],"mappings":";;;;;;;AAQO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAwBC,WAAWC,yBAAyB;AACpE,6BACGC,gBAAc;AAAA,IACbC,aAAa,CAACR,eAAe,CAACE,UAAU,CAACC;AAAAA,IACzCJ;AAAAA,IAAaU,+BAEZC,sBAAoB;AAAA,MAACN;AAAAA,MAAyCK,UAC5DR,CAAAA,aACCU,oBAACC,UAAQ;AAAA,QACPC,SAAQ;AAAA,QACRC,MAAK;AAAA,QACLC,iBAAgB;AAAA,QAChBC,OAAO;AAAA,UAAEC,UAAU;AAAA,QAAO;AAAA,QAAER,UAE3BV,MAAMmB,UAAU,GAAG,CAAC;AAAA,MAAA,CACZ,IAEXpB,MAGDE,eAAe,CAACE,6BACdiB,UAAQ;AAAA,QAACC,UAAS;AAAA,MAAA,CAAO,IAE1BhB,uBAAuB,CAACF,UAAWmB,oBAAAA,WACpC,CAAA,CAAA,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAEY;AAErB;"}

package/dist/esm/components/VerticalNavigation/TreeView/IconWrapper/IconWrapper.styles.js ADDED Viewed

@@ -0,0 +1,40 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+const StyledIconsContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "emephz1"
+} : {
+  target: "emephz1",
+  label: "StyledIconsContainer"
+})(({
+  hasAnyChildWithData
+}) => ({
+  display: "flex",
+  [`> div:first-of-type`]: {
+    marginLeft: hasAnyChildWithData ? "auto" : "unset"
+  },
+  [`> div:nth-of-type(2)`]: {
+    width: "14px",
+    marginLeft: "auto"
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1RyZWVWaWV3L0ljb25XcmFwcGVyL0ljb25XcmFwcGVyLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTW9DIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1RyZWVWaWV3L0ljb25XcmFwcGVyL0ljb25XcmFwcGVyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW50ZXJmYWNlIFN0eWxlZEljb25zQ29udGFpbmVyUHJvcHMge1xuICBoYXNBbnlDaGlsZFdpdGhEYXRhPzogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGNvbnN0IFN0eWxlZEljb25zQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKFxuICAoeyBoYXNBbnlDaGlsZFdpdGhEYXRhIH06IFN0eWxlZEljb25zQ29udGFpbmVyUHJvcHMpID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG5cbiAgICBbYD4gZGl2OmZpcnN0LW9mLXR5cGVgXToge1xuICAgICAgbWFyZ2luTGVmdDogaGFzQW55Q2hpbGRXaXRoRGF0YSA/IFwiYXV0b1wiIDogXCJ1bnNldFwiLFxuICAgIH0sXG5cbiAgICBbYD4gZGl2Om50aC1vZi10eXBlKDIpYF06IHtcbiAgICAgIHdpZHRoOiBcIjE0cHhcIixcbiAgICAgIG1hcmdpbkxlZnQ6IFwiYXV0b1wiLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3BhY2VyRGl2ID0gc3R5bGVkKFwiZGl2XCIpKHt9KTtcbiJdfQ== */");
+const SpacerDiv = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "emephz0"
+} : {
+  target: "emephz0",
+  label: "SpacerDiv"
+})(process.env.NODE_ENV === "production" ? {
+  name: "0",
+  styles: ""
+} : {
+  name: "0",
+  styles: "",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1RyZWVWaWV3L0ljb25XcmFwcGVyL0ljb25XcmFwcGVyLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJ5QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9UcmVlVmlldy9JY29uV3JhcHBlci9JY29uV3JhcHBlci5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmludGVyZmFjZSBTdHlsZWRJY29uc0NvbnRhaW5lclByb3BzIHtcbiAgaGFzQW55Q2hpbGRXaXRoRGF0YT86IGJvb2xlYW47XG59XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJY29uc0NvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKShcbiAgKHsgaGFzQW55Q2hpbGRXaXRoRGF0YSB9OiBTdHlsZWRJY29uc0NvbnRhaW5lclByb3BzKSA9PiAoe1xuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuXG4gICAgW2A+IGRpdjpmaXJzdC1vZi10eXBlYF06IHtcbiAgICAgIG1hcmdpbkxlZnQ6IGhhc0FueUNoaWxkV2l0aERhdGEgPyBcImF1dG9cIiA6IFwidW5zZXRcIixcbiAgICB9LFxuXG4gICAgW2A+IGRpdjpudGgtb2YtdHlwZSgyKWBdOiB7XG4gICAgICB3aWR0aDogXCIxNHB4XCIsXG4gICAgICBtYXJnaW5MZWZ0OiBcImF1dG9cIixcbiAgICB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFNwYWNlckRpdiA9IHN0eWxlZChcImRpdlwiKSh7fSk7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export {
+  SpacerDiv,
+  StyledIconsContainer
+};
+//# sourceMappingURL=IconWrapper.styles.js.map

package/dist/esm/components/VerticalNavigation/TreeView/IconWrapper/IconWrapper.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"IconWrapper.styles.js","sources":["../../../../../../src/components/VerticalNavigation/TreeView/IconWrapper/IconWrapper.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\ninterface StyledIconsContainerProps {\n hasAnyChildWithData?: boolean;\n}\n\nexport const StyledIconsContainer = styled(\"div\")(\n ({ hasAnyChildWithData }: StyledIconsContainerProps) => ({\n display: \"flex\",\n\n [`> div:first-of-type`]: {\n marginLeft: hasAnyChildWithData ? \"auto\" : \"unset\",\n },\n\n [`> div:nth-of-type(2)`]: {\n width: \"14px\",\n marginLeft: \"auto\",\n },\n })\n);\n\nexport const SpacerDiv = styled(\"div\")({});\n"],"names":["StyledIconsContainer","process","env","NODE_ENV","target","label","hasAnyChildWithData","display","marginLeft","width","SpacerDiv","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"mappings":";;;;AAMO,MAAMA,uBAA8B,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAC9C,CAAC;AAAA,EAAEC;AAA+C,OAAO;AAAA,EACvDC,SAAS;AAAA,EAET,CAAE,qBAAoB,GAAG;AAAA,IACvBC,YAAYF,sBAAsB,SAAS;AAAA,EAC7C;AAAA,EAEA,CAAE,sBAAqB,GAAG;AAAA,IACxBG,OAAO;AAAA,IACPD,YAAY;AAAA,EACd;AACF,IAAEP,QAAAC,IAAAC,aACH,eAAA,KAAA,yuCAAA;AAEM,MAAMO,YAAmB,wBAAA,OAAKT,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAQ,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAAI;"}

package/dist/esm/components/VerticalNavigation/TreeView/TooltipWrapper/TooltipWrapper.js ADDED Viewed

@@ -0,0 +1,24 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { HvTooltip } from "../../../Tooltip/Tooltip.js";
+import { HvTypography } from "../../../Typography/Typography.js";
+const TooltipWrapper = ({
+  showTooltip,
+  label,
+  children,
+  placement = "right"
+}) => {
+  if (showTooltip) {
+    return /* @__PURE__ */ jsx(HvTooltip, {
+      title: /* @__PURE__ */ jsx(HvTypography, {
+        children: label
+      }),
+      placement,
+      children
+    });
+  }
+  return children;
+};
+export {
+  TooltipWrapper
+};
+//# sourceMappingURL=TooltipWrapper.js.map

package/dist/esm/components/VerticalNavigation/TreeView/TooltipWrapper/TooltipWrapper.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TooltipWrapper.js","sources":["../../../../../../src/components/VerticalNavigation/TreeView/TooltipWrapper/TooltipWrapper.tsx"],"sourcesContent":["import { HvTooltip, HvTooltipPlacementType, HvTypography } from \"~/components\";\n\ninterface TooltipWrapperProps {\n showTooltip: boolean;\n label: string;\n children: React.ReactElement;\n placement?: HvTooltipPlacementType;\n}\n\nexport const TooltipWrapper = ({\n showTooltip,\n label,\n children,\n placement = \"right\",\n}: TooltipWrapperProps) => {\n if (showTooltip) {\n return (\n <HvTooltip\n title={<HvTypography>{label}</HvTypography>}\n placement={placement}\n >\n {children}\n </HvTooltip>\n );\n }\n return children;\n};\n"],"names":["TooltipWrapper","showTooltip","label","children","placement","HvTooltip","title","HvTypography"],"mappings":";;;AASO,MAAMA,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,YAAY;AACO,MAAM;AACzB,MAAIH,aAAa;AACf,+BACGI,WAAS;AAAA,MACRC,2BAAQC,cAAY;AAAA,QAAAJ,UAAED;AAAAA,MAAAA,CAAsB;AAAA,MAC5CE;AAAAA,MAAqBD;AAAAA,IAAAA,CAGX;AAAA,EAEhB;AACOA,SAAAA;AACT;"}

package/dist/esm/components/VerticalNavigation/TreeView/TreeViewItem.js CHANGED Viewed

@@ -5,11 +5,11 @@ import treeViewItemClasses from "./treeViewItemClasses.js";
 import { StyledContent, StyledGroup, StyledNode } from "./TreeViewItem.styles.js";
 import { useDescendant, DescendantProvider } from "./descendants.js";
 import { TreeViewControlContext, TreeViewStateContext } from "./TreeViewContext.js";
-import { VerticalNavigationContext } from "../VerticalNavigationContext.js";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import useForkRef from "../../../hooks/useForkRef.js";
+import { IconWrapper } from "./IconWrapper/IconWrapper.js";
+import { VerticalNavigationContext } from "../VerticalNavigationContext.js";
 import { setId } from "../../../utils/setId.js";
-import { HvAvatar } from "../../Avatar/Avatar.js";
 const preventSelection = (event, disabled) => {
   if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
     event.preventDefault();
@@ -33,6 +33,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef((props, ref) => {
     onMouseDown,
     onFocus,
     children,
+    disableTooltip,
     ...others
   } = props;
   const treeViewControlContext = useContext(TreeViewControlContext);
@@ -86,7 +87,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef((props, ref) => {
   const focused = isFocused ? isFocused(nodeId) : false;
   const selected = isSelected ? isSelected(nodeId) : false;
   const disabled = isDisabled ? isDisabled(nodeId) : false;
-  const selectable = selectableProp != null ? selectableProp : !collapsible || !expandable;
+  const selectable = selectableProp != null ? selectableProp : !collapsible || !expandable || !isOpen;
   useEffect(() => {
     if (registerNode && unregisterNode && index !== -1) {
       registerNode({
@@ -139,7 +140,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef((props, ref) => {
         focus(event, nodeId);
       }
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
-      if (expandable && !(multiple && isExpanded && isExpanded(nodeId))) {
+      if (expandable && isOpen && !(multiple && isExpanded && isExpanded(nodeId))) {
         if (toggleExpansion)
           toggleExpansion(event, nodeId);
       }
@@ -177,7 +178,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef((props, ref) => {
   }, [disabled, onMouseDown]);
   const handleClick = useCallback((event) => {
     if (!disabled) {
-      if (expandable) {
+      if (expandable && isOpen) {
         handleExpansion(event);
       }
       if (selectable) {
@@ -198,7 +199,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef((props, ref) => {
     }
     if (contentRef.current === event.currentTarget) {
       if (key === "Enter" || key === " ") {
-        if (expandable) {
+        if (expandable && isOpen) {
           isEventHandled = handleExpansion(event);
         }
         if (selectable) {
@@ -211,44 +212,41 @@ const HvVerticalNavigationTreeViewItem = forwardRef((props, ref) => {
       }
     }
   }, [expandable, handleExpansion, handleSelection, selectable]);
-  const renderedContent = useMemo(() => {
-    var _a2, _b;
-    return /* @__PURE__ */ jsxs(StyledContent, {
-      id: setId(id, "button"),
-      component: href ? "a" : "div",
-      href,
-      target,
-      ref: contentRef,
-      className: clsx(treeViewItemClasses.content, classes == null ? void 0 : classes.content, href != null && clsx(treeViewItemClasses.link, classes == null ? void 0 : classes.link), !isOpen && clsx(treeViewItemClasses.minimized, classes == null ? void 0 : classes.minimized)),
-      variant: disabled ? "placeholderText" : "body",
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      style: {
-        paddingLeft: (expandable || icon != null ? 0 : 10) + level * (collapsible ? 32 : 10)
-      },
-      ...treeviewMode ? {
-        role: "button",
-        tabIndex: -1,
-        onFocus: handleFocus
-      } : {
-        role: "button",
-        tabIndex: selectable || expandable ? 0 : -1,
-        onKeyDown: handleKeyDown,
-        "aria-current": selectable && selected ? "page" : void 0,
-        "aria-expanded": expandable ? expanded : void 0,
-        "aria-controls": expandable ? setId(id, "group") : void 0
-      },
-      children: [isOpen && expandable && (expanded ? /* @__PURE__ */ jsx(DropUpXS, {}) : /* @__PURE__ */ jsx(DropDownXS, {})), !icon && level === 0 && !isOpen && collapsedMode === "icon" && ((_a2 = contentRef.current) == null ? void 0 : _a2.textContent) ? /* @__PURE__ */ jsx(HvAvatar, {
-        variant: "square",
-        size: "xs",
-        backgroundColor: "secondary_80",
-        style: {
-          fontSize: "15px"
-        },
-        children: (_b = contentRef.current) == null ? void 0 : _b.textContent.substring(0, 1)
-      }) : icon, isOpen && label]
-    });
-  }, [id, href, target, classes == null ? void 0 : classes.content, treeViewItemClasses.content, classes == null ? void 0 : classes.link, treeViewItemClasses.link, classes == null ? void 0 : classes.minimized, treeViewItemClasses.minimized, disabled, handleClick, handleMouseDown, expandable, icon, level, collapsible, treeviewMode, handleFocus, selectable, handleKeyDown, selected, expanded, label]);
+  const renderedContent = useMemo(() => /* @__PURE__ */ jsxs(StyledContent, {
+    id: setId(id, "button"),
+    component: href ? "a" : "div",
+    href,
+    target,
+    ref: contentRef,
+    className: clsx(treeViewItemClasses.content, classes == null ? void 0 : classes.content, href != null && clsx(treeViewItemClasses.link, classes == null ? void 0 : classes.link), !isOpen && clsx(treeViewItemClasses.minimized, classes == null ? void 0 : classes.minimized)),
+    variant: disabled ? "placeholderText" : "body",
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    style: {
+      paddingLeft: (expandable || icon != null ? 0 : 10) + level * (collapsible ? 32 : 10)
+    },
+    ...treeviewMode ? {
+      role: "button",
+      tabIndex: -1,
+      onFocus: handleFocus
+    } : {
+      role: "button",
+      tabIndex: selectable || expandable ? 0 : -1,
+      onKeyDown: handleKeyDown,
+      "aria-current": selectable && selected ? "page" : void 0,
+      "aria-expanded": expandable ? expanded : void 0,
+      "aria-controls": expandable ? setId(id, "group") : void 0,
+      "aria-label": payload == null ? void 0 : payload.label
+    },
+    children: [isOpen && expandable && (expanded ? /* @__PURE__ */ jsx(DropUpXS, {}) : /* @__PURE__ */ jsx(DropDownXS, {})), /* @__PURE__ */ jsx(IconWrapper, {
+      icon,
+      label: payload == null ? void 0 : payload.label,
+      hasChildren: Boolean(children),
+      showAvatar: !icon && level === 0 && !isOpen && collapsedMode === "icon",
+      isOpen,
+      disableTooltip
+    }), isOpen && label]
+  }), [id, href, target, classes == null ? void 0 : classes.content, treeViewItemClasses.content, classes == null ? void 0 : classes.link, treeViewItemClasses.link, classes == null ? void 0 : classes.minimized, treeViewItemClasses.minimized, disabled, handleClick, handleMouseDown, expandable, icon, level, collapsible, treeviewMode, handleFocus, selectable, handleKeyDown, selected, expanded, label, disableTooltip]);
   const renderedChildren = useMemo(() => children && /* @__PURE__ */ jsx(StyledGroup, {
     id: setId(id, "group"),
     className: clsx(treeViewItemClasses.group, classes == null ? void 0 : classes.group),
@@ -257,7 +255,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef((props, ref) => {
   }), [children, treeViewItemClasses.group, classes == null ? void 0 : classes.group, id, treeviewMode]);
   return /* @__PURE__ */ jsxs(StyledNode, {
     ref: handleRef,
-    id,
+    id: id ?? void 0,
     className: clsx((_a = treeViewItemClasses) == null ? void 0 : _a.node, classes == null ? void 0 : classes.node, className, disabled && clsx(treeViewItemClasses.disabled, classes == null ? void 0 : classes.disabled), expandable && clsx(treeViewItemClasses.expandable, classes == null ? void 0 : classes.expandable), expandable && !expanded && clsx(treeViewItemClasses.collapsed, classes == null ? void 0 : classes.collapsed), expandable && expanded && clsx(treeViewItemClasses.expanded, classes == null ? void 0 : classes.expanded), selectable && !disabled && clsx(treeViewItemClasses.selectable, classes == null ? void 0 : classes.selectable), !disabled && !selectable && clsx(treeViewItemClasses.unselectable, classes == null ? void 0 : classes.unselectable), !disabled && selectable && selected && clsx(treeViewItemClasses.selected, classes == null ? void 0 : classes.selected), !disabled && selectable && !selected && clsx(treeViewItemClasses.unselected, classes == null ? void 0 : classes.unselected), focused && clsx(treeViewItemClasses.focused, classes == null ? void 0 : classes.focused), !isOpen && collapsedMode == "simple" && clsx(treeViewItemClasses.hide, classes == null ? void 0 : classes.hide), !isOpen && collapsedMode == "icon" && isChildSelected && isChildSelected(nodeId) && clsx(treeViewItemClasses.selected, classes == null ? void 0 : classes.selected)),
     "data-hasicon": icon != null ? true : void 0,
     ...mode === "treeview" && {

package/dist/esm/components/VerticalNavigation/TreeView/TreeViewItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeViewItem.js","sources":["../../../../../src/components/VerticalNavigation/TreeView/TreeViewItem.tsx"],"sourcesContent":["import {\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport { useForkRef } from \"~/hooks\";\nimport { setId } from \"~/utils\";\nimport treeViewItemClasses, {\n HvVerticalNavigationTreeViewItemClasses,\n} from \"./treeViewItemClasses\";\nimport { StyledContent, StyledGroup, StyledNode } from \"./TreeViewItem.styles\";\nimport { DescendantProvider, useDescendant } from \"./descendants\";\nimport {\n TreeViewControlContext,\n TreeViewStateContext,\n} from \"./TreeViewContext\";\nimport { HvAvatar } from \"~/components\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\n\nexport type HvVerticalNavigationTreeViewItemProps = {\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 to the Radio button.\n /\n classes?: HvVerticalNavigationTreeViewItemClasses;\n /\n Is the node disabled.\n /\n disabled?: boolean;\n /\n Can the node be selected.\n /\n selectable?: boolean;\n /\n The id of the node.\n /\n nodeId?: string;\n /\n The icon to display next to the node's label.\n /\n icon?: React.ReactNode;\n /\n The item label.\n /\n label?: React.ReactNode;\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 The node payload.\n /\n payload?: any;\n /\n @ignore\n /\n onClick?: any;\n /\n @ignore\n /\n onMouseDown?: any;\n /\n @ignore\n /\n onFocus?: any;\n /\n The content of the component.\n /\n children?: React.ReactNode;\n};\n\nconst preventSelection = (event, disabled) => {\n if (event.shiftKey \|\| event.ctrlKey \|\| event.metaKey \|\| disabled) {\n // Prevent text selection\n event.preventDefault();\n }\n};\n\nexport const HvVerticalNavigationTreeViewItem = forwardRef(\n (props: HvVerticalNavigationTreeViewItemProps, ref) => {\n const {\n id: idProp,\n className,\n classes,\n\n disabled: disabledProp = false,\n\n selectable: selectableProp,\n\n nodeId,\n icon = null,\n label,\n href,\n target,\n payload,\n\n onClick,\n onMouseDown,\n onFocus,\n\n children,\n\n ...others\n } = props;\n\n const treeViewControlContext = useContext(TreeViewControlContext);\n const { isExpanded, isSelected, isFocused, isDisabled, isChildSelected } =\n useContext(TreeViewStateContext);\n\n const {\n treeId,\n mode,\n collapsible,\n toggleExpansion,\n multiSelect,\n selectNode,\n selectRange,\n disabledItemsFocusable,\n registerNode,\n unregisterNode,\n mapFirstChar,\n unMapFirstChar,\n focus,\n } = treeViewControlContext;\n\n const treeviewMode = mode === \"treeview\";\n\n let id: string \| null = null;\n\n if (idProp != null) {\n id = idProp;\n } else if (treeId && nodeId) {\n id = `${treeId}-${nodeId}`;\n }\n\n const [treeitemElement, setTreeitemElement] = useState(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(setTreeitemElement, ref);\n\n const descendant = useMemo(\n () => ({\n element: treeitemElement,\n id: nodeId,\n }),\n [nodeId, treeitemElement]\n );\n\n const { isOpen, collapsedMode } = useContext(VerticalNavigationContext);\n\n const { index, parentId, level } = useDescendant(descendant);\n\n const expandable = collapsible && Array.isArray(children);\n const expanded = isExpanded ? isExpanded(nodeId) : false;\n const focused = isFocused ? isFocused(nodeId) : false;\n const selected = isSelected ? isSelected(nodeId) : false;\n const disabled = isDisabled ? isDisabled(nodeId) : false;\n\n const selectable =\n selectableProp != null ? selectableProp : !collapsible \|\| !expandable;\n\n useEffect(() => {\n // On the first render a node's index will be -1. We want to wait for the real index.\n if (registerNode && unregisterNode && index !== -1) {\n registerNode({\n id: nodeId,\n idAttribute: id,\n index,\n parentId,\n selectable,\n expandable,\n disabled: disabledProp,\n onFocus,\n payload,\n });\n\n return () => {\n unregisterNode(nodeId);\n };\n }\n\n return undefined;\n }, [\n registerNode,\n unregisterNode,\n parentId,\n index,\n nodeId,\n expandable,\n disabledProp,\n id,\n selectable,\n onFocus,\n payload,\n ]);\n\n useEffect(() => {\n if (\n mapFirstChar &&\n unMapFirstChar &&\n label &&\n contentRef.current?.textContent\n ) {\n mapFirstChar(\n nodeId,\n contentRef.current?.textContent.substring(0, 1).toLowerCase()\n );\n\n return () => {\n unMapFirstChar(nodeId);\n };\n }\n return undefined;\n }, [mapFirstChar, unMapFirstChar, nodeId, label]);\n\n let ariaSelected;\n if (multiSelect) {\n ariaSelected = selected;\n } else if (selected) {\n / single-selection trees unset aria-selected on un-selected items.\n \n If the tree does not support multiple selection, aria-selected\n * is set to true for the selected node and it is not present on any other node in the tree.\n * Source: https://www.w3.org/TR/wai-aria-practices/#TreeView\n /\n ariaSelected = true;\n }\n\n const handleFocus = useCallback(\n (event) => {\n // DOM focus stays on the tree which manages focus with aria-activedescendant\n if (event.target === event.currentTarget) {\n (event.target.ownerDocument \|\| document)\n .getElementById(treeId)\n .focus({ preventScroll: true });\n }\n\n const unfocusable = !disabledItemsFocusable && disabled;\n if (\n !focused &&\n event.currentTarget === event.target &&\n !unfocusable &&\n focus\n ) {\n focus(event, nodeId);\n }\n },\n [disabled, disabledItemsFocusable, focus, focused, nodeId, treeId]\n );\n\n const handleExpansion = useCallback(\n (event) => {\n if (!disabled) {\n if (treeviewMode && !focused && focus) {\n focus(event, nodeId);\n }\n\n const multiple =\n multiSelect && (event.shiftKey \|\| event.ctrlKey \|\| event.metaKey);\n\n // If already expanded and trying to toggle selection don't close\n if (expandable && !(multiple && isExpanded && isExpanded(nodeId))) {\n if (toggleExpansion) toggleExpansion(event, nodeId);\n }\n }\n },\n [\n disabled,\n expandable,\n focus,\n focused,\n isExpanded,\n multiSelect,\n nodeId,\n toggleExpansion,\n treeviewMode,\n ]\n );\n\n const handleSelection = useCallback(\n (event) => {\n if (selectable && !disabled) {\n if (treeviewMode && !focused && focus) {\n focus(event, nodeId);\n }\n\n const multiple =\n multiSelect && (event.shiftKey \|\| event.ctrlKey \|\| event.metaKey);\n\n if (multiple) {\n if (event.shiftKey) {\n if (selectRange) return selectRange(event, { end: nodeId });\n } else {\n if (selectNode) return selectNode(event, nodeId, true);\n }\n } else {\n if (selectNode) return selectNode(event, nodeId);\n }\n } else {\n return false;\n }\n },\n [\n disabled,\n focus,\n focused,\n multiSelect,\n nodeId,\n selectNode,\n selectRange,\n selectable,\n treeviewMode,\n ]\n );\n\n const handleMouseDown = useCallback(\n (event) => {\n preventSelection(event, disabled);\n\n if (onMouseDown) {\n onMouseDown(event);\n }\n },\n [disabled, onMouseDown]\n );\n\n const handleClick = useCallback(\n (event) => {\n if (!disabled) {\n if (expandable) {\n handleExpansion(event);\n }\n\n if (selectable) {\n handleSelection(event);\n }\n }\n\n if (onClick) {\n onClick(event);\n }\n },\n [\n disabled,\n expandable,\n handleExpansion,\n handleSelection,\n onClick,\n selectable,\n ]\n );\n\n const handleKeyDown = useCallback(\n (event) => {\n let isEventHandled = false;\n const { key } = event;\n\n if (\n event.altKey \|\|\n event.ctrlKey \|\|\n event.metaKey \|\|\n event.currentTarget !== event.target\n ) {\n return;\n }\n if (contentRef.current === event.currentTarget) {\n if (key === \"Enter\" \|\| key === \" \") {\n if (expandable) {\n isEventHandled = handleExpansion(event) as unknown as boolean;\n }\n\n if (selectable) {\n isEventHandled = handleSelection(event) as boolean;\n }\n }\n\n if (isEventHandled) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n },\n [expandable, handleExpansion, handleSelection, selectable]\n );\n\n const renderedContent = useMemo(\n () => (\n <StyledContent\n id={setId(id, \"button\")}\n component={href ? \"a\" : \"div\"}\n href={href}\n target={target}\n ref={contentRef}\n className={clsx(\n treeViewItemClasses.content,\n classes?.content,\n href != null && clsx(treeViewItemClasses.link, classes?.link),\n !isOpen && clsx(treeViewItemClasses.minimized, classes?.minimized)\n )}\n variant={disabled ? \"placeholderText\" : \"body\"}\n onClick={handleClick}\n onMouseDown={handleMouseDown}\n style={{\n paddingLeft:\n (expandable \|\| icon != null ? 0 : 10) +\n level (collapsible ? 32 : 10),\n }}\n {...(treeviewMode\n ? {\n role: \"button\",\n tabIndex: -1,\n onFocus: handleFocus,\n }\n : {\n role: \"button\",\n tabIndex: selectable \|\| expandable ? 0 : -1,\n onKeyDown: handleKeyDown,\n \"aria-current\": selectable && selected ? \"page\" : undefined,\n \"aria-expanded\": expandable ? expanded : undefined,\n \"aria-controls\": expandable ? setId(id, \"group\") : undefined,\n })}\n >\n {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}\n {!icon &&\n level === 0 &&\n !isOpen &&\n collapsedMode === \"icon\" &&\n contentRef.current?.textContent ? (\n <HvAvatar\n variant=\"square\"\n size=\"xs\"\n backgroundColor=\"secondary_80\"\n style={{ fontSize: \"15px\" }}\n >\n {contentRef.current?.textContent.substring(0, 1)}\n </HvAvatar>\n ) : (\n icon\n )}\n {isOpen && label}\n </StyledContent>\n ),\n [\n id,\n href,\n target,\n classes?.content,\n treeViewItemClasses.content,\n classes?.link,\n treeViewItemClasses.link,\n classes?.minimized,\n treeViewItemClasses.minimized,\n disabled,\n handleClick,\n handleMouseDown,\n expandable,\n icon,\n level,\n collapsible,\n treeviewMode,\n handleFocus,\n selectable,\n handleKeyDown,\n selected,\n expanded,\n label,\n ]\n );\n\n const renderedChildren = useMemo(\n () =>\n children && (\n <StyledGroup\n id={setId(id, \"group\")}\n className={clsx(treeViewItemClasses.group, classes?.group)}\n role={treeviewMode ? \"group\" : undefined}\n >\n {children}\n </StyledGroup>\n ),\n [children, treeViewItemClasses.group, classes?.group, id, treeviewMode]\n );\n\n return (\n <StyledNode\n ref={handleRef}\n id={id as string}\n className={clsx(\n treeViewItemClasses?.node,\n classes?.node,\n className,\n disabled && clsx(treeViewItemClasses.disabled, classes?.disabled),\n expandable &&\n clsx(treeViewItemClasses.expandable, classes?.expandable),\n expandable &&\n !expanded &&\n clsx(treeViewItemClasses.collapsed, classes?.collapsed),\n expandable &&\n expanded &&\n clsx(treeViewItemClasses.expanded, classes?.expanded),\n selectable &&\n !disabled &&\n clsx(treeViewItemClasses.selectable, classes?.selectable),\n !disabled &&\n !selectable &&\n clsx(treeViewItemClasses.unselectable, classes?.unselectable),\n !disabled &&\n selectable &&\n selected &&\n clsx(treeViewItemClasses.selected, classes?.selected),\n !disabled &&\n selectable &&\n !selected &&\n clsx(treeViewItemClasses.unselected, classes?.unselected),\n focused && clsx(treeViewItemClasses.focused, classes?.focused),\n !isOpen &&\n collapsedMode == \"simple\" &&\n clsx(treeViewItemClasses.hide, classes?.hide),\n !isOpen &&\n collapsedMode == \"icon\" &&\n isChildSelected &&\n isChildSelected(nodeId) &&\n clsx(treeViewItemClasses.selected, classes?.selected)\n )}\n data-hasicon={icon != null ? true : undefined}\n {...(mode === \"treeview\" && {\n role: \"treeitem\",\n \"aria-selected\": ariaSelected,\n \"aria-expanded\": expandable ? expanded : undefined,\n \"aria-disabled\": disabled ? true : undefined,\n })}\n {...others}\n >\n {renderedContent}\n {isOpen && (\n <DescendantProvider id={nodeId} level={level + 1}>\n {renderedChildren}\n </DescendantProvider>\n )}\n </StyledNode>\n );\n }\n);\n"],"names":["preventSelection","event","disabled","shiftKey","ctrlKey","metaKey","preventDefault","HvVerticalNavigationTreeViewItem","forwardRef","props","ref","id","idProp","className","classes","disabledProp","selectable","selectableProp","nodeId","icon","label","href","target","payload","onClick","onMouseDown","onFocus","children","others","treeViewControlContext","useContext","TreeViewControlContext","isExpanded","isSelected","isFocused","isDisabled","isChildSelected","TreeViewStateContext","treeId","mode","collapsible","toggleExpansion","multiSelect","selectNode","selectRange","disabledItemsFocusable","registerNode","unregisterNode","mapFirstChar","unMapFirstChar","focus","treeviewMode","treeitemElement","setTreeitemElement","useState","contentRef","useRef","handleRef","useForkRef","descendant","useMemo","element","isOpen","collapsedMode","VerticalNavigationContext","index","parentId","level","useDescendant","expandable","Array","isArray","expanded","focused","selected","useEffect","idAttribute","undefined","current","textContent","substring","toLowerCase","ariaSelected","handleFocus","useCallback","currentTarget","ownerDocument","document","getElementById","preventScroll","unfocusable","handleExpansion","multiple","handleSelection","end","handleMouseDown","handleClick","handleKeyDown","isEventHandled","key","altKey","stopPropagation","renderedContent","_jsxs","StyledContent","setId","component","clsx","treeViewItemClasses","content","link","minimized","variant","style","paddingLeft","role","tabIndex","onKeyDown","DropUpXS","_jsx","DropDownXS","HvAvatar","size","backgroundColor","fontSize","renderedChildren","StyledGroup","group","StyledNode","node","collapsed","unselectable","unselected","hide","DescendantProvider"],"mappings":"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"}
1	+ {"version":3,"file":"TreeViewItem.js","sources":["../../../../../src/components/VerticalNavigation/TreeView/TreeViewItem.tsx"],"sourcesContent":["import {\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport { useForkRef } from \"~/hooks\";\nimport { setId } from \"~/utils\";\nimport treeViewItemClasses, {\n HvVerticalNavigationTreeViewItemClasses,\n} from \"./treeViewItemClasses\";\nimport { StyledContent, StyledGroup, StyledNode } from \"./TreeViewItem.styles\";\nimport { DescendantProvider, useDescendant } from \"./descendants\";\nimport {\n TreeViewControlContext,\n TreeViewStateContext,\n} from \"./TreeViewContext\";\nimport { VerticalNavigationContext } from \"../\";\nimport { IconWrapper } from \"./IconWrapper\";\n\nexport type HvVerticalNavigationTreeViewItemProps = {\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 to the Radio button.\n /\n classes?: HvVerticalNavigationTreeViewItemClasses;\n /\n Is the node disabled.\n /\n disabled?: boolean;\n /\n Can the node be selected.\n /\n selectable?: boolean;\n /\n The id of the node.\n /\n nodeId?: string;\n /\n The icon to display next to the node's label.\n /\n icon?: React.ReactNode;\n /\n The item label.\n /\n label?: React.ReactNode;\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 The node payload.\n /\n payload?: any;\n /\n @ignore\n /\n onClick?: any;\n /\n @ignore\n /\n onMouseDown?: any;\n /\n @ignore\n /\n onFocus?: any;\n /\n The content of the component.\n /\n children?: React.ReactNode;\n /\n @ignore\n /\n onMouseEnter?: any;\n /\n Disables the appearence of a tooltip on hovering an element ( Only applicable when the in collapsed mode)\n /\n disableTooltip?: boolean;\n};\n\nconst preventSelection = (event, disabled) => {\n if (event.shiftKey \|\| event.ctrlKey \|\| event.metaKey \|\| disabled) {\n // Prevent text selection\n event.preventDefault();\n }\n};\n\nexport const HvVerticalNavigationTreeViewItem = forwardRef(\n (props: HvVerticalNavigationTreeViewItemProps, ref) => {\n const {\n id: idProp,\n className,\n classes,\n\n disabled: disabledProp = false,\n\n selectable: selectableProp,\n\n nodeId,\n icon = null,\n label,\n href,\n target,\n payload,\n\n onClick,\n onMouseDown,\n onFocus,\n\n children,\n\n disableTooltip,\n\n ...others\n } = props;\n\n const treeViewControlContext = useContext(TreeViewControlContext);\n const { isExpanded, isSelected, isFocused, isDisabled, isChildSelected } =\n useContext(TreeViewStateContext);\n\n const {\n treeId,\n mode,\n collapsible,\n toggleExpansion,\n multiSelect,\n selectNode,\n selectRange,\n disabledItemsFocusable,\n registerNode,\n unregisterNode,\n mapFirstChar,\n unMapFirstChar,\n focus,\n } = treeViewControlContext;\n\n const treeviewMode = mode === \"treeview\";\n\n let id: string \| null = null;\n\n if (idProp != null) {\n id = idProp;\n } else if (treeId && nodeId) {\n id = `${treeId}-${nodeId}`;\n }\n\n const [treeitemElement, setTreeitemElement] = useState(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(setTreeitemElement, ref);\n\n const descendant = useMemo(\n () => ({\n element: treeitemElement,\n id: nodeId,\n }),\n [nodeId, treeitemElement]\n );\n\n const { isOpen, collapsedMode } = useContext(VerticalNavigationContext);\n\n const { index, parentId, level } = useDescendant(descendant);\n\n const expandable = collapsible && Array.isArray(children);\n const expanded = isExpanded ? isExpanded(nodeId) : false;\n const focused = isFocused ? isFocused(nodeId) : false;\n const selected = isSelected ? isSelected(nodeId) : false;\n const disabled = isDisabled ? isDisabled(nodeId) : false;\n\n const selectable =\n selectableProp != null\n ? selectableProp\n : !collapsible \|\| !expandable \|\| !isOpen;\n\n useEffect(() => {\n // On the first render a node's index will be -1. We want to wait for the real index.\n if (registerNode && unregisterNode && index !== -1) {\n registerNode({\n id: nodeId,\n idAttribute: id,\n index,\n parentId,\n selectable,\n expandable,\n disabled: disabledProp,\n onFocus,\n payload,\n });\n\n return () => {\n unregisterNode(nodeId);\n };\n }\n\n return undefined;\n }, [\n registerNode,\n unregisterNode,\n parentId,\n index,\n nodeId,\n expandable,\n disabledProp,\n id,\n selectable,\n onFocus,\n payload,\n ]);\n\n useEffect(() => {\n if (\n mapFirstChar &&\n unMapFirstChar &&\n label &&\n contentRef.current?.textContent\n ) {\n mapFirstChar(\n nodeId,\n contentRef.current?.textContent.substring(0, 1).toLowerCase()\n );\n\n return () => {\n unMapFirstChar(nodeId);\n };\n }\n return undefined;\n }, [mapFirstChar, unMapFirstChar, nodeId, label]);\n\n let ariaSelected;\n if (multiSelect) {\n ariaSelected = selected;\n } else if (selected) {\n / single-selection trees unset aria-selected on un-selected items.\n \n If the tree does not support multiple selection, aria-selected\n * is set to true for the selected node and it is not present on any other node in the tree.\n * Source: https://www.w3.org/TR/wai-aria-practices/#TreeView\n /\n ariaSelected = true;\n }\n\n const handleFocus = useCallback(\n (event) => {\n // DOM focus stays on the tree which manages focus with aria-activedescendant\n if (event.target === event.currentTarget) {\n (event.target.ownerDocument \|\| document)\n .getElementById(treeId)\n .focus({ preventScroll: true });\n }\n\n const unfocusable = !disabledItemsFocusable && disabled;\n if (\n !focused &&\n event.currentTarget === event.target &&\n !unfocusable &&\n focus\n ) {\n focus(event, nodeId);\n }\n },\n [disabled, disabledItemsFocusable, focus, focused, nodeId, treeId]\n );\n\n const handleExpansion = useCallback(\n (event) => {\n if (!disabled) {\n if (treeviewMode && !focused && focus) {\n focus(event, nodeId);\n }\n\n const multiple =\n multiSelect && (event.shiftKey \|\| event.ctrlKey \|\| event.metaKey);\n\n // If already expanded and trying to toggle selection don't close\n if (\n expandable &&\n isOpen &&\n !(multiple && isExpanded && isExpanded(nodeId))\n ) {\n if (toggleExpansion) toggleExpansion(event, nodeId);\n }\n }\n },\n [\n disabled,\n expandable,\n focus,\n focused,\n isExpanded,\n multiSelect,\n nodeId,\n toggleExpansion,\n treeviewMode,\n ]\n );\n\n const handleSelection = useCallback(\n (event) => {\n if (selectable && !disabled) {\n if (treeviewMode && !focused && focus) {\n focus(event, nodeId);\n }\n\n const multiple =\n multiSelect && (event.shiftKey \|\| event.ctrlKey \|\| event.metaKey);\n\n if (multiple) {\n if (event.shiftKey) {\n if (selectRange) return selectRange(event, { end: nodeId });\n } else {\n if (selectNode) return selectNode(event, nodeId, true);\n }\n } else {\n if (selectNode) return selectNode(event, nodeId);\n }\n } else {\n return false;\n }\n },\n [\n disabled,\n focus,\n focused,\n multiSelect,\n nodeId,\n selectNode,\n selectRange,\n selectable,\n treeviewMode,\n ]\n );\n\n const handleMouseDown = useCallback(\n (event) => {\n preventSelection(event, disabled);\n\n if (onMouseDown) {\n onMouseDown(event);\n }\n },\n [disabled, onMouseDown]\n );\n\n const handleClick = useCallback(\n (event) => {\n if (!disabled) {\n if (expandable && isOpen) {\n handleExpansion(event);\n }\n\n if (selectable) {\n handleSelection(event);\n }\n }\n\n if (onClick) {\n onClick(event);\n }\n },\n [\n disabled,\n expandable,\n handleExpansion,\n handleSelection,\n onClick,\n selectable,\n ]\n );\n\n const handleKeyDown = useCallback(\n (event) => {\n let isEventHandled = false;\n const { key } = event;\n\n if (\n event.altKey \|\|\n event.ctrlKey \|\|\n event.metaKey \|\|\n event.currentTarget !== event.target\n ) {\n return;\n }\n if (contentRef.current === event.currentTarget) {\n if (key === \"Enter\" \|\| key === \" \") {\n if (expandable && isOpen) {\n isEventHandled = handleExpansion(event) as unknown as boolean;\n }\n\n if (selectable) {\n isEventHandled = handleSelection(event) as boolean;\n }\n }\n\n if (isEventHandled) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n },\n [expandable, handleExpansion, handleSelection, selectable]\n );\n\n const renderedContent = useMemo(\n () => (\n <StyledContent\n id={setId(id, \"button\")}\n component={href ? \"a\" : \"div\"}\n href={href}\n target={target}\n ref={contentRef}\n className={clsx(\n treeViewItemClasses.content,\n classes?.content,\n href != null && clsx(treeViewItemClasses.link, classes?.link),\n !isOpen && clsx(treeViewItemClasses.minimized, classes?.minimized)\n )}\n variant={disabled ? \"placeholderText\" : \"body\"}\n onClick={handleClick}\n onMouseDown={handleMouseDown}\n style={{\n paddingLeft:\n (expandable \|\| icon != null ? 0 : 10) +\n level (collapsible ? 32 : 10),\n }}\n {...(treeviewMode\n ? {\n role: \"button\",\n tabIndex: -1,\n onFocus: handleFocus,\n }\n : {\n role: \"button\",\n tabIndex: selectable \|\| expandable ? 0 : -1,\n onKeyDown: handleKeyDown,\n \"aria-current\": selectable && selected ? \"page\" : undefined,\n \"aria-expanded\": expandable ? expanded : undefined,\n \"aria-controls\": expandable ? setId(id, \"group\") : undefined,\n \"aria-label\": payload?.label,\n })}\n >\n {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}\n\n <IconWrapper\n icon={icon}\n label={payload?.label}\n hasChildren={Boolean(children)}\n showAvatar={\n !icon && level === 0 && !isOpen && collapsedMode === \"icon\"\n }\n isOpen={isOpen}\n disableTooltip={disableTooltip}\n />\n\n {isOpen && label}\n </StyledContent>\n ),\n [\n id,\n href,\n target,\n classes?.content,\n treeViewItemClasses.content,\n classes?.link,\n treeViewItemClasses.link,\n classes?.minimized,\n treeViewItemClasses.minimized,\n disabled,\n handleClick,\n handleMouseDown,\n expandable,\n icon,\n level,\n collapsible,\n treeviewMode,\n handleFocus,\n selectable,\n handleKeyDown,\n selected,\n expanded,\n label,\n disableTooltip,\n ]\n );\n\n const renderedChildren = useMemo(\n () =>\n children && (\n <StyledGroup\n id={setId(id, \"group\")}\n className={clsx(treeViewItemClasses.group, classes?.group)}\n role={treeviewMode ? \"group\" : undefined}\n >\n {children}\n </StyledGroup>\n ),\n [children, treeViewItemClasses.group, classes?.group, id, treeviewMode]\n );\n\n return (\n <StyledNode\n ref={handleRef}\n id={id ?? undefined}\n className={clsx(\n treeViewItemClasses?.node,\n classes?.node,\n className,\n disabled && clsx(treeViewItemClasses.disabled, classes?.disabled),\n expandable &&\n clsx(treeViewItemClasses.expandable, classes?.expandable),\n expandable &&\n !expanded &&\n clsx(treeViewItemClasses.collapsed, classes?.collapsed),\n expandable &&\n expanded &&\n clsx(treeViewItemClasses.expanded, classes?.expanded),\n selectable &&\n !disabled &&\n clsx(treeViewItemClasses.selectable, classes?.selectable),\n !disabled &&\n !selectable &&\n clsx(treeViewItemClasses.unselectable, classes?.unselectable),\n !disabled &&\n selectable &&\n selected &&\n clsx(treeViewItemClasses.selected, classes?.selected),\n !disabled &&\n selectable &&\n !selected &&\n clsx(treeViewItemClasses.unselected, classes?.unselected),\n focused && clsx(treeViewItemClasses.focused, classes?.focused),\n !isOpen &&\n collapsedMode == \"simple\" &&\n clsx(treeViewItemClasses.hide, classes?.hide),\n !isOpen &&\n collapsedMode == \"icon\" &&\n isChildSelected &&\n isChildSelected(nodeId) &&\n clsx(treeViewItemClasses.selected, classes?.selected)\n )}\n data-hasicon={icon != null ? true : undefined}\n {...(mode === \"treeview\" && {\n role: \"treeitem\",\n \"aria-selected\": ariaSelected,\n \"aria-expanded\": expandable ? expanded : undefined,\n \"aria-disabled\": disabled ? true : undefined,\n })}\n {...others}\n >\n {renderedContent}\n {isOpen && (\n <DescendantProvider id={nodeId} level={level + 1}>\n {renderedChildren}\n </DescendantProvider>\n )}\n </StyledNode>\n );\n }\n);\n"],"names":["preventSelection","event","disabled","shiftKey","ctrlKey","metaKey","preventDefault","HvVerticalNavigationTreeViewItem","forwardRef","props","ref","id","idProp","className","classes","disabledProp","selectable","selectableProp","nodeId","icon","label","href","target","payload","onClick","onMouseDown","onFocus","children","disableTooltip","others","treeViewControlContext","useContext","TreeViewControlContext","isExpanded","isSelected","isFocused","isDisabled","isChildSelected","TreeViewStateContext","treeId","mode","collapsible","toggleExpansion","multiSelect","selectNode","selectRange","disabledItemsFocusable","registerNode","unregisterNode","mapFirstChar","unMapFirstChar","focus","treeviewMode","treeitemElement","setTreeitemElement","useState","contentRef","useRef","handleRef","useForkRef","descendant","useMemo","element","isOpen","collapsedMode","VerticalNavigationContext","index","parentId","level","useDescendant","expandable","Array","isArray","expanded","focused","selected","useEffect","idAttribute","undefined","current","textContent","substring","toLowerCase","ariaSelected","handleFocus","useCallback","currentTarget","ownerDocument","document","getElementById","preventScroll","unfocusable","handleExpansion","multiple","handleSelection","end","handleMouseDown","handleClick","handleKeyDown","isEventHandled","key","altKey","stopPropagation","renderedContent","_jsxs","StyledContent","setId","component","clsx","treeViewItemClasses","content","link","minimized","variant","style","paddingLeft","role","tabIndex","onKeyDown","DropUpXS","DropDownXS","IconWrapper","hasChildren","Boolean","showAvatar","renderedChildren","StyledGroup","group","StyledNode","node","collapsed","unselectable","unselected","hide","DescendantProvider"],"mappings":"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"}

package/dist/esm/components/VerticalNavigation/VerticalNavigation.js CHANGED Viewed

@@ -2,6 +2,7 @@ import clsx from "clsx";
 import { useState, useMemo, useEffect } from "react";
 import { StyledRoot } from "./VerticalNavigation.styles.js";
 import verticalNavigationClasses from "./verticalNavigationClasses.js";
+import { hasChildNavigationItems } from "./utils/VerticalNavigation.utils.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { fillDataWithParentId, getParentItemById, getNavigationItemById } from "./NavigationSlider/utils/NavigationSlider.utils.js";
 import { VerticalNavigationContext } from "./VerticalNavigationContext.js";
@@ -21,6 +22,7 @@ const HvVerticalNavigation = ({
   const withParentData = useMemo(() => fillDataWithParentId(parentData), [parentData]);
   const initialParentItem = useMemo(() => getParentItemById(withParentData, parentSelected), [withParentData, parentSelected]);
   const [parentItem, setParentItem] = useState(initialParentItem);
+  const hasAnyChildWithData = useMemo(() => hasChildNavigationItems(parentData), [parentData]);
   useEffect(() => setHeaderTitle(parentItem == null ? void 0 : parentItem.label), [parentItem, setParentItem]);
   const navigateToParentHandler = () => {
     setParentItem(getParentItemById(withParentData, parentItem.id));
@@ -42,13 +44,15 @@ const HvVerticalNavigation = ({
     parentData,
     setParentData,
     parentSelected,
-    setParentSelected
-  }), [open, collapsedMode, slider, headerTitle, setHeaderTitle, parentItem, withParentData, navigateToChildHandler, navigateToParentHandler]);
+    setParentSelected,
+    hasAnyChildWithData
+  }), [open, collapsedMode, slider, headerTitle, setHeaderTitle, parentItem, withParentData, navigateToChildHandler, navigateToParentHandler, hasAnyChildWithData]);
   const content = /* @__PURE__ */ jsx(VerticalNavigationContext.Provider, {
     value,
     children: /* @__PURE__ */ jsx(StyledRoot, {
       id,
       className: clsx(className, verticalNavigationClasses.root, classes == null ? void 0 : classes.root, !open && verticalNavigationClasses.collapsed, slider && verticalNavigationClasses.slider, classes == null ? void 0 : classes.collapsed),
+      hasAnyChildWithData,
       ...others,
       children
     })

package/dist/esm/components/VerticalNavigation/VerticalNavigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalNavigation.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { StyledRoot } from \"./VerticalNavigation.styles\";\nimport verticalNavigationClasses, {\n HvVerticalNavigationClasses,\n} from \"./verticalNavigationClasses\";\nimport { NavigationData, VerticalNavigationContext } from \"./\";\nimport {\n fillDataWithParentId,\n getNavigationItemById,\n getParentItemById,\n} from \"./NavigationSlider/utils\";\n\nexport type HvVerticalNavigationProps = {\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 to the component.\n /\n classes?: HvVerticalNavigationClasses;\n /\n Current State of the Vertical Navigation Collapse\n /\n open?: boolean;\n /\n Collpased Mode for the Vertical Navigation, the default value is \"simple\".\n /\n collapsedMode?: HvVerticalNavigationMode;\n /\n Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false.\n /\n slider?: boolean;\n /\n The content inside the actions container.\n /\n children?: React.ReactNode;\n};\n\n/\n Navigation enables users to move through an app to complete tasks.\n \n It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.\n * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.\n \n Even thou both the hierarchically organized data and the visual style ressemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)\n * isn't necessarily the most appropriate.\n \n The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.\n \n The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.\n * However it can be tedious to TAB through all navigation items to reach the actions panel.\n \n Both modes are available via the `mode` property and each app should choose the most appropriate.\n */\nexport const HvVerticalNavigation = ({\n id,\n className,\n classes,\n\n children,\n\n open = true,\n\n collapsedMode = \"simple\",\n\n slider = false,\n\n ...others\n}: HvVerticalNavigationProps) => {\n const [parentData, setParentData] = useState<NavigationData[]>([]);\n\n const [parentSelected, setParentSelected] = useState();\n\n const [headerTitle, setHeaderTitle] = useState<string \| undefined>();\n\n // navigationSlider\n const withParentData = useMemo(\n () => fillDataWithParentId(parentData),\n [parentData]\n );\n\n const initialParentItem = useMemo(\n () => getParentItemById(withParentData, parentSelected),\n [withParentData, parentSelected]\n );\n\n const [parentItem, setParentItem] = useState(initialParentItem);\n\n useEffect(\n () => setHeaderTitle(parentItem?.label),\n [parentItem, setParentItem]\n );\n\n const navigateToParentHandler = () => {\n setParentItem(getParentItemById(withParentData, parentItem.id));\n };\n\n const navigateToChildHandler = (event, item) => {\n setParentItem(getNavigationItemById(withParentData, item.id));\n event.stopPropagation();\n };\n\n const value = useMemo(\n () => ({\n isOpen: open,\n collapsedMode,\n slider,\n headerTitle,\n setHeaderTitle,\n\n parentItem,\n withParentData,\n navigateToChildHandler,\n navigateToParentHandler,\n\n parentData,\n setParentData,\n parentSelected,\n setParentSelected,\n }),\n [\n open,\n collapsedMode,\n slider,\n headerTitle,\n setHeaderTitle,\n parentItem,\n withParentData,\n navigateToChildHandler,\n navigateToParentHandler,\n ]\n );\n\n const content = (\n <VerticalNavigationContext.Provider value={value}>\n <StyledRoot\n id={id}\n className={clsx(\n className,\n verticalNavigationClasses.root,\n classes?.root,\n !open && verticalNavigationClasses.collapsed,\n slider && verticalNavigationClasses.slider,\n classes?.collapsed\n )}\n {...others}\n >\n {children}\n </StyledRoot>\n </VerticalNavigationContext.Provider>\n );\n\n return content;\n};\n\nexport type HvVerticalNavigationMode = \"icon\" \| \"simple\";\n\nexport type HvVerticalNavigationPosition =\n \| \"static\"\n \| \"relative\"\n \| \"fixed\"\n \| \"absolute\";\n"],"names":["HvVerticalNavigation","id","className","classes","children","open","collapsedMode","slider","others","parentData","setParentData","useState","parentSelected","setParentSelected","headerTitle","setHeaderTitle","withParentData","useMemo","fillDataWithParentId","initialParentItem","getParentItemById","parentItem","setParentItem","label","navigateToParentHandler","navigateToChildHandler","event","item","getNavigationItemById","stopPropagation","value","isOpen","content","VerticalNavigationContext","Provider","StyledRoot","clsx","verticalNavigationClasses","root","collapsed"],"mappings":"~~;;;;;;;AA4DO~~,MAAMA,uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EAEAC;AAAAA,EAEAC,OAAO;AAAA,EAEPC,gBAAgB;AAAA,EAEhBC,SAAS;AAAA,EAET,GAAGC;AACsB,MAAM;AAC/B,QAAM,CAACC,YAAYC,aAAa,IAAIC,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,SAAU;AAEtD,QAAM,CAACG,aAAaC,cAAc,IAAIJ,SAA8B;AAG9DK,QAAAA,iBAAiBC,QACrB,MAAMC,qBAAqBT,UAAU,GACrC,CAACA,UAAU,CAAC;AAGRU,QAAAA,oBAAoBF,QACxB,MAAMG,kBAAkBJ,gBAAgBJ,cAAc,GACtD,CAACI,gBAAgBJ,cAAc,CAAC;AAGlC,QAAM,CAACS,YAAYC,aAAa,IAAIX,SAASQ,iBAAiB;~~AAG5D~~,YAAA,~~MAAMJ~~,eAAeM,~~yCAAYE~~,KAAK,GACtC,~~CAACF~~,YAAYC,aAAa,CAAC;AAG7B,~~QAAME~~,0BAA0BA,MAAM;~~AACpCF~~,kBAAcF,kBAAkBJ,gBAAgBK,WAAWpB,EAAE,CAAC;AAAA,EAAA;~~AAG1DwB~~,QAAAA,yBAAyBA,CAACC,OAAOC,SAAS;~~AAC9CL~~,~~kBAAcM~~,~~sBAAsBZ~~,~~gBAAgBW~~,~~KAAK1B~~,EAAE,CAAC;~~AAC5DyB~~,UAAMG,gBAAiB;AAAA,EAAA;AAGnBC,QAAAA,~~QAAQb~~,QACZ,OAAO;AAAA,~~IACLc~~,~~QAAQ1B~~;AAAAA,IACRC;AAAAA,IACAC;AAAAA,IACAO;AAAAA,IACAC;AAAAA,IAEAM;AAAAA,IACAL;AAAAA,~~IACAS~~;AAAAA,IACAD;AAAAA,~~IAEAf~~;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC;AAAAA,~~EACF~~,~~IACA~~,~~CACER~~,MACAC,eACAC,QACAO,aACAC,gBACAM,YACAL,~~gBACAS~~,wBACAD,~~uBAAuB~~,~~CACxB~~;~~AAGGQ~~,QAAAA,UACHC,oBAAAA,0BAA0BC,UAAQ;AAAA,IAACJ;AAAAA,~~IAAa1B~~,~~8BAC9C+B~~,YAAU;AAAA,~~MACTlC~~;AAAAA,MACAC,~~WAAWkC~~,~~KACTlC~~,~~WACAmC~~,0BAA0BC,~~MAC1BnC~~,~~mCAASmC~~,MACT,~~CAACjC~~,~~QAAQgC~~,0BAA0BE,~~WACnChC~~,~~UAAU8B~~,~~0BAA0B9B~~,QACpCJ,~~mCAASoC~~,SAAS;AAAA,~~MAClB~~,~~GACE/B~~;AAAAA,MAAMJ;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGd;~~AAEM4B~~,SAAAA;AACT;"}
1	+ {"version":3,"file":"VerticalNavigation.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { StyledRoot } from \"./VerticalNavigation.styles\";\nimport verticalNavigationClasses, {\n HvVerticalNavigationClasses,\n} from \"./verticalNavigationClasses\";\nimport { NavigationData, VerticalNavigationContext } from \"./\";\nimport {\n fillDataWithParentId,\n getNavigationItemById,\n getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\n\nexport type HvVerticalNavigationProps = {\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 to the component.\n /\n classes?: HvVerticalNavigationClasses;\n /\n Current State of the Vertical Navigation Collapse\n /\n open?: boolean;\n /\n Collpased Mode for the Vertical Navigation, the default value is \"simple\".\n /\n collapsedMode?: HvVerticalNavigationMode;\n /\n Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false.\n /\n slider?: boolean;\n /\n The content inside the actions container.\n /\n children?: React.ReactNode;\n};\n\n/\n Navigation enables users to move through an app to complete tasks.\n \n It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.\n * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.\n \n Even thou both the hierarchically organized data and the visual style ressemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)\n * isn't necessarily the most appropriate.\n \n The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.\n \n The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.\n * However it can be tedious to TAB through all navigation items to reach the actions panel.\n \n Both modes are available via the `mode` property and each app should choose the most appropriate.\n */\nexport const HvVerticalNavigation = ({\n id,\n className,\n classes,\n\n children,\n\n open = true,\n\n collapsedMode = \"simple\",\n\n slider = false,\n\n ...others\n}: HvVerticalNavigationProps) => {\n const [parentData, setParentData] = useState<NavigationData[]>([]);\n\n const [parentSelected, setParentSelected] = useState();\n\n const [headerTitle, setHeaderTitle] = useState<string \| undefined>();\n\n // navigationSlider\n const withParentData = useMemo(\n () => fillDataWithParentId(parentData),\n [parentData]\n );\n\n const initialParentItem = useMemo(\n () => getParentItemById(withParentData, parentSelected),\n [withParentData, parentSelected]\n );\n\n const [parentItem, setParentItem] = useState(initialParentItem);\n\n const hasAnyChildWithData = useMemo(\n () => hasChildNavigationItems(parentData),\n [parentData]\n );\n\n useEffect(\n () => setHeaderTitle(parentItem?.label),\n [parentItem, setParentItem]\n );\n\n const navigateToParentHandler = () => {\n setParentItem(getParentItemById(withParentData, parentItem.id));\n };\n\n const navigateToChildHandler = (event, item) => {\n setParentItem(getNavigationItemById(withParentData, item.id));\n event.stopPropagation();\n };\n\n const value = useMemo(\n () => ({\n isOpen: open,\n collapsedMode,\n slider,\n headerTitle,\n setHeaderTitle,\n\n parentItem,\n withParentData,\n navigateToChildHandler,\n navigateToParentHandler,\n\n parentData,\n setParentData,\n parentSelected,\n setParentSelected,\n hasAnyChildWithData,\n }),\n [\n open,\n collapsedMode,\n slider,\n headerTitle,\n setHeaderTitle,\n parentItem,\n withParentData,\n navigateToChildHandler,\n navigateToParentHandler,\n hasAnyChildWithData,\n ]\n );\n\n const content = (\n <VerticalNavigationContext.Provider value={value}>\n <StyledRoot\n id={id}\n className={clsx(\n className,\n verticalNavigationClasses.root,\n classes?.root,\n !open && verticalNavigationClasses.collapsed,\n slider && verticalNavigationClasses.slider,\n classes?.collapsed\n )}\n hasAnyChildWithData={hasAnyChildWithData}\n {...others}\n >\n {children}\n </StyledRoot>\n </VerticalNavigationContext.Provider>\n );\n\n return content;\n};\n\nexport type HvVerticalNavigationMode = \"icon\" \| \"simple\";\n\nexport type HvVerticalNavigationPosition =\n \| \"static\"\n \| \"relative\"\n \| \"fixed\"\n \| \"absolute\";\n"],"names":["HvVerticalNavigation","id","className","classes","children","open","collapsedMode","slider","others","parentData","setParentData","useState","parentSelected","setParentSelected","headerTitle","setHeaderTitle","withParentData","useMemo","fillDataWithParentId","initialParentItem","getParentItemById","parentItem","setParentItem","hasAnyChildWithData","hasChildNavigationItems","label","navigateToParentHandler","navigateToChildHandler","event","item","getNavigationItemById","stopPropagation","value","isOpen","content","VerticalNavigationContext","Provider","StyledRoot","clsx","verticalNavigationClasses","root","collapsed"],"mappings":";;;;;;;;AA6DO,MAAMA,uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EAEAC;AAAAA,EAEAC,OAAO;AAAA,EAEPC,gBAAgB;AAAA,EAEhBC,SAAS;AAAA,EAET,GAAGC;AACsB,MAAM;AAC/B,QAAM,CAACC,YAAYC,aAAa,IAAIC,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,SAAU;AAEtD,QAAM,CAACG,aAAaC,cAAc,IAAIJ,SAA8B;AAG9DK,QAAAA,iBAAiBC,QACrB,MAAMC,qBAAqBT,UAAU,GACrC,CAACA,UAAU,CAAC;AAGRU,QAAAA,oBAAoBF,QACxB,MAAMG,kBAAkBJ,gBAAgBJ,cAAc,GACtD,CAACI,gBAAgBJ,cAAc,CAAC;AAGlC,QAAM,CAACS,YAAYC,aAAa,IAAIX,SAASQ,iBAAiB;AAExDI,QAAAA,sBAAsBN,QAC1B,MAAMO,wBAAwBf,UAAU,GACxC,CAACA,UAAU,CAAC;AAIZ,YAAA,MAAMM,eAAeM,yCAAYI,KAAK,GACtC,CAACJ,YAAYC,aAAa,CAAC;AAG7B,QAAMI,0BAA0BA,MAAM;AACpCJ,kBAAcF,kBAAkBJ,gBAAgBK,WAAWpB,EAAE,CAAC;AAAA,EAAA;AAG1D0B,QAAAA,yBAAyBA,CAACC,OAAOC,SAAS;AAC9CP,kBAAcQ,sBAAsBd,gBAAgBa,KAAK5B,EAAE,CAAC;AAC5D2B,UAAMG,gBAAiB;AAAA,EAAA;AAGnBC,QAAAA,QAAQf,QACZ,OAAO;AAAA,IACLgB,QAAQ5B;AAAAA,IACRC;AAAAA,IACAC;AAAAA,IACAO;AAAAA,IACAC;AAAAA,IAEAM;AAAAA,IACAL;AAAAA,IACAW;AAAAA,IACAD;AAAAA,IAEAjB;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAU;AAAAA,EAEF,IAAA,CACElB,MACAC,eACAC,QACAO,aACAC,gBACAM,YACAL,gBACAW,wBACAD,yBACAH,mBAAmB,CACpB;AAGGW,QAAAA,UACHC,oBAAAA,0BAA0BC,UAAQ;AAAA,IAACJ;AAAAA,IAAa5B,8BAC9CiC,YAAU;AAAA,MACTpC;AAAAA,MACAC,WAAWoC,KACTpC,WACAqC,0BAA0BC,MAC1BrC,mCAASqC,MACT,CAACnC,QAAQkC,0BAA0BE,WACnClC,UAAUgC,0BAA0BhC,QACpCJ,mCAASsC,SAAS;AAAA,MAEpBlB;AAAAA,MAAyC,GACrCf;AAAAA,MAAMJ;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGd;AAEM8B,SAAAA;AACT;"}

package/dist/esm/components/VerticalNavigation/VerticalNavigation.styles.js CHANGED Viewed

@@ -6,16 +6,18 @@ const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "prod
 } : {
   target: "eyka99t0",
   label: "StyledRoot"
-})({
+})(({
+  hasAnyChildWithData
+}) => ({
   display: "flex",
   flexDirection: "column",
   justifyContent: theme.verticalNavigation.justifyContent,
-  width: "100%",
+  width: "220px",
   background: theme.colors.atmo1,
   boxShadow: theme.colors.shadow,
   clipPath: "inset(0px -12px 0px 0px)",
   [`&.${verticalNavigationClasses.collapsed}`]: {
-    width: "56px",
+    width: hasAnyChildWithData ? "66px" : "56px",
     "& > :first-of-type:not(:last-child)": {
       padding: theme.spacing(["sm", "xs", "xs", "xs"])
     },
@@ -39,7 +41,7 @@ const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "prod
       borderBottom: `3px solid ${theme.colors.atmo2}`
     }
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1ZlcnRpY2FsTmF2aWdhdGlvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUkwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9WZXJ0aWNhbE5hdmlnYXRpb24uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHZlcnRpY2FsTmF2aWdhdGlvbkNsYXNzZXMgZnJvbSBcIi4vdmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICBqdXN0aWZ5Q29udGVudDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmp1c3RpZnlDb250ZW50LFxuXG4gIHdpZHRoOiBcIjEwMCVcIixcblxuICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIGJveFNoYWRvdzogdGhlbWUuY29sb3JzLnNoYWRvdyxcbiAgY2xpcFBhdGg6IFwiaW5zZXQoMHB4IC0xMnB4IDBweCAwcHgpXCIsXG5cbiAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlcy5jb2xsYXBzZWR9YF06IHtcbiAgICB3aWR0aDogXCI1NnB4XCIsXG5cbiAgICBcIiYgPiA6Zmlyc3Qtb2YtdHlwZTpub3QoOmxhc3QtY2hpbGQpXCI6IHtcbiAgICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNpbmcoW1wic21cIiwgXCJ4c1wiLCBcInhzXCIsIFwieHNcIl0pLFxuICAgIH0sXG5cbiAgICBcIiYgPiA6bm90KG5hdjpmaXJzdC1vZi10eXBlKVwiOiB7XG4gICAgICBwYWRkaW5nOiB0aGVtZS5zcGFjaW5nKFtcInhzXCIsIFwieHNcIiwgXCJzbVwiLCBcInhzXCJdKSxcbiAgICB9LFxuICB9LFxuXG4gIFwiJiA+IDpvbmx5LWNoaWxkXCI6IHtcbiAgICBwYWRkaW5nOiB0aGVtZS5zcGFjZS5zbSxcbiAgfSxcbiAgXCImID4gOm5vdChuYXY6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgIGJvcmRlclRvcDogYDNweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hdG1vMn1gLFxuICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNpbmcoW1wieHNcIiwgXCJzbVwiLCBcInNtXCIsIFwic21cIl0pLFxuICB9LFxuXG4gIFwiJiA+IDpmaXJzdC1vZi10eXBlOm5vdCg6bGFzdC1jaGlsZClcIjoge1xuICAgIGJvcmRlclRvcDogXCJub25lXCIsXG4gICAgcGFkZGluZzogdGhlbWUuc3BhY2luZyhbXCJzbVwiLCBcInNtXCIsIFwieHNcIiwgXCJzbVwiXSksXG4gIH0sXG5cbiAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlcy5zbGlkZXJ9YF06IHtcbiAgICBcIiYgPiBkaXY6Zmlyc3Qtb2YtdHlwZVwiOiB7XG4gICAgICBib3JkZXJCb3R0b206IGAzcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYXRtbzJ9YCxcbiAgICB9LFxuICB9LFxufSk7XG4iXX0= */");
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1ZlcnRpY2FsTmF2aWdhdGlvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVEwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9WZXJ0aWNhbE5hdmlnYXRpb24uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHZlcnRpY2FsTmF2aWdhdGlvbkNsYXNzZXMgZnJvbSBcIi4vdmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlc1wiO1xuXG5pbnRlcmZhY2UgU3R5bGVkUm9vdFByb3BzIHtcbiAgaGFzQW55Q2hpbGRXaXRoRGF0YTogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoXG4gICh7IGhhc0FueUNoaWxkV2l0aERhdGEgfTogU3R5bGVkUm9vdFByb3BzKSA9PiAoe1xuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gICAganVzdGlmeUNvbnRlbnQ6IHRoZW1lLnZlcnRpY2FsTmF2aWdhdGlvbi5qdXN0aWZ5Q29udGVudCxcblxuICAgIHdpZHRoOiBcIjIyMHB4XCIsXG5cbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgYm94U2hhZG93OiB0aGVtZS5jb2xvcnMuc2hhZG93LFxuICAgIGNsaXBQYXRoOiBcImluc2V0KDBweCAtMTJweCAwcHggMHB4KVwiLFxuXG4gICAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlcy5jb2xsYXBzZWR9YF06IHtcbiAgICAgIHdpZHRoOiBoYXNBbnlDaGlsZFdpdGhEYXRhID8gXCI2NnB4XCIgOiBcIjU2cHhcIixcblxuICAgICAgXCImID4gOmZpcnN0LW9mLXR5cGU6bm90KDpsYXN0LWNoaWxkKVwiOiB7XG4gICAgICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNpbmcoW1wic21cIiwgXCJ4c1wiLCBcInhzXCIsIFwieHNcIl0pLFxuICAgICAgfSxcblxuICAgICAgXCImID4gOm5vdChuYXY6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgICAgICBwYWRkaW5nOiB0aGVtZS5zcGFjaW5nKFtcInhzXCIsIFwieHNcIiwgXCJzbVwiLCBcInhzXCJdKSxcbiAgICAgIH0sXG4gICAgfSxcblxuICAgIFwiJiA+IDpvbmx5LWNoaWxkXCI6IHtcbiAgICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNlLnNtLFxuICAgIH0sXG4gICAgXCImID4gOm5vdChuYXY6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgICAgYm9yZGVyVG9wOiBgM3B4IHNvbGlkICR7dGhlbWUuY29sb3JzLmF0bW8yfWAsXG4gICAgICBwYWRkaW5nOiB0aGVtZS5zcGFjaW5nKFtcInhzXCIsIFwic21cIiwgXCJzbVwiLCBcInNtXCJdKSxcbiAgICB9LFxuXG4gICAgXCImID4gOmZpcnN0LW9mLXR5cGU6bm90KDpsYXN0LWNoaWxkKVwiOiB7XG4gICAgICBib3JkZXJUb3A6IFwibm9uZVwiLFxuICAgICAgcGFkZGluZzogdGhlbWUuc3BhY2luZyhbXCJzbVwiLCBcInNtXCIsIFwieHNcIiwgXCJzbVwiXSksXG4gICAgfSxcblxuICAgIFtgJi4ke3ZlcnRpY2FsTmF2aWdhdGlvbkNsYXNzZXMuc2xpZGVyfWBdOiB7XG4gICAgICBcIiYgPiBkaXY6Zmlyc3Qtb2YtdHlwZVwiOiB7XG4gICAgICAgIGJvcmRlckJvdHRvbTogYDNweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hdG1vMn1gLFxuICAgICAgfSxcbiAgICB9LFxuICB9KVxuKTtcbiJdfQ== */");
 export {
   StyledRoot
 };