@dxos/react-ui-list 0.8.4-main.c85a9c8dae → 0.8.4-main.d05673bc65

package/dist/lib/browser/index.mjs

@@ -74,6 +74,7 @@ import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-d
 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";
@@ -160,7 +161,8 @@ var stateStyles = {
 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 dragHandleRef = useRef(null);
@@ -169,7 +171,7 @@ var ListItem = ({ children, classNames, item, ...props }) => {
     const element = ref.current;
     invariant(element, void 0, {
       F: __dxlog_file,
-      L: 98,
+      L: 109,
       S: void 0,
       A: [
         "element",
@@ -278,40 +280,41 @@ var ListItem = ({ children, classNames, item, ...props }) => {
   return /* @__PURE__ */ React4.createElement(ListItemProvider, {
     item,
     dragHandleRef
-  }, /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement(Comp, {
     ref,
     role: "listitem",
-    className: mx3("flex relative", classNames, stateStyles[state.type]),
+    "aria-selected": selected,
+    className: mx3("relative dx-selected", classNames, stateStyles[state.type]),
     ...props
-  }, children, state.type === "w-dragging-over" && state.closestEdge && /* @__PURE__ */ React4.createElement(NaturalListItem.DropIndicator, {
+  }, children), state.type === "w-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, {
+    iconOnly: true,
+    variant: "ghost",
     ...props,
+    icon,
     disabled: isDisabled,
-    iconOnly,
-    variant,
+    label: label ?? t("delete label"),
     classNames: [
       classNames,
       autoHide && disabled && "hidden"
@@ -351,8 +354,8 @@ var List = {
   ItemDragPreview: ListItemDragPreview,
   ItemWrapper: ListItemWrapper,
   ItemDragHandle: ListItemDragHandle,
+  ItemIconButton: ListItemIconButton,
   ItemDeleteButton: ListItemDeleteButton,
-  ItemButton: ListItemButton,
   ItemTitle: ListItemTitle
 };
 
@@ -494,7 +497,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));
@@ -516,111 +519,119 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
       cancelExpandRef.current = null;
     }
   }, []);
+  const isItemDraggable = draggableProp && itemDraggable !== false;
+  const isItemDroppable = itemDroppable !== false;
   useEffect3(() => {
     if (!draggableProp) {
       return;
     }
     invariant2(buttonRef.current, void 0, {
       F: __dxlog_file2,
-      L: 135,
+      L: 148,
       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
-            });
-          }
-        }
-      }),
-      // 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
+    const makeDraggable = () => draggable2({
+      element: buttonRef.current,
+      getInitialData: () => data,
+      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,