@primer/react 38.32.0-rc.3ce9543fd → 38.32.0-rc.4bb4bba69

package/dist/TreeView/TreeView.js

@@ -22,10 +22,9 @@ import { getFirstChildElement, useRovingTabIndex } from "./useRovingTabIndex.js"
 import { useTypeahead } from "./useTypeahead.js";
 import { SkeletonAvatar } from "../SkeletonAvatar/SkeletonAvatar.js";
 import { SkeletonText } from "../SkeletonText/SkeletonText.js";
-import { c } from "react-compiler-runtime";
 import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 import { ChevronDownIcon, ChevronRightIcon, FileDirectoryFillIcon, FileDirectoryOpenFillIcon } from "@primer/octicons-react";
 //#region src/TreeView/TreeView.tsx
 const RootContext = /*#__PURE__*/ React.createContext({
@@ -46,168 +45,79 @@ const ItemContext = /*#__PURE__*/ React.createContext({
 });
 const LoadingPlaceholderContext = /*#__PURE__*/ React.createContext(false);
 const TOGGLE_ICON_SIZE = 12;
-const Root = (t0) => {
-	const $ = c(26);
-	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, flat, truncate: t1, className, style } = t0;
-	const truncate = t1 === void 0 ? true : t1;
+const Root = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, flat, truncate = true, className, style }) => {
 	const containerRef = React.useRef(null);
 	const mouseDownRef = React.useRef(false);
 	const [ariaLiveMessage, setAriaLiveMessage] = React.useState("");
-	let t2;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = (message) => {
-			setAriaLiveMessage(message);
-		};
-		$[0] = t2;
-	} else t2 = $[0];
-	const announceUpdate = t2;
-	let t3;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = () => {
-			mouseDownRef.current = true;
-		};
-		$[1] = t3;
-	} else t3 = $[1];
-	const onMouseDown = t3;
-	let t4;
-	let t5;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = () => {
-			const onMouseUp = function onMouseUp() {
-				mouseDownRef.current = false;
-			};
-			document.addEventListener("mouseup", onMouseUp);
-			return () => {
-				document.removeEventListener("mouseup", onMouseUp);
-			};
-		};
-		t5 = [];
-		$[2] = t4;
-		$[3] = t5;
-	} else {
-		t4 = $[2];
-		t5 = $[3];
-	}
-	useEffect(t4, t5);
-	let t6;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = {
-			containerRef,
-			mouseDownRef
-		};
-		$[4] = t6;
-	} else t6 = $[4];
-	useRovingTabIndex(t6);
-	let t7;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = {
-			containerRef,
-			onFocusChange: _temp
+	const announceUpdate = React.useCallback((message) => {
+		setAriaLiveMessage(message);
+	}, []);
+	const onMouseDown = useCallback(() => {
+		mouseDownRef.current = true;
+	}, []);
+	useEffect(() => {
+		function onMouseUp() {
+			mouseDownRef.current = false;
+		}
+		document.addEventListener("mouseup", onMouseUp);
+		return () => {
+			document.removeEventListener("mouseup", onMouseUp);
 		};
-		$[5] = t7;
-	} else t7 = $[5];
-	useTypeahead(t7);
+	}, []);
+	useRovingTabIndex({
+		containerRef,
+		mouseDownRef
+	});
+	useTypeahead({
+		containerRef,
+		onFocusChange: (element) => {
+			if (element instanceof HTMLElement) element.focus();
+		}
+	});
 	const pendingScrollRef = React.useRef(null);
-	let t8;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = (element_0) => {
-			if (!element_0) return;
-			if (pendingScrollRef.current !== null) cancelAnimationFrame(pendingScrollRef.current);
-			pendingScrollRef.current = requestAnimationFrame(() => {
-				pendingScrollRef.current = null;
-				if (!element_0.isConnected) return;
-				element_0.scrollIntoView({
-					block: "nearest",
-					inline: "nearest"
-				});
+	const scrollElementIntoView = useCallback((element) => {
+		if (!element) return;
+		if (pendingScrollRef.current !== null) cancelAnimationFrame(pendingScrollRef.current);
+		pendingScrollRef.current = requestAnimationFrame(() => {
+			pendingScrollRef.current = null;
+			if (!element.isConnected) return;
+			element.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
 			});
-		};
-		$[6] = t8;
-	} else t8 = $[6];
-	const scrollElementIntoView = t8;
-	let t10;
-	let t9;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = () => () => {
+		});
+	}, []);
+	useEffect(() => {
+		return () => {
 			if (pendingScrollRef.current !== null) cancelAnimationFrame(pendingScrollRef.current);
 		};
-		t10 = [];
-		$[7] = t10;
-		$[8] = t9;
-	} else {
-		t10 = $[7];
-		t9 = $[8];
-	}
-	useEffect(t9, t10);
+	}, []);
 	const expandedStateCache = React.useRef(null);
