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

package/src/components/Tree/TreeItem.tsx

@@ -5,35 +5,35 @@
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import {
-  attachInstruction,
-  extractInstruction,
   type Instruction,
   type ItemMode,
+  attachInstruction,
+  extractInstruction,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import { Schema } from 'effect';
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState, type FC, type KeyboardEvent } from 'react';
+import * as Schema from 'effect/Schema';
+import React, { type FC, type KeyboardEvent, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { type HasId } from '@dxos/echo-schema';
+import { type HasId } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
-import { Treegrid, TreeItem as NaturalTreeItem } from '@dxos/react-ui';
+import { TreeItem as NaturalTreeItem, Treegrid } from '@dxos/react-ui';
 import {
+  ghostFocusWithin,
   ghostHover,
   hoverableControls,
   hoverableFocusedKeyboardControls,
   hoverableFocusedWithinControls,
-  mx,
 } from '@dxos/react-ui-theme';
 
+import { DEFAULT_INDENTATION, paddingIndentation } from './helpers';
 import { useTree } from './TreeContext';
 import { TreeItemHeading } from './TreeItemHeading';
 import { TreeItemToggle } from './TreeItemToggle';
-import { DEFAULT_INDENTATION, paddingIndentation } from './helpers';
-
-type TreeItemState = 'idle' | 'dragging' | 'preview' | 'parent-of-instruction';
 
 const hoverableDescriptionIcons =
   '[--icons-color:inherit] hover-hover:[--icons-color:var(--description-text)] hover-hover:hover:[--icons-color:inherit] focus-within:[--icons-color:inherit]';
 
+type TreeItemState = 'idle' | 'dragging' | 'preview' | 'parent-of-instruction';
+
 export const TreeDataSchema = Schema.Struct({
   id: Schema.String,
   path: Schema.Array(Schema.String),
@@ -41,23 +41,25 @@ 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;
+  canSelect?: (params: { item: T; path: string[] }) => boolean;
   onOpenChange?: (params: { item: T; path: string[]; open: boolean }) => void;
   onSelect?: (params: { item: T; path: string[]; current: boolean; option: boolean }) => void;
 };
@@ -65,13 +67,14 @@ export type TreeItemProps<T extends HasId = any> = {
 const RawTreeItem = <T extends HasId = any>({
   item,
   path: _path,
+  levelOffset = 2,
   last,
   draggable: _draggable,
   renderColumns: Columns,
   canDrop,
+  canSelect,
   onOpenChange,
   onSelect,
-  levelOffset = 2,
 }: TreeItemProps<T>) => {
   const rowRef = useRef<HTMLDivElement | null>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
@@ -83,13 +86,14 @@ const RawTreeItem = <T extends HasId = any>({
 
   const { useItems, getProps, isOpen, isCurrent } = useTree();
   const items = useItems(item);
-  const { id, label, parentOf, icon, disabled, className, headingClassName, testId } = getProps(item, _path);
+  const { id, parentOf, label, className, headingClassName, icon, iconHue, disabled, testId } = getProps(item, _path);
   const path = useMemo(() => [..._path, id], [_path, id]);
   const open = isOpen(path, item);
   const current = isCurrent(path, item);
   const level = path.length - levelOffset;
   const isBranch = !!parentOf;
   const mode: ItemMode = last ? 'last-in-group' : open ? 'expanded' : 'standard';
+  const canSelectItem = canSelect?.({ item, path }) ?? true;
 
   const cancelExpand = useCallback(() => {
     if (cancelExpandRef.current) {
@@ -181,38 +185,37 @@ const RawTreeItem = <T extends HasId = any>({
   // Cancel expand on unmount.
   useEffect(() => () => cancelExpand(), [cancelExpand]);
 
-  const handleOpenChange = useCallback(
+  const handleOpenToggle = useCallback(
     () => onOpenChange?.({ item, path, open: !open }),
     [onOpenChange, item, path, open],
   );
 
   const handleSelect = useCallback(
     (option = false) => {
-      if (isBranch) {
-        handleOpenChange();
-      } else {
+      // If the item is a branch, toggle it if:
+      //   - also holding down the option key
+      //   - or the item is currently selected
+      if (isBranch && (option || current)) {
+        handleOpenToggle();
+      } else if (canSelectItem) {
+        canSelect?.({ item, path });
         rowRef.current?.focus();
         onSelect?.({ item, path, current: !current, option });
       }
     },
-    [item, path, current, isBranch, handleOpenChange, onSelect],
+    [item, path, current, isBranch, canSelectItem, handleOpenToggle, onSelect],
   );
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
       switch (event.key) {
         case 'ArrowRight':
-          isBranch && !open && handleOpenChange();
-          break;
         case 'ArrowLeft':
-          isBranch && open && handleOpenChange();
-          break;
-        case ' ':
-          handleSelect(event.altKey);
+          isBranch && handleOpenToggle();
           break;
       }
     },
-    [isBranch, open, handleOpenChange, handleSelect],
+    [isBranch, open, handleOpenToggle, handleSelect],
   );
 
   return (
@@ -223,15 +226,16 @@ 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,
           hoverableFocusedWithinControls,
           hoverableDescriptionIcons,
           ghostHover,
+          ghostFocusWithin,
           className,
-        )}
+        ]}
         data-itemid={id}
         data-testid={testId}
         // NOTE(thure): This is intentionally an empty string to for descendents to select by in the CSS
@@ -244,26 +248,27 @@ const RawTreeItem = <T extends HasId = any>({
           setMenuOpen(true);
         }}
       >
-        <Treegrid.Cell
-          indent
-          classNames='relative grid grid-cols-subgrid col-[tree-row]'
+        <div
+          role='none'
+          className='indent relative grid grid-cols-subgrid col-[tree-row]'
           style={paddingIndentation(level)}
         >
-          <div role='none' className='flex items-center'>
-            <TreeItemToggle isBranch={isBranch} open={open} onToggle={handleOpenChange} />
+          <Treegrid.Cell classNames='flex items-center'>
+            <TreeItemToggle isBranch={isBranch} open={open} onClick={handleOpenToggle} />
             <TreeItemHeading
-              ref={buttonRef}
-              label={label}
-              icon={icon}
-              className={headingClassName}
               disabled={disabled}
               current={current}
+              label={label}
+              className={headingClassName}
+              icon={icon}
+              iconHue={iconHue}
               onSelect={handleSelect}
+              ref={buttonRef}
             />
-          </div>
+          </Treegrid.Cell>
           {Columns && <Columns item={item} path={path} open={open} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />}
           {instruction && <NaturalTreeItem.DropIndicator instruction={instruction} gap={2} />}
-        </Treegrid.Cell>
+        </div>
       </Treegrid.Row>
       {open &&
         items.map((item, index) => (
@@ -275,6 +280,7 @@ const RawTreeItem = <T extends HasId = any>({
             draggable={_draggable}
             renderColumns={Columns}
             canDrop={canDrop}
+            canSelect={canSelect}
             onOpenChange={onOpenChange}
             onSelect={onSelect}
           />

package/src/components/Tree/TreeItemHeading.tsx

@@ -4,25 +4,27 @@
 
 import React, { type KeyboardEvent, type MouseEvent, forwardRef, memo, useCallback } from 'react';
 
-import { Button, Icon, toLocalizedString, useTranslation, type Label } from '@dxos/react-ui';
+import { Button, Icon, type Label, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
-import { mx } from '@dxos/react-ui-theme';
+import { getStyles } 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.
-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) => {
@@ -55,17 +57,17 @@ 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}
             {...(current && { 'aria-current': 'location' })}
           >
-            {icon && <Icon icon={icon ?? 'ph--placeholder--regular'} size={5} classNames='mlb-1' />}
+            {icon && <Icon icon={icon ?? 'ph--placeholder--regular'} size={5} classNames={['mlb-1', styles?.icon]} />}
             <span className='flex-1 is-0 truncate text-start text-sm font-normal' data-tooltip>
               {toLocalizedString(label, t)}
             </span>

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,9 +3,9 @@
 //
 
 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 { type HasId, ObjectId } from '@dxos/echo/internal';
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';