@dxos/react-ui 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/components/List/Tree.tsx

@@ -1,74 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { type ComponentPropsWithoutRef, type FC, type ForwardRefExoticComponent, forwardRef } from 'react';
-
-import { type ThemedClassName } from '../../util';
-import {
-  LIST_ITEM_NAME,
-  List,
-  ListItem,
-  type ListItemCollapsibleContentProps,
-  type ListItemHeadingProps,
-  type ListItemOpenTriggerProps,
-  type ListItemRootProps,
-  type ListProps,
-  type ListScopedProps,
-  useListItemContext,
-} from './List';
-import { TreeDropIndicator } from './TreeDropIndicator';
-
-type TreeRootProps = ListProps;
-
-type TreeItemProps = ListItemRootProps;
-
-const TreeRoot = forwardRef<HTMLOListElement, TreeRootProps>((props, forwardedRef) => {
-  return <List {...props} ref={forwardedRef} />;
-});
-
-type TreeBranchProps = TreeRootProps;
-
-const TreeBranch = forwardRef<HTMLOListElement, ListScopedProps<TreeBranchProps>>(
-  ({ __listScope, ...props }, forwardedRef) => {
-    const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
-    return <List {...props} aria-labelledby={headingId} ref={forwardedRef} />;
-  },
-);
-
-const TreeItemRoot = forwardRef<HTMLLIElement, ListItemRootProps>((props, forwardedRef) => {
-  return <ListItem.Root role='treeitem' {...props} ref={forwardedRef} />;
-});
-
-type TreeItemHeadingProps = ListItemHeadingProps;
-
-const TreeItemHeading = ListItem.Heading;
-
-type TreeItemOpenTriggerProps = ListItemOpenTriggerProps;
-
-const TreeItemOpenTrigger = ListItem.OpenTrigger;
-
-const MockTreeItemOpenTrigger = ListItem.MockOpenTrigger;
-
-type TreeItemBodyProps = ListItemCollapsibleContentProps;
-
-const TreeItemBody: ForwardRefExoticComponent<TreeItemBodyProps> = ListItem.CollapsibleContent;
-
-export const Tree = { Root: TreeRoot, Branch: TreeBranch };
-export const TreeItem: {
-  Root: ForwardRefExoticComponent<TreeItemProps>;
-  Heading: ForwardRefExoticComponent<TreeItemHeadingProps>;
-  Body: ForwardRefExoticComponent<TreeItemBodyProps>;
-  OpenTrigger: ForwardRefExoticComponent<TreeItemOpenTriggerProps>;
-  MockOpenTrigger: FC<ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>>;
-  DropIndicator: typeof TreeDropIndicator;
-} = {
-  Root: TreeItemRoot,
-  Heading: TreeItemHeading,
-  Body: TreeItemBody,
-  OpenTrigger: TreeItemOpenTrigger,
-  MockOpenTrigger: MockTreeItemOpenTrigger,
-  DropIndicator: TreeDropIndicator,
-};
-
-export type { TreeRootProps, TreeItemProps, TreeItemHeadingProps, TreeItemBodyProps, TreeItemOpenTriggerProps };

package/src/components/List/TreeDropIndicator.tsx

