@hitachivantara/uikit-react-core 5.39.1 → 5.39.3

package/dist/cjs/components/ToggleButton/ToggleButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.cjs","sources":["../../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\n\nexport interface HvToggleButtonProps\n  extends HvBaseProps<HTMLButtonElement, \"onClick\"> {\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n  /** Defines if the button is selected. When defined the button state becomes controlled. */\n  selected?: boolean;\n  /** Defines if the button is disabled. */\n  disabled?: boolean;\n  /** Icon for when not selected. Ignored if the component has children. */\n  notSelectedIcon?: React.ReactNode;\n  /** Icon for when selected. Ignored if the component has children. */\n  selectedIcon?: React.ReactNode;\n  /** Function called when icon is clicked. */\n  onClick?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    selected: boolean\n  ) => void;\n}\n\nexport const HvToggleButton = forwardRef<\n  HTMLButtonElement,\n  HvToggleButtonProps\n>((props, ref) => {\n  const {\n    defaultSelected,\n    selected,\n    notSelectedIcon,\n    selectedIcon = null,\n    onClick,\n    children,\n    ...others\n  } = useDefaultProps(\"HvToggleButton\", props);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected)\n  );\n\n  const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setIsSelected(!isSelected);\n    onClick?.(event, !isSelected);\n  };\n\n  return (\n    <HvButton\n      ref={ref}\n      icon\n      aria-pressed={isSelected}\n      onClick={onClickHandler}\n      {...others}\n    >\n      {children || (!isSelected ? notSelectedIcon : selectedIcon)}\n    </HvButton>\n  );\n});\n"],"names":["HvToggleButton","forwardRef","props","ref","defaultSelected","selected","notSelectedIcon","selectedIcon","onClick","children","others","useDefaultProps","isSelected","setIsSelected","useControlled","Boolean","onClickHandler","event","jsx","HvButton"],"mappings":";;;;;;;AA0BO,MAAMA,iBAAiBC,MAAAA,WAG5B,CAACC,OAAOC,QAAQ;AACV,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,eAAe;AAAA,IACfC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,kBAAkBT,KAAK;AAErC,QAAA,CAACU,YAAYC,aAAa,IAAIC,cAAAA,cAClCT,UACAU,QAAQX,eAAe,CACzB;AAEMY,QAAAA,iBAAiBA,CAACC,UAA+C;AACrEJ,kBAAc,CAACD,UAAU;AACfK,cAAAA,OAAO,CAACL,UAAU;AAAA,EAAA;AAG9B,SACGM,2BAAA,IAAAC,OAAA,UAAA,EACC,KACA,MAAI,MACJ,gBAAcP,YACd,SAASI,gBACLN,GAAAA,QAEHD,UAAAA,aAAa,CAACG,aAAaN,kBAAkBC,cAChD,CAAA;AAEJ,CAAC;;"}
+{"version":3,"file":"ToggleButton.cjs","sources":["../../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\n\nexport interface HvToggleButtonProps\n  extends HvBaseProps<HTMLButtonElement, \"onClick\"> {\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n  /** Defines if the button is selected. When defined the button state becomes controlled. */\n  selected?: boolean;\n  /** Defines if the button is disabled. */\n  disabled?: boolean;\n  /** Icon for when not selected. Ignored if the component has children. */\n  notSelectedIcon?: React.ReactNode;\n  /** Icon for when selected. Ignored if the component has children. */\n  selectedIcon?: React.ReactNode;\n  /** Function called when icon is clicked. */\n  onClick?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    selected: boolean\n  ) => void;\n}\n\nexport const HvToggleButton = forwardRef<\n  HTMLButtonElement,\n  HvToggleButtonProps\n>((props, ref) => {\n  const {\n    defaultSelected,\n    selected,\n    notSelectedIcon,\n    selectedIcon = null,\n    onClick,\n    children,\n    ...others\n  } = useDefaultProps(\"HvToggleButton\", props);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected)\n  );\n\n  const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setIsSelected(!isSelected);\n    onClick?.(event, !isSelected);\n  };\n\n  return (\n    <HvButton\n      ref={ref}\n      icon\n      aria-pressed={isSelected}\n      onClick={onClickHandler}\n      {...others}\n    >\n      {children || (!isSelected ? notSelectedIcon : selectedIcon)}\n    </HvButton>\n  );\n});\n"],"names":["forwardRef","useDefaultProps","useControlled","jsx","HvButton"],"mappings":";;;;;;;AA0BO,MAAM,iBAAiBA,MAAA,WAG5B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDC,gBAAgB,gBAAA,kBAAkB,KAAK;AAErC,QAAA,CAAC,YAAY,aAAa,IAAIC,cAAA;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGnB,QAAA,iBAAiB,CAAC,UAA+C;AACrE,kBAAc,CAAC,UAAU;AACf,cAAA,OAAO,CAAC,UAAU;AAAA,EAAA;AAI5B,SAAAC,2BAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAI;AAAA,MACJ,gBAAc;AAAA,MACd,SAAS;AAAA,MACR,GAAG;AAAA,MAEH,UAAA,aAAa,CAAC,aAAa,kBAAkB;AAAA,IAAA;AAAA,EAAA;AAGpD,CAAC;;"}

package/dist/cjs/components/Tooltip/Tooltip.cjs

@@ -18,25 +18,34 @@ const HvTooltip = React.forwardRef((props, ref) => {
     children,
     title,
     TransitionComponent = material.Fade,
-    TransitionProps = {
-      timeout: 400,
-      placement: "top"
-    },
+    TransitionProps = { timeout: 400, placement: "top" },
     containerId,
     ...others
   } = useDefaultProps.useDefaultProps("HvTooltip", props);
-  const {
-    rootId
-  } = useTheme.useTheme();
-  const {
-    classes
-  } = Tooltip_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { ref, open: open ?? void 0, enterDelay, placement, TransitionComponent, TransitionProps, className, classes: {
-    tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,
-    popper: classes.popper
-  }, title, PopperProps: {
-    container: document.getElementById(containerId || rootId)
-  }, ...others, children });
+  const { rootId } = useTheme.useTheme();
+  const { classes } = Tooltip_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Tooltip,
+    {
+      ref,
+      open: open ?? void 0,
+      enterDelay,
+      placement,
+      TransitionComponent,
+      TransitionProps,
+      className,
+      classes: {
+        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,
+        popper: classes.popper
+      },
+      title,
+      PopperProps: {
+        container: document.getElementById(containerId || rootId)
+      },
+      ...others,
+      children
+    }
+  );
 });
 exports.tooltipClasses = Tooltip_styles.staticClasses;
 exports.HvTooltip = HvTooltip;

