@dxos/react-ui-list 0.6.13-main.548ca8d → 0.6.14-main.1366248

package/src/components/Tree/TreeItem.tsx

@@ -0,0 +1,237 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable, 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 {
+  attachInstruction,
+  extractInstruction,
+  type Instruction,
+  type ItemMode,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import React, { memo, useCallback, useEffect, useRef, useState, type FC, type KeyboardEvent } from 'react';
+
+import { invariant } from '@dxos/invariant';
+import { Treegrid } from '@dxos/react-ui';
+import {
+  focusRing,
+  hoverableControls,
+  hoverableFocusedKeyboardControls,
+  hoverableFocusedWithinControls,
+  mx,
+} from '@dxos/react-ui-theme';
+
+import { DropIndicator } from './DropIndicator';
+import { TreeItemHeading } from './TreeItemHeading';
+import { TreeItemToggle } from './TreeItemToggle';
+import { DEFAULT_INDENTATION, paddingIndendation } from './helpers';
+import { type ItemType } from './types';
+
+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]';
+
+// TODO(burdon): Make generic?
+export type TreeItemProps<T extends ItemType = ItemType> = {
+  item: T;
+  mode: ItemMode;
+  open: boolean;
+  current: boolean;
+  draggable?: boolean;
+  renderColumns?: FC<{ item: T; menuOpen: boolean; setMenuOpen: (open: boolean) => void }>;
+  canDrop?: (source: T, target: T) => boolean;
+  onOpenChange?: (item: T, nextOpen: boolean) => void;
+  onSelect?: (item: T, nextState: boolean) => void;
+};
+
+// TODO(wittjosiah): Styles.
+export const RawTreeItem = <T extends ItemType = ItemType>({
+  item,
+  mode,
+  open,
+  current,
+  draggable: _draggable,
+  renderColumns: Columns,
+  canDrop,
+  onOpenChange,
+  onSelect,
+}: TreeItemProps<T>) => {
+  const { id, label, icon, className, headingClassName, disabled, path, parentOf } = item;
+  const level = path.length - 2;
+  const isBranch = !!parentOf;
+
+  const rowRef = useRef<HTMLDivElement | null>(null);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const openRef = useRef(false);
+  const cancelExpandRef = useRef<NodeJS.Timeout | null>(null);
+  const [_state, setState] = useState<TreeItemState>('idle');
+  const [instruction, setInstruction] = useState<Instruction | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const cancelExpand = useCallback(() => {
+    if (cancelExpandRef.current) {
+      clearTimeout(cancelExpandRef.current);
+      cancelExpandRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!_draggable) {
+      return;
+    }
+
+    invariant(buttonRef.current);
+
+    // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about
+    return combine(
+      draggable({
+        element: buttonRef.current,
+        getInitialData: () => item,
+        onDragStart: () => {
+          setState('dragging');
+          if (open) {
+            openRef.current = true;
+            onOpenChange?.(item, false);
+          }
+        },
+        onDrop: () => {
+          setState('idle');
+          if (openRef.current) {
+            onOpenChange?.(item, true);
+          }
+        },
+      }),
+      dropTargetForElements({
+        element: buttonRef.current,
+        getData: ({ input, element }) => {
+          return attachInstruction(item, {
+            input,
+            element,
+            indentPerLevel: DEFAULT_INDENTATION,
+            currentLevel: level,
+            mode,
+            block: isBranch ? [] : ['make-child'],
+          });
+        },
+        canDrop: ({ source }) => {
+          const _canDrop = canDrop ?? (() => true);
+          return source.element !== buttonRef.current && _canDrop(source.data as T, item);
+        },
+        getIsSticky: () => true,
+        onDrag: ({ self, source }) => {
+          const instruction = extractInstruction(self.data);
+
+          if (source.data.id !== item.id) {
+            if (instruction?.type === 'make-child' && isBranch && !open && !cancelExpandRef.current) {
+              cancelExpandRef.current = setTimeout(() => {
+                onOpenChange?.(item, true);
+              }, 500);
+            }
+
+            if (instruction?.type !== 'make-child') {
+              cancelExpand();
+            }
+
+            setInstruction(instruction);
+          } else if (instruction?.type === 'reparent') {
+            // TODO(wittjosiah): This is not occurring in the current implementation.
+            setInstruction(instruction);
+          } else {
+            setInstruction(null);
+          }
+        },
+        onDragLeave: () => {
+          cancelExpand();
+          setInstruction(null);
+        },
+        onDrop: () => {
+          cancelExpand();
+          setInstruction(null);
+        },
+      }),
+    );
+  }, [draggable, item, mode, open, canDrop]);
+
+  // Cancel expand on unmount.
+  useEffect(() => () => cancelExpand(), [cancelExpand]);
+
+  const handleOpenChange = useCallback(() => onOpenChange?.(item, !open), [onOpenChange, item, open]);
+
+  const handleSelect = useCallback(() => {
+    rowRef.current?.focus();
+    onSelect?.(item, !current);
+  }, [onSelect, item, current]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      switch (event.key) {
+        case 'ArrowRight':
+          isBranch && !open && handleOpenChange();
+          break;
+        case 'ArrowLeft':
+          isBranch && open && handleOpenChange();
+          break;
+        case ' ':
+          handleSelect();
+          break;
+      }
+    },
+    [isBranch, open, handleOpenChange, handleSelect],
+  );
+
+  return (
+    <Treegrid.Row
+      ref={rowRef}
+      key={id}
+      id={id}
+      aria-labelledby={`${id}__label`}
+      parentOf={parentOf?.join(Treegrid.PARENT_OF_SEPARATOR)}
+      classNames={mx(
+        'grid grid-cols-subgrid col-[tree-row] aria-[current]:bg-input',
+        hoverableControls,
+        hoverableFocusedKeyboardControls,
+        hoverableFocusedWithinControls,
+        hoverableDescriptionIcons,
+        focusRing,
+        className,
+      )}
+      data-itemid={item.id}
+      data-testid={item.testId}
+      // NOTE(thure): This is intentionally an empty string to for descendents to select by in the CSS
+      //   without alerting the user (except for in the correct link element). See also:
+      //   https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#description
+      aria-current={current ? ('' as 'page') : undefined}
+      onKeyDown={handleKeyDown}
+      onContextMenu={(event) => {
+        event.preventDefault();
+        setMenuOpen(true);
+      }}
+    >
+      <Treegrid.Cell
+        indent
+        classNames='relative grid grid-cols-subgrid col-[tree-row]'
+        style={paddingIndendation(level)}
+      >
+        <div role='none' className='flex items-center'>
+          <TreeItemToggle open={open} isBranch={isBranch} onToggle={handleOpenChange} />
+          <TreeItemHeading
+            ref={buttonRef}
+            label={label}
+            icon={icon}
+            className={headingClassName}
+            disabled={disabled}
+            current={current}
+            onSelect={handleSelect}
+          />
+        </div>
+        {Columns && <Columns item={item} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />}
+        {instruction && <DropIndicator instruction={instruction} />}
+      </Treegrid.Cell>
+    </Treegrid.Row>
+  );
+};
+
+export const TreeItem = memo(RawTreeItem) as <T extends ItemType = ItemType>(prosp: TreeItemProps<T>) => JSX.Element;

