@primer/react 38.32.0-rc.57a990042 → 38.32.0-rc.5a40d42f8

package/dist/TreeView/TreeView.js

@@ -22,9 +22,10 @@ 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, { useCallback, useEffect } from "react";
+import React, { useEffect } from "react";
 import { ChevronDownIcon, ChevronRightIcon, FileDirectoryFillIcon, FileDirectoryOpenFillIcon } from "@primer/octicons-react";
 //#region src/TreeView/TreeView.tsx
 const RootContext = /*#__PURE__*/ React.createContext({
@@ -45,79 +46,168 @@ const ItemContext = /*#__PURE__*/ React.createContext({
 });
 const LoadingPlaceholderContext = /*#__PURE__*/ React.createContext(false);
 const TOGGLE_ICON_SIZE = 12;
-const Root = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, flat, truncate = true, className, style }) => {
+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 containerRef = React.useRef(null);
 	const mouseDownRef = React.useRef(false);
 	const [ariaLiveMessage, setAriaLiveMessage] = React.useState("");
-	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);
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (message) => {
+			setAriaLiveMessage(message);
 		};
-	}, []);
-	useRovingTabIndex({
-		containerRef,
-		mouseDownRef
-	});
-	useTypeahead({
-		containerRef,
-		onFocusChange: (element) => {
-			if (element instanceof HTMLElement) element.focus();
-		}
-	});
+		$[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
+		};
+		$[5] = t7;
+	} else t7 = $[5];
+	useTypeahead(t7);
 	const pendingScrollRef = React.useRef(null);
-	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"
+	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"
+				});
 			});
-		});
-	}, []);
-	useEffect(() => {
-		return () => {
+		};
+		$[6] = t8;
+	} else t8 = $[6];
+	const scrollElementIntoView = t8;
+	let t10;
+	let t9;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = () => () => {
 			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) expandedStateCache.current = /* @__PURE__ */ new Map();
-	return /*#__PURE__*/ jsx(RootContext.Provider, {
-		value: {
+	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 = {
 			announceUpdate,
 			expandedStateCache,
 			scrollElementIntoView
-		},
-		children: /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsx(AriaStatus, {
+		};
+		$[10] = t11;
+	} else t11 = $[10];
+	let t12;
+	if ($[11] !== ariaLiveMessage) {
+		t12 = /*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsx(AriaStatus, {
 			announceOnShow: true,
 			children: ariaLiveMessage
-		}) }), /*#__PURE__*/ jsx("ul", {
+		}) });
+		$[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", {
 			ref: containerRef,
 			role: "tree",
 			"aria-label": ariaLabel,
 			"aria-labelledby": ariaLabelledby,
 			"data-omit-spacer": flat,
-			"data-truncate-text": truncate || false,
+			"data-truncate-text": t13,
 			onMouseDown,
-			className: clsx(className, TreeView_module_css_default.TreeViewRootUlStyles),
+			className: t14,
 			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";
@@ -300,17 +390,31 @@ 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 = ({ level }) => {
-	return /*#__PURE__*/ jsx("div", {
-		style: {
+const LevelIndicatorLines = (t0) => {
+	const $ = c(3);
+	const { level } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
 			width: "100%",
 			display: "flex"
-		},
-		children: Array.from({ length: level - 1 }).map((_, index) => /*#__PURE__*/ jsx("div", { className: clsx("PRIVATE_TreeView-item-level-line", TreeView_module_css_default.TreeViewItemLevelLine) }, index))
-	});
+		};
+		$[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;
 };
-LevelIndicatorLines.displayName = "LevelIndicatorLines";
-const SubTree = ({ count, state, children, "aria-label": ariaLabel }) => {
+const SubTree = (t0) => {
+	const $ = c(29);
+	const { count, state, children, "aria-label": ariaLabel } = t0;
 	const { announceUpdate } = React.useContext(RootContext);
 	const { itemId, isExpanded, isSubTreeEmpty, setIsSubTreeEmpty } = React.useContext(ItemContext);
 	const loadingItemRef = React.useRef(null);
@@ -319,80 +423,151 @@ const SubTree = ({ count, state, children, "aria-label": ariaLabel }) => {
 	const [subTreeLabel, setSubTreeLabel] = React.useState("");
 	const previousState = usePreviousValue(state);
 	const { safeSetTimeout } = useSafeTimeout();
-	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);
+	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);
 			}
-		} 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);
 		};
-	}, [loadingItemRef, state]);
+		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;
+				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);
 	if (!isExpanded) return null;
-	return /*#__PURE__*/ jsxs("ul", {
-		role: "group",
-		style: {
+	let t7;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = {
 			listStyle: "none",
 			padding: 0,
 			margin: 0
-		},
-		ref,
-		"aria-label": ariaLabel || subTreeLabel,
-		children: [state === "loading" ? /*#__PURE__*/ jsx(LoadingItem, {
+		};
+		$[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: loadingItemRef,
 			count
-		}) : children, isSubTreeEmpty && state !== "loading" ? /*#__PURE__*/ jsx(EmptyItem, {}) : null]
-	});
+		}) : 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;
 };
