@dxos/react-ui-table 0.3.7-main.e08407b → 0.3.7-main.ec7f1fc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.3.7-main.e08407b",
+  "version": "0.3.7-main.ec7f1fc",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -20,13 +20,14 @@
     "@tanstack/react-table": "^8.9.3",
     "date-fns": "^2.29.3",
     "lodash.defaultsdeep": "^4.6.1",
-    "@dxos/async": "0.3.7-main.e08407b",
-    "@dxos/keys": "0.3.7-main.e08407b",
-    "@dxos/invariant": "0.3.7-main.e08407b",
-    "@dxos/react-ui": "0.3.7-main.e08407b",
-    "@dxos/react-ui-types": "0.3.7-main.e08407b",
-    "@dxos/react-ui-theme": "0.3.7-main.e08407b",
-    "@dxos/util": "0.3.7-main.e08407b"
+    "@dxos/invariant": "0.3.7-main.ec7f1fc",
+    "@dxos/async": "0.3.7-main.ec7f1fc",
+    "@dxos/keys": "0.3.7-main.ec7f1fc",
+    "@dxos/react-ui-searchlist": "0.3.7-main.ec7f1fc",
+    "@dxos/react-ui": "0.3.7-main.ec7f1fc",
+    "@dxos/react-ui-types": "0.3.7-main.ec7f1fc",
+    "@dxos/react-ui-theme": "0.3.7-main.ec7f1fc",
+    "@dxos/util": "0.3.7-main.ec7f1fc"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",
@@ -40,7 +41,7 @@
     "react-dom": "^18.2.0",
     "vite": "^4.3.9",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/react-ui-theme": "0.3.7-main.e08407b"
+    "@dxos/react-ui-theme": "0.3.7-main.ec7f1fc"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/components/ComboboxCell.tsx

@@ -0,0 +1,97 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretDown } from '@phosphor-icons/react';
+import { type RowData } from '@tanstack/react-table';
+import React, { useCallback, useState } from 'react';
+
+import { Popover, useTranslation } from '@dxos/react-ui';
+import { PopoverCombobox } from '@dxos/react-ui-searchlist';
+import { descriptionText, getSize, mx, staticPlaceholderText } from '@dxos/react-ui-theme';
+
+import { type SelectQueryModel } from '../helpers';
+import { translationKey } from '../translations';
+
+export type ComboboxCellItems<TData extends RowData> = Record<string, { label: string; data: TData }>;
+
+const initialItems = <TData extends RowData>(model: SelectQueryModel<TData>, value?: TData) =>
+  value
+    ? {
+        [model.getId(value)]: { label: model.getText(value), data: value },
+      }
+    : {};
+
+export const ComboboxCell = <TData extends RowData>({
+  model,
+  value,
+  onValueChange,
+}: {
+  model: SelectQueryModel<TData>;
+  value: TData;
+  onValueChange: (value: TData) => void;
+}) => {
+  const { t } = useTranslation(translationKey);
+  const [items, setItems] = useState<ComboboxCellItems<TData>>(initialItems(model, value));
+  const [loading, setLoading] = useState(false);
+  const [searchInputValue, setSearchInputValue] = useState('');
+  const handleSearchInputValueChange = async (text?: string) => {
+    setSearchInputValue(text ?? '');
+    setLoading(true);
+    const items = await model.query(text);
+    setItems(
+      items.reduce((acc: ComboboxCellItems<TData>, item) => {
+        acc[model.getId(item)] = {
+          label: model.getText(item),
+          data: item,
+        };
+        return acc;
+      }, initialItems(model, value)),
+    );
+    setLoading(false);
+  };
+
+  const handleValueChange = useCallback(
+    (id: string) => {
+      onValueChange(items[id]?.data);
+    },
+    [items, onValueChange],
+  );
+
+  return (
+    <PopoverCombobox.Root placeholder={t('no selection label')}>
+      <PopoverCombobox.Trigger variant='ghost' classNames='is-full'>
+        {value ? (
+          <>
+            <span
+              className={mx('font-normal text-start flex-1 min-is-0 truncate mie-2', !value && staticPlaceholderText)}
+            >
+              {model.getText(value)}
+            </span>
+            <CaretDown weight='bold' className={getSize(3)} />
+          </>
+        ) : null}
+      </PopoverCombobox.Trigger>
+      <PopoverCombobox.Content shouldFilter={false} classNames='is-[--radix-popover-trigger-width]'>
+        <PopoverCombobox.Input value={searchInputValue} onValueChange={handleSearchInputValueChange} />
+        <PopoverCombobox.List>
+          {searchInputValue.length < 1 ? (
+            <p className={mx('text-center', descriptionText)}>Start typing to search</p>
+          ) : loading ? (
+            <p className={mx('text-center', descriptionText)}>Searching…</p>
+          ) : (
+            <>
+              <PopoverCombobox.Empty classNames={['text-center', descriptionText]}>No results</PopoverCombobox.Empty>
+              {Object.entries(items).map(([id, { label }]) => (
+                <PopoverCombobox.Item key={id} value={id} onSelect={handleValueChange} classNames='truncate'>
+                  {label}
+                </PopoverCombobox.Item>
+              ))}
+            </>
+          )}
+        </PopoverCombobox.List>
+        <Popover.Arrow />
+      </PopoverCombobox.Content>
+    </PopoverCombobox.Root>
+  );
+};

