@dxos/react-ui-list 0.8.3 → 0.8.4-main.3f58842

package/dist/lib/node/index.cjs

@@ -1,886 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var node_exports = {};
-__export(node_exports, {
-  Accordion: () => Accordion,
-  List: () => List,
-  Path: () => Path,
-  Tree: () => Tree,
-  TreeDataSchema: () => TreeDataSchema,
-  TreeItem: () => TreeItem,
-  TreeProvider: () => TreeProvider,
-  isTreeData: () => isTreeData,
-  useTree: () => useTree
-});
-module.exports = __toCommonJS(node_exports);
-var import_tracking = require("@preact-signals/safe-react/tracking");
-var AccordionPrimitive2 = __toESM(require("@radix-ui/react-accordion"));
-var import_react_context = require("@radix-ui/react-context");
-var import_react = __toESM(require("react"));
-var import_react_ui = require("@dxos/react-ui");
-var import_react_ui_theme = require("@dxos/react-ui-theme");
-var import_tracking2 = require("@preact-signals/safe-react/tracking");
-var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"));
-var import_react_context2 = require("@radix-ui/react-context");
-var import_react2 = __toESM(require("react"));
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_tracking3 = require("@preact-signals/safe-react/tracking");
-var import_combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
-var import_adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var import_set_custom_native_drag_preview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
-var import_closest_edge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
-var import_react_context3 = require("@radix-ui/react-context");
-var import_react3 = __toESM(require("react"));
-var import_react_dom = require("react-dom");
-var import_invariant = require("@dxos/invariant");
-var import_react_ui2 = require("@dxos/react-ui");
-var import_react_ui_theme3 = require("@dxos/react-ui-theme");
-var import_tracking4 = require("@preact-signals/safe-react/tracking");
-var import_adapter2 = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var import_closest_edge2 = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
-var import_get_reorder_destination_index = require("@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index");
-var import_react_context4 = require("@radix-ui/react-context");
-var import_react4 = __toESM(require("react"));
-var import_tracking5 = require("@preact-signals/safe-react/tracking");
-var import_react5 = __toESM(require("react"));
-var import_react_ui3 = require("@dxos/react-ui");
-var import_react6 = require("react");
-var import_debug = require("@dxos/debug");
-var import_tracking6 = require("@preact-signals/safe-react/tracking");
-var import_combine2 = require("@atlaskit/pragmatic-drag-and-drop/combine");
-var import_adapter3 = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var import_tree_item = require("@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item");
-var import_effect = require("effect");
-var import_react7 = __toESM(require("react"));
-var import_invariant2 = require("@dxos/invariant");
-var import_react_ui4 = require("@dxos/react-ui");
-var import_react_ui_theme4 = require("@dxos/react-ui-theme");
-var import_tracking7 = require("@preact-signals/safe-react/tracking");
-var import_react8 = __toESM(require("react"));
-var import_react_ui5 = require("@dxos/react-ui");
-var import_react_ui_text_tooltip = require("@dxos/react-ui-text-tooltip");
-var import_react_ui_theme5 = require("@dxos/react-ui-theme");
-var import_tracking8 = require("@preact-signals/safe-react/tracking");
-var import_react9 = __toESM(require("react"));
-var import_react_ui6 = require("@dxos/react-ui");
-var import_react_ui_theme6 = require("@dxos/react-ui-theme");
-var ACCORDION_NAME = "Accordion";
-var [AccordionProvider, useAccordionContext] = (0, import_react_context2.createContext)(ACCORDION_NAME);
-var defaultGetId = (item) => item?.id;
-var AccordionRoot = ({ classNames, items, getId = defaultGetId, children, value, defaultValue, onValueChange }) => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react2.default.createElement(AccordionProvider, {
-      getId
-    }, /* @__PURE__ */ import_react2.default.createElement(AccordionPrimitive.Root, {
-      type: "multiple",
-      value,
-      defaultValue,
-      onValueChange,
-      className: (0, import_react_ui_theme2.mx)(classNames)
-    }, children?.({
-      items: items ?? []
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-var ACCORDION_ITEM_NAME = "AccordionItem";
-var [AccordionItemProvider, useAccordionItemContext] = (0, import_react_context.createContext)(ACCORDION_ITEM_NAME);
-var AccordionItem = ({ children, classNames, item }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const { getId } = useAccordionContext(ACCORDION_ITEM_NAME);
-    return /* @__PURE__ */ import_react.default.createElement(AccordionItemProvider, {
-      item
-    }, /* @__PURE__ */ import_react.default.createElement(AccordionPrimitive2.Item, {
-      value: getId(item),
-      className: (0, import_react_ui_theme.mx)("overflow-hidden", classNames)
-    }, children));
-  } finally {
-    _effect.f();
-  }
-};
-var AccordionItemHeader = ({ classNames, children, ...props }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react.default.createElement(AccordionPrimitive2.Header, {
-      ...props,
-      className: (0, import_react_ui_theme.mx)(classNames)
-    }, /* @__PURE__ */ import_react.default.createElement(AccordionPrimitive2.Trigger, {
-      className: "group flex items-center p-2 dx-focus-ring-inset is-full text-start"
-    }, children, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Icon, {
-      icon: "ph--caret-right--regular",
-      size: 4,
-      classNames: "transition-transform duration-200 group-data-[state=open]:rotate-90"
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-var AccordionItemBody = ({ children, classNames }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react.default.createElement(AccordionPrimitive2.Content, {
-      className: "overflow-hidden data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown"
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      role: "none",
-      className: (0, import_react_ui_theme.mx)("p-2", classNames)
-    }, children));
-  } finally {
-    _effect.f();
-  }
-};
-var Accordion = {
-  Root: AccordionRoot,
-  Item: AccordionItem,
-  ItemHeader: AccordionItemHeader,
-  ItemBody: AccordionItemBody
-};
-var LIST_NAME = "List";
-var [ListProvider, useListContext] = (0, import_react_context4.createContext)(LIST_NAME);
-var defaultGetId2 = (item) => item?.id;
-var ListRoot = ({ children, items, isItem, getId = defaultGetId2, onMove, ...props }) => {
-  var _effect = (0, import_tracking4.useSignals)();
-  try {
-    const isEqual = (0, import_react4.useCallback)((a, b) => {
-      const idA = getId?.(a);
-      const idB = getId?.(b);
-      if (idA !== void 0 && idB !== void 0) {
-        return idA === idB;
-      } else {
-        return a === b;
-      }
-    }, [
-      getId
-    ]);
-    const [state, setState] = (0, import_react4.useState)(idle);
-    (0, import_react4.useEffect)(() => {
-      if (!items) {
-        return;
-      }
-      return (0, import_adapter2.monitorForElements)({
-        canMonitor: ({ source }) => isItem?.(source.data) ?? false,
-        onDrop: ({ location, source }) => {
-          const target = location.current.dropTargets[0];
-          if (!target) {
-            return;
-          }
-          const sourceData = source.data;
-          const targetData = target.data;
-          if (!isItem?.(sourceData) || !isItem?.(targetData)) {
-            return;
-          }
-          const sourceIdx = items.findIndex((item) => isEqual(item, sourceData));
-          const targetIdx = items.findIndex((item) => isEqual(item, targetData));
-          if (targetIdx < 0 || sourceIdx < 0) {
-            return;
-          }
-          const closestEdgeOfTarget = (0, import_closest_edge2.extractClosestEdge)(targetData);
-          const destinationIndex = (0, import_get_reorder_destination_index.getReorderDestinationIndex)({
-            closestEdgeOfTarget,
-            startIndex: sourceIdx,
-            indexOfTarget: targetIdx,
-            axis: "vertical"
-          });
-          onMove?.(sourceIdx, destinationIndex);
-        }
-      });
-    }, [
-      items,
-      isEqual,
-      onMove
-    ]);
-    return /* @__PURE__ */ import_react4.default.createElement(ListProvider, {
-      state,
-      setState,
-      isItem,
-      ...props
-    }, children?.({
-      state,
-      items: items ?? []
-    }));
-  } finally {
-    _effect.f();
-  }
-};
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-list/src/components/List/ListItem.tsx";
-var idle = {
-  type: "idle"
-};
-var stateStyles = {
-  "is-dragging": "opacity-50"
-};
-var defaultContext = {};
-var LIST_ITEM_NAME = "ListItem";
-var [ListItemProvider, useListItemContext] = (0, import_react_context3.createContext)(LIST_ITEM_NAME, defaultContext);
-var ListItem = ({ children, classNames, item, ...props }) => {
-  var _effect = (0, import_tracking3.useSignals)();
-  try {
-    const { isItem, readonly, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
-    const ref = (0, import_react3.useRef)(null);
-    const dragHandleRef = (0, import_react3.useRef)(null);
-    const [state, setState] = (0, import_react3.useState)(idle);
-    (0, import_react3.useEffect)(() => {
-      const element = ref.current;
-      (0, import_invariant.invariant)(element, void 0, {
-        F: __dxlog_file,
-        L: 91,
-        S: void 0,
-        A: [
-          "element",
-          ""
-        ]
-      });
-      return (0, import_combine.combine)(
-        //
-        // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable
-        //
-        (0, import_adapter.draggable)({
-          element,
-          dragHandle: dragHandleRef.current,
-          canDrag: () => !readonly,
-          getInitialData: () => item,
-          onGenerateDragPreview: dragPreview ? ({ nativeSetDragImage, source }) => {
-            const rect = source.element.getBoundingClientRect();
-            (0, import_set_custom_native_drag_preview.setCustomNativeDragPreview)({
-              nativeSetDragImage,
-              getOffset: ({ container }) => {
-                const { height } = container.getBoundingClientRect();
-                return {
-                  x: 20,
-                  y: height / 2
-                };
-              },
-              render: ({ container }) => {
-                container.style.width = rect.width + "px";
-                setState({
-                  type: "preview",
-                  container
-                });
-                setRootState({
-                  type: "preview",
-                  container,
-                  item
-                });
-                return () => {
-                };
-              }
-            });
-          } : void 0,
-          onDragStart: () => {
-            setState({
-              type: "is-dragging"
-            });
-            setRootState({
-              type: "is-dragging",
-              item
-            });
-          },
-          onDrop: () => {
-            setState(idle);
-            setRootState(idle);
-          }
-        }),
-        //
-        // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#drop-target-for-elements
-        //
-        (0, import_adapter.dropTargetForElements)({
-          element,
-          canDrop: ({ source }) => {
-            return (source.element !== element && isItem?.(source.data)) ?? false;
-          },
-          getData: ({ input }) => {
-            return (0, import_closest_edge.attachClosestEdge)(item, {
-              element,
-              input,
-              allowedEdges: [
-                "top",
-                "bottom"
-              ]
-            });
-          },
-          getIsSticky: () => true,
-          onDragEnter: ({ self }) => {
-            const closestEdge = (0, import_closest_edge.extractClosestEdge)(self.data);
-            setState({
-              type: "is-dragging-over",
-              closestEdge
-            });
-          },
-          onDrag: ({ self }) => {
-            const closestEdge = (0, import_closest_edge.extractClosestEdge)(self.data);
-            setState((current) => {
-              if (current.type === "is-dragging-over" && current.closestEdge === closestEdge) {
-                return current;
-              }
-              return {
-                type: "is-dragging-over",
-                closestEdge
-              };
-            });
-          },
-          onDragLeave: () => {
-            setState(idle);
-          },
-          onDrop: () => {
-            setState(idle);
-          }
-        })
-      );
-    }, [
-      item
-    ]);
-    return /* @__PURE__ */ import_react3.default.createElement(ListItemProvider, {
-      item,
-      dragHandleRef
-    }, /* @__PURE__ */ import_react3.default.createElement("div", {
-      role: "none",
-      className: "relative"
-    }, /* @__PURE__ */ import_react3.default.createElement("div", {
-      ref,
-      role: "listitem",
-      className: (0, import_react_ui_theme3.mx)("flex overflow-hidden", classNames, stateStyles[state.type]),
-      ...props
-    }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ListItem.DropIndicator, {
-      edge: state.closestEdge
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-var IconButton = /* @__PURE__ */ (0, import_react3.forwardRef)(({ classNames, icon, ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking3.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react3.default.createElement("button", {
-      ref: forwardedRef,
-      className: (0, import_react_ui_theme3.mx)("flex items-center justify-center", classNames),
-      ...props
-    }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Icon, {
-      icon,
-      classNames: "cursor-pointer",
-      size: 4
-    }));
-  } finally {
-    _effect.f();
-  }
-});
-var ListItemDeleteButton = ({ autoHide = true, classNames, disabled, icon = "ph--x--regular", ...props }) => {
-  var _effect = (0, import_tracking3.useSignals)();
-  try {
-    const { state } = useListContext("DELETE_BUTTON");
-    const isDisabled = state.type !== "idle" || disabled;
-    return /* @__PURE__ */ import_react3.default.createElement(IconButton, {
-      icon,
-      disabled: isDisabled,
-      classNames: [
-        classNames,
-        autoHide && disabled && "hidden"
-      ],
-      ...props
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var ListItemButton = ({ autoHide = true, classNames, disabled, ...props }) => {
-  var _effect = (0, import_tracking3.useSignals)();
-  try {
-    const { state } = useListContext("ITEM_BUTTON");
-    const isDisabled = state.type !== "idle" || disabled;
-    return /* @__PURE__ */ import_react3.default.createElement(IconButton, {
-      disabled: isDisabled,
-      classNames: [
-        classNames,
-        autoHide && disabled && "hidden"
-      ],
-      ...props
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var ListItemDragHandle = ({ disabled }) => {
-  var _effect = (0, import_tracking3.useSignals)();
-  try {
-    const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
-    return /* @__PURE__ */ import_react3.default.createElement(IconButton, {
-      ref: dragHandleRef,
-      icon: "ph--dots-six-vertical--regular",
-      disabled
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var ListItemDragPreview = ({ children }) => {
-  const { state } = useListContext("DRAG_PREVIEW");
-  return state?.type === "preview" ? /* @__PURE__ */ (0, import_react_dom.createPortal)(children({
-    item: state.item
-  }), state.container) : null;
-};
-var ListItemWrapper = ({ classNames, children }) => {
-  var _effect = (0, import_tracking3.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react3.default.createElement("div", {
-      className: (0, import_react_ui_theme3.mx)("flex is-full gap-2", classNames)
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var ListItemTitle = ({ classNames, children, ...props }) => {
-  var _effect = (0, import_tracking3.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react3.default.createElement("div", {
-      className: (0, import_react_ui_theme3.mx)("flex grow items-center truncate", classNames),
-      ...props
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var List = {
-  Root: ListRoot,
-  Item: ListItem,
-  ItemDragPreview: ListItemDragPreview,
-  ItemWrapper: ListItemWrapper,
-  ItemDragHandle: ListItemDragHandle,
-  ItemDeleteButton: ListItemDeleteButton,
-  ItemButton: ListItemButton,
-  ItemTitle: ListItemTitle,
-  IconButton
-};
-var TreeContext = /* @__PURE__ */ (0, import_react6.createContext)(null);
-var TreeProvider = TreeContext.Provider;
-var useTree = () => (0, import_react6.useContext)(TreeContext) ?? (0, import_debug.raise)(new Error("TreeContext not found"));
-var TreeItemHeading = /* @__PURE__ */ (0, import_react8.memo)(/* @__PURE__ */ (0, import_react8.forwardRef)(({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
-  var _effect = (0, import_tracking7.useSignals)();
-  try {
-    const { t } = (0, import_react_ui5.useTranslation)();
-    const handleSelect = (0, import_react8.useCallback)((event) => {
-      onSelect?.(event.altKey);
-    }, [
-      onSelect
-    ]);
-    const handleButtonKeydown = (0, import_react8.useCallback)((event) => {
-      if (event.key === " " || event.key === "Enter") {
-        event.preventDefault();
-        event.stopPropagation();
-        onSelect?.(event.altKey);
-      }
-    }, [
-      onSelect
-    ]);
-    return /* @__PURE__ */ import_react8.default.createElement(import_react_ui_text_tooltip.TextTooltip, {
-      text: (0, import_react_ui5.toLocalizedString)(label, t),
-      side: "bottom",
-      truncateQuery: "span[data-tooltip]",
-      onlyWhenTruncating: true,
-      asChild: true,
-      ref: forwardedRef
-    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.Button, {
-      "data-testid": "treeItem.heading",
-      variant: "ghost",
-      density: "fine",
-      classNames: (0, import_react_ui_theme5.mx)("grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent", "disabled:cursor-default disabled:opacity-100", className),
-      disabled,
-      onClick: handleSelect,
-      onKeyDown: handleButtonKeydown,
-      ...current && {
-        "aria-current": "location"
-      }
-    }, icon && /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.Icon, {
-      icon: icon ?? "ph--placeholder--regular",
-      size: 5,
-      classNames: "mlb-1"
-    }), /* @__PURE__ */ import_react8.default.createElement("span", {
-      className: "flex-1 is-0 truncate text-start text-sm font-normal",
-      "data-tooltip": true
-    }, (0, import_react_ui5.toLocalizedString)(label, t))));
-  } finally {
-    _effect.f();
-  }
-}));
-var TreeItemToggle = /* @__PURE__ */ (0, import_react9.memo)(/* @__PURE__ */ (0, import_react9.forwardRef)(({ open, isBranch, hidden, onToggle }, forwardedRef) => {
-  var _effect = (0, import_tracking8.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react9.default.createElement(import_react_ui6.Button, {
-      ref: forwardedRef,
-      "data-testid": "treeItem.toggle",
-      "aria-expanded": open,
-      variant: "ghost",
-      density: "fine",
-      classNames: (0, import_react_ui_theme6.mx)("is-6 pli-0 dx-focus-ring-inset", hidden ? "hidden" : !isBranch && "invisible"),
-      onClick: onToggle
-    }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui6.Icon, {
-      icon: "ph--caret-right--bold",
-      size: 3,
-      classNames: (0, import_react_ui_theme6.mx)("transition duration-200", open && "rotate-90")
-    }));
-  } finally {
-    _effect.f();
-  }
-}));
-var DEFAULT_INDENTATION = 8;
-var paddingIndentation = (level, indentation = DEFAULT_INDENTATION) => ({
-  paddingInlineStart: `${(level - 1) * indentation}px`
-});
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx";
-var hoverableDescriptionIcons = "[--icons-color:inherit] hover-hover:[--icons-color:var(--description-text)] hover-hover:hover:[--icons-color:inherit] focus-within:[--icons-color:inherit]";
-var TreeDataSchema = import_effect.Schema.Struct({
-  id: import_effect.Schema.String,
-  path: import_effect.Schema.Array(import_effect.Schema.String),
-  item: import_effect.Schema.Any
-});
-var isTreeData = (data) => import_effect.Schema.is(TreeDataSchema)(data);
-var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColumns: Columns, canDrop, onOpenChange, onSelect, levelOffset = 2 }) => {
-  var _effect = (0, import_tracking6.useSignals)();
-  try {
-    const rowRef = (0, import_react7.useRef)(null);
-    const buttonRef = (0, import_react7.useRef)(null);
-    const openRef = (0, import_react7.useRef)(false);
-    const cancelExpandRef = (0, import_react7.useRef)(null);
-    const [_state, setState] = (0, import_react7.useState)("idle");
-    const [instruction, setInstruction] = (0, import_react7.useState)(null);
-    const [menuOpen, setMenuOpen] = (0, import_react7.useState)(false);
-    const { useItems, getProps, isOpen, isCurrent } = useTree();
-    const items = useItems(item);
-    const { id, label, parentOf, icon, disabled, className, headingClassName, testId } = getProps(item, _path);
-    const path = (0, import_react7.useMemo)(() => [
-      ..._path,
-      id
-    ], [
-      _path,
-      id
-    ]);
-    const open = isOpen(path, item);
-    const current = isCurrent(path, item);
-    const level = path.length - levelOffset;
-    const isBranch = !!parentOf;
-    const mode = last ? "last-in-group" : open ? "expanded" : "standard";
-    const cancelExpand = (0, import_react7.useCallback)(() => {
-      if (cancelExpandRef.current) {
-        clearTimeout(cancelExpandRef.current);
-        cancelExpandRef.current = null;
-      }
-    }, []);
-    (0, import_react7.useEffect)(() => {
-      if (!_draggable) {
-        return;
-      }
-      (0, import_invariant2.invariant)(buttonRef.current, void 0, {
-        F: __dxlog_file2,
-        L: 106,
-        S: void 0,
-        A: [
-          "buttonRef.current",
-          ""
-        ]
-      });
-      const data = {
-        id,
-        path,
-        item
-      };
-      return (0, import_combine2.combine)(
-        (0, import_adapter3.draggable)({
-          element: buttonRef.current,
-          getInitialData: () => data,
-          onDragStart: () => {
-            setState("dragging");
-            if (open) {
-              openRef.current = true;
-              onOpenChange?.({
-                item,
-                path,
-                open: false
-              });
-            }
-          },
-          onDrop: () => {
-            setState("idle");
-            if (openRef.current) {
-              onOpenChange?.({
-                item,
-                path,
-                open: true
-              });
-            }
-          }
-        }),
-        // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx
-        (0, import_adapter3.dropTargetForElements)({
-          element: buttonRef.current,
-          getData: ({ input, element }) => {
-            return (0, import_tree_item.attachInstruction)(data, {
-              input,
-              element,
-              indentPerLevel: DEFAULT_INDENTATION,
-              currentLevel: level,
-              mode,
-              block: isBranch ? [] : [
-                "make-child"
-              ]
-            });
-          },
-          canDrop: ({ source }) => {
-            const _canDrop = canDrop ?? (() => true);
-            return source.element !== buttonRef.current && _canDrop({
-              source: source.data,
-              target: data
-            });
-          },
-          getIsSticky: () => true,
-          onDrag: ({ self, source }) => {
-            const instruction2 = (0, import_tree_item.extractInstruction)(self.data);
-            if (source.data.id !== id) {
-              if (instruction2?.type === "make-child" && isBranch && !open && !cancelExpandRef.current) {
-                cancelExpandRef.current = setTimeout(() => {
-                  onOpenChange?.({
-                    item,
-                    path,
-                    open: true
-                  });
-                }, 500);
-              }
-              if (instruction2?.type !== "make-child") {
-                cancelExpand();
-              }
-              setInstruction(instruction2);
-            } else if (instruction2?.type === "reparent") {
-              setInstruction(instruction2);
-            } else {
-              setInstruction(null);
-            }
-          },
-          onDragLeave: () => {
-            cancelExpand();
-            setInstruction(null);
-          },
-          onDrop: () => {
-            cancelExpand();
-            setInstruction(null);
-          }
-        })
-      );
-    }, [
-      _draggable,
-      item,
-      id,
-      mode,
-      path,
-      open,
-      canDrop
-    ]);
-    (0, import_react7.useEffect)(() => () => cancelExpand(), [
-      cancelExpand
-    ]);
-    const handleOpenChange = (0, import_react7.useCallback)(() => onOpenChange?.({
-      item,
-      path,
-      open: !open
-    }), [
-      onOpenChange,
-      item,
-      path,
-      open
-    ]);
-    const handleSelect = (0, import_react7.useCallback)((option = false) => {
-      if (isBranch) {
-        handleOpenChange();
-      } else {
-        rowRef.current?.focus();
-        onSelect?.({
-          item,
-          path,
-          current: !current,
-          option
-        });
-      }
-    }, [
-      item,
-      path,
-      current,
-      isBranch,
-      handleOpenChange,
-      onSelect
-    ]);
-    const handleKeyDown = (0, import_react7.useCallback)((event) => {
-      switch (event.key) {
-        case "ArrowRight":
-          isBranch && !open && handleOpenChange();
-          break;
-        case "ArrowLeft":
-          isBranch && open && handleOpenChange();
-          break;
-        case " ":
-          handleSelect(event.altKey);
-          break;
-      }
-    }, [
-      isBranch,
-      open,
-      handleOpenChange,
-      handleSelect
-    ]);
-    return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Treegrid.Row, {
-      ref: rowRef,
-      key: id,
-      id,
-      "aria-labelledby": `${id}__label`,
-      parentOf: parentOf?.join(import_react_ui4.Treegrid.PARENT_OF_SEPARATOR),
-      classNames: (0, import_react_ui_theme4.mx)("grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-activeSurface", import_react_ui_theme4.hoverableControls, import_react_ui_theme4.hoverableFocusedKeyboardControls, import_react_ui_theme4.hoverableFocusedWithinControls, hoverableDescriptionIcons, import_react_ui_theme4.ghostHover, className),
-      "data-itemid": id,
-      "data-testid": testId,
-      // NOTE(thure): This is intentionally an empty string to for descendents to select by in the CSS
-      //   without alerting the user (except for in the correct link element). See also:
-      //   https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#description
-      "aria-current": current ? "" : void 0,
-      onKeyDown: handleKeyDown,
-      onContextMenu: (event) => {
-        event.preventDefault();
-        setMenuOpen(true);
-      }
-    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Treegrid.Cell, {
-      indent: true,
-      classNames: "relative grid grid-cols-subgrid col-[tree-row]",
-      style: paddingIndentation(level)
-    }, /* @__PURE__ */ import_react7.default.createElement("div", {
-      role: "none",
-      className: "flex items-center"
-    }, /* @__PURE__ */ import_react7.default.createElement(TreeItemToggle, {
-      isBranch,
-      open,
-      onToggle: handleOpenChange
-    }), /* @__PURE__ */ import_react7.default.createElement(TreeItemHeading, {
-      ref: buttonRef,
-      label,
-      icon,
-      className: headingClassName,
-      disabled,
-      current,
-      onSelect: handleSelect
-    })), Columns && /* @__PURE__ */ import_react7.default.createElement(Columns, {
-      item,
-      path,
-      open,
-      menuOpen,
-      setMenuOpen
-    }), instruction && /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.TreeItem.DropIndicator, {
-      instruction,
-      gap: 2
-    }))), open && items.map((item2, index) => /* @__PURE__ */ import_react7.default.createElement(TreeItem, {
-      key: item2.id,
-      item: item2,
-      path,
-      last: index === items.length - 1,
-      draggable: _draggable,
-      renderColumns: Columns,
-      canDrop,
-      onOpenChange,
-      onSelect
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-var TreeItem = /* @__PURE__ */ (0, import_react7.memo)(RawTreeItem);
-var Tree = ({ root, path, id, useItems, getProps, isOpen, isCurrent, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", classNames, levelOffset, renderColumns, canDrop, onOpenChange, onSelect }) => {
-  var _effect = (0, import_tracking5.useSignals)();
-  try {
-    const context = (0, import_react5.useMemo)(() => ({
-      useItems,
-      getProps,
-      isOpen,
-      isCurrent
-    }), [
-      useItems,
-      getProps,
-      isOpen,
-      isCurrent
-    ]);
-    const items = useItems(root);
-    const treePath = (0, import_react5.useMemo)(() => path ? [
-      ...path,
-      id
-    ] : [
-      id
-    ], [
-      id,
-      path
-    ]);
-    return /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Treegrid.Root, {
-      gridTemplateColumns,
-      classNames
-    }, /* @__PURE__ */ import_react5.default.createElement(TreeProvider, {
-      value: context
-    }, items.map((item, index) => /* @__PURE__ */ import_react5.default.createElement(TreeItem, {
-      key: item.id,
-      item,
-      last: index === items.length - 1,
-      path: treePath,
-      levelOffset,
-      draggable: draggable3,
-      renderColumns,
-      canDrop,
-      onOpenChange,
-      onSelect
-    }))));
-  } finally {
-    _effect.f();
-  }
-};
-var SEPARATOR = "+";
-var Path = {
-  create: (...args) => args.join(SEPARATOR),
-  parts: (path) => path.split(SEPARATOR),
-  length: (path) => path.split(SEPARATOR).length,
-  first: (path) => path.split(SEPARATOR)[0] ?? path,
-  last: (path) => path.split(SEPARATOR).at(-1) ?? path,
-  parent: (path) => path.split(SEPARATOR).slice(0, -1).join(SEPARATOR),
-  hasRoot: (path, id) => Path.first(path) === id,
-  hasChild: (path, compare) => Path.parent(compare) === path,
-  hasDescendent: (path, compare) => compare !== path && compare.startsWith(path),
-  siblings: (path, compare) => Path.parent(path) === Path.parent(compare),
-  onPath: (path, id) => Path.parts(path).includes(id)
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Accordion,
-  List,
-  Path,
-  Tree,
-  TreeDataSchema,
-  TreeItem,
-  TreeProvider,
-  isTreeData,
-  useTree
-});
-//# sourceMappingURL=index.cjs.map