@hitachivantara/uikit-react-core 5.10.0 → 5.11.0

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalNavigation.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { StyledRoot } from \"./VerticalNavigation.styles\";\nimport verticalNavigationClasses, {\n  HvVerticalNavigationClasses,\n} from \"./verticalNavigationClasses\";\nimport { NavigationData, VerticalNavigationContext } from \".\";\nimport {\n  fillDataWithParentId,\n  getNavigationItemById,\n  getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\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 = ({\n  id,\n  className,\n  classes,\n\n  children,\n\n  open = true,\n\n  slider = false,\n\n  useIcons = false,\n\n  ...others\n}: HvVerticalNavigationProps) => {\n  if (others.collapsedMode) {\n    console.warn(\"`collaspedMode` is deprecated. Please use 'useIcons'.\");\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 = () => {\n    setParentItem(getParentItemById(withParentData, parentItem.id));\n  };\n\n  const navigateToChildHandler = (event, item) => {\n    setParentItem(getNavigationItemById(withParentData, item.id));\n    event.stopPropagation();\n  };\n\n  const value = useMemo(\n    () => ({\n      isOpen: open,\n      useIcons,\n      slider,\n      headerTitle,\n      setHeaderTitle,\n\n      parentItem,\n      withParentData,\n      navigateToChildHandler,\n      navigateToParentHandler,\n\n      parentData,\n      setParentData,\n      parentSelected,\n      setParentSelected,\n      hasAnyChildWithData,\n    }),\n    [\n      open,\n      useIcons,\n      slider,\n      headerTitle,\n      setHeaderTitle,\n      parentItem,\n      withParentData,\n      navigateToChildHandler,\n      navigateToParentHandler,\n      hasAnyChildWithData,\n    ]\n  );\n\n  const content = (\n    <VerticalNavigationContext.Provider value={value}>\n      <StyledRoot\n        id={id}\n        className={clsx(\n          className,\n          verticalNavigationClasses.root,\n          classes?.root,\n          !open && verticalNavigationClasses.collapsed,\n          slider && verticalNavigationClasses.slider,\n          classes?.collapsed\n        )}\n        hasAnyChildWithData={hasAnyChildWithData}\n        {...others}\n      >\n        {children}\n      </StyledRoot>\n    </VerticalNavigationContext.Provider>\n  );\n\n  return content;\n};\n\nexport type HvVerticalNavigationMode = \"icon\" | \"simple\";\n\nexport type HvVerticalNavigationPosition =\n  | \"static\"\n  | \"relative\"\n  | \"fixed\"\n  | \"absolute\";\n"],"names":["HvVerticalNavigation","id","className","classes","children","open","slider","useIcons","others","collapsedMode","console","warn","parentData","setParentData","useState","parentSelected","setParentSelected","headerTitle","setHeaderTitle","withParentData","useMemo","fillDataWithParentId","initialParentItem","getParentItemById","parentItem","setParentItem","hasAnyChildWithData","hasChildNavigationItems","label","navigateToParentHandler","navigateToChildHandler","event","item","getNavigationItemById","stopPropagation","value","isOpen","content","VerticalNavigationContext","Provider","StyledRoot","clsx","verticalNavigationClasses","root","collapsed"],"mappings":";;;;;;;;AAsEO,MAAMA,uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EAEAC;AAAAA,EAEAC,OAAO;AAAA,EAEPC,SAAS;AAAA,EAETC,WAAW;AAAA,EAEX,GAAGC;AACsB,MAAM;AAC/B,MAAIA,OAAOC,eAAe;AACxBC,YAAQC,KAAK,uDAAuD;AAAA,EACtE;AACA,QAAM,CAACC,YAAYC,aAAa,IAAIC,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,SAAU;AAEtD,QAAM,CAACG,aAAaC,cAAc,IAAIJ,SAA8B;AAG9DK,QAAAA,iBAAiBC,QACrB,MAAMC,qBAAqBT,UAAU,GACrC,CAACA,UAAU,CAAC;AAGRU,QAAAA,oBAAoBF,QACxB,MAAMG,kBAAkBJ,gBAAgBJ,cAAc,GACtD,CAACI,gBAAgBJ,cAAc,CAAC;AAGlC,QAAM,CAACS,YAAYC,aAAa,IAAIX,SAASQ,iBAAiB;AAExDI,QAAAA,sBAAsBN,QAC1B,MAAMO,wBAAwBf,UAAU,GACxC,CAACA,UAAU,CAAC;AAIZ,YAAA,MAAMM,eAAeM,yCAAYI,KAAK,GACtC,CAACJ,YAAYC,aAAa,CAAC;AAG7B,QAAMI,0BAA0BA,MAAM;AACpCJ,kBAAcF,kBAAkBJ,gBAAgBK,WAAWvB,EAAE,CAAC;AAAA,EAAA;AAG1D6B,QAAAA,yBAAyBA,CAACC,OAAOC,SAAS;AAC9CP,kBAAcQ,sBAAsBd,gBAAgBa,KAAK/B,EAAE,CAAC;AAC5D8B,UAAMG,gBAAiB;AAAA,EAAA;AAGnBC,QAAAA,QAAQf,QACZ,OAAO;AAAA,IACLgB,QAAQ/B;AAAAA,IACRE;AAAAA,IACAD;AAAAA,IACAW;AAAAA,IACAC;AAAAA,IAEAM;AAAAA,IACAL;AAAAA,IACAW;AAAAA,IACAD;AAAAA,IAEAjB;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAU;AAAAA,EAEF,IAAA,CACErB,MACAE,UACAD,QACAW,aACAC,gBACAM,YACAL,gBACAW,wBACAD,yBACAH,mBAAmB,CACpB;AAGGW,QAAAA,UACHC,oBAAAA,0BAA0BC,UAAQ;AAAA,IAACJ;AAAAA,IAAa/B,8BAC9CoC,YAAU;AAAA,MACTvC;AAAAA,MACAC,WAAWuC,KACTvC,WACAwC,0BAA0BC,MAC1BxC,mCAASwC,MACT,CAACtC,QAAQqC,0BAA0BE,WACnCtC,UAAUoC,0BAA0BpC,QACpCH,mCAASyC,SAAS;AAAA,MAEpBlB;AAAAA,MAAyC,GACrClB;AAAAA,MAAMJ;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGd;AAEMiC,SAAAA;AACT;"}
+{"version":3,"file":"VerticalNavigation.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { StyledRoot } from \"./VerticalNavigation.styles\";\nimport verticalNavigationClasses, {\n  HvVerticalNavigationClasses,\n} from \"./verticalNavigationClasses\";\nimport { NavigationData, VerticalNavigationContext } from \".\";\nimport {\n  fillDataWithParentId,\n  getNavigationItemById,\n  getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\n\nexport 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 = ({\n  id,\n  className,\n  classes,\n\n  children,\n\n  open = true,\n\n  slider = false,\n\n  useIcons = false,\n\n  ...others\n}: HvVerticalNavigationProps) => {\n  if (others.collapsedMode) {\n    console.warn(\"`collaspedMode` is deprecated. Please use 'useIcons'.\");\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 = () => {\n    setParentItem(getParentItemById(withParentData, parentItem.id));\n  };\n\n  const navigateToChildHandler = (event, item) => {\n    setParentItem(getNavigationItemById(withParentData, item.id));\n    event.stopPropagation();\n  };\n\n  const value = useMemo(\n    () => ({\n      isOpen: open,\n      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    ]\n  );\n\n  const content = (\n    <VerticalNavigationContext.Provider value={value}>\n      <StyledRoot\n        id={id}\n        className={clsx(\n          className,\n          verticalNavigationClasses.root,\n          classes?.root,\n          !open && verticalNavigationClasses.collapsed,\n          slider && verticalNavigationClasses.slider,\n          classes?.collapsed\n        )}\n        hasAnyChildWithData={hasAnyChildWithData}\n        {...others}\n      >\n        {children}\n      </StyledRoot>\n    </VerticalNavigationContext.Provider>\n  );\n\n  return content;\n};\n\nexport type HvVerticalNavigationMode = \"icon\" | \"simple\";\n\nexport type HvVerticalNavigationPosition =\n  | \"static\"\n  | \"relative\"\n  | \"fixed\"\n  | \"absolute\";\n"],"names":["HvVerticalNavigation","id","className","classes","children","open","slider","useIcons","others","collapsedMode","console","warn","parentData","setParentData","useState","parentSelected","setParentSelected","headerTitle","setHeaderTitle","withParentData","useMemo","fillDataWithParentId","initialParentItem","getParentItemById","parentItem","setParentItem","hasAnyChildWithData","hasChildNavigationItems","label","navigateToParentHandler","navigateToChildHandler","event","item","getNavigationItemById","stopPropagation","value","isOpen","content","VerticalNavigationContext","Provider","StyledRoot","clsx","verticalNavigationClasses","root","collapsed"],"mappings":";;;;;;;;AAsEO,MAAMA,uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EAEAC;AAAAA,EAEAC,OAAO;AAAA,EAEPC,SAAS;AAAA,EAETC,WAAW;AAAA,EAEX,GAAGC;AACsB,MAAM;AAC/B,MAAIA,OAAOC,eAAe;AACxBC,YAAQC,KAAK,uDAAuD;AAAA,EACtE;AACA,QAAM,CAACC,YAAYC,aAAa,IAAIC,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,SAAU;AAEtD,QAAM,CAACG,aAAaC,cAAc,IAAIJ,SAA8B;AAG9DK,QAAAA,iBAAiBC,QACrB,MAAMC,qBAAqBT,UAAU,GACrC,CAACA,UAAU,CAAC;AAGRU,QAAAA,oBAAoBF,QACxB,MAAMG,kBAAkBJ,gBAAgBJ,cAAc,GACtD,CAACI,gBAAgBJ,cAAc,CAAC;AAGlC,QAAM,CAACS,YAAYC,aAAa,IAAIX,SAASQ,iBAAiB;AAExDI,QAAAA,sBAAsBN,QAC1B,MAAMO,wBAAwBf,UAAU,GACxC,CAACA,UAAU,CAAC;AAIZ,YAAA,MAAMM,eAAeM,yCAAYI,KAAK,GACtC,CAACJ,YAAYC,aAAa,CAAC;AAG7B,QAAMI,0BAA0BA,MAAM;AACpCJ,kBAAcF,kBAAkBJ,gBAAgBK,WAAWvB,EAAE,CAAC;AAAA,EAAA;AAG1D6B,QAAAA,yBAAyBA,CAACC,OAAOC,SAAS;AAC9CP,kBAAcQ,sBAAsBd,gBAAgBa,KAAK/B,EAAE,CAAC;AAC5D8B,UAAMG,gBAAiB;AAAA,EAAA;AAGnBC,QAAAA,QAAQf,QACZ,OAAO;AAAA,IACLgB,QAAQ/B;AAAAA,IACRE;AAAAA,IACAD;AAAAA,IACAW;AAAAA,IACAC;AAAAA,IAEAM;AAAAA,IACAC;AAAAA,IACAN;AAAAA,IACAW;AAAAA,IACAD;AAAAA,IAEAjB;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAU;AAAAA,EAEF,IAAA,CACErB,MACAE,UACAD,QACAW,aACAC,gBACAM,YACAC,eACAN,gBACAW,wBACAD,yBACAH,mBAAmB,CACpB;AAGGW,QAAAA,UACHC,oBAAAA,0BAA0BC,UAAQ;AAAA,IAACJ;AAAAA,IAAa/B,8BAC9CoC,YAAU;AAAA,MACTvC;AAAAA,MACAC,WAAWuC,KACTvC,WACAwC,0BAA0BC,MAC1BxC,mCAASwC,MACT,CAACtC,QAAQqC,0BAA0BE,WACnCtC,UAAUoC,0BAA0BpC,QACpCH,mCAASyC,SAAS;AAAA,MAEpBlB;AAAAA,MAAyC,GACrClB;AAAAA,MAAMJ;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGd;AAEMiC,SAAAA;AACT;"}

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalNavigationContext.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigationContext.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport { NavigationData } from \".\";\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  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":["VerticalNavigationContext","createContext","isOpen","useIcons","slider"],"mappings":";AAuBA,MAAMA,4BAA4BC,cAChC;AAAA,EACEC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,QAAQ;AACV,CAAC;"}
+{"version":3,"file":"VerticalNavigationContext.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigationContext.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport { NavigationData } from \".\";\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":["VerticalNavigationContext","createContext","isOpen","useIcons","slider"],"mappings":";AAwBA,MAAMA,4BAA4BC,cAChC;AAAA,EACEC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,QAAQ;AACV,CAAC;"}

