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

UI Kit Core React components.

import { useForkRef } from "../../hooks/useForkRef.js";
import { DescendantProvider, useDescendant } from "../internals/DescendantProvider.js";
import { useTreeViewContext } from "../internals/TreeViewProvider.js";
import { DefaultContent } from "./DefaultContent.js";
import { useClasses } from "./TreeItem.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import Collapse from "@mui/material/Collapse";
//#region src/TreeView/TreeItem/TreeItem.tsx
var HvTreeItem = forwardRef(function HvTreeItem(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 { index, parentId, level } = useDescendant(useMemo(() => ({
		element: treeItemElement,
		id: nodeId
	}), [nodeId, treeItemElement]));
	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);
		}
	}, [
		instance,
		parentId,
		index,
		nodeId,
		expandable,
		disabledProp,
		id
	]);
	useEffect(() => {
		if (instance && label) return instance.mapFirstChar(nodeId, (contentRef.current?.textContent ?? "").slice(0, 1).toLowerCase());
	}, [
		instance,
		nodeId,
		label
	]);
	const handleFocus = (event) => {
		if (event.target === event.currentTarget && !disableTreeFocus) (typeof event.target.getRootNode === "function" ? event.target.getRootNode() : event.target.ownerDocument || document).getElementById(treeId).focus({ preventScroll: true });
		if (instance && !focused && !disabled && !(!disabledItemsFocusable && disabled) && event.currentTarget === event.target) 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
			})
		})]
	});
});
//#endregion
export { HvTreeItem };