@hitachivantara/uikit-react-core 5.34.0 → 5.36.0

package/dist/esm/components/ListContainer/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","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","root","gutters","withStartAdornment","withEndAdornment","focus"],"mappings":"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"}
+{"version":3,"file":"ListItem.js","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","root","gutters","withStartAdornment","withEndAdornment","focus"],"mappings":"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"}

package/dist/esm/components/TreeView/TreeItem/DefaultContent.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { useCss } from "../../../hooks/useCss.js";
+import { useHvTreeItem } from "./useHvTreeItem.js";
+const DefaultContent = forwardRef((props, ref) => {
+  const {
+    classes,
+    className,
+    displayIcon,
+    expansionIcon,
+    icon: iconProp,
+    label,
+    nodeId,
+    onClick,
+    onMouseDown,
+    ...others
+  } = props;
+  const {
+    cx
+  } = useCss();
+  const {
+    disabled,
+    expanded,
+    selected,
+    focused,
+    handleExpansion,
+    handleSelection,
+    preventSelection
+  } = 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__ */ 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__ */ jsx("div", { className: classes.iconContainer, children: icon }),
+      /* @__PURE__ */ jsx("div", { className: classes.label, children: label })
+    ] })
+  );
+});
+export {
+  DefaultContent
+};
+//# sourceMappingURL=DefaultContent.js.map

package/dist/esm/components/TreeView/TreeItem/DefaultContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultContent.js","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","root","event","iconContainer"],"mappings":";;;;AAWO,MAAMA,iBAAiBC,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;AAEhB,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,cAAcb,MAAM;AAElBH,QAAAA,OAAOC,YAAYF,iBAAiBD;AAE1C;AAAA;AAAA,IAEE,qBAAC,SACC,GAAIQ,QACJ,WAAWC,GAAGV,WAAWD,QAAQqB,MAAM;AAAA,MACrC,CAACrB,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,SAAUS,CAAU,UAAA;AAClBL,sBAAgBK,KAAK;AACrBJ,sBAAgBI,KAAK;AACrBd,gBAAUc,KAAK;AAAA,IAAA,GAEjB,aAAcA,CAAU,UAAA;AACtBH,uBAAiBG,KAAK;AACtBb,oBAAca,KAAK;AAAA,IAAA,GAErB,KAEA,UAAA;AAAA,MAAA,oBAAC,OAAI,EAAA,WAAWtB,QAAQuB,eAAgBnB,UAAK,MAAA;AAAA,MAC5C,oBAAA,OAAA,EAAI,WAAWJ,QAAQM,OAAQA,UAAM,OAAA;AAAA,IAAA,GACxC;AAAA;AAEJ,CACF;"}

package/dist/esm/components/TreeView/TreeItem/TreeItem.js

@@ -0,0 +1,125 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useState, useRef, useMemo, useEffect } from "react";
+import { Collapse } from "@mui/material";
+import { useForkRef } from "../../../hooks/useForkRef.js";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
+import "../internals.js";
+import { useClasses } from "./TreeItem.styles.js";
+import { staticClasses } from "./TreeItem.styles.js";
+import { DefaultContent } from "./DefaultContent.js";
+import { useTreeViewContext } from "@mui/x-tree-view/internals/TreeViewProvider/useTreeViewContext";
+import { useDescendant, DescendantProvider } from "@mui/x-tree-view/internals/TreeViewProvider/DescendantProvider";
+const HvTreeItem = forwardRef((props, ref) => {
+  const {
+    id: idProp,
+    nodeId,
+    children,
+    classes: classesProp,
+    className,
+    label,
+    disabled: disabledProp,
+    icon,
+    endIcon,
+    expandIcon,
+    collapseIcon,
+    ContentComponent: Component = DefaultContent,
+    TransitionProps: transitionProps,
+    ContentProps: contentProps,
+    ...others
+  } = useDefaultProps("HvTreeItem", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
+  const {
+    instance,
+    multiSelect,
+    disabledItemsFocusable,
+    treeId,
+    icons: contextIcons
+  } = useTreeViewContext();
+  const id = idProp || treeId && nodeId && `${treeId}-${nodeId}` || void 0;
+  const [treeItemElement, setTreeItemElement] = useState(null);
+  const contentRef = useRef(null);
+  const handleRef = useForkRef(setTreeItemElement, ref);
+  const descendant = useMemo(() => ({
+    element: treeItemElement,
+    id: nodeId
+  }), [nodeId, treeItemElement]);
+  const {
+    index,
+    parentId
+  } = 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;
+  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]);
+  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__ */ 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__ */ 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__ */ jsx(DescendantProvider, { id: nodeId, children: /* @__PURE__ */ jsx(Collapse, { component: "ul", role: "group", unmountOnExit: true, className: classes.group, in: expanded, ...transitionProps, children }) })
+      ]
+    }
+  );
+});
+export {
+  HvTreeItem,
+  staticClasses as treeItemClasses
+};
+//# sourceMappingURL=TreeItem.js.map

