@hitachivantara/uikit-react-core 5.39.3 → 5.40.0

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

@@ -0,0 +1,133 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../../utils/focusUtils.js";
+import { createClasses } from "../../utils/classes.js";
+const selected = () => ({
+  background: theme.colors.atmo3,
+  borderLeft: `4px solid ${theme.colors.secondary}`,
+  "& *": {
+    background: theme.colors.atmo3
+  }
+});
+const hover = () => ({
+  background: theme.colors.containerBackgroundHover
+});
+const { staticClasses, useClasses } = createClasses(
+  "HvVerticalNavigationTreeViewItem",
+  {
+    node: {
+      listStyle: "none",
+      minHeight: "32px",
+      "&:not(:last-child)": {
+        marginBottom: "8px"
+      },
+      "&$collapsed": {
+        "&>$group": {
+          display: "none"
+        }
+      },
+      "&$expanded": {
+        "&>$group": {
+          display: "block"
+        }
+      },
+      "&$link": {
+        textDecoration: "none"
+      },
+      "&$hide": {
+        display: "none"
+      }
+    },
+    content: {
+      width: "100%",
+      display: "flex",
+      justifyContent: "flex-start",
+      alignItems: "center",
+      height: "32px",
+      borderLeft: `4px solid transparent`,
+      paddingRight: theme.space.xs,
+      "&$minimized": {
+        justifyContent: "center",
+        paddingRight: 0
+      },
+      "$expandable>&": {
+        fontWeight: 600
+      },
+      "$selected>&": selected(),
+      // hover
+      ":not($disabled>&):not($selected>&):hover": hover(),
+      ":not($disabled)$selected>&:hover": {},
+      // focus
+      ":not($disabled>&):not($selected>&):focus-visible": hover(),
+      ":not($disabled>&):not($selected>&).focus-visible": hover(),
+      "*:focus-visible $focused>&": {
+        ...outlineStyles
+      },
+      ".focus-visible $focused>&": {
+        ...outlineStyles
+      },
+      "$focused>&": {
+        ...hover()
+      },
+      "&[disabled], &:active": {
+        outline: "none"
+      },
+      "&:focus": {
+        outline: "none"
+      },
+      "&:focus-visible": {
+        ...outlineStyles
+      },
+      "&.focus-visible": {
+        ...outlineStyles
+      },
+      // cursor
+      cursor: "pointer",
+      "& *": {
+        cursor: "pointer"
+      },
+      "$disabled>&": {
+        cursor: "not-allowed",
+        "& *": {
+          cursor: "not-allowed"
+        }
+      }
+    },
+    link: {},
+    group: {
+      margin: "8px 0 0 0",
+      padding: 0
+    },
+    disabled: {},
+    expandable: {
+      fontWeight: 600
+    },
+    collapsed: {},
+    expanded: {},
+    selectable: {},
+    unselectable: {},
+    selected: {},
+    unselected: {},
+    focused: {},
+    minimized: {},
+    hide: {},
+    label: {
+      display: "flex",
+      flexGrow: 1,
+      maxWidth: "100%"
+    },
+    labelIcon: {
+      maxWidth: "calc(100% - 32px)"
+    },
+    labelExpandable: {
+      maxWidth: "calc(100% - 32px)",
+      "&$labelIcon": {
+        maxWidth: "calc(100% - 64px)"
+      }
+    }
+  }
+);
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=TreeViewItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeViewItem.styles.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nconst selected = () => ({\n  background: theme.colors.atmo3,\n  borderLeft: `4px solid ${theme.colors.secondary}`,\n  \"& *\": {\n    background: theme.colors.atmo3,\n  },\n});\n\nconst hover = () => ({\n  background: theme.colors.containerBackgroundHover,\n});\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationTreeViewItem\",\n  {\n    node: {\n      listStyle: \"none\",\n      minHeight: \"32px\",\n      \"&:not(:last-child)\": {\n        marginBottom: \"8px\",\n      },\n      \"&$collapsed\": {\n        \"&>$group\": {\n          display: \"none\",\n        },\n      },\n      \"&$expanded\": {\n        \"&>$group\": {\n          display: \"block\",\n        },\n      },\n      \"&$link\": {\n        textDecoration: \"none\",\n      },\n      \"&$hide\": {\n        display: \"none\",\n      },\n    },\n    content: {\n      width: \"100%\",\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      alignItems: \"center\",\n      height: \"32px\",\n      borderLeft: `4px solid transparent`,\n      paddingRight: theme.space.xs,\n      \"&$minimized\": {\n        justifyContent: \"center\",\n        paddingRight: 0,\n      },\n      \"$expandable>&\": {\n        fontWeight: 600,\n      },\n      \"$selected>&\": selected(),\n      // hover\n      \":not($disabled>&):not($selected>&):hover\": hover(),\n      \":not($disabled)$selected>&:hover\": {},\n\n      // focus\n      \":not($disabled>&):not($selected>&):focus-visible\": hover(),\n      \":not($disabled>&):not($selected>&).focus-visible\": hover(),\n\n      \"*:focus-visible $focused>&\": {\n        ...outlineStyles,\n      },\n\n      \".focus-visible $focused>&\": {\n        ...outlineStyles,\n      },\n      \"$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\n      \"$disabled>&\": {\n        cursor: \"not-allowed\",\n        \"& *\": {\n          cursor: \"not-allowed\",\n        },\n      },\n    },\n    link: {},\n    group: {\n      margin: \"8px 0 0 0\",\n      padding: 0,\n    },\n    disabled: {},\n    expandable: {\n      fontWeight: 600,\n    },\n    collapsed: {},\n    expanded: {},\n    selectable: {},\n    unselectable: {},\n    selected: {},\n    unselected: {},\n    focused: {},\n    minimized: {},\n    hide: {},\n    label: {\n      display: \"flex\",\n      flexGrow: 1,\n      maxWidth: \"100%\",\n    },\n    labelIcon: {\n      maxWidth: \"calc(100% - 32px)\",\n    },\n    labelExpandable: {\n      maxWidth: \"calc(100% - 32px)\",\n\n      \"&$labelIcon\": {\n        maxWidth: \"calc(100% - 64px)\",\n      },\n    },\n  }\n);\n"],"names":[],"mappings":";;;AAMA,MAAM,WAAW,OAAO;AAAA,EACtB,YAAY,MAAM,OAAO;AAAA,EACzB,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,EAC/C,OAAO;AAAA,IACL,YAAY,MAAM,OAAO;AAAA,EAC3B;AACF;AAEA,MAAM,QAAQ,OAAO;AAAA,EACnB,YAAY,MAAM,OAAO;AAC3B;AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,WAAW;AAAA,MACX,WAAW;AAAA,MACX,sBAAsB;AAAA,QACpB,cAAc;AAAA,MAChB;AAAA,MACA,eAAe;AAAA,QACb,YAAY;AAAA,UACV,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MACA,cAAc;AAAA,QACZ,YAAY;AAAA,UACV,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MACA,UAAU;AAAA,QACR,gBAAgB;AAAA,MAClB;AAAA,MACA,UAAU;AAAA,QACR,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,cAAc,MAAM,MAAM;AAAA,MAC1B,eAAe;AAAA,QACb,gBAAgB;AAAA,QAChB,cAAc;AAAA,MAChB;AAAA,MACA,iBAAiB;AAAA,QACf,YAAY;AAAA,MACd;AAAA,MACA,eAAe,SAAS;AAAA;AAAA,MAExB,4CAA4C,MAAM;AAAA,MAClD,oCAAoC,CAAC;AAAA;AAAA,MAGrC,oDAAoD,MAAM;AAAA,MAC1D,oDAAoD,MAAM;AAAA,MAE1D,8BAA8B;AAAA,QAC5B,GAAG;AAAA,MACL;AAAA,MAEA,6BAA6B;AAAA,QAC3B,GAAG;AAAA,MACL;AAAA,MACA,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,MACX;AAAA,MAEA,yBAAyB;AAAA,QACvB,SAAS;AAAA,MACX;AAAA,MAEA,WAAW;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MAEA,mBAAmB;AAAA,QACjB,GAAG;AAAA,MACL;AAAA,MAEA,mBAAmB;AAAA,QACjB,GAAG;AAAA,MACL;AAAA;AAAA,MAGA,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,MAEA,eAAe;AAAA,QACb,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,IACA,MAAM,CAAC;AAAA,IACP,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,UAAU,CAAC;AAAA,IACX,YAAY;AAAA,MACV,YAAY;AAAA,IACd;AAAA,IACA,WAAW,CAAC;AAAA,IACZ,UAAU,CAAC;AAAA,IACX,YAAY,CAAC;AAAA,IACb,cAAc,CAAC;AAAA,IACf,UAAU,CAAC;AAAA,IACX,YAAY,CAAC;AAAA,IACb,SAAS,CAAC;AAAA,IACV,WAAW,CAAC;AAAA,IACZ,MAAM,CAAC;AAAA,IACP,OAAO;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MAEV,eAAe;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AACF;"}

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

