@dxos/react-ui-table 0.4.9 → 0.4.10-main.0be5154

package/src/components/ColumnMenu.tsx

@@ -1,18 +1,17 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2024 DXOS.org
 //
 
-import { Check, Trash, X, GearSix } from '@phosphor-icons/react';
-import { type HeaderContext, type RowData } from '@tanstack/react-table';
-import React, { type FC, type PropsWithChildren, useRef, useState } from 'react';
+import { X, GearSix, CaretDown, ArrowDown, ArrowUp } from '@phosphor-icons/react';
+import { type SortDirection, type HeaderContext, type RowData } from '@tanstack/react-table';
+import React, { useRef, useState, useCallback } from 'react';
 
-import { Button, DensityProvider, Input, Popover, Select, Separator, useTranslation } from '@dxos/react-ui';
+import { Button, DensityProvider, Popover, DropdownMenu } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
-import { safeParseInt } from '@dxos/util';
 
-import { SortButton } from './SortButton';
-import { type TableDef, type ColumnProps, type ColumnType } from '../schema';
-import { translationKey } from '../translations';
+import { ColumnSettingsForm } from './ColumnSettingsForm';
+import { useColumnSorting } from './hooks/useColumnSorting';
+import { type TableDef, type ColumnProps } from '../schema';
 
 export type ColumnMenuProps<TData extends RowData, TValue> = {
   context: HeaderContext<TData, TValue>;
@@ -25,224 +24,143 @@ export type ColumnMenuProps<TData extends RowData, TValue> = {
 
 export const ColumnMenu = <TData extends RowData, TValue>({ column, ...props }: ColumnMenuProps<TData, TValue>) => {
   const title = column.label?.length ? column.label : column.id;
-
   const header = props.context.header;
 
-  const canSort = header.column.getCanSort();
-  const sortDirection = header.column.getIsSorted();
-  const toggleSort = header.column.getToggleSortingHandler();
+  const { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort } = useColumnSorting(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 gap-2'>
-      <div className='flex-1 min-is-0 truncate' title={title}>
-        {title}
-      </div>
-      <div className='flex gap-0'>
-        {canSort && toggleSort && <SortButton sortDirection={sortDirection} onClick={toggleSort} />}
-        <ColumnPanel {...props} column={column} />
+    <div className='flex items-center justify-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'>
+                <CaretDown className={getSize(4)} />
+              </Button>
+            </Popover.Anchor>
+          </DropdownMenu.Trigger>
+
+          <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 !== false && (
+                    <DropdownMenu.Item onClick={onClearSort}>
+                      <span className='grow'>Clear sort</span>
+                      <span className='opacity-50'>
+                        <X className={getSize(4)} />
+                      </span>
+                    </DropdownMenu.Item>
+                  )}
+                </>
+              )}
+              <DropdownMenu.Item onClick={onOpenColumnSettings}>
+                <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>
+
+          <ColumnSettingsPanel {...props} column={column} onClose={() => setIsColumnSettingsOpen(false)} />
+        </Popover.Root>
+      </DropdownMenu.Root>
     </div>
   );
 };
 