package/dist/esm/components/TreeView/TreeItem/TreeItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItem.js","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","root","content","iconContainer","group"],"mappings":"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"}

package/dist/esm/components/TreeView/TreeItem/TreeItem.styles.js

@@ -0,0 +1,74 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../../utils/classes.js";
+import { outlineStyles } from "../../../utils/focusUtils.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvTreeItem", {
+  /** Applied to the root element */
+  root: {
+    listStyle: "none",
+    margin: 0,
+    padding: 0,
+    outline: 0
+  },
+  group: {
+    margin: 0,
+    padding: 0,
+    marginLeft: theme.space.sm
+  },
+  content: {
+    padding: 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: theme.colors.containerBackgroundHover
+    }
+  },
+  expanded: {},
+  selected: {
+    backgroundColor: theme.colors.atmo3
+  },
+  focused: {
+    backgroundColor: theme.colors.containerBackgroundHover,
+    "&:focus-visible": {
+      ...outlineStyles
+    }
+  },
+  disabled: {
+    cursor: "not-allowed",
+    color: theme.colors.secondary_60,
+    "& $label": {
+      color: theme.colors.secondary_60
+    }
+  },
+  label: {
+    paddingLeft: 4,
+    width: "100%",
+    boxSizing: "border-box",
+    // fixes overflow
+    minWidth: 0,
+    position: "relative",
+    ...theme.typography.body
+  },
+  iconContainer: {
+    display: "flex",
+    flexShrink: 0,
+    justifyContent: "center",
+    width: 16,
+    // TODO: review
+    marginRight: 4
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=TreeItem.styles.js.map

package/dist/esm/components/TreeView/TreeItem/TreeItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItem.styles.js","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,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,MAAMC,MAAMC;AAAAA,EAC1B;AAAA,EAEAC,SAAS;AAAA,IACPP,SAASI,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,MAAMa,OAAOC;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,UAAU,CAAC;AAAA,EACXC,UAAU;AAAA,IACRJ,iBAAiBZ,MAAMa,OAAOI;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPN,iBAAiBZ,MAAMa,OAAOC;AAAAA,IAC9B,mBAAmB;AAAA,MACjB,GAAGK;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRV,QAAQ;AAAA,IACRW,OAAOrB,MAAMa,OAAOS;AAAAA,IACpB,YAAY;AAAA,MACVD,OAAOrB,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,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/esm/components/TreeView/TreeItem/useHvTreeItem.js

@@ -0,0 +1,62 @@
+import "../internals.js";
+import { useTreeViewContext } from "@mui/x-tree-view/internals/TreeViewProvider/useTreeViewContext";
+function useHvTreeItem(nodeId) {
+  const {
+    instance,
+    multiSelect
+  } = 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
+  };
+}
+export {
+  useHvTreeItem
+};
+//# sourceMappingURL=useHvTreeItem.js.map