-	if (expandedStateCache.current === null) {
-		let t11;
-		if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-			t11 = /* @__PURE__ */ new Map();
-			$[9] = t11;
-		} else t11 = $[9];
-		expandedStateCache.current = t11;
-	}
-	let t11;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = {
+	if (expandedStateCache.current === null) expandedStateCache.current = /* @__PURE__ */ new Map();
+	return /*#__PURE__*/ jsx(RootContext.Provider, {
+		value: {
 			announceUpdate,
 			expandedStateCache,
 			scrollElementIntoView
-		};
-		$[10] = t11;
-	} else t11 = $[10];
-	let t12;
-	if ($[11] !== ariaLiveMessage) {
-		t12 = /*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsx(AriaStatus, {
+		},
+		children: /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsx(AriaStatus, {
 			announceOnShow: true,
 			children: ariaLiveMessage
-		}) });
-		$[11] = ariaLiveMessage;
-		$[12] = t12;
-	} else t12 = $[12];
-	const t13 = truncate || false;
-	let t14;
-	if ($[13] !== className) {
-		t14 = clsx(className, TreeView_module_css_default.TreeViewRootUlStyles);
-		$[13] = className;
-		$[14] = t14;
-	} else t14 = $[14];
-	let t15;
-	if ($[15] !== ariaLabel || $[16] !== ariaLabelledby || $[17] !== children || $[18] !== flat || $[19] !== style || $[20] !== t13 || $[21] !== t14) {
-		t15 = /*#__PURE__*/ jsx("ul", {
+		}) }), /*#__PURE__*/ jsx("ul", {
 			ref: containerRef,
 			role: "tree",
 			"aria-label": ariaLabel,
 			"aria-labelledby": ariaLabelledby,
 			"data-omit-spacer": flat,
-			"data-truncate-text": t13,
+			"data-truncate-text": truncate || false,
 			onMouseDown,
-			className: t14,
+			className: clsx(className, TreeView_module_css_default.TreeViewRootUlStyles),
 			style,
 			children
-		});
-		$[15] = ariaLabel;
-		$[16] = ariaLabelledby;
-		$[17] = children;
-		$[18] = flat;
-		$[19] = style;
-		$[20] = t13;
-		$[21] = t14;
-		$[22] = t15;
-	} else t15 = $[22];
-	let t16;
-	if ($[23] !== t12 || $[24] !== t15) {
-		t16 = /*#__PURE__*/ jsx(RootContext.Provider, {
-			value: t11,
-			children: /*#__PURE__*/ jsxs(Fragment, { children: [t12, t15] })
-		});
-		$[23] = t12;
-		$[24] = t15;
-		$[25] = t16;
-	} else t16 = $[25];
-	return t16;
+		})] })
+	});
 };
