@dxos/react-ui-table 0.8.1-staging.5be625a → 0.8.1-staging.97aedb1

package/src/deprecated/components/Cell/Cell.tsx

@@ -1,88 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { useFocusableGroup } from '@fluentui/react-tabster';
-import { type Cell as CellType, type RowData } from '@tanstack/react-table';
-import React, { useCallback, type PropsWithChildren, type KeyboardEvent } from 'react';
-
-import { tdRoot } from '../../theme';
-import { useTableContext } from '../Table/TableContext';
-
-type CellProps<TData extends RowData, TValue> = PropsWithChildren<{
-  cell: CellType<TData, TValue>;
-}>;
-
-const CELL_NAME = 'Cell';
-
-const FocusableCell = <TData extends RowData, TValue>({ cell, children }: CellProps<TData, TValue>) => {
-  const tableContext = useTableContext();
-  const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
-
-  const pinned = tableContext.table.getState().rowPinning?.bottom?.includes(cell.row.id);
-  const className = tdRoot({ ...tableContext, pinned }, cell.column.columnDef.meta?.cell?.classNames);
-
-  const handleKeyDown = useCallback(({ key, currentTarget }: KeyboardEvent<HTMLTableCellElement>) => {
-    if (key !== 'Enter') {
-      return;
-    }
-
-    const currentRow = currentTarget.closest('tr');
-    if (!currentRow) {
-      return;
-    }
-
-    const cellIndex = Array.from(currentRow.cells || []).indexOf(currentTarget);
-
-    const nextSibling = currentRow.nextElementSibling;
-    if (!(nextSibling instanceof HTMLTableRowElement)) {
-      let depth = 0;
-      // Poll for the new 'add row' row to be added to the DOM.
-      const pollForNewRow = () => {
-        const newNextSibling = currentRow.nextElementSibling;
-        if (newNextSibling instanceof HTMLTableRowElement) {
-          const nextCell = newNextSibling.cells[cellIndex];
-          // Find the input within next cell and focus it.
-          const input = nextCell.querySelector('input');
-          if (input) {
-            input.focus();
-          }
-
-          // TODO(Zan): Use the same utility that sheets uses.
-          // Scroll current row into view after it's been hidden behind the sticky add-row row.
-          currentRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        } else if (depth++ < 100) {
-          requestAnimationFrame(pollForNewRow);
-        }
-      };
-      requestAnimationFrame(pollForNewRow);
-    }
-  }, []);
-
-  return (
-    <td data-testid='table.cell' tabIndex={0} {...focusableGroupAttrs} className={className} onKeyDown={handleKeyDown}>
-      {children}
-    </td>
-  );
-};
-
-const StaticCell = <TData extends RowData, TValue>({ cell, children }: CellProps<TData, TValue>) => {
-  const tableContext = useTableContext();
-  return (
-    <td data-testid='table.cell' className={tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames)}>
-      {children}
-    </td>
-  );
-};
-
-const Cell = <TData extends RowData, TValue>({ cell, children }: CellProps<TData, TValue>) => {
-  const { isGrid } = useTableContext();
-  const Root = isGrid ? FocusableCell : StaticCell;
-  return <Root cell={cell}>{children}</Root>;
-};
-
-Cell.displayName = CELL_NAME;
-
-export { Cell };
-
-export type { CellProps };

package/src/deprecated/components/Cell/CellCombobox.tsx

