@dxos/react-ui-list 0.7.5-feature-compute.4d9d99a → 0.7.5-labs.35b4b42

package/src/components/Tree/TreeItem.tsx

@@ -16,7 +16,6 @@ import { S } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { Treegrid, TreeItem as NaturalTreeItem } from '@dxos/react-ui';
 import {
-  focusRing,
   ghostHover,
   hoverableControls,
   hoverableFocusedKeyboardControls,
@@ -27,7 +26,7 @@ import {
 import { useTree } from './TreeContext';
 import { TreeItemHeading } from './TreeItemHeading';
 import { TreeItemToggle } from './TreeItemToggle';
-import { DEFAULT_INDENTATION, paddingIndendation } from './helpers';
+import { DEFAULT_INDENTATION, paddingIndentation } from './helpers';
 
 type TreeItemState = 'idle' | 'dragging' | 'preview' | 'parent-of-instruction';
 
@@ -47,6 +46,7 @@ export const isTreeData = (data: unknown): data is TreeData => S.is(TreeDataSche
 export type TreeItemProps<T = any> = {
   item: T;
   path: string[];
+  levelOffset?: number;
   last: boolean;
   draggable?: boolean;
   renderColumns?: FC<{
@@ -70,6 +70,7 @@ export const RawTreeItem = <T = any,>({
   canDrop,
   onOpenChange,
   onSelect,
+  levelOffset = 2,
 }: TreeItemProps<T>) => {
   const { getItems, getProps, isOpen, isCurrent } = useTree();
   const items = getItems(item);
@@ -77,7 +78,7 @@ export const RawTreeItem = <T = any,>({
   const path = useMemo(() => [..._path, id], [_path, id]);
   const open = isOpen(path, item);
   const current = isCurrent(path, item);
-  const level = path.length - 2;
+  const level = path.length - levelOffset;
   const isBranch = !!parentOf;
   const mode: ItemMode = last ? 'last-in-group' : open ? 'expanded' : 'standard';
   const data = useMemo(() => ({ id, path, item }) satisfies TreeData, [id, path, item]);
@@ -217,13 +218,12 @@ export const RawTreeItem = <T = any,>({
         aria-labelledby={`${id}__label`}
         parentOf={parentOf?.join(Treegrid.PARENT_OF_SEPARATOR)}
         classNames={mx(
-          'grid grid-cols-subgrid col-[tree-row] mt-[2px] aria-[current]:bg-input',
+          'grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-input',
           hoverableControls,
           hoverableFocusedKeyboardControls,
           hoverableFocusedWithinControls,
           hoverableDescriptionIcons,
           ghostHover,
-          focusRing,
           className,
         )}
         data-itemid={id}
@@ -241,7 +241,7 @@ export const RawTreeItem = <T = any,>({
         <Treegrid.Cell
           indent
           classNames='relative grid grid-cols-subgrid col-[tree-row]'
-          style={paddingIndendation(level)}
+          style={paddingIndentation(level)}
         >
           <div role='none' className='flex items-center'>
             <TreeItemToggle open={open} isBranch={isBranch} onToggle={handleOpenChange} />

package/src/components/Tree/TreeItemHeading.tsx

@@ -51,14 +51,13 @@ export const TreeItemHeading = memo(
           asChild
           ref={forwardedRef}
         >
-          {/* TODO(wittjosiah): Class precedence. See #8149. */}
           <Button
             data-testid='treeItem.heading'
             variant='ghost'
             density='fine'
             classNames={mx(
-              'grow gap-2 !pis-0.5 hover:!bg-transparent dark:hover:!bg-transparent',
-              'disabled:!cursor-default disabled:!opacity-100',
+              'grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent',
+              'disabled:cursor-default disabled:opacity-100',
               className,
             )}
             disabled={disabled}

package/src/components/Tree/TreeItemToggle.tsx

@@ -11,10 +11,11 @@ export type TreeItemToggleProps = {
   open?: boolean;
   isBranch?: boolean;
   onToggle?: () => void;
+  hidden?: boolean;
 };
 
 export const TreeItemToggle = memo(
-  forwardRef<HTMLButtonElement, TreeItemToggleProps>(({ open, isBranch, onToggle }, forwardedRef) => {
+  forwardRef<HTMLButtonElement, TreeItemToggleProps>(({ open, isBranch, hidden, onToggle }, forwardedRef) => {
     return (
       <Button
         ref={forwardedRef}
@@ -22,7 +23,7 @@ export const TreeItemToggle = memo(
         aria-expanded={open}
         variant='ghost'
         density='fine'
-        classNames={mx('is-6 !pli-1', !isBranch && 'invisible')}
+        classNames={mx('is-4 dx-focus-ring-inset pli-0', hidden ? 'hidden' : !isBranch && 'invisible')}
         onClick={onToggle}
       >
         <Icon

package/src/components/Tree/helpers.ts

@@ -4,6 +4,6 @@
 
 export const DEFAULT_INDENTATION = 8;
 
-export const paddingIndendation = (level: number, indentation = DEFAULT_INDENTATION) => ({
+export const paddingIndentation = (level: number, indentation = DEFAULT_INDENTATION) => ({
   paddingInlineStart: `${(level - 1) * indentation}px`,
 });