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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.8.4-main.d05673bc65",
+  "version": "0.8.4-main.e00bdcdb52",
   "description": "A list component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -20,9 +20,6 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
@@ -34,32 +31,32 @@
     "@radix-ui/react-accordion": "1.2.3",
     "@radix-ui/react-context": "1.1.1",
     "@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"
+    "@dxos/debug": "0.8.4-main.e00bdcdb52",
+    "@dxos/echo": "0.8.4-main.e00bdcdb52",
+    "@dxos/log": "0.8.4-main.e00bdcdb52",
+    "@dxos/invariant": "0.8.4-main.e00bdcdb52",
+    "@dxos/react-ui": "0.8.4-main.e00bdcdb52",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.e00bdcdb52",
+    "@dxos/util": "0.8.4-main.e00bdcdb52",
+    "@dxos/ui-theme": "0.8.4-main.e00bdcdb52",
+    "@dxos/ui-types": "0.8.4-main.e00bdcdb52"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.16",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/random": "0.8.4-main.d05673bc65",
-    "@dxos/storybook-utils": "0.8.4-main.d05673bc65"
+    "vite": "^8.0.10",
+    "@dxos/random": "0.8.4-main.e00bdcdb52",
+    "@dxos/storybook-utils": "0.8.4-main.e00bdcdb52"
   },
   "peerDependencies": {
-    "effect": "3.19.16",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.d05673bc65",
-    "@dxos/ui-theme": "0.8.4-main.d05673bc65"
+    "@dxos/ui-theme": "0.8.4-main.e00bdcdb52",
+    "@dxos/react-ui": "0.8.4-main.e00bdcdb52"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Accordion/Accordion.stories.tsx

@@ -5,19 +5,19 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { Accordion } from './Accordion';
 
-faker.seed(1);
+random.seed(1);
 
 type TestItem = { id: string; name: string; text: string };
 
 const items: TestItem[] = Array.from({ length: 10 }, (_, i) => ({
   id: i.toString(),
   name: `Item ${i}`,
-  text: faker.lorem.paragraphs(3),
+  text: random.lorem.paragraphs(3),
 }));
 
 const DefaultStory = () => {

package/src/components/Accordion/AccordionItem.tsx

@@ -10,7 +10,6 @@ import { Icon, type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
 import { type ListItemRecord } from '../List';
-
 import { useAccordionContext } from './AccordionRoot';
 
 const ACCORDION_ITEM_NAME = 'AccordionItem';

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

@@ -9,7 +9,7 @@ import React, { useContext, useMemo } from 'react';
 
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
-import { ghostHover, mx } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
 import { arrayMove } from '@dxos/util';
 
 import { List, type ListRootProps } from './List';
@@ -51,7 +51,7 @@ const DefaultStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
               <div className='flex items-center text-sm'>Items</div>
             </div>
 
-            <div role='list' className='w-full h-full overflow-auto'>
+            <div role='list' className='h-full w-full overflow-auto'>
               {items?.map((item) => (
                 <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid)}>
                   <List.ItemDragHandle />
@@ -89,7 +89,7 @@ const SimpleStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
   return (
     <List.Root<TestItemType> dragPreview items={items} {...props}>
       {({ items }) => (
-        <div role='list' className='w-full h-full overflow-auto'>
+        <div role='list' className='h-full w-full overflow-auto'>
           {items?.map((item) => (
             <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid)}>
               <List.ItemDragHandle />

package/src/components/List/List.tsx

@@ -15,17 +15,12 @@ import {
 } from './ListItem';
 import { ListRoot, type ListRootProps } from './ListRoot';
 
-// TODO(burdon): Multi-select model.
-// TODO(burdon): Key nav.
-// TODO(burdon): Animation.
-// TODO(burdon): Constrain axis.
-// TODO(burdon): Tree view.
-// TODO(burdon): Fix autoscroll while dragging.
-
 /**
  * Draggable list.
  * Ref: https://github.com/atlassian/pragmatic-drag-and-drop
  * Ref: https://github.com/alexreardon/pdnd-react-tailwind/blob/main/src/task.tsx
+ *
+ * @deprecated Use react-ui-mosaic.
  */
 export const List = {
   Root: ListRoot,

package/src/components/List/ListItem.tsx

@@ -2,22 +2,22 @@
 // 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 { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import {
   type Edge,
   attachClosestEdge,
   extractClosestEdge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { createContext } from '@radix-ui/react-context';
 import { Slot } from '@radix-ui/react-slot';
 import React, {
   type ComponentProps,
   type HTMLAttributes,
-  type MutableRefObject,
   type PropsWithChildren,
   type ReactNode,
+  RefObject,
   useEffect,
   useRef,
   useState,
@@ -47,22 +47,22 @@ export type ItemDragState =
       container: HTMLElement;
     }
   | {
-      type: 'w-dragging';
+      type: 'is-dragging';
     }
   | {
-      type: 'w-dragging-over';
+      type: 'is-dragging-over';
       closestEdge: Edge | null;
     };
 
 export const idle: ItemDragState = { type: 'idle' };
 
 const stateStyles: { [Key in ItemDragState['type']]?: HTMLAttributes<HTMLDivElement>['className'] } = {
-  'w-dragging': 'opacity-50',
+  'is-dragging': 'opacity-50',
 };
 
 type ListItemContext<T extends ListItemRecord> = {
   item: T;
-  dragHandleRef: MutableRefObject<HTMLElement | null>;
+  dragHandleRef: RefObject<HTMLButtonElement | null>;
 };
 
 /**
@@ -100,12 +100,12 @@ export const ListItem = <T extends ListItemRecord>({
 }: 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);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const dragHandleRef = useRef<HTMLButtonElement | null>(null);
   const [state, setState] = useState<ItemDragState>(idle);
 
   useEffect(() => {
-    const element = ref.current;
+    const element = rootRef.current;
     invariant(element);
     return combine(
       //
@@ -135,8 +135,8 @@ export const ListItem = <T extends ListItemRecord>({
             }
           : undefined,
         onDragStart: () => {
-          setState({ type: 'w-dragging' });
-          setRootState({ type: 'w-dragging', item });
+          setState({ type: 'is-dragging' });
+          setRootState({ type: 'is-dragging', item });
         },
         onDrop: () => {
           setState(idle);
@@ -158,7 +158,7 @@ export const ListItem = <T extends ListItemRecord>({
         getIsSticky: () => true,
         onDragEnter: ({ self }) => {
           const closestEdge = extractClosestEdge(self.data);
-          setState({ type: 'w-dragging-over', closestEdge });
+          setState({ type: 'is-dragging-over', closestEdge });
         },
         onDragLeave: () => {
           setState(idle);
@@ -166,10 +166,10 @@ export const ListItem = <T extends ListItemRecord>({
         onDrag: ({ self }) => {
           const closestEdge = extractClosestEdge(self.data);
           setState((current) => {
-            if (current.type === 'w-dragging-over' && current.closestEdge === closestEdge) {
+            if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {
               return current;
             }
-            return { type: 'w-dragging-over', closestEdge };
+            return { type: 'is-dragging-over', closestEdge };
           });
         },
         onDrop: () => {
@@ -182,15 +182,15 @@ export const ListItem = <T extends ListItemRecord>({
   return (
     <ListItemProvider item={item} dragHandleRef={dragHandleRef}>
       <Comp
-        ref={ref}
+        {...props}
         role='listitem'
         aria-selected={selected}
-        className={mx('relative dx-selected', classNames, stateStyles[state.type])}
-        {...props}
+        className={mx('relative p-1 dx-selected dx-hover', classNames, stateStyles[state.type])}
+        ref={rootRef}
       >
         {children}
       </Comp>
-      {state.type === 'w-dragging-over' && state.closestEdge && (
+      {state.type === 'is-dragging-over' && state.closestEdge && (
         <NaturalListItem.DropIndicator edge={state.closestEdge} />
       )}
     </ListItemProvider>
@@ -237,12 +237,12 @@ export const ListItemDeleteButton = ({
   const { t } = useTranslation(osTranslations);
   return (
     <IconButton
-      iconOnly
-      variant='ghost'
       {...props}
-      icon={icon}
+      variant='ghost'
       disabled={isDisabled}
-      label={label ?? t('delete label')}
+      icon={icon}
+      iconOnly
+      label={label ?? t('delete.label')}
       classNames={[classNames, autoHide && disabled && 'hidden']}
     />
   );
@@ -253,12 +253,12 @@ export const ListItemDragHandle = ({ disabled }: Pick<IconButtonProps, 'disabled
   const { t } = useTranslation(osTranslations);
   return (
     <IconButton
-      iconOnly
       variant='ghost'
-      label={t('drag handle label')}
-      ref={dragHandleRef as any}
-      icon='ph--dots-six-vertical--regular'
       disabled={disabled}
+      icon='ph--dots-six-vertical--regular'
+      iconOnly
+      label={t('drag-handle.label')}
+      ref={dragHandleRef}
     />
   );
 };
@@ -273,7 +273,9 @@ export const ListItemDragPreview = <T extends ListItemRecord>({
 };
 
 export const ListItemWrapper = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (
-  <div className={mx('flex w-full gap-2', classNames)}>{children}</div>
+  <div role='none' className={mx('flex w-full gap-2', classNames)}>
+    {children}
+  </div>
 );
 
 export const ListItemTitle = ({
@@ -281,7 +283,7 @@ export const ListItemTitle = ({
   children,
   ...props
 }: ThemedClassName<PropsWithChildren<ComponentProps<'div'>>>) => (
-  <div className={mx('flex grow items-center truncate', classNames)} {...props}>
+  <div role='none' className={mx('flex grow items-center truncate', classNames)} {...props}>
     {children}
   </div>
 );

package/src/components/List/ListRoot.tsx

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { getReorderDestinationIndex } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { createContext } from '@radix-ui/react-context';
 import React, { type ReactNode, useCallback, useEffect, useState } from 'react';
 

package/src/components/List/testing.ts

@@ -5,7 +5,7 @@
 import * as Schema from 'effect/Schema';
 
 import { Obj } from '@dxos/echo';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 export const TestItemSchema = Schema.Struct({
   id: Obj.ID,
@@ -21,10 +21,10 @@ export const TestList = Schema.Struct({
 export type TestList = Schema.Schema.Type<typeof TestList>;
 
 export const createList = (n = 10): TestList => ({
-  items: faker.helpers.multiple(
+  items: random.helpers.multiple(
     () => ({
-      id: faker.string.uuid(),
-      name: faker.commerce.productName(),
+      id: random.string.uuid(),
+      name: random.commerce.productName(),
     }),
     { count: n },
   ),

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

@@ -2,25 +2,24 @@
 // Copyright 2024 DXOS.org
 //
 
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { Atom, RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { Icon } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 
 import { Path } from '../../util';
-
 import { type TestItem, createTree, updateState } from './testing';
 import { Tree } from './Tree';
 import { type TreeModel } from './TreeContext';
 import { type TreeData } from './TreeItem';
 
-faker.seed(1234);
+random.seed(1234);
 
 const tree = createTree() as TestItem;
 
@@ -180,7 +179,7 @@ const DefaultStory = ({ draggable }: { draggable?: boolean }) => {
       draggable={draggable}
       renderColumns={() => (
         <div className='flex items-center'>
-          <Icon icon='ph--placeholder--regular' size={5} />
+          <Icon icon='ph--placeholder--regular' />
         </div>
       )}
       onOpenChange={handleOpenChange}

package/src/components/Tree/TreeItem.tsx

@@ -2,14 +2,14 @@
 // 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, {
@@ -25,7 +25,7 @@ import React, {
 } 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,
@@ -129,6 +129,7 @@ const RawTreeItem = <T extends { id: string } = any>({
   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) {
@@ -139,6 +140,7 @@ const RawTreeItem = <T extends { id: string } = any>({
 
   const isItemDraggable = draggableProp && itemDraggable !== false;
   const isItemDroppable = itemDroppable !== false;
+  const nativeDragText = id;
 
   useEffect(() => {
     if (!draggableProp) {
@@ -151,6 +153,12 @@ const RawTreeItem = <T extends { id: string } = any>({
       draggable({
         element: buttonRef.current!,
         getInitialData: () => data,
+        getInitialDataForExternal: () => {
+          if (!shouldSeedNativeDragData) {
+            return {};
+          }
+          return { 'text/plain': nativeDragText };
+        },
         onDragStart: () => {
           setState('dragging');
           if (open) {
@@ -297,7 +305,7 @@ const RawTreeItem = <T extends { id: string } = any>({
         key={id}
         id={id}
         aria-labelledby={`${id}__label`}
-        parentOf={parentOf?.join(Treegrid.PARENT_OF_SEPARATOR)}
+        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

package/src/components/Tree/TreeItemHeading.tsx

@@ -56,7 +56,6 @@ export const TreeItemHeading = memo(
           <Button
             data-testid='treeItem.heading'
             variant='ghost'
-            density='fine'
             classNames={[
               'grow gap-2 ps-0.5 hover:bg-transparent dark:hover:bg-transparent',
               'disabled:cursor-default disabled:opacity-100',
@@ -67,9 +66,7 @@ export const TreeItemHeading = memo(
             onKeyDown={handleButtonKeydown}
             {...(current && { 'aria-current': 'location' })}
           >
-            {icon && (
-              <Icon icon={icon ?? 'ph--placeholder--regular'} size={5} classNames={['my-1', styles?.surfaceText]} />
-            )}
+            {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>

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}
@@ -24,8 +24,8 @@ export const TreeItemToggle = memo(
           density='fine'
           classNames={[
             'h-full w-6 px-0',
-            '[&_svg]:transition-[transform] [&_svg]:duration-200',
-            open && '[&_svg]:rotate-90',
+            '[&_svg]:transition-transform [&_svg]:duration-200',
+            open ? '[&_svg]:rotate-90' : '[&_svg]:rotate-0',
             hidden ? 'hidden' : !isBranch && 'invisible',
             classNames,
           ]}

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) => {