@dxos/react-ui-table 0.3.8-next.a5a9bfc → 0.3.8

package/src/helpers.tsx

@@ -2,36 +2,28 @@
 // Copyright 2023 DXOS.org
 //
 
-import { useFocusFinders } from '@fluentui/react-tabster';
 import { Check, ClipboardText, type Icon, X } from '@phosphor-icons/react';
-import { createColumnHelper, type ColumnDef, type ColumnMeta, type RowData } from '@tanstack/react-table';
+import {
+  createColumnHelper,
+  type ColumnDef,
+  type ColumnMeta,
+  type RowData,
+  type ColumnHelper,
+  type CellContext,
+} from '@tanstack/react-table';
 import format from 'date-fns/format';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import defaultsDeep from 'lodash.defaultsdeep';
 import React, { useRef, useState } from 'react';
 
 import { type PublicKey } from '@dxos/keys';
-import { Input, Tooltip } from '@dxos/react-ui';
+import { type ClassNameValue, Input, Tooltip } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 import { stripUndefinedValues } from '@dxos/util';
 
-import { ComboboxCell } from './components';
-
-// TODO(burdon): Factor out hack to find next focusable element (extend useFocusFinders)?
-const findNextFocusable = (
-  findFirstFocusable: (container: HTMLElement) => HTMLElement | null | undefined,
-  container: HTMLElement,
-): HTMLElement | undefined => {
-  const next = findFirstFocusable(container as any);
-  if (next) {
-    if (next?.tagName === 'INPUT') {
-      return next;
-    }
-    if (container.nextElementSibling) {
-      return findNextFocusable(findFirstFocusable, container.nextSibling as any);
-    }
-  }
-};
+import { CellCombobox } from './components';
+import { useTableContext } from './components/Table/TableContext';
+import { textPadding } from './theme';
 
 export type ValueUpdater<TData extends RowData, TValue> = (row: TData, id: string, value: TValue) => void;
 
