@hitachivantara/uikit-react-core/dist/cjs/TreeView/TreeItem/TreeItem.cjs

Core React components for the NEXT Design System.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const Collapse = require("@mui/material/Collapse");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const useForkRef = require("../../hooks/useForkRef.cjs");
const DescendantProvider = require("../internals/DescendantProvider.cjs");
const TreeViewProvider = require("../internals/TreeViewProvider.cjs");
const DefaultContent = require("./DefaultContent.cjs");
const TreeItem_styles = require("./TreeItem.styles.cjs");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const Collapse__default = /* @__PURE__ */ _interopDefault(Collapse);
const HvTreeItem = React.forwardRef(
  function HvTreeItem2(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,
      disableTreeFocus = false,
      ...others
    } = uikitReactUtils.useDefaultProps("HvTreeItem", props);
    const { classes, cx } = TreeItem_styles.useClasses(classesProp);
    const {
      instance,
      multiSelect,
      disabledItemsFocusable,
      treeId,
      icons: contextIcons
    } = TreeViewProvider.useTreeViewContext();
    const id = idProp || treeId && nodeId && `${treeId}-${nodeId}` || void 0;
    const [treeItemElement, setTreeItemElement] = React.useState(null);
    const contentRef = React.useRef(null);
    const handleRef = useForkRef.useForkRef(setTreeItemElement, ref);
    const descendant = React.useMemo(
      () => ({ element: treeItemElement, id: nodeId }),
      [nodeId, treeItemElement]
    );
    const { index, parentId, level } = 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 && !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__ */ 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, level: level + 1, children: /* @__PURE__ */ jsxRuntime.jsx(
            Collapse__default.default,
            {
              component: "ul",
              role: "group",
              unmountOnExit: true,
              className: classes.group,
              in: expanded,
              ...transitionProps,
              children
            }
          ) })
        ]
      }
    );
  }
);
exports.treeItemClasses = TreeItem_styles.staticClasses;
exports.HvTreeItem = HvTreeItem;