@dxos/react-ui-mosaic 0.8.4-main.bc674ce → 0.8.4-main.c85a9c8dae

package/src/components/Stack/Stack.tsx

@@ -1,210 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import { type ReactVirtualizerOptions, useVirtualizer } from '@tanstack/react-virtual';
-import React, { type FC, Fragment, type ReactElement, type Ref, forwardRef } from 'react';
-
-import { invariant } from '@dxos/invariant';
-import { type SlottableClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/ui-theme';
-
-import { useVisibleItems } from '../../hooks';
-import {
-  type Axis,
-  type GetId,
-  Mosaic,
-  type MosaicTileProps,
-  type MosiacPlaceholderProps,
-  useMosaicContainer,
-} from '../Mosaic';
-import { mosaicStyles } from '../Mosaic';
-
-type StackTileComponent<TData = any> = FC<MosaicTileProps<TData>>;
-
-type StackProps<TData = any> = SlottableClassName<
-  {
-    Tile: StackTileComponent<TData>;
-    getId: GetId<TData>;
-    role?: string;
-    axis?: Axis;
-    items?: TData[];
-  } & Pick<MosaicTileProps<TData>, 'draggable' | 'debug'>
->;
-
-/**
- * Linear layout of Mosaic tiles.
- * NOTE: This is a low-level component and should be wrapped by a scrollable container.
- */
-const StackInner = forwardRef<HTMLDivElement, StackProps>(
-  (
-    { className, classNames, role = 'list', axis = 'vertical', draggable = true, items, getId, Tile, debug, ...props },
-    forwardedRef,
-  ) => {
-    invariant(Tile);
-    const { id, dragging } = useMosaicContainer(StackInner.displayName!);
-    const visibleItems = useVisibleItems({ id, items, dragging: dragging?.source.data, getId });
-
-    return (
-      <div
-        {...props}
-        role={role}
-        className={mx(
-          'flex',
-          axis === 'horizontal' && 'bs-full [&>*]:shrink-0',
-          axis === 'vertical' && 'flex-col',
-          classNames,
-          className,
-        )}
-        ref={forwardedRef}
-      >
-        <Placeholder axis={axis} location={0.5} />
-        {visibleItems?.map((item, index) => (
-          <Fragment key={getId(item)}>
-            <Tile id={getId(item)} data={item} location={index + 1} draggable={draggable} debug={debug} />
-            <Placeholder axis={axis} location={index + 1.5} />
-          </Fragment>
-        ))}
-      </div>
-    );
-  },
-);
-
-StackInner.displayName = 'Stack';
-
-const Stack = StackInner as <TData = any>(props: StackProps<TData> & { ref?: Ref<HTMLDivElement> }) => ReactElement;
-
-//
-// VirtualStack
-//
-
-type VirtualStackProps<TData = any> = StackProps<TData> &
-  Pick<
-    ReactVirtualizerOptions<HTMLElement, HTMLDivElement>,
-    'estimateSize' | 'getScrollElement' | 'overscan' | 'onChange'
-  >;
-
-const VirtualStackInner = forwardRef<HTMLDivElement, VirtualStackProps>(
-  (
-    {
-      className,
-      classNames,
-      role = 'list',
-      axis = 'vertical',
-      items,
-      getId,
-      Tile,
-      estimateSize,
-      getScrollElement,
-      overscan = 8,
-      onChange,
-      debug,
-      ...props
-    },
-    forwardedRef,
-  ) => {
-    invariant(Tile);
-    const { id, dragging } = useMosaicContainer(VirtualStackInner.displayName!);
-    const visibleItems = useVisibleItems({ id, items, dragging: dragging?.source.data, getId });
-    const virtualizer = useVirtualizer({
-      count: visibleItems.length * 2 + 1,
-      estimateSize,
-      getScrollElement,
-      overscan,
-      onChange,
-    });
-
-    const virtualItems = virtualizer.getVirtualItems();
-
-    return (
-      <div
-        {...props}
-        role={role}
-        className={mx(
-          'flex',
-          axis === 'horizontal' && 'bs-full [&>*]:shrink-0',
-          axis === 'vertical' && 'flex-col',
-          classNames,
-          className,
-        )}
-        style={{
-          position: 'relative',
-          ...(axis === 'vertical'
-            ? {
-                width: '100%',
-                height: virtualizer.getTotalSize(),
-              }
-            : {
-                width: virtualizer.getTotalSize(),
-                height: '100%',
-              }),
-        }}
-        ref={forwardedRef}
-      >
-        {virtualItems.map((virtualItem) => {
-          const data = visibleItems![Math.floor(virtualItem.index / 2)];
-          return (
-            <div
-              key={virtualItem.key}
-              data-index={virtualItem.index}
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                ...(axis === 'vertical'
-                  ? {
-                      width: '100%',
-                      transform: `translateY(${virtualItem.start}px)`,
-                    }
-                  : {
-                      height: '100%',
-                      transform: `translateX(${virtualItem.start}px)`,
-                    }),
-              }}
-              ref={virtualizer.measureElement}
-            >
-              {virtualItem.index % 2 === 0 ? (
-                <Placeholder axis={axis} location={Math.floor(virtualItem.index / 2) + 0.5} />
-              ) : (
-                <Tile id={getId(data)} data={data} location={Math.floor(virtualItem.index / 2) + 1} debug={debug} />
-              )}
-            </div>
-          );
-        })}
-      </div>
-    );
-  },
-);
-
-VirtualStackInner.displayName = 'VirtualStackInner';
-
-const VirtualStack = VirtualStackInner as <TData = any>(
-  props: VirtualStackProps<TData> & { ref?: Ref<HTMLDivElement> },
-) => ReactElement;
-
-//
-// Placeholder
-//
-
-const Placeholder = (props: MosiacPlaceholderProps<number>) => {
-  return (
-    <Mosaic.Placeholder {...props} classNames={mosaicStyles.placeholder.root}>
-      <div
-        className={mx(
-          'flex bs-full bg-baseSurface border border-dashed border-separator rounded-sm',
-          mosaicStyles.placeholder.content,
-        )}
-      />
-    </Mosaic.Placeholder>
-  );
-};
-
-Placeholder.displayName = 'Placeholder';
-
-//
-// Stack
-//
-
-export { Stack, VirtualStack };
-
-export type { StackTileComponent, StackProps, VirtualStackProps };

