@hitachivantara/uikit-react-core 5.0.0-next.17 → 5.0.0-next.18

package/dist/esm/components/VerticalNavigation/TreeView/TreeViewItem.styles.js

@@ -0,0 +1,130 @@
+import _styled from "@emotion/styled/base";
+import { theme } from "@hitachivantara/uikit-styles";
+import treeViewItemClasses from "./treeViewItemClasses.js";
+import { HvTypography } from "../../Typography/Typography.js";
+import { outlineStyles } from "../../../utils/focusUtils.js";
+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 selected = () => ({
+  background: theme.colors.atmo3,
+  borderLeft: theme.verticalNavigation.activeBorderLeft,
+  "& *": {
+    background: theme.colors.atmo3
+  }
+});
+const hover = () => ({
+  background: theme.verticalNavigation.hoverColor,
+  "& *": {
+    background: theme.verticalNavigation.hoverColor
+  }
+});
+const StyledGroup = /* @__PURE__ */ _styled("ul", process.env.NODE_ENV === "production" ? {
+  target: "er1eqbm2"
+} : {
+  target: "er1eqbm2",
+  label: "StyledGroup"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1a8z1t8",
+  styles: "margin:8px 0 0 0;padding:0"
+} : {
+  name: "1a8z1t8",
+  styles: "margin:8px 0 0 0;padding:0",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1RyZWVWaWV3L1RyZWVWaWV3SXRlbS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCMkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9WZXJ0aWNhbE5hdmlnYXRpb24vVHJlZVZpZXcvVHJlZVZpZXdJdGVtLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJjb21wb25lbnRzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5pbXBvcnQgdHJlZVZpZXdJdGVtQ2xhc3NlcyBmcm9tIFwiLi90cmVlVmlld0l0ZW1DbGFzc2VzXCI7XG5cbmNvbnN0IHNlbGVjdGVkID0gKCkgPT4gKHtcbiAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8zLFxuICBib3JkZXJMZWZ0OiB0aGVtZS52ZXJ0aWNhbE5hdmlnYXRpb24uYWN0aXZlQm9yZGVyTGVmdCxcbiAgXCImICpcIjoge1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgfSxcbn0pO1xuXG5jb25zdCBob3ZlciA9ICgpID0+ICh7XG4gIGJhY2tncm91bmQ6IHRoZW1lLnZlcnRpY2FsTmF2aWdhdGlvbi5ob3ZlckNvbG9yLFxuICBcIiYgKlwiOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmhvdmVyQ29sb3IsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEdyb3VwID0gc3R5bGVkKFwidWxcIikoe1xuICBtYXJnaW46IFwiOHB4IDAgMCAwXCIsXG4gIHBhZGRpbmc6IDAsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZE5vZGUgPSBzdHlsZWQoXCJsaVwiKSh7XG4gIGxpc3RTdHlsZTogXCJub25lXCIsXG4gIG1pbkhlaWdodDogXCIzMnB4XCIsXG4gIFwiJjpub3QoOmxhc3QtY2hpbGQpXCI6IHtcbiAgICBtYXJnaW5Cb3R0b206IFwiOHB4XCIsXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuY29sbGFwc2VkfWBdOiB7XG4gICAgW2AmPi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZ3JvdXB9YF06IHtcbiAgICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICAgIH0sXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZXhwYW5kZWR9YF06IHtcbiAgICBbYCY+LiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5ncm91cH1gXToge1xuICAgICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgIH0sXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMubGlua31gXToge1xuICAgIHRleHREZWNvcmF0aW9uOiBcIm5vbmVcIixcbiAgfSxcbiAgW2AmLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5oaWRlfWBdOiB7XG4gICAgZGlzcGxheTogXCJub25lXCIsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRlbnQgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImZsZXgtc3RhcnRcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgaGVpZ2h0OiBcIjMycHhcIixcbiAgYm9yZGVyTGVmdDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmluYWN0aXZlQm9yZGVyTGVmdCxcbiAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5zcGFjZS54cyxcblxuICBbYCYuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLm1pbmltaXplZH1gXToge1xuICAgIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICAgIHBhZGRpbmdSaWdodDogMCxcbiAgfSxcblxuICBbYC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZXhwYW5kYWJsZX0+JmBdOiB7XG4gICAgZm9udFdlaWdodDogNjAwLFxuICB9LFxuXG4gIC8vIHNlbGVjdGVkIHN0YXRlXG4gIFtgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5zZWxlY3RlZH0+JmBdOiBzZWxlY3RlZCgpLFxuXG4gIC8vaG92ZXJcbiAgW2A6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZGlzYWJsZWR9ID4gJik6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuc2VsZWN0ZWR9ID4gJik6aG92ZXJgXTpcbiAgICBob3ZlcigpLFxuICBbYDpub3QoLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0gPiAmKS4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuc2VsZWN0ZWR9ID46aG92ZXJgXTpcbiAgICB7fSxcblxuICAvLyBmb2N1c1xuICBbYDpub3QoLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0+Jik6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuc2VsZWN0ZWR9PiYpOmZvY3VzLXZpc2libGVgXTpcbiAgICBob3ZlcigpLFxuICBbYDpub3QoLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0+Jik6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuc2VsZWN0ZWR9PiYpLmZvY3VzLXZpc2libGVgXTpcbiAgICBob3ZlcigpLFxuXG4gIFtgKjpmb2N1cy12aXNpYmxlIC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZm9jdXNlZH0+JmBdOiB7XG4gICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgfSxcblxuICBbYCAuZm9jdXMtdmlzaWJsZSAuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLmZvY3VzZWR9PiZgXToge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG5cbiAgW2AgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5mb2N1c2VkfT4mYF06IHtcbiAgICAuLi5ob3ZlcigpLFxuICB9LFxuXG4gIFwiJltkaXNhYmxlZF0sICY6YWN0aXZlXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcblxuICBcIiY6Zm9jdXNcIjoge1xuICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICB9LFxuXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuXG4gIFwiJi5mb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuXG4gIC8vIGN1cnNvclxuICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICBcIiYgKlwiOiB7XG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgfSxcbiAgW2AgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0+JmBdOiB7XG4gICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgXCImICpcIjoge1xuICAgICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgfSxcbiAgfSxcbn0pO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledNode = /* @__PURE__ */ _styled("li", process.env.NODE_ENV === "production" ? {
+  target: "er1eqbm1"
+} : {
+  target: "er1eqbm1",
+  label: "StyledNode"
+})({
+  listStyle: "none",
+  minHeight: "32px",
+  "&:not(:last-child)": {
+    marginBottom: "8px"
+  },
+  [`&.${treeViewItemClasses.collapsed}`]: {
+    [`&>.${treeViewItemClasses.group}`]: {
+      display: "none"
+    }
+  },
+  [`&.${treeViewItemClasses.expanded}`]: {
+    [`&>.${treeViewItemClasses.group}`]: {
+      display: "block"
+    }
+  },
+  [`&.${treeViewItemClasses.link}`]: {
+    textDecoration: "none"
+  },
+  [`&.${treeViewItemClasses.hide}`]: {
+    display: "none"
+  }
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1RyZWVWaWV3L1RyZWVWaWV3SXRlbS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9WZXJ0aWNhbE5hdmlnYXRpb24vVHJlZVZpZXcvVHJlZVZpZXdJdGVtLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJjb21wb25lbnRzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5pbXBvcnQgdHJlZVZpZXdJdGVtQ2xhc3NlcyBmcm9tIFwiLi90cmVlVmlld0l0ZW1DbGFzc2VzXCI7XG5cbmNvbnN0IHNlbGVjdGVkID0gKCkgPT4gKHtcbiAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8zLFxuICBib3JkZXJMZWZ0OiB0aGVtZS52ZXJ0aWNhbE5hdmlnYXRpb24uYWN0aXZlQm9yZGVyTGVmdCxcbiAgXCImICpcIjoge1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgfSxcbn0pO1xuXG5jb25zdCBob3ZlciA9ICgpID0+ICh7XG4gIGJhY2tncm91bmQ6IHRoZW1lLnZlcnRpY2FsTmF2aWdhdGlvbi5ob3ZlckNvbG9yLFxuICBcIiYgKlwiOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmhvdmVyQ29sb3IsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEdyb3VwID0gc3R5bGVkKFwidWxcIikoe1xuICBtYXJnaW46IFwiOHB4IDAgMCAwXCIsXG4gIHBhZGRpbmc6IDAsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZE5vZGUgPSBzdHlsZWQoXCJsaVwiKSh7XG4gIGxpc3RTdHlsZTogXCJub25lXCIsXG4gIG1pbkhlaWdodDogXCIzMnB4XCIsXG4gIFwiJjpub3QoOmxhc3QtY2hpbGQpXCI6IHtcbiAgICBtYXJnaW5Cb3R0b206IFwiOHB4XCIsXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuY29sbGFwc2VkfWBdOiB7XG4gICAgW2AmPi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZ3JvdXB9YF06IHtcbiAgICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICAgIH0sXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZXhwYW5kZWR9YF06IHtcbiAgICBbYCY+LiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5ncm91cH1gXToge1xuICAgICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgIH0sXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMubGlua31gXToge1xuICAgIHRleHREZWNvcmF0aW9uOiBcIm5vbmVcIixcbiAgfSxcbiAgW2AmLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5oaWRlfWBdOiB7XG4gICAgZGlzcGxheTogXCJub25lXCIsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRlbnQgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImZsZXgtc3RhcnRcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgaGVpZ2h0OiBcIjMycHhcIixcbiAgYm9yZGVyTGVmdDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmluYWN0aXZlQm9yZGVyTGVmdCxcbiAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5zcGFjZS54cyxcblxuICBbYCYuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLm1pbmltaXplZH1gXToge1xuICAgIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICAgIHBhZGRpbmdSaWdodDogMCxcbiAgfSxcblxuICBbYC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZXhwYW5kYWJsZX0+JmBdOiB7XG4gICAgZm9udFdlaWdodDogNjAwLFxuICB9LFxuXG4gIC8vIHNlbGVjdGVkIHN0YXRlXG4gIFtgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5zZWxlY3RlZH0+JmBdOiBzZWxlY3RlZCgpLFxuXG4gIC8vaG92ZXJcbiAgW2A6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZGlzYWJsZWR9ID4gJik6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuc2VsZWN0ZWR9ID4gJik6aG92ZXJgXTpcbiAgICBob3ZlcigpLFxuICBbYDpub3QoLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0gPiAmKS4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuc2VsZWN0ZWR9ID46aG92ZXJgXTpcbiAgICB7fSxcblxuICAvLyBmb2N1c1xuICBbYDpub3QoLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0+Jik6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuc2VsZWN0ZWR9PiYpOmZvY3VzLXZpc2libGVgXTpcbiAgICBob3ZlcigpLFxuICBbYDpub3QoLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0+Jik6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuc2VsZWN0ZWR9PiYpLmZvY3VzLXZpc2libGVgXTpcbiAgICBob3ZlcigpLFxuXG4gIFtgKjpmb2N1cy12aXNpYmxlIC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZm9jdXNlZH0+JmBdOiB7XG4gICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgfSxcblxuICBbYCAuZm9jdXMtdmlzaWJsZSAuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLmZvY3VzZWR9PiZgXToge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG5cbiAgW2AgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5mb2N1c2VkfT4mYF06IHtcbiAgICAuLi5ob3ZlcigpLFxuICB9LFxuXG4gIFwiJltkaXNhYmxlZF0sICY6YWN0aXZlXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcblxuICBcIiY6Zm9jdXNcIjoge1xuICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICB9LFxuXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuXG4gIFwiJi5mb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuXG4gIC8vIGN1cnNvclxuICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICBcIiYgKlwiOiB7XG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgfSxcbiAgW2AgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0+JmBdOiB7XG4gICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgXCImICpcIjoge1xuICAgICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgfSxcbiAgfSxcbn0pO1xuIl19 */");
+const StyledContent = /* @__PURE__ */ _styled(HvTypography, process.env.NODE_ENV === "production" ? {
+  target: "er1eqbm0"
+} : {
+  target: "er1eqbm0",
+  label: "StyledContent"
+})({
+  width: "100%",
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  height: "32px",
+  borderLeft: theme.verticalNavigation.inactiveBorderLeft,
+  paddingRight: theme.space.xs,
+  [`&.${treeViewItemClasses.minimized}`]: {
+    justifyContent: "center",
+    paddingRight: 0
+  },
+  [`.${treeViewItemClasses.expandable}>&`]: {
+    fontWeight: 600
+  },
+  // selected state
+  [`.${treeViewItemClasses.selected}>&`]: selected(),
+  //hover
+  [`:not(.${treeViewItemClasses.disabled} > &):not(.${treeViewItemClasses.selected} > &):hover`]: hover(),
+  [`:not(.${treeViewItemClasses.disabled} > &).${treeViewItemClasses.selected} >:hover`]: {},
+  // focus
+  [`:not(.${treeViewItemClasses.disabled}>&):not(.${treeViewItemClasses.selected}>&):focus-visible`]: hover(),
+  [`:not(.${treeViewItemClasses.disabled}>&):not(.${treeViewItemClasses.selected}>&).focus-visible`]: hover(),
+  [`*:focus-visible .${treeViewItemClasses.focused}>&`]: {
+    ...outlineStyles
+  },
+  [` .focus-visible .${treeViewItemClasses.focused}>&`]: {
+    ...outlineStyles
+  },
+  [` .${treeViewItemClasses.focused}>&`]: {
+    ...hover()
+  },
+  "&[disabled], &:active": {
+    outline: "none"
+  },
+  "&:focus": {
+    outline: "none"
+  },
+  "&:focus-visible": {
+    ...outlineStyles
+  },
+  "&.focus-visible": {
+    ...outlineStyles
+  },
+  // cursor
+  cursor: "pointer",
+  "& *": {
+    cursor: "pointer"
+  },
+  [` .${treeViewItemClasses.disabled}>&`]: {
+    cursor: "not-allowed",
+    "& *": {
+      cursor: "not-allowed"
+    }
+  }
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1RyZWVWaWV3L1RyZWVWaWV3SXRlbS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtENkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9WZXJ0aWNhbE5hdmlnYXRpb24vVHJlZVZpZXcvVHJlZVZpZXdJdGVtLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJjb21wb25lbnRzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5pbXBvcnQgdHJlZVZpZXdJdGVtQ2xhc3NlcyBmcm9tIFwiLi90cmVlVmlld0l0ZW1DbGFzc2VzXCI7XG5cbmNvbnN0IHNlbGVjdGVkID0gKCkgPT4gKHtcbiAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8zLFxuICBib3JkZXJMZWZ0OiB0aGVtZS52ZXJ0aWNhbE5hdmlnYXRpb24uYWN0aXZlQm9yZGVyTGVmdCxcbiAgXCImICpcIjoge1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgfSxcbn0pO1xuXG5jb25zdCBob3ZlciA9ICgpID0+ICh7XG4gIGJhY2tncm91bmQ6IHRoZW1lLnZlcnRpY2FsTmF2aWdhdGlvbi5ob3ZlckNvbG9yLFxuICBcIiYgKlwiOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmhvdmVyQ29sb3IsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEdyb3VwID0gc3R5bGVkKFwidWxcIikoe1xuICBtYXJnaW46IFwiOHB4IDAgMCAwXCIsXG4gIHBhZGRpbmc6IDAsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZE5vZGUgPSBzdHlsZWQoXCJsaVwiKSh7XG4gIGxpc3RTdHlsZTogXCJub25lXCIsXG4gIG1pbkhlaWdodDogXCIzMnB4XCIsXG4gIFwiJjpub3QoOmxhc3QtY2hpbGQpXCI6IHtcbiAgICBtYXJnaW5Cb3R0b206IFwiOHB4XCIsXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuY29sbGFwc2VkfWBdOiB7XG4gICAgW2AmPi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZ3JvdXB9YF06IHtcbiAgICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICAgIH0sXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZXhwYW5kZWR9YF06IHtcbiAgICBbYCY+LiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5ncm91cH1gXToge1xuICAgICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgIH0sXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMubGlua31gXToge1xuICAgIHRleHREZWNvcmF0aW9uOiBcIm5vbmVcIixcbiAgfSxcbiAgW2AmLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5oaWRlfWBdOiB7XG4gICAgZGlzcGxheTogXCJub25lXCIsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRlbnQgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImZsZXgtc3RhcnRcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgaGVpZ2h0OiBcIjMycHhcIixcbiAgYm9yZGVyTGVmdDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmluYWN0aXZlQm9yZGVyTGVmdCxcbiAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5zcGFjZS54cyxcblxuICBbYCYuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLm1pbmltaXplZH1gXToge1xuICAgIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICAgIHBhZGRpbmdSaWdodDogMCxcbiAgfSxcblxuICBbYC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZXhwYW5kYWJsZX0+JmBdOiB7XG4gICAgZm9udFdlaWdodDogNjAwLFxuICB9LFxuXG4gIC8vIHNlbGVjdGVkIHN0YXRlXG4gIFtgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5zZWxlY3RlZH0+JmBdOiBzZWxlY3RlZCgpLFxuXG4gIC8vaG92ZXJcbiAgW2A6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZGlzYWJsZWR9ID4gJik6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuc2VsZWN0ZWR9ID4gJik6aG92ZXJgXTpcbiAgICBob3ZlcigpLFxuICBbYDpub3QoLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0gPiAmKS4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuc2VsZWN0ZWR9ID46aG92ZXJgXTpcbiAgICB7fSxcblxuICAvLyBmb2N1c1xuICBbYDpub3QoLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0+Jik6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuc2VsZWN0ZWR9PiYpOmZvY3VzLXZpc2libGVgXTpcbiAgICBob3ZlcigpLFxuICBbYDpub3QoLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0+Jik6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuc2VsZWN0ZWR9PiYpLmZvY3VzLXZpc2libGVgXTpcbiAgICBob3ZlcigpLFxuXG4gIFtgKjpmb2N1cy12aXNpYmxlIC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZm9jdXNlZH0+JmBdOiB7XG4gICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgfSxcblxuICBbYCAuZm9jdXMtdmlzaWJsZSAuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLmZvY3VzZWR9PiZgXToge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG5cbiAgW2AgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5mb2N1c2VkfT4mYF06IHtcbiAgICAuLi5ob3ZlcigpLFxuICB9LFxuXG4gIFwiJltkaXNhYmxlZF0sICY6YWN0aXZlXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcblxuICBcIiY6Zm9jdXNcIjoge1xuICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICB9LFxuXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuXG4gIFwiJi5mb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuXG4gIC8vIGN1cnNvclxuICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICBcIiYgKlwiOiB7XG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgfSxcbiAgW2AgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0+JmBdOiB7XG4gICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgXCImICpcIjoge1xuICAgICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgfSxcbiAgfSxcbn0pO1xuIl19 */");
+export {
+  StyledContent,
+  StyledGroup,
+  StyledNode
+};
+//# sourceMappingURL=TreeViewItem.styles.js.map

package/dist/esm/components/VerticalNavigation/TreeView/TreeViewItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeViewItem.styles.js","sources":["../../../../../src/components/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvTypography } from \"components\";\nimport { outlineStyles } from \"utils\";\nimport treeViewItemClasses from \"./treeViewItemClasses\";\n\nconst selected = () => ({\n  background: theme.colors.atmo3,\n  borderLeft: theme.verticalNavigation.activeBorderLeft,\n  \"& *\": {\n    background: theme.colors.atmo3,\n  },\n});\n\nconst hover = () => ({\n  background: theme.verticalNavigation.hoverColor,\n  \"& *\": {\n    background: theme.verticalNavigation.hoverColor,\n  },\n});\n\nexport const StyledGroup = styled(\"ul\")({\n  margin: \"8px 0 0 0\",\n  padding: 0,\n});\n\nexport const StyledNode = styled(\"li\")({\n  listStyle: \"none\",\n  minHeight: \"32px\",\n  \"&:not(:last-child)\": {\n    marginBottom: \"8px\",\n  },\n  [`&.${treeViewItemClasses.collapsed}`]: {\n    [`&>.${treeViewItemClasses.group}`]: {\n      display: \"none\",\n    },\n  },\n  [`&.${treeViewItemClasses.expanded}`]: {\n    [`&>.${treeViewItemClasses.group}`]: {\n      display: \"block\",\n    },\n  },\n  [`&.${treeViewItemClasses.link}`]: {\n    textDecoration: \"none\",\n  },\n  [`&.${treeViewItemClasses.hide}`]: {\n    display: \"none\",\n  },\n});\n\nexport const StyledContent = styled(HvTypography)({\n  width: \"100%\",\n  display: \"flex\",\n  justifyContent: \"flex-start\",\n  alignItems: \"center\",\n  height: \"32px\",\n  borderLeft: theme.verticalNavigation.inactiveBorderLeft,\n  paddingRight: theme.space.xs,\n\n  [`&.${treeViewItemClasses.minimized}`]: {\n    justifyContent: \"center\",\n    paddingRight: 0,\n  },\n\n  [`.${treeViewItemClasses.expandable}>&`]: {\n    fontWeight: 600,\n  },\n\n  // selected state\n  [`.${treeViewItemClasses.selected}>&`]: selected(),\n\n  //hover\n  [`:not(.${treeViewItemClasses.disabled} > &):not(.${treeViewItemClasses.selected} > &):hover`]:\n    hover(),\n  [`:not(.${treeViewItemClasses.disabled} > &).${treeViewItemClasses.selected} >:hover`]:\n    {},\n\n  // focus\n  [`:not(.${treeViewItemClasses.disabled}>&):not(.${treeViewItemClasses.selected}>&):focus-visible`]:\n    hover(),\n  [`:not(.${treeViewItemClasses.disabled}>&):not(.${treeViewItemClasses.selected}>&).focus-visible`]:\n    hover(),\n\n  [`*:focus-visible .${treeViewItemClasses.focused}>&`]: {\n    ...outlineStyles,\n  },\n\n  [` .focus-visible .${treeViewItemClasses.focused}>&`]: {\n    ...outlineStyles,\n  },\n\n  [` .${treeViewItemClasses.focused}>&`]: {\n    ...hover(),\n  },\n\n  \"&[disabled], &:active\": {\n    outline: \"none\",\n  },\n\n  \"&:focus\": {\n    outline: \"none\",\n  },\n\n  \"&:focus-visible\": {\n    ...outlineStyles,\n  },\n\n  \"&.focus-visible\": {\n    ...outlineStyles,\n  },\n\n  // cursor\n  cursor: \"pointer\",\n  \"& *\": {\n    cursor: \"pointer\",\n  },\n  [` .${treeViewItemClasses.disabled}>&`]: {\n    cursor: \"not-allowed\",\n    \"& *\": {\n      cursor: \"not-allowed\",\n    },\n  },\n});\n"],"names":["selected","background","theme","colors","atmo3","borderLeft","verticalNavigation","activeBorderLeft","hover","hoverColor","StyledGroup","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledNode","listStyle","minHeight","marginBottom","treeViewItemClasses","collapsed","group","display","expanded","link","textDecoration","hide","StyledContent","HvTypography","width","justifyContent","alignItems","height","inactiveBorderLeft","paddingRight","space","xs","minimized","expandable","fontWeight","disabled","focused","outlineStyles","outline","cursor"],"mappings":"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"}

package/dist/esm/components/VerticalNavigation/TreeView/descendants.js

@@ -0,0 +1,134 @@
+import { createContext, useState, useContext, useCallback, useMemo, useRef, useEffect } from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useEnhancedEffect } from "../../../hooks/useEnhancedEffect.js";
+function findIndex(array, comp) {
+  for (let i = 0; i < array.length; i += 1) {
+    if (comp(array[i])) {
+      return i;
+    }
+  }
+  return -1;
+}
+function binaryFindElement(array, element) {
+  let start = 0;
+  let end = array.length - 1;
+  while (start <= end) {
+    const middle = Math.floor((start + end) / 2);
+    if (array[middle].element === element) {
+      return middle;
+    }
+    if (array[middle].element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING) {
+      end = middle - 1;
+    } else {
+      start = middle + 1;
+    }
+  }
+  return start;
+}
+const DescendantContext = createContext({
+  level: 0,
+  descendants: []
+});
+if (process.env.NODE_ENV !== "production") {
+  DescendantContext.displayName = "DescendantContext";
+}
+function usePrevious(value) {
+  const ref = useRef(null);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+const noop = () => {
+};
+function useDescendant(descendant) {
+  const [, forceUpdate] = useState();
+  const {
+    registerDescendant = noop,
+    unregisterDescendant = noop,
+    descendants = [],
+    parentId = null,
+    level = 0
+  } = useContext(DescendantContext);
+  const index = findIndex(descendants, (item) => item.element === descendant.element);
+  const previousDescendants = usePrevious(descendants);
+  const someDescendantsHaveChanged = descendants.some((newDescendant, position) => {
+    return previousDescendants && previousDescendants[position];
+  });
+  useEnhancedEffect(() => {
+    if (descendant.element) {
+      registerDescendant({
+        ...descendant,
+        index
+      });
+      return () => {
+        unregisterDescendant(descendant.element);
+      };
+    }
+    forceUpdate({});
+    return void 0;
+  }, [registerDescendant, unregisterDescendant, index, someDescendantsHaveChanged, descendant]);
+  return {
+    parentId,
+    index,
+    level
+  };
+}
+function DescendantProvider(props) {
+  const {
+    children,
+    id,
+    level
+  } = props;
+  const [items, set] = useState([]);
+  const registerDescendant = useCallback(({
+    element,
+    ...other
+  }) => {
+    set((oldItems) => {
+      let newItems;
+      if (oldItems.length === 0) {
+        return [{
+          ...other,
+          element,
+          index: 0
+        }];
+      }
+      const index = binaryFindElement(oldItems, element);
+      if (oldItems[index] && oldItems[index].element === element) {
+        newItems = oldItems;
+      } else {
+        const newItem = {
+          ...other,
+          element,
+          index
+        };
+        newItems = oldItems.slice();
+        newItems.splice(index, 0, newItem);
+      }
+      newItems.forEach((item, position) => {
+        item.index = position;
+      });
+      return newItems;
+    });
+  }, []);
+  const unregisterDescendant = useCallback((element) => {
+    set((oldItems) => oldItems.filter((item) => element !== item.element));
+  }, []);
+  const value = useMemo(() => ({
+    descendants: items,
+    registerDescendant,
+    unregisterDescendant,
+    parentId: id,
+    level
+  }), [items, registerDescendant, unregisterDescendant, id, level]);
+  return /* @__PURE__ */ jsx(DescendantContext.Provider, {
+    value,
+    children
+  });
+}
+export {
+  DescendantProvider,
+  useDescendant
+};
+//# sourceMappingURL=descendants.js.map

package/dist/esm/components/VerticalNavigation/TreeView/descendants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"descendants.js","sources":["../../../../../src/components/VerticalNavigation/TreeView/descendants.tsx"],"sourcesContent":["/**\n * Copied from https://github.com/mui-org/material-ui/blob/8763de1633d80295e7b83d8c21040dad333e6699/packages/material-ui-lab/src/TreeView/descendants.js\n * Credit: https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/descendants/README.md\n *\n * - Added level (depth) property.\n * - Use local copy of useEnhancedEffect.\n */\n\nimport { useEnhancedEffect } from \"hooks\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\ntype Item = {\n  element?;\n  index?;\n  [key: string]: unknown;\n};\n\n// To replace with .findIndex() once we stop IE11 support.\nfunction findIndex(array, comp) {\n  for (let i = 0; i < array.length; i += 1) {\n    if (comp(array[i])) {\n      return i;\n    }\n  }\n\n  return -1;\n}\n\nfunction binaryFindElement(array, element) {\n  let start = 0;\n  let end = array.length - 1;\n\n  while (start <= end) {\n    const middle = Math.floor((start + end) / 2);\n\n    if (array[middle].element === element) {\n      return middle;\n    }\n\n    // eslint-disable-next-line no-bitwise\n    if (\n      array[middle].element.compareDocumentPosition(element) &\n      Node.DOCUMENT_POSITION_PRECEDING\n    ) {\n      end = middle - 1;\n    } else {\n      start = middle + 1;\n    }\n  }\n\n  return start;\n}\n\nconst DescendantContext = createContext<DescendantContextValue>({\n  level: 0,\n  descendants: [],\n});\n\ninterface DescendantContextValue {\n  level?: number;\n  registerDescendant?;\n  unregisterDescendant?;\n  descendants: Item[];\n  parentId?;\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n  DescendantContext.displayName = \"DescendantContext\";\n}\n\nfunction usePrevious(value) {\n  const ref = useRef(null);\n  useEffect(() => {\n    ref.current = value;\n  }, [value]);\n  return ref.current;\n}\n\nconst noop = () => {};\n\n/**\n * This hook registers our descendant by passing it into an array. We can then\n * search that array by to find its index when registering it in the component.\n * We use this for focus management, keyboard navigation, and typeahead\n * functionality for some components.\n *\n * The hook accepts the element node\n *\n * Our main goals with this are:\n *   1) maximum composability,\n *   2) minimal API friction\n *   3) SSR compatibility*\n *   4) concurrent safe\n *   5) index always up-to-date with the tree despite changes\n *   6) works with memoization of any component in the tree (hopefully)\n *\n * * As for SSR, the good news is that we don't actually need the index on the\n * server for most use-cases, as we are only using it to determine the order of\n * composed descendants for keyboard navigation.\n */\nexport function useDescendant(descendant) {\n  const [, forceUpdate] = useState<{} | null>();\n  const {\n    registerDescendant = noop,\n    unregisterDescendant = noop,\n    descendants = [],\n    parentId = null,\n    level = 0,\n  } = useContext(DescendantContext);\n\n  // This will initially return -1 because we haven't registered the descendant\n  // on the first render. After we register, this will then return the correct\n  // index on the following render and we will re-register descendants\n  // so that everything is up-to-date before the user interacts with a\n  // collection.\n  const index = findIndex(\n    descendants,\n    (item) => item.element === descendant.element\n  );\n\n  const previousDescendants: Item[] | null = usePrevious(descendants);\n\n  // We also need to re-register descendants any time ANY of the other\n  // descendants have changed. My brain was melting when I wrote this and it\n  // feels a little off, but checking in render and using the result in the\n  // effect's dependency array works well enough.\n  const someDescendantsHaveChanged = descendants.some(\n    (newDescendant, position) => {\n      return (\n        previousDescendants && previousDescendants[position]\n        // previousDescendants[position].element !== newDescendant.element\n        //was not able to type check this, did not any difference\n      );\n    }\n  );\n\n  // Prevent any flashing\n  useEnhancedEffect(() => {\n    if (descendant.element) {\n      registerDescendant({\n        ...descendant,\n        index,\n      });\n      return () => {\n        unregisterDescendant(descendant.element);\n      };\n    }\n    forceUpdate({});\n\n    return undefined;\n  }, [\n    registerDescendant,\n    unregisterDescendant,\n    index,\n    someDescendantsHaveChanged,\n    descendant,\n  ]);\n\n  return { parentId, index, level };\n}\n\nexport function DescendantProvider(props: DescendantProviderProps) {\n  const { children, id, level } = props;\n\n  const [items, set] = useState<Item[]>([]);\n\n  const registerDescendant = useCallback(({ element, ...other }) => {\n    set((oldItems) => {\n      let newItems;\n      if (oldItems.length === 0) {\n        // If there are no items, register at index 0 and bail.\n        return [\n          {\n            ...other,\n            element,\n            index: 0,\n          },\n        ];\n      }\n\n      const index = binaryFindElement(oldItems, element);\n\n      if (oldItems[index] && oldItems[index].element === element) {\n        // If the element is already registered, just use the same array\n        newItems = oldItems;\n      } else {\n        // When registering a descendant, we need to make sure we insert in\n        // into the array in the same order that it appears in the DOM. So as\n        // new descendants are added or maybe some are removed, we always know\n        // that the array is up-to-date and correct.\n        //\n        // So here we look at our registered descendants and see if the new\n        // element we are adding appears earlier than an existing descendant's\n        // DOM node via `node.compareDocumentPosition`. If it does, we insert\n        // the new element at this index. Because `registerDescendant` will be\n        // called in an effect every time the descendants state value changes,\n        // we should be sure that this index is accurate when descendent\n        // elements come or go from our component.\n\n        const newItem = {\n          ...other,\n          element,\n          index,\n        };\n\n        // If an index is not found we will push the element to the end.\n        newItems = oldItems.slice();\n        newItems.splice(index, 0, newItem);\n      }\n      newItems.forEach((item, position) => {\n        // eslint-disable-next-line no-param-reassign\n        item.index = position;\n      });\n      return newItems;\n    });\n  }, []);\n\n  const unregisterDescendant = useCallback((element: Item) => {\n    set((oldItems) =>\n      oldItems.filter((item: Item) => element !== item.element)\n    );\n  }, []);\n\n  const value = useMemo(\n    () => ({\n      descendants: items,\n      registerDescendant,\n      unregisterDescendant,\n      parentId: id,\n      level,\n    }),\n    [items, registerDescendant, unregisterDescendant, id, level]\n  );\n\n  return (\n    <DescendantContext.Provider value={value}>\n      {children}\n    </DescendantContext.Provider>\n  );\n}\n\nexport type DescendantProviderProps = {\n  children?: React.ReactNode;\n  id?: string;\n  level?: number;\n};\n"],"names":["findIndex","array","comp","i","length","binaryFindElement","element","start","end","middle","Math","floor","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","DescendantContext","createContext","level","descendants","process","env","NODE_ENV","displayName","usePrevious","value","ref","useRef","useEffect","current","noop","useDescendant","descendant","forceUpdate","useState","registerDescendant","unregisterDescendant","parentId","useContext","index","item","previousDescendants","someDescendantsHaveChanged","some","newDescendant","position","useEnhancedEffect","undefined","DescendantProvider","props","children","id","items","set","useCallback","other","oldItems","newItems","newItem","slice","splice","forEach","filter","useMemo","_jsx","Provider"],"mappings":";;;AA0BA,SAASA,UAAUC,OAAOC,MAAM;AAC9B,WAASC,IAAI,GAAGA,IAAIF,MAAMG,QAAQD,KAAK,GAAG;AACxC,QAAID,KAAKD,MAAME,CAAC,CAAC,GAAG;AACXA,aAAAA;AAAAA,IACT;AAAA,EACF;AAEO,SAAA;AACT;AAEA,SAASE,kBAAkBJ,OAAOK,SAAS;AACzC,MAAIC,QAAQ;AACRC,MAAAA,MAAMP,MAAMG,SAAS;AAEzB,SAAOG,SAASC,KAAK;AACnB,UAAMC,SAASC,KAAKC,OAAOJ,QAAQC,OAAO,CAAC;AAE3C,QAAIP,MAAMQ,MAAM,EAAEH,YAAYA,SAAS;AAC9BG,aAAAA;AAAAA,IACT;AAIER,QAAAA,MAAMQ,MAAM,EAAEH,QAAQM,wBAAwBN,OAAO,IACrDO,KAAKC,6BACL;AACAN,YAAMC,SAAS;AAAA,IAAA,OACV;AACLF,cAAQE,SAAS;AAAA,IACnB;AAAA,EACF;AAEOF,SAAAA;AACT;AAEA,MAAMQ,oBAAoBC,cAAsC;AAAA,EAC9DC,OAAO;AAAA,EACPC,aAAa,CAAA;AACf,CAAC;AAUD,IAAIC,QAAQC,IAAIC,aAAa,cAAc;AACzCN,oBAAkBO,cAAc;AAClC;AAEA,SAASC,YAAYC,OAAO;AACpBC,QAAAA,MAAMC,OAAO,IAAI;AACvBC,YAAU,MAAM;AACdF,QAAIG,UAAUJ;AAAAA,EAAAA,GACb,CAACA,KAAK,CAAC;AACV,SAAOC,IAAIG;AACb;AAEA,MAAMC,OAAOA,MAAM;AAAC;AAsBb,SAASC,cAAcC,YAAY;AACxC,QAAM,CAAGC,EAAAA,WAAW,IAAIC;AAClB,QAAA;AAAA,IACJC,qBAAqBL;AAAAA,IACrBM,uBAAuBN;AAAAA,IACvBX,cAAc,CAAE;AAAA,IAChBkB,WAAW;AAAA,IACXnB,QAAQ;AAAA,EAAA,IACNoB,WAAWtB,iBAAiB;AAOhC,QAAMuB,QAAQtC,UACZkB,aACCqB,UAASA,KAAKjC,YAAYyB,WAAWzB,OAAO;AAGzCkC,QAAAA,sBAAqCjB,YAAYL,WAAW;AAMlE,QAAMuB,6BAA6BvB,YAAYwB,KAC7C,CAACC,eAAeC,aAAa;AAEzBJ,WAAAA,uBAAuBA,oBAAoBI,QAAQ;AAAA,EAAA,CAItD;AAIHC,oBAAkB,MAAM;AACtB,QAAId,WAAWzB,SAAS;AACH,yBAAA;AAAA,QACjB,GAAGyB;AAAAA,QACHO;AAAAA,MAAAA,CACD;AACD,aAAO,MAAM;AACXH,6BAAqBJ,WAAWzB,OAAO;AAAA,MAAA;AAAA,IAE3C;AACA0B,gBAAY,CAAE,CAAA;AAEPc,WAAAA;AAAAA,EAAAA,GACN,CACDZ,oBACAC,sBACAG,OACAG,4BACAV,UAAU,CACX;AAEM,SAAA;AAAA,IAAEK;AAAAA,IAAUE;AAAAA,IAAOrB;AAAAA,EAAAA;AAC5B;AAEO,SAAS8B,mBAAmBC,OAAgC;AAC3D,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,IAAIjC;AAAAA,EAAU+B,IAAAA;AAEhC,QAAM,CAACG,OAAOC,GAAG,IAAInB,SAAiB,CAAE,CAAA;AAElCC,QAAAA,qBAAqBmB,YAAY,CAAC;AAAA,IAAE/C;AAAAA,IAAS,GAAGgD;AAAAA,EAAAA,MAAY;AAChEF,QAAKG,CAAa,aAAA;AACZC,UAAAA;AACAD,UAAAA,SAASnD,WAAW,GAAG;AAEzB,eAAO,CACL;AAAA,UACE,GAAGkD;AAAAA,UACHhD;AAAAA,UACAgC,OAAO;AAAA,QAAA,CACR;AAAA,MAEL;AAEMA,YAAAA,QAAQjC,kBAAkBkD,UAAUjD,OAAO;AAEjD,UAAIiD,SAASjB,KAAK,KAAKiB,SAASjB,KAAK,EAAEhC,YAAYA,SAAS;AAE/CiD,mBAAAA;AAAAA,MAAAA,OACN;AAcL,cAAME,UAAU;AAAA,UACd,GAAGH;AAAAA,UACHhD;AAAAA,UACAgC;AAAAA,QAAAA;AAIFkB,mBAAWD,SAASG;AACXC,iBAAAA,OAAOrB,OAAO,GAAGmB,OAAO;AAAA,MACnC;AACSG,eAAAA,QAAQ,CAACrB,MAAMK,aAAa;AAEnCL,aAAKD,QAAQM;AAAAA,MAAAA,CACd;AACMY,aAAAA;AAAAA,IAAAA,CACR;AAAA,EACH,GAAG,CAAE,CAAA;AAECrB,QAAAA,uBAAuBkB,YAAY,CAAC/C,YAAkB;AACrDiD,QAAAA,CAAAA,aACHA,SAASM,OAAO,CAACtB,SAAejC,YAAYiC,KAAKjC,OAAO,CAAC;AAAA,EAE7D,GAAG,CAAE,CAAA;AAECkB,QAAAA,QAAQsC,QACZ,OAAO;AAAA,IACL5C,aAAaiC;AAAAA,IACbjB;AAAAA,IACAC;AAAAA,IACAC,UAAUc;AAAAA,IACVjC;AAAAA,EAAAA,IAEF,CAACkC,OAAOjB,oBAAoBC,sBAAsBe,IAAIjC,KAAK,CAAC;AAI5D8C,SAAAA,oBAAChD,kBAAkBiD,UAAQ;AAAA,IAACxC;AAAAA,IAAayB;AAAAA,EAAAA,CAEZ;AAEjC;"}

package/dist/esm/components/VerticalNavigation/TreeView/treeViewClasses.js

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

package/dist/esm/components/VerticalNavigation/TreeView/treeViewClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeViewClasses.js","sources":["../../../../../src/components/VerticalNavigation/TreeView/treeViewClasses.ts"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvVerticalNavigationTreeViewClasses = {\n  root?: string;\n};\n\nconst classKeys: string[] = [\"root\"];\n\nconst treeViewClasses = getClasses<HvVerticalNavigationTreeViewClasses>(\n  classKeys,\n  \"HvVerticalNavigationTreeView\"\n);\n\nexport default treeViewClasses;\n"],"names":["classKeys","treeViewClasses","getClasses"],"mappings":";AAMA,MAAMA,YAAsB,CAAC,MAAM;AAEnC,MAAMC,kBAAkBC,WACtBF,WACA,8BAA8B;AAGhC,MAAA,oBAAeC;"}