package/dist/cjs/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, ReactElement } from \"react\";\nimport { Fade, Tooltip, TooltipProps as MuiTooltipProps } from \"@mui/material\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { getElementById } from \"@core/utils/document\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\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: \"top\" },\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: getElementById(containerId || rootId),\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","jsx","Tooltip","undefined","tooltip","tooltipMulti","popper","container","getElementById"],"mappings":";;;;;;;;;AA6DO,MAAMA,YAAYC,MAAAA,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,SAAAA;AAAAA,IACtBC,kBAAkB;AAAA,MAAEC,SAAS;AAAA,MAAKP,WAAW;AAAA,IAAM;AAAA,IACnDQ;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,aAAajB,KAAK;AAEhC,QAAA;AAAA,IAAEkB;AAAAA,MAAWC,SAAS,SAAA;AACtB,QAAA;AAAA,IAAEhB;AAAAA,EAAAA,IAAYiB,eAAAA,WAAWhB,WAAW;AAGxC,SAAAiB,2BAAA,IAACC,SACC,SAAA,EAAA,KACA,MAAMjB,QAAQkB,QACd,YACA,WACA,qBACA,iBACA,WACA,SAAS;AAAA,IACPC,SAAShB,YAAYL,QAAQqB,UAAUrB,QAAQsB;AAAAA,IAC/CC,QAAQvB,QAAQuB;AAAAA,EAAAA,GAElB,OACA,aAAa;AAAA,IACXC,WAAWC,SAAAA,eAAeb,eAAeG,MAAM;AAAA,EAAA,GAE7CF,GAAAA,QAEHP,SACH,CAAA;AAEJ,CAAC;;;"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, ReactElement } from \"react\";\nimport { Fade, Tooltip, TooltipProps as MuiTooltipProps } from \"@mui/material\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { getElementById } from \"@core/utils/document\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\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: \"top\" },\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: getElementById(containerId || rootId),\n      }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":["forwardRef","Fade","useDefaultProps","useTheme","useClasses","jsx","Tooltip","getElementById"],"mappings":";;;;;;;;;AA6DO,MAAM,YAAYA,MAAA,WAAW,CAAC,OAAuB,QAAQ;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,sBAAsBC,SAAA;AAAA,IACtB,kBAAkB,EAAE,SAAS,KAAK,WAAW,MAAM;AAAA,IACnD;AAAA,IACA,GAAG;AAAA,EAAA,IACDC,gBAAgB,gBAAA,aAAa,KAAK;AAEhC,QAAA,EAAE,WAAWC,SAAAA;AACnB,QAAM,EAAE,QAAA,IAAYC,eAAA,WAAW,WAAW;AAGxC,SAAAC,2BAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,QAAQ;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,QAC/C,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA;AAAA,MACA,aAAa;AAAA,QACX,WAAWC,SAAAA,eAAe,eAAe,MAAM;AAAA,MACjD;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;;;"}

package/dist/cjs/components/Tooltip/Tooltip.styles.cjs