package/src/components/Tree/TreeItemHeading.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type KeyboardEvent, forwardRef, memo, useCallback } from 'react';
+
+import { Button, Icon, toLocalizedString, useTranslation, type Label } from '@dxos/react-ui';
+import { TextTooltip } from '@dxos/react-ui-text-tooltip';
+import { mx } from '@dxos/react-ui-theme';
+
+export type NavTreeItemHeadingProps = {
+  label: Label;
+  icon?: string;
+  className?: string;
+  disabled?: boolean;
+  current?: boolean;
+  onSelect?: () => void;
+};
+
+export const TreeItemHeading = memo(
+  forwardRef<HTMLButtonElement, NavTreeItemHeadingProps>(
+    ({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
+      const { t } = useTranslation();
+
+      const handleButtonKeydown = useCallback(
+        (event: KeyboardEvent) => {
+          if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            onSelect?.();
+          }
+        },
+        [onSelect],
+      );
+
+      return (
+        <TextTooltip
+          text={toLocalizedString(label, t)}
+          side='bottom'
+          truncateQuery='span[data-tooltip]'
+          onlyWhenTruncating
+          asChild
+          ref={forwardedRef}
+        >
+          <Button
+            data-testid='treeItem.heading'
+            variant='ghost'
+            density='fine'
+            classNames={mx('grow gap-1 !pis-0.5 hover:!bg-transparent dark:hover:!bg-transparent', className)}
+            disabled={disabled}
+            onClick={onSelect}
+            onKeyDown={handleButtonKeydown}
+            {...(current && { 'aria-current': 'location' })}
+          >
+            {icon && <Icon icon={icon ?? 'ph--placeholder--regular'} size={4} classNames='is-[1em] bs-[1em] mlb-1' />}
+            <span className='flex-1 is-0 truncate text-start text-sm font-normal'>{toLocalizedString(label, t)}</span>
+          </Button>
+        </TextTooltip>
+      );
+    },
+  ),
+);