package/dist/esm/components/VerticalNavigation/TreeView/treeViewItemClasses.js

@@ -0,0 +1,8 @@
+import { getClasses } from "../../../utils/classes.js";
+const classKeys = ["node", "content", "link", "group", "disabled", "expandable", "collapsed", "selectable", "unselectable", "selected", "unselected", "focused", "minimized", "hide"];
+const treeViewItemClasses = getClasses(classKeys, "HvVerticalNavigationTreeViewItem");
+const treeViewItemClasses$1 = treeViewItemClasses;
+export {
+  treeViewItemClasses$1 as default
+};
+//# sourceMappingURL=treeViewItemClasses.js.map

package/dist/esm/components/VerticalNavigation/TreeView/treeViewItemClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeViewItemClasses.js","sources":["../../../../../src/components/VerticalNavigation/TreeView/treeViewItemClasses.ts"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvVerticalNavigationTreeViewItemClasses = {\n  /** Style applied to the root of the component. */\n  node?: string;\n  /** Style applied to the content. */\n  content?: string;\n  /** Style applied to the content when it is a link. */\n  link?: string;\n  /** Style applied to the group. */\n  group?: string;\n  /** Style applied when item is disabled. */\n  disabled?: string;\n  /** Style applied when item is expandable. */\n  expandable?: string;\n  /** Style applied when item is collapsed. */\n  collapsed?: string;\n  /** Style applied when item is expanded */\n  expanded?: string;\n  /** Style applied when item is selectable. */\n  selectable?: string;\n  /** Style applied when item is unselectable. */\n  unselectable?: string;\n  /** Style applied when item is selectable. */\n  selected?: string;\n  /** Style applied when item is unselectable. */\n  unselected?: string;\n  /** Style applied when item is focused. */\n  focused?: string;\n  /** Styled applied when navigation open is false */\n  minimized?: string;\n  hide?: string;\n};\n\nconst classKeys: string[] = [\n  \"node\",\n  \"content\",\n  \"link\",\n  \"group\",\n  \"disabled\",\n  \"expandable\",\n  \"collapsed\",\n  \"selectable\",\n  \"unselectable\",\n  \"selected\",\n  \"unselected\",\n  \"focused\",\n  \"minimized\",\n  \"hide\",\n];\n\nconst treeViewItemClasses = getClasses<HvVerticalNavigationTreeViewItemClasses>(\n  classKeys,\n  \"HvVerticalNavigationTreeViewItem\"\n);\n\nexport default treeViewItemClasses;\n"],"names":["classKeys","treeViewItemClasses","getClasses"],"mappings":";AAkCA,MAAMA,YAAsB,CAC1B,QACA,WACA,QACA,SACA,YACA,cACA,aACA,cACA,gBACA,YACA,cACA,WACA,aACA,MAAM;AAGR,MAAMC,sBAAsBC,WAC1BF,WACA,kCAAkC;AAGpC,MAAA,wBAAeC;"}

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