package/src/components/Stack/index.ts

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

package/src/testing/Board.tsx

@@ -1,278 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import * as Schema from 'effect/Schema';
-import React, { forwardRef, useMemo, useRef, useState } from 'react';
-
-import { Obj, Ref, Type } from '@dxos/echo';
-import { ObjectId } from '@dxos/keys';
-import { useObject } from '@dxos/react-client/echo';
-import { Tag, type ThemedClassName } from '@dxos/react-ui';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
-import { getHashStyles, mx } from '@dxos/ui-theme';
-
-import {
-  Card,
-  type CardMenuProps,
-  Focus,
-  Mosaic,
-  type MosaicTileProps,
-  type MosiacPlaceholderProps,
-  mosaicStyles,
-  useMosaic,
-} from '../components';
-import { useContainerDebug, useEventHandlerAdapter } from '../hooks';
-
-//
-// Test Data
-//
-
-export const TestItem = Schema.Struct({
-  name: Schema.String,
-  description: Schema.optional(Schema.String),
-  label: Schema.optional(Schema.String),
-}).pipe(
-  Type.object({
-    typename: 'example.com/type/Item',
-    version: '0.1.0',
-  }),
-);
-
-export interface TestItem extends Schema.Schema.Type<typeof TestItem> {}
-
-export const TestColumn = Schema.Struct({
-  id: ObjectId,
-  items: Schema.mutable(Schema.Array(Type.Ref(TestItem))),
-}).pipe(
-  Type.object({
-    typename: 'example.com/type/Column',
-    version: '0.1.0',
-  }),
-);
-
-export interface TestColumn extends Schema.Schema.Type<typeof TestColumn> {}
-
-//
-// Root
-//
-
-type RootProps = {
-  id: string;
-  columns: TestColumn[];
-  debug?: boolean;
-};
-
-const Root = forwardRef<HTMLDivElement, RootProps>(({ id, columns, debug }, forwardedRef) => {
-  const [DebugInfo, debugHandler] = useContainerDebug(debug);
-  const [viewport, setViewport] = useState<HTMLElement | null>(null);
-
-  const eventHandler = useEventHandlerAdapter({
-    id,
-    items: columns,
-    getId: (data) => data.id,
-    get: (data) => data,
-    make: (object) => object,
-    canDrop: ({ source }) => Obj.instanceOf(TestColumn, source.data),
-  });
-
-  return (
-    <div
-      role='none'
-      className={mx('plb-2 grid bs-full is-full overflow-hidden', debug && 'grid-cols-[1fr_20rem] gap-2')}
-      ref={forwardedRef}
-    >
-      <Focus.Group asChild axis='horizontal'>
-        <Mosaic.Container
-          asChild
-          withFocus
-          axis='horizontal'
-          autoScroll={viewport}
-          eventHandler={eventHandler}
-          debug={debugHandler}
-        >
-          <Mosaic.Viewport axis='horizontal' padding viewportRef={setViewport}>
-            <Mosaic.Stack axis='horizontal' items={columns} getId={(item) => item.id} Tile={Column} debug={debug} />
-          </Mosaic.Viewport>
-        </Mosaic.Container>
-      </Focus.Group>
-      <DebugInfo />
-    </div>
-  );
-});
-
-//
-// Column
-//
-
-type ColumnProps = Pick<MosaicTileProps<TestColumn>, 'classNames' | 'location' | 'data' | 'debug'>;
-
-const Column = forwardRef<HTMLDivElement, ColumnProps>(({ classNames, location, data, debug }, forwardedRef) => {
-  const [column, updateColumn] = useObject(data);
-  const [DebugInfo, debugHandler] = useContainerDebug(debug);
-  const dragHandleRef = useRef<HTMLButtonElement>(null);
-  const [viewport, setViewport] = useState<HTMLElement | null>(null);
-  const eventHandler = useEventHandlerAdapter<Ref.Unknown>({
-    id: data.id,
-    items: column.items,
-    getId: (data) => data.dxn.toString(),
-    get: (data) => data.target!,
-    make: (object) => Ref.make(object),
-    canDrop: ({ source }) => Obj.instanceOf(TestItem, source.data.target),
-    onChange: (mutator) => updateColumn((column) => mutator(column.items)),
-  });
-
-  // Context menu.
-  const menuItems = useMemo<NonNullable<CardMenuProps<TestItem>['items']>>(
-    () => [
-      {
-        label: 'Delete',
-        onClick: (obj) => {
-          updateColumn((column) => {
-            const idx = column.items.findIndex((item) => item.target?.id === obj?.id);
-            if (idx !== -1) {
-              column.items.splice(idx, 1);
-            }
-          });
-        },
-      },
-    ],
-    [updateColumn],
-  );
-
-  return (
-    <Mosaic.Tile asChild dragHandle={dragHandleRef.current} location={location} id={data.id} data={data} debug={debug}>
-      <Focus.Group asChild>
-        <div
-          className={mx(
-            'grid bs-full card-default-width overflow-hidden bg-deckSurface',
-            debug ? 'grid-rows-[min-content_1fr_20rem]' : 'grid-rows-[min-content_1fr_min-content]',
-            classNames,
-          )}
-          ref={forwardedRef}
-        >
-          <Card.Toolbar>
-            <Card.DragHandle ref={dragHandleRef} />
-            <Card.Title>{column.id}</Card.Title>
-            <Card.Menu items={[]} />
-          </Card.Toolbar>
-          <Card.Context value={{ menuItems }}>
-            <Mosaic.Container
-              asChild
-              withFocus
-              axis='vertical'
-              autoScroll={viewport}
-              eventHandler={eventHandler}
-              debug={debugHandler}
-            >
-              <Mosaic.Viewport axis='vertical' padding viewportRef={setViewport}>
-                <Mosaic.Stack axis='vertical' items={column.items} getId={(data) => data.dxn.toString()} Tile={Item} />
-              </Mosaic.Viewport>
-            </Mosaic.Container>
-          </Card.Context>
-          <div role='none'>
-            <div className='grow flex p-1 justify-center text-xs'>{column.items.length}</div>
-            <DebugInfo />
-          </div>
-        </div>
-      </Focus.Group>
-    </Mosaic.Tile>
-  );
-});
-
-Column.displayName = 'Column';
-
-//
-// Item
-//
-
-type ItemProps = Pick<MosaicTileProps<Ref.Ref<TestItem>>, 'classNames' | 'location' | 'data' | 'debug'>;
-
-const Item = forwardRef<HTMLDivElement, ItemProps>(({ classNames, data: ref, location, debug }, forwardedRef) => {
-  const rootRef = useRef<HTMLDivElement>(null);
-  const composedRef = useComposedRefs<HTMLDivElement>(rootRef, forwardedRef);
-  const dragHandleRef = useRef<HTMLButtonElement>(null);
-  const object = ref.target;
-  if (!object) {
-    return null;
-  }
-
-  return (
-    <Mosaic.Tile
-      asChild
-      dragHandle={dragHandleRef.current}
-      id={ref.dxn.toString()}
-      data={ref}
-      location={location}
-      debug={debug}
-    >
-      <Focus.Group asChild>
-        <Card.Root classNames={classNames} onClick={() => rootRef.current?.focus()} ref={composedRef}>
-          <Card.Toolbar>
-            <Card.DragHandle ref={dragHandleRef} />
-            <Card.Title>{object.name}</Card.Title>
-            <Card.Menu context={object} />
-          </Card.Toolbar>
-          <Card.Row icon='ph--note--regular' classNames='text-description'>
-            {object.description}
-          </Card.Row>
-          <Card.Row icon='ph--tag--regular'>
-            {object.label && (
-              <div role='none' className='flex shrink-0 gap-1 text-xs items-center'>
-                <Tag palette={getHashStyles(object.label).hue}>{object.label}</Tag>
-              </div>
-            )}
-          </Card.Row>
-        </Card.Root>
-      </Focus.Group>
-    </Mosaic.Tile>
-  );
-});
-
-Item.displayName = 'Item';
-
-//
-// Placeholder
-//
-
-const Placeholder = (props: MosiacPlaceholderProps<number>) => {
-  return (
-    <Mosaic.Placeholder {...props} classNames={mosaicStyles.placeholder.root}>
-      <div
-        className={mx(
-          'flex bs-full border border-dashed border-separator rounded-sm',
-          mosaicStyles.placeholder.content,
-        )}
-      />
-    </Mosaic.Placeholder>
-  );
-};
-
-Placeholder.displayName = 'Placeholder';
-
-//
-// Debug
-//
-
-export const Debug = forwardRef<HTMLDivElement, ThemedClassName>(({ classNames }, forwardedRef) => {
-  const { containers, dragging } = useMosaic(Debug.displayName!);
-  const counter = useRef(0);
-  return (
-    <Json
-      data={{ containers, dragging, count: counter.current++ }}
-      classNames={mx('text-xs', classNames)}
-      ref={forwardedRef}
-    />
-  );
-});
-
-Debug.displayName = 'Debug';
-
-//
-// Board
-//
-
-export const Board = { Root, Column, Item, Placeholder, Debug };
-
-export type { RootProps, ColumnProps, ItemProps };