@@ -3,10 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const material = require("@mui/material");
 const classes = require("../../utils/classes.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvTooltip", {
+const { staticClasses, useClasses } = classes.createClasses("HvTooltip", {
   root: {},
   tooltip: {},
   tooltipMulti: {},

package/dist/cjs/components/Tooltip/Tooltip.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.styles.cjs","sources":["../../../../src/components/Tooltip/Tooltip.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { tooltipClasses as MuitooltipClasses } from \"@mui/material\";\n\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":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,aAAa;AAAA,EACtEC,MAAM,CAAC;AAAA,EACPC,SAAS,CAAC;AAAA,EACVC,cAAc,CAAC;AAAA,EACfC,QAAQ;AAAA,IACN,CAAE,MAAKC,wBAAkBD,MAAO,EAAC,GAAG;AAAA,MAClCE,SAAS;AAAA,IACX;AAAA,IACA,CAAE,MAAKD,wBAAkBH,OAAQ,EAAC,GAAG;AAAA,MACnCK,YAAYC,YAAAA,MAAMD,WAAWE;AAAAA,MAC7B,GAAGD,YAAAA,MAAME,WAAWD;AAAAA,MACpBE,SAAS;AAAA,MACTC,OAAO;AAAA,MACPC,UAAU;AAAA,MACVC,iBAAiBN,YAAAA,MAAMO,OAAOC;AAAAA,MAC9BC,WAAWT,YAAAA,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,YAAMO,MAAAA,OAAOS,KAAM;AAAA,IAChD;AAAA,IACA,sBAAsB;AAAA,MACpBL,SAASX,YAAAA,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,YAAAA,MAAMiB,MAAMI;AAAAA,IACrB;AAAA,IACA,gBAAgB;AAAA,MACdjB,OAAOJ,YAAAA,MAAMiB,MAAMI;AAAAA,IACrB;AAAA,IACA,qBAAqB;AAAA,MACnBjB,OAAO;AAAA,IACT;AAAA,IACA,mBAAmB;AAAA,MACjBO,SAASX,YAAAA,MAAMiB,MAAMC;AAAAA,IACvB;AAAA,IACA,cAAc;AAAA,MACZP,SAAS;AAAA,MACTW,cAActB,YAAAA,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;;;"}
+{"version":3,"file":"Tooltip.styles.cjs","sources":["../../../../src/components/Tooltip/Tooltip.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { tooltipClasses as MuitooltipClasses } from \"@mui/material\";\n\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":["createClasses","MuitooltipClasses","theme"],"mappings":";;;;;AAKO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,aAAa;AAAA,EACtE,MAAM,CAAC;AAAA,EACP,SAAS,CAAC;AAAA,EACV,cAAc,CAAC;AAAA,EACf,QAAQ;AAAA,IACN,CAAC,MAAMC,wBAAkB,MAAM,EAAE,GAAG;AAAA,MAClC,SAAS;AAAA,IACX;AAAA,IACA,CAAC,MAAMA,wBAAkB,OAAO,EAAE,GAAG;AAAA,MACnC,YAAYC,YAAAA,MAAM,WAAW;AAAA,MAC7B,GAAGA,YAAAA,MAAM,WAAW;AAAA,MACpB,SAAS;AAAA,MACT,OAAO;AAAA,MACP,UAAU;AAAA,MACV,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,MAC9B,WAAWA,YAAAA,MAAM,OAAO;AAAA,MACxB,SAAS;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,cAAc;AAAA,QACd,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,MACT,cAAc,aAAaA,YAAM,MAAA,OAAO,KAAK;AAAA,IAC/C;AAAA,IACA,sBAAsB;AAAA,MACpB,SAASA,YAAAA,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,gBAAgB;AAAA,QACd,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,OAAOA,YAAAA,MAAM,MAAM;AAAA,IACrB;AAAA,IACA,gBAAgB;AAAA,MACd,OAAOA,YAAAA,MAAM,MAAM;AAAA,IACrB;AAAA,IACA,qBAAqB;AAAA,MACnB,OAAO;AAAA,IACT;AAAA,IACA,mBAAmB;AAAA,MACjB,SAASA,YAAAA,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,cAAcA,YAAAA,MAAM,MAAM;AAAA,MAC1B,OAAO;AAAA,QACL,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AAAA,EACR,iBAAiB,CAAC;AAAA,EAClB,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC;AAAA,EACR,gBAAgB,CAAC;AAAA,EACjB,WAAW,CAAC;AAAA,EACZ,cAAc,CAAC;AACjB,CAAC;;;"}

package/dist/cjs/components/TreeView/TreeItem/DefaultContent.cjs

@@ -5,9 +5,7 @@ const React = require("react");
 const useCss = require("../../../hooks/useCss.cjs");
 const classes = require("../../../utils/classes.cjs");
 const useHvTreeItem = require("./useHvTreeItem.cjs");
-const {
-  useClasses
-} = classes.createClasses("HvTreeContent", {
+const { useClasses } = classes.createClasses("HvTreeContent", {
   root: {},
   expanded: {},
   selected: {},
@@ -16,55 +14,63 @@ const {
   iconContainer: {},
   label: {}
 });
-const DefaultContent = React.forwardRef((props, ref) => {
-  const {
-    classes: classesProp,
-    className,
-    displayIcon,
-    expansionIcon,
-    icon: iconProp,
-    label,
-    nodeId,
-    onClick,
-    onMouseDown,
-    ...others
-  } = props;
-  const {
-    classes: classes2
-  } = useClasses(classesProp);
-  const {
-    cx
-  } = useCss.useCss();
-  const {
-    disabled,
-    expanded,
-    selected,
-    focused,
-    handleExpansion,
-    handleSelection,
-    preventSelection
-  } = useHvTreeItem.useHvTreeItem(nodeId);
-  const icon = iconProp ?? expansionIcon ?? displayIcon;
-  return (
-    /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { ...others, className: cx(className, classes2.root, {
-      [classes2.expanded]: expanded,
-      [classes2.selected]: selected,
-      [classes2.focused]: focused,
-      [classes2.disabled]: disabled
-    }), onClick: (event) => {
-      handleExpansion(event);
-      handleSelection(event);
-      onClick?.(event);
-    }, onMouseDown: (event) => {
-      preventSelection(event);
-      onMouseDown?.(event);
-    }, ref, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes2.iconContainer, children: icon }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes2.label, children: label })
-    ] })
-  );
-});
+const DefaultContent = React.forwardRef(
+  (props, ref) => {
+    const {
+      classes: classesProp,
+      className,
+      displayIcon,
+      expansionIcon,
+      icon: iconProp,
+      label,
+      nodeId,
+      onClick,
+      onMouseDown,
+      ...others
+    } = props;
+    const { classes: classes2 } = useClasses(classesProp);
+    const { cx } = useCss.useCss();
+    const {
+      disabled,
+      expanded,
+      selected,
+      focused,
+      handleExpansion,
+      handleSelection,
+      preventSelection
+    } = useHvTreeItem.useHvTreeItem(nodeId);
+    const icon = iconProp ?? expansionIcon ?? displayIcon;
+    return (
+      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ...others,
+          className: cx(className, classes2.root, {
+            [classes2.expanded]: expanded,
+            [classes2.selected]: selected,
+            [classes2.focused]: focused,
+            [classes2.disabled]: disabled
+          }),
+          onClick: (event) => {
+            handleExpansion(event);
+            handleSelection(event);
+            onClick?.(event);
+          },
+          onMouseDown: (event) => {
+            preventSelection(event);
+            onMouseDown?.(event);
+          },
+          ref,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes2.iconContainer, children: icon }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes2.label, children: label })
+          ]
+        }
+      )
+    );
+  }
+);
 exports.DefaultContent = DefaultContent;
 exports.useClasses = useClasses;
 //# sourceMappingURL=DefaultContent.cjs.map

