@hitachivantara/uikit-react-core/dist/esm/TreeView/TreeItem/TreeItem.js

Core React components for the NEXT Design System.

import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef, useState, useRef, useMemo, useEffect } from "react";
import Collapse from "@mui/material/Collapse";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useForkRef } from "../../hooks/useForkRef.js";
import { useDescendant, DescendantProvider } from "../internals/DescendantProvider.js";
import { useTreeViewContext } from "../internals/TreeViewProvider.js";
import { DefaultContent } from "./DefaultContent.js";
import { useClasses } from "./TreeItem.styles.js";
import { staticClasses } from "./TreeItem.styles.js";
const HvTreeItem = forwardRef(
  function HvTreeItem2(props, ref) {
    const {
      id: idProp,
      nodeId,
      children,
      classes: classesProp,
      className,
      label,
      disabled: disabledProp,
      icon,
      endIcon,
      expandIcon,
      collapseIcon,
      ContentComponent: Component = DefaultContent,
      TransitionProps: transitionProps,
      ContentProps: contentProps,
      disableTreeFocus = false,
      ...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, level } = 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 && !disableTreeFocus) {
        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, level: level + 1, children: /* @__PURE__ */ jsx(
            Collapse,
            {
              component: "ul",
              role: "group",
              unmountOnExit: true,
              className: classes.group,
              in: expanded,
              ...transitionProps,
              children
            }
          ) })
        ]
      }
    );
  }
);
export {
  HvTreeItem,
  staticClasses as treeItemClasses
};