@dxos/react-ui-list 0.8.3 → 0.8.4-main.28f8d3d

package/dist/lib/browser/index.mjs

@@ -1,4 +1,4 @@
-// packages/ui/react-ui-list/src/components/Accordion/AccordionItem.tsx
+// src/components/Accordion/AccordionItem.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import * as AccordionPrimitive2 from "@radix-ui/react-accordion";
 import { createContext as createContext2 } from "@radix-ui/react-context";
@@ -6,7 +6,7 @@ import React2 from "react";
 import { Icon } from "@dxos/react-ui";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-list/src/components/Accordion/AccordionRoot.tsx
+// src/components/Accordion/AccordionRoot.tsx
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { createContext } from "@radix-ui/react-context";
@@ -34,7 +34,7 @@ var AccordionRoot = ({ classNames, items, getId = defaultGetId, children, value,
   }
 };
 
-// packages/ui/react-ui-list/src/components/Accordion/AccordionItem.tsx
+// src/components/Accordion/AccordionItem.tsx
 var ACCORDION_ITEM_NAME = "AccordionItem";
 var [AccordionItemProvider, useAccordionItemContext] = createContext2(ACCORDION_ITEM_NAME);
 var AccordionItem = ({ children, classNames, item }) => {
@@ -82,7 +82,7 @@ var AccordionItemBody = ({ children, classNames }) => {
   }
 };
 