package/dist/cjs/components/TreeView/TreeItem/DefaultContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultContent.cjs","sources":["../../../../../src/components/TreeView/TreeItem/DefaultContent.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, forwardRef } from \"react\";\n\nimport { useCss } from \"@core/hooks/useCss\";\nimport { ExtractNames, createClasses } from \"@core/utils/classes\";\n\nimport { useHvTreeItem } from \"./useHvTreeItem\";\n\nexport const { useClasses } = createClasses(\"HvTreeContent\", {\n  root: {},\n  expanded: {},\n  selected: {},\n  focused: {},\n  disabled: {},\n  iconContainer: {},\n  label: {},\n});\n\nexport type HvTreeContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends HTMLAttributes<HTMLElement> {\n  /** className applied to the root element. */\n  className?: string;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeContentClasses;\n  /** The tree node label. */\n  label?: ReactNode;\n  /** The id of the node. */\n  nodeId: string;\n  /** The icon to display next to the tree node's label. */\n  icon?: ReactNode;\n  /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n  expansionIcon?: ReactNode;\n  /** The icon to display next to the tree node's label. Either a parent or end icon. */\n  displayIcon?: ReactNode;\n}\n\n/**\n * Internal default TreeItem `component`.\n * Use this as a basis to create a custom component.\n */\nexport const DefaultContent = forwardRef<HTMLDivElement, HvTreeContentProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      displayIcon,\n      expansionIcon,\n      icon: iconProp,\n      label,\n      nodeId,\n      onClick,\n      onMouseDown,\n      ...others\n    } = props;\n    const { classes } = useClasses(classesProp);\n\n    const { cx } = useCss();\n\n    const {\n      disabled,\n      expanded,\n      selected,\n      focused,\n      handleExpansion,\n      handleSelection,\n      preventSelection,\n    } = useHvTreeItem(nodeId);\n\n    const icon = iconProp ?? expansionIcon ?? displayIcon;\n\n    return (\n      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */\n      <div\n        {...others}\n        className={cx(className, classes.root, {\n          [classes.expanded]: expanded,\n          [classes.selected]: selected,\n          [classes.focused]: focused,\n          [classes.disabled]: disabled,\n        })}\n        onClick={(event) => {\n          handleExpansion(event);\n          handleSelection(event);\n          onClick?.(event);\n        }}\n        onMouseDown={(event) => {\n          preventSelection(event);\n          onMouseDown?.(event);\n        }}\n        ref={ref}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div className={classes.label}>{label}</div>\n      </div>\n    );\n  }\n);\n"],"names":["useClasses","createClasses","root","expanded","selected","focused","disabled","iconContainer","label","DefaultContent","forwardRef","props","ref","classes","classesProp","className","displayIcon","expansionIcon","icon","iconProp","nodeId","onClick","onMouseDown","others","cx","useCss","handleExpansion","handleSelection","preventSelection","useHvTreeItem","jsxs","event","jsx"],"mappings":";;;;;;;AAOa,MAAA;AAAA,EAAEA;AAAW,IAAIC,QAAAA,cAAc,iBAAiB;AAAA,EAC3DC,MAAM,CAAC;AAAA,EACPC,UAAU,CAAC;AAAA,EACXC,UAAU,CAAC;AAAA,EACXC,SAAS,CAAC;AAAA,EACVC,UAAU,CAAC;AAAA,EACXC,eAAe,CAAC;AAAA,EAChBC,OAAO,CAAC;AACV,CAAC;AAyBM,MAAMC,iBAAiBC,MAAAA,WAC5B,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,MAAMC;AAAAA,IACNX;AAAAA,IACAY;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAAEE,SAAAA;AAAAA,EAAAA,IAAYb,WAAWc,WAAW;AAEpC,QAAA;AAAA,IAAEU;AAAAA,MAAOC,OAAO,OAAA;AAEhB,QAAA;AAAA,IACJnB;AAAAA,IACAH;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAqB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,cAAAA,cAAcT,MAAM;AAElBF,QAAAA,OAAOC,YAAYF,iBAAiBD;AAE1C;AAAA;AAAA,IAEEc,gCAAC,SACC,GAAIP,QACJ,WAAWC,GAAGT,WAAWF,SAAQX,MAAM;AAAA,MACrC,CAACW,SAAQV,QAAQ,GAAGA;AAAAA,MACpB,CAACU,SAAQT,QAAQ,GAAGA;AAAAA,MACpB,CAACS,SAAQR,OAAO,GAAGA;AAAAA,MACnB,CAACQ,SAAQP,QAAQ,GAAGA;AAAAA,IAAAA,CACrB,GACD,SAAUyB,CAAU,UAAA;AAClBL,sBAAgBK,KAAK;AACrBJ,sBAAgBI,KAAK;AACrBV,gBAAUU,KAAK;AAAA,IAAA,GAEjB,aAAcA,CAAU,UAAA;AACtBH,uBAAiBG,KAAK;AACtBT,oBAAcS,KAAK;AAAA,IAAA,GAErB,KAEA,UAAA;AAAA,MAAAC,2BAAA,IAAC,OAAI,EAAA,WAAWnB,SAAQN,eAAgBW,UAAK,MAAA;AAAA,MAC5Cc,2BAAA,IAAA,OAAA,EAAI,WAAWnB,SAAQL,OAAQA,UAAM,OAAA;AAAA,IAAA,GACxC;AAAA;AAEJ,CACF;;;"}
+{"version":3,"file":"DefaultContent.cjs","sources":["../../../../../src/components/TreeView/TreeItem/DefaultContent.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, forwardRef } from \"react\";\n\nimport { useCss } from \"@core/hooks/useCss\";\nimport { ExtractNames, createClasses } from \"@core/utils/classes\";\n\nimport { useHvTreeItem } from \"./useHvTreeItem\";\n\nexport const { useClasses } = createClasses(\"HvTreeContent\", {\n  root: {},\n  expanded: {},\n  selected: {},\n  focused: {},\n  disabled: {},\n  iconContainer: {},\n  label: {},\n});\n\nexport type HvTreeContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends HTMLAttributes<HTMLElement> {\n  /** className applied to the root element. */\n  className?: string;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeContentClasses;\n  /** The tree node label. */\n  label?: ReactNode;\n  /** The id of the node. */\n  nodeId: string;\n  /** The icon to display next to the tree node's label. */\n  icon?: ReactNode;\n  /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n  expansionIcon?: ReactNode;\n  /** The icon to display next to the tree node's label. Either a parent or end icon. */\n  displayIcon?: ReactNode;\n}\n\n/**\n * Internal default TreeItem `component`.\n * Use this as a basis to create a custom component.\n */\nexport const DefaultContent = forwardRef<HTMLDivElement, HvTreeContentProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      displayIcon,\n      expansionIcon,\n      icon: iconProp,\n      label,\n      nodeId,\n      onClick,\n      onMouseDown,\n      ...others\n    } = props;\n    const { classes } = useClasses(classesProp);\n\n    const { cx } = useCss();\n\n    const {\n      disabled,\n      expanded,\n      selected,\n      focused,\n      handleExpansion,\n      handleSelection,\n      preventSelection,\n    } = useHvTreeItem(nodeId);\n\n    const icon = iconProp ?? expansionIcon ?? displayIcon;\n\n    return (\n      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */\n      <div\n        {...others}\n        className={cx(className, classes.root, {\n          [classes.expanded]: expanded,\n          [classes.selected]: selected,\n          [classes.focused]: focused,\n          [classes.disabled]: disabled,\n        })}\n        onClick={(event) => {\n          handleExpansion(event);\n          handleSelection(event);\n          onClick?.(event);\n        }}\n        onMouseDown={(event) => {\n          preventSelection(event);\n          onMouseDown?.(event);\n        }}\n        ref={ref}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div className={classes.label}>{label}</div>\n      </div>\n    );\n  }\n);\n"],"names":["createClasses","forwardRef","classes","useCss","useHvTreeItem","jsxs","jsx"],"mappings":";;;;;;;AAOO,MAAM,EAAE,WAAA,IAAeA,QAAA,cAAc,iBAAiB;AAAA,EAC3D,MAAM,CAAC;AAAA,EACP,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS,CAAC;AAAA,EACV,UAAU,CAAC;AAAA,EACX,eAAe,CAAC;AAAA,EAChB,OAAO,CAAC;AACV,CAAC;AAyBM,MAAM,iBAAiBC,MAAA;AAAA,EAC5B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AACJ,UAAM,EAAE,SAAAC,SAAA,IAAY,WAAW,WAAW;AAEpC,UAAA,EAAE,OAAOC,OAAAA;AAET,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACEC,cAAAA,cAAc,MAAM;AAElB,UAAA,OAAO,YAAY,iBAAiB;AAE1C;AAAA;AAAA,MAEEC,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,WAAWH,SAAQ,MAAM;AAAA,YACrC,CAACA,SAAQ,QAAQ,GAAG;AAAA,YACpB,CAACA,SAAQ,QAAQ,GAAG;AAAA,YACpB,CAACA,SAAQ,OAAO,GAAG;AAAA,YACnB,CAACA,SAAQ,QAAQ,GAAG;AAAA,UAAA,CACrB;AAAA,UACD,SAAS,CAAC,UAAU;AAClB,4BAAgB,KAAK;AACrB,4BAAgB,KAAK;AACrB,sBAAU,KAAK;AAAA,UACjB;AAAA,UACA,aAAa,CAAC,UAAU;AACtB,6BAAiB,KAAK;AACtB,0BAAc,KAAK;AAAA,UACrB;AAAA,UACA;AAAA,UAEA,UAAA;AAAA,YAAAI,2BAAA,IAAC,OAAI,EAAA,WAAWJ,SAAQ,eAAgB,UAAK,MAAA;AAAA,YAC5CI,2BAAA,IAAA,OAAA,EAAI,WAAWJ,SAAQ,OAAQ,UAAM,OAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACxC;AAAA;AAAA,EAEJ;AACF;;;"}