@@ -0,0 +1,126 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { createContext, useState, useContext, useCallback, useMemo, useRef, useEffect } from "react";
+import { useEnhancedEffect } from "../../hooks/useEnhancedEffect.js";
+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: []
+});
+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 = descendants.findIndex(
+    (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 };
+}
+const 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/VerticalNavigation/TreeView/descendants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"descendants.js","sources":["../../../../src/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 {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { useEnhancedEffect } from \"../../hooks/useEnhancedEffect\";\n\ntype Item = {\n  element?;\n  index?;\n  [key: string]: unknown;\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    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\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 = descendants.findIndex(\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 const 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        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":[],"mappings":";;;AA0BA,SAAS,kBAAkB,OAAO,SAAS;AACzC,MAAI,QAAQ;AACR,MAAA,MAAM,MAAM,SAAS;AAEzB,SAAO,SAAS,KAAK;AACnB,UAAM,SAAS,KAAK,OAAO,QAAQ,OAAO,CAAC;AAE3C,QAAI,MAAM,MAAM,EAAE,YAAY,SAAS;AAC9B,aAAA;AAAA,IACT;AAGE,QAAA,MAAM,MAAM,EAAE,QAAQ,wBAAwB,OAAO,KACrD,KAAK,6BACL;AACA,YAAM,SAAS;AAAA,IAAA,OACV;AACL,cAAQ,SAAS;AAAA,IACnB;AAAA,EACF;AAEO,SAAA;AACT;AAEA,MAAM,oBAAoB,cAAsC;AAAA,EAC9D,OAAO;AAAA,EACP,aAAa,CAAC;AAChB,CAAC;AAUD,SAAS,YAAY,OAAO;AACpB,QAAA,MAAM,OAAO,IAAI;AACvB,YAAU,MAAM;AACd,QAAI,UAAU;AAAA,EAAA,GACb,CAAC,KAAK,CAAC;AACV,SAAO,IAAI;AACb;AAEA,MAAM,OAAO,MAAM;AAAC;AAsBb,SAAS,cAAc,YAAY;AACxC,QAAM,CAAG,EAAA,WAAW,IAAI;AAClB,QAAA;AAAA,IACJ,qBAAqB;AAAA,IACrB,uBAAuB;AAAA,IACvB,cAAc,CAAC;AAAA,IACf,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA,IACN,WAAW,iBAAiB;AAOhC,QAAM,QAAQ,YAAY;AAAA,IACxB,CAAC,SAAS,KAAK,YAAY,WAAW;AAAA,EAAA;AAGlC,QAAA,sBAAqC,YAAY,WAAW;AAMlE,QAAM,6BAA6B,YAAY;AAAA,IAC7C,CAAC,eAAe,aAAa;AAEzB,aAAA,uBAAuB,oBAAoB,QAAQ;AAAA,IAIvD;AAAA,EAAA;AAIF,oBAAkB,MAAM;AACtB,QAAI,WAAW,SAAS;AACH,yBAAA;AAAA,QACjB,GAAG;AAAA,QACH;AAAA,MAAA,CACD;AACD,aAAO,MAAM;AACX,6BAAqB,WAAW,OAAO;AAAA,MAAA;AAAA,IAE3C;AACA,gBAAY,CAAE,CAAA;AAEP,WAAA;AAAA,EAAA,GACN;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA,EAAE,UAAU,OAAO;AAC5B;AAEa,MAAA,qBAAqB,CAAC,UAAmC;AACpE,QAAM,EAAE,UAAU,IAAI,MAAA,IAAU;AAEhC,QAAM,CAAC,OAAO,GAAG,IAAI,SAAiB,CAAE,CAAA;AAExC,QAAM,qBAAqB,YAAY,CAAC,EAAE,SAAS,GAAG,YAAY;AAChE,QAAI,CAAC,aAAa;AACZ,UAAA;AACA,UAAA,SAAS,WAAW,GAAG;AAElB,eAAA;AAAA,UACL;AAAA,YACE,GAAG;AAAA,YACH;AAAA,YACA,OAAO;AAAA,UACT;AAAA,QAAA;AAAA,MAEJ;AAEM,YAAA,QAAQ,kBAAkB,UAAU,OAAO;AAEjD,UAAI,SAAS,KAAK,KAAK,SAAS,KAAK,EAAE,YAAY,SAAS;AAE/C,mBAAA;AAAA,MAAA,OACN;AAcL,cAAM,UAAU;AAAA,UACd,GAAG;AAAA,UACH;AAAA,UACA;AAAA,QAAA;AAIF,mBAAW,SAAS;AACX,iBAAA,OAAO,OAAO,GAAG,OAAO;AAAA,MACnC;AACS,eAAA,QAAQ,CAAC,MAAM,aAAa;AACnC,aAAK,QAAQ;AAAA,MAAA,CACd;AACM,aAAA;AAAA,IAAA,CACR;AAAA,EACH,GAAG,CAAE,CAAA;AAEC,QAAA,uBAAuB,YAAY,CAAC,YAAkB;AAC1D;AAAA,MAAI,CAAC,aACH,SAAS,OAAO,CAAC,SAAe,YAAY,KAAK,OAAO;AAAA,IAAA;AAAA,EAE5D,GAAG,CAAE,CAAA;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,IAAA;AAAA,IAEF,CAAC,OAAO,oBAAoB,sBAAsB,IAAI,KAAK;AAAA,EAAA;AAG7D,SACG,oBAAA,kBAAkB,UAAlB,EAA2B,OACzB,SACH,CAAA;AAEJ;"}

