@dxos/react-ui-list 0.8.4-main.a4bbb77 → 0.8.4-main.abd8ff62ef

package/src/components/Tree/TreeItemHeading.tsx

@@ -6,22 +6,25 @@ import React, { type KeyboardEvent, type MouseEvent, forwardRef, memo, useCallba
 
 import { Button, Icon, type Label, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
+import { getStyles } from '@dxos/ui-theme';
 
 // TODO(wittjosiah): Consider whether there should be a separate disabled prop which was visually distinct
 //   rather than just making the item unselectable.
-export type NavTreeItemHeadingProps = {
+export type TreeItemHeadingProps = {
   label: Label;
-  icon?: string;
   className?: string;
+  icon?: string;
+  iconHue?: string;
   disabled?: boolean;
   current?: boolean;
   onSelect?: (option: boolean) => void;
 };
 
 export const TreeItemHeading = memo(
-  forwardRef<HTMLButtonElement, NavTreeItemHeadingProps>(
-    ({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
+  forwardRef<HTMLButtonElement, TreeItemHeadingProps>(
+    ({ label, className, icon, iconHue, disabled, current, onSelect }, forwardedRef) => {
       const { t } = useTranslation();
+      const styles = iconHue ? getStyles(iconHue) : undefined;
 
       const handleSelect = useCallback(
         (event: MouseEvent) => {
@@ -53,9 +56,8 @@ export const TreeItemHeading = memo(
           <Button
             data-testid='treeItem.heading'
             variant='ghost'
-            density='fine'
             classNames={[
-              'grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent',
+              'grow gap-2 ps-0.5 hover:bg-transparent dark:hover:bg-transparent',
               'disabled:cursor-default disabled:opacity-100',
               className,
             ]}
@@ -64,8 +66,8 @@ export const TreeItemHeading = memo(
             onKeyDown={handleButtonKeydown}
             {...(current && { 'aria-current': 'location' })}
           >
-            {icon && <Icon icon={icon ?? 'ph--placeholder--regular'} size={5} classNames='mlb-1' />}
-            <span className='flex-1 is-0 truncate text-start text-sm font-normal' data-tooltip>
+            {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>
           </Button>

package/src/components/Tree/TreeItemToggle.tsx

@@ -4,29 +4,40 @@
 
 import React, { forwardRef, memo } from 'react';
 
-import { Button, Icon } from '@dxos/react-ui';
+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={['is-6 pli-0 dx-focus-ring-inset', hidden ? 'hidden' : !isBranch && 'invisible']}
-        onClick={onToggle}
-      >
-        <Icon icon='ph--caret-right--bold' size={3} classNames={['transition duration-200', open && 'rotate-90']} />
-      </Button>
-    );
-  }),
+  forwardRef<HTMLButtonElement, TreeItemToggleProps>(
+    ({ classNames, open, isBranch, hidden, ...props }, forwardedRef) => {
+      return (
+        <IconButton
+          ref={forwardedRef}
+          data-testid='treeItem.toggle'
+          aria-expanded={open}
+          variant='ghost'
+          density='fine'
+          classNames={[
+            'h-full w-6 px-0',
+            '[&_svg]:transition-transform [&_svg]:duration-200',
+            open ? '[&_svg]:rotate-90' : '[&_svg]:rotate-0',
+            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/index.ts

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

package/src/components/Tree/testing.ts

@@ -3,40 +3,41 @@
 //
 
 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 { random } 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))),
 });
 
 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) => {

package/src/components/index.ts

@@ -3,5 +3,9 @@
 //
 
 export * from './Accordion';
+export * from './Combobox';
 export * from './List';
+export * from './Listbox';
+export * from './Picker';
+export * from './RowList';
 export * from './Tree';