package/src/testing/Slot.stories.tsx

@@ -1,101 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { Slot } from '@radix-ui/react-slot';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { type ReactNode, forwardRef } from 'react';
-
-import { withTheme } from '@dxos/react-ui/testing';
-import { mx } from '@dxos/ui-theme';
-
-// Outer primitive (like Tooltip.Trigger or Focus.Group).
-const Outer = forwardRef<HTMLDivElement, { children: ReactNode; className?: string; asChild?: boolean; role?: string }>(
-  (props, ref) => {
-    const { children, className, asChild, ...rest } = props;
-    const Comp = asChild ? Slot : 'div';
-    return (
-      <Comp {...rest} className={mx('p-2', className)} data-outer='true' ref={ref}>
-        {children}
-      </Comp>
-    );
-  },
-);
-
-// Middle primitive (like Dialog.Trigger or Mosaic.Cell).
-const Middle = forwardRef<
-  HTMLDivElement,
-  { children: ReactNode; className?: string; asChild?: boolean; role?: string }
->((props, ref) => {
-  const { children, className, asChild, ...rest } = props;
-  const Comp = asChild ? Slot : 'div';
-  return (
-    <Comp {...rest} className={mx('p-2', className)} data-middle='true' ref={ref}>
-      {children}
-    </Comp>
-  );
-});
-
-// Leaf component (like MyButton or Card.Root).
-const Leaf = forwardRef<HTMLButtonElement, { children: ReactNode; className?: string; role?: string }>(
-  ({ className, ...props }, ref) => {
-    return (
-      <button className={mx('p-2 outline-none border rounded', className)} {...props} ref={ref}>
-        {props.children}
-      </button>
-    );
-  },
-);
-
-// Test 1: Single asChild (should work).
-const TestSingle = (props: { className?: string; role?: string }) => (
-  <Outer asChild {...props}>
-    <Leaf>Single asChild</Leaf>
-  </Outer>
-);
-
-// Test 2: Nested asChild (like Radix docs example).
-const TestNested = (props: { className?: string; role?: string }) => {
-  return (
-    <Outer asChild {...props}>
-      <Middle asChild>
-        <Leaf>Nested asChild</Leaf>
-      </Middle>
-    </Outer>
-  );
-};
-
-// Test 3: Our actual pattern.
-const TestInner = (props: { className?: string; role?: string }) => (
-  <Outer asChild {...props}>
-    <Middle asChild>
-      <Leaf>
-        <div>Leaf</div>
-      </Leaf>
-    </Middle>
-  </Outer>
-);
-
-const meta = {
-  title: 'ui/react-ui-mosaic/Slot',
-  decorators: [withTheme],
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Single: Story = {
-  render: () => <TestSingle role='listitem' className='border-red-500' />,
-};
-
-export const Nested: Story = {
-  render: () => <TestNested role='listitem' className='border-green-500' />,
-};
-
-export const Inner: Story = {
-  render: () => <TestInner role='listitem' className='border-blue-500' />,
-};