package/dist/esm/VerticalNavigation/VerticalNavigation.js

@@ -0,0 +1,108 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useState, useMemo, useEffect, useCallback } from "react";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { VerticalNavigationContext } from "./VerticalNavigationContext.js";
+import { hasChildNavigationItems } from "./utils/VerticalNavigation.utils.js";
+import { useClasses } from "./VerticalNavigation.styles.js";
+import { staticClasses } from "./VerticalNavigation.styles.js";
+import { fillDataWithParentId, getParentItemById, getNavigationItemById } from "./NavigationSlider/utils/NavigationSlider.utils.js";
+const HvVerticalNavigation = (props) => {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    children,
+    open = true,
+    slider = false,
+    useIcons = false,
+    ...others
+  } = useDefaultProps("HvVerticalNavigation", props);
+  const { classes, cx } = useClasses(classesProp);
+  const [parentData, setParentData] = useState([]);
+  const [parentSelected, setParentSelected] = useState();
+  const [headerTitle, setHeaderTitle] = useState();
+  const withParentData = useMemo(
+    () => fillDataWithParentId(parentData),
+    [parentData]
+  );
+  const initialParentItem = useMemo(
+    () => getParentItemById(withParentData, parentSelected),
+    [withParentData, parentSelected]
+  );
+  const [parentItem, setParentItem] = useState(initialParentItem);
+  const hasAnyChildWithData = useMemo(
+    () => hasChildNavigationItems(parentData),
+    [parentData]
+  );
+  useEffect(
+    () => setHeaderTitle(parentItem?.label),
+    [parentItem, setParentItem]
+  );
+  const navigateToParentHandler = useCallback(() => {
+    setParentItem(getParentItemById(withParentData, parentItem.id));
+  }, [parentItem, setParentItem, withParentData]);
+  const navigateToChildHandler = useCallback(
+    (event, item) => {
+      setParentItem(getNavigationItemById(withParentData, item.id));
+      event.stopPropagation();
+    },
+    [setParentItem, withParentData]
+  );
+  const value = useMemo(
+    () => ({
+      isOpen: open,
+      useIcons,
+      slider,
+      headerTitle,
+      setHeaderTitle,
+      parentItem,
+      setParentItem,
+      withParentData,
+      navigateToChildHandler,
+      navigateToParentHandler,
+      parentData,
+      setParentData,
+      parentSelected,
+      setParentSelected,
+      hasAnyChildWithData
+    }),
+    [
+      open,
+      useIcons,
+      slider,
+      headerTitle,
+      setHeaderTitle,
+      parentItem,
+      setParentItem,
+      withParentData,
+      navigateToChildHandler,
+      navigateToParentHandler,
+      hasAnyChildWithData,
+      parentData,
+      parentSelected
+    ]
+  );
+  const content = /* @__PURE__ */ jsx(VerticalNavigationContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      className: cx(
+        classes.root,
+        {
+          [classes.collapsed]: !open,
+          [classes.slider]: slider,
+          [classes.childData]: hasAnyChildWithData
+        },
+        className
+      ),
+      ...others,
+      children
+    }
+  ) });
+  return content;
+};
+export {
+  HvVerticalNavigation,
+  staticClasses as verticalNavigationClasses
+};
+//# sourceMappingURL=VerticalNavigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNavigation.js","sources":["../../../src/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { ExtractNames } from \"../utils/classes\";\n\nimport {\n  VerticalNavigationContext,\n  NavigationData,\n} from \"./VerticalNavigationContext\";\nimport {\n  fillDataWithParentId,\n  getNavigationItemById,\n  getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\n\nimport { staticClasses, useClasses } from \"./VerticalNavigation.styles\";\n\nexport { staticClasses as verticalNavigationClasses };\n\nexport type HvVerticalNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface 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   * @deprecated - `useIcons` property should be used instead.\n   */\n  collapsedMode?: HvVerticalNavigationMode;\n  /**\n   * Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false.\n   */\n  slider?: boolean;\n  /**\n   * The content inside the actions container.\n   */\n  children?: React.ReactNode;\n  /**\n   * Boolean to determine if icons should be displayed in the navigation menu.\n   * When `true` a icon will always be displayed, if no icon is provided the first letter of the label will be\n   * displayed inside an Avatar component.\n   * When `false` no icons will be shown, even if an icon is provided.\n   */\n  useIcons?: boolean;\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 * Although both the hierarchically organized data and the visual style resemble 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 = (props: HvVerticalNavigationProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n\n    children,\n\n    open = true,\n\n    slider = false,\n\n    useIcons = false,\n\n    ...others\n  } = useDefaultProps(\"HvVerticalNavigation\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const [parentData, setParentData] = useState<NavigationData[]>([]);\n\n  const [parentSelected, setParentSelected] = useState();\n\n  const [headerTitle, setHeaderTitle] = useState<string | undefined>();\n\n  // navigationSlider\n  const withParentData = useMemo(\n    () => fillDataWithParentId(parentData),\n    [parentData]\n  );\n\n  const initialParentItem = useMemo(\n    () => getParentItemById(withParentData, parentSelected),\n    [withParentData, parentSelected]\n  );\n\n  const [parentItem, setParentItem] = useState(initialParentItem);\n\n  const hasAnyChildWithData = useMemo(\n    () => hasChildNavigationItems(parentData),\n    [parentData]\n  );\n\n  useEffect(\n    () => setHeaderTitle(parentItem?.label),\n    [parentItem, setParentItem]\n  );\n\n  const navigateToParentHandler = useCallback(() => {\n    setParentItem(getParentItemById(withParentData, parentItem.id));\n  }, [parentItem, setParentItem, withParentData]);\n\n  const navigateToChildHandler = useCallback(\n    (event, item) => {\n      setParentItem(getNavigationItemById(withParentData, item.id));\n      event.stopPropagation();\n    },\n    [setParentItem, withParentData]\n  );\n\n  const value = useMemo(\n    () => ({\n      isOpen: open,\n      useIcons,\n      slider,\n      headerTitle,\n      setHeaderTitle,\n\n      parentItem,\n      setParentItem,\n      withParentData,\n      navigateToChildHandler,\n      navigateToParentHandler,\n\n      parentData,\n      setParentData,\n      parentSelected,\n      setParentSelected,\n      hasAnyChildWithData,\n    }),\n    [\n      open,\n      useIcons,\n      slider,\n      headerTitle,\n      setHeaderTitle,\n      parentItem,\n      setParentItem,\n      withParentData,\n      navigateToChildHandler,\n      navigateToParentHandler,\n      hasAnyChildWithData,\n      parentData,\n      parentSelected,\n    ]\n  );\n\n  const content = (\n    <VerticalNavigationContext.Provider value={value}>\n      <div\n        id={id}\n        className={cx(\n          classes.root,\n          {\n            [classes.collapsed]: !open,\n            [classes.slider]: slider,\n            [classes.childData]: hasAnyChildWithData,\n          },\n          className\n        )}\n        {...others}\n      >\n        {children}\n      </div>\n    </VerticalNavigationContext.Provider>\n  );\n\n  return content;\n};\n\nexport type HvVerticalNavigationMode = \"icon\" | \"simple\";\n\nexport type HvVerticalNavigationPosition =\n  | \"static\"\n  | \"relative\"\n  | \"fixed\"\n  | \"absolute\";\n"],"names":[],"mappings":";;;;;;;;AA+Ea,MAAA,uBAAuB,CAAC,UAAqC;AAClE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IAET;AAAA,IAEA,OAAO;AAAA,IAEP,SAAS;AAAA,IAET,WAAW;AAAA,IAEX,GAAG;AAAA,EAAA,IACD,gBAAgB,wBAAwB,KAAK;AACjD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,YAAY,aAAa,IAAI,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS;AAErD,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B;AAGnE,QAAM,iBAAiB;AAAA,IACrB,MAAM,qBAAqB,UAAU;AAAA,IACrC,CAAC,UAAU;AAAA,EAAA;AAGb,QAAM,oBAAoB;AAAA,IACxB,MAAM,kBAAkB,gBAAgB,cAAc;AAAA,IACtD,CAAC,gBAAgB,cAAc;AAAA,EAAA;AAGjC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,iBAAiB;AAE9D,QAAM,sBAAsB;AAAA,IAC1B,MAAM,wBAAwB,UAAU;AAAA,IACxC,CAAC,UAAU;AAAA,EAAA;AAGb;AAAA,IACE,MAAM,eAAe,YAAY,KAAK;AAAA,IACtC,CAAC,YAAY,aAAa;AAAA,EAAA;AAGtB,QAAA,0BAA0B,YAAY,MAAM;AAChD,kBAAc,kBAAkB,gBAAgB,WAAW,EAAE,CAAC;AAAA,EAC7D,GAAA,CAAC,YAAY,eAAe,cAAc,CAAC;AAE9C,QAAM,yBAAyB;AAAA,IAC7B,CAAC,OAAO,SAAS;AACf,oBAAc,sBAAsB,gBAAgB,KAAK,EAAE,CAAC;AAC5D,YAAM,gBAAgB;AAAA,IACxB;AAAA,IACA,CAAC,eAAe,cAAc;AAAA,EAAA;AAGhC,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,UACJ,oBAAC,0BAA0B,UAA1B,EAAmC,OAClC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,UACtB,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,SAAS,GAAG;AAAA,QACvB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAEL,EAAA,CAAA;AAGK,SAAA;AACT;"}

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