package/src/components/Tree/TreeItemToggle.tsx

@@ -0,0 +1,35 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { forwardRef, memo } from 'react';
+
+import { Button, Icon } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+export type TreeItemToggleProps = {
+  open?: boolean;
+  isBranch?: boolean;
+  onToggle?: () => void;
+};
+
+export const TreeItemToggle = memo(
+  forwardRef<HTMLButtonElement, TreeItemToggleProps>(({ open, isBranch, onToggle }, forwardedRef) => {
+    return (
+      <Button
+        ref={forwardedRef}
+        data-testid='treeItem.toggle'
+        variant='ghost'
+        density='fine'
+        classNames={mx('!pli-1', !isBranch && 'invisible')}
+        onClick={onToggle}
+      >
+        <Icon
+          icon='ph--caret-right--regular'
+          size={3}
+          classNames={mx('transition duration-200', open && 'rotate-90')}
+        />
+      </Button>
+    );
+  }),
+);

package/src/components/Tree/helpers.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type ItemMode } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+
+import { type ItemType } from './types';
+
+export const DEFAULT_INDENTATION = 8;
+
+export const paddingIndendation = (level: number, indentation = DEFAULT_INDENTATION) => ({
+  paddingInlineStart: `${(level - 1) * indentation}px`,
+});
+
+export const getMode = (items: ItemType[], index: number): ItemMode => {
+  const item = items[index];
+  const next = items[index + 1];
+  if (!next || item.path.length > next.path.length) {
+    return 'last-in-group';
+  } else if (item.path.length < next.path.length) {
+    return 'expanded';
+  } else {
+    return 'standard';
+  }
+};

package/src/components/Tree/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './Tree';
+export * from './TreeItem';
+export * from './types';

package/src/components/Tree/testing.ts