+Root.displayName = "Root";
 Root.displayName = "TreeView";
 const ItemImpl = fixedForwardRef(({ id: itemId, containIntrinsicSize, current: isCurrentItem = false, defaultExpanded, expanded, onExpandedChange, onSelect, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, secondaryActions, as: Component, ...restProps }, ref) => {
 	const ItemElement = Component !== null && Component !== void 0 ? Component : "li";
@@ -390,31 +300,17 @@ const ItemImpl = fixedForwardRef(({ id: itemId, containIntrinsicSize, current: i
 });
 const Item = Object.assign(ItemImpl, { displayName: "TreeView.Item" });
 /** Lines to indicate the depth of an item in a TreeView */
-const LevelIndicatorLines = (t0) => {
-	const $ = c(3);
-	const { level } = t0;
-	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = {
+const LevelIndicatorLines = ({ level }) => {
+	return /*#__PURE__*/ jsx("div", {
+		style: {
 			width: "100%",
 			display: "flex"
-		};
-		$[0] = t1;
-	} else t1 = $[0];
-	let t2;
-	if ($[1] !== level) {
-		t2 = /*#__PURE__*/ jsx("div", {
-			style: t1,
-			children: Array.from({ length: level - 1 }).map(_temp2)
-		});
-		$[1] = level;
-		$[2] = t2;
-	} else t2 = $[2];
-	return t2;
+		},
+		children: Array.from({ length: level - 1 }).map((_, index) => /*#__PURE__*/ jsx("div", { className: clsx("PRIVATE_TreeView-item-level-line", TreeView_module_css_default.TreeViewItemLevelLine) }, index))
+	});
 };
-const SubTree = (t0) => {
-	const $ = c(29);
-	const { count, state, children, "aria-label": ariaLabel } = t0;
+LevelIndicatorLines.displayName = "LevelIndicatorLines";
+const SubTree = ({ count, state, children, "aria-label": ariaLabel }) => {
 	const { announceUpdate } = React.useContext(RootContext);
 	const { itemId, isExpanded, isSubTreeEmpty, setIsSubTreeEmpty } = React.useContext(ItemContext);
 	const loadingItemRef = React.useRef(null);
@@ -423,151 +319,80 @@ const SubTree = (t0) => {
 	const [subTreeLabel, setSubTreeLabel] = React.useState("");
 	const previousState = usePreviousValue(state);
 	const { safeSetTimeout } = useSafeTimeout();
-	let t1;
-	let t2;
-	if ($[0] !== children || $[1] !== isSubTreeEmpty || $[2] !== setIsSubTreeEmpty || $[3] !== state) {
-		t1 = () => {
-			if (state === void 0 || state === "done") {
-				if (!isSubTreeEmpty && !children) setIsSubTreeEmpty(true);
-				else if (isSubTreeEmpty && children) setIsSubTreeEmpty(false);
-			}
-		};
-		t2 = [
-			state,
-			isSubTreeEmpty,
-			setIsSubTreeEmpty,
-			children
-		];
-		$[0] = children;
-		$[1] = isSubTreeEmpty;
-		$[2] = setIsSubTreeEmpty;
-		$[3] = state;
-		$[4] = t1;
-		$[5] = t2;
-	} else {
-		t1 = $[4];
-		t2 = $[5];
-	}
-	React.useEffect(t1, t2);
-	let t3;
-	let t4;
-	if ($[6] !== announceUpdate || $[7] !== itemId || $[8] !== loadingFocused || $[9] !== previousState || $[10] !== safeSetTimeout || $[11] !== state) {
-		t3 = () => {
-			const parentElement = document.getElementById(itemId);
-			if (!parentElement) return;
-			setSubTreeLabel(getAccessibleName(parentElement));
-			if (previousState === "loading" && state === "done") {
-				var _ref$current;
-				const parentName = getAccessibleName(parentElement);
-				if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.childElementCount) announceUpdate(`${parentName} content loaded`);
-				else announceUpdate(`${parentName} is empty`);
-				if (loadingFocused) {
-					const firstChild = getFirstChildElement(parentElement);
-					if (firstChild) safeSetTimeout(() => {
-						firstChild.focus();
-					});
-					else safeSetTimeout(() => {
-						parentElement.focus();
-					});
-					setLoadingFocused(false);
-				}
-			} else if (state === "loading") announceUpdate(`${getAccessibleName(parentElement)} content loading`);
-		};
-		t4 = [
-			loadingFocused,
-			previousState,
-			state,
-			itemId,
-			announceUpdate,
-			ref,
-			safeSetTimeout
-		];
-		$[6] = announceUpdate;
-		$[7] = itemId;
-		$[8] = loadingFocused;
-		$[9] = previousState;
-		$[10] = safeSetTimeout;
-		$[11] = state;
-		$[12] = t3;
-		$[13] = t4;
-	} else {
-		t3 = $[12];
-		t4 = $[13];
-	}
-	React.useEffect(t3, t4);
-	let t5;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = () => {
-			const handleFocus = function handleFocus() {
-				setLoadingFocused(true);
-			};
-			const handleBlur = function handleBlur(event) {
-				if (!event.relatedTarget) return;
+	React.useEffect(() => {
+		if (state === void 0 || state === "done") {
+			if (!isSubTreeEmpty && !children) setIsSubTreeEmpty(true);
+			else if (isSubTreeEmpty && children) setIsSubTreeEmpty(false);
+		}
+	}, [
+		state,
+		isSubTreeEmpty,
+		setIsSubTreeEmpty,
+		children
+	]);
+	React.useEffect(() => {
+		const parentElement = document.getElementById(itemId);
+		if (!parentElement) return;
+		setSubTreeLabel(getAccessibleName(parentElement));
+		if (previousState === "loading" && state === "done") {
+			var _ref$current;
+			const parentName = getAccessibleName(parentElement);
+			if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.childElementCount) announceUpdate(`${parentName} content loaded`);
+			else announceUpdate(`${parentName} is empty`);
+			if (loadingFocused) {
+				const firstChild = getFirstChildElement(parentElement);
+				if (firstChild) safeSetTimeout(() => {
+					firstChild.focus();
+				});
+				else safeSetTimeout(() => {
+					parentElement.focus();
+				});
 				setLoadingFocused(false);
-			};
-			const loadingElement = loadingItemRef.current;
-			if (!loadingElement) return;
-			loadingElement.addEventListener("focus", handleFocus);
-			loadingElement.addEventListener("blur", handleBlur);
-			return () => {
-				loadingElement.removeEventListener("focus", handleFocus);
-				loadingElement.removeEventListener("blur", handleBlur);
-			};
+			}
+		} else if (state === "loading") announceUpdate(`${getAccessibleName(parentElement)} content loading`);
+	}, [
+		loadingFocused,
+		previousState,
+		state,
+		itemId,
+		announceUpdate,
+		ref,
+		safeSetTimeout
+	]);
+	React.useEffect(() => {
+		function handleFocus() {
+			setLoadingFocused(true);
+		}
+		function handleBlur(event) {
+			if (!event.relatedTarget) return;
+			setLoadingFocused(false);
+		}
+		const loadingElement = loadingItemRef.current;
+		if (!loadingElement) return;
+		loadingElement.addEventListener("focus", handleFocus);
+		loadingElement.addEventListener("blur", handleBlur);
+		return () => {
+			loadingElement.removeEventListener("focus", handleFocus);
+			loadingElement.removeEventListener("blur", handleBlur);
 		};
-		$[14] = t5;
-	} else t5 = $[14];
-	let t6;
-	if ($[15] !== state) {
-		t6 = [loadingItemRef, state];
-		$[15] = state;
-		$[16] = t6;
-	} else t6 = $[16];
-	React.useEffect(t5, t6);
+	}, [loadingItemRef, state]);
 	if (!isExpanded) return null;
-	let t7;
-	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = {
+	return /*#__PURE__*/ jsxs("ul", {
+		role: "group",
+		style: {
 			listStyle: "none",
 			padding: 0,
 			margin: 0
-		};
-		$[17] = t7;
-	} else t7 = $[17];
-	const t8 = ariaLabel || subTreeLabel;
-	let t9;
-	if ($[18] !== children || $[19] !== count || $[20] !== state) {
-		t9 = state === "loading" ? /*#__PURE__*/ jsx(LoadingItem, {
+		},
+		ref,
+		"aria-label": ariaLabel || subTreeLabel,
+		children: [state === "loading" ? /*#__PURE__*/ jsx(LoadingItem, {
 			ref: loadingItemRef,
 			count
-		}) : children;
-		$[18] = children;
-		$[19] = count;
-		$[20] = state;
-		$[21] = t9;
-	} else t9 = $[21];
-	let t10;
-	if ($[22] !== isSubTreeEmpty || $[23] !== state) {
-		t10 = isSubTreeEmpty && state !== "loading" ? /*#__PURE__*/ jsx(EmptyItem, {}) : null;
-		$[22] = isSubTreeEmpty;
-		$[23] = state;
-		$[24] = t10;
-	} else t10 = $[24];
-	let t11;
-	if ($[25] !== t10 || $[26] !== t8 || $[27] !== t9) {
-		t11 = /*#__PURE__*/ jsxs("ul", {
-			role: "group",
-			style: t7,
-			ref,
-			"aria-label": t8,
-			children: [t9, t10]
-		});
-		$[25] = t10;
-		$[26] = t8;
-		$[27] = t9;
-		$[28] = t11;
-	} else t11 = $[28];
-	return t11;
+		}) : children, isSubTreeEmpty && state !== "loading" ? /*#__PURE__*/ jsx(EmptyItem, {}) : null]
+	});
 };
+SubTree.displayName = "SubTree";
 SubTree.displayName = "TreeView.SubTree";
 SubTree.__SLOT__ = Symbol("TreeView.SubTree");
 function usePreviousValue(value) {
@@ -578,516 +403,238 @@ function usePreviousValue(value) {
 	return ref.current;
 }
 const SkeletonItem = () => {
-	const $ = c(1);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /*#__PURE__*/ jsxs("span", {
-			className: clsx(TreeView_module_css_default.TreeViewSkeletonItemContainerStyle, TreeView_module_css_default.TreeViewItemSkeleton, "PRIVATE_TreeView-item-skeleton"),
-			children: [/*#__PURE__*/ jsx(SkeletonAvatar, {
-				size: 16,
-				square: true
-			}), /*#__PURE__*/ jsx(SkeletonText, { className: TreeView_module_css_default.TreeItemSkeletonTextStyles })]
-		});
-		$[0] = t0;
-	} else t0 = $[0];
-	return t0;
+	return /*#__PURE__*/ jsxs("span", {
+		className: clsx(TreeView_module_css_default.TreeViewSkeletonItemContainerStyle, TreeView_module_css_default.TreeViewItemSkeleton, "PRIVATE_TreeView-item-skeleton"),
+		children: [/*#__PURE__*/ jsx(SkeletonAvatar, {
+			size: 16,
+			square: true
+		}), /*#__PURE__*/ jsx(SkeletonText, { className: TreeView_module_css_default.TreeItemSkeletonTextStyles })]
+	});
 };
-const LoadingItem = /*#__PURE__*/ React.forwardRef((t0, ref) => {
-	const $ = c(15);
-	const { count } = t0;
+SkeletonItem.displayName = "SkeletonItem";
+const LoadingItem = /*#__PURE__*/ React.forwardRef(({ count }, ref) => {
 	const itemId = useId$1();
-	if (count) {
-		const t1 = ref;
-		let t2;
-		if ($[0] !== count) {
-			t2 = Array.from({ length: count }).map(_temp3);
-			$[0] = count;
-			$[1] = t2;
-		} else t2 = $[1];
-		let t3;
-		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-			t3 = clsx("PRIVATE_VisuallyHidden", TreeView_module_css_default.TreeViewVisuallyHidden);
-			$[2] = t3;
-		} else t3 = $[2];
-		let t4;
-		if ($[3] !== count) {
-			t4 = /*#__PURE__*/ jsxs("div", {
-				className: t3,
+	if (count) return /*#__PURE__*/ jsx(LoadingPlaceholderContext.Provider, {
+		value: true,
+		children: /*#__PURE__*/ jsxs(Item, {
+			id: itemId,
+			ref,
+			children: [Array.from({ length: count }).map((_, i) => {
+				return /*#__PURE__*/ jsx(SkeletonItem, { "aria-hidden": true }, i);
+			}), /*#__PURE__*/ jsxs("div", {
+				className: clsx("PRIVATE_VisuallyHidden", TreeView_module_css_default.TreeViewVisuallyHidden),
 				children: [
 					"Loading ",
 					count,
 					" items"
 				]
-			});
-			$[3] = count;
-			$[4] = t4;
-		} else t4 = $[4];
-		let t5;
-		if ($[5] !== itemId || $[6] !== t1 || $[7] !== t2 || $[8] !== t4) {
-			t5 = /*#__PURE__*/ jsx(LoadingPlaceholderContext.Provider, {
-				value: true,
-				children: /*#__PURE__*/ jsxs(Item, {
-					id: itemId,
-					ref: t1,
-					children: [t2, t4]
-				})
-			});
-			$[5] = itemId;
-			$[6] = t1;
-			$[7] = t2;
-			$[8] = t4;
-			$[9] = t5;
-		} else t5 = $[9];
-		return t5;
-	}
-	const t1 = ref;
-	let t2;
-	let t3;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /*#__PURE__*/ jsx(LeadingVisual, { children: /*#__PURE__*/ jsx(Spinner, { size: "small" }) });
-		t3 = /*#__PURE__*/ jsx(Text_default, {
-			className: "fgColor-muted",
-			children: "Loading..."
-		});
-		$[10] = t2;
-		$[11] = t3;
-	} else {
-		t2 = $[10];
-		t3 = $[11];
-	}
-	let t4;
-	if ($[12] !== itemId || $[13] !== t1) {
-		t4 = /*#__PURE__*/ jsx(LoadingPlaceholderContext.Provider, {
-			value: true,
-			children: /*#__PURE__*/ jsxs(Item, {
-				id: itemId,
-				ref: t1,
-				children: [t2, t3]
-			})
-		});
-		$[12] = itemId;
-		$[13] = t1;
-		$[14] = t4;
-	} else t4 = $[14];
-	return t4;
+			})]
+		})
+	});
+	return /*#__PURE__*/ jsx(LoadingPlaceholderContext.Provider, {
+		value: true,
+		children: /*#__PURE__*/ jsxs(Item, {
+			id: itemId,
+			ref,
+			children: [/*#__PURE__*/ jsx(LeadingVisual, { children: /*#__PURE__*/ jsx(Spinner, { size: "small" }) }), /*#__PURE__*/ jsx(Text_default, {
+				className: "fgColor-muted",
+				children: "Loading..."
+			})]
+		})
+	});
 });
 const EmptyItem = /*#__PURE__*/ React.forwardRef((props, ref) => {
-	const $ = c(4);
-	const t0 = useId$1();
-	const t1 = ref;
-	let t2;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /*#__PURE__*/ jsx(Text_default, {
+	return /*#__PURE__*/ jsx(Item, {
+		expanded: null,
+		id: useId$1(),
+		ref,
+		children: /*#__PURE__*/ jsx(Text_default, {
 			className: "fgColor-muted",
 			children: "No items found"
-		});
-		$[0] = t2;
-	} else t2 = $[0];
-	let t3;
-	if ($[1] !== t0 || $[2] !== t1) {
-		t3 = /*#__PURE__*/ jsx(Item, {
-			expanded: null,
-			id: t0,
-			ref: t1,
-			children: t2
-		});
-		$[1] = t0;
-		$[2] = t1;
-		$[3] = t3;
-	} else t3 = $[3];
-	return t3;
+		})
+	});
 });
 function useSubTree(children) {
-	const $ = c(8);
-	let t0;
-	if ($[0] !== children) {
-		t0 = React.Children.toArray(children).find(_temp4);
-		$[0] = children;
-		$[1] = t0;
-	} else t0 = $[1];
-	const subTree = t0;
-	let t1;
-	if ($[2] !== children) {
-		t1 = React.Children.toArray(children).filter(_temp5);
-		$[2] = children;
-		$[3] = t1;
-	} else t1 = $[3];
-	const childrenWithoutSubTree = t1;
-	const t2 = Boolean(subTree);
-	let t3;
-	if ($[4] !== childrenWithoutSubTree || $[5] !== subTree || $[6] !== t2) {
-		t3 = {
+	return React.useMemo(() => {
+		const subTree = React.Children.toArray(children).find((child) => /*#__PURE__*/ React.isValidElement(child) && (child.type === SubTree || isSlot(child, SubTree)));
+		return {
 			subTree,
-			childrenWithoutSubTree,
-			hasSubTree: t2
+			childrenWithoutSubTree: React.Children.toArray(children).filter((child) => !(/*#__PURE__*/ React.isValidElement(child) && (child.type === SubTree || isSlot(child, SubTree)))),
+			hasSubTree: Boolean(subTree)
 		};
-		$[4] = childrenWithoutSubTree;
-		$[5] = subTree;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
-	return t3;
-}
-function _temp5(child_0) {
-	return !(/*#__PURE__*/ React.isValidElement(child_0) && (child_0.type === SubTree || isSlot(child_0, SubTree)));
-}
-function _temp4(child) {
-	return /*#__PURE__*/ React.isValidElement(child) && (child.type === SubTree || isSlot(child, SubTree));
+	}, [children]);
 }
 const LeadingVisual = (props) => {
-	const $ = c(13);
 	const { isExpanded, leadingVisualId } = React.useContext(ItemContext);
-	let t0;
-	if ($[0] !== isExpanded || $[1] !== props.children) {
-		t0 = typeof props.children === "function" ? props.children({ isExpanded }) : props.children;
-		$[0] = isExpanded;
-		$[1] = props.children;
-		$[2] = t0;
-	} else t0 = $[2];
-	const children = t0;
-	let t1;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = clsx("PRIVATE_VisuallyHidden", TreeView_module_css_default.TreeViewVisuallyHidden);
-		$[3] = t1;
-	} else t1 = $[3];
-	let t2;
-	if ($[4] !== leadingVisualId || $[5] !== props.label) {
-		t2 = /*#__PURE__*/ jsx("div", {
-			className: t1,
-			"aria-hidden": true,
-			id: leadingVisualId,
-			children: props.label
-		});
-		$[4] = leadingVisualId;
-		$[5] = props.label;
-		$[6] = t2;
-	} else t2 = $[6];
-	let t3;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = clsx("PRIVATE_TreeView-item-visual", TreeView_module_css_default.TreeViewItemVisual);
-		$[7] = t3;
-	} else t3 = $[7];
-	let t4;
-	if ($[8] !== children) {
-		t4 = /*#__PURE__*/ jsx("div", {
-			className: t3,
-			"aria-hidden": true,
-			children
-		});
-		$[8] = children;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== t2 || $[11] !== t4) {
-		t5 = /*#__PURE__*/ jsxs(Fragment, { children: [t2, t4] });
-		$[10] = t2;
-		$[11] = t4;
-		$[12] = t5;
-	} else t5 = $[12];
-	return t5;
+	const children = typeof props.children === "function" ? props.children({ isExpanded }) : props.children;
+	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx("div", {
+		className: clsx("PRIVATE_VisuallyHidden", TreeView_module_css_default.TreeViewVisuallyHidden),
+		"aria-hidden": true,
+		id: leadingVisualId,
+		children: props.label
+	}), /*#__PURE__*/ jsx("div", {
+		className: clsx("PRIVATE_TreeView-item-visual", TreeView_module_css_default.TreeViewItemVisual),
+		"aria-hidden": true,
+		children
+	})] });
 };
 LeadingVisual.displayName = "TreeView.LeadingVisual";
 const TrailingVisual = (props) => {
-	const $ = c(13);
 	const { isExpanded, trailingVisualId } = React.useContext(ItemContext);
-	let t0;
-	if ($[0] !== isExpanded || $[1] !== props.children) {
-		t0 = typeof props.children === "function" ? props.children({ isExpanded }) : props.children;
-		$[0] = isExpanded;
-		$[1] = props.children;
-		$[2] = t0;
-	} else t0 = $[2];
-	const children = t0;
-	let t1;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = clsx("PRIVATE_VisuallyHidden", TreeView_module_css_default.TreeViewVisuallyHidden);
-		$[3] = t1;
-	} else t1 = $[3];
-	let t2;
-	if ($[4] !== props.label || $[5] !== trailingVisualId) {
-		t2 = /*#__PURE__*/ jsx("div", {
-			className: t1,
-			"aria-hidden": true,
-			id: trailingVisualId,
-			children: props.label
-		});
-		$[4] = props.label;
-		$[5] = trailingVisualId;
-		$[6] = t2;
-	} else t2 = $[6];
-	let t3;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = clsx("PRIVATE_TreeView-item-visual", TreeView_module_css_default.TreeViewItemVisual);
-		$[7] = t3;
-	} else t3 = $[7];
-	let t4;
-	if ($[8] !== children) {
-		t4 = /*#__PURE__*/ jsx("div", {
-			className: t3,
-			"aria-hidden": true,
-			children
-		});
-		$[8] = children;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== t2 || $[11] !== t4) {
-		t5 = /*#__PURE__*/ jsxs(Fragment, { children: [t2, t4] });
-		$[10] = t2;
-		$[11] = t4;
-		$[12] = t5;
-	} else t5 = $[12];
-	return t5;
+	const children = typeof props.children === "function" ? props.children({ isExpanded }) : props.children;
+	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx("div", {
+		className: clsx("PRIVATE_VisuallyHidden", TreeView_module_css_default.TreeViewVisuallyHidden),
+		"aria-hidden": true,
+		id: trailingVisualId,
+		children: props.label
+	}), /*#__PURE__*/ jsx("div", {
+		className: clsx("PRIVATE_TreeView-item-visual", TreeView_module_css_default.TreeViewItemVisual),
+		"aria-hidden": true,
+		children
+	})] });
 };
 TrailingVisual.displayName = "TreeView.TrailingVisual";
 const LeadingAction = (props) => {
-	const $ = c(12);
 	const { isExpanded } = React.useContext(ItemContext);
-	let t0;
-	if ($[0] !== isExpanded || $[1] !== props.children) {
-		t0 = typeof props.children === "function" ? props.children({ isExpanded }) : props.children;
-		$[0] = isExpanded;
-		$[1] = props.children;
-		$[2] = t0;
-	} else t0 = $[2];
-	const children = t0;
-	let t1;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = clsx("PRIVATE_VisuallyHidden", TreeView_module_css_default.TreeViewVisuallyHidden);
-		$[3] = t1;
-	} else t1 = $[3];
-	let t2;
-	if ($[4] !== props.label) {
-		t2 = /*#__PURE__*/ jsx("div", {
-			className: t1,
-			"aria-hidden": true,
-			children: props.label
-		});
-		$[4] = props.label;
-		$[5] = t2;
-	} else t2 = $[5];
-	let t3;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = clsx("PRIVATE_TreeView-item-leading-action", TreeView_module_css_default.TreeViewItemLeadingAction);
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== children) {
-		t4 = /*#__PURE__*/ jsx("div", {
-			className: t3,
-			"aria-hidden": true,
-			children
-		});
-		$[7] = children;
-		$[8] = t4;
-	} else t4 = $[8];
-	let t5;
-	if ($[9] !== t2 || $[10] !== t4) {
-		t5 = /*#__PURE__*/ jsxs(Fragment, { children: [t2, t4] });
-		$[9] = t2;
-		$[10] = t4;
-		$[11] = t5;
-	} else t5 = $[11];
-	return t5;
+	const children = typeof props.children === "function" ? props.children({ isExpanded }) : props.children;
+	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx("div", {
+		className: clsx("PRIVATE_VisuallyHidden", TreeView_module_css_default.TreeViewVisuallyHidden),
+		"aria-hidden": true,
+		children: props.label
+	}), /*#__PURE__*/ jsx("div", {
+		className: clsx("PRIVATE_TreeView-item-leading-action", TreeView_module_css_default.TreeViewItemLeadingAction),
+		"aria-hidden": true,
+		children
+	})] });
 };
 LeadingAction.displayName = "TreeView.LeadingAction";
 const TrailingAction = (props) => {
-	const $ = c(14);
 	const { trailingActionId, itemId } = React.useContext(ItemContext);
 	const { items, shortcutText } = props;
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = clsx("PRIVATE_VisuallyHidden", TreeView_module_css_default.TreeViewVisuallyHidden);
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] !== shortcutText || $[2] !== trailingActionId) {
-		t1 = /*#__PURE__*/ jsxs("div", {
-			id: trailingActionId,
-			className: t0,
-			children: ["- ", shortcutText]
-		});
-		$[1] = shortcutText;
-		$[2] = trailingActionId;
-		$[3] = t1;
-	} else t1 = $[3];
-	let t2;
-	if ($[4] !== itemId || $[5] !== items) {
-		let t3;
-		if ($[7] !== itemId) {
-			t3 = (t4, index) => {
-				const { label, onClick, icon, count, className } = t4;
-				if (count) return /*#__PURE__*/ jsx(Tooltip, {
-					text: label,
-					children: /*#__PURE__*/ jsx(ButtonComponent, {
-						"aria-label": label,
-						leadingVisual: icon,
-						variant: "invisible",
-						className: clsx(className, TreeView_module_css_default.TreeViewItemTrailingActionButton),
-						onClick,
-						onKeyDown: () => {
-							const parentElement = document.getElementById(itemId);
-							parentElement === null || parentElement === void 0 || parentElement.focus();
-						},
-						tabIndex: -1,
-						"aria-hidden": true,
-						count
-					})
-				}, index);
-				return /*#__PURE__*/ jsx(IconButton, {
-					icon,
-					variant: "invisible",
+	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsxs("div", {
+		id: trailingActionId,
+		className: clsx("PRIVATE_VisuallyHidden", TreeView_module_css_default.TreeViewVisuallyHidden),
+		children: ["- ", shortcutText]
+	}), /*#__PURE__*/ jsx("div", {
+		className: TreeView_module_css_default.TreeViewItemTrailingAction,
+		"aria-hidden": true,
+		onClick: (event) => event.stopPropagation(),
+		onKeyDown: (event) => event.stopPropagation(),
+		children: items.map(({ label, onClick, icon, count, className }, index) => {
+			if (count) return /*#__PURE__*/ jsx(Tooltip, {
+				text: label,
+				children: /*#__PURE__*/ jsx(ButtonComponent, {
 					"aria-label": label,
+					leadingVisual: icon,
+					variant: "invisible",
 					className: clsx(className, TreeView_module_css_default.TreeViewItemTrailingActionButton),
 					onClick,
+					onKeyDown: () => {
+						const parentElement = document.getElementById(itemId);
+						parentElement === null || parentElement === void 0 || parentElement.focus();
+					},
 					tabIndex: -1,
 					"aria-hidden": true,
-					onKeyDown: () => {
-						const parentElement_0 = document.getElementById(itemId);
-						parentElement_0 === null || parentElement_0 === void 0 || parentElement_0.focus();
-					}
-				}, index);
-			};
-			$[7] = itemId;
-			$[8] = t3;
-		} else t3 = $[8];
-		t2 = items.map(t3);
-		$[4] = itemId;
-		$[5] = items;
-		$[6] = t2;
-	} else t2 = $[6];
-	let t3;
-	if ($[9] !== t2) {
-		t3 = /*#__PURE__*/ jsx("div", {
-			className: TreeView_module_css_default.TreeViewItemTrailingAction,
-			"aria-hidden": true,
-			onClick: _temp6,
-			onKeyDown: _temp7,
-			children: t2
-		});
-		$[9] = t2;
-		$[10] = t3;
-	} else t3 = $[10];
-	let t4;
-	if ($[11] !== t1 || $[12] !== t3) {
-		t4 = /*#__PURE__*/ jsxs(Fragment, { children: [t1, t3] });
-		$[11] = t1;
-		$[12] = t3;
-		$[13] = t4;
-	} else t4 = $[13];
-	return t4;
+					count
+				})
+			}, index);
+			return /*#__PURE__*/ jsx(IconButton, {
+				icon,
+				variant: "invisible",
+				"aria-label": label,
+				className: clsx(className, TreeView_module_css_default.TreeViewItemTrailingActionButton),
+				onClick,
+				tabIndex: -1,
+				"aria-hidden": true,
+				onKeyDown: () => {
+					const parentElement = document.getElementById(itemId);
+					parentElement === null || parentElement === void 0 || parentElement.focus();
+				}
+			}, index);
+		})
+	})] });
 };
 TrailingAction.displayName = "TreeView.TrailingAction";