@@ -0,0 +1,50 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses(
+  "HvVerticalNavigation",
+  {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "flex-start",
+      width: "220px",
+      background: theme.colors.atmo1,
+      boxShadow: theme.colors.shadow,
+      clipPath: "inset(0px -12px 0px 0px)",
+      "& > :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")
+      }
+    },
+    collapsed: {
+      width: "56px",
+      "&$childData": {
+        width: "66px"
+      },
+      "& > :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")
+      }
+    },
+    slider: {
+      "& > div:first-of-type": {
+        borderBottom: `3px solid ${theme.colors.atmo2}`
+      }
+    },
+    childData: {}
+  }
+);
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=VerticalNavigation.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNavigation.styles.js","sources":["../../../src/VerticalNavigation/VerticalNavigation.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigation\",\n  {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      justifyContent: \"flex-start\",\n\n      width: \"220px\",\n\n      background: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      clipPath: \"inset(0px -12px 0px 0px)\",\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    collapsed: {\n      width: \"56px\",\n      \"&$childData\": {\n        width: \"66px\",\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    slider: {\n      \"& > div:first-of-type\": {\n        borderBottom: `3px solid ${theme.colors.atmo2}`,\n      },\n    },\n\n    childData: {},\n  }\n);\n"],"names":[],"mappings":";;AAIa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,eAAe;AAAA,MACf,gBAAgB;AAAA,MAEhB,OAAO;AAAA,MAEP,YAAY,MAAM,OAAO;AAAA,MACzB,WAAW,MAAM,OAAO;AAAA,MACxB,UAAU;AAAA,MAEV,mBAAmB;AAAA,QACjB,SAAS,MAAM,MAAM;AAAA,MACvB;AAAA,MACA,+BAA+B;AAAA,QAC7B,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,QAC1C,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,MAEA,uCAAuC;AAAA,QACrC,WAAW;AAAA,QACX,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACT,OAAO;AAAA,MACP,eAAe;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,uCAAuC;AAAA,QACrC,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,MAEA,+BAA+B;AAAA,QAC7B,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,IACF;AAAA,IAEA,QAAQ;AAAA,MACN,yBAAyB;AAAA,QACvB,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,MAC/C;AAAA,IACF;AAAA,IAEA,WAAW,CAAC;AAAA,EACd;AACF;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNavigationContext.js","sources":["../../../src/VerticalNavigation/VerticalNavigationContext.tsx"],"sourcesContent":["import { createContext, ComponentProps } from \"react\";\n\nexport type NavigationData<T extends React.ElementType = \"a\"> =\n  ComponentProps<T> &\n    Record<string, any> & {\n      /** The id to be applied to the root element. */\n      id: string;\n      /** The label to be rendered on the menu item. */\n      label: string;\n      /** The icon to be rendered. */\n      icon?: React.ReactNode;\n      /** The Data children subset. */\n      data?: NavigationData<T>[];\n      /** Whether the item is disabled and not interactive. */\n      disabled?: boolean;\n      /** Whether the item has a selected state. */\n      selectable?: boolean;\n    };\n\ninterface VerticalNavigationContextValue {\n  isOpen: boolean;\n  useIcons: boolean;\n  slider?: boolean;\n  headerTitle?: string;\n  setHeaderTitle?: React.Dispatch<React.SetStateAction<string | undefined>>;\n\n  parentItem?;\n  setParentItem?: React.Dispatch<React.SetStateAction<any>>;\n  withParentData?;\n  navigateToChildHandler?: (event, item) => void;\n  navigateToParentHandler?: () => void;\n\n  parentData?: NavigationData[];\n  setParentData?: React.Dispatch<React.SetStateAction<any>>;\n  parentSelected?;\n  setParentSelected?: React.Dispatch<React.SetStateAction<any>>;\n\n  hasAnyChildWithData?: boolean;\n}\n\nconst VerticalNavigationContext = createContext<VerticalNavigationContextValue>(\n  {\n    isOpen: true,\n    useIcons: false,\n    slider: false,\n  }\n);\n\nexport { VerticalNavigationContext };\n"],"names":[],"mappings":";AAwCA,MAAM,4BAA4B;AAAA,EAChC;AAAA,IACE,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AACF;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNavigation.utils.js","sources":["../../../../src/VerticalNavigation/utils/VerticalNavigation.utils.tsx"],"sourcesContent":["import { NavigationData } from \"../VerticalNavigationContext\";\n\n/**\n * Checks if there are any sub items in the NavigationItem data structure.\n *\n * @param data - The collection of navigation items.\n * @returns `true` if there is at least one sub item in the structure, `false` otherwise.\n */\nconst hasChildNavigationItems = (data: NavigationData[]) => {\n  return data.some((item) => item.data && item.data.length > 0);\n};\n\nexport { hasChildNavigationItems };\n"],"names":[],"mappings":"AAQM,MAAA,0BAA0B,CAAC,SAA2B;AACnD,SAAA,KAAK,KAAK,CAAC,SAAS,KAAK,QAAQ,KAAK,KAAK,SAAS,CAAC;AAC9D;"}