@@ -0,0 +1,170 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+
+import { S } from '@dxos/echo-schema';
+import { log } from '@dxos/log';
+import { faker } from '@dxos/random';
+import { Path } from '@dxos/react-ui-mosaic';
+
+import { type ItemType } from './types';
+
+export type TestItem = {
+  id: string;
+  name: string;
+  icon?: string;
+  items: TestItem[];
+};
+
+export const TestItemSchema = S.Struct({
+  id: S.String,
+  name: S.String,
+  icon: S.optional(S.String),
+  items: S.mutable(S.Array(S.suspend((): S.Schema<TestItem> => TestItemSchema))),
+});
+
+export const createTree = (n = 4, d = 4): TestItem => ({
+  id: faker.string.uuid(),
+  name: faker.commerce.productName(),
+  icon:
+    d === 3
+      ? undefined
+      : faker.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 }) : [],
+});
+
+function* visitor({
+  testItem,
+  getItem,
+  isOpen,
+}: {
+  testItem: TestItem;
+  getItem: (testItem: TestItem, parent?: readonly string[]) => ItemType;
+  isOpen?: (testItem: ItemType) => boolean;
+}): Generator<ItemType> {
+  const stack: [TestItem, ItemType][] = [[testItem, getItem(testItem)]];
+  while (stack.length > 0) {
+    const [testItem, item] = stack.pop()!;
+    if (item.path.length > 1) {
+      yield item;
+    }
+
+    const children = Array.from(testItem.items ?? []);
+    if (item.path.length === 1 || isOpen?.(item)) {
+      for (let i = children.length - 1; i >= 0; i--) {
+        const child = children[i];
+        stack.push([child, getItem(child, item.path)]);
+      }
+    }
+  }
+}
+
+export const flattenTree = (tree: TestItem, open: string[], getItem: (tree: TestItem) => ItemType): ItemType[] => {
+  return Array.from(
+    visitor({
+      testItem: tree,
+      getItem,
+      isOpen: ({ path }) => open.includes(Path.create(...path)),
+    }),
+  );
+};
+
+// Ensures that the same item is not created multiple times, causing the tree to be re-rendered.
+const itemsCache: Record<string, ItemType> = {};
+
+export const getItem = (testItem: TestItem, parent?: string[]): ItemType => {
+  const cachedItem = itemsCache[testItem.id];
+  if (cachedItem) {
+    return cachedItem;
+  }
+
+  const item = {
+    id: testItem.id,
+    label: testItem.name,
+    icon: testItem.icon,
+    path: parent ? [...parent, testItem.id] : [testItem.id],
+    ...((testItem.items?.length ?? 0) > 0 && {
+      parentOf: testItem.items!.map(({ id }) => id),
+    }),
+  };
+  itemsCache[testItem.id] = item;
+  return item;
+};
+
+export const invalidateCache = (id: string) => {
+  delete itemsCache[id];
+};
+
+const removeItem = (tree: TestItem, source: ItemType) => {
+  const parent = getTestItem(tree, source.path.slice(1, -1));
+  const index = parent.items!.findIndex(({ id }) => id === source.id);
+  const item = parent.items[index];
+  parent.items!.splice(index, 1);
+  return item;
+};
+
+const getTestItem = (tree: TestItem, path: string[]) => {
+  let item = tree;
+  for (const part of path) {
+    item = item.items!.find(({ id }) => id === part)!;
+  }
+  return item;
+};
+
+// TODO(wittjosiah): Reconcile with plugin-navtree/testing/vistor.
+export const updateState = ({
+  state,
+  instruction,
+  source,
+  target,
+}: {
+  state: TestItem;
+  instruction: Instruction;
+  source: ItemType;
+  target: ItemType;
+}) => {
+  switch (instruction.type) {
+    case 'reorder-above': {
+      invalidateCache(source.id);
+      const item = removeItem(state, source);
+      const parent = getTestItem(state, target.path.slice(1, -1));
+      const index = parent.items!.findIndex(({ id }) => id === target.id);
+      invalidateCache(target.id);
+      parent.items!.splice(index, 0, item);
+      break;
+    }
+
+    case 'reorder-below': {
+      invalidateCache(source.id);
+      const item = removeItem(state, source);
+      const parent = getTestItem(state, target.path.slice(1, -1));
+      const index = parent.items!.findIndex(({ id }) => id === target.id);
+      invalidateCache(target.id);
+      parent.items!.splice(index + 1, 0, item);
+      break;
+    }
+
+    case 'make-child': {
+      invalidateCache(source.id);
+      const item = removeItem(state, source);
+      const parent = getTestItem(state, target.path.slice(1));
+      invalidateCache(target.id);
+      parent.items!.push(item);
+      break;
+    }
+
+    case 'instruction-blocked':
+      break;
+
+    default:
+      log.warn('Unsupported instruction', instruction);
+      break;
+  }
+};

package/src/components/Tree/types.ts

@@ -0,0 +1,34 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { S } from '@dxos/echo-schema';
+
+const LabelSchema = S.Union(
+  S.String,
+  S.Tuple(
+    S.String,
+    S.Struct({
+      ns: S.String,
+      count: S.optional(S.Number),
+    }),
+  ),
+);
+
+export const ItemSchema = S.mutable(
+  S.Struct({
+    id: S.String,
+    label: S.mutable(LabelSchema),
+    icon: S.optional(S.String),
+    disabled: S.optional(S.Boolean),
+    className: S.optional(S.String),
+    headingClassName: S.optional(S.String),
+    testId: S.optional(S.String),
+    path: S.Array(S.String),
+    parentOf: S.optional(S.Array(S.String)),
+  }),
+);
+
+export type ItemType = S.Schema.Type<typeof ItemSchema>;
+
+export const isItem: (item: unknown) => boolean = S.is(ItemSchema);

package/src/components/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './List';
+export * from './Tree';

package/dist/types/src/testing.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/testing.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAGtC,eAAO,MAAM,cAAc;;;EAGzB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,cAAc,CAAC,CAAC;AAEhE,eAAO,MAAM,QAAQ;;;;;EAEnB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEtD,eAAO,MAAM,UAAU,kBAAa,QAQlC,CAAC"}