-const Section: FC<PropsWithChildren & { className?: string }> = ({ children, className }) => (
-  <div role='none' className={mx('p-2', className)}>
-    {children}
-  </div>
-);
-
-export const ColumnPanel = <TData extends RowData, TValue>({
-  context,
+export const ColumnSettingsPanel = <TData extends RowData, TValue>({
   tableDefs,
   tableDef,
   column,
   onUpdate,
   onDelete,
-}: ColumnMenuProps<TData, TValue>) => {
-  const [open, setOpen] = useState(false);
-  const [prop, setProp] = useState(column.id);
-  const [refTable, setRefTable] = useState(column.refTable);
-  const [refProp, setRefProp] = useState(column.refProp);
-  const [type, setType] = useState(String(column.type));
-  const [label, setLabel] = useState(column.label);
-  const [digits, setDigits] = useState(String(column.digits ?? '0'));
-  const propRef = useRef<HTMLInputElement>(null);
-  const { t } = useTranslation(translationKey);
-
-  const handleCancel = () => {
-    setProp(column.id);
-    setOpen(false);
-  };
-
-  const handleSave = () => {
-    // Check valid.
-    if (!prop.length || !prop.match(/^[a-zA-Z_].+/i)) {
-      propRef.current?.focus();
-      return;
-    }
-
-    // If already exists then check same type.
-    const current = tableDef.columns.find((c) => c.id !== column.id && c.id === prop);
-    if (current) {
-      // TODO(burdon): Allow multiple columns with different refProps. Ensure correct table prop is updated.
-      if (current.type !== 'ref' /* || current.ref !== refTable */) {
-        // TODO(burdon): Show error.
-        propRef.current?.focus();
-        return;
-      }
-    }
-
-    onUpdate?.(prop, {
-      id: prop, // TODO(burdon): Make unique.
-      prop,
-      label,
-      type: type as ColumnProps['type'],
-      refTable,
-      refProp,
-      digits: safeParseInt(digits),
-    });
+  onClose,
+}: ColumnMenuProps<TData, TValue> & { onClose: () => void }) => (
+  <Popover.Portal>
+    <Popover.Content>
+      <Popover.Viewport classNames='w-60'>
+        <DensityProvider density='fine'>
+          <ColumnSettingsForm
+            column={column}
+            tableDefs={tableDefs}
+            tableDef={tableDef}
+            onUpdate={onUpdate}
+            onDelete={onDelete}
+            onClose={onClose}
+          />
+        </DensityProvider>
+      </Popover.Viewport>
+      <Popover.Arrow />
+    </Popover.Content>
+  </Popover.Portal>
+);
 
-    setOpen(false);
-  };
+export const SortIndicator = ({
+  direction,
+  onClick,
+}: {
+  direction: SortDirection | false;
+  onClick: (e: any) => void;
+}) => {
+  if (direction === false) {
+    return null;
+  }
+
+  let icon;
+
+  switch (direction) {
+    case 'asc':
+      icon = <ArrowUp className={getSize(3)} />;
+      break;
+    case 'desc':
+      icon = <ArrowDown className={getSize(3)} />;
+      break;
+  }
 
   return (
-    <Popover.Root open={open} onOpenChange={(nextOpen) => setOpen(nextOpen)}>
-      <Popover.Trigger asChild>
-        <Button variant='ghost'>
-          <GearSix className={mx(getSize(4), 'rotate-90')} />
-        </Button>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content>
-          <Popover.Viewport classNames='w-60'>
-            <DensityProvider density='fine'>
-              <div className='flex flex-col gap-1'>
-                <Section>
-                  <Input.Root>
-                    <Input.Label classNames='mbe-1'>{t('column label label')}</Input.Label>
-                    <Input.TextInput
-                      placeholder='Column label'
-                      value={label ?? ''}
-                      onChange={(event) => setLabel(event.target.value)}
-                      autoFocus
-                    />
-                  </Input.Root>
-                  <Input.Root>
-                    <Input.Label classNames='mbe-1 mbs-3'>{t('property key label')}</Input.Label>
-                    <Input.TextInput
-                      ref={propRef}
-                      placeholder='Property key'
-                      // TODO(burdon): Provide hooks for value normalization, ENTER, ESC, etc.
-                      value={prop ?? ''}
-                      onChange={(event) => setProp(event.target.value.replace(/[^\w_]/g, ''))}
-                    />
-                  </Input.Root>
-                  <Input.Root>
-                    <Input.Label classNames='mbe-1 mbs-3'>{t('column type label')}</Input.Label>
-                    <Select.Root value={type} onValueChange={setType}>
-                      <Select.TriggerButton placeholder='Type' classNames='is-full' />
-                      <Select.Portal>
-                        <Select.Content>
-                          <Select.Viewport>
-                            {(['number', 'boolean', 'string', 'ref'] as ColumnType[]).map((type) => (
-                              <Select.Option key={type} value={type}>
-                                {t(`${type} column type label`)}
-                              </Select.Option>
-                            ))}
-                          </Select.Viewport>
-                        </Select.Content>
-                      </Select.Portal>
-                    </Select.Root>
-                  </Input.Root>
-                </Section>
-
-                {type === 'number' && (
-                  <>
-                    <Section>
-                      <Input.Root>
-                        <Input.Label classNames='mbe-1 mbs-3'>{t('digits label')}</Input.Label>
-                        {/* TODO(burdon): Constrain input to numbers. */}
-                        <Input.TextInput value={digits ?? ''} onChange={(event) => setDigits(event.target.value)} />
-                      </Input.Root>
-                    </Section>
-                  </>
-                )}
-
-                {/* TODO(burdon): Selectors on same line. */}
-                {type === 'ref' && (
-                  <>
-                    <Section>
-                      <Input.Root>
-                        <Input.Label classNames='mbe-1 mbs-3'>Table</Input.Label>
-                        <Select.Root value={refTable} onValueChange={setRefTable}>
-                          <Select.TriggerButton placeholder='Table' classNames='is-full' />
-                          <Select.Portal>
-                            <Select.Content>
-                              <Select.Viewport>
-                                {tableDefs
-                                  .filter((t) => t.id !== tableDef.id)
-                                  .map(({ id, name }) => (
-                                    <Select.Option key={id} value={id}>
-                                      {name ?? id}
-                                    </Select.Option>
-                                  ))}
-                              </Select.Viewport>
-                            </Select.Content>
-                          </Select.Portal>
-                        </Select.Root>
-                      </Input.Root>
-
-                      {refTable && (
-                        <Input.Root>
-                          <Input.Label classNames='mbe-1 mbs-3'>Table property</Input.Label>
-                          <Select.Root value={refProp} onValueChange={setRefProp}>
-                            <Select.TriggerButton placeholder='Property' classNames='is-full' />
-                            <Select.Portal>
-                              <Select.Content>
-                                <Select.Viewport>
-                                  {tableDefs
-                                    .find((tableDef) => tableDef.id === refTable)
-                                    ?.columns.map(({ id, label }) => (
-                                      <Select.Option key={id} value={id}>
-                                        {label ?? id}
-                                      </Select.Option>
-                                    ))}
-                                </Select.Viewport>
-                              </Select.Content>
-                            </Select.Portal>
-                          </Select.Root>
-                        </Input.Root>
-                      )}
-                    </Section>
-                  </>
-                )}
-
-                <Separator classNames='mli-2' />
-
-                <Section className='space-b-1.5'>
-                  {/* TODO(burdon): Style as DropdownMenuItem. */}
-                  <Button variant='primary' classNames='is-full flex gap-2' onClick={handleSave}>
-                    <span>{t('save label')}</span>
-                    <div className='grow' />
-                    <Check className={getSize(5)} />
-                  </Button>
-                  <Button classNames='is-full flex gap-2' onClick={handleCancel}>
-                    <span>{t('cancel label', { ns: 'os' })}</span>
-                    <div className='grow' />
-                    <X className={getSize(5)} />
-                  </Button>
-                  <Button classNames='is-full flex gap-2' onClick={() => onDelete?.(column.id)}>
-                    <span>{t('delete label')}</span>
-                    <div className='grow' />
-                    <Trash className={getSize(5)} />
-                  </Button>
-                </Section>
-              </div>
-            </DensityProvider>
-          </Popover.Viewport>
-          <Popover.Arrow />
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
+    <div onClick={onClick} className='flex items-center cursor-pointer'>
+      {icon}
+    </div>
   );
 };

package/src/components/ColumnSettingsForm.tsx

@@ -0,0 +1,206 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Check, Trash, X } from '@phosphor-icons/react';
+import React, { type FC, type PropsWithChildren, useRef, useState } from 'react';
+
+import { Button, Input, Select, Separator, useTranslation } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+import { safeParseInt } from '@dxos/util';
+
+import { type TableDef, type ColumnProps, type ColumnType } from '../schema';
+import { translationKey } from '../translations';
+
+const Section: FC<PropsWithChildren & { className?: string }> = ({ children, className }) => (
+  <div role='none' className={mx('p-2', className)}>
+    {children}
+  </div>
+);
+
+export const ColumnSettingsForm = ({
+  column,
+  tableDef,
+  tableDefs,
+  onUpdate,
+  onDelete,
+  onClose,
+}: {
+  column: ColumnProps;
+  tableDef: TableDef;
+  tableDefs: TableDef[];
+  onUpdate?: ((id: string, column: ColumnProps) => void) | undefined;
+  onDelete?: ((id: string) => void) | undefined;
+  onClose: () => void;
+}) => {
+  const [prop, setProp] = useState(column.id);
+  const [refTable, setRefTable] = useState(column.refTable);
+  const [refProp, setRefProp] = useState(column.refProp);
+  const [type, setType] = useState(String(column.type));
+  const [label, setLabel] = useState(column.label);
+  const [digits, setDigits] = useState(String(column.digits ?? '0'));
+  const propRef = useRef<HTMLInputElement>(null);
+  const { t } = useTranslation(translationKey);
+
+  const handleCancel = () => {
+    setProp(column.id);
+    onClose;
+  };
+
+  const handleSave = () => {
+    // Check valid.
+    if (!prop.length || !prop.match(/^[a-zA-Z_].+/i)) {
+      propRef.current?.focus();
+      return;
+    }
+
+    // If already exists then check same type.
+    const current = tableDef.columns.find((c) => c.id !== column.id && c.id === prop);
+
+    if (current) {
+      // TODO(burdon): Allow multiple columns with different refProps. Ensure correct table prop is updated.
+      if (current.type !== 'ref' /* || current.ref !== refTable */) {
+        // TODO(burdon): Show error.
+        propRef.current?.focus();
+        return;
+      }
+    }
+
+    onUpdate?.(prop, {
+      id: prop, // TODO(burdon): Make unique.
+      prop,
+      label,
+      type: type as ColumnProps['type'],
+      refTable,
+      refProp,
+      digits: safeParseInt(digits),
+    });
+
+    onClose();
+  };
+
+  return (
+    <div className='flex flex-col gap-1'>
+      <Section>
+        <Input.Root>
+          <Input.Label classNames='mbe-1'>{t('column label label')}</Input.Label>
+          <Input.TextInput
+            placeholder='Column label'
+            value={label ?? ''}
+            onChange={(event) => setLabel(event.target.value)}
+            autoFocus
+          />
+        </Input.Root>
+        <Input.Root>
+          <Input.Label classNames='mbe-1 mbs-3'>{t('property key label')}</Input.Label>
+          <Input.TextInput
+            ref={propRef}
+            placeholder='Property key'
+            // TODO(burdon): Provide hooks for value normalization, ENTER, ESC, etc.
+            value={prop ?? ''}
+            onChange={(event) => setProp(event.target.value.replace(/[^\w_]/g, ''))}
+          />
+        </Input.Root>
+        <Input.Root>
+          <Input.Label classNames='mbe-1 mbs-3'>{t('column type label')}</Input.Label>
+          <Select.Root value={type} onValueChange={setType}>
+            <Select.TriggerButton placeholder='Type' classNames='is-full' />
+            <Select.Portal>
+              <Select.Content>
+                <Select.Viewport>
+                  {(['number', 'boolean', 'string', 'ref'] as ColumnType[]).map((type) => (
+                    <Select.Option key={type} value={type}>
+                      {t(`${type} column type label`)}
+                    </Select.Option>
+                  ))}
+                </Select.Viewport>
+              </Select.Content>
+            </Select.Portal>
+          </Select.Root>
+        </Input.Root>
+      </Section>
+
+      {type === 'number' && (
+        <>
+          <Section>
+            <Input.Root>
+              <Input.Label classNames='mbe-1 mbs-3'>{t('digits label')}</Input.Label>
+              {/* TODO(burdon): Constrain input to numbers. */}
+              <Input.TextInput value={digits ?? ''} onChange={(event) => setDigits(event.target.value)} />
+            </Input.Root>
+          </Section>
+        </>
+      )}
+
+      {/* TODO(burdon): Selectors on same line. */}
+      {type === 'ref' && (
+        <>
+          <Section>
+            <Input.Root>
+              <Input.Label classNames='mbe-1 mbs-3'>Table</Input.Label>
+              <Select.Root value={refTable} onValueChange={setRefTable}>
+                <Select.TriggerButton placeholder='Table' classNames='is-full' />
+                <Select.Portal>
+                  <Select.Content>
+                    <Select.Viewport>
+                      {tableDefs
+                        .filter((t) => t.id !== tableDef.id)
+                        .map(({ id, name }) => (
+                          <Select.Option key={id} value={id}>
+                            {name ?? id}
+                          </Select.Option>
+                        ))}
+                    </Select.Viewport>
+                  </Select.Content>
+                </Select.Portal>
+              </Select.Root>
+            </Input.Root>
+
+            {refTable && (
+              <Input.Root>
+                <Input.Label classNames='mbe-1 mbs-3'>Table property</Input.Label>
+                <Select.Root value={refProp} onValueChange={setRefProp}>
+                  <Select.TriggerButton placeholder='Property' classNames='is-full' />
+                  <Select.Portal>
+                    <Select.Content>
+                      <Select.Viewport>
+                        {tableDefs
+                          .find((tableDef) => tableDef.id === refTable)
+                          ?.columns.map(({ id, label }) => (
+                            <Select.Option key={id} value={id}>
+                              {label ?? id}
+                            </Select.Option>
+                          ))}
+                      </Select.Viewport>
+                    </Select.Content>
+                  </Select.Portal>
+                </Select.Root>
+              </Input.Root>
+            )}
+          </Section>
+        </>
+      )}
+
+      <Separator classNames='mli-2' />
+
+      <Section className='space-b-1.5'>
+        {/* TODO(burdon): Style as DropdownMenuItem. */}
+        <Button variant='primary' classNames='is-full flex gap-2' onClick={handleSave}>
+          <span>{t('save label')}</span>
+          <div className='grow' />
+          <Check className={getSize(5)} />
+        </Button>
+        <Button classNames='is-full flex gap-2' onClick={handleCancel}>
+          <span>{t('cancel label', { ns: 'os' })}</span>
+          <div className='grow' />
+          <X className={getSize(5)} />
+        </Button>
+        <Button classNames='is-full flex gap-2' onClick={() => onDelete?.(column.id)}>
+          <span>{t('delete label')}</span>
+          <div className='grow' />
+          <Trash className={getSize(5)} />
+        </Button>
+      </Section>
+    </div>
+  );
+};

