@hitachivantara/uikit-react-core 5.39.3 → 5.40.0

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

@@ -0,0 +1,296 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useContext, useState, useCallback, useMemo, useEffect } from "react";
+import uniqueId from "lodash/uniqueId";
+import { wrapperTooltip } from "../../utils/wrapperTooltip.js";
+import { setId } from "../../utils/setId.js";
+import { useControlled } from "../../hooks/useControlled.js";
+import { useClasses } from "./Navigation.styles.js";
+import { staticClasses } from "./Navigation.styles.js";
+import { VerticalNavigationContext } from "../VerticalNavigationContext.js";
+import { getParentItemById } from "../NavigationSlider/utils/NavigationSlider.utils.js";
+import { NavigationPopupContainer } from "../NavigationPopup/NavigationPopupContainer.js";
+import { HvVerticalNavigationSlider } from "../NavigationSlider/NavigationSlider.js";
+import { HvVerticalNavigationTreeView } from "../TreeView/TreeView.js";
+import { HvVerticalNavigationTreeViewItem } from "../TreeView/TreeViewItem.js";
+const createListHierarchy = (items, id, classes, mouseEnterHandler, disableTooltip = false) => items.map((item) => {
+  const {
+    id: itemId,
+    label: itemLabel,
+    icon,
+    data: children,
+    selectable,
+    disabled,
+    href,
+    target
+  } = item;
+  const ItemText = wrapperTooltip(true, itemLabel, itemLabel);
+  const itemMouseEnterHandler = (event) => {
+    mouseEnterHandler?.(event, item);
+  };
+  return /* @__PURE__ */ jsx(
+    HvVerticalNavigationTreeViewItem,
+    {
+      id: setId(id, itemId),
+      className: classes?.listItem,
+      href,
+      target,
+      nodeId: itemId,
+      label: /* @__PURE__ */ jsx(ItemText, {}),
+      icon,
+      payload: item,
+      selectable,
+      disabled,
+      onMouseEnter: itemMouseEnterHandler,
+      disableTooltip,
+      children: children ? createListHierarchy(
+        children,
+        id,
+        classes,
+        mouseEnterHandler,
+        disableTooltip
+      ) : void 0
+    },
+    itemId
+  );
+});
+const getAllParents = (items) => {
+  const parents = items.filter(
+    (item) => item.data != null && item.data.length > 0
+  );
+  const childParents = parents.flatMap((item) => getAllParents(item.data));
+  return [...parents, ...childParents];
+};
+function pathToElement(data, targetId) {
+  const path = [];
+  if (data != null && data.length > 0) {
+    for (let i = 0; i !== data.length; ++i) {
+      const item = data[i];
+      if (item.id === targetId) {
+        path.push(item.id);
+        break;
+      }
+      const subPaths = pathToElement(item.data, targetId);
+      if (subPaths.length > 0) {
+        path.push(item.id);
+        path.push(...subPaths);
+        break;
+      }
+    }
+  }
+  return path;
+}
+const HvVerticalNavigationTree = ({
+  id,
+  className,
+  classes: classesProp,
+  data,
+  mode = "navigation",
+  collapsible = false,
+  expanded: expandedProp,
+  defaultExpanded,
+  onToggle,
+  selected: selectedProp,
+  defaultSelected,
+  onChange,
+  sliderForwardButtonAriaLabel = "Navigate to submenu",
+  ...others
+}) => {
+  const { classes, cx } = useClasses(classesProp);
+  const [selected, setSelected] = useControlled(selectedProp, defaultSelected);
+  const [expanded, setExpanded] = useControlled(expandedProp, () => {
+    if (defaultExpanded === true) {
+      return getAllParents(data).map((item) => item.id);
+    }
+    if (defaultExpanded === false) {
+      return [];
+    }
+    if (defaultExpanded == null) {
+      if (selected != null) {
+        const path = pathToElement(data, selected);
+        return path.slice(0, -1);
+      }
+      return [];
+    }
+    return defaultExpanded;
+  });
+  const {
+    isOpen,
+    useIcons,
+    slider,
+    parentItem,
+    setParentItem,
+    withParentData,
+    navigateToChildHandler,
+    setParentData,
+    setParentSelected
+  } = useContext(VerticalNavigationContext);
+  const [navigationPopup, setNavigationPopup] = useState(null);
+  const handleChange = useCallback(
+    (event, selectedId, selectedItem) => {
+      if (useIcons && !isOpen && selectedItem.data) {
+        const currentEventTarget = event.currentTarget;
+        setNavigationPopup((prevState) => {
+          return prevState?.anchorEl === currentEventTarget ? null : {
+            uniqueKey: uniqueId(),
+            anchorEl: currentEventTarget,
+            fixedMode: true,
+            data: selectedItem.data
+          };
+        });
+        event.stopPropagation();
+      } else {
+        setSelected(selectedId);
+        setExpanded((prevState) => {
+          if (!isOpen) {
+            return [...prevState, ...pathToElement(data, selectedId)];
+          }
+          return [...prevState];
+        });
+        setNavigationPopup(null);
+        if (onChange) {
+          onChange(event, selectedItem);
+        }
+      }
+    },
+    [onChange, setSelected, setExpanded, isOpen, useIcons, data]
+  );
+  const treeViewItemMouseEnterHandler = useCallback(
+    (event, item) => {
+      const isCollapsed = useIcons && !isOpen;
+      if (isCollapsed && item.data && !navigationPopup?.fixedMode) {
+        const currentEventTarget = event.currentTarget;
+        setNavigationPopup?.({
+          uniqueKey: uniqueId(),
+          anchorEl: currentEventTarget,
+          fixedMode: false,
+          data: item.data
+        });
+      } else if (isCollapsed && !item.data && !navigationPopup?.fixedMode) {
+        setNavigationPopup(null);
+      }
+    },
+    [isOpen, useIcons, navigationPopup]
+  );
+  const handleToggle = useCallback(
+    (event, newExpanded) => {
+      setExpanded(newExpanded);
+      if (onToggle) {
+        onToggle(event, newExpanded);
+      }
+    },
+    [onToggle, setExpanded]
+  );
+  const children = useMemo(
+    () => data && createListHierarchy(
+      data,
+      id,
+      classes,
+      treeViewItemMouseEnterHandler,
+      navigationPopup?.fixedMode
+    ),
+    [classes, data, id, navigationPopup, treeViewItemMouseEnterHandler]
+  );
+  useEffect(() => {
+    if (!isOpen) {
+      setNavigationPopup?.(null);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (setParentSelected)
+      setParentSelected(selected);
+  }, [selected, setSelected, setParentSelected]);
+  useEffect(() => {
+    if (setParentData)
+      setParentData(data);
+  }, [data, setParentData]);
+  useEffect(() => {
+    if (withParentData && selected && setParentItem && getParentItemById(withParentData, selected)) {
+      setParentItem(getParentItemById(withParentData, selected));
+    }
+  }, [withParentData, selected, setParentItem]);
+  const navigateToTargetHandler = (event, selectedItem) => {
+    handleChange(event, selectedItem.id, selectedItem);
+  };
+  const handleNavigationPopupClose = () => {
+    setNavigationPopup(null);
+  };
+  const handleStyledNavMouseLeave = () => {
+    if (useIcons && !isOpen && !navigationPopup?.fixedMode) {
+      setNavigationPopup(null);
+    }
+  };
+  const handleNavigationPopupMouseLeave = () => {
+    if (!navigationPopup?.fixedMode) {
+      handleNavigationPopupClose();
+    }
+  };
+  const handleNavigationPopupChange = (event, selectedItem) => {
+    handleChange(event, selectedItem.id, selectedItem);
+  };
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      id,
+      className: cx(
+        classes.root,
+        { [classes.collapsed]: !isOpen && !useIcons },
+        className
+      ),
+      onMouseLeave: handleStyledNavMouseLeave,
+      ...others,
+      children: slider ? /* @__PURE__ */ jsx(
+        HvVerticalNavigationSlider,
+        {
+          data: parentItem.data || withParentData,
+          selected,
+          onNavigateToTarget: navigateToTargetHandler,
+          onNavigateToChild: navigateToChildHandler,
+          forwardButtonAriaLabel: sliderForwardButtonAriaLabel
+        }
+      ) : /* @__PURE__ */ jsxs(
+        HvVerticalNavigationTreeView,
+        {
+          id: setId(id, "tree"),
+          className: classes.list,
+          selectable: true,
+          mode,
+          collapsible,
+          selected,
+          onChange: handleChange,
+          expanded,
+          onToggle: handleToggle,
+          children: [
+            useIcons && !isOpen && navigationPopup && /* @__PURE__ */ jsx(
+              NavigationPopupContainer,
+              {
+                anchorEl: navigationPopup.anchorEl,
+                onClose: handleNavigationPopupClose,
+                className: classes.navigationPopup,
+                children: /* @__PURE__ */ jsx(
+                  HvVerticalNavigationTree,
+                  {
+                    className: classes.popup,
+                    id: setId(id, "navigation-popup-tree"),
+                    collapsible: true,
+                    defaultExpanded: true,
+                    selected,
+                    data: navigationPopup.data,
+                    onChange: handleNavigationPopupChange,
+                    onMouseLeave: handleNavigationPopupMouseLeave
+                  }
+                )
+              },
+              navigationPopup.uniqueKey
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  HvVerticalNavigationTree,
+  staticClasses as verticalNavigationTreeClasses
+};
+//# sourceMappingURL=Navigation.js.map

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

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

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

@@ -0,0 +1,28 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses(
+  "HvVerticalNavigationTree",
+  {
+    root: {
+      display: "block",
+      background: theme.colors.atmo1,
+      overflowY: "auto"
+    },
+    list: {},
+    listItem: {},
+    collapsed: {
+      display: "none"
+    },
+    popup: {
+      boxShadow: "inset 5px 0 5px -3px rgb(65 65 65 / 12%)"
+    },
+    navigationPopup: {
+      boxShadow: "inset 5px 0 5px -3px rgb(65 65 65 / 12%)"
+    }
+  }
+);
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Navigation.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.styles.js","sources":["../../../../src/VerticalNavigation/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationTree\",\n  {\n    root: {\n      display: \"block\",\n      background: theme.colors.atmo1,\n\n      overflowY: \"auto\",\n    },\n    list: {},\n    listItem: {},\n    collapsed: {\n      display: \"none\",\n    },\n    popup: {\n      boxShadow: \"inset 5px 0 5px -3px rgb(65 65 65 / 12%)\",\n    },\n    navigationPopup: {\n      boxShadow: \"inset 5px 0 5px -3px rgb(65 65 65 / 12%)\",\n    },\n  }\n);\n"],"names":[],"mappings":";;AAIa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,YAAY,MAAM,OAAO;AAAA,MAEzB,WAAW;AAAA,IACb;AAAA,IACA,MAAM,CAAC;AAAA,IACP,UAAU,CAAC;AAAA,IACX,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,IACA,iBAAiB;AAAA,MACf,WAAW;AAAA,IACb;AAAA,EACF;AACF;"}

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

@@ -0,0 +1,25 @@
+import styled from "@emotion/styled";
+import { theme } from "@hitachivantara/uikit-styles";
+import { Popper } from "@mui/base";
+import { createClasses } from "../../utils/classes.js";
+const StyledPopper = styled(Popper)({
+  zIndex: theme.zIndices.popover
+});
+const { staticClasses, useClasses } = createClasses(
+  "HvVerticalNavigationPopup",
+  {
+    popup: {},
+    container: {
+      marginLeft: theme.spacing("xs")
+    },
+    popper: {
+      zIndex: theme.zIndices.popover
+    }
+  }
+);
+export {
+  StyledPopper,
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=NavigationPopup.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationPopup.styles.js","sources":["../../../../src/VerticalNavigation/NavigationPopup/NavigationPopup.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Popper } from \"@mui/base\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nconst StyledPopper = styled(Popper)({\n  zIndex: theme.zIndices.popover,\n});\n\nexport { StyledPopper };\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationPopup\",\n  {\n    popup: {},\n    container: {\n      marginLeft: theme.spacing(\"xs\"),\n    },\n    popper: {\n      zIndex: theme.zIndices.popover,\n    },\n  }\n);\n"],"names":[],"mappings":";;;;AAOM,MAAA,eAAe,OAAO,MAAM,EAAE;AAAA,EAClC,QAAQ,MAAM,SAAS;AACzB,CAAC;AAIY,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,OAAO,CAAC;AAAA,IACR,WAAW;AAAA,MACT,YAAY,MAAM,QAAQ,IAAI;AAAA,IAChC;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ,MAAM,SAAS;AAAA,IACzB;AAAA,EACF;AACF;"}

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

@@ -0,0 +1,23 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import { HvVerticalNavigation } from "../VerticalNavigation.js";
+import { useClasses, StyledPopper } from "./NavigationPopup.styles.js";
+import { staticClasses } from "./NavigationPopup.styles.js";
+const NavigationPopupContainer = ({
+  anchorEl,
+  onClose,
+  children,
+  classes: classesProp,
+  ...others
+}) => {
+  const { classes } = useClasses(classesProp);
+  const handleClickAway = () => {
+    onClose?.();
+  };
+  return /* @__PURE__ */ jsx(StyledPopper, { open: true, anchorEl, placement: "right-start", ...others, children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleClickAway, children: /* @__PURE__ */ jsx("div", { className: classes.container, children: /* @__PURE__ */ jsx(HvVerticalNavigation, { open: true, useIcons: true, children }) }) }) });
+};
+export {
+  NavigationPopupContainer,
+  staticClasses as verticalNavigationPopupClasses
+};
+//# sourceMappingURL=NavigationPopupContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationPopupContainer.js","sources":["../../../../src/VerticalNavigation/NavigationPopup/NavigationPopupContainer.tsx"],"sourcesContent":["import ClickAwayListener from \"@mui/material/ClickAwayListener\";\n\nimport { HvBaseProps } from \"../../types/generic\";\n\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { HvVerticalNavigation } from \"../VerticalNavigation\";\n\nimport {\n  StyledPopper,\n  staticClasses,\n  useClasses,\n} from \"./NavigationPopup.styles\";\n\nexport { staticClasses as verticalNavigationPopupClasses };\n\nexport type HvVerticalNavigationPopupClasses = ExtractNames<typeof useClasses>;\n\nexport interface NavigationPopupContainerProps extends HvBaseProps {\n  anchorEl?: HTMLElement | null;\n  onClose?: () => void;\n  classes?: HvVerticalNavigationPopupClasses;\n}\n\nexport const NavigationPopupContainer = ({\n  anchorEl,\n  onClose,\n  children,\n  classes: classesProp,\n  ...others\n}: NavigationPopupContainerProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const handleClickAway = () => {\n    onClose?.();\n  };\n\n  return (\n    <StyledPopper open anchorEl={anchorEl} placement=\"right-start\" {...others}>\n      <ClickAwayListener onClickAway={handleClickAway}>\n        <div className={classes.container}>\n          <HvVerticalNavigation open useIcons>\n            {children}\n          </HvVerticalNavigation>\n        </div>\n      </ClickAwayListener>\n    </StyledPopper>\n  );\n};\n"],"names":[],"mappings":";;;;;AAwBO,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACL,MAAqC;AACnC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,kBAAkB,MAAM;AAClB;EAAA;AAIV,SAAA,oBAAC,cAAa,EAAA,MAAI,MAAC,UAAoB,WAAU,eAAe,GAAG,QACjE,UAAC,oBAAA,mBAAA,EAAkB,aAAa,iBAC9B,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,WACtB,UAAA,oBAAC,sBAAqB,EAAA,MAAI,MAAC,UAAQ,MAChC,SAAA,CACH,EACF,CAAA,EAAA,CACF,EACF,CAAA;AAEJ;"}

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

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

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

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

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

