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

UI Kit Core React components.

import { useHvTreeItem } from "./useHvTreeItem.js";
import { createClasses, useCss } from "@hitachivantara/uikit-react-utils";
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/TreeView/TreeItem/DefaultContent.tsx
var { useClasses } = createClasses("HvTreeContent", {
	root: {},
	expanded: {},
	selected: {},
	focused: {},
	disabled: {},
	iconContainer: {},
	label: {}
});
/**
* Internal default TreeItem `component`.
* Use this as a basis to create a custom component.
*/
var DefaultContent = forwardRef(function DefaultContent(props, ref) {
	const { classes: classesProp, className, displayIcon, expansionIcon, icon: iconProp, label, nodeId, onClick, onMouseDown, ...others } = props;
	const { classes } = useClasses(classesProp);
	const { cx } = useCss();
	const { disabled, expanded, selected, focused, handleExpansion, handleSelection, preventSelection } = useHvTreeItem(nodeId);
	const icon = iconProp ?? expansionIcon ?? displayIcon;
	return /* @__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
		})]
	});
});
//#endregion
export { DefaultContent };