-// packages/ui/react-ui-list/src/components/Accordion/Accordion.tsx
+// src/components/Accordion/Accordion.tsx
 var Accordion = {
   Root: AccordionRoot,
   Item: AccordionItem,
@@ -90,20 +90,20 @@ var Accordion = {
   ItemBody: AccordionItemBody
 };
 
-// packages/ui/react-ui-list/src/components/List/ListItem.tsx
+// src/components/List/ListItem.tsx
 import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
 import { attachClosestEdge, extractClosestEdge as extractClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { createContext as createContext4 } from "@radix-ui/react-context";
-import React4, { forwardRef, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import React4, { useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
 import { invariant } from "@dxos/invariant";
-import { Icon as Icon2, ListItem as NaturalListItem } from "@dxos/react-ui";
+import { IconButton, ListItem as NaturalListItem, useTranslation } from "@dxos/react-ui";
 import { mx as mx3 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-list/src/components/List/ListRoot.tsx
+// src/components/List/ListRoot.tsx
 import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
@@ -178,8 +178,8 @@ var ListRoot = ({ children, items, isItem, getId = defaultGetId2, onMove, ...pro
   }
 };
 
-// packages/ui/react-ui-list/src/components/List/ListItem.tsx
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-list/src/components/List/ListItem.tsx";
+// src/components/List/ListItem.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-list/src/components/List/ListItem.tsx";
 var idle = {
   type: "idle"
 };
@@ -200,7 +200,7 @@ var ListItem = ({ children, classNames, item, ...props }) => {
       const element = ref.current;
       invariant(element, void 0, {
         F: __dxlog_file,
-        L: 91,
+        L: 98,
         S: void 0,
         A: [
           "element",
@@ -283,6 +283,9 @@ var ListItem = ({ children, classNames, item, ...props }) => {
               closestEdge
             });
           },
+          onDragLeave: () => {
+            setState(idle);
+          },
           onDrag: ({ self }) => {
             const closestEdge = extractClosestEdge2(self.data);
             setState((current) => {
@@ -295,9 +298,6 @@ var ListItem = ({ children, classNames, item, ...props }) => {
               };
             });
           },
-          onDragLeave: () => {
-            setState(idle);
-          },
           onDrop: () => {
             setState(idle);
           }
@@ -309,67 +309,54 @@ var ListItem = ({ children, classNames, item, ...props }) => {
     return /* @__PURE__ */ React4.createElement(ListItemProvider, {
       item,
       dragHandleRef
-    }, /* @__PURE__ */ React4.createElement("div", {
-      role: "none",
-      className: "relative"
     }, /* @__PURE__ */ React4.createElement("div", {
       ref,
       role: "listitem",
-      className: mx3("flex overflow-hidden", classNames, stateStyles[state.type]),
+      className: mx3("flex overflow-hidden relative", classNames, stateStyles[state.type]),
       ...props
-    }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React4.createElement(NaturalListItem.DropIndicator, {
+    }, children, state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React4.createElement(NaturalListItem.DropIndicator, {
       edge: state.closestEdge
     })));
   } finally {
     _effect.f();
   }
 };
-var IconButton = /* @__PURE__ */ forwardRef(({ classNames, icon, ...props }, forwardedRef) => {
-  var _effect = _useSignals4();
-  try {
-    return /* @__PURE__ */ React4.createElement("button", {
-      ref: forwardedRef,
-      className: mx3("flex items-center justify-center", classNames),
-      ...props
-    }, /* @__PURE__ */ React4.createElement(Icon2, {
-      icon,
-      classNames: "cursor-pointer",
-      size: 4
-    }));
-  } finally {
-    _effect.f();
-  }
-});
-var ListItemDeleteButton = ({ autoHide = true, classNames, disabled, icon = "ph--x--regular", ...props }) => {
+var ListItemDeleteButton = ({ autoHide = true, classNames, disabled, icon = "ph--x--regular", label, ...props }) => {
   var _effect = _useSignals4();
   try {
     const { state } = useListContext("DELETE_BUTTON");
     const isDisabled = state.type !== "idle" || disabled;
+    const { t } = useTranslation("os");
     return /* @__PURE__ */ React4.createElement(IconButton, {
+      iconOnly: true,
+      variant: "ghost",
+      ...props,
       icon,
       disabled: isDisabled,
+      label: label ?? t("delete label"),
       classNames: [
         classNames,
         autoHide && disabled && "hidden"
-      ],
-      ...props
+      ]
     });
   } finally {
     _effect.f();
   }
 };
-var ListItemButton = ({ autoHide = true, classNames, disabled, ...props }) => {
+var ListItemButton = ({ autoHide = true, iconOnly = true, variant = "ghost", classNames, disabled, ...props }) => {
   var _effect = _useSignals4();
   try {
     const { state } = useListContext("ITEM_BUTTON");
     const isDisabled = state.type !== "idle" || disabled;
     return /* @__PURE__ */ React4.createElement(IconButton, {
+      ...props,
       disabled: isDisabled,
+      iconOnly,
+      variant,
       classNames: [
         classNames,
         autoHide && disabled && "hidden"
-      ],
-      ...props
+      ]
     });
   } finally {
     _effect.f();
@@ -379,7 +366,11 @@ var ListItemDragHandle = ({ disabled }) => {
   var _effect = _useSignals4();
   try {
     const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
+    const { t } = useTranslation("os");
     return /* @__PURE__ */ React4.createElement(IconButton, {
+      iconOnly: true,
+      variant: "ghost",
+      label: t("drag handle label"),
       ref: dragHandleRef,
       icon: "ph--dots-six-vertical--regular",
       disabled
@@ -416,7 +407,7 @@ var ListItemTitle = ({ classNames, children, ...props }) => {
   }
 };
 
-// packages/ui/react-ui-list/src/components/List/List.tsx
+// src/components/List/List.tsx
 var List = {
   Root: ListRoot,
   Item: ListItem,
@@ -425,23 +416,22 @@ var List = {
   ItemDragHandle: ListItemDragHandle,
   ItemDeleteButton: ListItemDeleteButton,
   ItemButton: ListItemButton,
-  ItemTitle: ListItemTitle,
-  IconButton
+  ItemTitle: ListItemTitle
 };
 
-// packages/ui/react-ui-list/src/components/Tree/Tree.tsx
+// src/components/Tree/Tree.tsx
 import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
 import React8, { useMemo as useMemo2 } from "react";
 import { Treegrid as Treegrid2 } from "@dxos/react-ui";
 
-// packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx
+// src/components/Tree/TreeContext.tsx
 import { createContext as createContext5, useContext } from "react";
 import { raise } from "@dxos/debug";
 var TreeContext = /* @__PURE__ */ createContext5(null);
 var TreeProvider = TreeContext.Provider;
 var useTree = () => useContext(TreeContext) ?? raise(new Error("TreeContext not found"));
 
-// packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx
+// src/components/Tree/TreeItem.tsx
 import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
 import { combine as combine2 } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable as draggable2, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
@@ -449,19 +439,24 @@ import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-
 import { Schema } from "effect";
 import React7, { memo as memo3, useCallback as useCallback3, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState3 } from "react";
 import { invariant as invariant2 } from "@dxos/invariant";
-import { Treegrid, TreeItem as NaturalTreeItem } from "@dxos/react-ui";
-import { ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, mx as mx6 } from "@dxos/react-ui-theme";
+import { TreeItem as NaturalTreeItem, Treegrid } from "@dxos/react-ui";
+import { ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx
+// src/components/Tree/helpers.ts
+var DEFAULT_INDENTATION = 8;
+var paddingIndentation = (level, indentation = DEFAULT_INDENTATION) => ({
+  paddingInlineStart: `${(level - 1) * indentation}px`
+});
+
+// src/components/Tree/TreeItemHeading.tsx
 import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
-import React5, { forwardRef as forwardRef2, memo, useCallback as useCallback2 } from "react";
-import { Button, Icon as Icon3, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import React5, { forwardRef, memo, useCallback as useCallback2 } from "react";
+import { Button, Icon as Icon2, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { TextTooltip } from "@dxos/react-ui-text-tooltip";
-import { mx as mx4 } from "@dxos/react-ui-theme";
-var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
+var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
   var _effect = _useSignals5();
   try {
-    const { t } = useTranslation();
+    const { t } = useTranslation2();
     const handleSelect = useCallback2((event) => {
       onSelect?.(event.altKey);
     }, [
@@ -487,14 +482,18 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ label,
       "data-testid": "treeItem.heading",
       variant: "ghost",
       density: "fine",
-      classNames: mx4("grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent", "disabled:cursor-default disabled:opacity-100", className),
+      classNames: [
+        "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__ */ React5.createElement(Icon3, {
+    }, icon && /* @__PURE__ */ React5.createElement(Icon2, {
       icon: icon ?? "ph--placeholder--regular",
       size: 5,
       classNames: "mlb-1"
@@ -507,12 +506,11 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ label,
   }
 }));
 
-// packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx
+// src/components/Tree/TreeItemToggle.tsx
 import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
-import React6, { forwardRef as forwardRef3, memo as memo2 } from "react";
-import { Button as Button2, Icon as Icon4 } from "@dxos/react-ui";
-import { mx as mx5 } from "@dxos/react-ui-theme";
-var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef3(({ open, isBranch, hidden, onToggle }, forwardedRef) => {
+import React6, { forwardRef as forwardRef2, memo as memo2 } from "react";
+import { Button as Button2, Icon as Icon3 } from "@dxos/react-ui";
+var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef2(({ open, isBranch, hidden, onToggle }, forwardedRef) => {
   var _effect = _useSignals6();
   try {
     return /* @__PURE__ */ React6.createElement(Button2, {
@@ -521,26 +519,26 @@ var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef3(({ open,
       "aria-expanded": open,
       variant: "ghost",
       density: "fine",
-      classNames: mx5("is-6 pli-0 dx-focus-ring-inset", hidden ? "hidden" : !isBranch && "invisible"),
+      classNames: [
+        "is-6 pli-0 dx-focus-ring-inset",
+        hidden ? "hidden" : !isBranch && "invisible"
+      ],
       onClick: onToggle
-    }, /* @__PURE__ */ React6.createElement(Icon4, {
+    }, /* @__PURE__ */ React6.createElement(Icon3, {
       icon: "ph--caret-right--bold",
       size: 3,
-      classNames: mx5("transition duration-200", open && "rotate-90")
+      classNames: [
+        "transition duration-200",
+        open && "rotate-90"
+      ]
     }));
   } finally {
     _effect.f();
   }
 }));
 
-// packages/ui/react-ui-list/src/components/Tree/helpers.ts
-var DEFAULT_INDENTATION = 8;
-var paddingIndentation = (level, indentation = DEFAULT_INDENTATION) => ({
-  paddingInlineStart: `${(level - 1) * indentation}px`
-});
-
-// packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx";
+// src/components/Tree/TreeItem.tsx
+var __dxlog_file2 = "/__w/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 = Schema.Struct({
   id: Schema.String,
@@ -744,7 +742,15 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
       id,
       "aria-labelledby": `${id}__label`,
       parentOf: parentOf?.join(Treegrid.PARENT_OF_SEPARATOR),
-      classNames: mx6("grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-activeSurface", hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, hoverableDescriptionIcons, ghostHover, className),
+      classNames: [
+        "grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-activeSurface",
+        hoverableControls,
+        hoverableFocusedKeyboardControls,
+        hoverableFocusedWithinControls,
+        hoverableDescriptionIcons,
+        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
@@ -801,7 +807,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
 };
 var TreeItem = /* @__PURE__ */ memo3(RawTreeItem);
 
-// packages/ui/react-ui-list/src/components/Tree/Tree.tsx
+// src/components/Tree/Tree.tsx
 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 = _useSignals8();
   try {
@@ -848,7 +854,7 @@ var Tree = ({ root, path, id, useItems, getProps, isOpen, isCurrent, draggable:
   }
 };
 
-// packages/ui/react-ui-list/src/util/path.ts
+// src/util/path.ts
 var SEPARATOR = "+";
 var Path = {
   create: (...args) => args.join(SEPARATOR),