@dxos/react-ui-list 0.7.5-main.2567c87 → 0.7.5-main.5ae2ba8

package/src/components/Tree/TreeItem.tsx

@@ -3,11 +3,7 @@
 //
 
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import {
-  draggable as pragmaticDraggable,
-  dropTargetForElements,
-} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-// https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import {
   attachInstruction,
   extractInstruction,
@@ -20,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,
@@ -31,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';
 
@@ -51,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<{
@@ -69,11 +65,12 @@ export const RawTreeItem = <T = any,>({
   item,
   path: _path,
   last,
-  draggable,
+  draggable: _draggable,
   renderColumns: Columns,
   canDrop,
   onOpenChange,
   onSelect,
+  levelOffset = 2,
 }: TreeItemProps<T>) => {
   const { getItems, getProps, isOpen, isCurrent } = useTree();
   const items = getItems(item);
@@ -81,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]);
@@ -102,7 +99,7 @@ export const RawTreeItem = <T = any,>({
   }, []);
 
   useEffect(() => {
-    if (!draggable) {
+    if (!_draggable) {
       return;
     }
 
@@ -110,7 +107,7 @@ export const RawTreeItem = <T = any,>({
 
     // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about
     return combine(
-      pragmaticDraggable({
+      draggable({
         element: buttonRef.current,
         getInitialData: () => data,
         onDragStart: () => {
@@ -127,6 +124,7 @@ export const RawTreeItem = <T = any,>({
           }
         },
       }),
+      // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx
       dropTargetForElements({
         element: buttonRef.current,
         getData: ({ input, element }) => {
@@ -176,7 +174,7 @@ export const RawTreeItem = <T = any,>({
         },
       }),
     );
-  }, [draggable, item, id, mode, path, open, canDrop]);
+  }, [_draggable, item, id, mode, path, open, canDrop]);
 
   // Cancel expand on unmount.
   useEffect(() => () => cancelExpand(), [cancelExpand]);
@@ -220,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-groupSurface',
           hoverableControls,
           hoverableFocusedKeyboardControls,
           hoverableFocusedWithinControls,
           hoverableDescriptionIcons,
           ghostHover,
-          focusRing,
           className,
         )}
         data-itemid={id}
@@ -244,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} />
@@ -269,7 +266,7 @@ export const RawTreeItem = <T = any,>({
             item={item}
             path={path}
             last={index === items.length - 1}
-            draggable={draggable}
+            draggable={_draggable}
             renderColumns={Columns}
             canDrop={canDrop}
             onOpenChange={onOpenChange}

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`,
 });

package/src/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './components';
+export * from './util';

package/src/util/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './path';

package/src/util/path.test.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { describe, expect, test } from 'vitest';
+
+import { Path } from './path';
+
+describe('paths', () => {
+  test('create', () => {
+    const path = Path.create('a', 'b', 'c');
+    expect(Path.first(path)).to.eq('a');
+    expect(Path.last(path)).to.eq('c');
+
+    expect(Path.hasRoot(path, 'a')).to.be.true;
+    expect(Path.hasRoot(path, 'x')).to.be.false;
+
+    expect(Path.hasChild(Path.create('a', 'b'), path)).to.be.true;
+    expect(Path.hasChild(Path.create('a'), path)).to.be.false;
+
+    expect(Path.hasDescendent(Path.create('a', 'b'), path)).to.be.true;
+    expect(Path.hasDescendent(Path.create('a'), path)).to.be.true;
+  });
+});

package/src/util/path.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+const SEPARATOR = '~';
+
+export const Path = {
+  create: (...args: string[]) => args.join(SEPARATOR),
+
+  parts: (path: string) => path.split(SEPARATOR),
+  length: (path: string) => path.split(SEPARATOR).length,
+  first: (path: string) => path.split(SEPARATOR)[0] ?? path,
+  last: (path: string) => path.split(SEPARATOR).at(-1) ?? path,
+  parent: (path: string) => path.split(SEPARATOR).slice(0, -1).join(SEPARATOR),
+
+  hasRoot: (path: string, id: string) => Path.first(path) === id,
+  hasChild: (path: string, compare: string) => Path.parent(compare) === path,
+  hasDescendent: (path: string, compare: string) => compare !== path && compare.startsWith(path),
+  siblings: (path: string, compare: string) => Path.parent(path) === Path.parent(compare),
+  onPath: (path: string, id: string) => Path.parts(path).includes(id),
+};