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

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

@@ -1,8 +1,5 @@
-import { type ItemMode } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import { type ItemType } from './types';
 export declare const DEFAULT_INDENTATION = 8;
 export declare const paddingIndendation: (level: number, indentation?: number) => {
     paddingInlineStart: string;
 };
-export declare const getMode: (items: ItemType[], index: number) => ItemMode;
 //# sourceMappingURL=helpers.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/helpers.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,oDAAoD,CAAC;AAEnF,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AAErC,eAAO,MAAM,kBAAkB,UAAW,MAAM;;CAE9C,CAAC;AAEH,eAAO,MAAM,OAAO,UAAW,QAAQ,EAAE,SAAS,MAAM,KAAG,QAU1D,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/helpers.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,IAAI,CAAC;AAErC,eAAO,MAAM,kBAAkB,UAAW,MAAM;;CAE9C,CAAC"}

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

@@ -1,4 +1,4 @@
 export * from './Tree';
+export * from './TreeContext';
 export * from './TreeItem';
-export * from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC"}

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

@@ -1,6 +1,6 @@
 import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 import { S } from '@dxos/echo-schema';
-import { type ItemType } from './types';
+import { type TreeData } from './TreeItem';
 export type TestItem = {
     id: string;
     name: string;
@@ -14,13 +14,10 @@ export declare const TestItemSchema: S.Struct<{
     items: S.mutable<S.Array$<S.suspend<TestItem, TestItem, never>>>;
 }>;
 export declare const createTree: (n?: number, d?: number) => TestItem;
-export declare const flattenTree: (tree: TestItem, open: string[], getItem: (tree: TestItem) => ItemType) => ItemType[];
-export declare const getItem: (testItem: TestItem, parent?: string[]) => ItemType;
-export declare const invalidateCache: (id: string) => void;
 export declare const updateState: ({ state, instruction, source, target, }: {
     state: TestItem;
     instruction: Instruction;
-    source: ItemType;
-    target: ItemType;
+    source: TreeData;
+    target: TreeData;
 }) => void;
 //# sourceMappingURL=testing.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/testing.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,oDAAoD,CAAC;AAEtF,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAKtC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;EAKzB,CAAC;AAEH,eAAO,MAAM,UAAU,8BAAmB,QAaxC,CAAC;AA4BH,eAAO,MAAM,WAAW,SAAU,QAAQ,QAAQ,MAAM,EAAE,WAAW,CAAC,IAAI,EAAE,QAAQ,KAAK,QAAQ,KAAG,QAAQ,EAQ3G,CAAC;AAKF,eAAO,MAAM,OAAO,aAAc,QAAQ,WAAW,MAAM,EAAE,KAAG,QAiB/D,CAAC;AAEF,eAAO,MAAM,eAAe,OAAQ,MAAM,SAEzC,CAAC;AAmBF,eAAO,MAAM,WAAW,4CAKrB;IACD,KAAK,EAAE,QAAQ,CAAC;IAChB,WAAW,EAAE,WAAW,CAAC;IACzB,MAAM,EAAE,QAAQ,CAAC;IACjB,MAAM,EAAE,QAAQ,CAAC;CAClB,SAsCA,CAAC"}
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/testing.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,oDAAoD,CAAC;AAEtF,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAItC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;EAKzB,CAAC;AAEH,eAAO,MAAM,UAAU,8BAAmB,QAaxC,CAAC;AAmBH,eAAO,MAAM,WAAW,4CAKrB;IACD,KAAK,EAAE,QAAQ,CAAC;IAChB,WAAW,EAAE,WAAW,CAAC;IACzB,MAAM,EAAE,QAAQ,CAAC;IACjB,MAAM,EAAE,QAAQ,CAAC;CAClB,SAgCA,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.7.1",
+  "version": "0.7.2-main.f1adc9f",
   "description": "A list component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -23,21 +23,19 @@
   ],
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
-    "@atlaskit/pragmatic-drag-and-drop-flourish": "^1.1.2",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.3",
     "@preact/signals-core": "^1.6.0",
     "@radix-ui/react-context": "^1.0.0",
     "effect": "^3.9.2",