@@ -0,0 +1,38 @@
+import clsx from "clsx";
+import { createContext, useMemo } from "react";
+import { StyledRoot } from "./VerticalNavigation.styles.js";
+import verticalNavigationClasses from "./verticalNavigationClasses.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+const VerticalNavigationContext = createContext({
+  isOpen: true,
+  collapsedMode: "simple"
+});
+const HvVerticalNavigation = ({
+  id,
+  className,
+  classes,
+  children,
+  open = true,
+  collapsedMode = "simple",
+  ...others
+}) => {
+  const value = useMemo(() => ({
+    isOpen: open,
+    collapsedMode
+  }), [open]);
+  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, classes == null ? void 0 : classes.collapsed),
+      ...others,
+      children
+    })
+  });
+  return content;
+};
+export {
+  HvVerticalNavigation,
+  VerticalNavigationContext
+};
+//# sourceMappingURL=VerticalNavigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNavigation.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { createContext, useMemo } from \"react\";\nimport { StyledRoot } from \"./VerticalNavigation.styles\";\nimport verticalNavigationClasses, {\n  HvVerticalNavigationClasses,\n} from \"./verticalNavigationClasses\";\n\ninterface VerticalNavigationContextValue {\n  isOpen: boolean;\n  collapsedMode: HvVerticalNavigationMode;\n}\n\nexport const VerticalNavigationContext =\n  createContext<VerticalNavigationContextValue>({\n    isOpen: true,\n    collapsedMode: \"simple\",\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  ...others\n}: HvVerticalNavigationProps) => {\n  const value = useMemo(\n    () => ({\n      isOpen: open,\n      collapsedMode,\n    }),\n    [open]\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          classes?.collapsed\n        )}\n        {...others}\n      >\n        {children}\n      </StyledRoot>\n    </VerticalNavigationContext.Provider>\n  );\n\n  return content;\n};\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   * The content inside the actions container.\n   */\n  children?: React.ReactNode;\n};\n\nexport type HvVerticalNavigationMode = \"icon\" | \"simple\";\n\nexport type HvVerticalNavigationPosition =\n  | \"static\"\n  | \"relative\"\n  | \"fixed\"\n  | \"absolute\";\n"],"names":["VerticalNavigationContext","createContext","isOpen","collapsedMode","HvVerticalNavigation","id","className","classes","children","open","others","value","useMemo","content","Provider","StyledRoot","clsx","verticalNavigationClasses","root","collapsed"],"mappings":";;;;;AAYO,MAAMA,4BACXC,cAA8C;AAAA,EAC5CC,QAAQ;AAAA,EACRC,eAAe;AACjB,CAAC;AAkBI,MAAMC,uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EAEAC;AAAAA,EAEAC,OAAO;AAAA,EAEPN,gBAAgB;AAAA,EAEhB,GAAGO;AACsB,MAAM;AACzBC,QAAAA,QAAQC,QACZ,OAAO;AAAA,IACLV,QAAQO;AAAAA,IACRN;AAAAA,EAAAA,IAEF,CAACM,IAAI,CAAC;AAGFI,QAAAA,UACHb,oBAAAA,0BAA0Bc,UAAQ;AAAA,IAACH;AAAAA,IAAaH,8BAC9CO,YAAU;AAAA,MACTV;AAAAA,MACAC,WAAWU,KACTV,WACAW,0BAA0BC,MAC1BX,mCAASW,MACT,CAACT,QAAQQ,0BAA0BE,WACnCZ,mCAASY,SAAS;AAAA,MAClB,GACET;AAAAA,MAAMF;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGd;AAEMK,SAAAA;AACT;"}

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

