@dxos/react-ui-list 0.8.4-main.4a85c3132b → 0.8.4-main.51f1e5ca51

package/dist/lib/browser/index.mjs

@@ -69,11 +69,12 @@ var Accordion = {
 };
 
 // src/components/List/ListItem.tsx
+import { attachClosestEdge, extractClosestEdge as extractClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 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 { Slot } from "@radix-ui/react-slot";
 import React4, { useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
 import { invariant } from "@dxos/invariant";
@@ -81,9 +82,9 @@ import { IconButton, ListItem as NaturalListItem, useTranslation } from "@dxos/r
 import { mx as mx3, osTranslations } from "@dxos/ui-theme";
 
 // src/components/List/ListRoot.tsx
-import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { createContext as createContext3 } from "@radix-ui/react-context";
 import React3, { useCallback, useEffect, useState } from "react";
 var LIST_NAME = "List";
@@ -155,27 +156,20 @@ var idle = {
   type: "idle"
 };
 var stateStyles = {
-  "w-dragging": "opacity-50"
+  "is-dragging": "opacity-50"
 };
 var defaultContext = {};
 var LIST_ITEM_NAME = "ListItem";
 var [ListItemProvider, useListItemContext] = createContext4(LIST_ITEM_NAME, defaultContext);
-var ListItem = ({ children, classNames, item, ...props }) => {
+var ListItem = ({ children, classNames, item, asChild, selected, ...props }) => {
+  const Comp = asChild ? Slot : "div";
   const { isItem, readonly, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
-  const ref = useRef(null);
+  const rootRef = useRef(null);
   const dragHandleRef = useRef(null);
   const [state, setState] = useState2(idle);
   useEffect2(() => {
-    const element = ref.current;
-    invariant(element, void 0, {
-      F: __dxlog_file,
-      L: 98,
-      S: void 0,
-      A: [
-        "element",
-        ""
-      ]
-    });
+    const element = rootRef.current;
+    invariant(element, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 37, S: void 0, A: ["element", ""] });
     return combine(
       //
       // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable
@@ -214,10 +208,10 @@ var ListItem = ({ children, classNames, item, ...props }) => {
         } : void 0,
         onDragStart: () => {
           setState({
-            type: "w-dragging"
+            type: "is-dragging"
           });
           setRootState({
-            type: "w-dragging",
+            type: "is-dragging",
             item
           });
         },
@@ -248,7 +242,7 @@ var ListItem = ({ children, classNames, item, ...props }) => {
         onDragEnter: ({ self }) => {
           const closestEdge = extractClosestEdge2(self.data);
           setState({
-            type: "w-dragging-over",
+            type: "is-dragging-over",
             closestEdge
           });
         },
@@ -258,11 +252,11 @@ var ListItem = ({ children, classNames, item, ...props }) => {
         onDrag: ({ self }) => {
           const closestEdge = extractClosestEdge2(self.data);
           setState((current) => {
-            if (current.type === "w-dragging-over" && current.closestEdge === closestEdge) {
+            if (current.type === "is-dragging-over" && current.closestEdge === closestEdge) {
               return current;
             }
             return {
-              type: "w-dragging-over",
+              type: "is-dragging-over",
               closestEdge
             };
           });
@@ -278,40 +272,41 @@ var ListItem = ({ children, classNames, item, ...props }) => {
   return /* @__PURE__ */ React4.createElement(ListItemProvider, {
     item,
     dragHandleRef
-  }, /* @__PURE__ */ React4.createElement("div", {
-    ref,
+  }, /* @__PURE__ */ React4.createElement(Comp, {
+    ...props,
     role: "listitem",
-    className: mx3("flex relative", classNames, stateStyles[state.type]),
-    ...props
-  }, children, state.type === "w-dragging-over" && state.closestEdge && /* @__PURE__ */ React4.createElement(NaturalListItem.DropIndicator, {
+    "aria-selected": selected,
+    className: mx3("relative p-1 dx-selected dx-hover", classNames, stateStyles[state.type]),
+    ref: rootRef
+  }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React4.createElement(NaturalListItem.DropIndicator, {
     edge: state.closestEdge
-  })));
+  }));
 };
-var ListItemDeleteButton = ({ autoHide = true, classNames, disabled, icon = "ph--x--regular", label, ...props }) => {
-  const { state } = useListContext("DELETE_BUTTON");
+var ListItemIconButton = ({ autoHide = true, iconOnly = true, variant = "ghost", classNames, disabled, ...props }) => {
+  const { state } = useListContext("ITEM_BUTTON");
   const isDisabled = state.type !== "idle" || disabled;
-  const { t } = useTranslation(osTranslations);
   return /* @__PURE__ */ React4.createElement(IconButton, {
-    iconOnly: true,
-    variant: "ghost",
     ...props,
-    icon,
     disabled: isDisabled,
-    label: label ?? t("delete label"),
+    iconOnly,
+    variant,
     classNames: [
       classNames,
       autoHide && disabled && "hidden"
     ]
   });
 };
-var ListItemButton = ({ autoHide = true, iconOnly = true, variant = "ghost", classNames, disabled, ...props }) => {
-  const { state } = useListContext("ITEM_BUTTON");
+var ListItemDeleteButton = ({ autoHide = true, classNames, disabled, icon = "ph--x--regular", label, ...props }) => {
+  const { state } = useListContext("DELETE_BUTTON");
   const isDisabled = state.type !== "idle" || disabled;
+  const { t } = useTranslation(osTranslations);
   return /* @__PURE__ */ React4.createElement(IconButton, {
     ...props,
+    variant: "ghost",
     disabled: isDisabled,
-    iconOnly,
-    variant,
+    icon,
+    iconOnly: true,
+    label: label ?? t("delete.label"),
     classNames: [
       classNames,
       autoHide && disabled && "hidden"
@@ -322,12 +317,12 @@ var ListItemDragHandle = ({ disabled }) => {
   const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
   const { t } = useTranslation(osTranslations);
   return /* @__PURE__ */ React4.createElement(IconButton, {
-    iconOnly: true,
     variant: "ghost",
-    label: t("drag handle label"),
-    ref: dragHandleRef,
+    disabled,
     icon: "ph--dots-six-vertical--regular",
-    disabled
+    iconOnly: true,
+    label: t("drag-handle.label"),
+    ref: dragHandleRef
   });
 };
 var ListItemDragPreview = ({ children }) => {
@@ -337,9 +332,11 @@ var ListItemDragPreview = ({ children }) => {
   }), state.container) : null;
 };
 var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ React4.createElement("div", {
+  role: "none",
   className: mx3("flex w-full gap-2", classNames)
 }, children);
 var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ React4.createElement("div", {
+  role: "none",
   className: mx3("flex grow items-center truncate", classNames),
   ...props
 }, children);
@@ -351,8 +348,8 @@ var List = {
   ItemDragPreview: ListItemDragPreview,
   ItemWrapper: ListItemWrapper,
   ItemDragHandle: ListItemDragHandle,
+  ItemIconButton: ListItemIconButton,
   ItemDeleteButton: ListItemDeleteButton,
-  ItemButton: ListItemButton,
   ItemTitle: ListItemTitle
 };
 
@@ -369,14 +366,14 @@ var TreeProvider = TreeContext.Provider;
 var useTree = () => useContext(TreeContext) ?? raise(new Error("TreeContext not found"));
 
 // src/components/Tree/TreeItem.tsx
+import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 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";
-import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { useAtomValue } from "@effect-atom/atom-react";
 import * as Schema from "effect/Schema";
 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 { TreeItem as NaturalTreeItem, Treegrid } from "@dxos/react-ui";
+import { TreeItem as NaturalTreeItem, Treegrid, TREEGRID_PARENT_OF_SEPARATOR } from "@dxos/react-ui";
 import { ghostFocusWithin, ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, mx as mx4 } from "@dxos/ui-theme";
 
 // src/components/Tree/helpers.ts
@@ -417,7 +414,6 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ label,
   }, /* @__PURE__ */ React5.createElement(Button, {
     "data-testid": "treeItem.heading",
     variant: "ghost",
-    density: "fine",
     classNames: [
       "grow gap-2 ps-0.5 hover:bg-transparent dark:hover:bg-transparent",
       "disabled:cursor-default disabled:opacity-100",
@@ -431,7 +427,6 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ label,
     }
   }, icon && /* @__PURE__ */ React5.createElement(Icon2, {
     icon: icon ?? "ph--placeholder--regular",
-    size: 5,
     classNames: [
       "my-1",
       styles?.surfaceText
@@ -445,7 +440,7 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ label,
 // src/components/Tree/TreeItemToggle.tsx
 import React6, { forwardRef as forwardRef2, memo as memo2 } from "react";
 import { IconButton as IconButton2 } from "@dxos/react-ui";
-var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef2(({ open, isBranch, hidden, classNames, ...props }, forwardedRef) => {
+var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef2(({ classNames, open, isBranch, hidden, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React6.createElement(IconButton2, {
     ref: forwardedRef,
     "data-testid": "treeItem.toggle",
@@ -454,8 +449,8 @@ var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef2(({ open,
     density: "fine",
     classNames: [
       "h-full w-6 px-0",
-      "[&_svg]:transition-[transform] [&_svg]:duration-200",
-      open && "[&_svg]:rotate-90",
+      "[&_svg]:transition-transform [&_svg]:duration-200",
+      open ? "[&_svg]:rotate-90" : "[&_svg]:rotate-0",
       hidden ? "hidden" : !isBranch && "invisible",
       classNames
     ],
@@ -494,7 +489,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     pathProp,
     item.id
   ]);
-  const { id, parentOf, label, className, headingClassName, icon, iconHue, disabled, testId } = useAtomValue(itemPropsAtom(path));
+  const { id, parentOf, draggable: itemDraggable, droppable: itemDroppable, label, className, headingClassName, icon, iconHue, disabled, testId } = useAtomValue(itemPropsAtom(path));
   const childIds = useAtomValue(childIdsAtom(item.id));
   const open = useAtomValue(itemOpenAtom(path));
   const current = useAtomValue(itemCurrentAtom(path));
@@ -510,117 +505,127 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     path,
     item
   };
+  const shouldSeedNativeDragData = typeof document !== "undefined" && document.body.hasAttribute("data-platform");
   const cancelExpand = useCallback3(() => {
     if (cancelExpandRef.current) {
       clearTimeout(cancelExpandRef.current);
       cancelExpandRef.current = null;
     }
   }, []);
+  const isItemDraggable = draggableProp && itemDraggable !== false;
+  const isItemDroppable = itemDroppable !== false;
+  const nativeDragText = id;
   useEffect3(() => {
     if (!draggableProp) {
       return;
     }
-    invariant2(buttonRef.current, void 0, {
-      F: __dxlog_file2,
-      L: 135,
-      S: void 0,
-      A: [
-        "buttonRef.current",
-        ""
-      ]
-    });
-    return combine2(
-      draggable2({
-        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
-            });
-          }
+    invariant2(buttonRef.current, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 70, S: void 0, A: ["buttonRef.current", ""] });
+    const makeDraggable = () => draggable2({
+      element: buttonRef.current,
+      getInitialData: () => data,
+      getInitialDataForExternal: () => {
+        if (!shouldSeedNativeDragData) {
+          return {};
         }
-      }),
-      // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx
-      dropTargetForElements2({
-        element: buttonRef.current,
-        getData: ({ input, element }) => {
-          return 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
+        return {
+          "text/plain": nativeDragText
+        };
+      },
+      onDragStart: () => {
+        setState("dragging");
+        if (open) {
+          openRef.current = true;
+          onOpenChange?.({
+            item,
+            path,
+            open: false
           });
-        },
-        getIsSticky: () => true,
-        onDrag: ({ self, source }) => {
-          const desired = extractInstruction(self.data);
-          const block = desired && blockInstruction?.({
-            instruction: desired,
-            source: source.data,
-            target: data
+        }
+      },
+      onDrop: () => {
+        setState("idle");
+        if (openRef.current) {
+          onOpenChange?.({
+            item,
+            path,
+            open: true
           });
-          const instruction2 = block && desired.type !== "instruction-blocked" ? {
-            type: "instruction-blocked",
-            desired
-          } : desired;
-          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);
+        }
+      }
+    });
+    if (!isItemDroppable) {
+      return isItemDraggable ? makeDraggable() : void 0;
+    }
+    const dropTarget = dropTargetForElements2({
+      element: buttonRef.current,
+      getData: ({ input, element }) => {
+        return 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 desired = extractInstruction(self.data);
+        const block = desired && blockInstruction?.({
+          instruction: desired,
+          source: source.data,
+          target: data
+        });
+        const instruction2 = block && desired.type !== "instruction-blocked" ? {
+          type: "instruction-blocked",
+          desired
+        } : desired;
+        if (source.data.id !== id) {
+          if (instruction2?.type === "make-child" && isBranch && !open && !cancelExpandRef.current) {
+            cancelExpandRef.current = setTimeout(() => {
+              onOpenChange?.({
+                item,
+                path,
+                open: true
+              });
+            }, 500);
           }
-        },
-        onDragLeave: () => {
-          cancelExpand();
-          setInstruction(null);
-        },
-        onDrop: () => {
-          cancelExpand();
+          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);
+      }
+    });
+    if (!isItemDraggable) {
+      return dropTarget;
+    }
+    return combine2(makeDraggable(), dropTarget);
   }, [
     draggableProp,
+    isItemDraggable,
+    isItemDroppable,
     item,
     id,
     mode,
@@ -709,7 +714,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     key: id,
     id,
     "aria-labelledby": `${id}__label`,
-    parentOf: parentOf?.join(Treegrid.PARENT_OF_SEPARATOR),
+    parentOf: parentOf?.join(TREEGRID_PARENT_OF_SEPARATOR),
     "data-object-id": id,
     "data-testid": testId,
     // NOTE(thure): This is intentionally an empty string to for descendents to select by in the CSS