@dxos/react-ui-table 0.3.8 → 0.3.9-main.03b62b6

package/src/helpers.tsx

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+import { useFocusFinders } from '@fluentui/react-tabster';
 import { Check, ClipboardText, type Icon, X } from '@phosphor-icons/react';
 import {
   createColumnHelper,
@@ -13,13 +14,11 @@ import {
 } 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 React, { useEffect, useRef, useState } from 'react';
 
 import { type PublicKey } from '@dxos/keys';
 import { type ClassNameValue, Input, Tooltip } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
-import { stripUndefinedValues } from '@dxos/util';
 
 import { CellCombobox } from './components';
 import { useTableContext } from './components/Table/TableContext';
@@ -32,6 +31,7 @@ export const createColumnBuilder = <TData extends RowData>() => ({
   builder: new ColumnBuilder<TData>(),
 });
 
+// TODO(thure): This interface is redundant, e.g. `classNames` == `meta.cell.classNames`
 /**
  * NOTE: Can use `meta` for custom properties.
  */
@@ -82,22 +82,15 @@ export type IconColumnOptions<TData extends RowData> = BaseColumnOptions<TData,
   };
 };
 
-const defaults = <TData extends RowData, TValue>(
-  options: Partial<ColumnDef<TData, TValue>>,
-  ...sources: Partial<ColumnDef<TData, TValue>>[]
-): Partial<ColumnDef<TData, 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 (
+  return model ? (
     <CellCombobox<TData>
-      model={model!}
+      model={model}
       value={cellContext.getValue()}
       onValueChange={(value) => onUpdate?.(cellContext.row.original, cellContext.column.id, value)}
     />
-  );
+  ) : null;
 };
 
 const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, string>) => {
@@ -140,10 +133,27 @@ const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
   );
 };
 
+const parseNumber = (text?: string) => (text?.trim().length ? Number(text) : NaN);
+
+const displayNumber = (value?: number, digits?: number) =>
+  value || value === 0
+    ? value.toLocaleString(undefined, {
+        minimumFractionDigits: digits ?? 0,
+        maximumFractionDigits: digits ?? 2,
+      })
+    : '';
+
 const NumberBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, number>) => {
-  const { onUpdate, cell, digits } = cellContext.column.columnDef.meta as ColumnMeta<TData, string>;
+  const { onUpdate, digits } = cellContext.column.columnDef.meta as ColumnMeta<TData, string>;
   const value = cellContext.getValue();
-  const [text, setText] = useState<string>();
+  const [text, setText] = useState<string>(displayNumber(value, digits));
+  const { findPrevFocusable } = useFocusFinders();
+  const ref = useRef<HTMLInputElement | null>(null);
+
+  // Update display value if `digits` changes and input is not in focus.
+  useEffect(() => {
+    (!document.activeElement || document.activeElement !== ref.current) && setText(displayNumber(value, digits));
+  }, [digits, value]);
 
   const handleEdit = () => {
     if (onUpdate) {
@@ -153,39 +163,34 @@ const NumberBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
 
   // 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 nextValue = parseNumber(text);
+    onUpdate?.(cellContext.row.original, cellContext.column.id, isNaN(nextValue) ? undefined : nextValue);
+    setText(displayNumber(nextValue, digits));
+    // Shift focus only if input is focused on save (e.g. on `Enter`).
+    ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
   };
 
-  const handleCancel = () => {
-    setText(undefined);
+  const _handleCancel = () => {
+    setText(displayNumber(value, digits));
+    ref.current && findPrevFocusable(ref.current)?.focus();
   };
 
-  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>
+    <Input.Root>
+      <Input.TextInput
+        ref={ref}
+        variant='subdued'
+        value={text}
+        classNames={['is-full text-end font-mono', textPadding]}
+        onBlur={handleSave}
+        onFocus={handleEdit}
+        onChange={({ target: { value } }) => setText(value)}
+        onKeyDown={(event) => {
+          // TODO(thure): `Escape` is reserved for blurring the input and moving focus to the cell
+          return /* (event.key === 'Escape' && handleCancel()) || */ event.key === 'Enter' && handleSave();
+        }}
+      />
+    </Input.Root>
   );
 };
 
@@ -245,13 +250,8 @@ export class ColumnBuilder<TData extends RowData> {
     onUpdate,
     ...props
   }: ComboboxColumnOptions<TData>): Partial<ColumnDef<TData, any>> {
-    return defaults(props, {
+    return {
       minSize: 100,
-      meta: {
-        model,
-        onUpdate,
-        cell: { classNames },
-      },
       header: (column) => {
         return label ?? column.header.id;
       },
@@ -262,7 +262,14 @@ export class ColumnBuilder<TData extends RowData> {
               const cellValue = cellContext.getValue();
               return <div className={mx('truncate', classNames)}>{cellValue ? model?.getText(cellValue) : ''}</div>;
             },
-    });
+      ...props,
+      meta: {
+        ...props.meta,
+        model,
+        onUpdate,
+        cell: { classNames, ...props.meta?.cell },
+      },
+    };
   }
 
   /**
@@ -271,9 +278,8 @@ export class ColumnBuilder<TData extends RowData> {
   string({ label, classNames, onUpdate, ...props }: StringColumnOptions<TData> = {}): Partial<
     ColumnDef<TData, string>
   > {
-    return defaults(props, {
+    return {
       minSize: 100,
-      meta: { onUpdate, cell: { classNames } },
       // TODO(burdon): Default.
       header: (column) => {
         return label ?? column.header.id;
@@ -284,7 +290,13 @@ export class ColumnBuilder<TData extends RowData> {
             const value = cell.getValue();
             return <div className={mx('truncate', textPadding, classNames)}>{value}</div>;
           },
-    });
+      ...props,
+      meta: {
+        ...props.meta,
+        onUpdate,
+        cell: { ...props.meta?.cell, classNames },
+      },
+    };
   }
 
   /**
@@ -293,13 +305,20 @@ export class ColumnBuilder<TData extends RowData> {
   number({ label, minSize, classNames, digits, onUpdate, ...props }: NumberColumnOptions<TData> = {}): Partial<
     ColumnDef<TData, number>
   > {
-    return defaults(props, {
+    return {
       size: 100,
       minSize: 100,
-      meta: { onUpdate, digits, header: { classNames: 'text-end' }, cell: { classNames } },
       header: (cell) => label ?? cell.header.id,
       cell: NumberBuilderCell,
-    });
+      ...props,
+      meta: {
+        ...props.meta,
+        onUpdate,
+        digits,
+        header: { classNames: 'text-end', ...props.meta?.header },
+        cell: { ...props.meta?.cell, classNames },
+      },
+    };
   }
 
   /**
@@ -309,10 +328,9 @@ export class ColumnBuilder<TData extends RowData> {
   date({ label, format: formatSpec, relative, classNames, ...props }: DateColumnOptions<TData> = {}): Partial<
     ColumnDef<TData, Date>
   > {
-    return defaults(props, {
+    return {
       size: 220, // TODO(burdon): Depends on format.
       minSize: 100,
-      meta: { cell: { classNames } },
       header: (cell) => label ?? cell.header.id,
       cell: (cell) => {
         const value = cell.getValue();
@@ -332,17 +350,18 @@ export class ColumnBuilder<TData extends RowData> {
           return null;
         }
       },
-    });
+      ...props,
+      meta: { ...props.meta, cell: { ...props.meta?.cell, classNames } },
+    };
   }
 
   /**
    * PublicKey with tooltip.
    */
