@dxos/react-ui-list 0.9.0 → 0.9.1-main.c7dcc2e112

package/src/components/List/ListItem.tsx

@@ -1,287 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import {
-  type Edge,
-  attachClosestEdge,
-  extractClosestEdge,
-} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
-import { createContext } from '@radix-ui/react-context';
-import { Slot } from '@radix-ui/react-slot';
-import React, {
-  type ComponentProps,
-  type HTMLAttributes,
-  type PropsWithChildren,
-  type ReactNode,
-  RefObject,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { createPortal } from 'react-dom';
-
-import { invariant } from '@dxos/invariant';
-import {
-  IconButton,
-  type IconButtonProps,
-  ListItem as NaturalListItem,
-  type ThemedClassName,
-  useTranslation,
-} from '@dxos/react-ui';
-import { mx, osTranslations } from '@dxos/ui-theme';
-
-import { useListContext } from './ListRoot';
-
-export type ListItemRecord = any;
-
-export type ItemDragState =
-  | {
-      type: 'idle';
-    }
-  | {
-      type: 'preview';
-      container: HTMLElement;
-    }
-  | {
-      type: 'is-dragging';
-    }
-  | {
-      type: 'is-dragging-over';
-      closestEdge: Edge | null;
-    };
-
-export const idle: ItemDragState = { type: 'idle' };
-
-const stateStyles: { [Key in ItemDragState['type']]?: HTMLAttributes<HTMLDivElement>['className'] } = {
-  'is-dragging': 'opacity-50',
-};
-
-type ListItemContext<T extends ListItemRecord> = {
-  item: T;
-  dragHandleRef: RefObject<HTMLButtonElement | null>;
-};
-
-/**
- * Default context defined for ListItemDragPreview, which is defined outside of ListItem.
- */
-const defaultContext: ListItemContext<any> = {} as any;
-
-const LIST_ITEM_NAME = 'ListItem';
-
-export const [ListItemProvider, useListItemContext] = createContext<ListItemContext<any>>(
-  LIST_ITEM_NAME,
-  defaultContext,
-);
-
-export type ListItemProps<T extends ListItemRecord> = ThemedClassName<
-  PropsWithChildren<
-    {
-      item: T;
-      asChild?: boolean;
-      selected?: boolean;
-    } & HTMLAttributes<HTMLDivElement>
-  >
->;
-
-/**
- * Draggable list item.
- */
-export const ListItem = <T extends ListItemRecord>({
-  children,
-  classNames,
-  item,
-  asChild,
-  selected,
-  ...props
-}: ListItemProps<T>) => {
-  const Comp = asChild ? Slot : 'div';
-  const { isItem, readonly, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
-  const rootRef = useRef<HTMLDivElement | null>(null);
-  const dragHandleRef = useRef<HTMLButtonElement | null>(null);
-  const [state, setState] = useState<ItemDragState>(idle);
-
-  useEffect(() => {
-    const element = rootRef.current;
-    invariant(element);
-    return combine(
-      //
-      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable
-      //
-      draggable({
-        element,
-        dragHandle: dragHandleRef.current!,
-        canDrag: () => !readonly,
-        getInitialData: () => item as any,
-        onGenerateDragPreview: dragPreview
-          ? ({ nativeSetDragImage, source }) => {
-              const rect = source.element.getBoundingClientRect();
-              setCustomNativeDragPreview({
-                nativeSetDragImage,
-                getOffset: ({ container }) => {
-                  const { height } = container.getBoundingClientRect();
-                  return { x: 20, y: height / 2 };
-                },
-                render: ({ container }) => {
-                  container.style.width = rect.width + 'px';
-                  setState({ type: 'preview', container });
-                  setRootState({ type: 'preview', container, item });
-                  return () => {}; // TODO(burdon): Cleanup.
-                },
-              });
-            }
-          : undefined,
-        onDragStart: () => {
-          setState({ type: 'is-dragging' });
-          setRootState({ type: 'is-dragging', item });
-        },
-        onDrop: () => {
-          setState(idle);
-          setRootState(idle);
-        },
-      }),
-
-      //
-      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#drop-target-for-elements
-      //
-      dropTargetForElements({
-        element,
-        canDrop: ({ source }) => {
-          return (source.element !== element && isItem?.(source.data)) ?? false;
-        },
-        getData: ({ input }) => {
-          return attachClosestEdge(item as any, { element, input, allowedEdges: ['top', 'bottom'] });
-        },
-        getIsSticky: () => true,
-        onDragEnter: ({ self }) => {
-          const closestEdge = extractClosestEdge(self.data);
-          setState({ type: 'is-dragging-over', closestEdge });
-        },
-        onDragLeave: () => {
-          setState(idle);
-        },
-        onDrag: ({ self }) => {
-          const closestEdge = extractClosestEdge(self.data);
-          setState((current) => {
-            if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {
-              return current;
-            }
-            return { type: 'is-dragging-over', closestEdge };
-          });
-        },
-        onDrop: () => {
-          setState(idle);
-        },
-      }),
-    );
-  }, [item]);
-
-  return (
-    <ListItemProvider item={item} dragHandleRef={dragHandleRef}>
-      <Comp
-        {...props}
-        role='listitem'
-        aria-selected={selected}
-        className={mx('relative p-1 dx-selected dx-hover', classNames, stateStyles[state.type])}
-        ref={rootRef}
-      >
-        {children}
-      </Comp>
-      {state.type === 'is-dragging-over' && state.closestEdge && (
-        <NaturalListItem.DropIndicator edge={state.closestEdge} />
-      )}
-    </ListItemProvider>
-  );
-};
-
-//
-// List item components
-//
-
-export const ListItemIconButton = ({
-  autoHide = true,
-  iconOnly = true,
-  variant = 'ghost',
-  classNames,
-  disabled,
-  ...props
-}: IconButtonProps & { autoHide?: boolean }) => {
-  const { state } = useListContext('ITEM_BUTTON');
-  const isDisabled = state.type !== 'idle' || disabled;
-  return (
-    <IconButton
-      {...props}
-      disabled={isDisabled}
-      iconOnly={iconOnly}
-      variant={variant}
-      classNames={[classNames, autoHide && disabled && 'hidden']}
-    />
-  );
-};
-
-// TODO(burdon): Generalize to action button.
-export const ListItemDeleteButton = ({
-  autoHide = true,
-  classNames,
-  disabled,
-  icon = 'ph--x--regular',
-  label,
-  ...props
-}: Partial<Pick<IconButtonProps, 'icon'>> &
-  Omit<IconButtonProps, 'icon' | 'label'> & { autoHide?: boolean; label?: string }) => {
-  const { state } = useListContext('DELETE_BUTTON');
-  const isDisabled = state.type !== 'idle' || disabled;
-  const { t } = useTranslation(osTranslations);
-  return (
-    <IconButton
-      {...props}
-      variant='ghost'
-      disabled={isDisabled}
-      icon={icon}
-      iconOnly
-      label={label ?? t('delete.label')}
-      classNames={[classNames, autoHide && disabled && 'hidden']}
-    />
-  );
-};
-
-export const ListItemDragHandle = ({ disabled }: Pick<IconButtonProps, 'disabled'>) => {
-  const { dragHandleRef } = useListItemContext('DRAG_HANDLE');
-  const { t } = useTranslation(osTranslations);
-  return (
-    <IconButton
-      variant='ghost'
-      disabled={disabled}
-      icon='ph--dots-six-vertical--regular'
-      iconOnly
-      label={t('drag-handle.label')}
-      ref={dragHandleRef}
-    />
-  );
-};
-
-export const ListItemDragPreview = <T extends ListItemRecord>({
-  children,
-}: {
-  children: ({ item }: { item: T }) => ReactNode;
-}) => {
-  const { state } = useListContext('DRAG_PREVIEW');
-  return state?.type === 'preview' ? createPortal(children({ item: state.item }), state.container) : null;
-};
-
-export const ListItemWrapper = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (
-  <div className={mx('flex w-full gap-2', classNames)}>{children}</div>
-);
-
-export const ListItemTitle = ({
-  classNames,
-  children,
-  ...props
-}: ThemedClassName<PropsWithChildren<ComponentProps<'div'>>>) => (
-  <div className={mx('flex grow items-center truncate', classNames)} {...props}>
-    {children}
-  </div>
-);

package/src/components/List/ListRoot.tsx

@@ -1,106 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import { getReorderDestinationIndex } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index';
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { createContext } from '@radix-ui/react-context';
-import React, { type ReactNode, useCallback, useEffect, useState } from 'react';
-
-import { type ItemDragState, type ListItemRecord, idle } from './ListItem';
-
-type ListContext<T extends ListItemRecord> = {
-  // TODO(burdon): Rename drag state.
-  state: ItemDragState & { item?: T };
-  setState: (state: ItemDragState & { item?: T }) => void;
-  readonly?: boolean;
-  dragPreview?: boolean;
-  isItem?: (item: any) => boolean;
-  getId?: (item: T) => string; // TODO(burdon): Require if T doesn't conform to type.
-};
-
-const LIST_NAME = 'List';
-
-export const [ListProvider, useListContext] = createContext<ListContext<any>>(LIST_NAME);
-
-export type ListRendererProps<T extends ListItemRecord> = {
-  state: ListContext<T>['state'];
-  items: readonly T[];
-};
-
-const defaultGetId = <T extends ListItemRecord>(item: T) => (item as any)?.id;
-
-export type ListRootProps<T extends ListItemRecord> = {
-  children?: (props: ListRendererProps<T>) => ReactNode;
-  items?: readonly T[];
-  onMove?: (fromIndex: number, toIndex: number) => void;
-} & Pick<ListContext<T>, 'isItem' | 'getId' | 'readonly' | 'dragPreview'>;
-
-export const ListRoot = <T extends ListItemRecord>({
-  children,
-  items,
-  isItem,
-  getId = defaultGetId,
-  onMove,
-  ...props
-}: ListRootProps<T>) => {
-  const isEqual = useCallback(
-    (a: T, b: T) => {
-      const idA = getId?.(a);
-      const idB = getId?.(b);
-
-      if (idA !== undefined && idB !== undefined) {
-        return idA === idB;
-      } else {
-        // Fallback for primitive values or when getId fails.
-        // NOTE(ZaymonFC): After drag and drop, pragmatic internally serializes drop targets which breaks reference equality.
-        // You must provide an `getId` function that returns a stable identifier for your items.
-        return a === b;
-      }
-    },
-    [getId],
-  );
-
-  const [state, setState] = useState<ListContext<T>['state']>(idle);
-  useEffect(() => {
-    if (!items) {
-      return;
-    }
-
-    return monitorForElements({
-      canMonitor: ({ source }) => isItem?.(source.data) ?? false,
-      onDrop: ({ location, source }) => {
-        const target = location.current.dropTargets[0];
-        if (!target) {
-          return;
-        }
-
-        const sourceData = source.data;
-        const targetData = target.data;
-        if (!isItem?.(sourceData) || !isItem?.(targetData)) {
-          return;
-        }
-
-        const sourceIdx = items.findIndex((item) => isEqual(item, sourceData as T));
-        const targetIdx = items.findIndex((item) => isEqual(item, targetData as T));
-        if (targetIdx < 0 || sourceIdx < 0) {
-          return;
-        }
-        const closestEdgeOfTarget = extractClosestEdge(targetData);
-        const destinationIndex = getReorderDestinationIndex({
-          closestEdgeOfTarget,
-          startIndex: sourceIdx,
-          indexOfTarget: targetIdx,
-          axis: 'vertical',
-        });
-
-        onMove?.(sourceIdx, destinationIndex);
-      },
-    });
-  }, [items, isEqual, onMove]);
-
-  return (
-    <ListProvider {...{ state, setState, isItem, ...props }}>{children?.({ state, items: items ?? [] })}</ListProvider>
-  );
-};

package/src/components/List/index.ts

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

package/src/components/List/testing.ts

@@ -1,31 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-
-import { Obj } from '@dxos/echo';
-import { random } from '@dxos/random';
-
-export const TestItemSchema = Schema.Struct({
-  id: Obj.ID,
-  name: Schema.String,
-});
-
-export type TestItemType = Schema.Schema.Type<typeof TestItemSchema>;
-
-export const TestList = Schema.Struct({
-  items: Schema.mutable(Schema.Array(TestItemSchema)),
-});
-
-export type TestList = Schema.Schema.Type<typeof TestList>;
-
-export const createList = (n = 10): TestList => ({
-  items: random.helpers.multiple(
-    () => ({
-      id: random.string.uuid(),
-      name: random.commerce.productName(),
-    }),
-    { count: n },
-  ),
-});

package/src/components/RowList/RowList.stories.tsx

@@ -1,163 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useState } from 'react';
-
-import { random } from '@dxos/random';
-import { Input, Panel, Toolbar } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-
-import { Row, RowList } from './RowList';
-
-random.seed(1);
-
-type TestItem = { id: string; name: string; description: string };
-
-const allItems: TestItem[] = Array.from({ length: 24 }, (_, i) => ({
-  id: `item-${i}`,
-  name: random.commerce.productName(),
-  description: random.lorem.sentences(2),
-}));
-
-//
-// Single configurable story for the basic-listbox variants
-// (Default / Thin / WithDisabled). MasterDetail and WithToolbar
-// diverge structurally and keep their own render functions per
-// AUDIT.md §11.
-//
-
-type StoryArgs = {
-  /** Items to render. Defaults to the full 24-item catalog. */
-  items?: TestItem[];
-  /** Forwards to `RowList.Viewport thin`. */
-  thin?: boolean;
-  /** Forwards to `RowList.Viewport padding`. */
-  padding?: boolean;
-  /** Index into `items` that should render disabled. */
-  disabledIndex?: number;
-  /** Render the description line under each row's name. */
-  showDescription?: boolean;
-};
-
-const DefaultStory = ({
-  items = allItems,
-  thin = false,
-  padding = false,
-  disabledIndex,
-  showDescription = true,
-}: StoryArgs = {}) => {
-  const [selected, setSelected] = useState<string | undefined>(items[0]?.id);
-  return (
-    <RowList.Root selectedId={selected} onSelectChange={setSelected}>
-      <RowList.Viewport thin={thin} padding={padding}>
-        <RowList.Content aria-label='Items'>
-          {items.map((item, i) => {
-            const disabled = i === disabledIndex;
-            return (
-              <Row key={item.id} id={item.id} disabled={disabled}>
-                <div className='font-medium'>
-                  {item.name}
-                  {disabled && ' (disabled)'}
-                </div>
-                {showDescription && <div className='text-sm text-description line-clamp-1'>{item.description}</div>}
-              </Row>
-            );
-          })}
-        </RowList.Content>
-      </RowList.Viewport>
-    </RowList.Root>
-  );
-};
-
-//
-// Master/detail — list is one pane of a layout.
-//
-
-const MasterDetailStory = () => {
-  const [selected, setSelected] = useState<string | undefined>(allItems[0].id);
-  const detail = allItems.find(({ id }) => id === selected);
-  return (
-    <div className='dx-container grid grid-cols-[20rem_1fr] divide-x divide-separator'>
-      <RowList.Root selectedId={selected} onSelectChange={setSelected}>
-        <RowList.Viewport>
-          <RowList.Content aria-label='Items'>
-            {allItems.map((item) => (
-              <Row key={item.id} id={item.id}>
-                <div className='font-medium'>{item.name}</div>
-              </Row>
-            ))}
-          </RowList.Content>
-        </RowList.Viewport>
-      </RowList.Root>
-      <div role='region' aria-label='Detail' className='dx-container p-4 overflow-auto'>
-        {detail && (
-          <>
-            <h2 className='text-lg font-semibold'>{detail.name}</h2>
-            <p className='text-description mt-2'>{detail.description}</p>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
-
-//
-// Toolbar + viewport siblings — Root is headless, so layout is the
-// caller's responsibility. `Panel` is the canonical chrome wrapper.
-//
-
-const WithToolbarStory = () => {
-  const [selected, setSelected] = useState<string | undefined>(allItems[0].id);
-  const [filter, setFilter] = useState('');
-  const filtered = allItems.filter((item) => item.name.toLowerCase().includes(filter.toLowerCase()));
-  return (
-    <RowList.Root selectedId={selected} onSelectChange={setSelected}>
-      <Panel.Root>
-        <Panel.Toolbar asChild>
-          <Toolbar.Root>
-            <Input.Root>
-              <Input.Label srOnly>Filter items</Input.Label>
-              <Input.TextInput
-                placeholder='Filter…'
-                value={filter}
-                onChange={(event) => setFilter(event.target.value)}
-              />
-            </Input.Root>
-          </Toolbar.Root>
-        </Panel.Toolbar>
-        <Panel.Content asChild>
-          <RowList.Viewport>
-            <RowList.Content aria-label='Items'>
-              {filtered.map((item) => (
-                <Row key={item.id} id={item.id}>
-                  {item.name}
-                </Row>
-              ))}
-            </RowList.Content>
-          </RowList.Viewport>
-        </Panel.Content>
-      </Panel.Root>
-    </RowList.Root>
-  );
-};
-
-const meta = {
-  title: 'ui/react-ui-list/RowList',
-  render: (args) => <DefaultStory {...args} />,
-  decorators: [withTheme(), withLayout({ layout: 'column' })],
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<StoryArgs>;
-
-export default meta;
-
-type Story = StoryObj<StoryArgs>;
-
-export const Default: Story = {};
-export const Thin: Story = { args: { thin: true, padding: true, showDescription: false } };
-export const WithDisabled: Story = { args: { items: allItems.slice(0, 6), disabledIndex: 2 } };
-export const MasterDetail: Story = { render: () => <MasterDetailStory /> };
-export const WithToolbar: Story = { render: () => <WithToolbarStory /> };