@dxos/react-ui-list 0.8.3 → 0.8.4-main.2e9d522

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.8.3",
+  "version": "0.8.4-main.2e9d522",
   "description": "A list component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,35 +29,33 @@
     "@preact/signals-core": "^1.9.0",
     "@radix-ui/react-accordion": "1.2.3",
     "@radix-ui/react-context": "1.1.1",
-    "@dxos/debug": "0.8.3",
-    "@dxos/invariant": "0.8.3",
-    "@dxos/echo-schema": "0.8.3",
-    "@dxos/live-object": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/react-ui-text-tooltip": "0.8.3",
-    "@dxos/react-ui-types": "0.8.3",
-    "@dxos/util": "0.8.3"
+    "@dxos/debug": "0.8.4-main.2e9d522",
+    "@dxos/echo-schema": "0.8.4-main.2e9d522",
+    "@dxos/invariant": "0.8.4-main.2e9d522",
+    "@dxos/live-object": "0.8.4-main.2e9d522",
+    "@dxos/log": "0.8.4-main.2e9d522",
+    "@dxos/react-ui": "0.8.4-main.2e9d522",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.2e9d522",
+    "@dxos/react-ui-theme": "0.8.4-main.2e9d522",
+    "@dxos/react-ui-types": "0.8.4-main.2e9d522",
+    "@dxos/util": "0.8.4-main.2e9d522"
   },
   "devDependencies": {
-    "@phosphor-icons/react": "^2.1.5",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.14.21",
+    "effect": "3.17.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3"
+    "@dxos/random": "0.8.4-main.2e9d522",
+    "@dxos/storybook-utils": "0.8.4-main.2e9d522"
   },
   "peerDependencies": {
-    "@phosphor-icons/react": "^2.1.5",
-    "effect": "3.13.3",
+    "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/react-ui": "0.8.3"
+    "@dxos/react-ui-theme": "0.8.4-main.2e9d522",
+    "@dxos/react-ui": "0.8.4-main.2e9d522"
   },
   "publishConfig": {
     "access": "public"

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

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type StoryObj, type Meta } from '@storybook/react-vite';
 import React from 'react';
 
 import { faker } from '@dxos/random';

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

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
 import React from 'react';
 

package/src/components/List/ListItem.tsx

@@ -72,10 +72,11 @@ export const [ListItemProvider, useListItemContext] = createContext<ListItemCont
 );
 
 export type ListItemProps<T extends ListItemRecord> = ThemedClassName<
-  PropsWithChildren<{
-    item: T;
-  }> &
-    HTMLAttributes<HTMLDivElement>
+  PropsWithChildren<
+    {
+      item: T;
+    } & HTMLAttributes<HTMLDivElement>
+  >
 >;
 
 /**
@@ -86,6 +87,7 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
   const ref = useRef<HTMLDivElement | null>(null);
   const dragHandleRef = useRef<HTMLElement | null>(null);
   const [state, setState] = useState<ItemDragState>(idle);
+
   useEffect(() => {
     const element = ref.current;
     invariant(element);
@@ -142,6 +144,9 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
           const closestEdge = extractClosestEdge(self.data);
           setState({ type: 'is-dragging-over', closestEdge });
         },
+        onDragLeave: () => {
+          setState(idle);
+        },
         onDrag: ({ self }) => {
           const closestEdge = extractClosestEdge(self.data);
           setState((current) => {
@@ -151,9 +156,6 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
             return { type: 'is-dragging-over', closestEdge };
           });
         },
-        onDragLeave: () => {
-          setState(idle);
-        },
         onDrop: () => {
           setState(idle);
         },

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

@@ -6,7 +6,7 @@ import '@dxos-theme';
 
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect } from 'react';
 
 import { live, type Live } from '@dxos/live-object';

package/src/components/Tree/TreeItem.tsx

@@ -21,7 +21,6 @@ import {
   hoverableControls,
   hoverableFocusedKeyboardControls,
   hoverableFocusedWithinControls,
-  mx,
 } from '@dxos/react-ui-theme';
 
 import { useTree } from './TreeContext';
@@ -41,22 +40,23 @@ 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<{
+  item: T;
+  path: string[];
+  open: boolean;
+  menuOpen: boolean;
+  setMenuOpen: (open: boolean) => void;
+}>;
+
 export type TreeItemProps<T extends HasId = any> = {
   item: T;
   path: string[];
   levelOffset?: number;
   last: boolean;
   draggable?: boolean;
-  renderColumns?: FC<{
-    item: T;
-    path: string[];
-    open: boolean;
-    menuOpen: boolean;
-    setMenuOpen: (open: boolean) => void;
-  }>;
+  renderColumns?: ColumnRenderer<T>;
   canDrop?: (params: { 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;
@@ -223,7 +223,7 @@ const RawTreeItem = <T extends HasId = any>({
         id={id}
         aria-labelledby={`${id}__label`}
         parentOf={parentOf?.join(Treegrid.PARENT_OF_SEPARATOR)}
-        classNames={mx(
+        classNames={[
           'grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-activeSurface',
           hoverableControls,
           hoverableFocusedKeyboardControls,
@@ -231,7 +231,7 @@ const RawTreeItem = <T extends HasId = any>({
           hoverableDescriptionIcons,
           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

package/src/components/Tree/TreeItemHeading.tsx

@@ -6,7 +6,6 @@ import React, { type KeyboardEvent, type MouseEvent, forwardRef, memo, useCallba
 
 import { Button, Icon, toLocalizedString, useTranslation, type Label } from '@dxos/react-ui';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
-import { mx } from '@dxos/react-ui-theme';
 
 // TODO(wittjosiah): Consider whether there should be a separate disabled prop which was visually distinct
 //   rather than just making the item unselectable.
@@ -55,11 +54,11 @@ export const TreeItemHeading = memo(
             data-testid='treeItem.heading'
             variant='ghost'
             density='fine'
-            classNames={mx(
+            classNames={[
               'grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent',
               'disabled:cursor-default disabled:opacity-100',
               className,
-            )}
+            ]}
             disabled={disabled}
             onClick={handleSelect}
             onKeyDown={handleButtonKeydown}

package/src/components/Tree/TreeItemToggle.tsx

@@ -5,7 +5,6 @@
 import React, { forwardRef, memo } from 'react';
 
 import { Button, Icon } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
 
 export type TreeItemToggleProps = {
   open?: boolean;
@@ -23,10 +22,10 @@ export const TreeItemToggle = memo(
         aria-expanded={open}
         variant='ghost'
         density='fine'
-        classNames={mx('is-6 pli-0 dx-focus-ring-inset', hidden ? 'hidden' : !isBranch && 'invisible')}
+        classNames={['is-6 pli-0 dx-focus-ring-inset', hidden ? 'hidden' : !isBranch && 'invisible']}
         onClick={onToggle}
       >
-        <Icon icon='ph--caret-right--bold' size={3} classNames={mx('transition duration-200', open && 'rotate-90')} />
+        <Icon icon='ph--caret-right--bold' size={3} classNames={['transition duration-200', open && 'rotate-90']} />
       </Button>
     );
   }),