package/dist/esm/hooks/useUniqueId.js

@@ -1,6 +1,6 @@
-import { useState } from "react";
+import { useMemo } from "react";
 import uniqueId from "lodash/uniqueId";
-const useUniqueId = (id, idPrefix) => useState(id || uniqueId(idPrefix))[0];
+const useUniqueId = (id, idPrefix) => useMemo(() => id || uniqueId(idPrefix), [id, idPrefix]);
 export {
   useUniqueId as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useUniqueId.js","sources":["../../../src/hooks/useUniqueId.ts"],"sourcesContent":["import { useState } from \"react\";\nimport uniqueId from \"lodash/uniqueId\";\n\nexport default (id, idPrefix) => useState(id || uniqueId(idPrefix))[0];\n"],"names":["id","idPrefix","useState","uniqueId"],"mappings":";;AAGA,MAAA,cAAe,CAACA,IAAIC,aAAaC,SAASF,MAAMG,SAASF,QAAQ,CAAC,EAAE,CAAC;"}
+{"version":3,"file":"useUniqueId.js","sources":["../../../src/hooks/useUniqueId.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport uniqueId from \"lodash/uniqueId\";\n\nexport default (id?: string, idPrefix?: string) =>\n  useMemo(() => id || uniqueId(idPrefix), [id, idPrefix]);\n"],"names":["id","idPrefix","useMemo","uniqueId"],"mappings":";;AAGA,MAAe,cAAA,CAACA,IAAaC,aAC3BC,QAAQ,MAAMF,MAAMG,SAASF,QAAQ,GAAG,CAACD,IAAIC,QAAQ,CAAC;"}