@@ -46,22 +38,23 @@ export const createColumnBuilder = <TData extends RowData>() => ({
 export type BaseColumnOptions<TData, TValue> = Partial<ColumnDef<TData, TValue>> & {
   meta?: ColumnMeta<TData, TValue>;
   label?: string;
-  className?: string;
+  classNames?: ClassNameValue;
   onUpdate?: ValueUpdater<TData, TValue | undefined>;
 };
 
 // TODO(burdon): Better abstraction?
-export type SelectQueryModel<TData extends RowData> = {
+export type SearchListQueryModel<TData extends RowData> = {
   getId(object: TData): string;
   getText(object: TData): string;
   query(text?: string): Promise<TData[]>;
 };
 
-export type SelectColumnOptions<TData extends RowData> = BaseColumnOptions<TData, any> & {
-  model: SelectQueryModel<TData>;
+export type ComboboxColumnOptions<TData extends RowData> = BaseColumnOptions<TData, any> & {
+  model: SearchListQueryModel<TData>;
 };
 
 export type StringColumnOptions<TData extends RowData> = BaseColumnOptions<TData, string> & {};
+export type SelectRowColumnOptions<TData extends RowData> = BaseColumnOptions<TData, string> & {};
 
 export type NumberColumnOptions<TData extends RowData> = BaseColumnOptions<TData, number> & {
   digits?: number;
@@ -76,7 +69,7 @@ export type DateColumnOptions<TData extends RowData> = BaseColumnOptions<TData,
   relative?: boolean;
 };
 
-export type BooleanColumnOptions<TData extends RowData> = BaseColumnOptions<TData, boolean> & {};
+export type SwitchColumnOptions<TData extends RowData> = BaseColumnOptions<TData, boolean> & {};
 
 export type IconColumnOptions<TData extends RowData> = BaseColumnOptions<TData, boolean> & {
   on?: {
@@ -96,31 +89,178 @@ const defaults = <TData extends RowData, TValue>(
   return stripUndefinedValues(defaultsDeep({}, options, ...sources));
 };
 
+const ComboboxBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, TData>) => {
+  const { model, onUpdate } = cellContext.column.columnDef.meta as ColumnMeta<TData, TData>;
+  return (
+    <CellCombobox<TData>
+      model={model!}
+      value={cellContext.getValue()}
+      onValueChange={(value) => onUpdate?.(cellContext.row.original, cellContext.column.id, value)}
+    />
+  );
+};
+
+const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, string>) => {
+  const { onUpdate } = cellContext.column.columnDef.meta as ColumnMeta<TData, string>;
+  // https://tanstack.com/table/v8/docs/examples/react/editable-data
+  const initialValue = cellContext.getValue();
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSave = () => {
+    if (value === initialValue) {
+      return;
+    }
+    onUpdate?.(cellContext.row.original, cellContext.column.id, value);
+  };
+
+  const handleCancel = () => {
+    setValue(initialValue);
+  };
+
+  // Check if first input column of last row.
+  const rows = cellContext.table.getRowModel().flatRows;
+  const columns = cellContext.table.getVisibleFlatColumns();
+  const placeholder = cellContext.row.index === rows.length - 1 && columns[0].id === cellContext.column.id;
+
+  // TODO(burdon): Don't render inputs unless mouse over (Show ellipsis when div)?
+  return (
+    <Input.Root>
+      <Input.TextInput
+        ref={inputRef}
+        variant='subdued'
+        placeholder={placeholder ? 'Add row...' : undefined}
+        classNames={['is-full', textPadding]}
+        value={value ?? ''}
+        onBlur={() => handleSave()}
+        onChange={(event) => setValue(event.target.value)}
+        onKeyDown={(event) => (event.key === 'Enter' && handleSave()) || (event.key === 'Escape' && handleCancel())}
+      />
+    </Input.Root>
+  );
+};
+
+const NumberBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, number>) => {
+  const { onUpdate, cell, digits } = cellContext.column.columnDef.meta as ColumnMeta<TData, string>;
+  const value = cellContext.getValue();
+  const [text, setText] = useState<string>();
+
+  const handleEdit = () => {
+    if (onUpdate) {
+      setText(value !== undefined ? String(value) : '');
+    }
+  };
+
+  // TODO(burdon): Property is encoded as float (e.g., 6.1 => 6.099)
+  const handleSave = () => {
+    const value = text?.trim().length ? Number(text) : NaN;
+    onUpdate?.(cellContext.row.original, cellContext.column.id, isNaN(value) ? undefined : value);
+    setText(undefined);
+  };
+
+  const handleCancel = () => {
+    setText(undefined);
+  };
+
+  if (text !== undefined) {
+    return (
+      <Input.Root>
+        <Input.TextInput
+          value={text}
+          classNames={['is-full text-end font-mono']}
+          onBlur={handleSave}
+          onChange={(event) => setText(event.target.value)}
+          onKeyDown={(event) => (event.key === 'Escape' && handleCancel()) || (event.key === 'Enter' && handleSave())}
+        />
+      </Input.Root>
+    );
+  }
+
+  return (
+    <div
+      className={mx('is-full text-end font-mono empty:after:content-[" "]', textPadding, cell?.classNames)}
+      onClick={handleEdit}
+    >
+      {value?.toLocaleString(undefined, {
+        minimumFractionDigits: digits ?? 0,
+        maximumFractionDigits: digits ?? 2,
+      })}
+    </div>
+  );
+};
+
+const RowSelectorBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, unknown>) => {
+  const { cell } = cellContext.column.columnDef.meta as ColumnMeta<TData, unknown>;
+  const { row } = cellContext;
+
+  const checked = row.getCanSelect()
+    ? row.getIsSelected()
+    : row.getCanSelectSubRows() && (row.getIsSomeSelected() ? 'indeterminate' : row.getIsAllSubRowsSelected());
+  return (
+    <Input.Root>
+      <Input.Checkbox
+        size={4}
+        classNames={['mli-auto', cell?.classNames]}
+        checked={checked}
+        onCheckedChange={(event) => {
+          if (row.getCanSelect()) {
+            row.getToggleSelectedHandler()(event);
+          }
+        }}
+        disabled={!(row.getCanSelect() || row.getCanSelectSubRows())}
+      />
+    </Input.Root>
+  );
+};
+
+const SwitchBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, boolean>) => {
+  const { onUpdate } = cellContext.column.columnDef.meta as ColumnMeta<TData, boolean>;
+  const value = cellContext.getValue();
+  return (
+    <Input.Root>
+      <Input.Switch
+        classNames='block mli-auto'
+        onClick={(event) => event.stopPropagation()}
+        disabled={!onUpdate}
+        checked={!!value}
+        onCheckedChange={(value) => {
+          onUpdate?.(cellContext.row.original, cellContext.column.id, !!value);
+        }}
+      />
+    </Input.Root>
+  );
+};
+
 /**
  * Util to create column definitions.
  */
 export class ColumnBuilder<TData extends RowData> {
   /**
-   * Select value
+   * Combobox value
    */
-  select({ label, className, model, onUpdate, ...props }: SelectColumnOptions<TData>): Partial<ColumnDef<TData, any>> {
+  combobox({
+    label,
+    classNames,
+    model,
+    onUpdate,
+    ...props
+  }: ComboboxColumnOptions<TData>): Partial<ColumnDef<TData, any>> {
     return defaults(props, {
       minSize: 100,
+      meta: {
+        model,
+        onUpdate,
+        cell: { classNames },
+      },
       header: (column) => {
-        return <div className={'truncate'}>{label ?? column.header.id}</div>;
+        return label ?? column.header.id;
       },
       cell:
         model && onUpdate
-          ? (cell) => (
-              <ComboboxCell<any>
-                model={model}
-                value={cell.getValue()}
-                onValueChange={(value) => onUpdate?.(cell.row.original, cell.column.id, value)}
-              />
-            )
-          : (cell) => {
-              const value = cell.getValue();
-              return <div className={mx('truncate', className)}>{value ? model.getText(value) : ''}</div>;
+          ? ComboboxBuilderCell
+          : (cellContext) => {
+              const cellValue = cellContext.getValue();
+              return <div className={mx('truncate', classNames)}>{cellValue ? model?.getText(cellValue) : ''}</div>;
             },
     });
   }
@@ -128,69 +268,21 @@ export class ColumnBuilder<TData extends RowData> {
   /**
    * String formats.
    */
-  string({ label, className, onUpdate, ...props }: StringColumnOptions<TData> = {}): Partial<ColumnDef<TData, string>> {
+  string({ label, classNames, onUpdate, ...props }: StringColumnOptions<TData> = {}): Partial<
+    ColumnDef<TData, string>
+  > {
     return defaults(props, {
       minSize: 100,
+      meta: { onUpdate, cell: { classNames } },
       // TODO(burdon): Default.
       header: (column) => {
-        return <div className={'truncate'}>{label ?? column.header.id}</div>;
+        return label ?? column.header.id;
       },
       cell: onUpdate
-        ? (cell) => {
-            // https://tanstack.com/table/v8/docs/examples/react/editable-data
-            const initialValue = cell.getValue();
-            const [value, setValue] = useState(initialValue);
-            const inputRef = useRef<HTMLInputElement>(null);
-            const { findFirstFocusable } = useFocusFinders();
-
-            const handleSave = (focusNext = false) => {
-              if (value === initialValue) {
-                return;
-              }
-
-              onUpdate?.(cell.row.original, cell.column.id, value);
-
-              // TODO(burdon): More generally support keyboard navigation.
-              if (focusNext) {
-                const rowElement = inputRef.current?.parentElement?.parentElement;
-                // TODO(burdon): Hack to wait for next row to render.
-                setTimeout(() => {
-                  const next = findNextFocusable(findFirstFocusable, rowElement as HTMLElement);
-                  next?.focus();
-                });
-              }
-            };
-
-            const handleCancel = () => {
-              setValue(initialValue);
-            };
-
-            // Check if first input column of last row.
-            const rows = cell.table.getRowModel().flatRows;
-            const columns = cell.table.getVisibleFlatColumns();
-            const placeholder = cell.row.index === rows.length - 1 && columns[0].id === cell.column.id;
-
-            // TODO(burdon): Don't render inputs unless mouse over (Show ellipsis when div)?
-            return (
-              <Input.Root>
-                <Input.TextInput
-                  ref={inputRef}
-                  variant='subdued'
-                  placeholder={placeholder ? 'Add row...' : undefined}
-                  classNames={'px-2'}
-                  value={(value as string) ?? ''}
-                  onBlur={() => handleSave(false)}
-                  onChange={(event) => setValue(event.target.value)}
-                  onKeyDown={(event) =>
-                    (event.key === 'Enter' && handleSave(true)) || (event.key === 'Escape' && handleCancel())
-                  }
-                />
-              </Input.Root>
-            );
-          }
+        ? StringBuilderCell
         : (cell) => {
             const value = cell.getValue();
-            return <div className={mx('truncate', className)}>{value}</div>;
+            return <div className={mx('truncate', textPadding, classNames)}>{value}</div>;
           },
     });
   }
@@ -198,65 +290,15 @@ export class ColumnBuilder<TData extends RowData> {
   /**
    * Number formats.
    */
-  number({ label, minSize, className, digits, onUpdate, ...props }: NumberColumnOptions<TData> = {}): Partial<
+  number({ label, minSize, classNames, digits, onUpdate, ...props }: NumberColumnOptions<TData> = {}): Partial<
     ColumnDef<TData, number>
   > {
     return defaults(props, {
       size: 100,
       minSize: 100,
-      header: (cell) => <div className='w-full truncate text-right'>{label ?? cell.header.id}</div>,
-      cell: (cell) => {
-        const value = cell.getValue();
-        const [text, setText] = useState<string>();
-
-        const handleEdit = () => {
-          if (onUpdate) {
-            setText(value !== undefined ? String(value) : '');
-          }
-        };
-
-        // TODO(burdon): Property is encoded as float (e.g., 6.1 => 6.099)
-        const handleSave = () => {
-          const value = text?.trim().length ? Number(text) : NaN;
-          onUpdate?.(cell.row.original, cell.column.id, isNaN(value) ? undefined : value);
-          setText(undefined);
-        };
-
-        const handleCancel = () => {
-          setText(undefined);
-        };
-
-        if (text !== undefined) {
-          return (
-            <div className={mx('grow text-right font-mono', className)}>
-              <Input.Root>
-                <Input.TextInput
-                  autoFocus
-                  value={text}
-                  classNames={'px-2'}
-                  onBlur={handleSave}
-                  onChange={(event) => setText(event.target.value)}
-                  onKeyDown={(event) =>
-                    (event.key === 'Escape' && handleCancel()) || (event.key === 'Enter' && handleSave())
-                  }
-                />
-              </Input.Root>
-            </div>
-          );
-        }
-
-        return (
-          <div
-            className={mx('grow w-full text-right font-mono empty:after:content-[" "]', className)}
-            onClick={handleEdit}
-          >
-            {value?.toLocaleString(undefined, {
-              minimumFractionDigits: digits ?? 0,
-              maximumFractionDigits: digits ?? 2,
-            })}
-          </div>
-        );
-      },
+      meta: { onUpdate, digits, header: { classNames: 'text-end' }, cell: { classNames } },
+      header: (cell) => label ?? cell.header.id,
+      cell: NumberBuilderCell,
     });
   }
 
@@ -264,13 +306,14 @@ export class ColumnBuilder<TData extends RowData> {
    * Date formats.
    */
   // TODO(burdon): Date picker (pluggable renderers?)
-  date({ label, format: formatSpec, relative, className, ...props }: DateColumnOptions<TData> = {}): Partial<
+  date({ label, format: formatSpec, relative, classNames, ...props }: DateColumnOptions<TData> = {}): Partial<
     ColumnDef<TData, Date>
   > {
     return defaults(props, {
       size: 220, // TODO(burdon): Depends on format.
       minSize: 100,
-      header: (cell) => <div>{label ?? cell.header.id}</div>,
+      meta: { cell: { classNames } },
+      header: (cell) => label ?? cell.header.id,
       cell: (cell) => {
         const value = cell.getValue();
 
@@ -283,7 +326,7 @@ export class ColumnBuilder<TData extends RowData> {
               : value.toISOString()
             : undefined;
 
-          return <div className={mx('font-mono', className)}>{str}</div>;
+          return <div className={mx(textPadding, classNames)}>{str}</div>;
         } catch (err) {
           console.log(value);
           return null;
@@ -297,9 +340,10 @@ export class ColumnBuilder<TData extends RowData> {
    */
   key({ label, tooltip, ...props }: KeyColumnOptions<TData> = {}): Partial<ColumnDef<TData, PublicKey>> {
     return defaults(props, {
-      size: 86,
-      minSize: 86,
-      header: (cell) => <div>{label ?? cell.header.id}</div>,
+      size: 94,
+      minSize: 94,
+      meta: { cell: { classNames: ['font-mono', textPadding] } },
+      header: (cell) => label ?? cell.header.id,
       cell: (cell) => {
         const value = cell.getValue();
         if (!value) {
@@ -307,64 +351,77 @@ export class ColumnBuilder<TData extends RowData> {
         }
 
         // TODO(burdon): Factor out styles.
-        const element = (
-          <div className='font-mono font-thin text-green-500 dark:text-green-300'>{value.truncate()}</div>
-        );
+        const element = value.truncate();
         if (!tooltip) {
           return element;
         }
 
         return (
-          <div className='group inline-flex gap-2 items-center'>
-            <Tooltip.Provider>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>{element}</Tooltip.Trigger>
-                <Tooltip.Content side='right'>
-                  <Tooltip.Arrow />
-                  <ClipboardText
-                    onClick={(ev) => {
-                      ev.stopPropagation(); // Prevent select row.
-                      void navigator.clipboard.writeText(value.toHex());
-                    }}
-                  />
-                </Tooltip.Content>
-              </Tooltip.Root>
-            </Tooltip.Provider>
-          </div>
+          <Tooltip.Provider>
+            <Tooltip.Root>
+              <Tooltip.Trigger>{element}</Tooltip.Trigger>
+              <Tooltip.Content side='right'>
+                <Tooltip.Arrow />
+                <ClipboardText
+                  onClick={(ev) => {
+                    ev.stopPropagation(); // Prevent select row.
+                    void navigator.clipboard.writeText(value.toHex());
+                  }}
+                />
+              </Tooltip.Content>
+            </Tooltip.Root>
+          </Tooltip.Provider>
         );
       },
     });
   }
 
   /**
-   * Checkbox.
+   * Row selector
+   */
+  selectRow({
+    label,
+    classNames,
+    onUpdate,
+    id = 'selectRow',
+    ...props
+  }: SelectRowColumnOptions<TData> = {}): Parameters<ColumnHelper<TData>['display']>[0] {
+    return {
+      id,
+      size: 32,
+      minSize: 32,
+      maxSize: 32,
+      meta: { onUpdate, cell: { classNames } },
+      header: ({ table }) => {
+        const { rowsSelectable } = useTableContext('HELPER_SELECT_ROW_HEADER_CELL');
+        const checked = table.getIsSomeRowsSelected() ? 'indeterminate' : table.getIsAllRowsSelected();
+        return rowsSelectable === 'multi' ? (
+          <Input.Root>
+            <Input.Checkbox
+              size={4}
+              classNames={['mli-auto', classNames]}
+              checked={checked}
+              onCheckedChange={() => table.toggleAllRowsSelected()}
+            />
+          </Input.Root>
+        ) : null;
+      },
+      cell: RowSelectorBuilderCell,
+    };
+  }
+
+  /**
+   * Switch
    */
-  checkbox({ label, className, onUpdate, ...props }: BooleanColumnOptions<TData> = {}): Partial<
+  switch({ label, classNames, onUpdate, ...props }: SwitchColumnOptions<TData> = {}): Partial<
     ColumnDef<TData, boolean>
   > {
     return defaults(props, {
-      size: 40,
-      minSize: 40,
-      header: (column) => <div className={'flex grow justify-center'}>{label ?? column.header.id}</div>,
-      cell: (cell) => {
-        const value = cell.getValue();
-        // TODO(burdon): Center.
-        return (
-          <div className='flex grow justify-center'>
-            <Input.Root>
-              <Input.Checkbox
-                onClick={(event) => event.stopPropagation()}
-                classNames={className}
-                disabled={!onUpdate}
-                checked={!!value}
-                onCheckedChange={(value) => {
-                  onUpdate?.(cell.row.original, cell.column.id, !!value);
-                }}
-              />
-            </Input.Root>
-          </div>
-        );
-      },
+      size: 50,
+      minSize: 50,
+      meta: { onUpdate, cell: { classNames: [textPadding, classNames] } },
+      header: (column) => label ?? column.header.id,
+      cell: SwitchBuilderCell,
     });
   }
 
@@ -380,17 +437,9 @@ export class ColumnBuilder<TData extends RowData> {
       cell: (cell) => {
         const value = cell.getValue();
         if (value) {
-          return (
-            <div className='flex grow justify-center'>
-              <IconOn className={mx(getSize(6), on?.className ?? 'text-green-700')} />
-            </div>
-          );
+          return <IconOn className={mx('block mli-auto', getSize(6), on?.className ?? 'text-green-700')} />;
         } else if (value === false) {
-          return (
-            <div className='flex grow justify-center'>
-              <IconOff className={mx(getSize(6), off?.className ?? 'text-red-700')} />
-            </div>
-          );
+          return <IconOff className={mx('block mli-auto', getSize(6), off?.className ?? 'text-red-700')} />;
         } else {
           return null;
         }