@hitachivantara/uikit-react-core 5.35.0 → 5.36.1

package/dist/cjs/components/Drawer/Drawer.cjs

@@ -3,9 +3,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const material = require("@mui/material");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const withTooltip = require("../../hocs/withTooltip.cjs");
 const setId = require("../../utils/setId.cjs");
+const useTheme = require("../../hooks/useTheme.cjs");
+const hexToRgbA = require("../../utils/hexToRgbA.cjs");
 const Drawer_styles = require("./Drawer.styles.cjs");
 const Button = require("../Button/Button.cjs");
 const HvDrawer = (props) => {
@@ -18,21 +21,36 @@ const HvDrawer = (props) => {
     onClose,
     anchor = "right",
     buttonTitle = "Close",
+    showBackdrop = true,
+    disableBackdropClick = false,
     ...others
   } = useDefaultProps.useDefaultProps("HvDrawer", props);
   const {
     classes,
-    cx
+    cx,
+    css
   } = Drawer_styles.useClasses(classesProp);
+  const {
+    colors
+  } = useTheme.useTheme();
   const closeButtonDisplay = () => /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { role: "none" });
   const CloseButtonTooltipWrapper = buttonTitle ? withTooltip.withTooltip(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
-  return /* @__PURE__ */ jsxRuntime.jsxs(material.Drawer, { className: cx(classes.root, className), id, anchor, open, PaperProps: {
-    classes: {
-      root: classes.paper
-    }
-  }, onClose, ...others, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { id: setId.setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: onClose, "aria-label": buttonTitle, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButtonTooltipWrapper, {}) }),
-    children
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Drawer, { className: cx(classes.root, className), id, anchor, open, PaperProps: {
+      classes: {
+        root: classes.paper
+      }
+    }, onClose, ...others, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { id: setId.setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: onClose, "aria-label": buttonTitle, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButtonTooltipWrapper, {}) }),
+      children
+    ] }),
+    showBackdrop && /* @__PURE__ */ jsxRuntime.jsx(material.Backdrop, { open: !!open, onClick: (event) => {
+      if (disableBackdropClick)
+        return;
+      onClose?.(event, "backdropClick");
+    }, className: cx(css({
+      background: hexToRgbA.hexToRgbA(colors?.atmo4 || uikitStyles.theme.colors.atmo4)
+    }), classes.background) })
   ] });
 };
 exports.drawerClasses = Drawer_styles.staticClasses;