package/dist/esm/index.js

@@ -281,7 +281,6 @@ import { getFirstAndLastFocus, getFocusableList, getPrevNextFocus } from "./util
 import { wrapperTooltip } from "./utils/wrapperTooltip.js";
 import { useSavedState } from "./utils/useSavedState.js";
 import { default as default137 } from "./hocs/withTooltip.js";
-import { default as default138 } from "./hocs/withId.js";
 export {
   CellWithCheckBox,
   CellWithExpandButton,
@@ -613,7 +612,6 @@ export {
   default115 as verticalNavigationTreeClasses,
   default122 as verticalScrollListItemClasses,
   default16 as warningTextClasses,
-  default138 as withId,
   default137 as withTooltip,
   wrapperTooltip
 };

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types/index.d.ts

@@ -85,7 +85,6 @@ import { theme } from '@hitachivantara/uikit-styles';
 import { themes } from '@hitachivantara/uikit-styles';
 import type { ThHTMLAttributes } from 'react';
 import { TooltipProps } from '@mui/material';
-import { TransitionProps } from '@mui/material/transitions';
 import { UseColumnOrderInstanceProps } from 'react-table';
 import { UseColumnOrderState } from 'react-table';
 import { useEffect } from 'react';
@@ -137,8 +136,8 @@ declare type Accessor<D extends object> = (originalRow: D, index: number, sub: {
 }) => CellValue;
 
 export declare const accordionClasses: {
-    label: "HvAccordion-label";
     hidden: "HvAccordion-hidden";
+    label: "HvAccordion-label";
     container: "HvAccordion-container";
     disabled: "HvAccordion-disabled";
     root: "HvAccordion-root";
@@ -275,10 +274,10 @@ export declare const baseCheckBoxClasses: {
 };
 
 export declare const baseDropdownClasses: {
-    header: "HvBaseDropdown-header";
     placeholder: "HvBaseDropdown-placeholder";
     arrow: "HvBaseDropdown-arrow";
     anchor: "HvBaseDropdown-anchor";
+    header: "HvBaseDropdown-header";
     container: "HvBaseDropdown-container";
     root: "HvBaseDropdown-root";
     rootDisabled: "HvBaseDropdown-rootDisabled";
@@ -336,8 +335,8 @@ export declare const baseSwitchClasses: {
 };
 
 export declare const breadCrumbClasses: {
-    a: "HvBreadCrumb-a";
     link: "HvBreadCrumb-link";
+    a: "HvBreadCrumb-a";
     root: "HvBreadCrumb-root";
     orderedList: "HvBreadCrumb-orderedList";
     currentPage: "HvBreadCrumb-currentPage";
@@ -435,8 +434,8 @@ export declare const cardMediaClasses: {
 };
 
 export declare const carouselClasses: {
-    main: "HvCarousel-main";
     title: "HvCarousel-title";
+    main: "HvCarousel-main";
     dot: "HvCarousel-dot";
     controls: "HvCarousel-controls";
     xs: "HvCarousel-xs";
@@ -638,9 +637,9 @@ export declare const dotPaginationClasses: {
 };
 
 export declare const dropdownClasses: {
-    label: "HvDropdown-label";
     placeholder: "HvDropdown-placeholder";
     arrow: "HvDropdown-arrow";
+    label: "HvDropdown-label";
     error: "HvDropdown-error";
     dropdown: "HvDropdown-dropdown";
     root: "HvDropdown-root";
@@ -1897,7 +1896,7 @@ export declare interface HvBreadCrumbClasses {
     a?: string;
 }
 
-export declare interface HvBreadCrumbPathElement {
+export declare interface HvBreadCrumbPathElement extends Record<string, any> {
     label: string;
     path: string;
 }
@@ -1912,7 +1911,7 @@ export declare interface HvBreadCrumbProps extends HvBaseProps<HTMLDivElement, "
     /** The component used for the link node. Either a string to use a DOM element or a component. */
     component?: React.ElementType;
     /** Function passed to the component. If defined the component prop is used as the link node. */
-    onClick?: (event: MouseEventHandler<HTMLAnchorElement>, data: any) => void | undefined;
+    onClick?: (event: MouseEvent_2<HTMLElement>, data: any) => void;
     /** Props passed down to the DropDownMenu sub-menu component. */
     dropDownMenuProps?: HvDropDownMenuProps;
     /** A Jss Object used to override or extend the styles applied to the component. */
@@ -3254,10 +3253,10 @@ declare interface HvDropdownListProps {
     virtualized?: boolean;
 }
 
-export declare const HvDropDownMenu: {
-    ({ id, ...others }: WithIdProps): JSX_2.Element;
-    Naked: any;
-};
+/**
+ * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.
+ */
+export declare const HvDropDownMenu: ({ id: idProp, classes, className, icon, placement, dataList, disablePortal, onToggle, onClick, keepOpened, disabled, expanded, defaultExpanded, category, ...others }: HvDropDownMenuProps) => JSX_2.Element;
 
 export declare interface HvDropDownMenuClasses {
     /** Styles applied to the root. */
@@ -7222,6 +7221,7 @@ export declare interface HvToggleButtonProps extends HvBaseProps<HTMLButtonEleme
 
 /**
  * Tooltips display informative text when users hover over, focus on, or tap an element.
+ * Accessibility-wise, the tooltip automatically labels the `children` content.
  */
 export declare const HvTooltip: ForwardRefExoticComponent<Omit<HvTooltipProps, "ref"> & RefAttributes<unknown>>;
 
@@ -7250,9 +7250,9 @@ export declare interface HvTooltipClasses {
     valueWrapper?: string;
 }
 
-export declare type HvTooltipPlacementType = "bottom-end" | "bottom-start" | "bottom" | "left-end" | "left-start" | "left" | "right-end" | "right-start" | "right" | "top-end" | "top-start" | "top";
+export declare type HvTooltipPlacementType = TooltipProps["placement"];
 
-export declare interface HvTooltipProps extends Omit<TooltipProps, "classes" | "title"> {
+export declare interface HvTooltipProps extends Omit<TooltipProps, "classes"> {
     /**
      * Class names to be applied.
      */
@@ -7274,20 +7274,12 @@ export declare interface HvTooltipProps extends Omit<TooltipProps, "classes" | "
      * This property won't impact the enter touch delay (enterTouchDelay).
      */
     enterDelay?: number;
-    /**
-     * Tooltip title. Zero-length titles string are never displayed.
-     */
-    title?: string | ReactElement;
-    /**
-     * The component used for the transition
-     */
-    TransitionComponent?: React.JSXElementConstructor<TransitionProps & {
-        children: React.ReactElement<any, any>;
-    }>;
-    /**
-     * Properties applied to the Transition element.
-     */
-    TransitionProps?: TransitionProps;
+    /** @inheritdoc */
+    title: TooltipProps["title"];
+    /** @inheritdoc */
+    TransitionComponent?: TooltipProps["TransitionComponent"];
+    /** @inheritdoc */
+    TransitionProps?: TooltipProps["TransitionProps"];
     /**
      * Defines if should use a single or multiline tooltip.
      */
@@ -8165,9 +8157,9 @@ export declare const listItemClasses: {
 };
 
 export declare const loadingClasses: {
-    label: "HvLoading-label";
-    small: "HvLoading-small";
     hidden: "HvLoading-hidden";
+    small: "HvLoading-small";
+    label: "HvLoading-label";
     overlay: "HvLoading-overlay";
     blur: "HvLoading-blur";
     root: "HvLoading-root";
@@ -8949,9 +8941,9 @@ export declare const treeViewClasses: {
 };
 
 export declare const treeViewItemClasses: {
-    link: "HvVerticalNavigationTreeViewItem-link";
     content: "HvVerticalNavigationTreeViewItem-content";
     unselectable: "HvVerticalNavigationTreeViewItem-unselectable";
+    link: "HvVerticalNavigationTreeViewItem-link";
     group: "HvVerticalNavigationTreeViewItem-group";
     hide: "HvVerticalNavigationTreeViewItem-hide";
     expanded: "HvVerticalNavigationTreeViewItem-expanded";
@@ -8967,9 +8959,9 @@ export declare const treeViewItemClasses: {
 };
 
 export declare const typographyClasses: {
+    link: "HvTypography-link";
     body: "HvTypography-body";
     label: "HvTypography-label";
-    link: "HvTypography-link";
     display: "HvTypography-display";
     noWrap: "HvTypography-noWrap";
     title1: "HvTypography-title1";
@@ -9309,7 +9301,7 @@ export declare type UseTableStylesProps = (<D extends object = Record<string, un
 
 export declare const useTheme: () => HvThemeContextValue;
 
-export declare const useUniqueId: (id: any, idPrefix: any) => any;
+export declare const useUniqueId: (id?: string, idPrefix?: string) => string;
 
 export declare const useWidth: () => string;
 
@@ -9330,6 +9322,7 @@ declare interface VerticalNavigationContextValue {
     headerTitle?: string;
     setHeaderTitle?: React.Dispatch<React.SetStateAction<string | undefined>>;
     parentItem?: any;
+    setParentItem?: React.Dispatch<React.SetStateAction<any>>;
     withParentData?: any;
     navigateToChildHandler?: (event: any, item: any) => void;
     navigateToParentHandler?: () => void;
@@ -9378,15 +9371,6 @@ export declare const warningTextClasses: {
     topBorder: "HvWarningText-topBorder";
 };
 
-export declare const withId: (Component: any) => {
-    ({ id, ...others }: WithIdProps): JSX_2.Element;
-    Naked: any;
-};
-
-declare interface WithIdProps extends HvExtraProps {
-    id?: string;
-}
-
 export declare const withTooltip: (Component: React.FunctionComponent, label: string | undefined, placement: HvTooltipPlacementType, hideTooltip?: ((event: React.MouseEvent<HTMLDivElement>) => boolean) | undefined, tooltipProps?: HvTooltipProps, tooltipContainerProps?: HvBaseProps) => (props: any) => JSX_2.Element;
 
 export declare const wrapperTooltip: (hasTooltips: any, Component: any, label: any) => ((props: any) => JSX_2.Element) | (() => any);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.10.0",
+  "version": "5.11.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -58,7 +58,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "4a6fdb1de3133a538e4e67ac74121563c31d909c",
+  "gitHead": "f089170f43c957eb52d3d482b996f262c93a91c1",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {

package/dist/cjs/hocs/withId.cjs

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const React = require("react");
-const hoistNonReactStatics = require("hoist-non-react-statics");
-const uniqueId = require("lodash/uniqueId");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const getComponentName = require("../utils/getComponentName.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const hoistNonReactStatics__default = /* @__PURE__ */ _interopDefault(hoistNonReactStatics);
-const uniqueId__default = /* @__PURE__ */ _interopDefault(uniqueId);
-const pascalToKebab = (string = "") => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-const withId = (Component) => {
-  const WithId = ({
-    id,
-    ...others
-  }) => {
-    const [internalId] = React.useState(id || uniqueId__default.default(`${pascalToKebab(getComponentName.default(Component))}-`));
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-      id: internalId,
-      ...others
-    });
-  };
-  hoistNonReactStatics__default.default(WithId, Component);
-  if (process.env.NODE_ENV !== "production") {
-    WithId.Naked = Component;
-  }
-  return WithId;
-};
-const withId$1 = withId;
-exports.default = withId$1;
-//# sourceMappingURL=withId.cjs.map

package/dist/cjs/hocs/withId.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"withId.cjs","sources":["../../../src/hocs/withId.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport hoistNonReactStatics from \"hoist-non-react-statics\";\nimport uniqueId from \"lodash/uniqueId\";\nimport { HvExtraProps } from \"@core/types\";\nimport { getComponentName } from \"@core/utils\";\n\nconst pascalToKebab = (string = \"\") =>\n  string.replace(/([a-z0-9])([A-Z])/g, \"$1-$2\").toLowerCase();\n\nexport interface WithIdProps extends HvExtraProps {\n  id?: string;\n}\n\nconst withId = (Component) => {\n  const WithId = ({ id, ...others }: WithIdProps) => {\n    const [internalId] = useState(\n      id || uniqueId(`${pascalToKebab(getComponentName(Component))}-`)\n    );\n\n    return <Component id={internalId} {...others} />;\n  };\n\n  // https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over\n  hoistNonReactStatics(WithId, Component);\n\n  if (process.env.NODE_ENV !== \"production\") {\n    WithId.Naked = Component;\n  }\n\n  return WithId;\n};\n\nexport default withId;\n"],"names":["pascalToKebab","string","replace","toLowerCase","withId","Component","WithId","id","others","internalId","useState","uniqueId","getComponentName","hoistNonReactStatics","process","env","NODE_ENV","Naked"],"mappings":";;;;;;;;;;AAMA,MAAMA,gBAAgBA,CAACC,SAAS,OAC9BA,OAAOC,QAAQ,sBAAsB,OAAO,EAAEC;AAMhD,MAAMC,SAAUC,CAAc,cAAA;AAC5B,QAAMC,SAASA,CAAC;AAAA,IAAEC;AAAAA,IAAI,GAAGC;AAAAA,EAAAA,MAA0B;AACjD,UAAM,CAACC,UAAU,IAAIC,eACnBH,MAAMI,kBAAAA,QAAU,GAAEX,cAAcY,iBAAiBP,QAAAA,SAAS,CAAC,IAAI,CAAC;AAGlE,0CAAQA,WAAS;AAAA,MAACE,IAAIE;AAAAA,MAAW,GAAKD;AAAAA,IAAAA,CAAU;AAAA,EAAA;AAIlDK,wCAAqBP,QAAQD,SAAS;AAElCS,MAAAA,QAAQC,IAAIC,aAAa,cAAc;AACzCV,WAAOW,QAAQZ;AAAAA,EACjB;AAEOC,SAAAA;AACT;AAEA,MAAA,WAAeF;;"}

package/dist/esm/hocs/withId.js

@@ -1,28 +0,0 @@
-import { useState } from "react";
-import hoistNonReactStatics from "hoist-non-react-statics";
-import uniqueId from "lodash/uniqueId";
-import { jsx } from "@emotion/react/jsx-runtime";
-import getComponentName from "../utils/getComponentName.js";
-const pascalToKebab = (string = "") => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-const withId = (Component) => {
-  const WithId = ({
-    id,
-    ...others
-  }) => {
-    const [internalId] = useState(id || uniqueId(`${pascalToKebab(getComponentName(Component))}-`));
-    return /* @__PURE__ */ jsx(Component, {
-      id: internalId,
-      ...others
-    });
-  };
-  hoistNonReactStatics(WithId, Component);
-  if (process.env.NODE_ENV !== "production") {
-    WithId.Naked = Component;
-  }
-  return WithId;
-};
-const withId$1 = withId;
-export {
-  withId$1 as default
-};
-//# sourceMappingURL=withId.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"withId.js","sources":["../../../src/hocs/withId.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport hoistNonReactStatics from \"hoist-non-react-statics\";\nimport uniqueId from \"lodash/uniqueId\";\nimport { HvExtraProps } from \"@core/types\";\nimport { getComponentName } from \"@core/utils\";\n\nconst pascalToKebab = (string = \"\") =>\n  string.replace(/([a-z0-9])([A-Z])/g, \"$1-$2\").toLowerCase();\n\nexport interface WithIdProps extends HvExtraProps {\n  id?: string;\n}\n\nconst withId = (Component) => {\n  const WithId = ({ id, ...others }: WithIdProps) => {\n    const [internalId] = useState(\n      id || uniqueId(`${pascalToKebab(getComponentName(Component))}-`)\n    );\n\n    return <Component id={internalId} {...others} />;\n  };\n\n  // https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over\n  hoistNonReactStatics(WithId, Component);\n\n  if (process.env.NODE_ENV !== \"production\") {\n    WithId.Naked = Component;\n  }\n\n  return WithId;\n};\n\nexport default withId;\n"],"names":["pascalToKebab","string","replace","toLowerCase","withId","Component","WithId","id","others","internalId","useState","uniqueId","getComponentName","hoistNonReactStatics","process","env","NODE_ENV","Naked"],"mappings":";;;;;AAMA,MAAMA,gBAAgBA,CAACC,SAAS,OAC9BA,OAAOC,QAAQ,sBAAsB,OAAO,EAAEC;AAMhD,MAAMC,SAAUC,CAAc,cAAA;AAC5B,QAAMC,SAASA,CAAC;AAAA,IAAEC;AAAAA,IAAI,GAAGC;AAAAA,EAAAA,MAA0B;AACjD,UAAM,CAACC,UAAU,IAAIC,SACnBH,MAAMI,SAAU,GAAEX,cAAcY,iBAAiBP,SAAS,CAAC,IAAI,CAAC;AAGlE,+BAAQA,WAAS;AAAA,MAACE,IAAIE;AAAAA,MAAW,GAAKD;AAAAA,IAAAA,CAAU;AAAA,EAAA;AAIlDK,uBAAqBP,QAAQD,SAAS;AAElCS,MAAAA,QAAQC,IAAIC,aAAa,cAAc;AACzCV,WAAOW,QAAQZ;AAAAA,EACjB;AAEOC,SAAAA;AACT;AAEA,MAAA,WAAeF;"}