@@ -1,70 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import React, { type CSSProperties, type HTMLAttributes } from 'react';
-
-// Tree item hitbox
-// https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx#tree-item
-
-type InstructionType = Exclude<Instruction, { type: 'instruction-blocked' }>['type'];
-type Orientation = 'sibling' | 'child';
-
-const edgeToOrientationMap: Record<InstructionType, Orientation> = {
-  'reorder-above': 'sibling',
-  'reorder-below': 'sibling',
-  'make-child': 'child',
-  reparent: 'child',
-};
-
-const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
-  // TODO(wittjosiah): Stop using left/right here.
-  sibling:
-    'h-(--line-thickness) left-(--horizontal-indent) right-0 bg-accent-bg before:left-(--negative-terminal-size)',
-  child: 'inset-0 border-[length:var(--line-thickness)] before:invisible',
-};
-
-const instructionStyles: Record<InstructionType, HTMLAttributes<HTMLElement>['className']> = {
-  'reorder-above': 'top-(--line-offset) before:top-(--offset-terminal)',
-  'reorder-below': 'bottom-(--line-offset) before:bottom-(--offset-terminal)',
-  'make-child': 'border-accent-bg',
-  // TODO(wittjosiah): This is not occurring in the current implementation.
-  reparent: '',
-};
-
-const strokeSize = 2;
-const terminalSize = 8;
-const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-
-export type DropIndicatorProps = {
-  instruction: Instruction;
-  gap?: number;
-};
-
-export const TreeDropIndicator = ({ instruction, gap = 0 }: DropIndicatorProps) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
-  const isBlocked = instruction.type === 'instruction-blocked';
-  const desiredInstruction = isBlocked ? instruction.desired : instruction;
-  const orientation = edgeToOrientationMap[desiredInstruction.type];
-  if (isBlocked) {
-    return null;
-  }
-
-  return (
-    <div
-      style={
-        {
-          '--line-thickness': `${strokeSize}px`,
-          '--line-offset': `${lineOffset}`,
-          '--terminal-size': `${terminalSize}px`,
-          '--terminal-radius': `${terminalSize / 2}px`,
-          '--negative-terminal-size': `-${terminalSize}px`,
-          '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
-          '--horizontal-indent': `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`,
-        } as CSSProperties
-      }
-      className={`absolute z-10 pointer-events-none before:w-(--terminal-size) before:h-(--terminal-size) box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accent-bg before:rounded-full ${orientationStyles[orientation]} ${instructionStyles[desiredInstruction.type]}`}
-    ></div>
-  );
-};

package/src/components/List/Treegrid.stories.tsx

