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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.8.4-main.c85a9c8dae",
+  "version": "0.8.4-main.d05673bc65",
   "description": "A list component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -33,15 +33,16 @@
     "@effect-atom/atom-react": "^0.5.0",
     "@radix-ui/react-accordion": "1.2.3",
     "@radix-ui/react-context": "1.1.1",
-    "@dxos/debug": "0.8.4-main.c85a9c8dae",
-    "@dxos/invariant": "0.8.4-main.c85a9c8dae",
-    "@dxos/echo": "0.8.4-main.c85a9c8dae",
-    "@dxos/log": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-text-tooltip": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-types": "0.8.4-main.c85a9c8dae",
-    "@dxos/util": "0.8.4-main.c85a9c8dae"
+    "@radix-ui/react-slot": "1.1.2",
+    "@dxos/debug": "0.8.4-main.d05673bc65",
+    "@dxos/echo": "0.8.4-main.d05673bc65",
+    "@dxos/invariant": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui": "0.8.4-main.d05673bc65",
+    "@dxos/ui-theme": "0.8.4-main.d05673bc65",
+    "@dxos/log": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.d05673bc65",
+    "@dxos/util": "0.8.4-main.d05673bc65",
+    "@dxos/ui-types": "0.8.4-main.d05673bc65"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
@@ -50,15 +51,15 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "^7.1.11",
-    "@dxos/random": "0.8.4-main.c85a9c8dae",
-    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae"
+    "@dxos/random": "0.8.4-main.d05673bc65",
+    "@dxos/storybook-utils": "0.8.4-main.d05673bc65"
   },
   "peerDependencies": {
     "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
+    "@dxos/react-ui": "0.8.4-main.d05673bc65",
+    "@dxos/ui-theme": "0.8.4-main.d05673bc65"
   },
   "publishConfig": {
     "access": "public"

package/src/components/List/List.stories.tsx

@@ -53,7 +53,7 @@ const DefaultStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
 
             <div role='list' className='w-full h-full overflow-auto'>
               {items?.map((item) => (
-                <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid, ghostHover)}>
+                <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid)}>
                   <List.ItemDragHandle />
                   <List.ItemTitle onClick={() => handleSelect(item)}>{item.name}</List.ItemTitle>
                   <List.ItemDeleteButton onClick={() => handleDelete(item)} />