package/src/components/Table.stories.tsx

@@ -14,7 +14,7 @@ import { DensityProvider } from '@dxos/react-ui';
 import { range } from '@dxos/util';
 
 import { Table } from './Table';
-import { createColumnBuilder, type ValueUpdater } from '../helpers';
+import { createColumnBuilder, type SelectQueryModel, type ValueUpdater } from '../helpers';
 import { type TableColumnDef } from '../types';
 
 // TODO(burdon): Header menu builder.
@@ -23,11 +23,13 @@ import { type TableColumnDef } from '../types';
 type Item = {
   publicKey: PublicKey;
   name: string;
+  company?: string;
   count?: number;
   started?: Date;
   complete?: boolean;
 };
 
+// TODO(thure): …y’all okay?
 faker.seed(911);
 
 const createItems = (count: number) =>
@@ -46,59 +48,27 @@ const updateItems = <TValue = any,>(items: Item[], key: PublicKey, id: string, v
   return items.map((item) => (item.publicKey.equals(key) ? { ...item, [id]: value } : item));
 };
 
-/*
-// TODO(burdon): Remove.
-const schamas: TableSchema[] = [
-  {
-    id: 'a',
-    props: [
-      {
-        id: 'complete',
-        type: 'boolean',
-        label: 'ok',
-        fixed: true,
-        editable: true,
-      },
-      {
-        id: 'name',
-        type: 'string',
-        editable: true,
-        resizable: true,
-      },
-      {
-        id: 'count',
-        type: 'number',
-        size: 160,
-        editable: true,
-        resizable: true,
-      },
-    ],
-  },
-  {
-    id: 'b',
-    props: [
-      {
-        id: 'name',
-        type: 'string',
-        editable: true,
-        resizable: true,
-      },
-    ],
-  },
-  {
-    id: 'c',
-    props: [
-      {
-        id: 'count',
-        type: 'number',
-        size: 160,
-        editable: true,
-        resizable: true,
-      },
-    ],
+const tableStorySelectItems: Record<string, Item> = range(128).reduce((acc: Record<string, Item>, _i) => {
+  const id = PublicKey.random();
+  acc[id.toHex()] = {
+    publicKey: id,
+    name: faker.company.name(),
+  };
+  return acc;
+}, {});
+
+const timeout = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const tableStorySelectModel: SelectQueryModel<Item> = {
+  getId: (object) => object?.publicKey?.toHex() ?? 'never',
+  getText: (object) => object?.name ?? 'never',
+  query: async (search: string) => {
+    await timeout(400);
+    return Object.values(tableStorySelectItems).filter((item) => {
+      return item.name.toLowerCase().includes(search.toLowerCase());
+    });
   },
-];
-*/
+};
 
 const { helper, builder } = createColumnBuilder<Item>();
 const columns = (onUpdate?: ValueUpdater<Item, any>): TableColumnDef<Item, any>[] => [
@@ -116,10 +86,19 @@ const columns = (onUpdate?: ValueUpdater<Item, any>): TableColumnDef<Item, any>[
     'name',
     builder.string({ onUpdate, meta: { expand: true }, footer: (props) => props.table.getRowModel().rows.length }),
   ),
-  helper.accessor('started', builder.date({ relative: true })),
+  helper.accessor(
+    'company',
+    builder.select({
+      label: 'Company',
+      model: tableStorySelectModel,
+      onUpdate,
+    }),
+  ),
+  helper.accessor('started', builder.date({ relative: true, meta: { resizable: true } })),
   helper.accessor(
     'count',
     builder.number({
+      meta: { resizable: true },
       // TODO(burdon): Sorting.
       getGroupingValue: (row) => (row.count ? (row.count < 2_000 ? 'A' : row.count < 5_000 ? 'B' : 'C') : 'D'),
     }),
@@ -186,18 +165,11 @@ export default {
   },
   decorators: [
     (Story: any) => (
-      <div className='flex flex-col items-center h-screen w-full overflow-hidden bg-zinc-200'>
-        <div className='flex w-[800px] h-full'>
-          <DensityProvider density='fine'>
-            <Story />
-          </DensityProvider>
-        </div>
-      </div>
+      <DensityProvider density='fine'>
+        <Story />
+      </DensityProvider>
     ),
   ],
-  parameters: {
-    layout: 'fullscreen',
-  },
 };
 
 export const Default = {
@@ -280,3 +252,29 @@ export const Editable = {
     );
   },
 };