package/dist/esm/components/TreeView/TreeItem/useHvTreeItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHvTreeItem.js","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;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/esm/components/TreeView/TreeView.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.js","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","defaultExpandIcon","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"],"mappings":";;;;;;;;;;AAkDA,MAAMA,aAAaC,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,sBAAsB,oBAAC,YAAW,EAAA,MAAK,OAAS,CAAA;AAAA,IAChDC,oBAAoB,oBAAC,aAAY,EAAA,MAAK,OAAS,CAAA;AAAA,IAC/CC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,cAActB,KAAK;AACjC,QAAA;AAAA,IAAEI;AAAAA,IAASmB;AAAAA,EAAAA,IAAOC,WAAWnB,WAAW;AAExC,QAAA;AAAA,IAAEoB;AAAAA,IAAcC;AAAAA,MAAiBC,YAAY;AAAA,IACjDpB;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAS;AAAAA,IACAC;AAAAA,IACAP;AAAAA,IACAD;AAAAA,IACAD;AAAAA,IACAH;AAAAA,IACAU;AAAAA,IACAhB;AAAAA,IACAY;AAAAA,IACAE;AAAAA,IACAD;AAAAA,IACAE;AAAAA,IACAW,SAASC;AAAAA,IACTC,SAAS7B;AAAAA,EAAAA,CACV;AAED,QAAM8B,YAAYC,aAAa;AAAA,IAC7BC,aAAa;AAAA,IACbC,mBAAmB,CAAC;AAAA,IACpBC,wBAAwBd;AAAAA,IACxBf,WAAWF,QAAQgC;AAAAA,IACnBC,cAAcZ;AAAAA,IACda,YAAYtC;AAAAA,EAAAA,CACb;AAED,6BACG,kBAAiB,EAAA,OAAO0B,cACvB,UAAA,oBAAC,QAAG,WAAWH,GAAGnB,QAAQgC,MAAM9B,SAAS,GAAG,GAAIyB,WAAeV,GAAAA,QAC5DlB,UACH,EACF,CAAA;AAEJ,CAAC;"}

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

@@ -0,0 +1,18 @@
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvTreeView", {
+  /** Applied to the root element */
+  root: {
+    padding: 0,
+    margin: 0,
+    listStyle: "none",
+    outline: "none"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=TreeView.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.styles.js","sources":["../../../../src/components/TreeView/TreeView.styles.ts"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTreeView\", {\n  /** Applied to the root element */\n  root: {\n    padding: 0,\n    margin: 0,\n    listStyle: \"none\",\n    outline: \"none\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","margin","listStyle","outline"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA;AAAA,EAEvEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,SAAS;AAAA,EACX;AACF,CAAC;"}

package/dist/esm/components/TreeView/internals.js

@@ -0,0 +1,15 @@
+import { useTreeViewContext } from "@mui/x-tree-view/internals/TreeViewProvider/useTreeViewContext";
+import { TreeViewProvider } from "@mui/x-tree-view/internals/TreeViewProvider";
+import { DescendantProvider, useDescendant } from "@mui/x-tree-view/internals/TreeViewProvider/DescendantProvider";
+import { DEFAULT_TREE_VIEW_PLUGINS } from "@mui/x-tree-view/internals/plugins/defaultPlugins";
+import { useTreeView } from "@mui/x-tree-view/internals/useTreeView";
+const HV_TREE_VIEW_PLUGINS = [...DEFAULT_TREE_VIEW_PLUGINS];
+export {
+  DescendantProvider,
+  HV_TREE_VIEW_PLUGINS,
+  TreeViewProvider,
+  useDescendant,
+  useTreeView,
+  useTreeViewContext
+};
+//# sourceMappingURL=internals.js.map

package/dist/esm/components/TreeView/internals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internals.js","sources":["../../../../src/components/TreeView/internals.ts"],"sourcesContent":["import { useTreeViewContext } from \"@mui/x-tree-view/internals/TreeViewProvider/useTreeViewContext\";\nimport { TreeViewProvider } from \"@mui/x-tree-view/internals/TreeViewProvider\";\nimport {\n  DescendantProvider,\n  TreeItemDescendant,\n  useDescendant,\n} from \"@mui/x-tree-view/internals/TreeViewProvider/DescendantProvider\";\nimport {\n  DEFAULT_TREE_VIEW_PLUGINS,\n  DefaultTreeViewPlugins,\n  DefaultTreeViewPluginParameters,\n} from \"@mui/x-tree-view/internals/plugins/defaultPlugins\";\nimport { useTreeView } from \"@mui/x-tree-view/internals/useTreeView\";\n\nexport type {\n  DefaultTreeViewPlugins as HvTreeViewPlugins,\n  DefaultTreeViewPluginParameters as HvTreeViewPluginParameters,\n  TreeItemDescendant,\n};\n\nexport const HV_TREE_VIEW_PLUGINS = [...DEFAULT_TREE_VIEW_PLUGINS] as const;\n\nexport {\n  DescendantProvider,\n  TreeViewProvider,\n  useDescendant,\n  useTreeView,\n  useTreeViewContext,\n};\n"],"names":["HV_TREE_VIEW_PLUGINS","DEFAULT_TREE_VIEW_PLUGINS"],"mappings":";;;;;AAoBaA,MAAAA,uBAAuB,CAAC,GAAGC,yBAAyB;"}

