@dxos/react-ui-table 0.4.7-next.f4b92be → 0.4.8-main.00e6f19

package/src/helpers.tsx

@@ -17,6 +17,7 @@ import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { type PublicKey } from '@dxos/keys';
+import { log } from '@dxos/log';
 import { type ClassNameValue, Input, Tooltip } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 
@@ -94,8 +95,11 @@ const ComboboxBuilderCell = <TData extends RowData>(cellContext: CellContext<TDa
 };
 
 const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, string>) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const { onUpdate } = cellContext.column.columnDef.meta as ColumnMeta<TData, string>;
+  const ref = useRef<HTMLInputElement>(null);
+  const { findPrevFocusable } = useFocusFinders();
+
+  const { onUpdate, cell } = 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(() => {
@@ -108,16 +112,14 @@ const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
   });
 
   const handleSave = () => {
-    if (value === initialValue) {
-      return;
-    }
+    ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
 
-    onUpdate?.(cellContext.row.original, cellContext.column.id, value);
+    if (value !== initialValue) {
+      onUpdate?.(cellContext.row.original, cellContext.column.id, value);
+    }
   };
 
-  const handleCancel = () => {
-    setValue(initialValue);
-  };
+  const handleCancel = () => setValue(initialValue);
 
   // Check if first input column of last row.
   const rows = cellContext.table.getRowModel().flatRows;
@@ -128,12 +130,12 @@ const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
   return (
     <Input.Root>
       <Input.TextInput
-        ref={inputRef}
+        ref={ref}
         variant='subdued'
         placeholder={placeholder ? 'Add row...' : undefined}
-        classNames={['is-full', textPadding]}
+        classNames={['is-full', textPadding, cell?.classNames]}
         value={value ?? ''}
-        onBlur={() => handleSave()}
+        onBlur={handleSave}
         onChange={(event) => setValue(event.target.value)}
         onKeyDown={(event) => (event.key === 'Enter' && handleSave()) || (event.key === 'Escape' && handleCancel())}
       />
@@ -163,17 +165,20 @@ const NumberBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
     (!document.activeElement || document.activeElement !== ref.current) && setText(displayNumber(value, digits));
   }, [digits, value]);
 
-  const handleEdit = () => {
-    if (onUpdate) {
-      setText(value !== undefined ? String(value) : '');
-    }
-  };
+  const handleEdit = () => setText(value !== undefined ? String(value) : '');
 
   // TODO(burdon): Property is encoded as float (e.g., 6.1 => 6.099)
   const handleSave = () => {
     const nextValue = parseNumber(text);
-    onUpdate?.(cellContext.row.original, cellContext.column.id, isNaN(nextValue) ? undefined : nextValue);
-    setText(displayNumber(nextValue, digits));
+
+    if (!isNaN(nextValue)) {
+      onUpdate?.(cellContext.row.original, cellContext.column.id, nextValue);
+      setText(displayNumber(nextValue, digits));
+    } else {
+      // Reset the text to display the original value without updating the model.
+      setText(displayNumber(value, digits));
+    }
+
     // Shift focus only if input is focused on save (e.g. on `Enter`).
     ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
   };
@@ -209,20 +214,23 @@ const RowSelectorBuilderCell = <TData extends RowData>(cellContext: 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>
+    <div className='flex justify-center w-full h-full' role='presentation'>
+      <Input.Root>
+        <Input.Checkbox
+          size={4}
+          classNames={[cell?.classNames]}
+          checked={checked}
+          onCheckedChange={(event) => {
+            if (row.getCanSelect()) {
+              row.getToggleSelectedHandler()(event);
+            }
+          }}
+          disabled={!(row.getCanSelect() || row.getCanSelectSubRows())}
+        />
+      </Input.Root>
+    </div>
   );
 };
 
@@ -359,7 +367,7 @@ export class ColumnBuilder<TData extends RowData> {
 
           return <div className={mx(textPadding, classNames)}>{str}</div>;
         } catch (err) {
-          console.log(value);
+          log.info('formatError', { value });
           return null;
         }
       },
@@ -421,21 +429,22 @@ export class ColumnBuilder<TData extends RowData> {
     return {
       id,
       size: 32,
-      minSize: 32,
-      maxSize: 32,
+      enableResizing: false,
       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>
+          <div className='flex justify-center w-full h-full' role='presentation'>
+            <Input.Root>
+              <Input.Checkbox
+                size={4}
+                classNames={['mli-auto', classNames]}
+                checked={checked}
+                onCheckedChange={() => table.toggleAllRowsSelected()}
+              />
+            </Input.Root>
+          </div>
         ) : null;
       },
       cell: RowSelectorBuilderCell,

package/src/theme.ts

@@ -23,7 +23,8 @@ export const flushPadding = 'pli-0 plb-0';
 export const textPadding = 'pli-2 plb-0.5';
 export const headPadding = 'pli-2 plb-1.5';
 
-export const gridCellFocusRing = 'focus:z-[11] focus:outline outline-2 outline-primary-500 dark:outline-primary-400';
+export const gridCellFocusRing =
+  'focus-within:z-[11] focus-within:outline outline-2 outline-primary-500 dark:outline-primary-400';
 
 //
 // table
@@ -89,6 +90,7 @@ export const tbodyTr: ComponentFunction<TbodyTrStyleProps> = ({ canBeCurrent },
 
 export const tdRoot: ComponentFunction<TbodyStyleProps> = ({ border, isGrid }, ...etc) =>
   mx('relative', flushPadding, border && 'border', border && groupBorder, isGrid && gridCellFocusRing, ...etc);
+
 export const tdContent: ComponentFunction<CellContext<any, any>> = (_props, ...etc) => mx(...etc);
 
 //