@@ -0,0 +1,35 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses(
+  "HvVerticalNavigationSlider",
+  {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      borderLeft: `4px solid transparent`,
+      minHeight: "48px",
+      marginBottom: "8px",
+      "& > button": {
+        marginLeft: "auto"
+      }
+    },
+    listItemSelected: {
+      background: theme.colors.atmo3,
+      borderLeft: `4px solid ${theme.colors.secondary}`,
+      "& *": {
+        background: theme.colors.atmo3
+      }
+    },
+    listItemFocus: {
+      background: theme.colors.atmo3,
+      "& *": {
+        background: theme.colors.atmo3
+      }
+    }
+  }
+);
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=NavigationSlider.styles.js.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationSlider.utils.js","sources":["../../../../../src/VerticalNavigation/NavigationSlider/utils/NavigationSlider.utils.tsx"],"sourcesContent":["/**\n * Recursively searches in a collection the first element where the property matches the specified value.\n *\n * @param collection - Collection where the search will be performed\n * @param childrenPropName - The children property name where the recursive search will be performed\n * @param propName - The name of the property to be used on the search\n * @param propValue - The value of the property to be used on the search\n * @returns The element that matches the requirement or null if none is found\n */\nconst searchInCollection = (\n  collection,\n  childrenPropName,\n  propName,\n  propValue\n) => {\n  if (collection[propName] === propValue) {\n    return collection;\n  }\n\n  const items = collection[childrenPropName] || collection;\n\n  let foundItem = null;\n  for (let index = 0; foundItem === null && index < items.length; index += 1) {\n    foundItem = searchInCollection(\n      items[index],\n      childrenPropName,\n      propName,\n      propValue\n    );\n  }\n  return foundItem;\n};\n\n/**\n * Returns the navigation item with the specified id.\n *\n * @param navigationItems - The collection of navigation items.\n * @param navigationItemId - The id to be used on the search\n * @returns The navigation item with the specified id.\n */\nconst getNavigationItemById = (navigationItems, navigationItemId) => {\n  return searchInCollection(navigationItems, \"data\", \"id\", navigationItemId);\n};\n\n/**\n * Returns the parent item for the received item id.\n *\n * @param navigationItems - The collection of navigation items.\n * @param navigationItemId - The id to be used on the search\n * @returns The parent navigation item.\n */\nconst getParentItemById = (navigationItems, navigationItemId) => {\n  const parentId = getNavigationItemById(\n    navigationItems,\n    navigationItemId\n  )?.parent;\n  return getNavigationItemById(navigationItems, parentId);\n};\n\n/**\n * Fills the data structure with the parent id on each one of the nodes.\n *\n * @param navigationItems - The collection of navigation items.\n * @param parentItemId - The parent id to be added.\n * @returns The structure now filled with the parent id.\n */\nconst fillDataWithParentId = (navigationItems, parentItemId?) => {\n  return navigationItems.map((item) => {\n    if (item?.data?.length > 0) {\n      return {\n        ...item,\n        parent: parentItemId,\n        data: fillDataWithParentId(item.data, item.id),\n      };\n    }\n    return { ...item, parent: parentItemId };\n  });\n};\n\nexport { getNavigationItemById, getParentItemById, fillDataWithParentId };\n"],"names":[],"mappings":"AASA,MAAM,qBAAqB,CACzB,YACA,kBACA,UACA,cACG;AACC,MAAA,WAAW,QAAQ,MAAM,WAAW;AAC/B,WAAA;AAAA,EACT;AAEM,QAAA,QAAQ,WAAW,gBAAgB,KAAK;AAE9C,MAAI,YAAY;AACP,WAAA,QAAQ,GAAG,cAAc,QAAQ,QAAQ,MAAM,QAAQ,SAAS,GAAG;AAC9D,gBAAA;AAAA,MACV,MAAM,KAAK;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AACO,SAAA;AACT;AASM,MAAA,wBAAwB,CAAC,iBAAiB,qBAAqB;AACnE,SAAO,mBAAmB,iBAAiB,QAAQ,MAAM,gBAAgB;AAC3E;AASM,MAAA,oBAAoB,CAAC,iBAAiB,qBAAqB;AAC/D,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,EACC,GAAA;AACI,SAAA,sBAAsB,iBAAiB,QAAQ;AACxD;AASM,MAAA,uBAAuB,CAAC,iBAAiB,iBAAkB;AACxD,SAAA,gBAAgB,IAAI,CAAC,SAAS;AAC/B,QAAA,MAAM,MAAM,SAAS,GAAG;AACnB,aAAA;AAAA,QACL,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,MAAM,qBAAqB,KAAK,MAAM,KAAK,EAAE;AAAA,MAAA;AAAA,IAEjD;AACA,WAAO,EAAE,GAAG,MAAM,QAAQ,aAAa;AAAA,EAAA,CACxC;AACH;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconWrapper.js","sources":["../../../../../src/VerticalNavigation/TreeView/IconWrapper/IconWrapper.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"../../../Avatar\";\n\nimport { VerticalNavigationContext } from \"../../VerticalNavigationContext\";\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":[],"mappings":";;;;;;;AASO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,oBAAA,IAAwB,WAAW,yBAAyB;AAElE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC;AAAA,MACzC;AAAA,MAEA,UAAA,qBAAC,wBAAqB,qBACnB,UAAA;AAAA,QACC,aAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,iBAAgB;AAAA,YAChB,OAAO,EAAE,UAAU,OAAO;AAAA,YAEzB,UAAA,MAAM,UAAU,GAAG,CAAC;AAAA,UAAA;AAAA,QAAA,IAGvB;AAAA,QAGD,eAAe,CAAC,SACf,oBAAC,UAAS,EAAA,UAAS,MAAK,IAExB,uBAAuB,CAAC,UAAU,oBAAC,WAAU,CAAA,CAAA;AAAA,MAAA,GAEjD;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconWrapper.styles.js","sources":["../../../../../src/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":[],"mappings":";AAMa,MAAA,uBAAuB,OAAO,KAAK;AAAA,EAC9C,CAAC,EAAE,oBAAA,OAAsD;AAAA,IACvD,SAAS;AAAA,IAET,CAAC,qBAAqB,GAAG;AAAA,MACvB,YAAY,sBAAsB,SAAS;AAAA,IAC7C;AAAA,IAEA,CAAC,sBAAsB,GAAG;AAAA,MACxB,OAAO;AAAA,MACP,YAAY;AAAA,IACd;AAAA,EAAA;AAEJ;AAEO,MAAM,YAAY,OAAO,KAAK,EAAE,CAAE,CAAA;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipWrapper.js","sources":["../../../../../src/VerticalNavigation/TreeView/TooltipWrapper/TooltipWrapper.tsx"],"sourcesContent":["import { HvTooltip, HvTooltipPlacementType } from \"../../../Tooltip\";\nimport { HvTypography } from \"../../../Typography\";\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":[],"mappings":";;;AAUO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,MAA2B;AACzB,MAAI,aAAa;AAEb,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAQ,oBAAA,cAAA,EAAc,UAAM,MAAA,CAAA;AAAA,QAC5B;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACO,SAAA;AACT;"}