-const ActionDialog = (t0) => {
-	const $ = c(10);
-	const { items, onClose } = t0;
+const ActionDialog = ({ items, onClose }) => {
 	const { itemId } = React.useContext(ItemContext);
-	let t1;
-	if ($[0] !== itemId || $[1] !== onClose) {
-		t1 = () => {
-			if (onClose) onClose();
-			setTimeout(() => {
-				const parentElement = document.getElementById(itemId);
-				parentElement === null || parentElement === void 0 || parentElement.focus();
-			});
-		};
-		$[0] = itemId;
-		$[1] = onClose;
-		$[2] = t1;
-	} else t1 = $[2];
-	let t2;
-	if ($[3] !== items) {
-		t2 = items.map(_temp0);
-		$[3] = items;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== t2) {
-		t3 = /*#__PURE__*/ jsx(ActionList, { children: t2 });
-		$[5] = t2;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== t1 || $[8] !== t3) {
-		t4 = /*#__PURE__*/ jsx("div", {
-			onClick: _temp8,
-			onKeyDown: _temp9,
-			children: /*#__PURE__*/ jsx(Dialog, {
-				title: "Supplemental actions",
-				onClose: t1,
-				children: t3
-			})
-		});
-		$[7] = t1;
-		$[8] = t3;
-		$[9] = t4;
-	} else t4 = $[9];
-	return t4;
+	return /*#__PURE__*/ jsx("div", {
+		onClick: (event) => {
+			event.stopPropagation();
+		},
+		onKeyDown: (event) => {
+			if ([
+				"Backspace",
+				"ArrowLeft",
+				"ArrowRight",
+				"ArrowUp",
+				"ArrowDown",
+				"Enter"
+			].includes(event.key)) event.stopPropagation();
+		},
+		children: /*#__PURE__*/ jsx(Dialog, {
+			title: "Supplemental actions",
+			onClose: () => {
+				if (onClose) onClose();
+				setTimeout(() => {
+					const parentElement = document.getElementById(itemId);
+					parentElement === null || parentElement === void 0 || parentElement.focus();
+				});
+			},
+			children: /*#__PURE__*/ jsx(ActionList, { children: items.map(({ label, onClick, icon: Icon, count }, index) => /*#__PURE__*/ jsxs(ActionList.Item, {
+				onSelect: onClick,
+				children: [
+					/*#__PURE__*/ jsx(ActionList.LeadingVisual, { children: /*#__PURE__*/ jsx(Icon, {}) }),
+					label,
+					count ? /*#__PURE__*/ jsxs(ActionList.TrailingVisual, { children: [count, /*#__PURE__*/ jsx(VisuallyHidden, { children: "items" })] }) : null
+				]
+			}, index)) })
+		})
+	});
 };
+ActionDialog.displayName = "ActionDialog";
 ActionDialog.displayName = "TreeView.ActionDialog";
 const DirectoryIcon = () => {
-	const $ = c(3);
 	const { isExpanded } = React.useContext(ItemContext);
 	const Icon = isExpanded ? FileDirectoryOpenFillIcon : FileDirectoryFillIcon;
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = clsx("PRIVATE_TreeView-directory-icon", TreeView_module_css_default.TreeViewDirectoryIcon);
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] !== Icon) {
-		t1 = /*#__PURE__*/ jsx("div", {
-			className: t0,
-			children: /*#__PURE__*/ jsx(Icon, {})
-		});
-		$[1] = Icon;
-		$[2] = t1;
-	} else t1 = $[2];
-	return t1;
+	return /*#__PURE__*/ jsx("div", {
+		className: clsx("PRIVATE_TreeView-directory-icon", TreeView_module_css_default.TreeViewDirectoryIcon),
+		children: /*#__PURE__*/ jsx(Icon, {})
+	});
 };