-    "@dxos/debug": "0.7.1",
-    "@dxos/invariant": "0.7.1",
-    "@dxos/log": "0.7.1",
-    "@dxos/react-ui-attention": "0.7.1",
-    "@dxos/react-ui-text-tooltip": "0.7.1",
-    "@dxos/react-ui-mosaic": "0.7.1",
-    "@dxos/echo-schema": "0.7.1",
-    "@dxos/react-ui-types": "0.7.1",
-    "@dxos/util": "0.7.1"
+    "@dxos/debug": "0.7.2-main.f1adc9f",
+    "@dxos/echo-schema": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-attention": "0.7.2-main.f1adc9f",
+    "@dxos/log": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-mosaic": "0.7.2-main.f1adc9f",
+    "@dxos/invariant": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-types": "0.7.2-main.f1adc9f",
+    "@dxos/util": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-text-tooltip": "0.7.2-main.f1adc9f"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -46,18 +44,18 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.7.1",
-    "@dxos/react-ui": "0.7.1",
-    "@dxos/react-ui-theme": "0.7.1",
-    "@dxos/storybook-utils": "0.7.1"
+    "@dxos/random": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-theme": "0.7.2-main.f1adc9f",
+    "@dxos/storybook-utils": "0.7.2-main.f1adc9f"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "effect": "^3.9.2",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.7.1",
-    "@dxos/react-ui": "0.7.1"
+    "@dxos/react-ui": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-theme": "0.7.2-main.f1adc9f"
   },
   "publishConfig": {
     "access": "public"

package/src/components/List/DropIndicator.tsx

@@ -32,11 +32,16 @@ const strokeSize = 2;
 const terminalSize = 8;
 const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
 
+export type DropIndicatorProps = {
+  edge: Edge;
+  gap?: number;
+};
+
 /**
  * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`
  */
-export const DropIndicator = ({ edge, gap = '0px' }: { edge: Edge; gap?: string }) => {
-  const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize}px))`;
+export const DropIndicator = ({ edge, gap = 0 }: DropIndicatorProps) => {
+  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
 
   const orientation = edgeToOrientationMap[edge];
 

package/src/components/Tree/DropIndicator.tsx

@@ -10,10 +10,6 @@ import { mx } from '@dxos/react-ui-theme';
 // Tree item hitbox
 // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx#tree-item
 
-export type DropIndicatorProps = {
-  instruction: Instruction;
-};
-
 type InstructionType = Exclude<Instruction, { type: 'instruction-blocked' }>['type'];
 type Orientation = 'sibling' | 'child';
 
@@ -42,14 +38,17 @@ const instructionStyles: Record<InstructionType, HTMLAttributes<HTMLElement>['cl
 const strokeSize = 2;
 const terminalSize = 8;
 const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-const gap = '0px';
 
-export const DropIndicator = ({ instruction }: DropIndicatorProps) => {
-  const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize}px))`;
+export type DropIndicatorProps = {
+  instruction: Instruction;
+  gap?: number;
+};
+
+export const DropIndicator = ({ instruction, gap = 0 }: DropIndicatorProps) => {
+  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
   const isBlocked = instruction.type === 'instruction-blocked';
   const desiredInstruction = isBlocked ? instruction.desired : instruction;
   const orientation = edgeToOrientationMap[desiredInstruction.type];
-
   if (isBlocked) {
     return null;
   }

package/src/components/Tree/Tree.stories.tsx

@@ -9,71 +9,83 @@ import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-a
 import { type StoryObj, type Meta } from '@storybook/react';
 import React, { useEffect } from 'react';
 
-import { create } from '@dxos/echo-schema';
+import { create, type ReactiveObject } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
 import { Icon } from '@dxos/react-ui';
 import { Path } from '@dxos/react-ui-mosaic';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { Tree, type TreeProps } from './Tree';
-import { createTree, flattenTree, getItem, updateState, type TestItem } from './testing';
-import { isItem, type ItemType } from './types';
+import { Tree } from './Tree';
+import { type TreeData } from './TreeItem';
+import { createTree, updateState, type TestItem } from './testing';
 
 faker.seed(1234);
 
-type State = {
-  tree: TestItem;
-  open: string[];
-  current: string[];
-  flatTree: ItemType[];
-};
-
-const state = create<State>({
-  tree: createTree(),
-  open: [],
-  current: [],
-  get flatTree() {
-    return flattenTree(this.tree, this.open, getItem);
-  },
-});
-
-const Story = (args: Partial<TreeProps>) => {
-  // NOTE: If passed directly to args, this won't be reactive.
-  const items = state.flatTree;
-
-  useEffect(() => {
-    return monitorForElements({
-      canMonitor: ({ source }) => isItem(source.data),
-      onDrop: ({ location, source }) => {
-        // Didn't drop on anything.
-        if (!location.current.dropTargets.length) {
-          return;
-        }
-
-        const target = location.current.dropTargets[0];
-
-        const instruction: Instruction | null = extractInstruction(target.data);
-        if (instruction !== null) {
-          updateState({
-            state: state.tree,
-            instruction,
-            source: source.data as ItemType,
-            target: target.data as ItemType,
-          });
-        }
-      },
-    });
-  }, []);
-
-  return <Tree items={items} open={state.open} current={state.current} {...args} />;
-};
+const tree = create<TestItem>(createTree());
+const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }>>();
 
 const meta: Meta<typeof Tree> = {
   title: 'ui/react-ui-list/Tree',
   component: Tree,
-  render: Story,
   decorators: [withTheme, withLayout({ tooltips: true })],
+  render: (args) => {
+    useEffect(() => {
+      return monitorForElements({
+        canMonitor: ({ source }) => typeof source.data.id === 'string' && Array.isArray(source.data.path),
+        onDrop: ({ location, source }) => {
+          // Didn't drop on anything.
+          if (!location.current.dropTargets.length) {
+            return;
+          }
+
+          const target = location.current.dropTargets[0];
+
+          const instruction: Instruction | null = extractInstruction(target.data);
+          if (instruction !== null) {
+            updateState({
+              state: tree,
+              instruction,
+              source: source.data as TreeData,
+              target: target.data as TreeData,
+            });
+          }
+        },
+      });
+    }, []);
+
+    return <Tree {...args} />;
+  },
   args: {
+    id: tree.id,
+    getItems: (testItem?: TestItem) => {
+      return testItem?.items ?? tree.items;
+    },
+    getProps: (testItem: TestItem) => ({
+      id: testItem.id,
+      label: testItem.name,
+      icon: testItem.icon,
+      ...((testItem.items?.length ?? 0) > 0 && {
+        parentOf: testItem.items!.map(({ id }) => id),
+      }),
+    }),
+    isOpen: (_path: string[]) => {
+      const path = Path.create(..._path);
+      const object = state.get(path) ?? create({ open: false, current: false });
+      if (!state.has(path)) {
+        state.set(path, object);
+      }
+
+      return object.open;
+    },
+    isCurrent: (_path: string[]) => {
+      const path = Path.create(..._path);
+      const object = state.get(path) ?? create({ open: false, current: false });
+      if (!state.has(path)) {
+        state.set(path, object);
+      }
+
+      return object.current;
+    },
     renderColumns: () => {
       return (
         <div className='flex items-center'>
@@ -81,26 +93,15 @@ const meta: Meta<typeof Tree> = {
         </div>
       );
     },
-    onOpenChange: (item: ItemType, open: boolean) => {
-      const path = Path.create(...item.path);
-      if (open) {
-        state.open.push(path);
-      } else {
-        const index = state.open.indexOf(path);
-        if (index > -1) {
-          state.open.splice(index, 1);
-        }
-      }
+    onOpenChange: ({ path: _path, open }) => {
+      const path = Path.create(..._path);
+      const object = state.get(path);
+      object!.open = open;
     },
-    onSelect: (item: ItemType, current: boolean) => {
-      if (current) {
-        state.current.push(item.id);
-      } else {
-        const index = state.current.indexOf(item.id);
-        if (index > -1) {
-          state.current.splice(index, 1);
-        }
-      }
+    onSelect: ({ path: _path, current }) => {
+      const path = Path.create(..._path);
+      const object = state.get(path);
+      object!.current = current;
     },
   },
 };

package/src/components/Tree/Tree.tsx

@@ -2,26 +2,23 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { Treegrid, type TreegridRootProps } from '@dxos/react-ui';
-import { Path } from '@dxos/react-ui-mosaic';
 
+import { type TreeContextType, TreeProvider } from './TreeContext';
 import { TreeItem, type TreeItemProps } from './TreeItem';
-import { getMode } from './helpers';
-import { type ItemType } from './types';
 
-export type TreeProps<T extends ItemType = ItemType> = {
-  items: T[];
-  open: string[];
-  current: string[];
-} & Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &
+export type TreeProps<T = any> = { id: string } & TreeContextType &
+  Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &
   Pick<TreeItemProps<T>, 'draggable' | 'renderColumns' | 'canDrop' | 'onOpenChange' | 'onSelect'>;
 
-export const Tree = <T extends ItemType = ItemType>({
-  items,
-  open,
-  current,
+export const Tree = <T = any,>({
+  id,
+  getItems,
+  getProps,
+  isOpen,
+  isCurrent,
   draggable = false,
   gridTemplateColumns = '[tree-row-start] 1fr min-content [tree-row-end]',
   classNames,
@@ -30,27 +27,35 @@ export const Tree = <T extends ItemType = ItemType>({
   onOpenChange,
   onSelect,
 }: TreeProps<T>) => {
+  const context = useMemo(
+    () => ({
+      getItems,
+      getProps,
+      isOpen,
+      isCurrent,
+    }),
+    [getItems, getProps, isOpen, isCurrent],
+  );
+  const items = getItems();
+  const path = useMemo(() => [id], [id]);
+
   return (
     <Treegrid.Root gridTemplateColumns={gridTemplateColumns} classNames={classNames}>
-      {items.map((item, i) => {
-        const path = Path.create(...item.path);
-
-        return (
-          <TreeItem<T>
+      <TreeProvider value={context}>
+        {items.map((item, index) => (
+          <TreeItem
             key={item.id}
             item={item}
-            mode={getMode(items, i)}
-            open={open.includes(path)}
-            // TODO(wittjosiah): This should also be path-based.
-            current={current.includes(item.id)}
+            last={index === items.length - 1}
+            path={path}
             draggable={draggable}
             renderColumns={renderColumns}
             canDrop={canDrop}
             onOpenChange={onOpenChange}
             onSelect={onSelect}
           />
-        );
-      })}
+        ))}
+      </TreeProvider>
     </Treegrid.Root>
   );
 };

package/src/components/Tree/TreeContext.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { createContext, useContext } from 'react';
+
+import { raise } from '@dxos/debug';
+import { type Label } from '@dxos/react-ui';
+
+export type PropsFromTreeItem = {
+  id: string;
+  label: Label;
+  parentOf?: string[];
+  icon?: string;
+  disabled?: boolean;
+  className?: string;
+  headingClassName?: string;
+  testId?: string;
+};
+
+export type TreeContextType<T = any> = {
+  getItems: (parent?: T) => T[];
+  getProps: (item: T, parent: string[]) => PropsFromTreeItem;
+  isOpen: (path: string[], item: T) => boolean;
+  isCurrent: (path: string[], item: T) => boolean;
+};
+
+const TreeContext = createContext<null | TreeContextType>(null);
+
+export const useTree = () => useContext(TreeContext) ?? raise(new Error('TreeContext not found'));
+
+export const TreeProvider = TreeContext.Provider;