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

package/src/components/Tree/Tree.tsx

@@ -1,73 +1,71 @@
 //
 // Copyright 2024 DXOS.org
-//
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React, { useMemo } from 'react';
 
-import { type HasId } from '@dxos/echo/internal';
 import { Treegrid, type TreegridRootProps } from '@dxos/react-ui';
 
-import { type TreeContextType, TreeProvider } from './TreeContext';
-import { TreeItem, type TreeItemProps } from './TreeItem';
+import { type TreeModel, TreeProvider } from './TreeContext';
+import { TreeItemById, type TreeItemByIdProps, type TreeItemProps } from './TreeItem';
 
-export type TreeProps<T extends HasId = any, O = any> = {
-  root?: T;
+export type TreeProps<T extends { id: string } = any> = {
+  model: TreeModel<T>;
+  rootId?: string;
   path?: string[];
   id: string;
-} & TreeContextType<T, O> &
-  Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &
+} & Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &
   Pick<
     TreeItemProps<T>,
-    'draggable' | 'renderColumns' | 'canDrop' | 'canSelect' | 'onOpenChange' | 'onSelect' | 'levelOffset'
+    | 'draggable'
+    | 'renderColumns'
+    | 'blockInstruction'
+    | 'canDrop'
+    | 'canSelect'
+    | 'onOpenChange'
+    | 'onSelect'
+    | 'onItemHover'
+    | 'levelOffset'
   >;
 
