@hitachivantara/uikit-react-core 5.28.1 → 5.30.0

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

@@ -38,7 +38,7 @@ const {
   },
   disabled: {
     "& $tagsList": {
-      backgroundColor: theme.tagsInput.disabledBackgroundColor,
+      backgroundColor: theme.colors.atmo2,
       border: `1px solid ${theme.colors.atmo4}`,
       "&:focus-within, &:hover": {
         border: `1px solid ${theme.colors.atmo4}`
@@ -47,10 +47,10 @@ const {
   },
   readOnly: {
     "& $tagsList": {
-      backgroundColor: theme.tagsInput.readOnlyBackgroundColor,
-      border: `1px solid ${theme.tagsInput.readOnlyBorderColor}`,
+      backgroundColor: theme.colors.atmo2,
+      border: `1px solid ${theme.colors.secondary_60}`,
       "&:hover": {
-        border: `1px solid ${theme.tagsInput.readOnlyBorderColor}`
+        border: `1px solid ${theme.colors.secondary_60}`
       }
     }
   },
@@ -94,11 +94,11 @@ const {
     flexDirection: "row",
     flexWrap: "wrap",
     backgroundColor: theme.colors.atmo1,
-    border: `1px solid ${theme.tagsInput.borderColor}`,
+    border: `1px solid ${theme.colors.secondary_80}`,
     borderRadius: theme.radii.base,
     "&:hover": {
       cursor: "text",
-      border: `1px solid ${theme.tagsInput.hoverColor}`
+      border: `1px solid ${theme.colors.primary}`
     },
     [`& .${staticClasses$1.inputRoot}`]: {
       border: "none"

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

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.styles.js","sources":["../../../../src/components/TagsInput/TagsInput.styles.tsx"],"sourcesContent":["import { chipClasses } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { suggestionsClasses } from \"@core/components/Forms\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTagsInput\", {\n  input: {\n    width: \"100%\",\n    ...theme.typography.caption1,\n  },\n  listItemGutters: { padding: \"0 5px\" },\n  listItemRoot: {\n    marginBottom: 2,\n    height: 24,\n    lineHeight: \"24px\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: 2,\n    },\n\n    \"&$singleLine\": {\n      display: \"table-cell\",\n      paddingTop: \"2px\",\n    },\n  },\n  root: { display: \"inline-block\", width: \"100%\" },\n  chipRoot: {\n    [`&.${chipClasses.root}`]: {\n      maxWidth: \"none\",\n    },\n  },\n  disabled: {\n    \"& $tagsList\": {\n      backgroundColor: theme.tagsInput.disabledBackgroundColor,\n      border: `1px solid ${theme.colors.atmo4}`,\n\n      \"&:focus-within, &:hover\": {\n        border: `1px solid ${theme.colors.atmo4}`,\n      },\n    },\n  },\n  readOnly: {\n    \"& $tagsList\": {\n      backgroundColor: theme.tagsInput.readOnlyBackgroundColor,\n      border: `1px solid ${theme.tagsInput.readOnlyBorderColor}`,\n\n      \"&:hover\": {\n        border: `1px solid ${theme.tagsInput.readOnlyBorderColor}`,\n      },\n    },\n  },\n  resizable: { width: \"auto\", resize: \"both\", overflow: \"auto\" },\n  invalid: {},\n  labelContainer: { float: \"left\", display: \"flex\", alignItems: \"flex-start\" },\n  label: { display: \"block\", float: \"left\", paddingBottom: \"6px\" },\n  description: { display: \"block\", float: \"left\" },\n  characterCounter: {\n    display: \"block\",\n    float: \"right\",\n    textAlign: \"right\",\n    marginBottom: \"6px\",\n  },\n  tagsList: {\n    display: \"flex\",\n    alignContent: \"flex-start\",\n    float: \"left\",\n    clear: \"both\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    height: \"32px\",\n    padding: 5,\n    overflow: \"auto\",\n    position: \"relative\",\n\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid ${theme.tagsInput.borderColor}`,\n    borderRadius: theme.radii.base,\n\n    \"&:hover\": {\n      cursor: \"text\",\n      border: `1px solid ${theme.tagsInput.hoverColor}`,\n    },\n\n    [`& .${baseInputClasses.inputRoot}`]: {\n      border: \"none\",\n    },\n\n    \"&:focus, &:focus-within, &:focus-visible\": {\n      outlineColor: \"#52A8EC\",\n      outlineStyle: \"solid\",\n      outlineWidth: \"0px\",\n      outlineOffset: \"-1px\",\n      boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n    },\n\n    \"&$singleLine\": {\n      overflowX: \"hidden\",\n      overflowY: \"hidden\",\n      height: 32,\n      display: \"table-row\",\n      paddingTop: 0,\n    },\n\n    \"&$error\": {\n      border: `1px solid ${theme.colors.negative}`,\n    },\n\n    \"&$invalid\": {\n      border: `1px solid ${theme.colors.negative}`,\n    },\n  },\n  tagInputContainerRoot: {\n    display: \"flex\",\n    flexGrow: 1,\n    height: 24,\n    lineHeight: \"24px\",\n\n    \"&$singleLine\": {\n      display: \"table-cell\",\n      minWidth: 60,\n      width: \"100%\",\n      paddingTop: \"3px\",\n      verticalAlign: \"middle\",\n    },\n  },\n  tagInputRoot: {\n    [`& .${baseInputClasses.root}`]: {\n      width: \"100%\",\n      border: \"none\",\n      \"&:hover $tagInputBorderContainer\": {\n        background: \"none\",\n      },\n    },\n    [`&& .${baseInputClasses.inputRoot}`]: {\n      marginLeft: 0,\n      marginRight: 0,\n      flex: \"1 1 auto\",\n      height: 24,\n      lineHeight: \"24px\",\n      padding: 0,\n      border: \"none\",\n    },\n    [`& .${baseInputClasses.inputBorderContainer}`]: {\n      border: \"none\",\n      background: \"none\",\n    },\n    [`& .${baseInputClasses.inputRootFocused}`]: {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n    [`& .${baseInputClasses.root} .${baseInputClasses.inputRootReadOnly}`]: {\n      backgroundColor: \"transparent\",\n      border: \"none\",\n      \"&:hover\": {\n        border: \"none\",\n      },\n    },\n    [`&& .${baseInputClasses.input}`]: {\n      marginLeft: 0,\n    },\n  },\n  tagSelected: {\n    outlineColor: \"#52A8EC\",\n    outlineStyle: \"solid\",\n    outlineWidth: \"0px\",\n    outlineOffset: \"-1px\",\n    boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n  },\n  tagInputBorderContainer: {},\n  tagInputRootFocused: {},\n  tagInputRootEmpty: {},\n  singleLine: {},\n  error: { float: \"left\" },\n  inputExtension: {},\n  suggestionsContainer: {\n    width: \"100%\",\n    position: \"relative\",\n    top: 59,\n    [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n      width: \"100%\",\n    },\n  },\n  suggestionList: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","input","width","theme","typography","caption1","listItemGutters","padding","listItemRoot","marginBottom","height","lineHeight","display","paddingTop","root","chipRoot","chipClasses","maxWidth","disabled","backgroundColor","tagsInput","disabledBackgroundColor","border","colors","atmo4","readOnly","readOnlyBackgroundColor","readOnlyBorderColor","resizable","resize","overflow","invalid","labelContainer","float","alignItems","label","paddingBottom","description","characterCounter","textAlign","tagsList","alignContent","clear","position","flexDirection","flexWrap","atmo1","borderColor","borderRadius","radii","base","cursor","hoverColor","baseInputClasses","inputRoot","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","overflowX","overflowY","negative","tagInputContainerRoot","flexGrow","minWidth","verticalAlign","tagInputRoot","background","marginLeft","marginRight","flex","inputBorderContainer","inputRootFocused","outline","inputRootReadOnly","tagSelected","tagInputBorderContainer","tagInputRootFocused","tagInputRootEmpty","singleLine","error","inputExtension","suggestionsContainer","top","suggestionsClasses","list","suggestionList"],"mappings":"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"}
+{"version":3,"file":"TagsInput.styles.js","sources":["../../../../src/components/TagsInput/TagsInput.styles.tsx"],"sourcesContent":["import { chipClasses } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { suggestionsClasses } from \"@core/components/Forms\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTagsInput\", {\n  input: {\n    width: \"100%\",\n    ...theme.typography.caption1,\n  },\n  listItemGutters: { padding: \"0 5px\" },\n  listItemRoot: {\n    marginBottom: 2,\n    height: 24,\n    lineHeight: \"24px\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: 2,\n    },\n\n    \"&$singleLine\": {\n      display: \"table-cell\",\n      paddingTop: \"2px\",\n    },\n  },\n  root: { display: \"inline-block\", width: \"100%\" },\n  chipRoot: {\n    [`&.${chipClasses.root}`]: {\n      maxWidth: \"none\",\n    },\n  },\n  disabled: {\n    \"& $tagsList\": {\n      backgroundColor: theme.colors.atmo2,\n      border: `1px solid ${theme.colors.atmo4}`,\n\n      \"&:focus-within, &:hover\": {\n        border: `1px solid ${theme.colors.atmo4}`,\n      },\n    },\n  },\n  readOnly: {\n    \"& $tagsList\": {\n      backgroundColor: theme.colors.atmo2,\n      border: `1px solid ${theme.colors.secondary_60}`,\n\n      \"&:hover\": {\n        border: `1px solid ${theme.colors.secondary_60}`,\n      },\n    },\n  },\n  resizable: { width: \"auto\", resize: \"both\", overflow: \"auto\" },\n  invalid: {},\n  labelContainer: { float: \"left\", display: \"flex\", alignItems: \"flex-start\" },\n  label: { display: \"block\", float: \"left\", paddingBottom: \"6px\" },\n  description: { display: \"block\", float: \"left\" },\n  characterCounter: {\n    display: \"block\",\n    float: \"right\",\n    textAlign: \"right\",\n    marginBottom: \"6px\",\n  },\n  tagsList: {\n    display: \"flex\",\n    alignContent: \"flex-start\",\n    float: \"left\",\n    clear: \"both\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    height: \"32px\",\n    padding: 5,\n    overflow: \"auto\",\n    position: \"relative\",\n\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid ${theme.colors.secondary_80}`,\n    borderRadius: theme.radii.base,\n\n    \"&:hover\": {\n      cursor: \"text\",\n      border: `1px solid ${theme.colors.primary}`,\n    },\n\n    [`& .${baseInputClasses.inputRoot}`]: {\n      border: \"none\",\n    },\n\n    \"&:focus, &:focus-within, &:focus-visible\": {\n      outlineColor: \"#52A8EC\",\n      outlineStyle: \"solid\",\n      outlineWidth: \"0px\",\n      outlineOffset: \"-1px\",\n      boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n    },\n\n    \"&$singleLine\": {\n      overflowX: \"hidden\",\n      overflowY: \"hidden\",\n      height: 32,\n      display: \"table-row\",\n      paddingTop: 0,\n    },\n\n    \"&$error\": {\n      border: `1px solid ${theme.colors.negative}`,\n    },\n\n    \"&$invalid\": {\n      border: `1px solid ${theme.colors.negative}`,\n    },\n  },\n  tagInputContainerRoot: {\n    display: \"flex\",\n    flexGrow: 1,\n    height: 24,\n    lineHeight: \"24px\",\n\n    \"&$singleLine\": {\n      display: \"table-cell\",\n      minWidth: 60,\n      width: \"100%\",\n      paddingTop: \"3px\",\n      verticalAlign: \"middle\",\n    },\n  },\n  tagInputRoot: {\n    [`& .${baseInputClasses.root}`]: {\n      width: \"100%\",\n      border: \"none\",\n      \"&:hover $tagInputBorderContainer\": {\n        background: \"none\",\n      },\n    },\n    [`&& .${baseInputClasses.inputRoot}`]: {\n      marginLeft: 0,\n      marginRight: 0,\n      flex: \"1 1 auto\",\n      height: 24,\n      lineHeight: \"24px\",\n      padding: 0,\n      border: \"none\",\n    },\n    [`& .${baseInputClasses.inputBorderContainer}`]: {\n      border: \"none\",\n      background: \"none\",\n    },\n    [`& .${baseInputClasses.inputRootFocused}`]: {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n    [`& .${baseInputClasses.root} .${baseInputClasses.inputRootReadOnly}`]: {\n      backgroundColor: \"transparent\",\n      border: \"none\",\n      \"&:hover\": {\n        border: \"none\",\n      },\n    },\n    [`&& .${baseInputClasses.input}`]: {\n      marginLeft: 0,\n    },\n  },\n  tagSelected: {\n    outlineColor: \"#52A8EC\",\n    outlineStyle: \"solid\",\n    outlineWidth: \"0px\",\n    outlineOffset: \"-1px\",\n    boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n  },\n  tagInputBorderContainer: {},\n  tagInputRootFocused: {},\n  tagInputRootEmpty: {},\n  singleLine: {},\n  error: { float: \"left\" },\n  inputExtension: {},\n  suggestionsContainer: {\n    width: \"100%\",\n    position: \"relative\",\n    top: 59,\n    [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n      width: \"100%\",\n    },\n  },\n  suggestionList: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","input","width","theme","typography","caption1","listItemGutters","padding","listItemRoot","marginBottom","height","lineHeight","display","paddingTop","root","chipRoot","chipClasses","maxWidth","disabled","backgroundColor","colors","atmo2","border","atmo4","readOnly","secondary_60","resizable","resize","overflow","invalid","labelContainer","float","alignItems","label","paddingBottom","description","characterCounter","textAlign","tagsList","alignContent","clear","position","flexDirection","flexWrap","atmo1","secondary_80","borderRadius","radii","base","cursor","primary","baseInputClasses","inputRoot","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","overflowX","overflowY","negative","tagInputContainerRoot","flexGrow","minWidth","verticalAlign","tagInputRoot","background","marginLeft","marginRight","flex","inputBorderContainer","inputRootFocused","outline","inputRootReadOnly","tagSelected","tagInputBorderContainer","tagInputRootFocused","tagInputRootEmpty","singleLine","error","inputExtension","suggestionsContainer","top","suggestionsClasses","list","suggestionList"],"mappings":"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"}

package/dist/esm/components/Tooltip/Tooltip.js

@@ -3,7 +3,7 @@ import { Tooltip, Fade } from "@mui/material";
 import { forwardRef } from "react";
 import { useTheme } from "../../hooks/useTheme.js";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { useClasses, popperSx } from "./Tooltip.styles.js";
+import { useClasses } from "./Tooltip.styles.js";
 import { staticClasses } from "./Tooltip.styles.js";
 const HvTooltip = forwardRef((props, ref) => {
   const {
@@ -33,7 +33,6 @@ const HvTooltip = forwardRef((props, ref) => {
     tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,
     popper: classes.popper
   }, title, PopperProps: {
-    sx: popperSx(useSingle),
     container: typeof window !== "undefined" ? document.getElementById(containerId || rootId || "") || document.body : void 0
   }, ...others, children });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { Fade, Tooltip, TooltipProps as MuiTooltipProps } from \"@mui/material\";\nimport { forwardRef, ReactElement } from \"react\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { popperSx, staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement },\n    containerId,\n    ...others\n  } = useDefaultProps(\"HvTooltip\", props);\n\n  const { rootId } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open ?? undefined}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n        popper: classes.popper,\n      }}\n      title={title}\n      PopperProps={{\n        sx: popperSx(useSingle),\n        container:\n          typeof window !== \"undefined\"\n            ? document.getElementById(containerId || rootId || \"\") ||\n              document.body\n            : undefined,\n      }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":["HvTooltip","forwardRef","props","ref","className","classes","classesProp","open","enterDelay","placement","useSingle","children","title","TransitionComponent","Fade","TransitionProps","timeout","containerId","others","useDefaultProps","rootId","useTheme","useClasses","undefined","tooltip","tooltipMulti","popper","sx","popperSx","container","window","document","getElementById","body"],"mappings":";;;;;;;AA0DO,MAAMA,YAAYC,WAAW,CAACC,OAAuBC,QAAQ;AAC5D,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,aAAa;AAAA,IACbC,YAAY;AAAA,IACZC,YAAY;AAAA,IACZC;AAAAA,IACAC;AAAAA,IACAC,sBAAsBC;AAAAA,IACtBC,kBAAkB;AAAA,MAAEC,SAAS;AAAA,MAAKP;AAAAA,IAAU;AAAA,IAC5CQ;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,aAAajB,KAAK;AAEhC,QAAA;AAAA,IAAEkB;AAAAA,MAAWC,SAAS;AACtB,QAAA;AAAA,IAAEhB;AAAAA,EAAAA,IAAYiB,WAAWhB,WAAW;AAGxC,SAAA,oBAAC,SACC,EAAA,KACA,MAAMC,QAAQgB,QACd,YACA,WACA,qBACA,iBACA,WACA,SAAS;AAAA,IACPC,SAASd,YAAYL,QAAQmB,UAAUnB,QAAQoB;AAAAA,IAC/CC,QAAQrB,QAAQqB;AAAAA,EAAAA,GAElB,OACA,aAAa;AAAA,IACXC,IAAIC,SAASlB,SAAS;AAAA,IACtBmB,WACE,OAAOC,WAAW,cACdC,SAASC,eAAef,eAAeG,UAAU,EAAE,KACnDW,SAASE,OACTV;AAAAA,EAAAA,GAEJL,GAAAA,QAEHP,SACH,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { Fade, Tooltip, TooltipProps as MuiTooltipProps } from \"@mui/material\";\nimport { forwardRef, ReactElement } from \"react\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement },\n    containerId,\n    ...others\n  } = useDefaultProps(\"HvTooltip\", props);\n\n  const { rootId } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open ?? undefined}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n        popper: classes.popper,\n      }}\n      title={title}\n      PopperProps={{\n        container:\n          typeof window !== \"undefined\"\n            ? document.getElementById(containerId || rootId || \"\") ||\n              document.body\n            : undefined,\n      }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":["HvTooltip","forwardRef","props","ref","className","classes","classesProp","open","enterDelay","placement","useSingle","children","title","TransitionComponent","Fade","TransitionProps","timeout","containerId","others","useDefaultProps","rootId","useTheme","useClasses","undefined","tooltip","tooltipMulti","popper","container","window","document","getElementById","body"],"mappings":";;;;;;;AA0DO,MAAMA,YAAYC,WAAW,CAACC,OAAuBC,QAAQ;AAC5D,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,aAAa;AAAA,IACbC,YAAY;AAAA,IACZC,YAAY;AAAA,IACZC;AAAAA,IACAC;AAAAA,IACAC,sBAAsBC;AAAAA,IACtBC,kBAAkB;AAAA,MAAEC,SAAS;AAAA,MAAKP;AAAAA,IAAU;AAAA,IAC5CQ;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,aAAajB,KAAK;AAEhC,QAAA;AAAA,IAAEkB;AAAAA,MAAWC,SAAS;AACtB,QAAA;AAAA,IAAEhB;AAAAA,EAAAA,IAAYiB,WAAWhB,WAAW;AAGxC,SAAA,oBAAC,SACC,EAAA,KACA,MAAMC,QAAQgB,QACd,YACA,WACA,qBACA,iBACA,WACA,SAAS;AAAA,IACPC,SAASd,YAAYL,QAAQmB,UAAUnB,QAAQoB;AAAAA,IAC/CC,QAAQrB,QAAQqB;AAAAA,EAAAA,GAElB,OACA,aAAa;AAAA,IACXC,WACE,OAAOC,WAAW,cACdC,SAASC,eAAeb,eAAeG,UAAU,EAAE,KACnDS,SAASE,OACTR;AAAAA,EAAAA,GAEJL,GAAAA,QAEHP,SACH,CAAA;AAEJ,CAAC;"}

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

@@ -8,17 +8,7 @@ const {
   root: {},
   tooltip: {},
   tooltipMulti: {},
-  popper: {},
-  title: {},
-  valuesContainer: {},
-  values: {},
-  color: {},
-  separatorColor: {},
-  separator: {},
-  valueWrapper: {}
-});
-const popperSx = (useSingle) => {
-  return {
+  popper: {
     [`& .${tooltipClasses.popper}`]: {
       opacity: 1
     },
@@ -31,29 +21,22 @@ const popperSx = (useSingle) => {
       backgroundColor: theme.colors.atmo1,
       boxShadow: theme.colors.shadow,
       padding: 0,
-      ...useSingle && {
-        padding: "15px 20px",
-        borderRadius: theme.tooltip.borderRadius
-      },
       "& p": {
         display: "-webkit-box",
         width: "fit-content",
         boxOrient: "vertical",
         textOverflow: "ellipsis",
-        overflow: "hidden",
-        ...useSingle && {
-          wordBreak: "break-word"
-        }
+        overflow: "hidden"
       }
     },
-    [`& .${staticClasses.title}`]: {
+    "& $title": {
       padding: "15px 20px",
       borderBottom: `3px solid ${theme.colors.atmo2}`
     },
-    [`& .${staticClasses.valuesContainer}`]: {
+    "& $valuesContainer": {
       padding: theme.space.sm
     },
-    [`& .${staticClasses.values}`]: {
+    "& $values": {
       display: "flex",
       justifyContent: "space-between",
       paddingBottom: "10px",
@@ -61,22 +44,35 @@ const popperSx = (useSingle) => {
         paddingBottom: 0
       }
     },
-    [`& .${staticClasses.color}`]: {
+    "& $color": {
       width: theme.space.xs
     },
-    [`& .${staticClasses.separator}`]: {
+    "& $separator": {
       width: theme.space.xs
     },
-    [`& .${staticClasses.separatorColor}`]: {
+    "& $separatorColor": {
       width: "5px"
     },
-    [`& .${staticClasses.valueWrapper}`]: {
+    "& $valueWrapper": {
       padding: theme.space.sm
+    },
+    "& $tooltip": {
+      padding: "15px 20px",
+      borderRadius: theme.radii.round,
+      "& p": {
+        wordBreak: "break-word"
+      }
     }
-  };
-};
+  },
+  title: {},
+  valuesContainer: {},
+  values: {},
+  color: {},
+  separatorColor: {},
+  separator: {},
+  valueWrapper: {}
+});
 export {
-  popperSx,
   staticClasses,
   useClasses
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.styles.js","sources":["../../../../src/components/Tooltip/Tooltip.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { tooltipClasses as MuitooltipClasses } from \"@mui/material\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTooltip\", {\n  root: {},\n  tooltip: {},\n  tooltipMulti: {},\n  popper: {},\n  title: {},\n  valuesContainer: {},\n  values: {},\n  color: {},\n  separatorColor: {},\n  separator: {},\n  valueWrapper: {},\n});\n\nexport const popperSx = (useSingle: boolean) => {\n  return {\n    [`& .${MuitooltipClasses.popper}`]: {\n      opacity: 1,\n    },\n    [`& .${MuitooltipClasses.tooltip}`]: {\n      fontFamily: theme.fontFamily.body,\n      ...theme.typography.body,\n      display: \"flex\",\n      width: \"fit-content\",\n      maxWidth: 532,\n      backgroundColor: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      padding: 0,\n      ...(useSingle && {\n        padding: \"15px 20px\",\n        borderRadius: theme.tooltip.borderRadius,\n      }),\n\n      \"& p\": {\n        display: \"-webkit-box\",\n        width: \"fit-content\",\n        boxOrient: \"vertical\",\n        textOverflow: \"ellipsis\",\n        overflow: \"hidden\",\n        ...(useSingle && { wordBreak: \"break-word\" }),\n      },\n    },\n    [`& .${staticClasses.title}`]: {\n      padding: \"15px 20px\",\n      borderBottom: `3px solid ${theme.colors.atmo2}`,\n    },\n    [`& .${staticClasses.valuesContainer}`]: {\n      padding: theme.space.sm,\n    },\n    [`& .${staticClasses.values}`]: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      paddingBottom: \"10px\",\n      \"&:last-child\": {\n        paddingBottom: 0,\n      },\n    },\n    [`& .${staticClasses.color}`]: {\n      width: theme.space.xs,\n    },\n    [`& .${staticClasses.separator}`]: {\n      width: theme.space.xs,\n    },\n    [`& .${staticClasses.separatorColor}`]: {\n      width: \"5px\",\n    },\n    [`& .${staticClasses.valueWrapper}`]: {\n      padding: theme.space.sm,\n    },\n  };\n};\n"],"names":["staticClasses","useClasses","createClasses","root","tooltip","tooltipMulti","popper","title","valuesContainer","values","color","separatorColor","separator","valueWrapper","popperSx","useSingle","MuitooltipClasses","opacity","fontFamily","theme","body","typography","display","width","maxWidth","backgroundColor","colors","atmo1","boxShadow","shadow","padding","borderRadius","boxOrient","textOverflow","overflow","wordBreak","borderBottom","atmo2","space","sm","justifyContent","paddingBottom","xs"],"mappings":";;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,aAAa;AAAA,EACtEC,MAAM,CAAC;AAAA,EACPC,SAAS,CAAC;AAAA,EACVC,cAAc,CAAC;AAAA,EACfC,QAAQ,CAAC;AAAA,EACTC,OAAO,CAAC;AAAA,EACRC,iBAAiB,CAAC;AAAA,EAClBC,QAAQ,CAAC;AAAA,EACTC,OAAO,CAAC;AAAA,EACRC,gBAAgB,CAAC;AAAA,EACjBC,WAAW,CAAC;AAAA,EACZC,cAAc,CAAC;AACjB,CAAC;AAEYC,MAAAA,WAAWA,CAACC,cAAuB;AACvC,SAAA;AAAA,IACL,CAAE,MAAKC,eAAkBV,MAAO,EAAC,GAAG;AAAA,MAClCW,SAAS;AAAA,IACX;AAAA,IACA,CAAE,MAAKD,eAAkBZ,OAAQ,EAAC,GAAG;AAAA,MACnCc,YAAYC,MAAMD,WAAWE;AAAAA,MAC7B,GAAGD,MAAME,WAAWD;AAAAA,MACpBE,SAAS;AAAA,MACTC,OAAO;AAAA,MACPC,UAAU;AAAA,MACVC,iBAAiBN,MAAMO,OAAOC;AAAAA,MAC9BC,WAAWT,MAAMO,OAAOG;AAAAA,MACxBC,SAAS;AAAA,MACT,GAAIf,aAAa;AAAA,QACfe,SAAS;AAAA,QACTC,cAAcZ,MAAMf,QAAQ2B;AAAAA,MAC9B;AAAA,MAEA,OAAO;AAAA,QACLT,SAAS;AAAA,QACTC,OAAO;AAAA,QACPS,WAAW;AAAA,QACXC,cAAc;AAAA,QACdC,UAAU;AAAA,QACV,GAAInB,aAAa;AAAA,UAAEoB,WAAW;AAAA,QAAa;AAAA,MAC7C;AAAA,IACF;AAAA,IACA,CAAE,MAAKnC,cAAcO,KAAM,EAAC,GAAG;AAAA,MAC7BuB,SAAS;AAAA,MACTM,cAAe,aAAYjB,MAAMO,OAAOW,KAAM;AAAA,IAChD;AAAA,IACA,CAAE,MAAKrC,cAAcQ,eAAgB,EAAC,GAAG;AAAA,MACvCsB,SAASX,MAAMmB,MAAMC;AAAAA,IACvB;AAAA,IACA,CAAE,MAAKvC,cAAcS,MAAO,EAAC,GAAG;AAAA,MAC9Ba,SAAS;AAAA,MACTkB,gBAAgB;AAAA,MAChBC,eAAe;AAAA,MACf,gBAAgB;AAAA,QACdA,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAE,MAAKzC,cAAcU,KAAM,EAAC,GAAG;AAAA,MAC7Ba,OAAOJ,MAAMmB,MAAMI;AAAAA,IACrB;AAAA,IACA,CAAE,MAAK1C,cAAcY,SAAU,EAAC,GAAG;AAAA,MACjCW,OAAOJ,MAAMmB,MAAMI;AAAAA,IACrB;AAAA,IACA,CAAE,MAAK1C,cAAcW,cAAe,EAAC,GAAG;AAAA,MACtCY,OAAO;AAAA,IACT;AAAA,IACA,CAAE,MAAKvB,cAAca,YAAa,EAAC,GAAG;AAAA,MACpCiB,SAASX,MAAMmB,MAAMC;AAAAA,IACvB;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"Tooltip.styles.js","sources":["../../../../src/components/Tooltip/Tooltip.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { tooltipClasses as MuitooltipClasses } from \"@mui/material\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTooltip\", {\n  root: {},\n  tooltip: {},\n  tooltipMulti: {},\n  popper: {\n    [`& .${MuitooltipClasses.popper}`]: {\n      opacity: 1,\n    },\n    [`& .${MuitooltipClasses.tooltip}`]: {\n      fontFamily: theme.fontFamily.body,\n      ...theme.typography.body,\n      display: \"flex\",\n      width: \"fit-content\",\n      maxWidth: 532,\n      backgroundColor: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      padding: 0,\n\n      \"& p\": {\n        display: \"-webkit-box\",\n        width: \"fit-content\",\n        boxOrient: \"vertical\",\n        textOverflow: \"ellipsis\",\n        overflow: \"hidden\",\n      },\n    },\n    \"& $title\": {\n      padding: \"15px 20px\",\n      borderBottom: `3px solid ${theme.colors.atmo2}`,\n    },\n    \"& $valuesContainer\": {\n      padding: theme.space.sm,\n    },\n    \"& $values\": {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      paddingBottom: \"10px\",\n      \"&:last-child\": {\n        paddingBottom: 0,\n      },\n    },\n    \"& $color\": {\n      width: theme.space.xs,\n    },\n    \"& $separator\": {\n      width: theme.space.xs,\n    },\n    \"& $separatorColor\": {\n      width: \"5px\",\n    },\n    \"& $valueWrapper\": {\n      padding: theme.space.sm,\n    },\n    \"& $tooltip\": {\n      padding: \"15px 20px\",\n      borderRadius: theme.radii.round,\n      \"& p\": {\n        wordBreak: \"break-word\",\n      },\n    },\n  },\n  title: {},\n  valuesContainer: {},\n  values: {},\n  color: {},\n  separatorColor: {},\n  separator: {},\n  valueWrapper: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","tooltip","tooltipMulti","popper","MuitooltipClasses","opacity","fontFamily","theme","body","typography","display","width","maxWidth","backgroundColor","colors","atmo1","boxShadow","shadow","padding","boxOrient","textOverflow","overflow","borderBottom","atmo2","space","sm","justifyContent","paddingBottom","xs","borderRadius","radii","round","wordBreak","title","valuesContainer","values","color","separatorColor","separator","valueWrapper"],"mappings":";;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,aAAa;AAAA,EACtEC,MAAM,CAAC;AAAA,EACPC,SAAS,CAAC;AAAA,EACVC,cAAc,CAAC;AAAA,EACfC,QAAQ;AAAA,IACN,CAAE,MAAKC,eAAkBD,MAAO,EAAC,GAAG;AAAA,MAClCE,SAAS;AAAA,IACX;AAAA,IACA,CAAE,MAAKD,eAAkBH,OAAQ,EAAC,GAAG;AAAA,MACnCK,YAAYC,MAAMD,WAAWE;AAAAA,MAC7B,GAAGD,MAAME,WAAWD;AAAAA,MACpBE,SAAS;AAAA,MACTC,OAAO;AAAA,MACPC,UAAU;AAAA,MACVC,iBAAiBN,MAAMO,OAAOC;AAAAA,MAC9BC,WAAWT,MAAMO,OAAOG;AAAAA,MACxBC,SAAS;AAAA,MAET,OAAO;AAAA,QACLR,SAAS;AAAA,QACTC,OAAO;AAAA,QACPQ,WAAW;AAAA,QACXC,cAAc;AAAA,QACdC,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACVH,SAAS;AAAA,MACTI,cAAe,aAAYf,MAAMO,OAAOS,KAAM;AAAA,IAChD;AAAA,IACA,sBAAsB;AAAA,MACpBL,SAASX,MAAMiB,MAAMC;AAAAA,IACvB;AAAA,IACA,aAAa;AAAA,MACXf,SAAS;AAAA,MACTgB,gBAAgB;AAAA,MAChBC,eAAe;AAAA,MACf,gBAAgB;AAAA,QACdA,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACVhB,OAAOJ,MAAMiB,MAAMI;AAAAA,IACrB;AAAA,IACA,gBAAgB;AAAA,MACdjB,OAAOJ,MAAMiB,MAAMI;AAAAA,IACrB;AAAA,IACA,qBAAqB;AAAA,MACnBjB,OAAO;AAAA,IACT;AAAA,IACA,mBAAmB;AAAA,MACjBO,SAASX,MAAMiB,MAAMC;AAAAA,IACvB;AAAA,IACA,cAAc;AAAA,MACZP,SAAS;AAAA,MACTW,cAActB,MAAMuB,MAAMC;AAAAA,MAC1B,OAAO;AAAA,QACLC,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACAC,OAAO,CAAC;AAAA,EACRC,iBAAiB,CAAC;AAAA,EAClBC,QAAQ,CAAC;AAAA,EACTC,OAAO,CAAC;AAAA,EACRC,gBAAgB,CAAC;AAAA,EACjBC,WAAW,CAAC;AAAA,EACZC,cAAc,CAAC;AACjB,CAAC;"}

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

@@ -2,7 +2,7 @@ import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../../utils/focusUtils.js";
 import { createClasses } from "../../../utils/classes.js";
 const hover = () => ({
-  background: theme.verticalNavigation.hoverColor
+  background: theme.colors.containerBackgroundHover
 });
 const {
   staticClasses,

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

@@ -1 +1 @@
-{"version":3,"file":"Action.styles.js","sources":["../../../../../src/components/VerticalNavigation/Actions/Action.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nconst hover = () => ({\n  background: theme.verticalNavigation.hoverColor,\n});\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationAction\",\n  {\n    action: {\n      width: \"100%\",\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      alignItems: \"center\",\n      height: \"32px\",\n      color: theme.colors.secondary,\n\n      // hover\n      \"&:hover\": hover(),\n\n      \"&:focus\": {\n        outline: \"none\",\n        ...hover(),\n      },\n\n      \"&:focus-visible\": {\n        ...outlineStyles,\n      },\n\n      // cursor\n      cursor: \"pointer\",\n      \"& *\": {\n        cursor: \"pointer\",\n      },\n    },\n    noIcon: {\n      paddingLeft: theme.space.xs,\n    },\n    minimized: {\n      justifyContent: \"center\",\n      paddingRight: 0,\n    },\n  }\n);\n"],"names":["hover","background","theme","verticalNavigation","hoverColor","staticClasses","useClasses","createClasses","action","width","display","justifyContent","alignItems","height","color","colors","secondary","outline","outlineStyles","cursor","noIcon","paddingLeft","space","xs","minimized","paddingRight"],"mappings":";;;AAIA,MAAMA,QAAQA,OAAO;AAAA,EACnBC,YAAYC,MAAMC,mBAAmBC;AACvC;AAEa,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,8BACA;AAAA,EACEC,QAAQ;AAAA,IACNC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRC,OAAOZ,MAAMa,OAAOC;AAAAA;AAAAA,IAGpB,WAAWhB,MAAM;AAAA,IAEjB,WAAW;AAAA,MACTiB,SAAS;AAAA,MACT,GAAGjB,MAAM;AAAA,IACX;AAAA,IAEA,mBAAmB;AAAA,MACjB,GAAGkB;AAAAA,IACL;AAAA;AAAA,IAGAC,QAAQ;AAAA,IACR,OAAO;AAAA,MACLA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,QAAQ;AAAA,IACNC,aAAanB,MAAMoB,MAAMC;AAAAA,EAC3B;AAAA,EACAC,WAAW;AAAA,IACTb,gBAAgB;AAAA,IAChBc,cAAc;AAAA,EAChB;AACF,CACF;"}
+{"version":3,"file":"Action.styles.js","sources":["../../../../../src/components/VerticalNavigation/Actions/Action.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nconst hover = () => ({\n  background: theme.colors.containerBackgroundHover,\n});\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationAction\",\n  {\n    action: {\n      width: \"100%\",\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      alignItems: \"center\",\n      height: \"32px\",\n      color: theme.colors.secondary,\n\n      // hover\n      \"&:hover\": hover(),\n\n      \"&:focus\": {\n        outline: \"none\",\n        ...hover(),\n      },\n\n      \"&:focus-visible\": {\n        ...outlineStyles,\n      },\n\n      // cursor\n      cursor: \"pointer\",\n      \"& *\": {\n        cursor: \"pointer\",\n      },\n    },\n    noIcon: {\n      paddingLeft: theme.space.xs,\n    },\n    minimized: {\n      justifyContent: \"center\",\n      paddingRight: 0,\n    },\n  }\n);\n"],"names":["hover","background","theme","colors","containerBackgroundHover","staticClasses","useClasses","createClasses","action","width","display","justifyContent","alignItems","height","color","secondary","outline","outlineStyles","cursor","noIcon","paddingLeft","space","xs","minimized","paddingRight"],"mappings":";;;AAIA,MAAMA,QAAQA,OAAO;AAAA,EACnBC,YAAYC,MAAMC,OAAOC;AAC3B;AAEa,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,8BACA;AAAA,EACEC,QAAQ;AAAA,IACNC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRC,OAAOZ,MAAMC,OAAOY;AAAAA;AAAAA,IAGpB,WAAWf,MAAM;AAAA,IAEjB,WAAW;AAAA,MACTgB,SAAS;AAAA,MACT,GAAGhB,MAAM;AAAA,IACX;AAAA,IAEA,mBAAmB;AAAA,MACjB,GAAGiB;AAAAA,IACL;AAAA;AAAA,IAGAC,QAAQ;AAAA,IACR,OAAO;AAAA,MACLA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,QAAQ;AAAA,IACNC,aAAalB,MAAMmB,MAAMC;AAAAA,EAC3B;AAAA,EACAC,WAAW;AAAA,IACTZ,gBAAgB;AAAA,IAChBa,cAAc;AAAA,EAChB;AACF,CACF;"}

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

@@ -7,7 +7,7 @@ const {
   root: {
     display: "block",
     background: theme.colors.atmo1,
-    marginTop: theme.verticalNavigation.actionsMarginTop,
+    marginTop: "auto",
     "& :not(:last-child)": {
       marginBottom: "8px"
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Actions.styles.js","sources":["../../../../../src/components/VerticalNavigation/Actions/Actions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationActions\",\n  {\n    root: {\n      display: \"block\",\n      background: theme.colors.atmo1,\n      marginTop: theme.verticalNavigation.actionsMarginTop,\n\n      \"& :not(:last-child)\": {\n        marginBottom: \"8px\",\n      },\n    },\n    hide: {\n      display: \"none\",\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","display","background","theme","colors","atmo1","marginTop","verticalNavigation","actionsMarginTop","marginBottom","hide"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,+BACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAYC,MAAMC,OAAOC;AAAAA,IACzBC,WAAWH,MAAMI,mBAAmBC;AAAAA,IAEpC,uBAAuB;AAAA,MACrBC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJT,SAAS;AAAA,EACX;AACF,CACF;"}
+{"version":3,"file":"Actions.styles.js","sources":["../../../../../src/components/VerticalNavigation/Actions/Actions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationActions\",\n  {\n    root: {\n      display: \"block\",\n      background: theme.colors.atmo1,\n      marginTop: \"auto\",\n\n      \"& :not(:last-child)\": {\n        marginBottom: \"8px\",\n      },\n    },\n    hide: {\n      display: \"none\",\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","display","background","theme","colors","atmo1","marginTop","marginBottom","hide"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,+BACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAYC,MAAMC,OAAOC;AAAAA,IACzBC,WAAW;AAAA,IAEX,uBAAuB;AAAA,MACrBC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJP,SAAS;AAAA,EACX;AACF,CACF;"}

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

@@ -3,18 +3,20 @@ import { DropRightXS } from "@hitachivantara/uikit-react-icons";
 import { useClasses } from "./NavigationSlider.styles.js";
 import { staticClasses } from "./NavigationSlider.styles.js";
 import { HvButton } from "../../Button/Button.js";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { HvListContainer } from "../../ListContainer/ListContainer.js";
 import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
-const HvVerticalNavigationSlider = ({
-  id,
-  classes: classesProp,
-  data,
-  selected,
-  onNavigateToTarget,
-  onNavigateToChild,
-  forwardButtonAriaLabel = "Navigate to submenu"
-}) => {
+const HvVerticalNavigationSlider = (props) => {
+  const {
+    id,
+    classes: classesProp,
+    data,
+    selected,
+    onNavigateToTarget,
+    onNavigateToChild,
+    forwardButtonAriaLabel = "Navigate to submenu"
+  } = useDefaultProps("HvVerticalNavigationSlider", props);
   const {
     classes
   } = useClasses(classesProp);

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationSlider.js","sources":["../../../../../src/components/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvListContainer, HvListItem } from \"@core/components/ListContainer\";\nimport { HvOverflowTooltip } from \"@core/components/OverflowTooltip\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { NavigationData } from \"../VerticalNavigationContext\";\n\nimport { staticClasses, useClasses } from \"./NavigationSlider.styles\";\n\nexport { staticClasses as verticalNavigationSliderClasses };\n\nexport type HvVerticalNavigationSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationSliderProps {\n  /**\n   * Id to be applied to the root node of the panel.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvVerticalNavigationSliderClasses;\n  /**\n   * An array containing the data for each menu item.\n   *\n   * id - the id to be applied to the root element.\n   * label - the label to be rendered on the menu item.\n   * icon - the icon react element\n   * data - sub-menu items\n   * href - the url used for navigation.\n   * target - the behavior when opening an url.\n   */\n  data?: NavigationData[];\n  /**\n   * The selected item id.\n   */\n  selected?: string;\n  /**\n   * Triggered when the item is clicked.\n   */\n  onNavigateToTarget?: (\n    event: React.MouseEvent<HTMLLIElement>,\n    item: NavigationData\n  ) => void;\n  /**\n   * Triggered when the navigate to child button is clicked.\n   */\n  onNavigateToChild?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    item: NavigationData\n  ) => void;\n  /** Aria label to apply to the navigate to submenu button on the list items. */\n  forwardButtonAriaLabel?: string;\n}\n\nexport const HvVerticalNavigationSlider = ({\n  id,\n  classes: classesProp,\n  data,\n  selected,\n  onNavigateToTarget,\n  onNavigateToChild,\n  forwardButtonAriaLabel = \"Navigate to submenu\",\n}: HvVerticalNavigationSliderProps) => {\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <HvListContainer interactive id={id}>\n      {data &&\n        data.map((item) => (\n          <HvListItem\n            key={item.id}\n            classes={{\n              root: classes.root,\n              selected: classes.listItemSelected,\n              focus: classes.listItemFocus,\n            }}\n            onClick={(event) => {\n              onNavigateToTarget?.(event, item);\n            }}\n            aria-label={item.label}\n            aria-current={\n              selected === item.id ? (item.href ? \"page\" : true) : undefined\n            }\n            selected={selected === item.id}\n            startAdornment={item.icon ? <div>{item.icon}</div> : undefined}\n            endAdornment={\n              item.data && item.data.length > 0 ? (\n                <HvButton\n                  icon\n                  onClick={(event) => {\n                    onNavigateToChild?.(event, item);\n                  }}\n                  aria-label={forwardButtonAriaLabel}\n                >\n                  <DropRightXS />\n                </HvButton>\n              ) : undefined\n            }\n          >\n            <HvOverflowTooltip data={item.label} />\n          </HvListItem>\n        ))}\n    </HvListContainer>\n  );\n};\n"],"names":["HvVerticalNavigationSlider","id","classes","classesProp","data","selected","onNavigateToTarget","onNavigateToChild","forwardButtonAriaLabel","useClasses","map","item","root","listItemSelected","focus","listItemFocus","event","label","href","undefined","icon","length"],"mappings":";;;;;;;;AAyDO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,yBAAyB;AACM,MAAM;AAC/B,QAAA;AAAA,IAAEN;AAAAA,EAAAA,IAAYO,WAAWN,WAAW;AAGxC,SAAA,oBAAC,iBAAgB,EAAA,aAAW,MAAC,IAC1BC,UACCA,QAAAA,KAAKM,IAAKC,CAAAA,SACP,oBAAA,YAAA,EAEC,SAAS;AAAA,IACPC,MAAMV,QAAQU;AAAAA,IACdP,UAAUH,QAAQW;AAAAA,IAClBC,OAAOZ,QAAQa;AAAAA,EAAAA,GAEjB,SAAUC,CAAU,UAAA;AAClBV,6DAAqBU,OAAOL;AAAAA,EAAI,GAElC,cAAYA,KAAKM,OACjB,gBACEZ,aAAaM,KAAKV,KAAMU,KAAKO,OAAO,SAAS,OAAQC,QAEvD,UAAUd,aAAaM,KAAKV,IAC5B,gBAAgBU,KAAKS,OAAO,oBAAC,SAAKT,UAAKS,KAAAA,KAAK,CAAA,IAASD,QACrD,cACER,KAAKP,QAAQO,KAAKP,KAAKiB,SAAS,IAC9B,oBAAC,YACC,MAAI,MACJ,SAAUL,CAAU,UAAA;AAClBT,2DAAoBS,OAAOL;AAAAA,EAAI,GAEjC,cAAYH,wBAEZ,UAAC,oBAAA,aAAA,CAAA,CAAW,EACd,CAAA,IACEW,QAGN,UAAC,oBAAA,mBAAA,EAAkB,MAAMR,KAAKM,MAAAA,CAAM,KA7B/BN,KAAKV,EA8BZ,CACD,EACL,CAAA;AAEJ;"}
+{"version":3,"file":"NavigationSlider.js","sources":["../../../../../src/components/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvListContainer, HvListItem } from \"@core/components/ListContainer\";\nimport { HvOverflowTooltip } from \"@core/components/OverflowTooltip\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks\";\nimport { NavigationData } from \"../VerticalNavigationContext\";\n\nimport { staticClasses, useClasses } from \"./NavigationSlider.styles\";\n\nexport { staticClasses as verticalNavigationSliderClasses };\n\nexport type HvVerticalNavigationSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationSliderProps {\n  /**\n   * Id to be applied to the root node of the panel.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvVerticalNavigationSliderClasses;\n  /**\n   * An array containing the data for each menu item.\n   *\n   * id - the id to be applied to the root element.\n   * label - the label to be rendered on the menu item.\n   * icon - the icon react element\n   * data - sub-menu items\n   * href - the url used for navigation.\n   * target - the behavior when opening an url.\n   */\n  data?: NavigationData[];\n  /**\n   * The selected item id.\n   */\n  selected?: string;\n  /**\n   * Triggered when the item is clicked.\n   */\n  onNavigateToTarget?: (\n    event: React.MouseEvent<HTMLLIElement>,\n    item: NavigationData\n  ) => void;\n  /**\n   * Triggered when the navigate to child button is clicked.\n   */\n  onNavigateToChild?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    item: NavigationData\n  ) => void;\n  /** Aria label to apply to the navigate to submenu button on the list items. */\n  forwardButtonAriaLabel?: string;\n}\n\nexport const HvVerticalNavigationSlider = (\n  props: HvVerticalNavigationSliderProps\n) => {\n  const {\n    id,\n    classes: classesProp,\n    data,\n    selected,\n    onNavigateToTarget,\n    onNavigateToChild,\n    forwardButtonAriaLabel = \"Navigate to submenu\",\n  } = useDefaultProps(\"HvVerticalNavigationSlider\", props);\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <HvListContainer interactive id={id}>\n      {data &&\n        data.map((item) => (\n          <HvListItem\n            key={item.id}\n            classes={{\n              root: classes.root,\n              selected: classes.listItemSelected,\n              focus: classes.listItemFocus,\n            }}\n            onClick={(event) => {\n              onNavigateToTarget?.(event, item);\n            }}\n            aria-label={item.label}\n            aria-current={\n              selected === item.id ? (item.href ? \"page\" : true) : undefined\n            }\n            selected={selected === item.id}\n            startAdornment={item.icon ? <div>{item.icon}</div> : undefined}\n            endAdornment={\n              item.data && item.data.length > 0 ? (\n                <HvButton\n                  icon\n                  onClick={(event) => {\n                    onNavigateToChild?.(event, item);\n                  }}\n                  aria-label={forwardButtonAriaLabel}\n                >\n                  <DropRightXS />\n                </HvButton>\n              ) : undefined\n            }\n          >\n            <HvOverflowTooltip data={item.label} />\n          </HvListItem>\n        ))}\n    </HvListContainer>\n  );\n};\n"],"names":["HvVerticalNavigationSlider","props","id","classes","classesProp","data","selected","onNavigateToTarget","onNavigateToChild","forwardButtonAriaLabel","useDefaultProps","useClasses","map","item","root","listItemSelected","focus","listItemFocus","event","label","href","undefined","icon","length"],"mappings":";;;;;;;;;AA0DaA,MAAAA,6BAA6BA,CACxCC,UACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,yBAAyB;AAAA,EAAA,IACvBC,gBAAgB,8BAA8BT,KAAK;AACjD,QAAA;AAAA,IAAEE;AAAAA,EAAAA,IAAYQ,WAAWP,WAAW;AAGxC,SAAA,oBAAC,iBAAgB,EAAA,aAAW,MAAC,IAC1BC,UACCA,QAAAA,KAAKO,IAAKC,CAAAA,SACP,oBAAA,YAAA,EAEC,SAAS;AAAA,IACPC,MAAMX,QAAQW;AAAAA,IACdR,UAAUH,QAAQY;AAAAA,IAClBC,OAAOb,QAAQc;AAAAA,EAAAA,GAEjB,SAAUC,CAAU,UAAA;AAClBX,6DAAqBW,OAAOL;AAAAA,EAAI,GAElC,cAAYA,KAAKM,OACjB,gBACEb,aAAaO,KAAKX,KAAMW,KAAKO,OAAO,SAAS,OAAQC,QAEvD,UAAUf,aAAaO,KAAKX,IAC5B,gBAAgBW,KAAKS,OAAO,oBAAC,SAAKT,UAAKS,KAAAA,KAAK,CAAA,IAASD,QACrD,cACER,KAAKR,QAAQQ,KAAKR,KAAKkB,SAAS,IAC9B,oBAAC,YACC,MAAI,MACJ,SAAUL,CAAU,UAAA;AAClBV,2DAAoBU,OAAOL;AAAAA,EAAI,GAEjC,cAAYJ,wBAEZ,UAAC,oBAAA,aAAA,CAAA,CAAW,EACd,CAAA,IACEY,QAGN,UAAC,oBAAA,mBAAA,EAAkB,MAAMR,KAAKM,MAAAA,CAAM,KA7B/BN,KAAKX,EA8BZ,CACD,EACL,CAAA;AAEJ;"}

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

@@ -7,7 +7,7 @@ const {
   root: {
     display: "flex",
     alignItems: "center",
-    borderLeft: theme.verticalNavigation.inactiveBorderLeft,
+    borderLeft: `4px solid transparent`,
     minHeight: "48px",
     marginBottom: "8px",
     "& > button": {
@@ -16,7 +16,7 @@ const {
   },
   listItemSelected: {
     background: theme.colors.atmo3,
-    borderLeft: theme.verticalNavigation.activeBorderLeft,
+    borderLeft: `4px solid ${theme.colors.secondary}`,
     "& *": {
       background: theme.colors.atmo3
     }

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationSlider.styles.js","sources":["../../../../../src/components/VerticalNavigation/NavigationSlider/NavigationSlider.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationSlider\",\n  {\n    root: {\n      display: \"flex\",\n      alignItems: \"center\",\n      borderLeft: theme.verticalNavigation.inactiveBorderLeft,\n      minHeight: \"48px\",\n      marginBottom: \"8px\",\n      \"& > button\": {\n        marginLeft: \"auto\",\n      },\n    },\n    listItemSelected: {\n      background: theme.colors.atmo3,\n      borderLeft: theme.verticalNavigation.activeBorderLeft,\n      \"& *\": {\n        background: theme.colors.atmo3,\n      },\n    },\n    listItemFocus: {\n      background: theme.colors.atmo3,\n      \"& *\": {\n        background: theme.colors.atmo3,\n      },\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","borderLeft","theme","verticalNavigation","inactiveBorderLeft","minHeight","marginBottom","marginLeft","listItemSelected","background","colors","atmo3","activeBorderLeft","listItemFocus"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,8BACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,YAAYC,MAAMC,mBAAmBC;AAAAA,IACrCC,WAAW;AAAA,IACXC,cAAc;AAAA,IACd,cAAc;AAAA,MACZC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBC,YAAYP,MAAMQ,OAAOC;AAAAA,IACzBV,YAAYC,MAAMC,mBAAmBS;AAAAA,IACrC,OAAO;AAAA,MACLH,YAAYP,MAAMQ,OAAOC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAE,eAAe;AAAA,IACbJ,YAAYP,MAAMQ,OAAOC;AAAAA,IACzB,OAAO;AAAA,MACLF,YAAYP,MAAMQ,OAAOC;AAAAA,IAC3B;AAAA,EACF;AACF,CACF;"}
+{"version":3,"file":"NavigationSlider.styles.js","sources":["../../../../../src/components/VerticalNavigation/NavigationSlider/NavigationSlider.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationSlider\",\n  {\n    root: {\n      display: \"flex\",\n      alignItems: \"center\",\n      borderLeft: `4px solid transparent`,\n      minHeight: \"48px\",\n      marginBottom: \"8px\",\n      \"& > button\": {\n        marginLeft: \"auto\",\n      },\n    },\n    listItemSelected: {\n      background: theme.colors.atmo3,\n      borderLeft: `4px solid ${theme.colors.secondary}`,\n      \"& *\": {\n        background: theme.colors.atmo3,\n      },\n    },\n    listItemFocus: {\n      background: theme.colors.atmo3,\n      \"& *\": {\n        background: theme.colors.atmo3,\n      },\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","borderLeft","minHeight","marginBottom","marginLeft","listItemSelected","background","theme","colors","atmo3","secondary","listItemFocus"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,8BACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,YAAa;AAAA,IACbC,WAAW;AAAA,IACXC,cAAc;AAAA,IACd,cAAc;AAAA,MACZC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBC,YAAYC,MAAMC,OAAOC;AAAAA,IACzBR,YAAa,aAAYM,MAAMC,OAAOE,SAAU;AAAA,IAChD,OAAO;AAAA,MACLJ,YAAYC,MAAMC,OAAOC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAE,eAAe;AAAA,IACbL,YAAYC,MAAMC,OAAOC;AAAAA,IACzB,OAAO;AAAA,MACLH,YAAYC,MAAMC,OAAOC;AAAAA,IAC3B;AAAA,EACF;AACF,CACF;"}

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

@@ -9,6 +9,7 @@ import { useDescendant, DescendantProvider } from "./descendants.js";
 import { TreeViewControlContext, TreeViewStateContext } from "./TreeViewContext.js";
 import { VerticalNavigationContext } from "../VerticalNavigationContext.js";
 import { IconWrapper } from "./IconWrapper/IconWrapper.js";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const preventSelection = (event, disabled) => {
   if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
@@ -34,7 +35,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef((props, ref) => {
     children,
     disableTooltip,
     ...others
-  } = props;
+  } = useDefaultProps("HvVerticalNavigationTreeViewItem", props);
   const {
     classes,
     cx

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

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

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

@@ -3,13 +3,13 @@ import { outlineStyles } from "../../../utils/focusUtils.js";
 import { createClasses } from "../../../utils/classes.js";
 const selected = () => ({
   background: theme.colors.atmo3,
-  borderLeft: theme.verticalNavigation.activeBorderLeft,
+  borderLeft: `4px solid ${theme.colors.secondary}`,
   "& *": {
     background: theme.colors.atmo3
   }
 });
 const hover = () => ({
-  background: theme.verticalNavigation.hoverColor
+  background: theme.colors.containerBackgroundHover
 });
 const {
   staticClasses,
@@ -44,7 +44,7 @@ const {
     justifyContent: "flex-start",
     alignItems: "center",
     height: "32px",
-    borderLeft: theme.verticalNavigation.inactiveBorderLeft,
+    borderLeft: `4px solid transparent`,
     paddingRight: theme.space.xs,
     "&$minimized": {
       justifyContent: "center",