-  key({ label, tooltip, ...props }: KeyColumnOptions<TData> = {}): Partial<ColumnDef<TData, PublicKey>> {
-    return defaults(props, {
+  key({ label, tooltip, classNames, ...props }: KeyColumnOptions<TData> = {}): Partial<ColumnDef<TData, PublicKey>> {
+    return {
       size: 94,
       minSize: 94,
-      meta: { cell: { classNames: ['font-mono', textPadding] } },
       header: (cell) => label ?? cell.header.id,
       cell: (cell) => {
         const value = cell.getValue();
@@ -360,32 +379,32 @@ export class ColumnBuilder<TData extends RowData> {
           <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.Portal>
+                <Tooltip.Content side='right'>
+                  <Tooltip.Arrow />
+                  <ClipboardText
+                    onClick={(ev) => {
+                      ev.stopPropagation(); // Prevent select row.
+                      void navigator.clipboard.writeText(value.toHex());
+                    }}
+                  />
+                </Tooltip.Content>
+              </Tooltip.Portal>
             </Tooltip.Root>
           </Tooltip.Provider>
         );
       },
-    });
+      ...props,
+      meta: { ...props.meta, cell: { ...props.meta?.cell, classNames: ['font-mono', textPadding, classNames] } },
+    };
   }
 
   /**
    * Row selector
    */
-  selectRow({
-    label,
-    classNames,
-    onUpdate,
-    id = 'selectRow',
-    ...props
-  }: SelectRowColumnOptions<TData> = {}): Parameters<ColumnHelper<TData>['display']>[0] {
+  selectRow({ classNames, onUpdate, id = 'selectRow' }: SelectRowColumnOptions<TData> = {}): Parameters<
+    ColumnHelper<TData>['display']
+  >[0] {
     return {
       id,
       size: 32,
@@ -416,13 +435,14 @@ export class ColumnBuilder<TData extends RowData> {
   switch({ label, classNames, onUpdate, ...props }: SwitchColumnOptions<TData> = {}): Partial<
     ColumnDef<TData, boolean>
   > {
-    return defaults(props, {
+    return {
       size: 50,
       minSize: 50,
-      meta: { onUpdate, cell: { classNames: [textPadding, classNames] } },
       header: (column) => label ?? column.header.id,
       cell: SwitchBuilderCell,
-    });
+      ...props,
+      meta: { ...props.meta, onUpdate, cell: { ...props.meta?.cell, classNames: [textPadding, classNames] } },
+    };
   }
 
   /**
@@ -431,7 +451,7 @@ export class ColumnBuilder<TData extends RowData> {
   icon({ label, size, on, off, ...props }: IconColumnOptions<TData> = {}): Partial<ColumnDef<TData, boolean>> {
     const IconOn = on?.Icon ?? Check;
     const IconOff = off?.Icon ?? X;
-    return defaults(props, {
+    return {
       size: size ?? 32,
       header: (column) => <div className={'justify-center'}>{label ?? column.header.id}</div>,
       cell: (cell) => {
@@ -444,6 +464,7 @@ export class ColumnBuilder<TData extends RowData> {
           return null;
         }
       },
-    });
+      ...props,
+    };
   }
 }

package/src/index.ts

@@ -6,4 +6,5 @@ export * from './components';
 export * from './helpers';
 export * from './schema';
 export * from './theme';
+export { default as translations } from './translations';
 export * from './types';

package/src/schema.ts

@@ -10,14 +10,6 @@ export type TableDef = {
 
 export type ColumnType = 'number' | 'boolean' | 'date' | 'string' | 'ref';
 
-export const columnTypes = new Map<ColumnType, string>([
-  ['string', 'Text'],
-  ['boolean', 'Checkbox'],
-  ['number', 'Number'],
-  ['date', 'Date'],
-  ['ref', 'Reference'],
-]);
-
 export type ColumnProps = {
   id: string;
   prop: string;

package/src/theme.ts

@@ -4,7 +4,15 @@
 
 import { type CellContext } from '@tanstack/react-table';
 
-import { chromeSurface, fixedSurface, focusRing, groupBorder, hoverColors, mx } from '@dxos/react-ui-theme';
+import {
+  chromeSurface,
+  fixedSurface,
+  focusRing,
+  ghostSelected,
+  ghostSelectedCurrent,
+  groupBorder,
+  mx,
+} from '@dxos/react-ui-theme';
 import { type ComponentFunction } from '@dxos/react-ui-types';
 
 import { type TableContextValue, type TableFlags } from './components';
@@ -35,8 +43,8 @@ export const groupTh: ComponentFunction<TableStyleProps> = (_props, ...etc) =>
 
 export type TheadStyleProps = Partial<TableFlags>;
 
-export const theadRoot: ComponentFunction<TheadStyleProps> = ({ header }, ...etc) =>
-  mx(header ? 'sticky block-start-0 z-10' : 'collapse', header && fixedSurface, ...etc);
+export const theadRoot: ComponentFunction<TheadStyleProps> = ({ header, stickyHeader }, ...etc) =>
+  mx(header ? stickyHeader && 'sticky block-start-[--sticky-top] z-[1]' : 'collapse', header && fixedSurface, ...etc);
 
 export const theadTr: ComponentFunction<TheadStyleProps> = (_props, ...etc) => mx('group', ...etc);
 
@@ -65,13 +73,12 @@ export const theadResizeThumb: ComponentFunction<TheadStyleProps> = (_props, ...
 export type TbodyStyleProps = Partial<TableContextValue<any>>;
 export const tbodyRoot: ComponentFunction<TbodyStyleProps> = (_props, ...etc) => mx(...etc);
 
-export type TbodyTrStyleProps = Partial<{ isSelected?: boolean; isCurrent?: boolean; canBeCurrent?: boolean }>;
-export const tbodyTr: ComponentFunction<TbodyTrStyleProps> = ({ isSelected, isCurrent, canBeCurrent }, ...etc) =>
+export type TbodyTrStyleProps = Partial<{ canBeCurrent?: boolean }>;
+export const tbodyTr: ComponentFunction<TbodyTrStyleProps> = ({ canBeCurrent }, ...etc) =>
   mx(
     'group',
-    isSelected ? selectedRow : isCurrent && currentRow,
+    canBeCurrent ? ghostSelectedCurrent : ghostSelected,
     canBeCurrent && focusRing,
-    canBeCurrent && hoverColors,
     canBeCurrent && 'cursor-pointer rounded',
     ...etc,
   );

package/src/translations.ts

@@ -9,6 +9,17 @@ export default [
     'en-US': {
       [translationKey]: {
         'no selection label': ' ',
+        'number column type label': 'Number',
+        'boolean column type label': 'Toggle',
+        'date column type label': 'Date',
+        'string column type label': 'Text',
+        'ref column type label': 'Reference',
+        'digits label': 'Decimal places',
+        'save label': 'Save',
+        'delete label': 'Delete',
+        'column label label': 'Label',
+        'property key label': 'Property',
+        'column type label': 'Type',
       },
     },
   },