@primer/react
Version:
An implementation of GitHub's Primer Design System using React
1,161 lines (1,139 loc) • 30.7 kB
JavaScript
import { c } from 'react-compiler-runtime';
import { FileDirectoryOpenFillIcon, FileDirectoryFillIcon, ChevronDownIcon, ChevronRightIcon } from '@primer/octicons-react';
import { clsx } from 'clsx';
import React, { useEffect } from 'react';
import classes from './TreeView.module.css.js';
import { ConfirmationDialog } from '../ConfirmationDialog/ConfirmationDialog.js';
import VisuallyHidden from '../_VisuallyHidden.js';
import { useControllableState } from '../hooks/useControllableState.js';
import { useId } from '../hooks/useId.js';
import useSafeTimeout from '../hooks/useSafeTimeout.js';
import { useSlots } from '../hooks/useSlots.js';
import { getAccessibleName } from './shared.js';
import { useRovingTabIndex, getFirstChildElement } from './useRovingTabIndex.js';
import { useTypeahead } from './useTypeahead.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import StyledSpinner from '../Spinner/Spinner.js';
import Text from '../Text/Text.js';
import { SkeletonAvatar } from '../SkeletonAvatar/SkeletonAvatar.js';
import { SkeletonText } from '../SkeletonText/SkeletonText.js';
const RootContext = /*#__PURE__*/React.createContext({
announceUpdate: () => {},
expandedStateCache: {
current: new Map()
}
});
const ItemContext = /*#__PURE__*/React.createContext({
itemId: '',
level: 1,
isSubTreeEmpty: false,
setIsSubTreeEmpty: () => {},
isExpanded: false,
setIsExpanded: () => {},
leadingVisualId: '',
trailingVisualId: ''
});
// ----------------------------------------------------------------------------
// TreeView
/* Size of toggle icon in pixels. */
const TOGGLE_ICON_SIZE = 12;
const Root = t0 => {
const $ = c(23);
const {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
children,
flat,
truncate: t1,
className,
style
} = t0;
const truncate = t1 === undefined ? 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 expandedStateCache = React.useRef(null);
if (expandedStateCache.current === null) {
let t8;
if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
t8 = new Map();
$[6] = t8;
} else {
t8 = $[6];
}
expandedStateCache.current = t8;
}
let t8;
if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
t8 = {
announceUpdate,
expandedStateCache
};
$[7] = t8;
} else {
t8 = $[7];
}
let t9;
if ($[8] !== ariaLiveMessage) {
t9 = /*#__PURE__*/jsx(VisuallyHidden, {
role: "status",
"aria-live": "polite",
"aria-atomic": "true",
children: ariaLiveMessage
});
$[8] = ariaLiveMessage;
$[9] = t9;
} else {
t9 = $[9];
}
const t10 = truncate || false;
let t11;
if ($[10] !== className) {
t11 = clsx(className, classes.TreeViewRootUlStyles);
$[10] = className;
$[11] = t11;
} else {
t11 = $[11];
}
let t12;
if ($[12] !== ariaLabel || $[13] !== ariaLabelledby || $[14] !== children || $[15] !== flat || $[16] !== style || $[17] !== t10 || $[18] !== t11) {
t12 = /*#__PURE__*/jsx("ul", {
ref: containerRef,
role: "tree",
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
"data-omit-spacer": flat,
"data-truncate-text": t10,
onMouseDown: onMouseDown,
className: t11,
style: style,
children: children
});
$[12] = ariaLabel;
$[13] = ariaLabelledby;
$[14] = children;
$[15] = flat;
$[16] = style;
$[17] = t10;
$[18] = t11;
$[19] = t12;
} else {
t12 = $[19];
}
let t13;
if ($[20] !== t12 || $[21] !== t9) {
t13 = /*#__PURE__*/jsx(RootContext.Provider, {
value: t8,
children: /*#__PURE__*/jsxs(Fragment, {
children: [t9, t12]
})
});
$[20] = t12;
$[21] = t9;
$[22] = t13;
} else {
t13 = $[22];
}
return t13;
};
Root.displayName = 'TreeView';
// ----------------------------------------------------------------------------
// TreeView.Item
const Item = /*#__PURE__*/React.forwardRef(({
id: itemId,
containIntrinsicSize,
current: isCurrentItem = false,
defaultExpanded,
expanded,
onExpandedChange,
onSelect,
children,
className,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledby
}, ref) => {
const [slots, rest] = useSlots(children, {
leadingAction: LeadingAction,
leadingVisual: LeadingVisual,
trailingVisual: TrailingVisual
});
const {
expandedStateCache
} = React.useContext(RootContext);
const labelId = useId();
const leadingVisualId = useId();
const trailingVisualId = useId();
const [isExpanded, setIsExpanded] = useControllableState({
name: itemId,
// If the item was previously mounted, its expanded state might be cached.
// We check the cache first, and then fall back to the defaultExpanded prop.
// If defaultExpanded is not provided, we default to false unless the item
// is the current item, in which case we default to true.
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 {
hasSubTree,
subTree,
childrenWithoutSubTree
} = useSubTree(rest);
const [isSubTreeEmpty, setIsSubTreeEmpty] = React.useState(!hasSubTree);
const [isFocused, setIsFocused] = React.useState(false);
// Set the expanded state and cache it
const setIsExpandedWithCache = React.useCallback(newIsExpanded => {
var _expandedStateCache$c3;
setIsExpanded(newIsExpanded);
(_expandedStateCache$c3 = expandedStateCache.current) === null || _expandedStateCache$c3 === void 0 ? void 0 : _expandedStateCache$c3.set(itemId, newIsExpanded);
}, [itemId, setIsExpanded, expandedStateCache]);
// Expand or collapse the subtree
const toggle = React.useCallback(event => {
setIsExpandedWithCache(!isExpanded);
event === null || event === void 0 ? void 0 : event.stopPropagation();
}, [isExpanded, setIsExpandedWithCache]);
const handleKeyDown = React.useCallback(event_0 => {
switch (event_0.key) {
case 'Enter':
case ' ':
if (onSelect) {
onSelect(event_0);
} else {
toggle(event_0);
}
event_0.stopPropagation();
break;
case 'ArrowRight':
// Ignore if modifier keys are pressed
if (event_0.altKey || event_0.metaKey) return;
event_0.preventDefault();
event_0.stopPropagation();
setIsExpandedWithCache(true);
break;
case 'ArrowLeft':
// Ignore if modifier keys are pressed
if (event_0.altKey || event_0.metaKey) return;
event_0.preventDefault();
event_0.stopPropagation();
setIsExpandedWithCache(false);
break;
}
}, [onSelect, setIsExpandedWithCache, toggle]);
const ariaDescribedByIds = [slots.leadingVisual ? leadingVisualId : null, slots.trailingVisual ? trailingVisualId : null].filter(Boolean);
return /*#__PURE__*/jsx(ItemContext.Provider, {
value: {
itemId,
level: level + 1,
isSubTreeEmpty,
setIsSubTreeEmpty,
isExpanded,
setIsExpanded: setIsExpandedWithCache,
leadingVisualId,
trailingVisualId
},
children: /*#__PURE__*/jsxs("li", {
className: clsx('PRIVATE_TreeView-item', className, classes.TreeViewItem),
ref: ref,
tabIndex: 0,
id: itemId,
role: "treeitem",
"aria-label": ariaLabel,
"aria-labelledby": ariaLabel ? undefined : ariaLabelledby || labelId,
"aria-describedby": ariaDescribedByIds.length ? ariaDescribedByIds.join(' ') : undefined,
"aria-level": level,
"aria-expanded": isSubTreeEmpty && (!isExpanded || !hasSubTree) || expanded === null ? undefined : isExpanded,
"aria-current": isCurrentItem ? 'true' : undefined,
"aria-selected": isFocused ? 'true' : 'false',
"data-has-leading-action": slots.leadingAction ? true : undefined,
onKeyDown: handleKeyDown,
onFocus: event_1 => {
var _event_1$currentTarge;
// Scroll the first child into view when the item receives focus
(_event_1$currentTarge = event_1.currentTarget.firstElementChild) === null || _event_1$currentTarge === void 0 ? void 0 : _event_1$currentTarge.scrollIntoView({
block: 'nearest',
inline: 'nearest'
});
// Set the focused state
setIsFocused(true);
// Prevent focus event from bubbling up to parent items
event_1.stopPropagation();
},
onBlur: () => setIsFocused(false),
onClick: event_2 => {
if (onSelect) {
onSelect(event_2);
} else {
toggle(event_2);
}
event_2.stopPropagation();
},
onAuxClick: event_3 => {
if (onSelect && event_3.button === 1) {
onSelect(event_3);
}
event_3.stopPropagation();
},
children: [/*#__PURE__*/jsxs("div", {
className: clsx('PRIVATE_TreeView-item-container', classes.TreeViewItemContainer),
style: {
// @ts-ignore CSS custom property
'--level': level,
contentVisibility: containIntrinsicSize ? 'auto' : undefined,
containIntrinsicSize
},
children: [/*#__PURE__*/jsx("div", {
style: {
gridArea: 'spacer',
display: 'flex'
},
children: /*#__PURE__*/jsx(LevelIndicatorLines, {
level: level
})
}), slots.leadingAction, hasSubTree ?
/*#__PURE__*/
// This lint rule is disabled due to the guidelines in the `TreeView` api docs.
// https://github.com/github/primer/blob/main/apis/tree-view-api.md#the-expandcollapse-chevron-toggle
// This has specific advice that the chevron be available only to pointer event.
// If they take up a button role, they become unnecessary and numerous tab stops.
jsx("div", {
className: clsx('PRIVATE_TreeView-item-toggle', onSelect && 'PRIVATE_TreeView-item-toggle--hover', level === 1 && 'PRIVATE_TreeView-item-toggle--end', classes.TreeViewItemToggle, classes.TreeViewItemToggleHover, classes.TreeViewItemToggleEnd),
onClick: event_4 => {
if (onSelect) {
toggle(event_4);
}
},
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', classes.TreeViewItemContent),
children: [slots.leadingVisual, /*#__PURE__*/jsx("span", {
className: clsx('PRIVATE_TreeView-item-content-text', classes.TreeViewItemContentText),
children: childrenWithoutSubTree
}), slots.trailingVisual]
})]
}), subTree]
})
});
});
/** 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;
};
Item.displayName = 'TreeView.Item';
// ----------------------------------------------------------------------------
// TreeView.SubTree
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 === undefined || 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") {
const parentName_0 = getAccessibleName(parentElement);
announceUpdate(`${parentName_0} 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: 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: ref,
"aria-label": t8,
children: [t9, t10]
});
$[25] = t10;
$[26] = t8;
$[27] = t9;
$[28] = t11;
} else {
t11 = $[28];
}
return t11;
};
SubTree.displayName = '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(classes.TreeViewSkeletonItemContainerStyle, classes.TreeViewItemSkeleton, "PRIVATE_TreeView-item-skeleton"),
children: [/*#__PURE__*/jsx(SkeletonAvatar, {
size: 16,
square: true
}), /*#__PURE__*/jsx(SkeletonText, {
className: classes.TreeItemSkeletonTextStyles
})]
});
$[0] = t0;
} else {
t0 = $[0];
}
return t0;
};
const LoadingItem = /*#__PURE__*/React.forwardRef((t0, ref) => {
const $ = c(15);
const {
count
} = t0;
const itemId = useId();
if (count) {
let t1;
if ($[0] !== count) {
t1 = Array.from({
length: count
}).map(_temp3);
$[0] = count;
$[1] = t1;
} else {
t1 = $[1];
}
let t2;
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
t2 = clsx("PRIVATE_VisuallyHidden", classes.TreeViewVisuallyHidden);
$[2] = t2;
} else {
t2 = $[2];
}
let t3;
if ($[3] !== count) {
t3 = /*#__PURE__*/jsxs("div", {
className: t2,
children: ["Loading ", count, " items"]
});
$[3] = count;
$[4] = t3;
} else {
t3 = $[4];
}
let t4;
if ($[5] !== itemId || $[6] !== ref || $[7] !== t1 || $[8] !== t3) {
t4 = /*#__PURE__*/jsxs(Item, {
id: itemId,
ref: ref,
children: [t1, t3]
});
$[5] = itemId;
$[6] = ref;
$[7] = t1;
$[8] = t3;
$[9] = t4;
} else {
t4 = $[9];
}
return t4;
}
let t1;
let t2;
if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
t1 = /*#__PURE__*/jsx(LeadingVisual, {
children: /*#__PURE__*/jsx(StyledSpinner, {
size: "small"
})
});
t2 = /*#__PURE__*/jsx(Text, {
className: "fgColor-muted",
children: "Loading..."
});
$[10] = t1;
$[11] = t2;
} else {
t1 = $[10];
t2 = $[11];
}
let t3;
if ($[12] !== itemId || $[13] !== ref) {
t3 = /*#__PURE__*/jsxs(Item, {
id: itemId,
ref: ref,
children: [t1, t2]
});
$[12] = itemId;
$[13] = ref;
$[14] = t3;
} else {
t3 = $[14];
}
return t3;
});
const EmptyItem = /*#__PURE__*/React.forwardRef((props, ref) => {
const $ = c(4);
const t0 = useId();
let t1;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t1 = /*#__PURE__*/jsx(Text, {
className: "fgColor-muted",
children: "No items found"
});
$[0] = t1;
} else {
t1 = $[0];
}
let t2;
if ($[1] !== ref || $[2] !== t0) {
t2 = /*#__PURE__*/jsx(Item, {
expanded: null,
id: t0,
ref: ref,
children: t1
});
$[1] = ref;
$[2] = t0;
$[3] = t2;
} else {
t2 = $[3];
}
return t2;
});
function useSubTree(children) {
const $ = c(8);
let t0;
let t1;
if ($[0] !== children) {
t1 = React.Children.toArray(children).find(_temp4);
$[0] = children;
$[1] = t1;
} else {
t1 = $[1];
}
const subTree = t1;
let t2;
if ($[2] !== children) {
t2 = React.Children.toArray(children).filter(_temp5);
$[2] = children;
$[3] = t2;
} else {
t2 = $[3];
}
const childrenWithoutSubTree = t2;
const t3 = Boolean(subTree);
let t4;
if ($[4] !== childrenWithoutSubTree || $[5] !== subTree || $[6] !== t3) {
t4 = {
subTree,
childrenWithoutSubTree,
hasSubTree: t3
};
$[4] = childrenWithoutSubTree;
$[5] = subTree;
$[6] = t3;
$[7] = t4;
} else {
t4 = $[7];
}
t0 = t4;
return t0;
}
// ----------------------------------------------------------------------------
// TreeView.LeadingVisual and TreeView.TrailingVisual
function _temp5(child_0) {
return !(/*#__PURE__*/React.isValidElement(child_0) && child_0.type === SubTree);
}
function _temp4(child) {
return /*#__PURE__*/React.isValidElement(child) && child.type === 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", classes.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", classes.TreeViewItemVisual);
$[7] = t3;
} else {
t3 = $[7];
}
let t4;
if ($[8] !== children) {
t4 = /*#__PURE__*/jsx("div", {
className: t3,
"aria-hidden": true,
children: 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", classes.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", classes.TreeViewItemVisual);
$[7] = t3;
} else {
t3 = $[7];
}
let t4;
if ($[8] !== children) {
t4 = /*#__PURE__*/jsx("div", {
className: t3,
"aria-hidden": true,
children: 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';
// ----------------------------------------------------------------------------
// TreeView.LeadingAction
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", classes.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", classes.TreeViewItemLeadingAction);
$[6] = t3;
} else {
t3 = $[6];
}
let t4;
if ($[7] !== children) {
t4 = /*#__PURE__*/jsx("div", {
className: t3,
"aria-hidden": true,
children: 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';
// ----------------------------------------------------------------------------
// TreeView.DirectoryIcon
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", classes.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;
};
// ----------------------------------------------------------------------------
// TreeView.ErrorDialog
const ErrorDialog = t0 => {
const $ = c(9);
const {
title: t1,
children,
onRetry,
onDismiss
} = t0;
const title = t1 === undefined ? "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 ? void 0 : parentElement.focus();
});
if (gesture === "confirm") {
onRetry === null || onRetry === void 0 ? void 0 : onRetry();
} else {
setIsExpanded(false);
onDismiss === null || onDismiss === void 0 ? 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: _temp6,
children: /*#__PURE__*/jsx(ConfirmationDialog, {
title: title,
onClose: t2,
confirmButtonContent: "Retry",
cancelButtonContent: "Dismiss",
children: children
})
});
$[5] = children;
$[6] = t2;
$[7] = title;
$[8] = t3;
} else {
t3 = $[8];
}
return t3;
};
ErrorDialog.displayName = 'TreeView.ErrorDialog';
// ----------------------------------------------------------------------------
// Export
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", classes.TreeViewItemLevelLine)
}, index);
}
_temp2.displayName = "_temp2";
function _temp3(_, i) {
return /*#__PURE__*/jsx(SkeletonItem, {
"aria-hidden": true
}, i);
}
_temp3.displayName = "_temp3";
function _temp6(event) {
if (["Backspace", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
event.stopPropagation();
}
}
export { TreeView };