package/dist/cjs/components/TreeView/TreeItem/TreeItem.cjs

@@ -11,115 +11,135 @@ const TreeItem_styles = require("./TreeItem.styles.cjs");
 const DefaultContent = require("./DefaultContent.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Collapse__default = /* @__PURE__ */ _interopDefault(Collapse);
-const HvTreeItem = React.forwardRef((props, ref) => {
-  const {
-    id: idProp,
-    nodeId,
-    children,
-    classes: classesProp,
-    className,
-    label,
-    disabled: disabledProp,
-    icon,
-    endIcon,
-    expandIcon,
-    collapseIcon,
-    ContentComponent: Component = DefaultContent.DefaultContent,
-    TransitionProps: transitionProps,
-    ContentProps: contentProps,
-    ...others
-  } = useDefaultProps.useDefaultProps("HvTreeItem", props);
-  const {
-    classes,
-    cx
-  } = TreeItem_styles.useClasses(classesProp);
-  const {
-    instance,
-    multiSelect,
-    disabledItemsFocusable,
-    treeId,
-    icons: contextIcons
-  } = TreeViewProvider.useTreeViewContext();
-  const id = idProp || treeId && nodeId && `${treeId}-${nodeId}` || void 0;
-  const [treeItemElement, setTreeItemElement] = React.useState(null);
-  const contentRef = React.useRef(null);
-  const handleRef = useForkRef.useForkRef(setTreeItemElement, ref);
-  const descendant = React.useMemo(() => ({
-    element: treeItemElement,
-    id: nodeId
-  }), [nodeId, treeItemElement]);
-  const {
-    index,
-    parentId
-  } = DescendantProvider.useDescendant(descendant);
-  const expandable = !!(Array.isArray(children) ? children.length : children);
-  const expanded = instance ? instance.isNodeExpanded(nodeId) : false;
-  const focused = instance ? instance.isNodeFocused(nodeId) : false;
-  const selected = instance ? instance.isNodeSelected(nodeId) : false;
-  const disabled = instance ? instance.isNodeDisabled(nodeId) : false;
-  const expansionIcon = !expanded ? expandIcon || contextIcons.defaultExpandIcon : collapseIcon || contextIcons.defaultCollapseIcon;
-  const displayIcon = expandable ? contextIcons.defaultParentIcon : endIcon || contextIcons.defaultEndIcon;
-  React.useEffect(() => {
-    if (instance && index !== -1) {
-      instance.updateNode({
-        id: nodeId,
-        idAttribute: id,
-        index,
-        parentId,
-        expandable,
-        disabled: disabledProp
-      });
-      return () => instance.removeNode(nodeId);
-    }
-    return void 0;
-  }, [instance, parentId, index, nodeId, expandable, disabledProp, id]);
-  React.useEffect(() => {
-    if (instance && label) {
-      return instance.mapFirstChar(nodeId, (contentRef.current?.textContent ?? "").substring(0, 1).toLowerCase());
-    }
-    return void 0;
-  }, [instance, nodeId, label]);
-  const handleFocus = (event) => {
-    if (event.target === event.currentTarget) {
-      const rootElement = typeof event.target.getRootNode === "function" ? event.target.getRootNode() : event.target.ownerDocument || document;
-      rootElement.getElementById(treeId).focus({
-        preventScroll: true
-      });
-    }
-    const unfocusable = !disabledItemsFocusable && disabled;
-    const canFocus = instance && !focused && !disabled && !unfocusable && event.currentTarget === event.target;
-    if (canFocus) {
-      instance.focusNode(event, nodeId);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "li",
-    {
-      id,
-      ref: handleRef,
-      role: "treeitem",
-      "aria-expanded": expandable ? expanded : void 0,
-      "aria-selected": multiSelect && selected || selected || void 0,
-      "aria-disabled": disabled || void 0,
-      className: cx(classes.root, className),
-      onFocus: handleFocus,
-      tabIndex: -1,
-      ...others,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Component, { ref: contentRef, nodeId, classes: {
-          root: classes.content,
-          expanded: classes.expanded,
-          selected: classes.selected,
-          focused: classes.focused,
-          disabled: classes.disabled,
-          label: classes.label,
-          iconContainer: classes.iconContainer
-        }, label, icon, expansionIcon: expandable && expansionIcon, displayIcon, ...contentProps }),
-        children && /* @__PURE__ */ jsxRuntime.jsx(DescendantProvider.DescendantProvider, { id: nodeId, children: /* @__PURE__ */ jsxRuntime.jsx(Collapse__default.default, { component: "ul", role: "group", unmountOnExit: true, className: classes.group, in: expanded, ...transitionProps, children }) })
-      ]
-    }
-  );
-});
+const HvTreeItem = React.forwardRef(
+  (props, ref) => {
+    const {
+      id: idProp,
+      nodeId,
+      children,
+      classes: classesProp,
+      className,
+      label,
+      disabled: disabledProp,
+      icon,
+      endIcon,
+      expandIcon,
+      collapseIcon,
+      ContentComponent: Component = DefaultContent.DefaultContent,
+      TransitionProps: transitionProps,
+      ContentProps: contentProps,
+      ...others
+    } = useDefaultProps.useDefaultProps("HvTreeItem", props);
+    const { classes, cx } = TreeItem_styles.useClasses(classesProp);
+    const {
+      instance,
+      multiSelect,
+      disabledItemsFocusable,
+      treeId,
+      icons: contextIcons
+    } = TreeViewProvider.useTreeViewContext();
+    const id = idProp || treeId && nodeId && `${treeId}-${nodeId}` || void 0;
+    const [treeItemElement, setTreeItemElement] = React.useState(null);
+    const contentRef = React.useRef(null);
+    const handleRef = useForkRef.useForkRef(setTreeItemElement, ref);
+    const descendant = React.useMemo(
+      () => ({ element: treeItemElement, id: nodeId }),
+      [nodeId, treeItemElement]
+    );
+    const { index, parentId } = DescendantProvider.useDescendant(descendant);
+    const expandable = !!(Array.isArray(children) ? children.length : children);
+    const expanded = instance ? instance.isNodeExpanded(nodeId) : false;
+    const focused = instance ? instance.isNodeFocused(nodeId) : false;
+    const selected = instance ? instance.isNodeSelected(nodeId) : false;
+    const disabled = instance ? instance.isNodeDisabled(nodeId) : false;
+    const expansionIcon = !expanded ? expandIcon || contextIcons.defaultExpandIcon : collapseIcon || contextIcons.defaultCollapseIcon;
+    const displayIcon = expandable ? contextIcons.defaultParentIcon : endIcon || contextIcons.defaultEndIcon;
+    React.useEffect(() => {
+      if (instance && index !== -1) {
+        instance.updateNode({
+          id: nodeId,
+          idAttribute: id,
+          index,
+          parentId,
+          expandable,
+          disabled: disabledProp
+        });
+        return () => instance.removeNode(nodeId);
+      }
+      return void 0;
+    }, [instance, parentId, index, nodeId, expandable, disabledProp, id]);
+    React.useEffect(() => {
+      if (instance && label) {
+        return instance.mapFirstChar(
+          nodeId,
+          (contentRef.current?.textContent ?? "").substring(0, 1).toLowerCase()
+        );
+      }
+      return void 0;
+    }, [instance, nodeId, label]);
+    const handleFocus = (event) => {
+      if (event.target === event.currentTarget) {
+        const rootElement = typeof event.target.getRootNode === "function" ? event.target.getRootNode() : event.target.ownerDocument || document;
+        rootElement.getElementById(treeId).focus({ preventScroll: true });
+      }
+      const unfocusable = !disabledItemsFocusable && disabled;
+      const canFocus = instance && !focused && !disabled && !unfocusable && event.currentTarget === event.target;
+      if (canFocus) {
+        instance.focusNode(event, nodeId);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        id,
+        ref: handleRef,
+        role: "treeitem",
+        "aria-expanded": expandable ? expanded : void 0,
+        "aria-selected": multiSelect && selected || selected || void 0,
+        "aria-disabled": disabled || void 0,
+        className: cx(classes.root, className),
+        onFocus: handleFocus,
+        tabIndex: -1,
+        ...others,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Component,
+            {
+              ref: contentRef,
+              nodeId,
+              classes: {
+                root: classes.content,
+                expanded: classes.expanded,
+                selected: classes.selected,
+                focused: classes.focused,
+                disabled: classes.disabled,
+                label: classes.label,
+                iconContainer: classes.iconContainer
+              },
+              label,
+              icon,
+              expansionIcon: expandable && expansionIcon,
+              displayIcon,
+              ...contentProps
+            }
+          ),
+          children && /* @__PURE__ */ jsxRuntime.jsx(DescendantProvider.DescendantProvider, { id: nodeId, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Collapse__default.default,
+            {
+              component: "ul",
+              role: "group",
+              unmountOnExit: true,
+              className: classes.group,
+              in: expanded,
+              ...transitionProps,
+              children
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
 exports.treeItemClasses = TreeItem_styles.staticClasses;
 exports.HvTreeItem = HvTreeItem;
 //# sourceMappingURL=TreeItem.cjs.map

package/dist/cjs/components/TreeView/TreeItem/TreeItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.cjs","sources":["../../../../../src/components/TreeView/TreeItem/TreeItem.tsx"],"sourcesContent":["import {\n  FocusEvent,\n  HTMLAttributes,\n  JSXElementConstructor,\n  ReactNode,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport Collapse from \"@mui/material/Collapse\";\nimport { TransitionProps } from \"@mui/material/transitions\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useTreeViewContext } from \"../internals/TreeViewProvider\";\nimport { DefaultTreeViewPlugins } from \"../internals/hooks/plugins\";\nimport {\n  DescendantProvider,\n  TreeItemDescendant,\n  useDescendant,\n} from \"../internals/DescendantProvider\";\nimport { staticClasses, useClasses } from \"./TreeItem.styles\";\nimport { DefaultContent, HvTreeContentClasses } from \"./DefaultContent\";\n\nexport { staticClasses as treeItemClasses };\n\nexport type HvTreeItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends HTMLAttributes<HTMLElement> {\n  /** className applied to the root element. */\n  className?: string;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeContentClasses;\n  /** The tree node label. */\n  label?: ReactNode;\n  /** The id of the node. */\n  nodeId: string;\n  /** The icon to display next to the tree node's label. */\n  icon?: ReactNode;\n  /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n  expansionIcon?: ReactNode;\n  /** The icon to display next to the tree node's label. Either a parent or end icon. */\n  displayIcon?: ReactNode;\n}\n\nexport interface HvTreeItemProps extends HTMLAttributes<HTMLElement> {\n  /** The element id */\n  id?: string;\n  /** The id of the node. */\n  nodeId: string;\n  /** The tree node label. */\n  label?: ReactNode;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeItemClasses;\n  /** If `true`, the node is disabled. */\n  disabled?: boolean;\n  /** The icon to display next to the tree node's label. */\n  icon?: ReactNode;\n  /** The component used for the content node. */\n  ContentComponent?: JSXElementConstructor<HvTreeContentProps>;\n  /** Props applied to the content component */\n  ContentProps?: HvTreeContentProps;\n  /** The content of the component. */\n  children?: ReactNode;\n  /** className applied to the root element. */\n  className?: string;\n  /** The icon used to collapse the node. */\n  collapseIcon?: ReactNode;\n  /** The icon displayed next to an end node. */\n  endIcon?: ReactNode;\n  /** The icon used to expand the node. */\n  expandIcon?: ReactNode;\n  /** The component used for the transition. */\n  TransitionComponent?: JSXElementConstructor<TransitionProps>;\n  /** Props applied to the transition component */\n  TransitionProps?: TransitionProps;\n}\n\nexport const HvTreeItem = forwardRef<HTMLLIElement, HvTreeItemProps>(\n  (props, ref) => {\n    const {\n      id: idProp,\n      nodeId,\n      children,\n      classes: classesProp,\n      className,\n      label,\n      disabled: disabledProp,\n      icon,\n      endIcon,\n      expandIcon,\n      collapseIcon,\n      ContentComponent: Component = DefaultContent,\n      TransitionProps: transitionProps,\n      ContentProps: contentProps,\n      ...others\n    } = useDefaultProps(\"HvTreeItem\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const {\n      instance,\n      multiSelect,\n      disabledItemsFocusable,\n      treeId,\n      icons: contextIcons,\n    } = useTreeViewContext<DefaultTreeViewPlugins>();\n\n    const id =\n      idProp || (treeId && nodeId && `${treeId}-${nodeId}`) || undefined;\n\n    const [treeItemElement, setTreeItemElement] =\n      useState<HTMLLIElement | null>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(setTreeItemElement, ref);\n\n    const descendant = useMemo<TreeItemDescendant>(\n      () => ({ element: treeItemElement!, id: nodeId }),\n      [nodeId, treeItemElement]\n    );\n\n    const { index, parentId } = useDescendant(descendant);\n\n    const expandable = !!(Array.isArray(children) ? children.length : children);\n    const expanded = instance ? instance.isNodeExpanded(nodeId) : false;\n    const focused = instance ? instance.isNodeFocused(nodeId) : false;\n    const selected = instance ? instance.isNodeSelected(nodeId) : false;\n    const disabled = instance ? instance.isNodeDisabled(nodeId) : false;\n\n    const expansionIcon = !expanded\n      ? expandIcon || contextIcons.defaultExpandIcon\n      : collapseIcon || contextIcons.defaultCollapseIcon;\n\n    const displayIcon = expandable\n      ? contextIcons.defaultParentIcon\n      : endIcon || contextIcons.defaultEndIcon;\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 (instance && index !== -1) {\n        instance.updateNode({\n          id: nodeId,\n          idAttribute: id,\n          index,\n          parentId,\n          expandable,\n          disabled: disabledProp,\n        });\n\n        return () => instance.removeNode(nodeId);\n      }\n\n      return undefined;\n    }, [instance, parentId, index, nodeId, expandable, disabledProp, id]);\n\n    useEffect(() => {\n      if (instance && label) {\n        return instance.mapFirstChar(\n          nodeId,\n          (contentRef.current?.textContent ?? \"\").substring(0, 1).toLowerCase()\n        );\n      }\n      return undefined;\n    }, [instance, nodeId, label]);\n\n    const handleFocus = (event: FocusEvent<HTMLLIElement, any>) => {\n      // DOM focus stays on the tree which manages focus with aria-activedescendant\n      if (event.target === event.currentTarget) {\n        const rootElement: any =\n          typeof event.target.getRootNode === \"function\"\n            ? event.target.getRootNode()\n            : event.target.ownerDocument || document;\n\n        rootElement.getElementById(treeId).focus({ preventScroll: true });\n      }\n\n      const unfocusable = !disabledItemsFocusable && disabled;\n      const canFocus =\n        instance &&\n        !focused &&\n        !disabled &&\n        !unfocusable &&\n        event.currentTarget === event.target;\n\n      if (canFocus) {\n        instance.focusNode(event, nodeId);\n      }\n    };\n\n    return (\n      <li\n        id={id}\n        ref={handleRef}\n        role=\"treeitem\"\n        aria-expanded={expandable ? expanded : undefined}\n        aria-selected={(multiSelect && selected) || selected || undefined}\n        aria-disabled={disabled || undefined}\n        className={cx(classes.root, className)}\n        // @ts-ignore\n        onFocus={handleFocus}\n        tabIndex={-1}\n        {...others}\n      >\n        <Component\n          ref={contentRef}\n          nodeId={nodeId}\n          classes={{\n            root: classes.content,\n            expanded: classes.expanded,\n            selected: classes.selected,\n            focused: classes.focused,\n            disabled: classes.disabled,\n            label: classes.label,\n            iconContainer: classes.iconContainer,\n          }}\n          label={label}\n          icon={icon}\n          expansionIcon={expandable && expansionIcon}\n          displayIcon={displayIcon}\n          {...contentProps}\n        />\n        {children && (\n          <DescendantProvider id={nodeId}>\n            <Collapse\n              component=\"ul\"\n              role=\"group\"\n              unmountOnExit\n              className={classes.group}\n              in={expanded}\n              {...transitionProps}\n            >\n              {children}\n            </Collapse>\n          </DescendantProvider>\n        )}\n      </li>\n    );\n  }\n);\n"],"names":["HvTreeItem","forwardRef","props","ref","id","idProp","nodeId","children","classes","classesProp","className","label","disabled","disabledProp","icon","endIcon","expandIcon","collapseIcon","ContentComponent","Component","DefaultContent","TransitionProps","transitionProps","ContentProps","contentProps","others","useDefaultProps","cx","useClasses","instance","multiSelect","disabledItemsFocusable","treeId","icons","contextIcons","useTreeViewContext","undefined","treeItemElement","setTreeItemElement","useState","contentRef","useRef","handleRef","useForkRef","descendant","useMemo","element","index","parentId","useDescendant","expandable","Array","isArray","length","expanded","isNodeExpanded","focused","isNodeFocused","selected","isNodeSelected","isNodeDisabled","expansionIcon","defaultExpandIcon","defaultCollapseIcon","displayIcon","defaultParentIcon","defaultEndIcon","useEffect","updateNode","idAttribute","removeNode","mapFirstChar","current","textContent","substring","toLowerCase","handleFocus","event","target","currentTarget","rootElement","getRootNode","ownerDocument","document","getElementById","focus","preventScroll","unfocusable","canFocus","focusNode","jsxs","root","jsx","content","iconContainer","DescendantProvider","Collapse","group"],"mappings":"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"}
+{"version":3,"file":"TreeItem.cjs","sources":["../../../../../src/components/TreeView/TreeItem/TreeItem.tsx"],"sourcesContent":["import {\n  FocusEvent,\n  HTMLAttributes,\n  JSXElementConstructor,\n  ReactNode,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport Collapse from \"@mui/material/Collapse\";\nimport { TransitionProps } from \"@mui/material/transitions\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useTreeViewContext } from \"../internals/TreeViewProvider\";\nimport { DefaultTreeViewPlugins } from \"../internals/hooks/plugins\";\nimport {\n  DescendantProvider,\n  TreeItemDescendant,\n  useDescendant,\n} from \"../internals/DescendantProvider\";\nimport { staticClasses, useClasses } from \"./TreeItem.styles\";\nimport { DefaultContent, HvTreeContentClasses } from \"./DefaultContent\";\n\nexport { staticClasses as treeItemClasses };\n\nexport type HvTreeItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends HTMLAttributes<HTMLElement> {\n  /** className applied to the root element. */\n  className?: string;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeContentClasses;\n  /** The tree node label. */\n  label?: ReactNode;\n  /** The id of the node. */\n  nodeId: string;\n  /** The icon to display next to the tree node's label. */\n  icon?: ReactNode;\n  /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n  expansionIcon?: ReactNode;\n  /** The icon to display next to the tree node's label. Either a parent or end icon. */\n  displayIcon?: ReactNode;\n}\n\nexport interface HvTreeItemProps extends HTMLAttributes<HTMLElement> {\n  /** The element id */\n  id?: string;\n  /** The id of the node. */\n  nodeId: string;\n  /** The tree node label. */\n  label?: ReactNode;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeItemClasses;\n  /** If `true`, the node is disabled. */\n  disabled?: boolean;\n  /** The icon to display next to the tree node's label. */\n  icon?: ReactNode;\n  /** The component used for the content node. */\n  ContentComponent?: JSXElementConstructor<HvTreeContentProps>;\n  /** Props applied to the content component */\n  ContentProps?: HvTreeContentProps;\n  /** The content of the component. */\n  children?: ReactNode;\n  /** className applied to the root element. */\n  className?: string;\n  /** The icon used to collapse the node. */\n  collapseIcon?: ReactNode;\n  /** The icon displayed next to an end node. */\n  endIcon?: ReactNode;\n  /** The icon used to expand the node. */\n  expandIcon?: ReactNode;\n  /** The component used for the transition. */\n  TransitionComponent?: JSXElementConstructor<TransitionProps>;\n  /** Props applied to the transition component */\n  TransitionProps?: TransitionProps;\n}\n\nexport const HvTreeItem = forwardRef<HTMLLIElement, HvTreeItemProps>(\n  (props, ref) => {\n    const {\n      id: idProp,\n      nodeId,\n      children,\n      classes: classesProp,\n      className,\n      label,\n      disabled: disabledProp,\n      icon,\n      endIcon,\n      expandIcon,\n      collapseIcon,\n      ContentComponent: Component = DefaultContent,\n      TransitionProps: transitionProps,\n      ContentProps: contentProps,\n      ...others\n    } = useDefaultProps(\"HvTreeItem\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const {\n      instance,\n      multiSelect,\n      disabledItemsFocusable,\n      treeId,\n      icons: contextIcons,\n    } = useTreeViewContext<DefaultTreeViewPlugins>();\n\n    const id =\n      idProp || (treeId && nodeId && `${treeId}-${nodeId}`) || undefined;\n\n    const [treeItemElement, setTreeItemElement] =\n      useState<HTMLLIElement | null>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(setTreeItemElement, ref);\n\n    const descendant = useMemo<TreeItemDescendant>(\n      () => ({ element: treeItemElement!, id: nodeId }),\n      [nodeId, treeItemElement]\n    );\n\n    const { index, parentId } = useDescendant(descendant);\n\n    const expandable = !!(Array.isArray(children) ? children.length : children);\n    const expanded = instance ? instance.isNodeExpanded(nodeId) : false;\n    const focused = instance ? instance.isNodeFocused(nodeId) : false;\n    const selected = instance ? instance.isNodeSelected(nodeId) : false;\n    const disabled = instance ? instance.isNodeDisabled(nodeId) : false;\n\n    const expansionIcon = !expanded\n      ? expandIcon || contextIcons.defaultExpandIcon\n      : collapseIcon || contextIcons.defaultCollapseIcon;\n\n    const displayIcon = expandable\n      ? contextIcons.defaultParentIcon\n      : endIcon || contextIcons.defaultEndIcon;\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 (instance && index !== -1) {\n        instance.updateNode({\n          id: nodeId,\n          idAttribute: id,\n          index,\n          parentId,\n          expandable,\n          disabled: disabledProp,\n        });\n\n        return () => instance.removeNode(nodeId);\n      }\n\n      return undefined;\n    }, [instance, parentId, index, nodeId, expandable, disabledProp, id]);\n\n    useEffect(() => {\n      if (instance && label) {\n        return instance.mapFirstChar(\n          nodeId,\n          (contentRef.current?.textContent ?? \"\").substring(0, 1).toLowerCase()\n        );\n      }\n      return undefined;\n    }, [instance, nodeId, label]);\n\n    const handleFocus = (event: FocusEvent<HTMLLIElement, any>) => {\n      // DOM focus stays on the tree which manages focus with aria-activedescendant\n      if (event.target === event.currentTarget) {\n        const rootElement: any =\n          typeof event.target.getRootNode === \"function\"\n            ? event.target.getRootNode()\n            : event.target.ownerDocument || document;\n\n        rootElement.getElementById(treeId).focus({ preventScroll: true });\n      }\n\n      const unfocusable = !disabledItemsFocusable && disabled;\n      const canFocus =\n        instance &&\n        !focused &&\n        !disabled &&\n        !unfocusable &&\n        event.currentTarget === event.target;\n\n      if (canFocus) {\n        instance.focusNode(event, nodeId);\n      }\n    };\n\n    return (\n      <li\n        id={id}\n        ref={handleRef}\n        role=\"treeitem\"\n        aria-expanded={expandable ? expanded : undefined}\n        aria-selected={(multiSelect && selected) || selected || undefined}\n        aria-disabled={disabled || undefined}\n        className={cx(classes.root, className)}\n        // @ts-ignore\n        onFocus={handleFocus}\n        tabIndex={-1}\n        {...others}\n      >\n        <Component\n          ref={contentRef}\n          nodeId={nodeId}\n          classes={{\n            root: classes.content,\n            expanded: classes.expanded,\n            selected: classes.selected,\n            focused: classes.focused,\n            disabled: classes.disabled,\n            label: classes.label,\n            iconContainer: classes.iconContainer,\n          }}\n          label={label}\n          icon={icon}\n          expansionIcon={expandable && expansionIcon}\n          displayIcon={displayIcon}\n          {...contentProps}\n        />\n        {children && (\n          <DescendantProvider id={nodeId}>\n            <Collapse\n              component=\"ul\"\n              role=\"group\"\n              unmountOnExit\n              className={classes.group}\n              in={expanded}\n              {...transitionProps}\n            >\n              {children}\n            </Collapse>\n          </DescendantProvider>\n        )}\n      </li>\n    );\n  }\n);\n"],"names":["forwardRef","DefaultContent","useDefaultProps","useClasses","useTreeViewContext","useState","useRef","useForkRef","useMemo","useDescendant","useEffect","jsxs","jsx","DescendantProvider","Collapse"],"mappings":"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"}

package/dist/cjs/components/TreeView/TreeItem/TreeItem.styles.cjs

@@ -3,10 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../../utils/classes.cjs");
 const focusUtils = require("../../../utils/focusUtils.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvTreeItem", {
+const { staticClasses, useClasses } = classes.createClasses("HvTreeItem", {
   /** Applied to the root element */
   root: {
     listStyle: "none",