@dxos/react-ui-list 0.7.1 → 0.7.2-main.f1adc9f

package/src/components/Tree/TreeItem.tsx

@@ -3,7 +3,10 @@
 //
 
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import {
+  draggable as pragmaticDraggable,
+  dropTargetForElements,
+} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx
 import {
   attachInstruction,
@@ -11,8 +14,9 @@ import {
   type Instruction,
   type ItemMode,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import React, { memo, useCallback, useEffect, useRef, useState, type FC, type KeyboardEvent } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState, type FC, type KeyboardEvent } from 'react';
 
+import { S } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { Treegrid } from '@dxos/react-ui';
 import {
@@ -25,44 +29,57 @@ import {
 } from '@dxos/react-ui-theme';
 
 import { DropIndicator } from './DropIndicator';
+import { useTree } from './TreeContext';
 import { TreeItemHeading } from './TreeItemHeading';
 import { TreeItemToggle } from './TreeItemToggle';
 import { DEFAULT_INDENTATION, paddingIndendation } from './helpers';
-import { type ItemType } from './types';
 
 type TreeItemState = 'idle' | 'dragging' | 'preview' | 'parent-of-instruction';
 
 const hoverableDescriptionIcons =
   '[--icons-color:inherit] hover-hover:[--icons-color:var(--description-text)] hover-hover:hover:[--icons-color:inherit] focus-within:[--icons-color:inherit]';
 
-// TODO(burdon): Make generic?
-export type TreeItemProps<T extends ItemType = ItemType> = {
+export const TreeDataSchema = S.Struct({
+  id: S.String,
+  path: S.Array(S.String),
+  item: S.Any,
+});
+
+export type TreeData = S.Schema.Type<typeof TreeDataSchema>;
+
+export const isTreeData = (data: unknown): data is TreeData => S.is(TreeDataSchema)(data);
+
+export type TreeItemProps<T = any> = {
   item: T;
-  mode: ItemMode;
-  open: boolean;
-  current: boolean;
+  path: string[];
+  last: boolean;
   draggable?: boolean;
-  renderColumns?: FC<{ item: T; menuOpen: boolean; setMenuOpen: (open: boolean) => void }>;
-  canDrop?: (source: T, target: T) => boolean;
-  onOpenChange?: (item: T, nextOpen: boolean) => void;
-  onSelect?: (item: T, nextState: boolean) => void;
+  renderColumns?: FC<{ item: T; path: string[]; menuOpen: boolean; setMenuOpen: (open: boolean) => void }>;
+  canDrop?: (source: TreeData, target: TreeData) => boolean;
+  onOpenChange?: (params: { item: T; path: string[]; open: boolean }) => void;
+  onSelect?: (params: { item: T; path: string[]; current: boolean; option: boolean }) => void;
 };
 
-// TODO(wittjosiah): Styles.
-export const RawTreeItem = <T extends ItemType = ItemType>({
+export const RawTreeItem = <T = any,>({
   item,
-  mode,
-  open,
-  current,
-  draggable: _draggable,
+  path: _path,
+  last,
+  draggable,
   renderColumns: Columns,
   canDrop,
   onOpenChange,
   onSelect,
 }: TreeItemProps<T>) => {
-  const { id, label, icon, className, headingClassName, disabled, path, parentOf } = item;
+  const { getItems, getProps, isOpen, isCurrent } = useTree();
+  const items = getItems(item);
+  const { id, label, parentOf, icon, disabled, className, headingClassName, testId } = getProps(item, _path);
+  const path = useMemo(() => [..._path, id], [_path, id]);
+  const open = isOpen(path, item);
+  const current = isCurrent(path, item);
   const level = path.length - 2;
   const isBranch = !!parentOf;
+  const mode: ItemMode = last ? 'last-in-group' : open ? 'expanded' : 'standard';
+  const data = useMemo(() => ({ id, path, item }) satisfies TreeData, [id, path, item]);
 
   const rowRef = useRef<HTMLDivElement | null>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
@@ -80,7 +97,7 @@ export const RawTreeItem = <T extends ItemType = ItemType>({
   }, []);
 
   useEffect(() => {
-    if (!_draggable) {
+    if (!draggable) {
       return;
     }
 
@@ -88,27 +105,27 @@ export const RawTreeItem = <T extends ItemType = ItemType>({
 
     // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about
     return combine(
-      draggable({
+      pragmaticDraggable({
         element: buttonRef.current,
-        getInitialData: () => item,
+        getInitialData: () => data,
         onDragStart: () => {
           setState('dragging');
           if (open) {
             openRef.current = true;
-            onOpenChange?.(item, false);
+            onOpenChange?.({ item, path, open: false });
           }
         },
         onDrop: () => {
           setState('idle');
           if (openRef.current) {
-            onOpenChange?.(item, true);
+            onOpenChange?.({ item, path, open: true });
           }
         },
       }),
       dropTargetForElements({
         element: buttonRef.current,
         getData: ({ input, element }) => {
-          return attachInstruction(item, {
+          return attachInstruction(data, {
             input,
             element,
             indentPerLevel: DEFAULT_INDENTATION,
@@ -119,16 +136,16 @@ export const RawTreeItem = <T extends ItemType = ItemType>({
         },
         canDrop: ({ source }) => {
           const _canDrop = canDrop ?? (() => true);
-          return source.element !== buttonRef.current && _canDrop(source.data as T, item);
+          return source.element !== buttonRef.current && _canDrop(source.data as TreeData, data);
         },
         getIsSticky: () => true,
         onDrag: ({ self, source }) => {
           const instruction = extractInstruction(self.data);
 
-          if (source.data.id !== item.id) {
+          if (source.data.id !== id) {
             if (instruction?.type === 'make-child' && isBranch && !open && !cancelExpandRef.current) {
               cancelExpandRef.current = setTimeout(() => {
-                onOpenChange?.(item, true);
+                onOpenChange?.({ item, path, open: true });
               }, 500);
             }
 
@@ -154,17 +171,23 @@ export const RawTreeItem = <T extends ItemType = ItemType>({
         },
       }),
     );
-  }, [draggable, item, mode, open, canDrop]);
+  }, [draggable, item, id, mode, path, open, canDrop]);
 
   // Cancel expand on unmount.
   useEffect(() => () => cancelExpand(), [cancelExpand]);
 
-  const handleOpenChange = useCallback(() => onOpenChange?.(item, !open), [onOpenChange, item, open]);
+  const handleOpenChange = useCallback(
+    () => onOpenChange?.({ item, path, open: !open }),
+    [onOpenChange, item, path, open],
+  );
 
-  const handleSelect = useCallback(() => {
-    rowRef.current?.focus();
-    onSelect?.(item, !current);
-  }, [onSelect, item, current]);
+  const handleSelect = useCallback(
+    (option = false) => {
+      rowRef.current?.focus();
+      onSelect?.({ item, path, current: !current, option });
+    },
+    [onSelect, item, path, current],
+  );
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
@@ -176,7 +199,7 @@ export const RawTreeItem = <T extends ItemType = ItemType>({
           isBranch && open && handleOpenChange();
           break;
         case ' ':
-          handleSelect();
+          handleSelect(event.altKey);
           break;
       }
     },
@@ -184,56 +207,72 @@ export const RawTreeItem = <T extends ItemType = ItemType>({
   );
 
   return (
-    <Treegrid.Row
-      ref={rowRef}
-      key={id}
-      id={id}
-      aria-labelledby={`${id}__label`}
-      parentOf={parentOf?.join(Treegrid.PARENT_OF_SEPARATOR)}
-      classNames={mx(
-        'grid grid-cols-subgrid col-[tree-row] mt-[2px] aria-[current]:bg-input',
-        hoverableControls,
-        hoverableFocusedKeyboardControls,
-        hoverableFocusedWithinControls,
-        hoverableDescriptionIcons,
-        ghostHover,
-        focusRing,
-        className,
-      )}
-      data-itemid={item.id}
-      data-testid={item.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);
-      }}
-    >
-      <Treegrid.Cell
-        indent
-        classNames='relative grid grid-cols-subgrid col-[tree-row]'
-        style={paddingIndendation(level)}
+    <>
+      <Treegrid.Row
+        ref={rowRef}
+        key={id}
+        id={id}
+        aria-labelledby={`${id}__label`}
+        parentOf={parentOf?.join(Treegrid.PARENT_OF_SEPARATOR)}
+        classNames={mx(
+          'grid grid-cols-subgrid col-[tree-row] mt-[2px] aria-[current]:bg-input',
+          hoverableControls,
+          hoverableFocusedKeyboardControls,
+          hoverableFocusedWithinControls,
+          hoverableDescriptionIcons,
+          ghostHover,
+          focusRing,
+          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);
+        }}
       >
-        <div role='none' className='flex items-center'>
-          <TreeItemToggle open={open} isBranch={isBranch} onToggle={handleOpenChange} />
-          <TreeItemHeading
-            ref={buttonRef}
-            label={label}
-            icon={icon}
-            className={headingClassName}
-            disabled={disabled}
-            current={current}
-            onSelect={handleSelect}
+        <Treegrid.Cell
+          indent
+          classNames='relative grid grid-cols-subgrid col-[tree-row]'
+          style={paddingIndendation(level)}
+        >
+          <div role='none' className='flex items-center'>
+            <TreeItemToggle open={open} isBranch={isBranch} onToggle={handleOpenChange} />
+            <TreeItemHeading
+              ref={buttonRef}
+              label={label}
+              icon={icon}
+              className={headingClassName}
+              disabled={disabled}
+              current={current}
+              onSelect={handleSelect}
+            />
+          </div>
+          {Columns && <Columns item={item} path={path} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />}
+          {instruction && <DropIndicator instruction={instruction} gap={2} />}
+        </Treegrid.Cell>
+      </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}
+            onOpenChange={onOpenChange}
+            onSelect={onSelect}
           />
-        </div>
-        {Columns && <Columns item={item} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />}
-        {instruction && <DropIndicator instruction={instruction} />}
-      </Treegrid.Cell>
-    </Treegrid.Row>
+        ))}
+    </>
   );
 };
 
-export const TreeItem = memo(RawTreeItem) as <T extends ItemType = ItemType>(prosp: TreeItemProps<T>) => JSX.Element;
+export const TreeItem = memo(RawTreeItem) as FC<TreeItemProps>;

package/src/components/Tree/TreeItemHeading.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type KeyboardEvent, forwardRef, memo, useCallback } from 'react';
+import React, { type KeyboardEvent, type MouseEvent, forwardRef, memo, useCallback } from 'react';
 
 import { Button, Icon, toLocalizedString, useTranslation, type Label } from '@dxos/react-ui';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
@@ -16,7 +16,7 @@ export type NavTreeItemHeadingProps = {
   className?: string;
   disabled?: boolean;
   current?: boolean;
-  onSelect?: () => void;
+  onSelect?: (option: boolean) => void;
 };
 
 export const TreeItemHeading = memo(
@@ -24,12 +24,19 @@ export const TreeItemHeading = memo(
     ({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
       const { t } = useTranslation();
 
+      const handleSelect = useCallback(
+        (event: MouseEvent) => {
+          onSelect?.(event.altKey);
+        },
+        [onSelect],
+      );
+
       const handleButtonKeydown = useCallback(
         (event: KeyboardEvent) => {
           if (event.key === ' ' || event.key === 'Enter') {
             event.preventDefault();
             event.stopPropagation();
-            onSelect?.();
+            onSelect?.(event.altKey);
           }
         },
         [onSelect],
@@ -55,12 +62,14 @@ export const TreeItemHeading = memo(
               className,
             )}
             disabled={disabled}
-            onClick={onSelect}
+            onClick={handleSelect}
             onKeyDown={handleButtonKeydown}
             {...(current && { 'aria-current': 'location' })}
           >
             {icon && <Icon icon={icon ?? 'ph--placeholder--regular'} size={4} classNames='is-[1em] bs-[1em] mlb-1' />}
-            <span className='flex-1 is-0 truncate text-start text-sm font-normal'>{toLocalizedString(label, t)}</span>
+            <span className='flex-1 is-0 truncate text-start text-sm font-normal' data-tooltip>
+              {toLocalizedString(label, t)}
+            </span>
           </Button>
         </TextTooltip>
       );

package/src/components/Tree/helpers.ts

@@ -2,24 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type ItemMode } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-
-import { type ItemType } from './types';
-
 export const DEFAULT_INDENTATION = 8;
 
 export const paddingIndendation = (level: number, indentation = DEFAULT_INDENTATION) => ({
   paddingInlineStart: `${(level - 1) * indentation}px`,
 });
-
-export const getMode = (items: ItemType[], index: number): ItemMode => {
-  const item = items[index];
-  const next = items[index + 1];
-  if (!next || item.path.length > next.path.length) {
-    return 'last-in-group';
-  } else if (item.path.length < next.path.length) {
-    return 'expanded';
-  } else {
-    return 'standard';
-  }
-};

package/src/components/Tree/index.ts

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

package/src/components/Tree/testing.ts

@@ -7,9 +7,8 @@ import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-
 import { S } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
-import { Path } from '@dxos/react-ui-mosaic';
 
-import { type ItemType } from './types';
+import { type TreeData } from './TreeItem';
 
 export type TestItem = {
   id: string;
@@ -40,69 +39,7 @@ export const createTree = (n = 4, d = 4): TestItem => ({
   items: d > 0 ? faker.helpers.multiple(() => createTree(n, d - 1), { count: n }) : [],
 });
 
-function* visitor({
-  testItem,
-  getItem,
-  isOpen,
-}: {
-  testItem: TestItem;
-  getItem: (testItem: TestItem, parent?: readonly string[]) => ItemType;
-  isOpen?: (testItem: ItemType) => boolean;
-}): Generator<ItemType> {
-  const stack: [TestItem, ItemType][] = [[testItem, getItem(testItem)]];
-  while (stack.length > 0) {
-    const [testItem, item] = stack.pop()!;
-    if (item.path.length > 1) {
-      yield item;
-    }
-
-    const children = Array.from(testItem.items ?? []);
-    if (item.path.length === 1 || isOpen?.(item)) {
-      for (let i = children.length - 1; i >= 0; i--) {
-        const child = children[i];
-        stack.push([child, getItem(child, item.path)]);
-      }
-    }
-  }
-}
-
-export const flattenTree = (tree: TestItem, open: string[], getItem: (tree: TestItem) => ItemType): ItemType[] => {
-  return Array.from(
-    visitor({
-      testItem: tree,
-      getItem,
-      isOpen: ({ path }) => open.includes(Path.create(...path)),
-    }),
-  );
-};
-
-// Ensures that the same item is not created multiple times, causing the tree to be re-rendered.
-const itemsCache: Record<string, ItemType> = {};
-
-export const getItem = (testItem: TestItem, parent?: string[]): ItemType => {
-  const cachedItem = itemsCache[testItem.id];
-  if (cachedItem) {
-    return cachedItem;
-  }
-
-  const item = {
-    id: testItem.id,
-    label: testItem.name,
-    icon: testItem.icon,
-    path: parent ? [...parent, testItem.id] : [testItem.id],
-    ...((testItem.items?.length ?? 0) > 0 && {
-      parentOf: testItem.items!.map(({ id }) => id),
-    }),
-  };
-  itemsCache[testItem.id] = item;
-  return item;
-};
-
-export const invalidateCache = (id: string) => {
-  delete itemsCache[id];
-};
-
-const removeItem = (tree: TestItem, source: ItemType) => {
+const removeItem = (tree: TestItem, source: TreeData) => {
   const parent = getTestItem(tree, source.path.slice(1, -1));
   const index = parent.items!.findIndex(({ id }) => id === source.id);
   const item = parent.items[index];
@@ -127,35 +64,29 @@ export const updateState = ({
 }: {
   state: TestItem;
   instruction: Instruction;
-  source: ItemType;
-  target: ItemType;
+  source: TreeData;
+  target: TreeData;
 }) => {
   switch (instruction.type) {
     case 'reorder-above': {
-      invalidateCache(source.id);
       const item = removeItem(state, source);
       const parent = getTestItem(state, target.path.slice(1, -1));
       const index = parent.items!.findIndex(({ id }) => id === target.id);
-      invalidateCache(target.id);
       parent.items!.splice(index, 0, item);
       break;
     }
 
     case 'reorder-below': {
-      invalidateCache(source.id);
       const item = removeItem(state, source);
       const parent = getTestItem(state, target.path.slice(1, -1));
       const index = parent.items!.findIndex(({ id }) => id === target.id);
-      invalidateCache(target.id);
       parent.items!.splice(index + 1, 0, item);
       break;
     }
 
     case 'make-child': {
-      invalidateCache(source.id);
       const item = removeItem(state, source);
       const parent = getTestItem(state, target.path.slice(1));
-      invalidateCache(target.id);
       parent.items!.push(item);
       break;
     }

package/dist/types/src/components/Tree/types.d.ts

@@ -1,18 +0,0 @@
-import { S } from '@dxos/echo-schema';
-export declare const ItemSchema: S.mutable<S.Struct<{
-    id: typeof S.String;
-    label: S.mutable<S.Union<[typeof S.String, S.Tuple<[typeof S.String, S.Struct<{
-        ns: typeof S.String;
-        count: S.optional<typeof S.Number>;
-    }>]>]>>;
-    icon: S.optional<typeof S.String>;
-    disabled: S.optional<typeof S.Boolean>;
-    className: S.optional<typeof S.String>;
-    headingClassName: S.optional<typeof S.String>;
-    testId: S.optional<typeof S.String>;
-    path: S.Array$<typeof S.String>;
-    parentOf: S.optional<S.Array$<typeof S.String>>;
-}>>;
-export type ItemType = S.Schema.Type<typeof ItemSchema>;
-export declare const isItem: (item: unknown) => boolean;
-//# sourceMappingURL=types.d.ts.map

package/dist/types/src/components/Tree/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAatC,eAAO,MAAM,UAAU;;;;;;;;;;;;;GAYtB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,UAAU,CAAC,CAAC;AAExD,eAAO,MAAM,MAAM,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,OAA0B,CAAC"}

package/src/components/Tree/types.ts

@@ -1,34 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { S } from '@dxos/echo-schema';
-
-const LabelSchema = S.Union(
-  S.String,
-  S.Tuple(
-    S.String,
-    S.Struct({
-      ns: S.String,
-      count: S.optional(S.Number),
-    }),
-  ),
-);
-
-export const ItemSchema = S.mutable(
-  S.Struct({
-    id: S.String,
-    label: S.mutable(LabelSchema),
-    icon: S.optional(S.String),
-    disabled: S.optional(S.Boolean),
-    className: S.optional(S.String),
-    headingClassName: S.optional(S.String),
-    testId: S.optional(S.String),
-    path: S.Array(S.String),
-    parentOf: S.optional(S.Array(S.String)),
-  }),
-);
-
-export type ItemType = S.Schema.Type<typeof ItemSchema>;
-
-export const isItem: (item: unknown) => boolean = S.is(ItemSchema);