@dxos/react-ui-list 0.8.4-main.84f28bd → 0.8.4-main.937b3ca

package/src/components/Tree/TreeItemToggle.tsx

@@ -4,30 +4,40 @@
 
 import React, { forwardRef, memo } from 'react';
 
-import { Button, Icon } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { IconButton, type IconButtonProps } from '@dxos/react-ui';
 
-export type TreeItemToggleProps = {
+export type TreeItemToggleProps = Omit<IconButtonProps, 'icon' | 'size' | 'label'> & {
   open?: boolean;
   isBranch?: boolean;
-  onToggle?: () => void;
   hidden?: boolean;
 };
 
 export const TreeItemToggle = memo(
-  forwardRef<HTMLButtonElement, TreeItemToggleProps>(({ open, isBranch, hidden, onToggle }, forwardedRef) => {
-    return (
-      <Button
-        ref={forwardedRef}
-        data-testid='treeItem.toggle'
-        aria-expanded={open}
-        variant='ghost'
-        density='fine'
-        classNames={mx('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')} />
-      </Button>
-    );
-  }),
+  forwardRef<HTMLButtonElement, TreeItemToggleProps>(
+    ({ open, isBranch, hidden, classNames, ...props }, forwardedRef) => {
+      return (
+        <IconButton
+          ref={forwardedRef}
+          data-testid='treeItem.toggle'
+          aria-expanded={open}
+          variant='ghost'
+          density='fine'
+          classNames={[
+            'bs-full is-6 pli-0',
+            '[&_svg]:transition-[transform] [&_svg]:duration-200',
+            open && '[&_svg]:rotate-90',
+            hidden ? 'hidden' : !isBranch && 'invisible',
+            classNames,
+          ]}
+          size={3}
+          icon='ph--caret-right--bold'
+          iconOnly
+          noTooltip
+          label={open ? 'Click to close' : 'Click to open'}
+          tabIndex={-1}
+          {...props}
+        />
+      );
+    },
+  ),
 );

package/src/components/Tree/testing.ts

@@ -3,22 +3,23 @@
 //
 
 import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
-import { type HasId, ObjectId } from '@dxos/echo-schema';
+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))),