-SubTree.displayName = "SubTree";
 SubTree.displayName = "TreeView.SubTree";
 SubTree.__SLOT__ = Symbol("TreeView.SubTree");
 function usePreviousValue(value) {
@@ -403,238 +578,516 @@ function usePreviousValue(value) {
 	return ref.current;
 }
 const SkeletonItem = () => {
-	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 $ = 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;
 };
-SkeletonItem.displayName = "SkeletonItem";
-const LoadingItem = /*#__PURE__*/ React.forwardRef(({ count }, ref) => {
+const LoadingItem = /*#__PURE__*/ React.forwardRef((t0, ref) => {
+	const $ = c(15);
+	const { count } = t0;
 	const itemId = useId$1();
-	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),
+	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,
 				children: [
 					"Loading ",
 					count,
 					" items"
 				]
-			})]
-		})
-	});
-	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..."
-			})]
-		})
-	});
+			});
+			$[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;
 });
 const EmptyItem = /*#__PURE__*/ React.forwardRef((props, ref) => {
-	return /*#__PURE__*/ jsx(Item, {
-		expanded: null,
-		id: useId$1(),
-		ref,
-		children: /*#__PURE__*/ jsx(Text_default, {
+	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, {
 			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) {
-	return React.useMemo(() => {
-		const subTree = React.Children.toArray(children).find((child) => /*#__PURE__*/ React.isValidElement(child) && (child.type === SubTree || isSlot(child, SubTree)));
-		return {
+	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 = {
 			subTree,
-			childrenWithoutSubTree: React.Children.toArray(children).filter((child) => !(/*#__PURE__*/ React.isValidElement(child) && (child.type === SubTree || isSlot(child, SubTree)))),
-			hasSubTree: Boolean(subTree)
+			childrenWithoutSubTree,
+			hasSubTree: t2
 		};
-	}, [children]);
+		$[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));
 }
 const LeadingVisual = (props) => {
+	const $ = c(13);
 	const { isExpanded, leadingVisualId } = React.useContext(ItemContext);
-	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
-	})] });
+	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;
 };
 LeadingVisual.displayName = "TreeView.LeadingVisual";
 const TrailingVisual = (props) => {
+	const $ = c(13);
 	const { isExpanded, trailingVisualId } = React.useContext(ItemContext);
-	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
-	})] });
+	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;
 };
 TrailingVisual.displayName = "TreeView.TrailingVisual";
 const LeadingAction = (props) => {
+	const $ = c(12);
 	const { isExpanded } = React.useContext(ItemContext);
-	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
-	})] });
+	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;
 };
 LeadingAction.displayName = "TreeView.LeadingAction";
 const TrailingAction = (props) => {
+	const $ = c(14);
 	const { trailingActionId, itemId } = React.useContext(ItemContext);
 	const { items, shortcutText } = props;
-	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,
+	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",
+					"aria-label": label,
 					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",
-				"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);
-		})
-	})] });
+					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;
 };
 TrailingAction.displayName = "TreeView.TrailingAction";
-const ActionDialog = ({ items, onClose }) => {
+const ActionDialog = (t0) => {
+	const $ = c(10);
+	const { items, onClose } = t0;
 	const { itemId } = React.useContext(ItemContext);
-	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)) })
-		})
-	});
+	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;
 };
-ActionDialog.displayName = "ActionDialog";
 ActionDialog.displayName = "TreeView.ActionDialog";
 const DirectoryIcon = () => {
+	const $ = c(3);
 	const { isExpanded } = React.useContext(ItemContext);
 	const Icon = isExpanded ? FileDirectoryOpenFillIcon : FileDirectoryFillIcon;
-	return /*#__PURE__*/ jsx("div", {
-		className: clsx("PRIVATE_TreeView-directory-icon", TreeView_module_css_default.TreeViewDirectoryIcon),
-		children: /*#__PURE__*/ jsx(Icon, {})
-	});
+	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;
 };
-DirectoryIcon.displayName = "DirectoryIcon";
-const ErrorDialog = ({ title = "Error", children, onRetry, onDismiss }) => {
+const ErrorDialog = (t0) => {
+	const $ = c(9);
+	const { title: t1, children, onRetry, onDismiss } = t0;
+	const title = t1 === void 0 ? "Error" : t1;
 	const { itemId, setIsExpanded } = React.useContext(ItemContext);
-	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
-		})
-	});
+	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;
 };
-ErrorDialog.displayName = "ErrorDialog";
 ErrorDialog.displayName = "TreeView.ErrorDialog";
 const TreeView = Object.assign(Root, {
 	Item,
@@ -645,5 +1098,57 @@ 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 };