@primer/react
Version:
An implementation of GitHub's Primer Design System using React
1,155 lines (1,154 loc) • 34 kB
JavaScript
import { useId as useId$1 } from "../hooks/useId.js";
import Spinner from "../Spinner/Spinner.js";
import { AriaStatus } from "../live-region/AriaStatus.js";
import { fixedForwardRef } from "../utils/modern-polymorphic.js";
import Text_default from "../Text/Text.js";
import VisuallyHidden from "../_VisuallyHidden.js";
import { usePlatform } from "../KeybindingHint/platform.js";
import { getAccessibleKeybindingHintString } from "../KeybindingHint/utils.js";
import useSafeTimeout from "../hooks/useSafeTimeout.js";
import { Tooltip } from "../TooltipV2/Tooltip.js";
import { IconButton } from "../Button/IconButton.js";
import { ButtonComponent } from "../Button/Button.js";
import { isSlot } from "../utils/is-slot.js";
import { useSlots } from "../hooks/useSlots.js";
import { Dialog } from "../Dialog/Dialog.js";
import { ConfirmationDialog } from "../ConfirmationDialog/ConfirmationDialog.js";
import { ActionList } from "../ActionList/index.js";
import TreeView_module_css_default from "./TreeView.module.css.js";
import { useControllableState } from "../hooks/useControllableState.js";
import { getAccessibleName } from "./shared.js";
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 { ChevronDownIcon, ChevronRightIcon, FileDirectoryFillIcon, FileDirectoryOpenFillIcon } from "@primer/octicons-react";
//#region src/TreeView/TreeView.tsx
const RootContext = /*#__PURE__*/ React.createContext({
announceUpdate: () => {},
expandedStateCache: { current: /* @__PURE__ */ new Map() },
scrollElementIntoView: () => {}
});
const ItemContext = /*#__PURE__*/ React.createContext({
itemId: "",
level: 1,
isSubTreeEmpty: false,
setIsSubTreeEmpty: () => {},
isExpanded: false,
setIsExpanded: () => {},
leadingVisualId: "",
trailingVisualId: "",
trailingActionId: ""
});
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 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
};
$[5] = t7;
} else t7 = $[5];
useTypeahead(t7);
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"
});
});
};
$[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) {
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
};
$[10] = t11;
} else t11 = $[10];
let t12;
if ($[11] !== ariaLiveMessage) {
t12 = /*#__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", {
ref: containerRef,
role: "tree",
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
"data-omit-spacer": flat,
"data-truncate-text": t13,
onMouseDown,
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 = "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";
const isPolymorphic = Component !== void 0 && Component !== "li";
const [slots, rest] = useSlots(children, {
leadingAction: LeadingAction,
leadingVisual: LeadingVisual,
trailingVisual: TrailingVisual
});
const { expandedStateCache, scrollElementIntoView } = React.useContext(RootContext);
const labelId = useId$1();
const leadingVisualId = useId$1();
const trailingVisualId = useId$1();
const trailingActionId = useId$1();
const [isExpanded, setIsExpanded] = useControllableState({
name: itemId,
defaultValue: () => {
var _ref, _expandedStateCache$c, _expandedStateCache$c2;
return (_ref = (_expandedStateCache$c = (_expandedStateCache$c2 = expandedStateCache.current) === null || _expandedStateCache$c2 === void 0 ? void 0 : _expandedStateCache$c2.get(itemId)) !== null && _expandedStateCache$c !== void 0 ? _expandedStateCache$c : defaultExpanded) !== null && _ref !== void 0 ? _ref : isCurrentItem;
},
value: expanded === null ? false : expanded,
onChange: onExpandedChange
});
const { level } = React.useContext(ItemContext);
const isLoadingPlaceholder = React.useContext(LoadingPlaceholderContext);
const { hasSubTree, subTree, childrenWithoutSubTree } = useSubTree(rest);
const [isSubTreeEmpty, setIsSubTreeEmpty] = React.useState(!hasSubTree);
const [actionCommandPressed, setActionCommandPressed] = React.useState(false);
const [isFocused, setIsFocused] = React.useState(false);
const platform = usePlatform();
const setIsExpandedWithCache = React.useCallback((newIsExpanded) => {
var _expandedStateCache$c3;
setIsExpanded(newIsExpanded);
(_expandedStateCache$c3 = expandedStateCache.current) === null || _expandedStateCache$c3 === void 0 || _expandedStateCache$c3.set(itemId, newIsExpanded);
}, [
itemId,
setIsExpanded,
expandedStateCache
]);
const toggle = React.useCallback((event) => {
setIsExpandedWithCache(!isExpanded);
event === null || event === void 0 || event.stopPropagation();
}, [isExpanded, setIsExpandedWithCache]);
const activateActionsDialog = React.useCallback(() => {
if (!secondaryActions) return;
if (secondaryActions.length > 1) setActionCommandPressed(true);
else {
const action = secondaryActions[0].onClick;
action();
}
}, [secondaryActions]);
const handleKeyDown = React.useCallback((event) => {
switch (event.key) {
case "Enter":
case " ":
if (onSelect) onSelect(event);
else toggle(event);
event.stopPropagation();
break;
case "ArrowRight":
if (event.altKey || event.metaKey) return;
event.preventDefault();
event.stopPropagation();
setIsExpandedWithCache(true);
break;
case "ArrowLeft":
if (event.altKey || event.metaKey) return;
event.preventDefault();
event.stopPropagation();
setIsExpandedWithCache(false);
break;
case "U":
case "u":
if (!(event.shiftKey && (event.metaKey || event.ctrlKey))) return;
activateActionsDialog();
break;
}
}, [
onSelect,
setIsExpandedWithCache,
toggle,
activateActionsDialog
]);
const ariaDescribedByIds = [slots.leadingVisual ? leadingVisualId : null, slots.trailingVisual ? trailingVisualId : null].filter(Boolean);
const trailingActionShortcutText = `Press (${getAccessibleKeybindingHintString(`Shift+${platform === "apple" ? "Meta" : "Control"}+U`, platform)}) for more actions.`;
const itemElement = /*#__PURE__*/ jsxs(ItemElement, {
...restProps,
className: clsx("PRIVATE_TreeView-item", className, TreeView_module_css_default.TreeViewItem),
ref,
tabIndex: 0,
id: itemId,
role: "treeitem",
"aria-label": secondaryActions ? ariaLabel ? `${ariaLabel}. ${trailingActionShortcutText}` : void 0 : ariaLabel,
"aria-labelledby": ariaLabel ? void 0 : `${ariaLabelledby || labelId} ${secondaryActions ? trailingActionId : ""}`.trim(),
"aria-describedby": ariaDescribedByIds.length ? ariaDescribedByIds.join(" ") : void 0,
"aria-level": level,
"aria-expanded": isSubTreeEmpty && (!isExpanded || !hasSubTree) || expanded === null ? void 0 : isExpanded,
"aria-current": isCurrentItem ? "true" : void 0,
"aria-selected": isFocused ? "true" : "false",
"data-has-leading-action": slots.leadingAction ? true : void 0,
"data-loading": isLoadingPlaceholder ? true : void 0,
onKeyDown: handleKeyDown,
onFocus: (event) => {
scrollElementIntoView(event.currentTarget.firstElementChild);
setIsFocused(true);
event.stopPropagation();
},
onBlur: () => setIsFocused(false),
onClick: (event) => {
if (onSelect) onSelect(event);
else toggle(event);
event.stopPropagation();
},
onAuxClick: (event) => {
if (onSelect && event.button === 1) onSelect(event);
event.stopPropagation();
},
children: [/*#__PURE__*/ jsxs("div", {
className: clsx("PRIVATE_TreeView-item-container", TreeView_module_css_default.TreeViewItemContainer),
style: {
"--level": level,
contentVisibility: containIntrinsicSize ? "auto" : void 0,
containIntrinsicSize
},
children: [
/*#__PURE__*/ jsx("div", {
style: {
gridArea: "spacer",
display: "flex"
},
children: /*#__PURE__*/ jsx(LevelIndicatorLines, { level })
}),
slots.leadingAction,
hasSubTree ? /*#__PURE__*/ jsx("div", {
className: clsx("PRIVATE_TreeView-item-toggle", onSelect && "PRIVATE_TreeView-item-toggle--hover", level === 1 && "PRIVATE_TreeView-item-toggle--end", TreeView_module_css_default.TreeViewItemToggle, TreeView_module_css_default.TreeViewItemToggleHover, TreeView_module_css_default.TreeViewItemToggleEnd),
onClick: (event) => {
if (onSelect) toggle(event);
},
children: isExpanded ? /*#__PURE__*/ jsx(ChevronDownIcon, { size: TOGGLE_ICON_SIZE }) : /*#__PURE__*/ jsx(ChevronRightIcon, { size: TOGGLE_ICON_SIZE })
}) : null,
/*#__PURE__*/ jsxs("div", {
id: labelId,
className: clsx("PRIVATE_TreeView-item-content", TreeView_module_css_default.TreeViewItemContent),
children: [
slots.leadingVisual,
/*#__PURE__*/ jsx("span", {
className: clsx("PRIVATE_TreeView-item-content-text", TreeView_module_css_default.TreeViewItemContentText),
children: childrenWithoutSubTree
}),
slots.trailingVisual
]
}),
secondaryActions ? /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx(TrailingAction, {
items: secondaryActions,
shortcutText: trailingActionShortcutText
}), actionCommandPressed ? /*#__PURE__*/ jsx(ActionDialog, {
items: secondaryActions,
onClose: () => setActionCommandPressed(false)
}) : null] }) : null
]
}), subTree]
});
return /*#__PURE__*/ jsx(ItemContext.Provider, {
value: {
itemId,
level: level + 1,
isSubTreeEmpty,
setIsSubTreeEmpty,
isExpanded,
setIsExpanded: setIsExpandedWithCache,
leadingVisualId,
trailingVisualId,
trailingActionId
},
children: isPolymorphic ? /*#__PURE__*/ jsx("li", {
role: "none",
children: itemElement
}) : itemElement
});
});
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 = {
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;
};
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);
const ref = React.useRef(null);
const [loadingFocused, setLoadingFocused] = React.useState(false);
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;
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;
let t7;
if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
t7 = {
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: 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;
};
SubTree.displayName = "TreeView.SubTree";
SubTree.__SLOT__ = Symbol("TreeView.SubTree");
function usePreviousValue(value) {
const ref = React.useRef(value);
React.useEffect(() => {
ref.current = value;
}, [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;
};
const LoadingItem = /*#__PURE__*/ React.forwardRef((t0, ref) => {
const $ = c(15);
const { count } = t0;
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,
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;
});
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, {
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 = {
subTree,
childrenWithoutSubTree,
hasSubTree: t2
};
$[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);
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);
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);
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;
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,
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;
};
TrailingAction.displayName = "TreeView.TrailingAction";
const ActionDialog = (t0) => {
const $ = c(10);
const { items, onClose } = t0;
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;
};
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;
};
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);
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 = "TreeView.ErrorDialog";
const TreeView = Object.assign(Root, {
Item,
SubTree,
LeadingAction,
LeadingVisual,
TrailingVisual,
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 };