@dxos/react-ui-table 0.6.11 → 0.6.12-main.2d19bf1

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

@@ -7,11 +7,12 @@ import '@dxos-theme';
 import { type SortDirection } from '@tanstack/react-table';
 import React, { useState } from 'react';
 
+import { FieldValueType } from '@dxos/schema';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { ColumnMenu } from './ColumnMenu';
-import { type ColumnSettingsFormProps } from './ColumnSettingsForm';
-import { type ColumnProps } from '../../schema';
+import { type ColumnSettingsProps } from './ColumnSettings';
+import { type ColumnDef } from '../../schema';
 
 export default {
   title: 'react-ui-table/ColumnMenu',
@@ -19,27 +20,27 @@ export default {
   decorators: [withTheme],
 };
 
-const defs: Pick<ColumnSettingsFormProps, 'tableDef' | 'tablesToReference'> = {
+const defs: Pick<ColumnSettingsProps, 'tableDef' | 'tablesToReference'> = {
   tableDef: {
     id: '1',
     name: 'table 1',
-    columns: [{ id: 'col-1', prop: 'one-foo', type: 'string' }],
+    columns: [{ id: 'col-1', prop: 'one', type: FieldValueType.String }],
   },
   tablesToReference: [
     {
       id: '1',
       name: 'table 1',
-      columns: [{ id: 'col-1', prop: 'one-foo', type: 'string' }],
+      columns: [{ id: 'col-1', prop: 'one', type: FieldValueType.String }],
     },
     {
       id: '2',
       name: 'table 2',
-      columns: [{ id: 'col-1', prop: 'two-foo', type: 'string' }],
+      columns: [{ id: 'col-1', prop: 'two', type: FieldValueType.String }],
     },
   ],
 };
 
-const funcs: Pick<ColumnSettingsFormProps, 'onUpdate' | 'onDelete'> = {
+const functions: Pick<ColumnSettingsProps, 'onUpdate' | 'onDelete'> = {
   onUpdate: (...args: any) => console.log('onUpdate args', args),
   onDelete: (...args: any) => console.log('onDelete args', args),
 };
@@ -49,10 +50,10 @@ export const Default = {
     column: {
       id: 'test',
       label: 'test',
-    } as ColumnProps,
+    } as ColumnDef,
 
     ...defs,
-    ...funcs,
+    ...functions,
 
     context: {
       header: {
@@ -89,11 +90,13 @@ export const ReactiveSort = {
       column: {
         id: 'test',
         label: 'test',
-      } as ColumnProps,
+      } as ColumnDef,
       context: {
         header: {
           column: {
             getCanSort: () => true,
+            getIsSorted: () => sort,
+            clearSorting: () => setSort(false),
             toggleSorting: (desc?: boolean) => {
               if (desc === undefined) {
                 setSort(false);
@@ -103,8 +106,6 @@ export const ReactiveSort = {
                 setSort('asc');
               }
             },
-            getIsSorted: () => sort,
-            clearSorting: () => setSort(false),
             getToggleSortingHandler: () => () => {
               if (sort === 'asc') {
                 setSort('desc');

package/src/components/ColumnMenu/ColumnMenu.tsx

@@ -9,22 +9,25 @@ import React, { useRef, useState, useCallback } from 'react';
 import { Button, Popover, DropdownMenu } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 
-import { ColumnSettingsForm } from './ColumnSettingsForm';
+import { ColumnSettings } from './ColumnSettings';
 import { useSortColumn } from '../../hooks';
-import { type TableDef, type ColumnProps } from '../../schema';
+import { type TableDef, type ColumnDef } from '../../schema';
 
 export type ColumnMenuProps<TData extends RowData, TValue> = {
   context: HeaderContext<TData, TValue>;
   tablesToReference: TableDef[];
   tableDef: TableDef;
-  column: ColumnProps;
+  column: ColumnDef;
   columnOrderable: boolean;
   columnPosition: 'start' | 'end' | undefined;
   onColumnReorder: (columnId: string, direction: 'left' | 'right') => void;
-  onUpdate?: (id: string, column: ColumnProps) => void;
+  onUpdate?: (id: string, column: ColumnDef) => void;
   onDelete?: (id: string) => void;
 };
 
+/**
+ * @deprecated
+ */
 export const ColumnMenu = <TData extends RowData, TValue>({
   column,
   columnOrderable,
@@ -138,7 +141,7 @@ export const ColumnMenu = <TData extends RowData, TValue>({
           <Popover.Portal>
             <Popover.Content>
               <Popover.Viewport>
-                <ColumnSettingsForm {...props} column={column} onClose={() => setIsColumnSettingsOpen(false)} />
+                <ColumnSettings {...props} column={column} onClose={() => setIsColumnSettingsOpen(false)} />
               </Popover.Viewport>
               <Popover.Arrow />
             </Popover.Content>

package/src/components/ColumnMenu/{ColumnSettingsForm.stories.tsx → ColumnSettings.stories.tsx}

@@ -3,25 +3,38 @@
 //
 
 import '@dxos-theme';
+
 import React from 'react';
 
-import { withTheme } from '@dxos/storybook-utils';
+import { FieldValueType } from '@dxos/schema';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
 
-import { ColumnSettingsForm, type ColumnSettingsFormProps } from './ColumnSettingsForm';
+import { ColumnSettings, type ColumnSettingsProps } from './ColumnSettings';
 import { type TableDef } from '../../schema';
+import translations from '../../translations';
+
+const Story = (props: ColumnSettingsProps) => (
+  <div className='flex w-[240px] m-2 p-2 border border-separator rounded'>
+    <ColumnSettings {...props} />
+  </div>
+);
 
 export default {
-  title: 'react-ui-table/ColumnSettingsForm',
-  component: ColumnSettingsForm,
-  decorators: [withTheme],
+  title: 'react-ui-table/ColumnSettings',
+  component: ColumnSettings,
+  decorators: [withTheme, withLayout()],
+  parameters: {
+    translations,
+  },
+  render: Story,
 };
 
 const sampleTableDef: TableDef = {
   id: '1',
   name: 'Sample Table',
   columns: [
-    { id: 'col-1', prop: 'name', type: 'string', label: 'Name' },
-    { id: 'col-2', prop: 'age', type: 'number', label: 'Age', digits: 0 },
+    { id: 'col-1', prop: 'name', type: FieldValueType.String, label: 'Name' },
+    { id: 'col-2', prop: 'age', type: FieldValueType.Number, label: 'Age', digits: 0 },
   ],
 };
 
@@ -31,17 +44,17 @@ const sampleTablesToReference: TableDef[] = [
     id: '2',
     name: 'Reference Table',
     columns: [
-      { id: 'ref-col-1', prop: 'id', type: 'string', label: 'ID' },
-      { id: 'ref-col-2', prop: 'description', type: 'string', label: 'Description' },
+      { id: 'ref-col-1', prop: 'id', type: FieldValueType.String, label: 'ID' },
+      { id: 'ref-col-2', prop: 'description', type: FieldValueType.String, label: 'Description' },
     ],
   },
 ];
 
-const defaultArgs: ColumnSettingsFormProps = {
+const defaultArgs: ColumnSettingsProps = {
   column: {
     id: 'col-1',
     prop: 'name',
-    type: 'string',
+    type: FieldValueType.String,
     label: 'Name',
   },
   tableDef: sampleTableDef,
@@ -61,7 +74,7 @@ export const NumberColumn = {
     column: {
       id: 'col-2',
       prop: 'age',
-      type: 'number',
+      type: FieldValueType.Number,
       label: 'Age',
       digits: 0,
     },
@@ -74,7 +87,7 @@ export const ReferenceColumn = {
     column: {
       id: 'col-3',
       prop: 'reference',
-      type: 'ref',
+      type: FieldValueType.Ref,
       label: 'Reference',
       refTable: '2',
       refProp: 'ref-col-1',
@@ -88,17 +101,8 @@ export const NewColumn = {
     column: {
       id: 'new-col',
       prop: '',
-      type: 'string',
+      type: FieldValueType.String,
       label: '',
     },
   },
 };
-
-const Template = (args: ColumnSettingsFormProps) => (
-  <div className='p-4 max-is-64'>
-    <ColumnSettingsForm {...args} />
-  </div>
-);
-
-export const Interactive = Template.bind({});
-(Interactive as any).args = defaultArgs;

package/src/components/ColumnMenu/{ColumnSettingsForm.tsx → ColumnSettings.tsx}

@@ -1,31 +1,37 @@
 //
 // Copyright 2024 DXOS.org
 //
+
 import React, { useRef, useState } from 'react';
 
 import { Button, Input, Select, useTranslation } from '@dxos/react-ui';
+import { FieldValueTypes } from '@dxos/schema';
 import { safeParseInt } from '@dxos/util';
 
-import { type TableDef, type ColumnProps, type ColumnType } from '../../schema';
+import { type TableDef, type ColumnDef } from '../../schema';
 import { translationKey } from '../../translations';
 
-export type ColumnSettingsFormProps = {
-  column: ColumnProps;
+export type ColumnSettingsProps = {
+  column: ColumnDef;
   tableDef: TableDef;
+  // TODO(burdon): Rename.
   tablesToReference: TableDef[];
-  onUpdate?: ((id: string, column: ColumnProps) => void) | undefined;
-  onDelete?: ((id: string) => void) | undefined;
+  onUpdate?: (id: string, column: ColumnDef) => void;
+  onDelete?: (id: string) => void;
   onClose?: () => void;
 };
 
-export const ColumnSettingsForm = ({
+/**
+ * @deprecated
+ */
+export const ColumnSettings = ({
   column,
   tableDef,
   tablesToReference,
   onUpdate,
   onDelete,
   onClose,
-}: ColumnSettingsFormProps) => {
+}: ColumnSettingsProps) => {
   const [formState, setFormState] = useState({
     prop: column.id,
     refTable: column.refTable,
@@ -62,7 +68,7 @@ export const ColumnSettingsForm = ({
       id: prop, // TODO(burdon): Make unique.
       prop,
       label,
-      type: type as ColumnProps['type'],
+      type: type as ColumnDef['type'],
       refTable,
       refProp,
       digits: safeParseInt(digits),
@@ -75,9 +81,10 @@ export const ColumnSettingsForm = ({
     onClose?.();
   };
 
+  // TODO(burdon): Standardize dialog/popup.
   return (
-    <div className='p-1 space-y-2'>
-      <div className='space-y-1'>
+    <div className='flex flex-col w-full gap-4'>
+      <div className='flex flex-col gap-2'>
         <Input.Root>
           <Input.Label>{t('column label label')}</Input.Label>
           <Input.TextInput
@@ -88,8 +95,7 @@ export const ColumnSettingsForm = ({
             data-testid='table.column-settings.label'
           />
         </Input.Root>
-      </div>
-      <div className='space-y-1'>
+
         <Input.Root>
           <Input.Label>{t('property key label')}</Input.Label>
           <Input.TextInput
@@ -101,8 +107,7 @@ export const ColumnSettingsForm = ({
             }
           />
         </Input.Root>
-      </div>
-      <div className='space-y-1'>
+
         <Input.Root>
           <Input.Label>{t('column type label')}</Input.Label>
           <Select.Root
@@ -113,7 +118,7 @@ export const ColumnSettingsForm = ({
             <Select.Portal>
               <Select.Content>
                 <Select.Viewport>
-                  {(['number', 'boolean', 'string', 'ref'] as ColumnType[]).map((type) => (
+                  {FieldValueTypes.map((type) => (
                     <Select.Option key={type} value={type}>
                       {t(`${type} column type label`)}
                     </Select.Option>
@@ -123,9 +128,8 @@ export const ColumnSettingsForm = ({
             </Select.Portal>
           </Select.Root>
         </Input.Root>
-      </div>
-      {formState.type === 'number' && (
-        <div className='space-y-1'>
+
+        {formState.type === 'number' && (
           <Input.Root>
             <Input.Label>{t('digits label')}</Input.Label>
             <Input.TextInput
@@ -133,12 +137,10 @@ export const ColumnSettingsForm = ({
               onChange={(event) => setFormState((prevState) => ({ ...prevState, digits: event.target.value }))}
             />
           </Input.Root>
-        </div>
-      )}
+        )}
 
-      {formState.type === 'ref' && (
-        <>
-          <div className='space-y-1'>
+        {formState.type === 'ref' && (
+          <>
             <Input.Root>
               <Input.Label>Table</Input.Label>
               <Select.Root
@@ -161,9 +163,8 @@ export const ColumnSettingsForm = ({
                 </Select.Portal>
               </Select.Root>
             </Input.Root>
-          </div>
-          {formState.refTable && (
-            <div className='space-y-1'>
+
+            {formState.refTable && (
               <Input.Root>
                 <Input.Label>Table property</Input.Label>
                 <Select.Root
@@ -186,20 +187,21 @@ export const ColumnSettingsForm = ({
                   </Select.Portal>
                 </Select.Root>
               </Input.Root>
-            </div>
-          )}
-        </>
-      )}
-
-      <div role='none' className='h-1' />
-
-      <div className='flex flex-row justify-end gap-1'>
-        <Button onClick={handleDelete} data-testid='table.column-settings.delete'>
-          {t('delete label')}
-        </Button>
-        <Button variant='primary' onClick={handleSave} data-testid='table.column-settings.save'>
-          {t('save label')}
-        </Button>
+            )}
+          </>
+        )}
+      </div>
+
+      <div>
+        {/* TODO(burdon): Change delete to cancel. Delete should be menu item. */}
+        <div className='flex flex-row justify-end gap-1'>
+          <Button onClick={handleDelete} data-testid='table.column-settings.delete'>
+            {t('delete label')}
+          </Button>
+          <Button variant='primary' onClick={handleSave} data-testid='table.column-settings.save'>
+            {t('save label')}
+          </Button>
+        </div>
       </div>
     </div>
   );

package/src/components/ColumnMenu/index.ts

@@ -3,4 +3,4 @@
 //
 
 export * from './ColumnMenu';
-export * from './ColumnSettingsForm';
+export * from './ColumnSettings';

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

@@ -8,11 +8,11 @@ import { Plugs, PlugsConnected } from '@phosphor-icons/react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { create } from '@dxos/echo-schema';
-import { registerSignalRuntime } from '@dxos/echo-signals/react';
 import { PublicKey } from '@dxos/keys';
+import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
 import { Button, DensityProvider } from '@dxos/react-ui';
-import { withTheme } from '@dxos/storybook-utils';
+import { withSignals, withTheme } from '@dxos/storybook-utils';
 import { range } from '@dxos/util';
 
 import { Table } from './Table';
@@ -406,105 +406,117 @@ export const TenThousandRows = {
   },
 };
 
-registerSignalRuntime();
-const state = create({ items: createItems(10) });
+// TODO(burdon): Warning: Encountered two children with the same key.
 
-export const RealTimeUpdates = {
-  args: {
-    periodicMutations: true,
-    mutationInterval: 1000,
-    periodicDeletions: false,
-    deletionInterval: 5000,
-    periodicInsertions: false,
-    insertionInterval: 3000,
-  },
-  argTypes: {
-    mutationInterval: { control: 'number' },
-    periodicDeletions: { control: 'boolean' },
-    deletionInterval: { control: 'number' },
-    periodicInsertions: { control: 'boolean' },
-    insertionInterval: { control: 'number' },
-  },
-  render: ({
-    periodicMutations,
-    mutationInterval,
-    periodicDeletions,
-    deletionInterval,
-    periodicInsertions,
-    insertionInterval,
-  }: any) => {
-    useEffect(() => {
-      if (!periodicMutations) {
+type StoryProps = {
+  periodicMutations: boolean;
+  mutationInterval: number;
+  periodicDeletions: boolean;
+  deletionInterval: number;
+  periodicInsertions: boolean;
+  insertionInterval: number;
+};
+
+const Story = ({
+  periodicMutations,
+  mutationInterval,
+  periodicDeletions,
+  deletionInterval,
+  periodicInsertions,
+  insertionInterval,
+}: StoryProps) => {
+  const [state] = useState(() => create({ items: createItems(10) }));
+
+  useEffect(() => {
+    if (!periodicMutations) {
+      return;
+    }
+
+    const i = setInterval(() => {
+      if (state.items.length === 0) {
         return;
       }
 
-      const interval = setInterval(() => {
-        if (state.items.length === 0) {
-          return;
-        }
+      const idx = Math.floor(Math.random() * state.items.length);
+      log('mutating', { idx });
+      state.items[idx].name = faker.commerce.productName();
+      state.items[idx].count = Math.floor(Math.random() * 1000);
+      state.items[idx].started = new Date();
+    }, mutationInterval);
 
-        const randomIndex = Math.floor(Math.random() * state.items.length);
-        console.log('Mutating row', randomIndex);
-        state.items[randomIndex].name = faker.commerce.productName();
-        state.items[randomIndex].count = Math.floor(Math.random() * 1000);
-        state.items[randomIndex].started = new Date();
-      }, mutationInterval);
+    return () => clearInterval(i);
+  }, [periodicMutations, mutationInterval, state.items]);
 
-      return () => clearInterval(interval);
-    }, [periodicMutations, mutationInterval, state.items]);
+  useEffect(() => {
+    if (!periodicInsertions) {
+      return;
+    }
 
-    useEffect(() => {
-      if (!periodicInsertions) {
-        return;
-      }
+    const i = setInterval(() => {
+      log('inserting...');
+      state.items.push(createItems(1)[0]);
+    }, insertionInterval);
 
-      const interval = setInterval(() => {
-        console.log('Inserting...');
-        state.items.push(createItems(1)[0]);
-      }, insertionInterval);
+    return () => clearInterval(i);
+  }, [periodicInsertions, insertionInterval, state.items]);
 
-      return () => clearInterval(interval);
-    }, [periodicInsertions, insertionInterval, state.items]);
+  useEffect(() => {
+    if (!periodicDeletions) {
+      return;
+    }
 
-    useEffect(() => {
-      if (!periodicDeletions) {
+    const i = setInterval(() => {
+      if (state.items.length === 0) {
         return;
       }
 
-      const interval = setInterval(() => {
-        if (state.items.length === 0) {
-          return;
-        }
-
-        console.log('Deleting');
+      log('deleting...');
+      const randomIndex = Math.floor(Math.random() * state.items.length);
+      state.items.splice(randomIndex, 1);
+    }, deletionInterval);
 
-        // Randomly delete a row from state.items
-        const randomIndex = Math.floor(Math.random() * state.items.length);
-        state.items.splice(randomIndex, 1);
-      }, deletionInterval);
+    return () => clearInterval(i);
+  }, [periodicDeletions, deletionInterval, state.items]);
 
-      return () => clearInterval(interval);
-    }, [periodicDeletions, deletionInterval, state.items]);
+  const onUpdate = useCallback((...args: any[]) => {}, []);
+  const columns = useMemo(() => makeColumns(onUpdate), []);
 
-    const onUpdate = useCallback((...args: any[]) => {}, []);
-    const columns = useMemo(() => makeColumns(onUpdate), []);
+  return (
+    <Table.Root>
+      <Table.Viewport classNames='fixed inset-0'>
+        <Table.Main<Item>
+          role='grid'
+          rowsSelectable='multi'
+          keyAccessor={(row) => row.publicKey.toHex()}
+          columns={columns}
+          data={state.items}
+          fullWidth
+          stickyHeader
+          border
+          pinLastRow
+        />
+      </Table.Viewport>
+    </Table.Root>
+  );
+};
 
-    return (
-      <Table.Root>
-        <Table.Viewport classNames='fixed inset-0'>
-          <Table.Main<Item>
-            role='grid'
-            rowsSelectable='multi'
-            keyAccessor={(row) => row.publicKey.toHex()}
-            columns={columns}
-            data={state.items}
-            fullWidth
-            stickyHeader
-            border
-            pinLastRow
-          />
-        </Table.Viewport>
-      </Table.Root>
-    );
+export const RealTimeUpdates = {
+  argTypes: {
+    periodicMutations: { control: 'boolean' },
+    mutationInterval: { control: 'number' },
+    periodicDeletions: { control: 'boolean' },
+    deletionInterval: { control: 'number' },
+    periodicInsertions: { control: 'boolean' },
+    insertionInterval: { control: 'number' },
   },
+  args: {
+    periodicMutations: true,
+    mutationInterval: 1000,
+    periodicDeletions: false,
+    deletionInterval: 5000,
+    periodicInsertions: false,
+    insertionInterval: 3000,
+  } satisfies StoryProps,
+  decorators: [withSignals],
+  render: Story,
 };

package/src/components/Table/Table.tsx

@@ -16,13 +16,13 @@ import {
 } from '@tanstack/react-table';
 import React, {
   type ComponentPropsWithoutRef,
+  type ReactNode,
   Fragment,
+  memo,
   useCallback,
   useEffect,
   useState,
   useContext,
-  type ReactNode,
-  memo,
 } from 'react';
 
 import { DensityProvider, type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
@@ -55,7 +55,6 @@ const TableViewport = ({ children, classNames, asChild, ...props }: TableViewpor
   const { scrollContextRef } = useContext(TableRootContext);
 
   const classes = mx(classNames, 'overflow-auto');
-
   return asChild ? (
     <Slot ref={scrollContextRef} className={classes} {...props}>
       {children}
@@ -70,17 +69,17 @@ const TableViewport = ({ children, classNames, asChild, ...props }: TableViewpor
 export const TablePrimitive = <TData extends RowData>(props: TableProps<TData>) => {
   const {
     role,
-    onColumnResize,
-    columnVisibility,
     header = true,
     rowsSelectable,
     debug,
-    onDataSelectionChange,
     pinLastRow,
+    columnVisibility,
+    onColumnResize,
+    onDataSelectionChange,
   } = props;
 
-  const columns = useDefaultValue(props.columns, []);
-  const incomingData = useDefaultValue(props.data, []);
+  const columns = useDefaultValue(props.columns, () => []);
+  const incomingData = useDefaultValue(props.data, () => []);
 
   const [data, setData] = useState([...incomingData]);
 
@@ -110,7 +109,7 @@ export const TablePrimitive = <TData extends RowData>(props: TableProps<TData>)
     // Columns
     columns,
     defaultColumn: {
-      size: 256, // Required in order remove default width.
+      size: 400, // Required in order remove default width.
       maxSize: 1024,
     },