package/dist/esm/index.js

@@ -260,7 +260,12 @@ import { HvCarouselControls } from "./components/Carousel/CarouselControls.js";
 import { HvCarouselThumbnails } from "./components/Carousel/CarouselThumbnails.js";
 import { staticClasses as staticClasses112 } from "./components/TimePicker/TimePicker.styles.js";
 import { HvTimePicker } from "./components/TimePicker/TimePicker.js";
-import { staticClasses as staticClasses113 } from "./components/Section/Section.styles.js";
+import { staticClasses as staticClasses113 } from "./components/TreeView/TreeView.styles.js";
+import { HvTreeView } from "./components/TreeView/TreeView.js";
+import { staticClasses as staticClasses114 } from "./components/TreeView/TreeItem/TreeItem.styles.js";
+import { HvTreeItem } from "./components/TreeView/TreeItem/TreeItem.js";
+import { useHvTreeItem } from "./components/TreeView/TreeItem/useHvTreeItem.js";
+import { staticClasses as staticClasses115 } from "./components/Section/Section.styles.js";
 import { HvSection } from "./components/Section/Section.js";
 import { useClickOutside } from "./hooks/useClickOutside.js";
 import { useControlled } from "./hooks/useControlled.js";
@@ -425,6 +430,8 @@ export {
   HvTimePicker,
   HvToggleButton,
   HvTooltip,
+  HvTreeItem,
+  HvTreeView,
   HvTypography,
   HvVerticalNavigation,
   HvVerticalNavigationAction,
@@ -578,7 +585,7 @@ export {
   staticClasses89 as rightControlClasses,
   staticClasses106 as scrollToHorizontalClasses,
   staticClasses104 as scrollToVerticalClasses,
-  staticClasses113 as sectionClasses,
+  staticClasses115 as sectionClasses,
   staticClasses11 as selectionListClasses,
   setElementAttrs,
   setId,
@@ -608,6 +615,8 @@ export {
   staticClasses108 as timeAgoClasses,
   staticClasses112 as timePickerClasses,
   staticClasses48 as tooltipClasses,
+  staticClasses114 as treeItemClasses,
+  staticClasses113 as treeView2Classes,
   staticClasses98 as treeViewClasses,
   staticClasses99 as treeViewItemClasses,
   staticClasses as typographyClasses,
@@ -633,6 +642,7 @@ export {
   default3 as useHvTable,
   default6 as useHvTableSticky,
   default4 as useHvTableStyles,
+  useHvTreeItem,
   useImageLoaded,
   useInstance,
   useIsMounted,

package/dist/esm/index.js.map

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