-export const Tree = <T extends HasId = any, O = any>({
-  root,
+export const Tree = <T extends { id: string } = any>({
+  model,
+  rootId,
   path,
   id,
-  useItems,
-  getProps,
-  isOpen,
-  isCurrent,
   draggable = false,
   gridTemplateColumns = '[tree-row-start] 1fr min-content [tree-row-end]',
   classNames,
   levelOffset,
   renderColumns,
+  blockInstruction,
   canDrop,
   canSelect,
   onOpenChange,
   onSelect,
-}: TreeProps<T, O>) => {
-  const context = useMemo(
-    () => ({
-      useItems,
-      getProps,
-      isOpen,
-      isCurrent,
-    }),
-    [useItems, getProps, isOpen, isCurrent],
-  );
-  const items = useItems(root);
+  onItemHover,
+}: TreeProps<T>) => {
+  const childIds = useAtomValue(model.childIds(rootId));
   const treePath = useMemo(() => (path ? [...path, id] : [id]), [id, path]);
 
+  const childProps: Omit<TreeItemByIdProps, 'id' | 'last'> = {
+    path: treePath,
+    levelOffset,
+    draggable,
+    renderColumns,
+    blockInstruction,
+    canDrop,
+    canSelect,
+    onOpenChange,
+    onSelect,
+    onItemHover,
+  };
+
   return (
     <Treegrid.Root gridTemplateColumns={gridTemplateColumns} classNames={classNames}>
-      <TreeProvider value={context}>
-        {items.map((item, index) => (
-          <TreeItem
-            key={item.id}
-            item={item}
-            last={index === items.length - 1}
-            path={treePath}
-            levelOffset={levelOffset}
-            draggable={draggable}
-            renderColumns={renderColumns}
-            canDrop={canDrop}
-            canSelect={canSelect}
-            onOpenChange={onOpenChange}
-            onSelect={onSelect}
-          />
+      <TreeProvider value={model}>
+        {childIds.map((childId, index) => (
+          <TreeItemById key={childId} id={childId} last={index === childIds.length - 1} {...childProps} />
         ))}
       </TreeProvider>
     </Treegrid.Root>

package/src/components/Tree/TreeContext.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type Atom } from '@effect-atom/atom-react';
 import { createContext, useContext } from 'react';
 
 import { raise } from '@dxos/debug';
@@ -14,19 +15,25 @@ export type TreeItemDataProps = {
   className?: string;
   headingClassName?: string;
   icon?: string;
-  iconClassName?: string;
+  iconHue?: string;
   disabled?: boolean;
   testId?: string;
 };
 
-export type TreeContextType<T = any, O = any> = {
-  useItems: (parent?: T, options?: O) => T[];
-  getProps: (item: T, parent: string[]) => TreeItemDataProps;
-  isOpen: (path: string[], item: T) => boolean;
-  isCurrent: (path: string[], item: T) => boolean;
-};
+export interface TreeModel<T extends { id: string } = any> {
+  /** Atom family: resolve item by ID (content). */
+  item: (id: string) => Atom.Atom<T | undefined>;
+  /** Atom family: open state keyed by path. */
+  itemOpen: (path: string[]) => Atom.Atom<boolean>;
+  /** Atom family: current (selected) state keyed by path. */
+  itemCurrent: (path: string[]) => Atom.Atom<boolean>;
+  /** Atom family: display props for an item at a given path (path includes item's own ID at end). */
+  itemProps: (path: string[]) => Atom.Atom<TreeItemDataProps>;
+  /** Atom family: outbound child IDs for a parent ID (topology). Undefined = root. */
+  childIds: (parentId?: string) => Atom.Atom<string[]>;
+}
 
-const TreeContext = createContext<null | TreeContextType>(null);
+const TreeContext = createContext<TreeModel | null>(null);
 
 export const TreeProvider = TreeContext.Provider;
 

package/src/components/Tree/TreeItem.tsx

@@ -10,10 +10,20 @@ 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 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 { type HasId } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { TreeItem as NaturalTreeItem, Treegrid } from '@dxos/react-ui';
 import {
@@ -22,7 +32,8 @@ import {
   hoverableControls,
   hoverableFocusedKeyboardControls,
   hoverableFocusedWithinControls,
-} from '@dxos/react-ui-theme';
+  mx,
+} from '@dxos/ui-theme';
 
 import { DEFAULT_INDENTATION, paddingIndentation } from './helpers';
 import { useTree } from './TreeContext';
@@ -32,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,
@@ -43,7 +54,7 @@ export const TreeDataSchema = Schema.Struct({
 export type TreeData = Schema.Schema.Type<typeof TreeDataSchema>;
 export const isTreeData = (data: unknown): data is TreeData => Schema.is(TreeDataSchema)(data);
 
-export type ColumnRenderer<T extends HasId = any> = FC<{
+export type ColumnRenderer<T extends { id: string } = any> = FC<{
   item: T;
   path: string[];
   open: boolean;
@@ -51,52 +62,63 @@ export type ColumnRenderer<T extends HasId = any> = FC<{
   setMenuOpen: (open: boolean) => void;
 }>;
 
-export type TreeItemProps<T extends HasId = any> = {
+export type TreeItemProps<T extends { id: string } = any> = {
   item: T;
   path: string[];
   levelOffset?: number;
   last: boolean;
   draggable?: boolean;
   renderColumns?: ColumnRenderer<T>;
+  blockInstruction?: (params: { instruction: Instruction; source: TreeData; target: TreeData }) => boolean;
   canDrop?: (params: { source: TreeData; target: TreeData }) => boolean;
   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 HasId = any>({
+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, isOpen, isCurrent } = useTree();
-  const items = useItems(item);
-  const { id, parentOf, label, className, headingClassName, icon, iconClassName, disabled, testId } = getProps(
-    item,
-    _path,
+  const {
+    itemProps: itemPropsAtom,
+    childIds: childIdsAtom,
+    itemOpen: itemOpenAtom,
+    itemCurrent: itemCurrentAtom,
+  } = useTree();
+  const path = useMemo(() => [...pathProp, item.id], [pathProp, item.id]);
+
+  const { id, parentOf, label, className, headingClassName, icon, iconHue, disabled, testId } = useAtomValue(
+    itemPropsAtom(path),
   );
-  const path = useMemo(() => [..._path, id], [_path, id]);
-  const open = isOpen(path, item);
-  const current = isCurrent(path, item);
+  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 cancelExpand = useCallback(() => {
     if (cancelExpandRef.current) {
@@ -106,14 +128,12 @@ const RawTreeItem = <T extends HasId = any>({
   }, []);
 
   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(
       draggable({
@@ -152,7 +172,11 @@ const RawTreeItem = <T extends HasId = any>({
         },
         getIsSticky: () => true,
         onDrag: ({ self, source }) => {
-          const instruction = extractInstruction(self.data);
+          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) {
@@ -183,7 +207,7 @@ const RawTreeItem = <T extends HasId = any>({
         },
       }),
     );
-  }, [_draggable, item, id, mode, path, open, canDrop]);
+  }, [draggableProp, item, id, mode, path, open, blockInstruction, canDrop]);
 
   // Cancel expand on unmount.
   useEffect(() => () => cancelExpand(), [cancelExpand]);
@@ -221,6 +245,29 @@ const RawTreeItem = <T extends HasId = 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
@@ -229,27 +276,25 @@ const RawTreeItem = <T extends HasId = any>({
         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',
+        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,
-          ghostHover,
           ghostFocusWithin,
+          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
-        //   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}
+        )}
         onKeyDown={handleKeyDown}
-        onContextMenu={(event) => {
-          event.preventDefault();
-          setMenuOpen(true);
-        }}
+        onMouseEnter={handleItemHover}
+        onContextMenu={handleContextMenu}
       >
         <div
           role='none'
@@ -264,7 +309,7 @@ const RawTreeItem = <T extends HasId = any>({
               label={label}
               className={headingClassName}
               icon={icon}
-              iconClassName={iconClassName}
+              iconHue={iconHue}
               onSelect={handleSelect}
               ref={buttonRef}
             />
@@ -274,22 +319,25 @@ const RawTreeItem = <T extends HasId = 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}
-            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

@@ -6,6 +6,7 @@ import React, { type KeyboardEvent, type MouseEvent, forwardRef, memo, useCallba
 
 import { Button, Icon, type Label, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
+import { getStyles } from '@dxos/ui-theme';
 
 // TODO(wittjosiah): Consider whether there should be a separate disabled prop which was visually distinct
 //   rather than just making the item unselectable.
@@ -13,7 +14,7 @@ export type TreeItemHeadingProps = {
   label: Label;
   className?: string;
   icon?: string;
-  iconClassName?: string;
+  iconHue?: string;
   disabled?: boolean;
   current?: boolean;
   onSelect?: (option: boolean) => void;
@@ -21,8 +22,9 @@ export type TreeItemHeadingProps = {
 
 export const TreeItemHeading = memo(
   forwardRef<HTMLButtonElement, TreeItemHeadingProps>(
-    ({ label, className, icon, iconClassName, disabled, current, onSelect }, forwardedRef) => {
+    ({ label, className, icon, iconHue, disabled, current, onSelect }, forwardedRef) => {
       const { t } = useTranslation();
+      const styles = iconHue ? getStyles(iconHue) : undefined;
 
       const handleSelect = useCallback(
         (event: MouseEvent) => {
@@ -56,7 +58,7 @@ export const TreeItemHeading = memo(
             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,
             ]}
@@ -65,8 +67,10 @@ export const TreeItemHeading = memo(
             onKeyDown={handleButtonKeydown}
             {...(current && { 'aria-current': 'location' })}
           >
-            {icon && <Icon icon={icon ?? 'ph--placeholder--regular'} size={5} classNames={['mlb-1', iconClassName]} />}
-            <span className='flex-1 is-0 truncate text-start text-sm font-normal' data-tooltip>
+            {icon && (
+              <Icon icon={icon ?? 'ph--placeholder--regular'} size={5} 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

@@ -23,7 +23,7 @@ export const TreeItemToggle = memo(
           variant='ghost'
           density='fine'
           classNames={[
-            'bs-full is-6 pli-0',
+            'h-full w-6 px-0',
             '[&_svg]:transition-[transform] [&_svg]:duration-200',
             open && '[&_svg]:rotate-90',
             hidden ? 'hidden' : !isBranch && 'invisible',

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

@@ -5,20 +5,21 @@
 import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 import * as Schema from 'effect/Schema';
 
-import { type HasId, ObjectId } from '@dxos/echo/internal';
+import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
 
 import { type TreeData } from './TreeItem';
 
-export type TestItem = HasId & {
+export type TestItem = {
+  id: string;
   name: string;
   icon?: string;
   items: TestItem[];
 };
 
 export const TestItemSchema = Schema.Struct({
-  id: ObjectId,
+  id: Obj.ID,
   name: Schema.String,
   icon: Schema.optional(Schema.String),
   items: Schema.mutable(Schema.Array(Schema.suspend((): Schema.Schema<TestItem> => TestItemSchema))),