@@ -0,0 +1,41 @@
+import _styled from "@emotion/styled/base";
+import { theme } from "@hitachivantara/uikit-styles";
+import verticalNavigationClasses from "./verticalNavigationClasses.js";
+const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "eyka99t0"
+} : {
+  target: "eyka99t0",
+  label: "StyledRoot"
+})({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: theme.verticalNavigation.justifyContent,
+  width: "100%",
+  background: theme.colors.atmo1,
+  boxShadow: theme.shadows[1],
+  clipPath: "inset(0px -12px 0px 0px)",
+  [`&.${verticalNavigationClasses.collapsed}`]: {
+    width: "56px",
+    "& > :first-of-type:not(:last-child)": {
+      padding: theme.spacing(["sm", "xs", "xs", "xs"])
+    },
+    "& > :not(nav:first-of-type)": {
+      padding: theme.spacing(["xs", "xs", "sm", "xs"])
+    }
+  },
+  "& > :only-child": {
+    padding: theme.space.sm
+  },
+  "& > :not(nav:first-of-type)": {
+    borderTop: `3px solid ${theme.colors.atmo2}`,
+    padding: theme.spacing(["xs", "sm", "sm", "sm"])
+  },
+  "& > :first-of-type:not(:last-child)": {
+    borderTop: "none",
+    padding: theme.spacing(["sm", "sm", "xs", "sm"])
+  }
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1ZlcnRpY2FsTmF2aWdhdGlvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUkwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9WZXJ0aWNhbE5hdmlnYXRpb24uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHZlcnRpY2FsTmF2aWdhdGlvbkNsYXNzZXMgZnJvbSBcIi4vdmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICBqdXN0aWZ5Q29udGVudDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmp1c3RpZnlDb250ZW50LFxuXG4gIHdpZHRoOiBcIjEwMCVcIixcblxuICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIGJveFNoYWRvdzogdGhlbWUuc2hhZG93c1sxXSxcbiAgY2xpcFBhdGg6IFwiaW5zZXQoMHB4IC0xMnB4IDBweCAwcHgpXCIsXG5cbiAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlcy5jb2xsYXBzZWR9YF06IHtcbiAgICB3aWR0aDogXCI1NnB4XCIsXG5cbiAgICBcIiYgPiA6Zmlyc3Qtb2YtdHlwZTpub3QoOmxhc3QtY2hpbGQpXCI6IHtcbiAgICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNpbmcoW1wic21cIiwgXCJ4c1wiLCBcInhzXCIsIFwieHNcIl0pLFxuICAgIH0sXG5cbiAgICBcIiYgPiA6bm90KG5hdjpmaXJzdC1vZi10eXBlKVwiOiB7XG4gICAgICBwYWRkaW5nOiB0aGVtZS5zcGFjaW5nKFtcInhzXCIsIFwieHNcIiwgXCJzbVwiLCBcInhzXCJdKSxcbiAgICB9LFxuICB9LFxuXG4gIFwiJiA+IDpvbmx5LWNoaWxkXCI6IHtcbiAgICBwYWRkaW5nOiB0aGVtZS5zcGFjZS5zbSxcbiAgfSxcbiAgXCImID4gOm5vdChuYXY6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgIGJvcmRlclRvcDogYDNweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hdG1vMn1gLFxuICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNpbmcoW1wieHNcIiwgXCJzbVwiLCBcInNtXCIsIFwic21cIl0pLFxuICB9LFxuXG4gIFwiJiA+IDpmaXJzdC1vZi10eXBlOm5vdCg6bGFzdC1jaGlsZClcIjoge1xuICAgIGJvcmRlclRvcDogXCJub25lXCIsXG4gICAgcGFkZGluZzogdGhlbWUuc3BhY2luZyhbXCJzbVwiLCBcInNtXCIsIFwieHNcIiwgXCJzbVwiXSksXG4gIH0sXG59KTtcbiJdfQ== */");
+export {
+  StyledRoot
+};
+//# sourceMappingURL=VerticalNavigation.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNavigation.styles.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport verticalNavigationClasses from \"./verticalNavigationClasses\";\n\nexport const StyledRoot = styled(\"div\")({\n  display: \"flex\",\n  flexDirection: \"column\",\n  justifyContent: theme.verticalNavigation.justifyContent,\n\n  width: \"100%\",\n\n  background: theme.colors.atmo1,\n  boxShadow: theme.shadows[1],\n  clipPath: \"inset(0px -12px 0px 0px)\",\n\n  [`&.${verticalNavigationClasses.collapsed}`]: {\n    width: \"56px\",\n\n    \"& > :first-of-type:not(:last-child)\": {\n      padding: theme.spacing([\"sm\", \"xs\", \"xs\", \"xs\"]),\n    },\n\n    \"& > :not(nav:first-of-type)\": {\n      padding: theme.spacing([\"xs\", \"xs\", \"sm\", \"xs\"]),\n    },\n  },\n\n  \"& > :only-child\": {\n    padding: theme.space.sm,\n  },\n  \"& > :not(nav:first-of-type)\": {\n    borderTop: `3px solid ${theme.colors.atmo2}`,\n    padding: theme.spacing([\"xs\", \"sm\", \"sm\", \"sm\"]),\n  },\n\n  \"& > :first-of-type:not(:last-child)\": {\n    borderTop: \"none\",\n    padding: theme.spacing([\"sm\", \"sm\", \"xs\", \"sm\"]),\n  },\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","display","flexDirection","justifyContent","theme","verticalNavigation","width","background","colors","atmo1","boxShadow","shadows","clipPath","verticalNavigationClasses","collapsed","padding","spacing","space","sm","borderTop","atmo2"],"mappings":";;;AAIO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACtCC,SAAS;AAAA,EACTC,eAAe;AAAA,EACfC,gBAAgBC,MAAMC,mBAAmBF;AAAAA,EAEzCG,OAAO;AAAA,EAEPC,YAAYH,MAAMI,OAAOC;AAAAA,EACzBC,WAAWN,MAAMO,QAAQ,CAAC;AAAA,EAC1BC,UAAU;AAAA,EAEV,CAAE,KAAIC,0BAA0BC,WAAW,GAAG;AAAA,IAC5CR,OAAO;AAAA,IAEP,uCAAuC;AAAA,MACrCS,SAASX,MAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,IAEA,+BAA+B;AAAA,MAC7BD,SAASX,MAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,EACF;AAAA,EAEA,mBAAmB;AAAA,IACjBD,SAASX,MAAMa,MAAMC;AAAAA,EACvB;AAAA,EACA,+BAA+B;AAAA,IAC7BC,WAAY,aAAYf,MAAMI,OAAOY;AAAAA,IACrCL,SAASX,MAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,EACjD;AAAA,EAEA,uCAAuC;AAAA,IACrCG,WAAW;AAAA,IACXJ,SAASX,MAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,EACjD;AACF,GAACpB,QAAAC,IAAAC,aAAC,eAAA,KAAA,6gEAAA;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"verticalNavigationClasses.js","sources":["../../../../src/components/VerticalNavigation/verticalNavigationClasses.tsx"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvVerticalNavigationClasses = {\n  /** Style applied to the root of the component. */\n  root?: string;\n  /** Style applied to the root of the component when its collapsed. */\n  collapsed?: string;\n};\n\nconst classKeys: string[] = [\"root\", \"collapsed\"];\n\nconst verticalNavigationClasses = getClasses<HvVerticalNavigationClasses>(\n  classKeys,\n  \"HvVerticalNavigation\"\n);\n\nexport default verticalNavigationClasses;\n"],"names":["classKeys","verticalNavigationClasses","getClasses"],"mappings":";AASA,MAAMA,YAAsB,CAAC,QAAQ,WAAW;AAEhD,MAAMC,4BAA4BC,WAChCF,WACA,sBAAsB;AAGxB,MAAA,8BAAeC;"}

package/dist/esm/hocs/withTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"withTooltip.js","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvTypography, HvTooltip } from \"components\";\n\nconst styles = {\n  truncate: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n};\n\nconst withTooltip =\n  (\n    Component,\n    // eslint-disable-next-line @typescript-eslint/default-param-last\n    label = \"\",\n    placement,\n    hideTooltip,\n    tooltipProps,\n    tooltipContainerProps\n  ) =>\n  (props) => {\n    const [isHoverDisabled, setIsHoverDisabled] = useState(false);\n    const [open, setOpen] = useState(false);\n\n    const title = <HvTypography>{label}</HvTypography>;\n\n    const handleMouseEnter = (evt) => {\n      const isHidden = hideTooltip?.(evt);\n      setIsHoverDisabled(isHidden);\n      setOpen(!isHidden);\n    };\n\n    const handleMouseLeave = () => {\n      setIsHoverDisabled(false);\n      setOpen(false);\n    };\n\n    return (\n      <HvTooltip\n        style={{ ...styles.truncate }}\n        disableHoverListener={isHoverDisabled}\n        disableFocusListener\n        disableTouchListener\n        title={title}\n        open={open}\n        placement={placement}\n        {...tooltipProps}\n      >\n        <div\n          {...tooltipContainerProps}\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleMouseLeave}\n        >\n          <Component {...props} />\n        </div>\n      </HvTooltip>\n    );\n  };\n\nexport default withTooltip;\n"],"names":["styles","truncate","overflow","textOverflow","whiteSpace","withTooltip","Component","label","placement","hideTooltip","tooltipProps","tooltipContainerProps","props","isHoverDisabled","setIsHoverDisabled","useState","open","setOpen","title","HvTypography","children","handleMouseEnter","evt","isHidden","handleMouseLeave","HvTooltip","style","disableHoverListener","disableFocusListener","disableTouchListener","onMouseEnter","onMouseLeave"],"mappings":";;;;AAGA,MAAMA,SAAS;AAAA,EACbC,UAAU;AAAA,IACRC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EACd;AACF;AAEA,MAAMC,cACJA,CACEC,WAEAC,QAAQ,IACRC,WACAC,aACAC,cACAC,0BAEDC,CAAU,UAAA;AACT,QAAM,CAACC,iBAAiBC,kBAAkB,IAAIC,SAAS,KAAK;AAC5D,QAAM,CAACC,MAAMC,OAAO,IAAIF,SAAS,KAAK;AAEhCG,QAAAA,4BAASC,cAAY;AAAA,IAAAC,UAAEb;AAAAA,EAAAA,CAAqB;AAElD,QAAMc,mBAAoBC,CAAQ,QAAA;AAC1BC,UAAAA,WAAWd,2CAAca;AAC/BR,uBAAmBS,QAAQ;AAC3BN,YAAQ,CAACM,QAAQ;AAAA,EAAA;AAGnB,QAAMC,mBAAmBA,MAAM;AAC7BV,uBAAmB,KAAK;AACxBG,YAAQ,KAAK;AAAA,EAAA;AAGf,6BACGQ,WAAS;AAAA,IACRC,OAAO;AAAA,MAAE,GAAG1B,OAAOC;AAAAA,IAAS;AAAA,IAC5B0B,sBAAsBd;AAAAA,IACtBe,sBAAoB;AAAA,IACpBC,sBAAoB;AAAA,IACpBX;AAAAA,IACAF;AAAAA,IACAR;AAAAA,IAAqB,GACjBE;AAAAA,IAAYU,8BAEhB,OAAA;AAAA,MAAA,GACMT;AAAAA,MACJmB,cAAcT;AAAAA,MACdU,cAAcP;AAAAA,MAAiBJ,8BAE9Bd,WAAS;AAAA,QAAA,GAAKM;AAAAA,MAAAA,CAAK;AAAA,IAAA,CAAI;AAAA,EAAA,CAEhB;AAEhB;AAEF,MAAA,gBAAeP;"}
+{"version":3,"file":"withTooltip.js","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvTypography } from \"components/Typography\";\nimport { HvTooltip } from \"components/Tooltip\";\n\nconst styles = {\n  truncate: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n};\n\nconst withTooltip =\n  (\n    Component,\n    // eslint-disable-next-line @typescript-eslint/default-param-last\n    label = \"\",\n    placement,\n    hideTooltip,\n    tooltipProps,\n    tooltipContainerProps\n  ) =>\n  (props) => {\n    const [isHoverDisabled, setIsHoverDisabled] = useState(false);\n    const [open, setOpen] = useState(false);\n\n    const title = <HvTypography>{label}</HvTypography>;\n\n    const handleMouseEnter = (evt) => {\n      const isHidden = hideTooltip?.(evt);\n      setIsHoverDisabled(isHidden);\n      setOpen(!isHidden);\n    };\n\n    const handleMouseLeave = () => {\n      setIsHoverDisabled(false);\n      setOpen(false);\n    };\n\n    return (\n      <HvTooltip\n        style={{ ...styles.truncate }}\n        disableHoverListener={isHoverDisabled}\n        disableFocusListener\n        disableTouchListener\n        title={title}\n        open={open}\n        placement={placement}\n        {...tooltipProps}\n      >\n        <div\n          {...tooltipContainerProps}\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleMouseLeave}\n        >\n          <Component {...props} />\n        </div>\n      </HvTooltip>\n    );\n  };\n\nexport default withTooltip;\n"],"names":["styles","truncate","overflow","textOverflow","whiteSpace","withTooltip","Component","label","placement","hideTooltip","tooltipProps","tooltipContainerProps","props","isHoverDisabled","setIsHoverDisabled","useState","open","setOpen","title","HvTypography","children","handleMouseEnter","evt","isHidden","handleMouseLeave","HvTooltip","style","disableHoverListener","disableFocusListener","disableTouchListener","onMouseEnter","onMouseLeave"],"mappings":";;;;AAIA,MAAMA,SAAS;AAAA,EACbC,UAAU;AAAA,IACRC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EACd;AACF;AAEA,MAAMC,cACJA,CACEC,WAEAC,QAAQ,IACRC,WACAC,aACAC,cACAC,0BAEDC,CAAU,UAAA;AACT,QAAM,CAACC,iBAAiBC,kBAAkB,IAAIC,SAAS,KAAK;AAC5D,QAAM,CAACC,MAAMC,OAAO,IAAIF,SAAS,KAAK;AAEhCG,QAAAA,4BAASC,cAAY;AAAA,IAAAC,UAAEb;AAAAA,EAAAA,CAAqB;AAElD,QAAMc,mBAAoBC,CAAQ,QAAA;AAC1BC,UAAAA,WAAWd,2CAAca;AAC/BR,uBAAmBS,QAAQ;AAC3BN,YAAQ,CAACM,QAAQ;AAAA,EAAA;AAGnB,QAAMC,mBAAmBA,MAAM;AAC7BV,uBAAmB,KAAK;AACxBG,YAAQ,KAAK;AAAA,EAAA;AAGf,6BACGQ,WAAS;AAAA,IACRC,OAAO;AAAA,MAAE,GAAG1B,OAAOC;AAAAA,IAAS;AAAA,IAC5B0B,sBAAsBd;AAAAA,IACtBe,sBAAoB;AAAA,IACpBC,sBAAoB;AAAA,IACpBX;AAAAA,IACAF;AAAAA,IACAR;AAAAA,IAAqB,GACjBE;AAAAA,IAAYU,8BAEhB,OAAA;AAAA,MAAA,GACMT;AAAAA,MACJmB,cAAcT;AAAAA,MACdU,cAAcP;AAAAA,MAAiBJ,8BAE9Bd,WAAS;AAAA,QAAA,GAAKM;AAAAA,MAAAA,CAAK;AAAA,IAAA,CAAI;AAAA,EAAA,CAEhB;AAEhB;AAEF,MAAA,gBAAeP;"}

package/dist/esm/hooks/useEnhancedEffect.js

@@ -0,0 +1,6 @@
+import { useLayoutEffect, useEffect } from "react";
+const useEnhancedEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+export {
+  useEnhancedEffect
+};
+//# sourceMappingURL=useEnhancedEffect.js.map

package/dist/esm/hooks/useEnhancedEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEnhancedEffect.js","sources":["../../../src/hooks/useEnhancedEffect.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from \"react\";\n\nexport const useEnhancedEffect =\n  typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n"],"names":["useEnhancedEffect","window","useLayoutEffect","useEffect"],"mappings":";AAEO,MAAMA,oBACX,OAAOC,WAAW,cAAcC,kBAAkBC;"}