@dxos/react-ui-list 0.8.4-main.937b3ca → 0.8.4-main.9be5663bfe

package/src/components/Tree/TreeItem.tsx

@@ -2,25 +2,37 @@
 // Copyright 2024 DXOS.org
 //
 
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import {
   type Instruction,
   type ItemMode,
   attachInstruction,
   extractInstruction,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { useAtomValue } from '@effect-atom/atom-react';
 import * as Schema from 'effect/Schema';
-import React, { type FC, type KeyboardEvent, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  type FC,
+  type KeyboardEvent,
+  type MouseEvent,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { invariant } 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,
 } from '@dxos/ui-theme';
 
 import { DEFAULT_INDENTATION, paddingIndentation } from './helpers';
@@ -31,7 +43,7 @@ import { TreeItemToggle } from './TreeItemToggle';
 const hoverableDescriptionIcons =
   '[--icons-color:inherit] hover-hover:[--icons-color:var(--description-text)] hover-hover:hover:[--icons-color:inherit] focus-within:[--icons-color:inherit]';
 
-type TreeItemState = 'idle' | 'dragging' | 'preview' | 'parent-of-instruction';
+type TreeItemDragState = 'idle' | 'dragging' | 'preview' | 'parent-of-instruction';
 
 export const TreeDataSchema = Schema.Struct({
   id: Schema.String,
@@ -62,39 +74,62 @@ export type TreeItemProps<T extends { id: string } = any> = {
   canSelect?: (params: { item: T; path: string[] }) => boolean;
   onOpenChange?: (params: { item: T; path: string[]; open: boolean }) => void;
   onSelect?: (params: { item: T; path: string[]; current: boolean; option: boolean }) => void;
+  onItemHover?: (params: { item: T }) => void;
 };
 
 const RawTreeItem = <T extends { id: string } = any>({
   item,
-  path: _path,
+  path: pathProp,
   levelOffset = 2,
   last,
-  draggable: _draggable,
+  draggable: draggableProp,
   renderColumns: Columns,
   blockInstruction,
   canDrop,
   canSelect,
   onOpenChange,
   onSelect,
+  onItemHover,
 }: TreeItemProps<T>) => {
   const rowRef = useRef<HTMLDivElement | null>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
   const openRef = useRef(false);
   const cancelExpandRef = useRef<NodeJS.Timeout | null>(null);
-  const [_state, setState] = useState<TreeItemState>('idle');
+  const [_state, setState] = useState<TreeItemDragState>('idle');
   const [instruction, setInstruction] = useState<Instruction | null>(null);
   const [menuOpen, setMenuOpen] = useState(false);
 
-  const { useItems, getProps, useIsOpen, useIsCurrent } = useTree();
-  const items = useItems(item);
-  const { id, parentOf, label, className, headingClassName, icon, iconHue, disabled, testId } = getProps(item, _path);
-  const path = useMemo(() => [..._path, id], [_path, id]);
-  const open = useIsOpen(path, item);
-  const current = useIsCurrent(path, item);
+  const {
+    itemProps: itemPropsAtom,
+    childIds: childIdsAtom,
+    itemOpen: itemOpenAtom,
+    itemCurrent: itemCurrentAtom,
+  } = useTree();
+  const path = useMemo(() => [...pathProp, item.id], [pathProp, item.id]);
+
+  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));
+
   const level = path.length - levelOffset;
   const isBranch = !!parentOf;
   const mode: ItemMode = last ? 'last-in-group' : open ? 'expanded' : 'standard';
   const canSelectItem = canSelect?.({ item, path }) ?? true;
+  const data = { id, path, item } satisfies TreeData;
+  const shouldSeedNativeDragData = typeof document !== 'undefined' && document.body.hasAttribute('data-platform');
 
   const cancelExpand = useCallback(() => {
     if (cancelExpandRef.current) {
@@ -103,20 +138,27 @@ const RawTreeItem = <T extends { id: string } = any>({
     }
   }, []);
 
+  const isItemDraggable = draggableProp && itemDraggable !== false;
+  const isItemDroppable = itemDroppable !== false;
+  const nativeDragText = id;
+
   useEffect(() => {
-    if (!_draggable) {
+    if (!draggableProp) {
       return;
     }
 
     invariant(buttonRef.current);
 
-    const data = { id, path, item } satisfies TreeData;
-
-    // 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,
+        getInitialDataForExternal: () => {
+          if (!shouldSeedNativeDragData) {
+            return {};
+          }
+          return { 'text/plain': nativeDragText };
+        },
         onDragStart: () => {
           setState('dragging');
           if (open) {
@@ -130,62 +172,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);
-        },
-      }),
-    );
-  }, [_draggable, 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]);
@@ -223,6 +275,29 @@ const RawTreeItem = <T extends { id: string } = any>({
     [isBranch, open, handleOpenToggle, handleSelect],
   );
 
+  const handleItemHover = useCallback(() => {
+    onItemHover?.({ item });
+  }, [onItemHover, item]);
+
+  const handleContextMenu = useCallback(
+    (event: MouseEvent) => {
+      event.preventDefault();
+      setMenuOpen(true);
+    },
+    [setMenuOpen],
+  );
+
+  const childProps = {
+    draggable: draggableProp,
+    renderColumns: Columns,
+    blockInstruction,
+    canDrop,
+    canSelect,
+    onItemHover,
+    onOpenChange,
+    onSelect,
+  };
+
   return (
     <>
       <Treegrid.Row
@@ -230,28 +305,26 @@ const RawTreeItem = <T extends { id: string } = any>({
         key={id}
         id={id}
         aria-labelledby={`${id}__label`}
-        parentOf={parentOf?.join(Treegrid.PARENT_OF_SEPARATOR)}
-        classNames={[
-          'grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-activeSurface',
-          hoverableControls,
-          hoverableFocusedKeyboardControls,
-          hoverableFocusedWithinControls,
-          hoverableDescriptionIcons,
-          ghostHover,
-          ghostFocusWithin,
-          className,
-        ]}
+        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
         //   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 ? ('' as 'page') : undefined}
+        classNames={mx(
+          'grid grid-cols-subgrid col-[tree-row] mt-0.5 is-current:bg-active-surface',
+          hoverableControls,
+          hoverableFocusedKeyboardControls,
+          hoverableFocusedWithinControls,
+          hoverableDescriptionIcons,
+          ghostFocusWithin,
+          ghostHover,
+          className,
+        )}
         onKeyDown={handleKeyDown}
-        onContextMenu={(event) => {
-          event.preventDefault();
-          setMenuOpen(true);
-        }}
+        onMouseEnter={handleItemHover}
+        onContextMenu={handleContextMenu}
       >
         <div
           role='none'
@@ -276,23 +349,25 @@ const RawTreeItem = <T extends { id: string } = any>({
         </div>
       </Treegrid.Row>
       {open &&
-        items.map((item, index) => (
-          <TreeItem
-            key={item.id}
-            item={item}
-            path={path}
-            last={index === items.length - 1}
-            draggable={_draggable}
-            renderColumns={Columns}
-            blockInstruction={blockInstruction}
-            canDrop={canDrop}
-            canSelect={canSelect}
-            onOpenChange={onOpenChange}
-            onSelect={onSelect}
-          />
+        childIds.map((childId, index) => (
+          <TreeItemById key={childId} id={childId} path={path} last={index === childIds.length - 1} {...childProps} />
         ))}
     </>
   );
 };
 
 export const TreeItem = memo(RawTreeItem) as FC<TreeItemProps>;
+
+/** Resolves a child ID to an item via the `item` atom and renders a TreeItem. */
+export type TreeItemByIdProps = Omit<TreeItemProps, 'item'> & { id: string };
+
+const RawTreeItemById = <T extends { id: string } = any>({ id, ...props }: TreeItemByIdProps) => {
+  const { item: itemAtom } = useTree();
+  const item = useAtomValue(itemAtom(id)) as T | undefined;
+  if (!item) {
+    return null;
+  }
+  return <TreeItem item={item} {...props} />;
+};
+
+export const TreeItemById = memo(RawTreeItemById) as FC<TreeItemByIdProps>;

package/src/components/Tree/TreeItemHeading.tsx

@@ -56,9 +56,8 @@ export const TreeItemHeading = memo(
           <Button
             data-testid='treeItem.heading'
             variant='ghost'
-            density='fine'
             classNames={[
-              'grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent',
+              'grow gap-2 ps-0.5 hover:bg-transparent dark:hover:bg-transparent',
               'disabled:cursor-default disabled:opacity-100',
               className,
             ]}
@@ -67,8 +66,8 @@ export const TreeItemHeading = memo(
             onKeyDown={handleButtonKeydown}
             {...(current && { 'aria-current': 'location' })}
           >
-            {icon && <Icon icon={icon ?? 'ph--placeholder--regular'} size={5} classNames={['mlb-1', styles?.icon]} />}
-            <span className='flex-1 is-0 truncate text-start text-sm font-normal' data-tooltip>
+            {icon && <Icon icon={icon ?? 'ph--placeholder--regular'} classNames={['my-1', styles?.surfaceText]} />}
+            <span className='flex-1 w-0 truncate text-start font-normal' data-tooltip>
               {toLocalizedString(label, t)}
             </span>
           </Button>

package/src/components/Tree/TreeItemToggle.tsx

@@ -14,7 +14,7 @@ export type TreeItemToggleProps = Omit<IconButtonProps, 'icon' | 'size' | 'label
 
 export const TreeItemToggle = memo(
   forwardRef<HTMLButtonElement, TreeItemToggleProps>(
-    ({ open, isBranch, hidden, classNames, ...props }, forwardedRef) => {
+    ({ classNames, open, isBranch, hidden, ...props }, forwardedRef) => {
       return (
         <IconButton
           ref={forwardedRef}
@@ -23,9 +23,9 @@ export const TreeItemToggle = memo(
           variant='ghost'
           density='fine'
           classNames={[
-            'bs-full is-6 pli-0',
-            '[&_svg]:transition-[transform] [&_svg]:duration-200',
-            open && '[&_svg]:rotate-90',
+            'h-full w-6 px-0',
+            '[&_svg]:transition-transform [&_svg]:duration-200',
+            open ? '[&_svg]:rotate-90' : '[&_svg]:rotate-0',
             hidden ? 'hidden' : !isBranch && 'invisible',
             classNames,
           ]}

package/src/components/Tree/index.ts

@@ -5,3 +5,5 @@
 export * from './Tree';
 export * from './TreeContext';
 export * from './TreeItem';
+export * from './TreeItemToggle';
+export * from './helpers';

package/src/components/Tree/testing.ts

@@ -7,7 +7,7 @@ import * as Schema from 'effect/Schema';
 
 import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { type TreeData } from './TreeItem';
 
@@ -26,18 +26,18 @@ export const TestItemSchema = Schema.Struct({
 });
 
 export const createTree = (n = 4, d = 4): TestItem => ({
-  id: faker.string.uuid(),
-  name: faker.commerce.productName(),
+  id: random.string.uuid(),
+  name: random.commerce.productName(),
   icon:
     d === 3
       ? undefined
-      : faker.helpers.arrayElement([
+      : random.helpers.arrayElement([
           'ph--planet--regular',
           'ph--sailboat--regular',
           'ph--house--regular',
           'ph--gear--regular',
         ]),
-  items: d > 0 ? faker.helpers.multiple(() => createTree(n, d - 1), { count: n }) : [],
+  items: d > 0 ? random.helpers.multiple(() => createTree(n, d - 1), { count: n }) : [],
 });
 
 const removeItem = (tree: TestItem, source: TreeData) => {