package/dist/esm/hocs/withTooltip.js

@@ -1,7 +1,7 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { useState } from "react";
-import { HvTooltip } from "../components/Tooltip/Tooltip.js";
-import { HvTypography } from "../components/Typography/Typography.js";
+import { HvTooltip } from "../Tooltip/Tooltip.js";
+import { HvTypography } from "../Typography/Typography.js";
 const styles = {
   truncate: {
     overflow: "hidden",

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

@@ -1 +1 @@
-{"version":3,"file":"withTooltip.js","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport {\n  HvTooltip,\n  HvTooltipPlacementType,\n  HvTooltipProps,\n} from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\n\nconst styles: { truncate: React.CSSProperties } = {\n  truncate: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n};\n\nexport const withTooltip =\n  (\n    Component: React.FunctionComponent,\n    // eslint-disable-next-line @typescript-eslint/default-param-last\n    label = \"\",\n    placement: HvTooltipPlacementType,\n    hideTooltip?: (event: React.MouseEvent<HTMLDivElement>) => boolean,\n    tooltipProps?: Partial<HvTooltipProps>,\n    tooltipContainerProps?: HvBaseProps\n  ) =>\n  (props) => {\n    const [isHoverDisabled, setIsHoverDisabled] = useState<boolean | undefined>(\n      false\n    );\n    const [open, setOpen] = useState<boolean>(false);\n\n    const title = <HvTypography>{label}</HvTypography>;\n\n    const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n      const isHidden = hideTooltip?.(event);\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"],"names":[],"mappings":";;;;AAUA,MAAM,SAA4C;AAAA,EAChD,UAAU;AAAA,IACR,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACF;AAEa,MAAA,cACX,CACE,WAEA,QAAQ,IACR,WACA,aACA,cACA,0BAEF,CAAC,UAAU;AACH,QAAA,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,EAAA;AAEF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAEzC,QAAA,QAAS,oBAAA,cAAA,EAAc,UAAM,MAAA,CAAA;AAE7B,QAAA,mBAAmB,CAAC,UAA4C;AAC9D,UAAA,WAAW,cAAc,KAAK;AACpC,uBAAmB,QAAQ;AAC3B,YAAQ,CAAC,QAAQ;AAAA,EAAA;AAGnB,QAAM,mBAAmB,MAAM;AAC7B,uBAAmB,KAAK;AACxB,YAAQ,KAAK;AAAA,EAAA;AAIb,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,GAAG,OAAO,SAAS;AAAA,MAC5B,sBAAsB;AAAA,MACtB,sBAAoB;AAAA,MACpB,sBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,cAAc;AAAA,UACd,cAAc;AAAA,UAEd,UAAA,oBAAC,WAAW,EAAA,GAAG,MAAO,CAAA;AAAA,QAAA;AAAA,MACxB;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"withTooltip.js","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { HvTypography } from \"../Typography\";\nimport { HvTooltip, HvTooltipPlacementType, HvTooltipProps } from \"../Tooltip\";\nimport { HvBaseProps } from \"../types/generic\";\n\nconst styles: { truncate: React.CSSProperties } = {\n  truncate: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n};\n\nexport const withTooltip =\n  (\n    Component: React.FunctionComponent,\n    // eslint-disable-next-line @typescript-eslint/default-param-last\n    label = \"\",\n    placement: HvTooltipPlacementType,\n    hideTooltip?: (event: React.MouseEvent<HTMLDivElement>) => boolean,\n    tooltipProps?: Partial<HvTooltipProps>,\n    tooltipContainerProps?: HvBaseProps\n  ) =>\n  (props) => {\n    const [isHoverDisabled, setIsHoverDisabled] = useState<boolean | undefined>(\n      false\n    );\n    const [open, setOpen] = useState<boolean>(false);\n\n    const title = <HvTypography>{label}</HvTypography>;\n\n    const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n      const isHidden = hideTooltip?.(event);\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"],"names":[],"mappings":";;;;AAMA,MAAM,SAA4C;AAAA,EAChD,UAAU;AAAA,IACR,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACF;AAEa,MAAA,cACX,CACE,WAEA,QAAQ,IACR,WACA,aACA,cACA,0BAEF,CAAC,UAAU;AACH,QAAA,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,EAAA;AAEF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAEzC,QAAA,QAAS,oBAAA,cAAA,EAAc,UAAM,MAAA,CAAA;AAE7B,QAAA,mBAAmB,CAAC,UAA4C;AAC9D,UAAA,WAAW,cAAc,KAAK;AACpC,uBAAmB,QAAQ;AAC3B,YAAQ,CAAC,QAAQ;AAAA,EAAA;AAGnB,QAAM,mBAAmB,MAAM;AAC7B,uBAAmB,KAAK;AACxB,YAAQ,KAAK;AAAA,EAAA;AAIb,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,GAAG,OAAO,SAAS;AAAA,MAC5B,sBAAsB;AAAA,MACtB,sBAAoB;AAAA,MACpB,sBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,cAAc;AAAA,UACd,cAAc;AAAA,UAEd,UAAA,oBAAC,WAAW,EAAA,GAAG,MAAO,CAAA;AAAA,QAAA;AAAA,MACxB;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useCss.js","sources":["../../../src/hooks/useCss.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport { css as emotionCss, EmotionCache } from \"@emotion/css\";\nimport { serializeStyles, RegisteredCache } from \"@emotion/serialize\";\nimport { insertStyles, getRegisteredStyles } from \"@emotion/utils\";\n\nimport { useEmotionCache } from \"@core/hooks/useEmotionCache\";\n\ntype CSS = typeof emotionCss;\n\nfunction getRef(args: any[]) {\n  if (args.length !== 1) {\n    return { args, ref: undefined };\n  }\n\n  const [arg] = args;\n\n  if (!(arg instanceof Object)) {\n    return { args, ref: undefined };\n  }\n\n  if (!(\"ref\" in arg)) {\n    return { args, ref: undefined };\n  }\n\n  const { ref, ...argCopy } = arg;\n  return { args: [argCopy], ref };\n}\n\nconst cssFactory = (() => {\n  function merge(registered: RegisteredCache, css: CSS, className: string) {\n    const registeredStyles: string[] = [];\n\n    const rawClassName = getRegisteredStyles(\n      registered,\n      registeredStyles,\n      className\n    );\n\n    if (registeredStyles.length < 2) {\n      return className;\n    }\n\n    return rawClassName + css(registeredStyles);\n  }\n\n  function innerCssFactory(cache: EmotionCache) {\n    const css: CSS = (...styles: any) => {\n      const { ref, args } = getRef(styles);\n      const serialized = serializeStyles(args, cache.registered);\n      insertStyles(cache, serialized, false);\n      return `${cache.key}-${serialized.name}${\n        ref === undefined ? \"\" : ` ${ref}`\n      }`;\n    };\n\n    const cx = (...args: any) => merge(cache.registered, css, clsx(args));\n\n    return { css, cx };\n  }\n\n  return innerCssFactory;\n})();\n\nexport function useCss() {\n  const cache = useEmotionCache();\n  return useMemo(() => cssFactory(cache), [cache]);\n}\n"],"names":[],"mappings":";;;;;AAUA,SAAS,OAAO,MAAa;AACvB,MAAA,KAAK,WAAW,GAAG;AACd,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEM,QAAA,CAAC,GAAG,IAAI;AAEV,MAAA,EAAE,eAAe,SAAS;AACrB,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEI,MAAA,EAAE,SAAS,MAAM;AACZ,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEA,QAAM,EAAE,KAAK,GAAG,QAAA,IAAY;AAC5B,SAAO,EAAE,MAAM,CAAC,OAAO,GAAG,IAAI;AAChC;AAEA,MAAM,cAAc,MAAM;AACf,WAAA,MAAM,YAA6B,KAAU,WAAmB;AACvE,UAAM,mBAA6B,CAAA;AAEnC,UAAM,eAAe;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGE,QAAA,iBAAiB,SAAS,GAAG;AACxB,aAAA;AAAA,IACT;AAEO,WAAA,eAAe,IAAI,gBAAgB;AAAA,EAC5C;AAEA,WAAS,gBAAgB,OAAqB;AACtC,UAAA,MAAW,IAAI,WAAgB;AACnC,YAAM,EAAE,KAAK,KAAK,IAAI,OAAO,MAAM;AACnC,YAAM,aAAa,gBAAgB,MAAM,MAAM,UAAU;AAC5C,mBAAA,OAAO,YAAY,KAAK;AACrC,aAAO,GAAG,MAAM,GAAG,IAAI,WAAW,IAAI,GACpC,QAAQ,SAAY,KAAK,IAAI,GAAG,EAClC;AAAA,IAAA;AAGI,UAAA,KAAK,IAAI,SAAc,MAAM,MAAM,YAAY,KAAK,KAAK,IAAI,CAAC;AAE7D,WAAA,EAAE,KAAK;EAChB;AAEO,SAAA;AACT;AAEO,SAAS,SAAS;AACvB,QAAM,QAAQ;AACd,SAAO,QAAQ,MAAM,WAAW,KAAK,GAAG,CAAC,KAAK,CAAC;AACjD;"}
+{"version":3,"file":"useCss.js","sources":["../../../src/hooks/useCss.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport { css as emotionCss, EmotionCache } from \"@emotion/css\";\nimport { serializeStyles, RegisteredCache } from \"@emotion/serialize\";\nimport { insertStyles, getRegisteredStyles } from \"@emotion/utils\";\n\nimport { useEmotionCache } from \"./useEmotionCache\";\n\ntype CSS = typeof emotionCss;\n\nfunction getRef(args: any[]) {\n  if (args.length !== 1) {\n    return { args, ref: undefined };\n  }\n\n  const [arg] = args;\n\n  if (!(arg instanceof Object)) {\n    return { args, ref: undefined };\n  }\n\n  if (!(\"ref\" in arg)) {\n    return { args, ref: undefined };\n  }\n\n  const { ref, ...argCopy } = arg;\n  return { args: [argCopy], ref };\n}\n\nconst cssFactory = (() => {\n  function merge(registered: RegisteredCache, css: CSS, className: string) {\n    const registeredStyles: string[] = [];\n\n    const rawClassName = getRegisteredStyles(\n      registered,\n      registeredStyles,\n      className\n    );\n\n    if (registeredStyles.length < 2) {\n      return className;\n    }\n\n    return rawClassName + css(registeredStyles);\n  }\n\n  function innerCssFactory(cache: EmotionCache) {\n    const css: CSS = (...styles: any) => {\n      const { ref, args } = getRef(styles);\n      const serialized = serializeStyles(args, cache.registered);\n      insertStyles(cache, serialized, false);\n      return `${cache.key}-${serialized.name}${\n        ref === undefined ? \"\" : ` ${ref}`\n      }`;\n    };\n\n    const cx = (...args: any) => merge(cache.registered, css, clsx(args));\n\n    return { css, cx };\n  }\n\n  return innerCssFactory;\n})();\n\nexport function useCss() {\n  const cache = useEmotionCache();\n  return useMemo(() => cssFactory(cache), [cache]);\n}\n"],"names":[],"mappings":";;;;;AAUA,SAAS,OAAO,MAAa;AACvB,MAAA,KAAK,WAAW,GAAG;AACd,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEM,QAAA,CAAC,GAAG,IAAI;AAEV,MAAA,EAAE,eAAe,SAAS;AACrB,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEI,MAAA,EAAE,SAAS,MAAM;AACZ,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEA,QAAM,EAAE,KAAK,GAAG,QAAA,IAAY;AAC5B,SAAO,EAAE,MAAM,CAAC,OAAO,GAAG,IAAI;AAChC;AAEA,MAAM,cAAc,MAAM;AACf,WAAA,MAAM,YAA6B,KAAU,WAAmB;AACvE,UAAM,mBAA6B,CAAA;AAEnC,UAAM,eAAe;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGE,QAAA,iBAAiB,SAAS,GAAG;AACxB,aAAA;AAAA,IACT;AAEO,WAAA,eAAe,IAAI,gBAAgB;AAAA,EAC5C;AAEA,WAAS,gBAAgB,OAAqB;AACtC,UAAA,MAAW,IAAI,WAAgB;AACnC,YAAM,EAAE,KAAK,KAAK,IAAI,OAAO,MAAM;AACnC,YAAM,aAAa,gBAAgB,MAAM,MAAM,UAAU;AAC5C,mBAAA,OAAO,YAAY,KAAK;AACrC,aAAO,GAAG,MAAM,GAAG,IAAI,WAAW,IAAI,GACpC,QAAQ,SAAY,KAAK,IAAI,GAAG,EAClC;AAAA,IAAA;AAGI,UAAA,KAAK,IAAI,SAAc,MAAM,MAAM,YAAY,KAAK,KAAK,IAAI,CAAC;AAE7D,WAAA,EAAE,KAAK;EAChB;AAEO,SAAA;AACT;AAEO,SAAS,SAAS;AACvB,QAAM,QAAQ;AACd,SAAO,QAAQ,MAAM,WAAW,KAAK,GAAG,CAAC,KAAK,CAAC;AACjD;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useEmotionCache.js","sources":["../../../src/hooks/useEmotionCache.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { EmotionContext } from \"@core/providers/ThemeProvider\";\n\nexport function useEmotionCache() {\n  return useContext(EmotionContext).cache;\n}\n"],"names":[],"mappings":";;;;;AAIO,SAAS,kBAAkB;AACzB,SAAA,WAAW,cAAc,EAAE;AACpC;"}
+{"version":3,"file":"useEmotionCache.js","sources":["../../../src/hooks/useEmotionCache.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { EmotionContext } from \"../providers/ThemeProvider\";\n\nexport function useEmotionCache() {\n  return useContext(EmotionContext).cache;\n}\n"],"names":[],"mappings":";;;;;AAIO,SAAS,kBAAkB;AACzB,SAAA,WAAW,cAAc,EAAE;AACpC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useTheme.js","sources":["../../../src/hooks/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from \"react\";\nimport { HvTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport {\n  HvThemeContext,\n  HvThemeContextValue,\n} from \"@core/providers/ThemeProvider\";\n\nexport const useTheme = (): HvThemeContextValue & {\n  /** Colors of the currently active theme and mode */\n  colors?: HvTheme[\"colors\"][\"modes\"][\"mode\"];\n} => {\n  const context = useContext(HvThemeContext);\n\n  return useMemo(() => {\n    const { activeTheme, selectedMode } = context;\n    return { ...context, colors: activeTheme?.colors.modes?.[selectedMode] };\n  }, [context]);\n};\n"],"names":[],"mappings":";;;;;AAQO,MAAM,WAAW,MAGnB;AACG,QAAA,UAAU,WAAW,cAAc;AAEzC,SAAO,QAAQ,MAAM;AACb,UAAA,EAAE,aAAa,aAAiB,IAAA;AAC/B,WAAA,EAAE,GAAG,SAAS,QAAQ,aAAa,OAAO,QAAQ,YAAY;EAAE,GACtE,CAAC,OAAO,CAAC;AACd;"}
+{"version":3,"file":"useTheme.js","sources":["../../../src/hooks/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from \"react\";\nimport { HvTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport {\n  HvThemeContext,\n  HvThemeContextValue,\n} from \"../providers/ThemeProvider\";\n\nexport const useTheme = (): HvThemeContextValue & {\n  /** Colors of the currently active theme and mode */\n  colors?: HvTheme[\"colors\"][\"modes\"][\"mode\"];\n} => {\n  const context = useContext(HvThemeContext);\n\n  return useMemo(() => {\n    const { activeTheme, selectedMode } = context;\n    return { ...context, colors: activeTheme?.colors.modes?.[selectedMode] };\n  }, [context]);\n};\n"],"names":[],"mappings":";;;;;AAQO,MAAM,WAAW,MAGnB;AACG,QAAA,UAAU,WAAW,cAAc;AAEzC,SAAO,QAAQ,MAAM;AACb,UAAA,EAAE,aAAa,aAAiB,IAAA;AAC/B,WAAA,EAAE,GAAG,SAAS,QAAQ,aAAa,OAAO,QAAQ,YAAY;EAAE,GACtE,CAAC,OAAO,CAAC;AACd;"}

