@carbon/react 1.103.0 → 1.104.0

package/es/components/TreeView/TreeNode.js

@@ -1,514 +1,375 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { CaretDown } from '@carbon/icons-react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useContext, useRef, useState, useEffect, useCallback } from 'react';
-import { ArrowLeft, ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
-import { matches, match } from '../../internal/keyboard/match.js';
-import { deprecate } from '../../prop-types/deprecate.js';
-import { useControllableState } from '../../internal/useControllableState.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { useId } from '../../internal/useId.js';
-import { useFeatureFlag } from '../FeatureFlags/index.js';
-import { IconButton } from '../IconButton/index.js';
-import { TreeContext, DepthContext } from './TreeContext.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { ArrowLeft, ArrowRight as ArrowRight$1, Enter, Space } from "../../internal/keyboard/keys.js";
+import { match, matches } from "../../internal/keyboard/match.js";
+import { useId } from "../../internal/useId.js";
+import { deprecate } from "../../prop-types/deprecate.js";
+import { useFeatureFlag } from "../FeatureFlags/index.js";
+import { IconButton } from "../IconButton/index.js";
+import { useControllableState } from "../../internal/useControllableState.js";
+import { DepthContext, TreeContext } from "./TreeContext.js";
+import classNames from "classnames";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CaretDown } from "@carbon/icons-react";
 