package/src/components/Table/Table.stories.tsx

@@ -251,6 +251,37 @@ export const Editable = {
   },
 };
 
+export const PinnedLastRow = {
+  render: () => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const [items, setItems] = useState<Item[]>(createItems(200));
+
+    const onUpdate: ValueUpdater<Item, any> = useCallback(
+      (item, prop, value) => setItems((items) => updateItems(items, item.publicKey, prop, value)),
+      [setItems],
+    );
+
+    const columns = useMemo(() => makeColumns(onUpdate), [onUpdate]);
+
+    return (
+      <div ref={containerRef} className='fixed inset-0 overflow-auto'>
+        <Table<Item>
+          role='grid'
+          rowsSelectable='multi'
+          keyAccessor={(row) => row.publicKey.toHex()}
+          columns={columns}
+          data={items}
+          fullWidth
+          stickyHeader
+          border
+          getScrollElement={() => containerRef.current}
+          pinLastRow
+        />
+      </div>
+    );
+  },
+};
+
 export const Resizable = {
   render: () => {
     const containerRef = useRef<HTMLDivElement | null>(null);

package/src/components/Table/Table.tsx

@@ -27,6 +27,7 @@ import { TableFooter } from './TableFooter';
 import { TableHead } from './TableHead';
 import { type TableProps } from './props';
 import { groupTh, tableRoot } from '../../theme';
+import { usePinLastRow } from '../hooks/usePinLastRow';
 
 export const Table = <TData extends RowData>(props: TableProps<TData>) => {
   const {
@@ -149,17 +150,7 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
     onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
   }, [onDataSelectionChange, rowSelection, table]);
 
-  useEffect(() => {
-    if (!pinLastRow) {
-      return;
-    }
-
-    // Clear row pinning
-    table.resetRowPinning();
-
-    const rows = table.getRowModel().rows;
-    rows[rows.length - 1].pin('bottom');
-  }, [pinLastRow, table, data]);
+  usePinLastRow(pinLastRow, table, data, getScrollElement);
 
   // Create additional expansion column if all columns have fixed width.
   const expand = false; // columns.map((column) => column.size).filter(Boolean).length === columns?.length;
@@ -239,11 +230,9 @@ const VirtualizedTableContent = ({
   const centerRows = table.getCenterRows();
   const pinnedRows = table.getBottomRows();
 
-  const rows = [...centerRows, ...pinnedRows];
-
   const { getTotalSize, getVirtualItems } = useVirtualizer({
     getScrollElement,
-    count: rows.length,
+    count: centerRows.length,
     overscan: 8,
     estimateSize: () => 40,
   });
@@ -254,6 +243,8 @@ const VirtualizedTableContent = ({
   const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;
 
+  const rowsToRender = [...virtualRows.map((virtualRow) => centerRows[virtualRow.index]), ...pinnedRows];
+
   return (
     <>
       {paddingTop > 0 && (
@@ -263,7 +254,7 @@ const VirtualizedTableContent = ({
           </tr>
         </tbody>
       )}
-      <TableBody rows={virtualRows.map((virtualRow) => rows[virtualRow.index])} />
+      <TableBody rows={rowsToRender} />
       {paddingBottom > 0 && (
         <tbody role='none'>
           <tr role='none'>