@@ -1,103 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { CaretDown } from '@phosphor-icons/react';
-import { type RowData } from '@tanstack/react-table';
-import React, { useCallback, useState } from 'react';
-
-import { Popover, useTranslation } from '@dxos/react-ui';
-import { PopoverCombobox } from '@dxos/react-ui-searchlist';
-import { descriptionText, getSize, mx, staticPlaceholderText } from '@dxos/react-ui-theme';
-
-import { type SearchListQueryModel } from '../../helpers';
-import { translationKey } from '../../translations';
-
-export type ComboboxCellItems<TData extends RowData> = Record<string, { label: string; data: TData }>;
-
-const initialItems = <TData extends RowData>(model: SearchListQueryModel<TData>, value?: TData) =>
-  value
-    ? {
-        [model.getId(value)]: { label: model.getText(value), data: value },
-      }
-    : {};
-
-export const CellCombobox = <TData extends RowData>({
-  model,
-  value,
-  onValueChange,
-}: {
-  model: SearchListQueryModel<TData>;
-  value: TData;
-  onValueChange: (value: TData) => void;
-}) => {
-  const { t } = useTranslation(translationKey);
-  const [items, setItems] = useState<ComboboxCellItems<TData>>(initialItems(model, value));
-  const [loading, setLoading] = useState(false);
-  const [searchInputValue, setSearchInputValue] = useState('');
-  const handleSearchInputValueChange = async (text?: string) => {
-    setSearchInputValue(text ?? '');
-    setLoading(true);
-    const items = await model.query(text);
-    setItems(
-      items.reduce(
-        (acc: ComboboxCellItems<TData>, item) => {
-          acc[model.getId(item)] = {
-            label: model.getText(item),
-            data: item,
-          };
-          return acc;
-        },
-        initialItems(model, value),
-      ),
-    );
-    setLoading(false);
-  };
-
-  const handleValueChange = useCallback(
-    (id: string) => {
-      onValueChange(items[id]?.data);
-    },
-    [items, onValueChange],
-  );
-
-  return (
-    <PopoverCombobox.Root placeholder={t('no selection label')}>
-      <PopoverCombobox.Trigger variant='ghost' classNames='is-full rounded-none ring-inset'>
-        {value ? (
-          <>
-            <span
-              className={mx(
-                'font-normal text-start text-baseText flex-1 min-is-0 truncate mie-2',
-                !value && staticPlaceholderText,
-              )}
-            >
-              {model.getText(value)}
-            </span>
-            <CaretDown weight='bold' className={getSize(3)} />
-          </>
-        ) : null}
-      </PopoverCombobox.Trigger>
-      <PopoverCombobox.Content shouldFilter={false} classNames='is-[--radix-popover-trigger-width]'>
-        <PopoverCombobox.Input value={searchInputValue} onValueChange={handleSearchInputValueChange} />
-        <PopoverCombobox.List>
-          {searchInputValue.length < 1 ? (
-            <p className={mx('text-center', descriptionText)}>Start typing to search</p>
-          ) : loading ? (
-            <p className={mx('text-center', descriptionText)}>Searching…</p>
-          ) : (
-            <>
-              <PopoverCombobox.Empty classNames={['text-center', descriptionText]}>No results</PopoverCombobox.Empty>
-              {Object.entries(items).map(([id, { label }]) => (
-                <PopoverCombobox.Item key={id} value={id} onSelect={handleValueChange} classNames='truncate'>
-                  {label}
-                </PopoverCombobox.Item>
-              ))}
-            </>
-          )}
-        </PopoverCombobox.List>
-        <Popover.Arrow />
-      </PopoverCombobox.Content>
-    </PopoverCombobox.Root>
-  );
-};

package/src/deprecated/components/Cell/index.ts

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

package/src/deprecated/components/ColumnMenu/ColumnMenu.stories.tsx