+
+export const Resizable = {
+  render: () => {
+    const [items, setItems] = useState<Item[]>(createItems(10));
+    const onUpdate: ValueUpdater<Item, any> = (item, prop, value) => {
+      setItems((items) => updateItems(items, item.publicKey, prop, value));
+    };
+
+    // const handleColumnResize = (state) => {
+    //   console.log('resize', state);
+    // };
+
+    return (
+      <div className='flex grow overflow-hidden'>
+        {/* prettier-ignore */}
+        <Table<Item>
+          keyAccessor={row => row.publicKey.toHex()}
+          columns={columns(onUpdate)}
+          data={items}
+          fullWidth
+          // onColumnResize={handleColumnResize}
+        />
+      </div>
+    );
+  },
+};

package/src/components/index.ts

@@ -4,3 +4,4 @@
 
 export * from './ColumnMenu';
 export * from './Table';
+export * from './ComboboxCell';

package/src/helpers.tsx

@@ -8,13 +8,15 @@ import { createColumnHelper, type ColumnDef, type ColumnMeta, type RowData } fro
 import format from 'date-fns/format';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import defaultsDeep from 'lodash.defaultsdeep';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 
 import { type PublicKey } from '@dxos/keys';
-import { ComboBox, type ComboBoxItem, Input, Tooltip } from '@dxos/react-ui';
+import { 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,
@@ -94,51 +96,6 @@ const defaults = <TData extends RowData, TValue>(
   return stripUndefinedValues(defaultsDeep({}, options, ...sources));
 };
 
-/**
- * Lazy cell selector (click to activate).
- */
-const CellSelector = <TData extends RowData>({
-  model,
-  value: _value,
-  onUpdate,
-}: {
-  model: SelectQueryModel<TData>;
-  value: TData;
-  onUpdate: (value: TData) => void;
-}) => {
-  const [edit, setEdit] = useState(false);
-  const [value, setValue] = useState<ComboBoxItem>();
-  useEffect(() => setValue(_value ? { id: model.getId(_value), label: model.getText(_value) } : undefined), [_value]);
-  const [items, setItems] = useState<ComboBoxItem[]>([]);
-  const handleUpdate = async (text?: string) => {
-    const items = await model.query(text);
-    setItems(items.map((item) => ({ id: model.getId(item), label: model.getText(item), data: item })));
-  };
-
-  if (!edit) {
-    const text = _value ? model.getText(_value) : undefined;
-    return (
-      // TODO(burdon): Hack to prevent div from collapsing.
-      <div className={mx('w-full px-2', !text && 'opacity-0')} onClick={() => setEdit(true)}>
-        {text ?? '-'}
-      </div>
-    );
-  }
-
-  return (
-    <ComboBox.Root items={items} value={value} onChange={(value) => onUpdate(value?.data)} onInputChange={handleUpdate}>
-      <ComboBox.Input />
-      <ComboBox.Content>
-        {items.map((item) => (
-          <ComboBox.Item key={item.id} item={item}>
-            {item.label}
-          </ComboBox.Item>
-        ))}
-      </ComboBox.Content>
-    </ComboBox.Root>
-  );
-};
-
 /**
  * Util to create column definitions.
  */
@@ -155,10 +112,10 @@ export class ColumnBuilder<TData extends RowData> {
       cell:
         model && onUpdate
           ? (cell) => (
-              <CellSelector<any>
+              <ComboboxCell<any>
                 model={model}
                 value={cell.getValue()}
-                onUpdate={(value) => onUpdate?.(cell.row.original, cell.column.id, value)}
+                onValueChange={(value) => onUpdate?.(cell.row.original, cell.column.id, value)}
               />
             )
           : (cell) => {

package/src/translations.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const translationKey = 'table';
+
+export default [
+  {
+    'en-US': {
+      [translationKey]: {
+        'no selection label': ' ',
+      },
+    },
+  },
+];

package/src/types.ts

@@ -30,4 +30,4 @@ declare module '@tanstack/react-table' {
 
 export type KeyValue<TData extends RowData> = (row: TData) => string;
 
-export type TableColumnDef<TData extends RowData, TValue = unknown> = ColumnDef<TData, TValue>;
+export type TableColumnDef<TData extends RowData, TValue = any> = ColumnDef<TData, TValue>;