-const ErrorDialog = (t0) => {
-	const $ = c(9);
-	const { title: t1, children, onRetry, onDismiss } = t0;
-	const title = t1 === void 0 ? "Error" : t1;
+DirectoryIcon.displayName = "DirectoryIcon";
+const ErrorDialog = ({ title = "Error", children, onRetry, onDismiss }) => {
 	const { itemId, setIsExpanded } = React.useContext(ItemContext);
-	let t2;
-	if ($[0] !== itemId || $[1] !== onDismiss || $[2] !== onRetry || $[3] !== setIsExpanded) {
-		t2 = (gesture) => {
-			setTimeout(() => {
-				const parentElement = document.getElementById(itemId);
-				parentElement === null || parentElement === void 0 || parentElement.focus();
-			});
-			if (gesture === "confirm") onRetry === null || onRetry === void 0 || onRetry();
-			else {
-				setIsExpanded(false);
-				onDismiss === null || onDismiss === void 0 || onDismiss();
-			}
-		};
-		$[0] = itemId;
-		$[1] = onDismiss;
-		$[2] = onRetry;
-		$[3] = setIsExpanded;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== children || $[6] !== t2 || $[7] !== title) {
-		t3 = /*#__PURE__*/ jsx("div", {
-			onKeyDown: _temp1,
-			children: /*#__PURE__*/ jsx(ConfirmationDialog, {
-				title,
-				onClose: t2,
-				confirmButtonContent: "Retry",
-				cancelButtonContent: "Dismiss",
-				children
-			})
-		});
-		$[5] = children;
-		$[6] = t2;
-		$[7] = title;
-		$[8] = t3;
-	} else t3 = $[8];
-	return t3;
+	return /*#__PURE__*/ jsx("div", {
+		onKeyDown: (event) => {
+			if ([
+				"Backspace",
+				"ArrowLeft",
+				"ArrowRight",
+				"ArrowUp",
+				"ArrowDown",
+				"Enter"
+			].includes(event.key)) event.stopPropagation();
+		},
+		children: /*#__PURE__*/ jsx(ConfirmationDialog, {
+			title,
+			onClose: (gesture) => {
+				setTimeout(() => {
+					const parentElement = document.getElementById(itemId);
+					parentElement === null || parentElement === void 0 || parentElement.focus();
+				});
+				if (gesture === "confirm") onRetry === null || onRetry === void 0 || onRetry();
+				else {
+					setIsExpanded(false);
+					onDismiss === null || onDismiss === void 0 || onDismiss();
+				}
+			},
+			confirmButtonContent: "Retry",
+			cancelButtonContent: "Dismiss",
+			children
+		})
+	});
 };
+ErrorDialog.displayName = "ErrorDialog";
 ErrorDialog.displayName = "TreeView.ErrorDialog";
 const TreeView = Object.assign(Root, {
 	Item,
@@ -1098,57 +645,5 @@ const TreeView = Object.assign(Root, {
 	DirectoryIcon,
 	ErrorDialog
 });
-function _temp(element) {
-	if (element instanceof HTMLElement) element.focus();
-}
-function _temp2(_, index) {
-	return /*#__PURE__*/ jsx("div", { className: clsx("PRIVATE_TreeView-item-level-line", TreeView_module_css_default.TreeViewItemLevelLine) }, index);
-}
-_temp2.displayName = "_temp2";
-function _temp3(_, i) {
-	return /*#__PURE__*/ jsx(SkeletonItem, { "aria-hidden": true }, i);
-}
-_temp3.displayName = "_temp3";
-function _temp6(event) {
-	return event.stopPropagation();
-}
-function _temp7(event_0) {
-	return event_0.stopPropagation();
-}
-function _temp8(event) {
-	event.stopPropagation();
-}
-function _temp9(event_0) {
-	if ([
-		"Backspace",
-		"ArrowLeft",
-		"ArrowRight",
-		"ArrowUp",
-		"ArrowDown",
-		"Enter"
-	].includes(event_0.key)) event_0.stopPropagation();
-}
-function _temp0(t0, index) {
-	const { label, onClick, icon: Icon, count } = t0;
-	return /*#__PURE__*/ jsxs(ActionList.Item, {
-		onSelect: onClick,
-		children: [
-			/*#__PURE__*/ jsx(ActionList.LeadingVisual, { children: /*#__PURE__*/ jsx(Icon, {}) }),
-			label,
-			count ? /*#__PURE__*/ jsxs(ActionList.TrailingVisual, { children: [count, /*#__PURE__*/ jsx(VisuallyHidden, { children: "items" })] }) : null
-		]
-	}, index);
-}
-_temp0.displayName = "_temp0";
-function _temp1(event) {
-	if ([
-		"Backspace",
-		"ArrowLeft",
-		"ArrowRight",
-		"ArrowUp",
-		"ArrowDown",
-		"Enter"
-	].includes(event.key)) event.stopPropagation();
-}
 //#endregion
 export { TreeView };