package/dist/cjs/components/Drawer/Drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.cjs","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvButton } from \"@core/components/Button\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps\n  extends MuiDrawerProps,\n    Omit<MuiDrawerProps, \"classes\">,\n    HvBaseProps<HTMLDivElement> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const closeButtonDisplay = () => <Close role=\"none\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      onClose={onClose}\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","others","useDefaultProps","cx","useClasses","closeButtonDisplay","jsx","Close","CloseButtonTooltipWrapper","withTooltip","jsxs","MuiDrawer","root","paper","HvButton","setId","closeButton"],"mappings":";;;;;;;;;;AAyEaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACd,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYX,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,cAAAA,WAAWV,WAAW;AAE9C,QAAMW,qBAAqBA,MAAOC,+BAAAC,gBAAAA,OAAA,EAAM,MAAK,OAAS,CAAA;AAEtD,QAAMC,4BAA4BR,cAC9BS,YAAAA,YAAYJ,oBAAoBL,aAAa,KAAK,IAClDK;AAGF,SAAAK,2BAAA,KAACC,SACC,QAAA,EAAA,WAAWR,GAAGV,QAAQmB,MAAMpB,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,IACVC,SAAS;AAAA,MACPmB,MAAMnB,QAAQoB;AAAAA,IAChB;AAAA,EAAA,GAEF,SACIZ,GAAAA,QAEJ,UAAA;AAAA,IAAAK,+BAACQ,OAAAA,YACC,IAAIC,MAAAA,MAAMpB,IAAI,OAAO,GACrB,WAAWF,QAAQuB,aACnB,SAAQ,kBACR,SAASlB,SACT,cAAYE,aAEZ,UAAAM,+BAAC,4BAAyB,CAAA,GAC5B;AAAA,IACCV;AAAAA,EACH,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"Drawer.cjs","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n  Backdrop as MuiBackdrop,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps\n  extends MuiDrawerProps,\n    Omit<MuiDrawerProps, \"classes\">,\n    HvBaseProps<HTMLDivElement> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /**\n   * Show backdrop when drawer ix open.\n   */\n  showBackdrop?: boolean;\n  /**\n   * Prevent closing the dialog when clicking on the backdrop.\n   */\n  disableBackdropClick?: boolean;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    showBackdrop = true,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n  const { colors } = useTheme();\n\n  const closeButtonDisplay = () => <Close role=\"none\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  return (\n    <>\n      <MuiDrawer\n        className={cx(classes.root, className)}\n        id={id}\n        anchor={anchor}\n        open={open}\n        PaperProps={{\n          classes: {\n            root: classes.paper,\n          },\n        }}\n        onClose={onClose}\n        {...others}\n      >\n        <HvButton\n          id={setId(id, \"close\")}\n          className={classes.closeButton}\n          variant=\"secondaryGhost\"\n          onClick={onClose}\n          aria-label={buttonTitle}\n        >\n          <CloseButtonTooltipWrapper />\n        </HvButton>\n        {children}\n      </MuiDrawer>\n      {showBackdrop && (\n        <MuiBackdrop\n          open={!!open}\n          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n            if (disableBackdropClick) return;\n            onClose?.(event, \"backdropClick\");\n          }}\n          className={cx(\n            css({\n              background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4),\n            }),\n            classes.background\n          )}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","showBackdrop","disableBackdropClick","others","useDefaultProps","cx","css","useClasses","colors","useTheme","closeButtonDisplay","jsx","Close","CloseButtonTooltipWrapper","withTooltip","jsxs","Fragment","MuiDrawer","root","paper","HvButton","setId","closeButton","MuiBackdrop","event","background","hexToRgbA","atmo4","theme"],"mappings":";;;;;;;;;;;;;AAsFaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYb,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASY;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,cAAAA,WAAWb,WAAW;AAC7C,QAAA;AAAA,IAAEc;AAAAA,MAAWC,SAAS,SAAA;AAE5B,QAAMC,qBAAqBA,MAAOC,+BAAAC,gBAAAA,OAAA,EAAM,MAAK,OAAS,CAAA;AAEtD,QAAMC,4BAA4Bb,cAC9Bc,YAAAA,YAAYJ,oBAAoBV,aAAa,KAAK,IAClDU;AAEJ,SAEIK,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAACD,2BAAAA,KAAAE,SAAA,QAAA,EACC,WAAWZ,GAAGZ,QAAQyB,MAAM1B,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,MACVC,SAAS;AAAA,QACPyB,MAAMzB,QAAQ0B;AAAAA,MAChB;AAAA,IAAA,GAEF,SACIhB,GAAAA,QAEJ,UAAA;AAAA,MAAAQ,+BAACS,OAAAA,YACC,IAAIC,MAAAA,MAAM1B,IAAI,OAAO,GACrB,WAAWF,QAAQ6B,aACnB,SAAQ,kBACR,SAASxB,SACT,cAAYE,aAEZ,UAAAW,+BAAC,4BAAyB,CAAA,GAC5B;AAAA,MACCf;AAAAA,IAAAA,GACH;AAAA,IACCK,+CACEsB,SAAAA,UACC,EAAA,MAAM,CAAC,CAAC1B,MACR,SAAS,CAAC2B,UAAqD;AACzDtB,UAAAA;AAAsB;AAC1BJ,gBAAU0B,OAAO,eAAe;AAAA,IAAA,GAElC,WAAWnB,GACTC,IAAI;AAAA,MACFmB,YAAYC,UAAUlB,UAAAA,QAAQmB,SAASC,YAAAA,MAAMpB,OAAOmB,KAAK;AAAA,IAAA,CAC1D,GACDlC,QAAQgC,UACV,GAEH;AAAA,EACH,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/components/ListContainer/ListItem/ListItem.cjs

@@ -27,7 +27,7 @@ const applyClassNameToElement = (element, className) => {
   }
   return null;
 };