@@ -1,156 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { random } from '@dxos/random';
-
-import { withTheme } from '../../testing';
-import { Icon } from '../Icon';
-import { Treegrid, TREEGRID_PARENT_OF_SEPARATOR, TREEGRID_PATH_SEPARATOR } from './Treegrid';
-
-random.seed(1234);
-
-type StorybookNode = {
-  id: string;
-  title: string;
-  icon?: string;
-  nodes?: StorybookNode[];
-};
-
-type StorybookIteratorNode = {
-  node: StorybookNode;
-  path: string[];
-  parentOf?: string[];
-};
-
-const content = {
-  id: 'root',
-  title: 'Root',
-  nodes: [
-    {
-      id: random.string.uuid(),
-      title: 'Personal Space',
-      icon: 'ph--house--regular',
-      nodes: [
-        {
-          id: random.string.uuid(),
-          title: random.commerce.productName(),
-        },
-        {
-          id: random.string.uuid(),
-          title: random.commerce.productName(),
-        },
-        {
-          id: random.string.uuid(),
-          title: random.commerce.productName(),
-          nodes: [
-            {
-              id: random.string.uuid(),
-              title: random.commerce.productName(),
-              nodes: [
-                {
-                  id: random.string.uuid(),
-                  title: random.commerce.productName(),
-                },
-                {
-                  id: random.string.uuid(),
-                  title: random.commerce.productName(),
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-    {
-      id: random.string.uuid(),
-      title: random.commerce.productName(),
-      icon: 'ph--planet--regular',
-      nodes: [
-        {
-          id: random.string.uuid(),
-          title: random.commerce.productName(),
-        },
-      ],
-    },
-    {
-      id: random.string.uuid(),
-      title: random.commerce.productName(),
-      icon: 'ph--sailboat--regular',
-    },
-    {
-      id: random.string.uuid(),
-      title: random.commerce.productName(),
-      icon: 'ph--planet--regular',
-    },
-  ],
-} as StorybookNode;
-
-function* visitor(node: StorybookNode, isOpen?: (node: StorybookNode) => boolean): Generator<StorybookIteratorNode> {
-  const stack: StorybookIteratorNode[] = [
-    {
-      node,
-      path: [node.id],
-      parentOf: (node.nodes ?? []).map(({ id }) => id),
-    },
-  ];
-  while (stack.length > 0) {
-    const { node, path, parentOf } = stack.pop()!;
-    if (path.length > 1) {
-      yield { node, path, parentOf };
-    }
-
-    const children = Array.from(node.nodes ?? []);
-    if (path.length === 1 || isOpen?.(node)) {
-      for (let i = children.length - 1; i >= 0; i--) {
-        const child = children[i];
-        stack.push({
-          node: child,
-          path: [...path, child.id],
-          ...((child.nodes?.length ?? 0) > 0 && {
-            parentOf: child.nodes!.map(({ id }) => id),
-          }),
-        });
-      }
-    }
-  }
-}
-
-const flattenedContent = Array.from(visitor(content, () => true));
-
-const DefaultStory = () => {
-  return (
-    <Treegrid.Root gridTemplateColumns='1fr'>
-      {flattenedContent.map(({ node, parentOf, path }) => {
-        return (
-          <Treegrid.Row
-            key={node.id}
-            id={path.join(TREEGRID_PATH_SEPARATOR)}
-            {...(parentOf && { parentOf: parentOf.join(TREEGRID_PARENT_OF_SEPARATOR) })}
-          >
-            <Treegrid.Cell indent classNames='flex items-center'>
-              {node.icon && <Icon icon={node.icon} classNames='w-[1em] h-[1em] my-1' />}
-              {node.title}
-            </Treegrid.Cell>
-          </Treegrid.Row>
-        );
-      })}
-    </Treegrid.Root>
-  );
-};
-
-const meta = {
-  title: 'ui/react-ui-core/components/Treegrid',
-  component: Treegrid.Root as any,
-  render: DefaultStory,
-  decorators: [withTheme()],
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/components/List/Treegrid.theme.ts

@@ -1,35 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { mx } from '@dxos/ui-theme';
-import type { ComponentFunction, Theme } from '@dxos/ui-types';
-
-export type TreegridStyleProps = Partial<{
-  level: number;
-  indent: boolean;
-}>;
-
-const levelStyles = new Map<number, string>([
-  [1, '[&>.indent:first-of-type]:pl-0 font-medium'],
-  [2, '[&>.indent:first-of-type]:pl-0'],
-  [3, '[&>.indent:first-of-type]:pl-1'],
-  [4, '[&>.indent:first-of-type]:pl-2'],
-  [5, '[&>.indent:first-of-type]:pl-3'],
-  [6, '[&>.indent:first-of-type]:pl-4'],
-  [7, '[&>.indent:first-of-type]:pl-5'],
-  [8, '[&>.indent:first-of-type]:pl-6'],
-]);
-
-const root: ComponentFunction<TreegridStyleProps> = (_, ...etc) => mx('grid', ...etc);
-
-const row: ComponentFunction<TreegridStyleProps> = ({ level = 1 }, ...etc) =>
-  mx(levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)), ...etc);
-
-const cell: ComponentFunction<TreegridStyleProps> = ({ indent }, ...etc) => mx(indent && 'indent', ...etc);
-
-export const treegridTheme: Theme<TreegridStyleProps> = {
-  root,
-  row,
-  cell,
-};

package/src/components/List/Treegrid.tsx

@@ -1,187 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { useFocusFinders } from '@fluentui/react-tabster';
-import { type Scope, createContextScope } from '@radix-ui/react-context';
-import { Primitive } from '@radix-ui/react-primitive';
-import { Slot } from '@radix-ui/react-slot';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, {
-  type CSSProperties,
-  type ComponentPropsWithRef,
-  type KeyboardEvent,
-  forwardRef,
-  useCallback,
-} from 'react';
-
-import { useThemeContext } from '../../hooks';
-import { composable, composableProps } from '../../util';
-import { type ThemedClassName } from '../../util';
-
-// TODO(thure): https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treegrid_role
-
-const TREEGRID_ROW_NAME = 'Treegrid.Row';
-
-type TreegridRowScopedProps<P> = P & { __treegridRowScope?: Scope };
-
-const [createTreegridRowContext, createTreegridRowScope] = createContextScope(TREEGRID_ROW_NAME, []);
-
-type TreegridRowContextValue = {
-  open?: boolean;
-  onOpenChange?: (nextOpen: boolean) => void;
-};
-
-const [TreegridRowProvider, useTreegridRowContext] =
-  createTreegridRowContext<TreegridRowContextValue>(TREEGRID_ROW_NAME);
-
-// TODO(burdon): Replace with functions.
-export const TREEGRID_PATH_SEPARATOR = '~';
-export const TREEGRID_PARENT_OF_SEPARATOR = ' ';
-
-type TreegridRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
-  gridTemplateColumns?: CSSProperties['gridTemplateColumns'];
-  asChild?: boolean;
-};
-
-const TreegridRoot = composable<HTMLDivElement, TreegridRootProps>(
-  ({ asChild, classNames, children, style, gridTemplateColumns, onKeyDown: onKeyDownProp, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const { className, role: _role, ...rest } = composableProps<HTMLDivElement>(props, { classNames });
-    const Comp = asChild ? Slot : Primitive.div;
-    const { findFirstFocusable } = useFocusFinders();
-
-    const handleKeyDown = useCallback(
-      (event: KeyboardEvent<HTMLDivElement>) => {
-        switch (event.key) {
-          case 'ArrowDown':
-          case 'ArrowUp': {
-            const direction = event.key === 'ArrowDown' ? 'down' : 'up';
-            const target = event.target as HTMLElement;
-
-            // Find ancestor with data-arrow-keys containing the relevant direction.
-            const ancestorWithArrowKeys = target.closest(`[data-arrow-keys*="${direction}"], [data-arrow-keys="all"]`);
-
-            // If no ancestor with data-arrow-keys found, proceed with row navigation.
-            if (!ancestorWithArrowKeys) {
-              // Find the closest row
-              const currentRow = target.closest('[role="row"]');
-              if (currentRow) {
-                // Find the treegrid container.
-                const treegrid = currentRow.closest('[role="treegrid"]');
-                if (treegrid) {
-                  // Get all rows in the treegrid.
-                  const rows = Array.from(treegrid.querySelectorAll('[role="row"]'));
-                  const currentIndex = rows.indexOf(currentRow as Element);
-
-                  // Find next or previous row.
-                  const nextIndex = direction === 'down' ? currentIndex + 1 : currentIndex - 1;
-                  const targetRow = rows[nextIndex];
-
-                  if (targetRow) {
-                    // Focus the first focusable element in the target row.
-                    const firstFocusable = findFirstFocusable(targetRow as HTMLElement);
-                    if (firstFocusable) {
-                      event.preventDefault();
-                      firstFocusable.focus();
-                    }
-                  }
-                }
-              }
-            }
-            break;
-          }
-        }
-        onKeyDownProp?.(event);
-      },
-      [findFirstFocusable, onKeyDownProp],
-    );
-
-    return (
-      <Comp
-        role='treegrid'
-        {...rest}
-        className={tx('treegrid.root', {}, className)}
-        style={{ ...style, gridTemplateColumns }}
-        onKeyDown={handleKeyDown}
-        ref={forwardedRef}
-      >
-        {children}
-      </Comp>
-    );
-  },
-);
-
-type TreegridRowProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
-  id: string;
-  asChild?: boolean;
-  parentOf?: string;
-  defaultOpen?: boolean;
-  open?: boolean;
-  onOpenChange?(open: boolean): void;
-};
-
-const TreegridRow = forwardRef<HTMLDivElement, TreegridRowScopedProps<TreegridRowProps>>(
-  (
-    {
-      __treegridRowScope,
-      asChild,
-      classNames,
-      children,
-      id,
-      parentOf,
-      open: propsOpen,
-      defaultOpen,
-      onOpenChange: propsOnOpenChange,
-      ...props
-    },
-    forwardedRef,
-  ) => {
-    const { tx } = useThemeContext();
-    const Comp = asChild ? Slot : Primitive.div;
-    const pathParts = id.split(TREEGRID_PATH_SEPARATOR);
-    const level = pathParts.length - 1;
-    const [open, onOpenChange] = useControllableState({
-      prop: propsOpen,
-      onChange: propsOnOpenChange,
-      defaultProp: defaultOpen,
-    });
-
-    return (
-      <TreegridRowProvider open={open} onOpenChange={onOpenChange} scope={__treegridRowScope}>
-        <Comp
-          role='row'
-          aria-level={level}
-          className={tx('treegrid.row', { level }, classNames)}
-          {...(parentOf && { 'aria-expanded': open, 'aria-owns': parentOf })}
-          {...props}
-          id={id}
-          ref={forwardedRef}
-        >
-          {children}
-        </Comp>
-      </TreegridRowProvider>
-    );
-  },
-);
-
-type TreegridCellProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & { indent?: boolean };
-
-const TreegridCell = forwardRef<HTMLDivElement, TreegridCellProps>(
-  ({ classNames, children, indent, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <div role='gridcell' className={tx('treegrid.cell', { indent }, classNames)} {...props} ref={forwardedRef}>
-        {children}
-      </div>
-    );
-  },
-);
-
-export type { TreegridRootProps, TreegridRowProps };
-
-export const Treegrid = {
-  Root: TreegridRoot,
-  Row: TreegridRow,
-  Cell: TreegridCell,
-};

package/src/components/List/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './List';
-export * from './Tree';
-export * from './Treegrid';