-const extractTextContent = node => {
-  if (node === null || node === undefined) return '';
-  if (typeof node === 'string') return node;
-  if (typeof node === 'number') return String(node);
-  if (typeof node === 'boolean') return String(node);
-  if (Array.isArray(node)) {
-    return node.map(extractTextContent).join('');
-  }
-  if (/*#__PURE__*/React.isValidElement(node)) {
-    const element = node;
-    const children = element.props.children;
-    return extractTextContent(children);
-  }
-  return '';
+//#region src/components/TreeView/TreeNode.tsx
+/**
+* Copyright IBM Corp. 2016, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const extractTextContent = (node) => {
+	if (node === null || node === void 0) return "";
+	if (typeof node === "string") return node;
+	if (typeof node === "number") return String(node);
+	if (typeof node === "boolean") return String(node);
+	if (Array.isArray(node)) return node.map(extractTextContent).join("");
+	if (React.isValidElement(node)) {
+		const children = node.props.children;
+		return extractTextContent(children);
+	}
+	return "";
 };
 const useEllipsisCheck = (label, detailsWrapperRef) => {
-  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  const labelTextRef = useRef(null);
-  const checkEllipsis = useCallback(() => {
-    const element = labelTextRef.current;
-    if (!element) {
-      setIsEllipsisApplied(false);
-      return;
-    }
-    if (element.offsetWidth === 0) {
-      setIsEllipsisApplied(false);
-      return;
-    }
-    const checkElement = detailsWrapperRef.current || element;
-    if (checkElement && checkElement.offsetWidth > 0) {
-      const isTextTruncated = element.scrollWidth > checkElement.offsetWidth;
-      setIsEllipsisApplied(isTextTruncated);
-    } else {
-      setIsEllipsisApplied(false);
-    }
-  }, [detailsWrapperRef]);
-  useEffect(() => {
-    const animationFrameId = requestAnimationFrame(checkEllipsis);
-    let resizeObserver;
-    if (typeof window !== 'undefined' && typeof window.ResizeObserver !== 'undefined' && labelTextRef.current) {
-      resizeObserver = new window.ResizeObserver(() => {
-        requestAnimationFrame(checkEllipsis);
-      });
-      resizeObserver.observe(labelTextRef.current);
-      if (detailsWrapperRef.current) {
-        resizeObserver.observe(detailsWrapperRef.current);
-      }
-    }
-    return () => {
-      cancelAnimationFrame(animationFrameId);
-      if (resizeObserver) {
-        if (labelTextRef.current) {
-          // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-          resizeObserver.unobserve(labelTextRef.current);
-        }
-        if (detailsWrapperRef.current) {
-          // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-          resizeObserver.unobserve(detailsWrapperRef.current);
-        }
-        resizeObserver.disconnect();
-      }
-    };
-  }, [checkEllipsis, detailsWrapperRef]);
-  return {
-    labelTextRef,
-    isEllipsisApplied,
-    tooltipText: extractTextContent(label)
-  };
+	const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
+	const labelTextRef = useRef(null);
+	const checkEllipsis = useCallback(() => {
+		const element = labelTextRef.current;
+		if (!element) {
+			setIsEllipsisApplied(false);
+			return;
+		}
+		if (element.offsetWidth === 0) {
+			setIsEllipsisApplied(false);
+			return;
+		}
+		const checkElement = detailsWrapperRef.current || element;
+		if (checkElement && checkElement.offsetWidth > 0) setIsEllipsisApplied(element.scrollWidth > checkElement.offsetWidth);
+		else setIsEllipsisApplied(false);
+	}, [detailsWrapperRef]);
+	useEffect(() => {
+		const animationFrameId = requestAnimationFrame(checkEllipsis);
+		let resizeObserver;
+		if (typeof window !== "undefined" && typeof window.ResizeObserver !== "undefined" && labelTextRef.current) {
+			resizeObserver = new window.ResizeObserver(() => {
+				requestAnimationFrame(checkEllipsis);
+			});
+			resizeObserver.observe(labelTextRef.current);
+			if (detailsWrapperRef.current) resizeObserver.observe(detailsWrapperRef.current);
+		}
+		return () => {
+			cancelAnimationFrame(animationFrameId);
+			if (resizeObserver) {
+				if (labelTextRef.current) resizeObserver.unobserve(labelTextRef.current);
+				if (detailsWrapperRef.current) resizeObserver.unobserve(detailsWrapperRef.current);
+				resizeObserver.disconnect();
+			}
+		};
+	}, [checkEllipsis, detailsWrapperRef]);
+	return {
+		labelTextRef,
+		isEllipsisApplied,
+		tooltipText: extractTextContent(label)
+	};
 };
-const TreeNode = /*#__PURE__*/React.forwardRef(({
-  children,
-  className,
-  disabled,
-  id: nodeId,
-  isExpanded,
-  defaultIsExpanded,
-  label,
-  onSelect: onNodeSelect,
-  onToggle,
-  renderIcon: Icon,
-  value,
-  href,
-  align = 'bottom',
-  autoAlign = false,
-  // These props are fallback props if the TreeContext is not available or only TreeNode is used as a standalone component
-  active: propActive,
-  depth: propDepth,
-  selected: propSelected,
-  onTreeSelect: propOnTreeSelect,
-  onNodeFocusEvent,
-  ...rest
-}, forwardedRef) => {
-  const treeContext = useContext(TreeContext);
-  const contextDepth = useContext(DepthContext);
-
-  // Prioritize direct props, and fall back to context values.
-  const depth = propDepth ?? (contextDepth !== -1 ? contextDepth : 0);
-  const active = propActive ?? treeContext?.active;
-  const selected = propSelected ?? treeContext?.selected ?? [];
-  const onTreeSelect = propOnTreeSelect ?? treeContext?.onTreeSelect;
-  const detailsWrapperRef = useRef(null);
-  const {
-    labelTextRef,
-    isEllipsisApplied,
-    tooltipText
-  } = useEllipsisCheck(label, detailsWrapperRef);
-  const enableTreeviewControllable = useFeatureFlag('enable-treeview-controllable');
-
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-  const {
-    current: id
-  } = useRef(nodeId || useId());
-  const controllableExpandedState = useControllableState({
-    value: isExpanded,
-    onChange: onToggle,
-    defaultValue: defaultIsExpanded ?? false
-  });
-  const uncontrollableExpandedState = useState(isExpanded ?? false);
-  const [expanded, setExpanded] = enableTreeviewControllable ? controllableExpandedState : uncontrollableExpandedState;
-  const currentNode = useRef(null);
-  const currentNodeLabel = useRef(null);
-  const prefix = usePrefix();
-  const nodeLabelId = `${id}__label`;
-  const renderLabelText = () => {
-    if (isEllipsisApplied && tooltipText) {
-      return /*#__PURE__*/React.createElement(IconButton, {
-        label: tooltipText,
-        kind: "ghost",
-        align: align,
-        autoAlign: autoAlign,
-        className: `${prefix}--tree-node__label__text-button`,
-        wrapperClasses: `${prefix}--popover-container`
-      }, /*#__PURE__*/React.createElement("span", {
-        id: nodeLabelId,
-        ref: labelTextRef,
-        className: `${prefix}--tree-node__label__text`
-      }, label));
-    }
-    return /*#__PURE__*/React.createElement("span", {
-      id: nodeLabelId,
-      ref: labelTextRef,
-      className: `${prefix}--tree-node__label__text`
-    }, label);
-  };
-  const setRefs = element => {
-    currentNode.current = element;
-    if (typeof forwardedRef === 'function') {
-      forwardedRef(element);
-    } else if (forwardedRef) {
-      forwardedRef.current = element;
-    }
-  };
-  const isActive = active === id;
-  const isSelected = selected?.includes(id) ?? false;
-  const treeNodeClasses = cx(className, `${prefix}--tree-node`, {
-    [`${prefix}--tree-node--active`]: isActive,
-    [`${prefix}--tree-node--disabled`]: disabled,
-    [`${prefix}--tree-node--selected`]: isSelected,
-    [`${prefix}--tree-node--with-icon`]: Icon,
-    [`${prefix}--tree-leaf-node`]: !children,
-    [`${prefix}--tree-parent-node`]: children
-  });
-  const toggleClasses = cx(`${prefix}--tree-parent-node__toggle-icon`, {
-    [`${prefix}--tree-parent-node__toggle-icon--expanded`]: expanded
-  });
-  function handleToggleClick(event) {
-    if (disabled) {
-      return;
-    }
-
-    // Prevent the node from being selected
-    event.stopPropagation();
-    if (href) {
-      event.preventDefault();
-    }
-    if (!enableTreeviewControllable) {
-      onToggle?.(event, {
-        id,
-        isExpanded: !expanded,
-        label,
-        value
-      });
-    }
-    setExpanded(!expanded);
-  }
-  function handleClick(event) {
-    event.stopPropagation();
-    if (!disabled) {
-      onTreeSelect?.(event, {
-        id,
-        label,
-        value
-      });
-      onNodeSelect?.(event, {
-        id,
-        label,
-        value
-      });
-      rest?.onClick?.(event);
-    }
-  }
-  function handleKeyDown(event) {
-    function getFocusableNode(node) {
-      if (node?.classList.contains(`${prefix}--tree-node`)) {
-        return node;
-      }
-      return node?.firstChild;
-    }
-    if (disabled) {
-      return;
-    }
-    if (matches(event, [ArrowLeft, ArrowRight, Enter])) {
-      event.stopPropagation();
-    }
-    if (match(event, ArrowLeft)) {
-      const findParentTreeNode = node => {
-        if (!node) return null;
-        if (node.classList.contains(`${prefix}--tree-parent-node`)) {
-          return node;
-        }
-        if (node.classList.contains(`${prefix}--tree-node-link-parent`)) {
-          return node.firstElementChild;
-        }
-        if (node.classList.contains(`${prefix}--tree`)) {
-          return null;
-        }
-        return findParentTreeNode(node.parentElement);
-      };
-      if (children && expanded) {
-        if (!enableTreeviewControllable) {
-          onToggle?.(event, {
-            id,
-            isExpanded: false,
-            label,
-            value
-          });
-        }
-        setExpanded(false);
-      } else {
-        /**
-         * When focus is on a leaf node or a closed parent node, move focus to
-         * its parent node (unless its depth is level 1)
-         */
-        const parentNode = findParentTreeNode((href ? currentNode.current?.parentElement?.parentElement : currentNode.current?.parentElement) ?? null);
-        if (parentNode instanceof HTMLElement) {
-          parentNode.focus();
-        }
-      }
-    }
-    if (children && match(event, ArrowRight)) {
-      if (expanded) {
-        /**
-         * When focus is on an expanded parent node, move focus to the first
-         * child node
-         */
-        getFocusableNode(href ? currentNode.current?.parentElement?.lastChild?.firstChild : currentNode.current?.lastChild?.firstChild)?.focus();
-      } else {
-        if (!enableTreeviewControllable) {
-          onToggle?.(event, {
-            id,
-            isExpanded: true,
-            label,
-            value
-          });
-        }
-        setExpanded(true);
-      }
-    }
-    if (matches(event, [Enter, Space])) {
-      event.preventDefault();
-      if (match(event, Enter) && children) {
-        // Toggle expansion state for parent nodes
-        if (!enableTreeviewControllable) {
-          onToggle?.(event, {
-            id,
-            isExpanded: !expanded,
-            label,
-            value
-          });
-        }
-        setExpanded(!expanded);
-      }
-      if (href) {
-        currentNode.current?.click();
-      }
-      handleClick(event);
-    }
-    rest?.onKeyDown?.(event);
-  }
-  function handleFocusEvent(event) {
-    if (event.type === 'focus') {
-      rest?.onFocus?.(event);
-    }
-    if (event.type === 'blur') {
-      rest?.onBlur?.(event);
-    }
-    onNodeFocusEvent?.(event);
-  }
-  useEffect(() => {
-    /**
-     * Negative margin shifts node to align with the left side boundary of the
-     * tree
-     * Dynamically calculate padding to recreate tree node indentation
-     * - parent nodes with icon have (depth + 1rem + depth * 0.5) left padding
-     * - parent nodes have (depth + 1rem) left padding
-     * - leaf nodes have (depth + 2.5rem) left padding without icons (because
-     *   of expand icon + spacing)
-     * - leaf nodes have (depth + 2rem + depth * 0.5) left padding with icons (because of
-     *   reduced spacing between the expand icon and the node icon + label)
-     */
-    const calcOffset = () => {
-      // parent node with icon
-      if (children && Icon) {
-        return depth + 1 + depth * 0.5;
-      }
-      // parent node without icon
-      if (children) {
-        return depth + 1;
-      }
-      // leaf node with icon
-      if (Icon) {
-        return depth + 2 + depth * 0.5;
-      }
-      // leaf node without icon
-      return depth + 2.5;
-    };
-    if (currentNodeLabel.current) {
-      currentNodeLabel.current.style.marginInlineStart = `-${calcOffset()}rem`;
-      currentNodeLabel.current.style.paddingInlineStart = `${calcOffset()}rem`;
-    }
-    if (!enableTreeviewControllable) {
-      // sync props and state
-      setExpanded(isExpanded ?? false);
-    }
-  }, [children, depth, Icon, isExpanded, enableTreeviewControllable, setExpanded]);
-  const tabIndex = disabled ? undefined : rest.tabIndex ?? -1;
-  const treeNodeProps = {
-    ...rest,
-    ['aria-current']: !href ? isActive || undefined : isActive ? 'page' : undefined,
-    ['aria-selected']: !href ? disabled ? undefined : isSelected : undefined,
-    ['aria-disabled']: disabled,
-    ['aria-owns']: children ? `${id}-subtree` : undefined,
-    className: treeNodeClasses,
-    id,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown,
-    role: 'treeitem',
-    tabIndex,
-    onFocus: handleFocusEvent,
-    onBlur: handleFocusEvent
-  };
-  const nodeContent = /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--tree-node__label`,
-    ref: currentNodeLabel
-  }, children &&
-  /*#__PURE__*/
-  // eslint-disable-next-line  jsx-a11y/no-static-element-interactions , jsx-a11y/click-events-have-key-events -- https://github.com/carbon-design-system/carbon/issues/20452
-  React.createElement("span", {
-    className: `${prefix}--tree-parent-node__toggle`,
-    onClick: handleToggleClick
-  }, /*#__PURE__*/React.createElement(CaretDown, {
-    className: toggleClasses
-  })), /*#__PURE__*/React.createElement("span", {
-    className: `${prefix}--tree-node__label__details`
-  }, Icon && /*#__PURE__*/React.createElement(Icon, {
-    className: `${prefix}--tree-node__icon`
-  }), renderLabelText()));
-  if (href) {
-    return /*#__PURE__*/React.createElement("li", {
-      role: "none",
-      className: children ? `${prefix}--tree-node-link-parent` : ''
-    }, /*#__PURE__*/React.createElement("a", _extends({}, treeNodeProps, {
-      "aria-expanded": !!expanded,
-      ref: setRefs,
-      href: !disabled ? href : undefined
-    }), nodeContent), children && /*#__PURE__*/React.createElement("ul", {
-      id: `${id}-subtree`,
-      role: "group",
-      "aria-labelledby": nodeLabelId,
-      className: cx(`${prefix}--tree-node__children`, {
-        [`${prefix}--tree-node--hidden`]: !expanded
-      })
-    }, /*#__PURE__*/React.createElement(DepthContext.Provider, {
-      value: depth + 1
-    }, children)));
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", _extends({}, treeNodeProps, {
-    "aria-expanded": children ? !!expanded : undefined,
-    ref: setRefs
-  }), nodeContent, children && /*#__PURE__*/React.createElement("ul", {
-    id: `${id}-subtree`,
-    role: "group",
-    "aria-labelledby": nodeLabelId,
-    className: cx(`${prefix}--tree-node__children`, {
-      [`${prefix}--tree-node--hidden`]: !expanded
-    })
-  }, /*#__PURE__*/React.createElement(DepthContext.Provider, {
-    value: depth + 1
-  }, children))));
+const TreeNode = React.forwardRef(({ children, className, disabled, id: nodeId, isExpanded, defaultIsExpanded, label, onSelect: onNodeSelect, onToggle, renderIcon: Icon, value, href, align = "bottom", autoAlign = false, active: propActive, depth: propDepth, selected: propSelected, onTreeSelect: propOnTreeSelect, onNodeFocusEvent, ...rest }, forwardedRef) => {
+	const treeContext = useContext(TreeContext);
+	const contextDepth = useContext(DepthContext);
+	const depth = propDepth ?? (contextDepth !== -1 ? contextDepth : 0);
+	const active = propActive ?? treeContext?.active;
+	const selected = propSelected ?? treeContext?.selected ?? [];
+	const onTreeSelect = propOnTreeSelect ?? treeContext?.onTreeSelect;
+	const { labelTextRef, isEllipsisApplied, tooltipText } = useEllipsisCheck(label, useRef(null));
+	const enableTreeviewControllable = useFeatureFlag("enable-treeview-controllable");
+	const { current: id } = useRef(nodeId || useId());
+	const controllableExpandedState = useControllableState({
+		value: isExpanded,
+		onChange: onToggle,
+		defaultValue: defaultIsExpanded ?? false
+	});
+	const uncontrollableExpandedState = useState(isExpanded ?? false);
+	const [expanded, setExpanded] = enableTreeviewControllable ? controllableExpandedState : uncontrollableExpandedState;
+	const currentNode = useRef(null);
+	const currentNodeLabel = useRef(null);
+	const prefix = usePrefix();
+	const nodeLabelId = `${id}__label`;
+	const renderLabelText = () => {
+		if (isEllipsisApplied && tooltipText) return /* @__PURE__ */ jsx(IconButton, {
+			label: tooltipText,
+			kind: "ghost",
+			align,
+			autoAlign,
+			className: `${prefix}--tree-node__label__text-button`,
+			wrapperClasses: `${prefix}--popover-container`,
+			children: /* @__PURE__ */ jsx("span", {
+				id: nodeLabelId,
+				ref: labelTextRef,
+				className: `${prefix}--tree-node__label__text`,
+				children: label
+			})
+		});
+		return /* @__PURE__ */ jsx("span", {
+			id: nodeLabelId,
+			ref: labelTextRef,
+			className: `${prefix}--tree-node__label__text`,
+			children: label
+		});
+	};
+	const setRefs = (element) => {
+		currentNode.current = element;
+		if (typeof forwardedRef === "function") forwardedRef(element);
+		else if (forwardedRef) forwardedRef.current = element;
+	};
+	const isActive = active === id;
+	const isSelected = selected?.includes(id) ?? false;
+	const treeNodeClasses = classNames(className, `${prefix}--tree-node`, {
+		[`${prefix}--tree-node--active`]: isActive,
+		[`${prefix}--tree-node--disabled`]: disabled,
+		[`${prefix}--tree-node--selected`]: isSelected,
+		[`${prefix}--tree-node--with-icon`]: Icon,
+		[`${prefix}--tree-leaf-node`]: !children,
+		[`${prefix}--tree-parent-node`]: children
+	});
+	const toggleClasses = classNames(`${prefix}--tree-parent-node__toggle-icon`, { [`${prefix}--tree-parent-node__toggle-icon--expanded`]: expanded });
+	function handleToggleClick(event) {
+		if (disabled) return;
+		event.stopPropagation();
+		if (href) event.preventDefault();
+		if (!enableTreeviewControllable) onToggle?.(event, {
+			id,
+			isExpanded: !expanded,
+			label,
+			value
+		});
+		setExpanded(!expanded);
+	}
+	function handleClick(event) {
+		event.stopPropagation();
+		if (!disabled) {
+			onTreeSelect?.(event, {
+				id,
+				label,
+				value
+			});
+			onNodeSelect?.(event, {
+				id,
+				label,
+				value
+			});
+			rest?.onClick?.(event);
+		}
+	}
+	function handleKeyDown(event) {
+		function getFocusableNode(node) {
+			if (node?.classList.contains(`${prefix}--tree-node`)) return node;
+			return node?.firstChild;
+		}
+		if (disabled) return;
+		if (matches(event, [
+			ArrowLeft,
+			ArrowRight$1,
+			Enter
+		])) event.stopPropagation();
+		if (match(event, ArrowLeft)) {
+			const findParentTreeNode = (node) => {
+				if (!node) return null;
+				if (node.classList.contains(`${prefix}--tree-parent-node`)) return node;
+				if (node.classList.contains(`${prefix}--tree-node-link-parent`)) return node.firstElementChild;
+				if (node.classList.contains(`${prefix}--tree`)) return null;
+				return findParentTreeNode(node.parentElement);
+			};
+			if (children && expanded) {
+				if (!enableTreeviewControllable) onToggle?.(event, {
+					id,
+					isExpanded: false,
+					label,
+					value
+				});
+				setExpanded(false);
+			} else {
+				/**
+				* When focus is on a leaf node or a closed parent node, move focus to
+				* its parent node (unless its depth is level 1)
+				*/
+				const parentNode = findParentTreeNode((href ? currentNode.current?.parentElement?.parentElement : currentNode.current?.parentElement) ?? null);
+				if (parentNode instanceof HTMLElement) parentNode.focus();
+			}
+		}
+		if (children && match(event, ArrowRight$1)) if (expanded)
+ /**
+		* When focus is on an expanded parent node, move focus to the first
+		* child node
+		*/
+		getFocusableNode(href ? currentNode.current?.parentElement?.lastChild?.firstChild : currentNode.current?.lastChild?.firstChild)?.focus();
+		else {
+			if (!enableTreeviewControllable) onToggle?.(event, {
+				id,
+				isExpanded: true,
+				label,
+				value
+			});
+			setExpanded(true);
+		}
+		if (matches(event, [Enter, Space])) {
+			event.preventDefault();
+			if (match(event, Enter) && children) {
+				if (!enableTreeviewControllable) onToggle?.(event, {
+					id,
+					isExpanded: !expanded,
+					label,
+					value
+				});
+				setExpanded(!expanded);
+			}
+			if (href) currentNode.current?.click();
+			handleClick(event);
+		}
+		rest?.onKeyDown?.(event);
+	}
+	function handleFocusEvent(event) {
+		if (event.type === "focus") rest?.onFocus?.(event);
+		if (event.type === "blur") rest?.onBlur?.(event);
+		onNodeFocusEvent?.(event);
+	}
+	useEffect(() => {
+		/**
+		* Negative margin shifts node to align with the left side boundary of the
+		* tree
+		* Dynamically calculate padding to recreate tree node indentation
+		* - parent nodes with icon have (depth + 1rem + depth * 0.5) left padding
+		* - parent nodes have (depth + 1rem) left padding
+		* - leaf nodes have (depth + 2.5rem) left padding without icons (because
+		*   of expand icon + spacing)
+		* - leaf nodes have (depth + 2rem + depth * 0.5) left padding with icons (because of
+		*   reduced spacing between the expand icon and the node icon + label)
+		*/
+		const calcOffset = () => {
+			if (children && Icon) return depth + 1 + depth * .5;
+			if (children) return depth + 1;
+			if (Icon) return depth + 2 + depth * .5;
+			return depth + 2.5;
+		};
+		if (currentNodeLabel.current) {
+			currentNodeLabel.current.style.marginInlineStart = `-${calcOffset()}rem`;
+			currentNodeLabel.current.style.paddingInlineStart = `${calcOffset()}rem`;
+		}
+		if (!enableTreeviewControllable) setExpanded(isExpanded ?? false);
+	}, [
+		children,
+		depth,
+		Icon,
+		isExpanded,
+		enableTreeviewControllable,
+		setExpanded
+	]);
+	const tabIndex = disabled ? void 0 : rest.tabIndex ?? -1;
+	const treeNodeProps = {
+		...rest,
+		["aria-current"]: !href ? isActive || void 0 : isActive ? "page" : void 0,
+		["aria-selected"]: !href ? disabled ? void 0 : isSelected : void 0,
+		["aria-disabled"]: disabled,
+		["aria-owns"]: children ? `${id}-subtree` : void 0,
+		className: treeNodeClasses,
+		id,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		role: "treeitem",
+		tabIndex,
+		onFocus: handleFocusEvent,
+		onBlur: handleFocusEvent
+	};
+	const nodeContent = /* @__PURE__ */ jsxs("div", {
+		className: `${prefix}--tree-node__label`,
+		ref: currentNodeLabel,
+		children: [children && /* @__PURE__ */ jsx("span", {
+			className: `${prefix}--tree-parent-node__toggle`,
+			onClick: handleToggleClick,
+			children: /* @__PURE__ */ jsx(CaretDown, { className: toggleClasses })
+		}), /* @__PURE__ */ jsxs("span", {
+			className: `${prefix}--tree-node__label__details`,
+			children: [Icon && /* @__PURE__ */ jsx(Icon, { className: `${prefix}--tree-node__icon` }), renderLabelText()]
+		})]
+	});
+	if (href) return /* @__PURE__ */ jsxs("li", {
+		role: "none",
+		className: children ? `${prefix}--tree-node-link-parent` : "",
+		children: [/* @__PURE__ */ jsx("a", {
+			...treeNodeProps,
+			"aria-expanded": !!expanded,
+			ref: setRefs,
+			href: !disabled ? href : void 0,
+			children: nodeContent
+		}), children && /* @__PURE__ */ jsx("ul", {
+			id: `${id}-subtree`,
+			role: "group",
+			"aria-labelledby": nodeLabelId,
+			className: classNames(`${prefix}--tree-node__children`, { [`${prefix}--tree-node--hidden`]: !expanded }),
+			children: /* @__PURE__ */ jsx(DepthContext.Provider, {
+				value: depth + 1,
+				children
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("li", {
+		...treeNodeProps,
+		"aria-expanded": children ? !!expanded : void 0,
+		ref: setRefs,
+		children: [nodeContent, children && /* @__PURE__ */ jsx("ul", {
+			id: `${id}-subtree`,
+			role: "group",
+			"aria-labelledby": nodeLabelId,
+			className: classNames(`${prefix}--tree-node__children`, { [`${prefix}--tree-node--hidden`]: !expanded }),
+			children: /* @__PURE__ */ jsx(DepthContext.Provider, {
+				value: depth + 1,
+				children
+			})
+		})]
+	}) });
 });
 TreeNode.propTypes = {
-  /**
-   * **Note:** this is controlled by the parent TreeView component, do not set manually.
-   * The ID of the active node in the tree
-   */
-  active: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 'The `active` prop for `TreeNode` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
-  /**
-   * Specify the children of the TreeNode
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be applied to the TreeNode
-   */
-  className: PropTypes.string,
-  /**
-   * **[Experimental]** The default expansion state of the node.
-   * *This is only supported with the `enable-treeview-controllable` feature flag!*
-   */
-  defaultIsExpanded: PropTypes.bool,
-  /**
-   * **Note:** this is controlled by the parent TreeView component, do not set manually.
-   * TreeNode depth to determine spacing
-   */
-  depth: deprecate(PropTypes.number, 'The `depth` prop for `TreeNode` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
-  /**
-   * Specify if the TreeNode is disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active, props.selected and aria-owns
-   */
-  id: PropTypes.string,
-  /**
-   * Specify if the TreeNode is expanded (only applicable to parent nodes)
-   */
-  isExpanded: PropTypes.bool,
-  /**
-   * Rendered label for the TreeNode
-   */
-  label: PropTypes.node,
-  /**
-   * Callback function for when the node receives or loses focus
-   */
-  onNodeFocusEvent: deprecate(PropTypes.func, 'The `onNodeFocusEvent` prop for `TreeNode` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
-  /**
-   * Callback function for when the node is selected
-   */
-  onSelect: PropTypes.func,
-  /**
-   * Callback function for when a parent node is expanded or collapsed
-   */
-  onToggle: PropTypes.func,
-  /**
-   * Callback function for when any node in the tree is selected
-   */
-  onTreeSelect: deprecate(PropTypes.func, 'The `onTreeSelect` prop for `TreeNode` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
-  /**
-   * A component used to render an icon.
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
-  // @ts-ignore
-  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  /**
-   * **Note:** this is controlled by the parent TreeView component, do not set manually.
-   * Array containing all selected node IDs in the tree
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
-  // @ts-ignore
-  selected: deprecate(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), 'The `selected` prop for `TreeNode` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
-  /**
-   * Specify the value of the TreeNode
-   */
-  value: PropTypes.string,
-  /**
-   * Optional: The URL the TreeNode is linking to
-   */
-  href: PropTypes.string,
-  /**
-   * Specify how the tooltip should align when text is truncated
-   */
-  align: PropTypes.oneOf(['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
-  /**
-   * **Experimental**: Will attempt to automatically align the floating
-   * element to avoid collisions with the viewport and being clipped by
-   * ancestor elements. Requires React v17+
-   * @see https://github.com/carbon-design-system/carbon/issues/18714
-   */
-  autoAlign: PropTypes.bool
+	active: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]), "The `active` prop for `TreeNode` is no longer needed and has been deprecated. It will be removed in the next major release."),
+	children: PropTypes.node,
+	className: PropTypes.string,
+	defaultIsExpanded: PropTypes.bool,
+	depth: deprecate(PropTypes.number, "The `depth` prop for `TreeNode` is no longer needed and has been deprecated. It will be removed in the next major release."),
+	disabled: PropTypes.bool,
+	id: PropTypes.string,
+	isExpanded: PropTypes.bool,
+	label: PropTypes.node,
+	onNodeFocusEvent: deprecate(PropTypes.func, "The `onNodeFocusEvent` prop for `TreeNode` is no longer needed and has been deprecated. It will be removed in the next major release."),
+	onSelect: PropTypes.func,
+	onToggle: PropTypes.func,
+	onTreeSelect: deprecate(PropTypes.func, "The `onTreeSelect` prop for `TreeNode` is no longer needed and has been deprecated. It will be removed in the next major release."),
+	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	selected: deprecate(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), "The `selected` prop for `TreeNode` is no longer needed and has been deprecated. It will be removed in the next major release."),
+	value: PropTypes.string,
+	href: PropTypes.string,
+	align: PropTypes.oneOf([
+		"top",
+		"bottom",
+		"left",
+		"right",
+		"top-start",
+		"top-end",
+		"bottom-start",
+		"bottom-end",
+		"left-end",
+		"left-start",
+		"right-end",
+		"right-start"
+	]),
+	autoAlign: PropTypes.bool
 };
-TreeNode.displayName = 'TreeNode';
+TreeNode.displayName = "TreeNode";
 
-export { TreeNode as default };
+//#endregion
+export { TreeNode as default };