-const HvListItem = (props) => {
+const HvListItem = React.forwardRef((props, ref) => {
   const {
     id,
     classes: classesProp,
@@ -81,6 +81,7 @@ const HvListItem = (props) => {
       "li",
       {
         id,
+        ref,
         role,
         value,
         className: cx(classes.root, {
@@ -110,7 +111,7 @@ const HvListItem = (props) => {
   }, configuration: {
     tabIndex
   }, children: listItem }) : listItem;
-};
+});
 exports.listItemClasses = ListItem_styles.staticClasses;
 exports.HvListItem = HvListItem;
 //# sourceMappingURL=ListItem.cjs.map

package/dist/cjs/components/ListContainer/ListItem/ListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.cjs","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvFocus } from \"@core/components/Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /**\n   * Overrides the implicit list item role.\n   */\n  role?: string;\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element,\n  selected,\n  disabled,\n  onClick,\n  className\n) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n      checked: !!selected,\n      disabled,\n      onChange: (evt) => onClick?.(evt),\n    });\n  }\n\n  return null;\n};\n\nconst applyClassNameToElement = (element, className) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n    });\n  }\n\n  return null;\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = (props: HvListItemProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp != null ? condensedProp : condensedContext;\n  const disableGutters =\n    disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;\n  const interactive =\n    interactiveProp != null ? interactiveProp : interactiveContext;\n\n  const handleOnClick = useCallback(\n    (evt) => {\n      if (!disabled) {\n        onClick?.(evt);\n      }\n    },\n    [disabled, onClick]\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleOnClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined\n        )\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleOnClick,\n      selected,\n      startAdornment,\n    ]\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined\n        )\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <li\n      id={id}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive,\n          [classes.selected]: !!selected,\n          [classes.disabled]: !!disabled,\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className\n      )}\n      onClick={handleOnClick}\n      onKeyDown={() => {}} // Needed because of jsx-a11yclick-events-have-key-events\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n};\n"],"names":["applyClassNameAndStateToElement","element","selected","disabled","onClick","className","React","cloneElement","checked","onChange","evt","applyClassNameToElement","HvListItem","props","id","classes","classesProp","role","value","interactive","interactiveProp","condensed","condensedProp","disableGutters","disableGuttersProp","startAdornment","endAdornment","children","tabIndex","others","useDefaultProps","cx","useClasses","topContainerRef","condensedContext","disableGuttersContext","interactiveContext","useContext","HvListContext","handleOnClick","useCallback","clonedStartAdornment","useMemo","isValidElement","undefined","clonedEndAdornment","roleOptionAriaProps","listItem","jsxs","root","gutters","withStartAdornment","withEndAdornment","jsx","HvFocus","focus"],"mappings":"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"}
+{"version":3,"file":"ListItem.cjs","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvFocus } from \"@core/components/Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /**\n   * Overrides the implicit list item role.\n   */\n  role?: HvBaseProps<HTMLLIElement>[\"role\"];\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element,\n  selected,\n  disabled,\n  onClick,\n  className\n) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n      checked: !!selected,\n      disabled,\n      onChange: (evt) => onClick?.(evt),\n    });\n  }\n\n  return null;\n};\n\nconst applyClassNameToElement = (element, className) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n    });\n  }\n\n  return null;\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = forwardRef<any, HvListItemProps>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp != null ? condensedProp : condensedContext;\n  const disableGutters =\n    disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;\n  const interactive =\n    interactiveProp != null ? interactiveProp : interactiveContext;\n\n  const handleOnClick = useCallback(\n    (evt) => {\n      if (!disabled) {\n        onClick?.(evt);\n      }\n    },\n    [disabled, onClick]\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleOnClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined\n        )\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleOnClick,\n      selected,\n      startAdornment,\n    ]\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined\n        )\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <li\n      id={id}\n      ref={ref}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive,\n          [classes.selected]: !!selected,\n          [classes.disabled]: !!disabled,\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className\n      )}\n      onClick={handleOnClick}\n      onKeyDown={() => {}} // Needed because of jsx-a11yclick-events-have-key-events\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n});\n"],"names":["applyClassNameAndStateToElement","element","selected","disabled","onClick","className","React","cloneElement","checked","onChange","evt","applyClassNameToElement","HvListItem","forwardRef","props","ref","id","classes","classesProp","role","value","interactive","interactiveProp","condensed","condensedProp","disableGutters","disableGuttersProp","startAdornment","endAdornment","children","tabIndex","others","useDefaultProps","cx","useClasses","topContainerRef","condensedContext","disableGuttersContext","interactiveContext","useContext","HvListContext","handleOnClick","useCallback","clonedStartAdornment","useMemo","isValidElement","undefined","clonedEndAdornment","roleOptionAriaProps","listItem","jsxs","root","gutters","withStartAdornment","withEndAdornment","jsx","HvFocus","focus"],"mappings":"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"}

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const useCss = require("../../../hooks/useCss.cjs");
+const useHvTreeItem = require("./useHvTreeItem.cjs");
+const DefaultContent = React.forwardRef((props, ref) => {
+  const {
+    classes,
+    className,
+    displayIcon,
+    expansionIcon,
+    icon: iconProp,
+    label,
+    nodeId,
+    onClick,
+    onMouseDown,
+    ...others
+  } = props;
+  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, classes.root, {
+      [classes.expanded]: expanded,
+      [classes.selected]: selected,
+      [classes.focused]: focused,
+      [classes.disabled]: disabled
+    }), onClick: (event) => {
+      handleExpansion(event);
+      handleSelection(event);
+      onClick?.(event);
+    }, onMouseDown: (event) => {
+      preventSelection(event);
+      onMouseDown?.(event);
+    }, ref, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.iconContainer, children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.label, children: label })
+    ] })
+  );
+});
+exports.DefaultContent = DefaultContent;
+//# sourceMappingURL=DefaultContent.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultContent.cjs","sources":["../../../../../src/components/TreeView/TreeItem/DefaultContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useCss } from \"@core/hooks/useCss\";\n\nimport type { HvTreeContentProps } from \"./TreeItem\";\nimport { useHvTreeItem } from \"./useHvTreeItem\";\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,\n      className,\n      displayIcon,\n      expansionIcon,\n      icon: iconProp,\n      label,\n      nodeId,\n      onClick,\n      onMouseDown,\n      ...others\n    } = props;\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":["DefaultContent","forwardRef","props","ref","classes","className","displayIcon","expansionIcon","icon","iconProp","label","nodeId","onClick","onMouseDown","others","cx","useCss","disabled","expanded","selected","focused","handleExpansion","handleSelection","preventSelection","useHvTreeItem","jsxs","root","event","jsx","iconContainer"],"mappings":";;;;;;AAWO,MAAMA,iBAAiBC,MAAAA,WAC5B,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,MAAMC;AAAAA,IACNC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EACDZ,IAAAA;AAEE,QAAA;AAAA,IAAEa;AAAAA,MAAOC,OAAO,OAAA;AAEhB,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,cAAAA,cAAcb,MAAM;AAElBH,QAAAA,OAAOC,YAAYF,iBAAiBD;AAE1C;AAAA;AAAA,IAEEmB,gCAAC,SACC,GAAIX,QACJ,WAAWC,GAAGV,WAAWD,QAAQsB,MAAM;AAAA,MACrC,CAACtB,QAAQc,QAAQ,GAAGA;AAAAA,MACpB,CAACd,QAAQe,QAAQ,GAAGA;AAAAA,MACpB,CAACf,QAAQgB,OAAO,GAAGA;AAAAA,MACnB,CAAChB,QAAQa,QAAQ,GAAGA;AAAAA,IAAAA,CACrB,GACD,SAAUU,CAAU,UAAA;AAClBN,sBAAgBM,KAAK;AACrBL,sBAAgBK,KAAK;AACrBf,gBAAUe,KAAK;AAAA,IAAA,GAEjB,aAAcA,CAAU,UAAA;AACtBJ,uBAAiBI,KAAK;AACtBd,oBAAcc,KAAK;AAAA,IAAA,GAErB,KAEA,UAAA;AAAA,MAAAC,2BAAA,IAAC,OAAI,EAAA,WAAWxB,QAAQyB,eAAgBrB,UAAK,MAAA;AAAA,MAC5CoB,2BAAA,IAAA,OAAA,EAAI,WAAWxB,QAAQM,OAAQA,UAAM,OAAA;AAAA,IAAA,GACxC;AAAA;AAEJ,CACF;;"}

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

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const useForkRef = require("../../../hooks/useForkRef.cjs");
+const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
+require("../internals.cjs");
+const TreeItem_styles = require("./TreeItem.styles.cjs");
+const DefaultContent = require("./DefaultContent.cjs");
+const useTreeViewContext = require("@mui/x-tree-view/internals/TreeViewProvider/useTreeViewContext");
+const DescendantProvider = require("@mui/x-tree-view/internals/TreeViewProvider/DescendantProvider");
+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
+  } = useTreeViewContext.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(material.Collapse, { 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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItem.cjs","sources":["../../../../../src/components/TreeView/TreeItem/TreeItem.tsx"],"sourcesContent":["import {\n  FocusEvent,\n  ReactNode,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Collapse } from \"@mui/material\";\nimport type { TreeItemContentProps, TreeItemProps } from \"@mui/x-tree-view\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  HvTreeViewPlugins,\n  DescendantProvider,\n  TreeItemDescendant,\n  useDescendant,\n  useTreeViewContext,\n} from \"../internals\";\nimport { staticClasses, useClasses } from \"./TreeItem.styles\";\nimport { DefaultContent } from \"./DefaultContent\";\n\nexport { staticClasses as treeItemClasses };\n\nexport type HvTreeItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends TreeItemContentProps {}\n\nexport interface HvTreeItemProps extends TreeItemProps {\n  classes?: HvTreeItemClasses;\n  disabled?: boolean;\n  icon?: ReactNode;\n  ContentComponent?: React.JSXElementConstructor<HvTreeContentProps>;\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<HvTreeViewPlugins>();\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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"}

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

@@ -0,0 +1,74 @@
+"use strict";
+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", {
+  /** Applied to the root element */
+  root: {
+    listStyle: "none",
+    margin: 0,
+    padding: 0,
+    outline: 0
+  },
+  group: {
+    margin: 0,
+    padding: 0,
+    marginLeft: uikitStyles.theme.space.sm
+  },
+  content: {
+    padding: uikitStyles.theme.spacing(0, 1),
+    minHeight: 32,
+    // TODO: review
+    width: "100%",
+    boxSizing: "border-box",
+    // prevent width + padding to overflow
+    display: "flex",
+    alignItems: "center",
+    cursor: "pointer",
+    WebkitTapHighlightColor: "transparent",
+    "&:hover:not($disabled)": {
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    }
+  },
+  expanded: {},
+  selected: {
+    backgroundColor: uikitStyles.theme.colors.atmo3
+  },
+  focused: {
+    backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+    "&:focus-visible": {
+      ...focusUtils.outlineStyles
+    }
+  },
+  disabled: {
+    cursor: "not-allowed",
+    color: uikitStyles.theme.colors.secondary_60,
+    "& $label": {
+      color: uikitStyles.theme.colors.secondary_60
+    }
+  },
+  label: {
+    paddingLeft: 4,
+    width: "100%",
+    boxSizing: "border-box",
+    // fixes overflow
+    minWidth: 0,
+    position: "relative",
+    ...uikitStyles.theme.typography.body
+  },
+  iconContainer: {
+    display: "flex",
+    flexShrink: 0,
+    justifyContent: "center",
+    width: 16,
+    // TODO: review
+    marginRight: 4
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=TreeItem.styles.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItem.styles.cjs","sources":["../../../../../src/components/TreeView/TreeItem/TreeItem.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTreeItem\", {\n  /** Applied to the root element */\n  root: {\n    listStyle: \"none\",\n    margin: 0,\n    padding: 0,\n    outline: 0,\n  },\n  group: {\n    margin: 0,\n    padding: 0,\n    marginLeft: theme.space.sm,\n  },\n\n  content: {\n    padding: theme.spacing(0, 1),\n    minHeight: 32, // TODO: review\n\n    width: \"100%\",\n    boxSizing: \"border-box\", // prevent width + padding to overflow\n    display: \"flex\",\n    alignItems: \"center\",\n    cursor: \"pointer\",\n    WebkitTapHighlightColor: \"transparent\",\n    \"&:hover:not($disabled)\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  expanded: {},\n  selected: {\n    backgroundColor: theme.colors.atmo3,\n  },\n  focused: {\n    backgroundColor: theme.colors.containerBackgroundHover,\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n    \"& $label\": {\n      color: theme.colors.secondary_60,\n    },\n  },\n  label: {\n    paddingLeft: 4,\n    width: \"100%\",\n    boxSizing: \"border-box\",\n\n    // fixes overflow\n    minWidth: 0,\n    position: \"relative\",\n    ...theme.typography.body,\n  },\n  iconContainer: {\n    display: \"flex\",\n    flexShrink: 0,\n    justifyContent: \"center\",\n\n    width: 16, // TODO: review\n    marginRight: 4,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","listStyle","margin","padding","outline","group","marginLeft","theme","space","sm","content","spacing","minHeight","width","boxSizing","display","alignItems","cursor","WebkitTapHighlightColor","backgroundColor","colors","containerBackgroundHover","expanded","selected","atmo3","focused","outlineStyles","disabled","color","secondary_60","label","paddingLeft","minWidth","position","typography","body","iconContainer","flexShrink","justifyContent","marginRight"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,cAAc;AAAA;AAAA,EAEvEC,MAAM;AAAA,IACJC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,SAAS;AAAA,EACX;AAAA,EACAC,OAAO;AAAA,IACLH,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTG,YAAYC,YAAAA,MAAMC,MAAMC;AAAAA,EAC1B;AAAA,EAEAC,SAAS;AAAA,IACPP,SAASI,YAAAA,MAAMI,QAAQ,GAAG,CAAC;AAAA,IAC3BC,WAAW;AAAA;AAAA,IAEXC,OAAO;AAAA,IACPC,WAAW;AAAA;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRC,yBAAyB;AAAA,IACzB,0BAA0B;AAAA,MACxBC,iBAAiBZ,YAAAA,MAAMa,OAAOC;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,UAAU,CAAC;AAAA,EACXC,UAAU;AAAA,IACRJ,iBAAiBZ,YAAAA,MAAMa,OAAOI;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPN,iBAAiBZ,YAAAA,MAAMa,OAAOC;AAAAA,IAC9B,mBAAmB;AAAA,MACjB,GAAGK,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRV,QAAQ;AAAA,IACRW,OAAOrB,YAAAA,MAAMa,OAAOS;AAAAA,IACpB,YAAY;AAAA,MACVD,OAAOrB,YAAAA,MAAMa,OAAOS;AAAAA,IACtB;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLC,aAAa;AAAA,IACblB,OAAO;AAAA,IACPC,WAAW;AAAA;AAAA,IAGXkB,UAAU;AAAA,IACVC,UAAU;AAAA,IACV,GAAG1B,YAAAA,MAAM2B,WAAWC;AAAAA,EACtB;AAAA,EACAC,eAAe;AAAA,IACbrB,SAAS;AAAA,IACTsB,YAAY;AAAA,IACZC,gBAAgB;AAAA,IAEhBzB,OAAO;AAAA;AAAA,IACP0B,aAAa;AAAA,EACf;AACF,CAAC;;;"}

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

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../internals.cjs");
+const useTreeViewContext = require("@mui/x-tree-view/internals/TreeViewProvider/useTreeViewContext");
+function useHvTreeItem(nodeId) {
+  const {
+    instance,
+    multiSelect
+  } = useTreeViewContext.useTreeViewContext();
+  const expandable = instance ? instance.isNodeExpandable(nodeId) : false;
+  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 handleExpansion = (event) => {
+    if (!instance || disabled)
+      return;
+    if (!focused) {
+      instance.focusNode(event, nodeId);
+    }
+    const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+    if (expandable && !(multiple && instance.isNodeExpanded(nodeId))) {
+      instance.toggleNodeExpansion(event, nodeId);
+    }
+  };
+  const handleSelection = (event) => {
+    if (!instance || disabled)
+      return;
+    if (!focused) {
+      instance.focusNode(event, nodeId);
+    }
+    const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+    if (multiple) {
+      if (event.shiftKey) {
+        instance.selectRange(event, {
+          end: nodeId
+        });
+      } else {
+        instance.selectNode(event, nodeId, true);
+      }
+    } else {
+      instance.selectNode(event, nodeId);
+    }
+  };
+  const preventSelection = (event) => {
+    if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
+      event.preventDefault();
+    }
+  };
+  return {
+    instance,
+    disabled,
+    expanded,
+    selected,
+    focused,
+    handleExpansion,
+    handleSelection,
+    preventSelection
+  };
+}
+exports.useHvTreeItem = useHvTreeItem;
+//# sourceMappingURL=useHvTreeItem.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useHvTreeItem.cjs","sources":["../../../../../src/components/TreeView/TreeItem/useHvTreeItem.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { useTreeViewContext, HvTreeViewPlugins } from \"../internals\";\n\nexport function useHvTreeItem(nodeId: string) {\n  const { instance, multiSelect } = useTreeViewContext<HvTreeViewPlugins>();\n\n  const expandable = instance ? instance.isNodeExpandable(nodeId) : false;\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 handleExpansion = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!instance || disabled) return;\n\n    if (!focused) {\n      instance.focusNode(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 (expandable && !(multiple && instance.isNodeExpanded(nodeId))) {\n      instance.toggleNodeExpansion(event, nodeId);\n    }\n  };\n\n  const handleSelection = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!instance || disabled) return;\n\n    if (!focused) {\n      instance.focusNode(event, nodeId);\n    }\n\n    const multiple =\n      multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n    if (multiple) {\n      if (event.shiftKey) {\n        instance.selectRange(event, { end: nodeId });\n      } else {\n        instance.selectNode(event, nodeId, true);\n      }\n    } else {\n      instance.selectNode(event, nodeId);\n    }\n  };\n\n  const preventSelection = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {\n      // Prevent text selection\n      event.preventDefault();\n    }\n  };\n\n  return {\n    instance,\n    disabled,\n    expanded,\n    selected,\n    focused,\n    handleExpansion,\n    handleSelection,\n    preventSelection,\n  };\n}\n"],"names":["useHvTreeItem","nodeId","instance","multiSelect","useTreeViewContext","expandable","isNodeExpandable","expanded","isNodeExpanded","focused","isNodeFocused","selected","isNodeSelected","disabled","isNodeDisabled","handleExpansion","event","focusNode","multiple","shiftKey","ctrlKey","metaKey","toggleNodeExpansion","handleSelection","selectRange","end","selectNode","preventSelection","preventDefault"],"mappings":";;;;AAIO,SAASA,cAAcC,QAAgB;AACtC,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,MAAgBC,mBAAsC,mBAAA;AAExE,QAAMC,aAAaH,WAAWA,SAASI,iBAAiBL,MAAM,IAAI;AAClE,QAAMM,WAAWL,WAAWA,SAASM,eAAeP,MAAM,IAAI;AAC9D,QAAMQ,UAAUP,WAAWA,SAASQ,cAAcT,MAAM,IAAI;AAC5D,QAAMU,WAAWT,WAAWA,SAASU,eAAeX,MAAM,IAAI;AAC9D,QAAMY,WAAWX,WAAWA,SAASY,eAAeb,MAAM,IAAI;AAExDc,QAAAA,kBAAkBA,CAACC,UAA4C;AACnE,QAAI,CAACd,YAAYW;AAAU;AAE3B,QAAI,CAACJ,SAAS;AACHQ,eAAAA,UAAUD,OAAOf,MAAM;AAAA,IAClC;AAEA,UAAMiB,WACJf,gBAAgBa,MAAMG,YAAYH,MAAMI,WAAWJ,MAAMK;AAG3D,QAAIhB,cAAc,EAAEa,YAAYhB,SAASM,eAAeP,MAAM,IAAI;AACvDqB,eAAAA,oBAAoBN,OAAOf,MAAM;AAAA,IAC5C;AAAA,EAAA;AAGIsB,QAAAA,kBAAkBA,CAACP,UAA4C;AACnE,QAAI,CAACd,YAAYW;AAAU;AAE3B,QAAI,CAACJ,SAAS;AACHQ,eAAAA,UAAUD,OAAOf,MAAM;AAAA,IAClC;AAEA,UAAMiB,WACJf,gBAAgBa,MAAMG,YAAYH,MAAMI,WAAWJ,MAAMK;AAE3D,QAAIH,UAAU;AACZ,UAAIF,MAAMG,UAAU;AAClBjB,iBAASsB,YAAYR,OAAO;AAAA,UAAES,KAAKxB;AAAAA,QAAAA,CAAQ;AAAA,MAAA,OACtC;AACIyB,iBAAAA,WAAWV,OAAOf,QAAQ,IAAI;AAAA,MACzC;AAAA,IAAA,OACK;AACIyB,eAAAA,WAAWV,OAAOf,MAAM;AAAA,IACnC;AAAA,EAAA;AAGI0B,QAAAA,mBAAmBA,CAACX,UAA4C;AACpE,QAAIA,MAAMG,YAAYH,MAAMI,WAAWJ,MAAMK,WAAWR,UAAU;AAEhEG,YAAMY,eAAe;AAAA,IACvB;AAAA,EAAA;AAGK,SAAA;AAAA,IACL1B;AAAAA,IACAW;AAAAA,IACAN;AAAAA,IACAI;AAAAA,IACAF;AAAAA,IACAM;AAAAA,IACAQ;AAAAA,IACAI;AAAAA,EAAAA;AAEJ;;"}

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

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const utils = require("@mui/base/utils");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
+const internals = require("./internals.cjs");
+const TreeView_styles = require("./TreeView.styles.cjs");
+const useTreeView = require("@mui/x-tree-view/internals/useTreeView");
+const TreeViewProvider = require("@mui/x-tree-view/internals/TreeViewProvider");
+const HvTreeView = React.forwardRef(function HvTreeView2(props, ref) {
+  const {
+    id,
+    children,
+    classes: classesProp,
+    className,
+    disabledItemsFocusable,
+    multiSelect,
+    expanded,
+    defaultExpanded,
+    selected,
+    defaultSelected,
+    disableSelection,
+    defaultCollapseIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { role: "none" }),
+    defaultExpandIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, { role: "none" }),
+    defaultEndIcon,
+    defaultParentIcon,
+    onNodeSelect,
+    onNodeToggle,
+    onNodeFocus,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvTreeView", props);
+  const {
+    classes,
+    cx
+  } = TreeView_styles.useClasses(classesProp);
+  const {
+    getRootProps,
+    contextValue
+  } = useTreeView.useTreeView({
+    disabledItemsFocusable,
+    expanded,
+    defaultExpanded,
+    onNodeToggle,
+    onNodeFocus,
+    disableSelection,
+    defaultSelected,
+    selected,
+    multiSelect,
+    onNodeSelect,
+    id,
+    defaultCollapseIcon,
+    defaultEndIcon,
+    defaultExpandIcon,
+    defaultParentIcon,
+    plugins: internals.HV_TREE_VIEW_PLUGINS,
+    rootRef: ref
+  });
+  const rootProps = utils.useSlotProps({
+    elementType: "ul",
+    externalSlotProps: {},
+    externalForwardedProps: others,
+    className: classes.root,
+    getSlotProps: getRootProps,
+    ownerState: props
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(TreeViewProvider.TreeViewProvider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx(classes.root, className), ...rootProps, ...others, children }) });
+});
+exports.treeView2Classes = TreeView_styles.staticClasses;
+exports.HvTreeView = HvTreeView;
+//# sourceMappingURL=TreeView.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.cjs","sources":["../../../../src/components/TreeView/TreeView.tsx"],"sourcesContent":["import { ReactNode, Ref, forwardRef } from \"react\";\nimport { useSlotProps } from \"@mui/base/utils\";\nimport { DropDownXS, DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  HV_TREE_VIEW_PLUGINS,\n  HvTreeViewPluginParameters,\n  TreeViewProvider,\n  useTreeView,\n} from \"./internals\";\nimport { staticClasses, useClasses } from \"./TreeView.styles\";\n\nexport { staticClasses as treeView2Classes }; // TODO: remove old `treeViewClasses`\n\nexport type HvTreeViewClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeViewProps<Multiple extends boolean | undefined>\n  extends HvBaseProps<HTMLUListElement>,\n    HvTreeViewPluginParameters<Multiple> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvTreeViewClasses;\n  /** Tree View children. Usually a `HvTreeItem` instance, or a custom variation of it */\n  children?: ReactNode;\n}\n\ntype HvTreeViewComponent = <Multiple extends boolean | undefined = undefined>(\n  props: HvTreeViewProps<Multiple>\n) => React.JSX.Element;\n\n/* eslint-disable prefer-arrow-callback */\n/**\n * A Tree View displays hierarchical structures.\n * It also facilitates the exploration of categorical levels and their content.\n *\n * Tree structures are built through composing the `HvTreeItem` component,\n * or a custom variation of it.\n *\n * It is based on MUI's [TreeView](https://mui.com/x/react-tree-view) component.\n *\n * @example\n * ```tsx\n * <HvTreeView>\n *   <HvTreeItem nodeId=\"1\" label=\"File1\" />\n * </HvTreeView>\n * ```\n */\nconst HvTreeView = forwardRef(function HvTreeView<\n  Multiple extends boolean | undefined\n>(props: HvTreeViewProps<Multiple>, ref: Ref<HTMLUListElement>) {\n  const {\n    id,\n    children,\n    classes: classesProp,\n    className,\n\n    disabledItemsFocusable,\n    multiSelect,\n    expanded,\n    defaultExpanded,\n    selected,\n    defaultSelected,\n    disableSelection,\n    defaultCollapseIcon = <DropDownXS role=\"none\" />,\n    defaultExpandIcon = <DropRightXS role=\"none\" />,\n    defaultEndIcon,\n    defaultParentIcon,\n    onNodeSelect,\n    onNodeToggle,\n    onNodeFocus,\n    ...others\n  } = useDefaultProps(\"HvTreeView\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { getRootProps, contextValue } = useTreeView({\n    disabledItemsFocusable,\n    expanded,\n    defaultExpanded,\n    onNodeToggle,\n    onNodeFocus,\n    disableSelection,\n    defaultSelected,\n    selected,\n    multiSelect,\n    onNodeSelect: onNodeSelect as HvTreeViewProps<any>[\"onNodeSelect\"],\n    id,\n    defaultCollapseIcon,\n    defaultEndIcon,\n    defaultExpandIcon,\n    defaultParentIcon,\n    plugins: HV_TREE_VIEW_PLUGINS,\n    rootRef: ref,\n  });\n\n  const rootProps = useSlotProps({\n    elementType: \"ul\",\n    externalSlotProps: {},\n    externalForwardedProps: others,\n    className: classes.root,\n    getSlotProps: getRootProps,\n    ownerState: props,\n  });\n\n  return (\n    <TreeViewProvider value={contextValue}>\n      <ul className={cx(classes.root, className)} {...rootProps} {...others}>\n        {children}\n      </ul>\n    </TreeViewProvider>\n  );\n}) as HvTreeViewComponent;\n\nexport { HvTreeView };\n"],"names":["HvTreeView","forwardRef","props","ref","id","children","classes","classesProp","className","disabledItemsFocusable","multiSelect","expanded","defaultExpanded","selected","defaultSelected","disableSelection","defaultCollapseIcon","jsx","DropDownXS","defaultExpandIcon","DropRightXS","defaultEndIcon","defaultParentIcon","onNodeSelect","onNodeToggle","onNodeFocus","others","useDefaultProps","cx","useClasses","getRootProps","contextValue","useTreeView","plugins","HV_TREE_VIEW_PLUGINS","rootRef","rootProps","useSlotProps","elementType","externalSlotProps","externalForwardedProps","root","getSlotProps","ownerState","TreeViewProvider"],"mappings":";;;;;;;;;;;AAkDA,MAAMA,aAAaC,MAAAA,WAAW,SAASD,YAErCE,OAAkCC,KAA4B;AACxD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,sBAAsBC,2BAAAA,IAACC,gBAAAA,YAAW,EAAA,MAAK,OAAS,CAAA;AAAA,IAChDC,oBAAoBF,2BAAAA,IAACG,gBAAAA,aAAY,EAAA,MAAK,OAAS,CAAA;AAAA,IAC/CC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,cAAczB,KAAK;AACjC,QAAA;AAAA,IAAEI;AAAAA,IAASsB;AAAAA,EAAAA,IAAOC,gBAAAA,WAAWtB,WAAW;AAExC,QAAA;AAAA,IAAEuB;AAAAA,IAAcC;AAAAA,MAAiBC,wBAAY;AAAA,IACjDvB;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAY;AAAAA,IACAC;AAAAA,IACAV;AAAAA,IACAD;AAAAA,IACAD;AAAAA,IACAH;AAAAA,IACAa;AAAAA,IACAnB;AAAAA,IACAY;AAAAA,IACAK;AAAAA,IACAF;AAAAA,IACAG;AAAAA,IACAW,SAASC,UAAAA;AAAAA,IACTC,SAAShC;AAAAA,EAAAA,CACV;AAED,QAAMiC,YAAYC,MAAAA,aAAa;AAAA,IAC7BC,aAAa;AAAA,IACbC,mBAAmB,CAAC;AAAA,IACpBC,wBAAwBd;AAAAA,IACxBlB,WAAWF,QAAQmC;AAAAA,IACnBC,cAAcZ;AAAAA,IACda,YAAYzC;AAAAA,EAAAA,CACb;AAED,wCACG0C,iBAAiB,kBAAA,EAAA,OAAOb,cACvB,UAAAd,2BAAAA,IAAC,QAAG,WAAWW,GAAGtB,QAAQmC,MAAMjC,SAAS,GAAG,GAAI4B,WAAeV,GAAAA,QAC5DrB,UACH,EACF,CAAA;AAEJ,CAAC;;;"}