@primer/react 38.0.0-rc.389f01088 → 38.0.0-rc.4

package/dist/TreeView/TreeView.js

@@ -0,0 +1,1389 @@
+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 { Dialog } from '../Dialog/Dialog.js';
+import { IconButton } from '../Button/IconButton.js';
+import { ActionList } from '../ActionList/index.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useIsMacOS } from '../hooks/useIsMacOS.js';
+import Spinner from '../Spinner/Spinner.js';
+import Text from '../Text/Text.js';
+import { SkeletonAvatar } from '../SkeletonAvatar/SkeletonAvatar.js';
+import { SkeletonText } from '../SkeletonText/SkeletonText.js';
+import { getAccessibleKeybindingHintString } from '../KeybindingHint/KeybindingHint.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: '',
+  trailingActionId: ''
+});
+
+// ----------------------------------------------------------------------------
+// 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,
+  secondaryActions
+}, 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 trailingActionId = 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 [actionCommandPressed, setActionCommandPressed] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const isMacOS = useIsMacOS();
+
+  // 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 activateActionsDialog = React.useCallback(() => {
+    if (!secondaryActions) return;
+    if (secondaryActions.length > 1) {
+      // If there are multiple secondary actions, open the action dialog
+      // as this allows users to select the action they want to interact with.
+      setActionCommandPressed(true);
+    } else {
+      // If there is only one secondary action, trigger it directly
+      const action = secondaryActions[0].onClick;
+      action();
+    }
+  }, [secondaryActions]);
+  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;
+      case 'U':
+      case 'u':
+        if (!(event_0.shiftKey && (event_0.metaKey || event_0.ctrlKey))) return;
+        activateActionsDialog();
+        break;
+    }
+  }, [onSelect, setIsExpandedWithCache, toggle, activateActionsDialog]);
+  const ariaDescribedByIds = [slots.leadingVisual ? leadingVisualId : null, slots.trailingVisual ? trailingVisualId : null].filter(Boolean);
+  const shortcut = `Shift+${isMacOS ? 'Meta' : 'Control'}+U`;
+  const trailingActionShortcutText = `Press (${getAccessibleKeybindingHintString(shortcut, isMacOS)}) for more actions.`;
+  return /*#__PURE__*/jsx(ItemContext.Provider, {
+    value: {
+      itemId,
+      level: level + 1,
+      isSubTreeEmpty,
+      setIsSubTreeEmpty,
+      isExpanded,
+      setIsExpanded: setIsExpandedWithCache,
+      leadingVisualId,
+      trailingVisualId,
+      trailingActionId
+    },
+    children: /*#__PURE__*/jsxs("li", {
+      className: clsx('PRIVATE_TreeView-item', className, classes.TreeViewItem),
+      ref: ref,
+      tabIndex: 0,
+      id: itemId,
+      role: "treeitem",
+      "aria-label": secondaryActions ? ariaLabel ? `${ariaLabel}. ${trailingActionShortcutText}` : undefined : ariaLabel,
+      "aria-labelledby": ariaLabel ? undefined : `${ariaLabelledby || labelId} ${secondaryActions ? trailingActionId : ''}`.trim(),
+      "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]
+        }), secondaryActions ? /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(TrailingAction, {
+            items: secondaryActions,
+            shortcutText: trailingActionShortcutText
+          }), actionCommandPressed ? /*#__PURE__*/jsx(ActionDialog, {
+            items: secondaryActions,
+            onClose: () => setActionCommandPressed(false)
+          }) : null]
+        }) : null]
+      }), 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(Spinner, {
+        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;
+  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;
+}
+
+// ----------------------------------------------------------------------------
+// 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.TrailingAction
+
+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", classes.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
+        } = t4;
+        return /*#__PURE__*/jsx(IconButton, {
+          icon: icon,
+          variant: "invisible",
+          "aria-label": label,
+          className: classes.TreeViewItemTrailingActionButton,
+          onClick: onClick,
+          tabIndex: -1,
+          "aria-hidden": true,
+          onKeyDown: () => {
+            const parentElement = document.getElementById(itemId);
+            parentElement === null || parentElement === void 0 ? void 0 : parentElement.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: classes.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';
+// ----------------------------------------------------------------------------
+// TreeView.ActionDialog
+
+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 ? 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';
+
+// ----------------------------------------------------------------------------
+// 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: _temp1,
+      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) {
+  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
+  } = t0;
+  return /*#__PURE__*/jsxs(ActionList.Item, {
+    onSelect: onClick,
+    children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
+      children: /*#__PURE__*/jsx(Icon, {})
+    }), label]
+  }, index);
+}
+_temp0.displayName = "_temp0";
+function _temp1(event) {
+  if (["Backspace", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
+    event.stopPropagation();
+  }
+}
+
+export { TreeView };