@@ -91,7 +91,7 @@ const SimpleStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
       {({ items }) => (
         <div role='list' className='w-full h-full overflow-auto'>
           {items?.map((item) => (
-            <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid, ghostHover)}>
+            <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid)}>
               <List.ItemDragHandle />
               <List.ItemTitle>{item.name}</List.ItemTitle>
               <List.ItemDeleteButton />

package/src/components/List/List.tsx

@@ -4,7 +4,7 @@
 
 import {
   ListItem,
-  ListItemButton,
+  ListItemIconButton,
   ListItemDeleteButton,
   ListItemDragHandle,
   ListItemDragPreview,
@@ -33,8 +33,8 @@ export const List = {
   ItemDragPreview: ListItemDragPreview,
   ItemWrapper: ListItemWrapper,
   ItemDragHandle: ListItemDragHandle,
+  ItemIconButton: ListItemIconButton,
   ItemDeleteButton: ListItemDeleteButton,
-  ItemButton: ListItemButton,
   ItemTitle: ListItemTitle,
 };
 

package/src/components/List/ListItem.tsx

@@ -11,6 +11,7 @@ import {
   extractClosestEdge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { createContext } from '@radix-ui/react-context';
+import { Slot } from '@radix-ui/react-slot';
 import React, {
   type ComponentProps,
   type HTMLAttributes,
@@ -80,6 +81,8 @@ export type ListItemProps<T extends ListItemRecord> = ThemedClassName<
   PropsWithChildren<
     {
       item: T;
+      asChild?: boolean;
+      selected?: boolean;
     } & HTMLAttributes<HTMLDivElement>
   >
 >;
@@ -87,7 +90,15 @@ export type ListItemProps<T extends ListItemRecord> = ThemedClassName<
 /**
  * Draggable list item.
  */
-export const ListItem = <T extends ListItemRecord>({ children, classNames, item, ...props }: ListItemProps<T>) => {
+export const ListItem = <T extends ListItemRecord>({
+  children,
+  classNames,
+  item,
+  asChild,
+  selected,
+  ...props
+}: ListItemProps<T>) => {
+  const Comp = asChild ? Slot : 'div';
   const { isItem, readonly, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
   const ref = useRef<HTMLDivElement | null>(null);
   const dragHandleRef = useRef<HTMLElement | null>(null);
@@ -170,12 +181,18 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
 
   return (
     <ListItemProvider item={item} dragHandleRef={dragHandleRef}>
-      <div ref={ref} role='listitem' className={mx('flex relative', classNames, stateStyles[state.type])} {...props}>
+      <Comp
+        ref={ref}
+        role='listitem'
+        aria-selected={selected}
+        className={mx('relative dx-selected', classNames, stateStyles[state.type])}
+        {...props}
+      >
         {children}
-        {state.type === 'w-dragging-over' && state.closestEdge && (
-          <NaturalListItem.DropIndicator edge={state.closestEdge} />
-        )}
-      </div>
+      </Comp>
+      {state.type === 'w-dragging-over' && state.closestEdge && (
+        <NaturalListItem.DropIndicator edge={state.closestEdge} />
+      )}
     </ListItemProvider>
   );
 };
@@ -184,47 +201,48 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
 // List item components
 //
 
-export const ListItemDeleteButton = ({
+export const ListItemIconButton = ({
   autoHide = true,
+  iconOnly = true,
+  variant = 'ghost',
   classNames,
   disabled,
-  icon = 'ph--x--regular',
-  label,
   ...props
-}: Partial<Pick<IconButtonProps, 'icon'>> &
-  Omit<IconButtonProps, 'icon' | 'label'> & { autoHide?: boolean; label?: string }) => {
-  const { state } = useListContext('DELETE_BUTTON');
+}: IconButtonProps & { autoHide?: boolean }) => {
+  const { state } = useListContext('ITEM_BUTTON');
   const isDisabled = state.type !== 'idle' || disabled;
-  const { t } = useTranslation(osTranslations);
   return (
     <IconButton
-      iconOnly
-      variant='ghost'
       {...props}
-      icon={icon}
       disabled={isDisabled}
-      label={label ?? t('delete label')}
+      iconOnly={iconOnly}
+      variant={variant}
       classNames={[classNames, autoHide && disabled && 'hidden']}
     />
   );
 };
 
-export const ListItemButton = ({
+// TODO(burdon): Generalize to action button.
+export const ListItemDeleteButton = ({
   autoHide = true,
-  iconOnly = true,
-  variant = 'ghost',
   classNames,
   disabled,
+  icon = 'ph--x--regular',
+  label,
   ...props
-}: IconButtonProps & { autoHide?: boolean }) => {
-  const { state } = useListContext('ITEM_BUTTON');
+}: Partial<Pick<IconButtonProps, 'icon'>> &
+  Omit<IconButtonProps, 'icon' | 'label'> & { autoHide?: boolean; label?: string }) => {
+  const { state } = useListContext('DELETE_BUTTON');
   const isDisabled = state.type !== 'idle' || disabled;
+  const { t } = useTranslation(osTranslations);
   return (
     <IconButton
+      iconOnly
+      variant='ghost'
       {...props}
+      icon={icon}
       disabled={isDisabled}
-      iconOnly={iconOnly}
-      variant={variant}
+      label={label ?? t('delete label')}
       classNames={[classNames, autoHide && disabled && 'hidden']}
     />
   );

package/src/components/Tree/TreeContext.tsx

@@ -12,6 +12,10 @@ export type TreeItemDataProps = {
   id: string;
   label: Label;
   parentOf?: string[];
+  /** When `false`, the item cannot be dragged (overrides tree-level `draggable`). */
+  draggable?: boolean;
+  /** When `false`, the item does not participate as a drop target. */
+  droppable?: boolean;
   className?: string;
   headingClassName?: string;
   icon?: string;

package/src/components/Tree/TreeItem.tsx

@@ -107,9 +107,19 @@ const RawTreeItem = <T extends { id: string } = any>({
   } = useTree();
   const path = useMemo(() => [...pathProp, item.id], [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));
@@ -127,6 +137,9 @@ const RawTreeItem = <T extends { id: string } = any>({
     }
   }, []);
 
+  const isItemDraggable = draggableProp && itemDraggable !== false;
+  const isItemDroppable = itemDroppable !== false;
+
   useEffect(() => {
     if (!draggableProp) {
       return;
@@ -134,10 +147,9 @@ const RawTreeItem = <T extends { id: string } = any>({
 
     invariant(buttonRef.current);
 
-    // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about
-    return combine(
+    const makeDraggable = () =>
       draggable({
-        element: buttonRef.current,
+        element: buttonRef.current!,
         getInitialData: () => data,
         onDragStart: () => {
           setState('dragging');
@@ -152,62 +164,72 @@ const RawTreeItem = <T extends { id: string } = any>({
             onOpenChange?.({ item, path, open: true });
           }
         },
-      }),
-      // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx
-      dropTargetForElements({
-        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 as TreeData, target: data });
-        },
-        getIsSticky: () => true,
-        onDrag: ({ self, source }) => {
-          const desired = extractInstruction(self.data);
-          const block =
-            desired && blockInstruction?.({ instruction: desired, source: source.data as TreeData, target: data });
-          const instruction: Instruction | null =
-            block && desired.type !== 'instruction-blocked' ? { type: 'instruction-blocked', desired } : desired;
-
-          if (source.data.id !== id) {
-            if (instruction?.type === 'make-child' && isBranch && !open && !cancelExpandRef.current) {
-              cancelExpandRef.current = setTimeout(() => {
-                onOpenChange?.({ item, path, open: true });
-              }, 500);
-            }
-
-            if (instruction?.type !== 'make-child') {
-              cancelExpand();
-            }
-
-            setInstruction(instruction);
-          } else if (instruction?.type === 'reparent') {
-            // TODO(wittjosiah): This is not occurring in the current implementation.
-            setInstruction(instruction);
-          } else {
-            setInstruction(null);
+      });
+
+    if (!isItemDroppable) {
+      return isItemDraggable ? makeDraggable() : undefined;
+    }
+
+    const dropTarget = dropTargetForElements({
+      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 as TreeData, target: data });
+      },
+      getIsSticky: () => true,
+      onDrag: ({ self, source }) => {
+        const desired = extractInstruction(self.data);
+        const block =
+          desired && blockInstruction?.({ instruction: desired, source: source.data as TreeData, target: data });
+        const instruction: Instruction | null =
+          block && desired.type !== 'instruction-blocked' ? { type: 'instruction-blocked', desired } : desired;
+
+        if (source.data.id !== id) {
+          if (instruction?.type === 'make-child' && isBranch && !open && !cancelExpandRef.current) {
+            cancelExpandRef.current = setTimeout(() => {
+              onOpenChange?.({ item, path, open: true });
+            }, 500);
           }
-        },
-        onDragLeave: () => {
-          cancelExpand();
-          setInstruction(null);
-        },
-        onDrop: () => {
-          cancelExpand();
+
+          if (instruction?.type !== 'make-child') {
+            cancelExpand();
+          }
+
+          setInstruction(instruction);
+        } else if (instruction?.type === 'reparent') {
+          // TODO(wittjosiah): This is not occurring in the current implementation.
+          setInstruction(instruction);
+        } else {
           setInstruction(null);
-        },
-      }),
-    );
-  }, [draggableProp, item, id, mode, path, open, blockInstruction, canDrop]);
+        }
+      },
+      onDragLeave: () => {
+        cancelExpand();
+        setInstruction(null);
+      },
+      onDrop: () => {
+        cancelExpand();
+        setInstruction(null);
+      },
+    });
+
+    if (!isItemDraggable) {
+      return dropTarget;
+    }
+
+    // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about
+    return combine(makeDraggable(), dropTarget);
+  }, [draggableProp, isItemDraggable, isItemDroppable, item, id, mode, path, open, blockInstruction, canDrop]);
 
   // Cancel expand on unmount.
   useEffect(() => () => cancelExpand(), [cancelExpand]);