@@ -1,129 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type SortDirection } from '@tanstack/react-table';
-import React, { useState } from 'react';
-
-import { TypeEnum } from '@dxos/echo-schema';
-import { withTheme } from '@dxos/storybook-utils';
-
-import { ColumnMenu } from './ColumnMenu';
-import { type ColumnSettingsProps } from './ColumnSettings';
-import { type ColumnDef } from '../../schema';
-
-export default {
-  title: 'ui/react-ui-table/deprecated/ColumnMenu',
-  component: ColumnMenu,
-  decorators: [withTheme],
-};
-
-const defs: Pick<ColumnSettingsProps, 'tableDef' | 'tablesToReference'> = {
-  tableDef: {
-    id: '1',
-    name: 'table 1',
-    columns: [{ id: 'col-1', prop: 'one', type: TypeEnum.String }],
-  },
-  tablesToReference: [
-    {
-      id: '1',
-      name: 'table 1',
-      columns: [{ id: 'col-1', prop: 'one', type: TypeEnum.String }],
-    },
-    {
-      id: '2',
-      name: 'table 2',
-      columns: [{ id: 'col-1', prop: 'two', type: TypeEnum.String }],
-    },
-  ],
-};
-
-const functions: Pick<ColumnSettingsProps, 'onUpdate' | 'onDelete'> = {
-  onUpdate: (...args: any) => console.log('onUpdate args', args),
-  onDelete: (...args: any) => console.log('onDelete args', args),
-};
-
-export const Default = {
-  args: {
-    column: {
-      id: 'test',
-      label: 'test',
-    } as ColumnDef,
-
-    ...defs,
-    ...functions,
-
-    context: {
-      header: {
-        column: {
-          getCanSort: () => true,
-          toggleSorting: (desc?: boolean) => {
-            console.log('toggleSorting', { desc });
-          },
-          getToggleSortingHandler: () => () => {
-            console.log('Sorting handler invoked');
-          },
-          getIsSorted: () => false,
-        },
-      },
-    },
-  },
-  decorators: [
-    withTheme,
-    (Story: any) => (
-      <div className='flex flex-col items-center h-screen w-full overflow-hidden'>
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export const ReactiveSort = {
-  render: () => {
-    const [sort, setSort] = useState<SortDirection | false>(false);
-    const props = {
-      column: {
-        id: 'test',
-        label: 'test',
-      } as ColumnDef,
-      context: {
-        header: {
-          column: {
-            getCanSort: () => true,
-            getIsSorted: () => sort,
-            clearSorting: () => setSort(false),
-            toggleSorting: (desc?: boolean) => {
-              if (desc === undefined) {
-                setSort(false);
-              } else if (desc) {
-                setSort('desc');
-              } else {
-                setSort('asc');
-              }
-            },
-            getToggleSortingHandler: () => () => {
-              if (sort === 'asc') {
-                setSort('desc');
-              } else {
-                setSort(false);
-              }
-            },
-          },
-        },
-      },
-    } as any;
-
-    return (
-      <div className='flex justify-around w-full overflow-hidden'>
-        <div className='grid w-48'>
-          <ColumnMenu {...props} />
-        </div>
-      </div>
-    );
-  },
-};

package/src/deprecated/components/ColumnMenu/ColumnMenu.tsx

@@ -1,182 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { X, GearSix, CaretDown, ArrowDown, ArrowUp, ArrowRight, ArrowLeft } from '@phosphor-icons/react';
-import { type SortDirection, type HeaderContext, type RowData } from '@tanstack/react-table';
-import React, { useRef, useState, useCallback } from 'react';
-
-import { Button, Popover, DropdownMenu } from '@dxos/react-ui';
-import { getSize, mx } from '@dxos/react-ui-theme';
-
-import { ColumnSettings } from './ColumnSettings';
-import { useSortColumn } from '../../hooks';
-import { type TableDef, type ColumnDef } from '../../schema';
-
-export type ColumnMenuProps<TData extends RowData, TValue> = {
-  context: HeaderContext<TData, TValue>;
-  tablesToReference: TableDef[];
-  tableDef: TableDef;
-  column: ColumnDef;
-  columnOrderable: boolean;
-  columnPosition: 'start' | 'end' | undefined;
-  onColumnReorder: (columnId: string, direction: 'left' | 'right') => void;
-  onUpdate?: (id: string, column: ColumnDef) => void;
-  onDelete?: (id: string) => void;
-};
-
-/**
- * @deprecated
- */
-export const ColumnMenu = <TData extends RowData, TValue>({
-  column,
-  columnOrderable,
-  columnPosition,
-  onColumnReorder,
-  ...props
-}: ColumnMenuProps<TData, TValue>) => {
-  const title = column.label?.length ? column.label : column.id;
-  const header = props.context.header;
-
-  const { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort } = useSortColumn(header.column);
-
-  const columnSettingsAnchorRef = useRef<any>(null);
-
-  const [isColumnSettingsOpen, setIsColumnSettingsOpen] = useState(false);
-
-  const shouldPreventFocusOnClose = useRef(false);
-
-  const onOpenColumnSettings = useCallback(() => {
-    shouldPreventFocusOnClose.current = true;
-    setIsColumnSettingsOpen(true);
-  }, [shouldPreventFocusOnClose, setIsColumnSettingsOpen]); // setIsColumnSettingsOpen is a dependency
-
-  const onDropdownCloseAutoFocus = useCallback(
-    (event: Event) => {
-      if (shouldPreventFocusOnClose.current) {
-        event.preventDefault();
-        shouldPreventFocusOnClose.current = false;
-      }
-    },
-    [shouldPreventFocusOnClose],
-  );
-
-  return (
-    <div className='flex items-center justify-between'>
-      <div className='flex items-center gap-1 truncate' title={title}>
-        <SortIndicator direction={sortDirection} onClick={onToggleSort} />
-        <div className='truncate'>{title}</div>
-      </div>
-
-      <DropdownMenu.Root modal={false}>
-        <Popover.Root open={isColumnSettingsOpen} onOpenChange={setIsColumnSettingsOpen} modal={false}>
-          <DropdownMenu.Trigger ref={columnSettingsAnchorRef} asChild>
-            <Popover.Anchor asChild>
-              <Button variant='ghost' data-testid='table.column-menu'>
-                <CaretDown className={getSize(4)} />
-              </Button>
-            </Popover.Anchor>
-          </DropdownMenu.Trigger>
-
-          <DropdownMenu.Portal>
-            <DropdownMenu.Content onCloseAutoFocus={onDropdownCloseAutoFocus} sideOffset={4} collisionPadding={8}>
-              <DropdownMenu.Viewport>
-                {canSort && (
-                  <>
-                    <DropdownMenu.Item onClick={() => onSelectSort('asc')}>
-                      <span className='grow'>Sort ascending</span>
-                      <span className='opacity-50'>
-                        <ArrowUp className={getSize(4)} />
-                      </span>
-                    </DropdownMenu.Item>
-                    <DropdownMenu.Item onClick={() => onSelectSort('desc')}>
-                      <span className='grow'>Sort descending</span>
-                      <span className='opacity-50'>
-                        <ArrowDown className={getSize(4)} />
-                      </span>
-                    </DropdownMenu.Item>
-                    {sortDirection && (
-                      <DropdownMenu.Item onClick={onClearSort}>
-                        <span className='grow'>Clear sort</span>
-                        <span className='opacity-50'>
-                          <X className={getSize(4)} />
-                        </span>
-                      </DropdownMenu.Item>
-                    )}
-                  </>
-                )}
-
-                {columnOrderable && (
-                  <>
-                    {columnPosition !== 'start' && (
-                      <DropdownMenu.Item onClick={() => onColumnReorder(header.column.id, 'left')}>
-                        <span className='grow'>Move left</span>
-                        <span className='opacity-50'>
-                          <ArrowLeft className={mx(getSize(4))} />
-                        </span>
-                      </DropdownMenu.Item>
-                    )}
-                    {columnPosition !== 'end' && (
-                      <DropdownMenu.Item onClick={() => onColumnReorder(header.column.id, 'right')}>
-                        <span className='grow'>Move right</span>
-                        <span className='opacity-50'>
-                          <ArrowRight className={mx(getSize(4))} />
-                        </span>
-                      </DropdownMenu.Item>
-                    )}
-                  </>
-                )}
-
-                <DropdownMenu.Item onClick={onOpenColumnSettings} data-testid='table.open-column-settings'>
-                  <span className='grow'>Column settings</span>
-                  <span className='opacity-50'>
-                    <GearSix className={mx(getSize(4), 'rotate-90')} />
-                  </span>
-                </DropdownMenu.Item>
-              </DropdownMenu.Viewport>
-              <DropdownMenu.Arrow />
-            </DropdownMenu.Content>
-          </DropdownMenu.Portal>
-
-          <Popover.Portal>
-            <Popover.Content>
-              <Popover.Viewport>
-                <ColumnSettings {...props} column={column} onClose={() => setIsColumnSettingsOpen(false)} />
-              </Popover.Viewport>
-              <Popover.Arrow />
-            </Popover.Content>
-          </Popover.Portal>
-        </Popover.Root>
-      </DropdownMenu.Root>
-    </div>
-  );
-};
-
-export const SortIndicator = ({
-  direction,
-  onClick,
-}: {
-  direction: SortDirection | undefined;
-  onClick: (e: any) => void;
-}) => {
-  if (direction === undefined) {
-    return null;
-  }
-
-  let icon;
-
-  switch (direction) {
-    case 'asc':
-      icon = <ArrowUp className={getSize(3)} />;
-      break;
-    case 'desc':
-      icon = <ArrowDown className={getSize(3)} />;
-      break;
-  }
-
-  return (
-    <div onClick={onClick} className='flex items-center cursor-pointer'>
-      {icon}
-    </div>
-  );
-};

package/src/deprecated/components/ColumnMenu/ColumnSettings.stories.tsx

@@ -1,108 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-
-import React from 'react';
-
-import { TypeEnum } from '@dxos/echo-schema';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
-
-import { ColumnSettings, type ColumnSettingsProps } from './ColumnSettings';
-import { type TableDef } from '../../schema';
-import translations from '../../translations';
-
-const DefaultStory = (props: ColumnSettingsProps) => (
-  <div className='flex w-[240px] m-2 p-2 border border-separator rounded'>
-    <ColumnSettings {...props} />
-  </div>
-);
-
-export default {
-  title: 'ui/react-ui-table/deprecated/ColumnSettings',
-  component: ColumnSettings,
-  render: DefaultStory,
-  decorators: [withTheme, withLayout()],
-  parameters: {
-    translations,
-  },
-};
-
-const sampleTableDef: TableDef = {
-  id: '1',
-  name: 'Sample Table',
-  columns: [
-    { id: 'col-1', prop: 'name', type: TypeEnum.String, label: 'Name' },
-    { id: 'col-2', prop: 'age', type: TypeEnum.Number, label: 'Age', digits: 0 },
-  ],
-};
-
-const sampleTablesToReference: TableDef[] = [
-  sampleTableDef,
-  {
-    id: '2',
-    name: 'Reference Table',
-    columns: [
-      { id: 'ref-col-1', prop: 'id', type: TypeEnum.String, label: 'ID' },
-      { id: 'ref-col-2', prop: 'description', type: TypeEnum.String, label: 'Description' },
-    ],
-  },
-];
-
-const defaultArgs: ColumnSettingsProps = {
-  column: {
-    id: 'col-1',
-    prop: 'name',
-    type: TypeEnum.String,
-    label: 'Name',
-  },
-  tableDef: sampleTableDef,
-  tablesToReference: sampleTablesToReference,
-  onUpdate: (id, column) => console.log('onUpdate', { id, column }),
-  onDelete: (id) => console.log('onDelete', id),
-  onClose: () => console.log('onClose'),
-};
-
-export const Default = {
-  args: defaultArgs,
-};
-
-export const NumberColumn = {
-  args: {
-    ...defaultArgs,
-    column: {
-      id: 'col-2',
-      prop: 'age',
-      type: TypeEnum.Number,
-      label: 'Age',
-      digits: 0,
-    },
-  },
-};
-
-export const ReferenceColumn = {
-  args: {
-    ...defaultArgs,
-    column: {
-      id: 'col-3',
-      prop: 'reference',
-      type: TypeEnum.Ref,
-      label: 'Reference',
-      refTable: '2',
-      refProp: 'ref-col-1',
-    },
-  },
-};
-
-export const NewColumn = {
-  args: {
-    ...defaultArgs,
-    column: {
-      id: 'new-col',
-      prop: '',
-      type: TypeEnum.String,
-      label: '',
-    },
-  },
-};