package/dist/esm/hooks/useWidth.js

@@ -1,5 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { useTheme, useMediaQuery } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 const useWidth = () => {
   const muiTheme = useTheme();
   const keys = Object.keys(theme.breakpoints.values).reverse();

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

@@ -1 +1 @@
-{"version":3,"file":"useWidth.js","sources":["../../../src/hooks/useWidth.ts"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Breakpoint, useMediaQuery, useTheme } from \"@mui/material\";\n\nexport const useWidth = () => {\n  const muiTheme = useTheme();\n  const keys = Object.keys(theme.breakpoints.values).reverse() as Breakpoint[];\n\n  return (\n    keys.reduce<Breakpoint | null>((output, key) => {\n      const matches = useMediaQuery(muiTheme.breakpoints.up(key));\n\n      return !output && matches ? key : output;\n    }, null) || \"xs\"\n  );\n};\n"],"names":[],"mappings":";;AAIO,MAAM,WAAW,MAAM;AAC5B,QAAM,WAAW;AACjB,QAAM,OAAO,OAAO,KAAK,MAAM,YAAY,MAAM,EAAE;AAEnD,SACE,KAAK,OAA0B,CAAC,QAAQ,QAAQ;AAC9C,UAAM,UAAU,cAAc,SAAS,YAAY,GAAG,GAAG,CAAC;AAEnD,WAAA,CAAC,UAAU,UAAU,MAAM;AAAA,EAAA,GACjC,IAAI,KAAK;AAEhB;"}
+{"version":3,"file":"useWidth.js","sources":["../../../src/hooks/useWidth.ts"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Breakpoint, useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nexport const useWidth = () => {\n  const muiTheme = useTheme();\n  const keys = Object.keys(theme.breakpoints.values).reverse() as Breakpoint[];\n\n  return (\n    keys.reduce<Breakpoint | null>((output, key) => {\n      const matches = useMediaQuery(muiTheme.breakpoints.up(key));\n\n      return !output && matches ? key : output;\n    }, null) || \"xs\"\n  );\n};\n"],"names":[],"mappings":";;;AAKO,MAAM,WAAW,MAAM;AAC5B,QAAM,WAAW;AACjB,QAAM,OAAO,OAAO,KAAK,MAAM,YAAY,MAAM,EAAE;AAEnD,SACE,KAAK,OAA0B,CAAC,QAAQ,QAAQ;AAC9C,UAAM,UAAU,cAAc,SAAS,YAAY,GAAG,GAAG,CAAC;AAEnD,WAAA,CAAC,UAAU,UAAU,MAAM;AAAA,EAAA,GACjC,IAAI,KAAK;AAEhB;"}