@dxos/react-ui-table 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -38,7 +38,7 @@ export const FormCellEditor = ({ fieldProjection, model, schema, __gridScope }:
       return undefined;
     }
     return narrowSchema(schema, [fieldProjection.field.path]);
-  }, [JSON.stringify(schema), fieldProjection.field.path]);
+  }, [JSON.stringify(schema), fieldProjection.field.path]); // TODO(burdon): Avoid stringify.
 
   const originalRow = useMemo(() => {
     if (model && editing) {
@@ -85,7 +85,7 @@ export const FormCellEditor = ({ fieldProjection, model, schema, __gridScope }:
   return (
     <Popover.Root open={editing !== null} onOpenChange={handleOpenChange}>
       <Popover.VirtualTrigger virtualRef={cellRef} />
-      <Popover.Content tabIndex={-1} classNames='popover-consistent-width'>
+      <Popover.Content tabIndex={-1} classNames='popover-card-width'>
         <Popover.Arrow />
         <Form values={formValues} schema={narrowedSchema as any} onSave={handleSave} />
       </Popover.Content>

package/src/components/TableCellEditor/TableCellEditor.stories.tsx

@@ -61,7 +61,8 @@ const DefaultStory = ({ editing }: StoryProps) => {
   const model = useTableModel({ table, projection, features });
 
   const handleQuery: TableCellEditorProps['onQuery'] = async ({ field }) => {
-    const { objects } = await space.db.query(schema).run();
+    // TODO(dmaretskyi): If no schema query nothing
+    const { objects } = await space.db.query(schema ? Filter.type(schema) : Filter.everything()).run();
     return objects.map((obj) => {
       const label = obj[field.referencePath ?? 'id'];
       return {

package/src/components/TableToolbar/TableToolbar.tsx

@@ -2,11 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useMemo } from 'react';
+import { Rx } from '@effect-rx/rx-react';
+import React, { useMemo } from 'react';
 
 import { live } from '@dxos/live-object';
 import { type ThemedClassName } from '@dxos/react-ui';
 import {
+  type ActionGraphEdges,
+  type ActionGraphNodes,
+  type ActionGraphProps,
   createGapSeparator,
   createMenuAction,
   type MenuAction,
@@ -14,6 +18,7 @@ import {
   ToolbarMenu,
   useMenuActions,
 } from '@dxos/react-ui-menu';
+import { rxFromSignal } from '@dxos/react-ui-menu';
 
 import { translationKey } from '../../translations';
 
@@ -26,41 +31,67 @@ export type TableToolbarActionType = 'add-row' | 'comment' | 'save-view';
 type TableToolbarState = Partial<{ viewDirty: boolean }>;
 
 export type TableToolbarProps = ThemedClassName<
-  TableToolbarState & { onAction: (action: TableToolbarAction) => void; attendableId?: string }
+  TableToolbarState & {
+    onAdd: () => void;
+    onSave: () => void;
+    attendableId?: string;
+    customActions?: Rx.Rx<ActionGraphProps>;
+  }
 >;
 
-const createTableToolbarActions = (state: TableToolbarState, onAction: (action: TableToolbarAction) => void) => {
-  const add = createMenuAction<TableToolbarActionProperties>('add-row', () => onAction(add), {
-    type: 'add-row' as const,
-    icon: 'ph--plus--regular',
-    label: ['add row', { ns: translationKey }],
-    testId: 'table.toolbar.add-row',
+const createTableToolbarActions = ({
+  state,
+  onAdd,
+  onSave,
+  customActions,
+}: {
+  state: TableToolbarState;
+  onAdd: () => void;
+  onSave: () => void;
+  customActions?: Rx.Rx<ActionGraphProps>;
+}) =>
+  Rx.make((get) => {
+    const add = createMenuAction<TableToolbarActionProperties>('add-row', onAdd, {
+      type: 'add-row' as const,
+      icon: 'ph--plus--regular',
+      label: ['add row', { ns: translationKey }],
+      testId: 'table.toolbar.add-row',
+    });
+    const save = createMenuAction<TableToolbarActionProperties>('save-view', onSave, {
+      type: 'save-view' as const,
+      icon: 'ph--floppy-disk--regular',
+      label: ['save view label', { ns: translationKey }],
+      testId: 'table.toolbar.save-view',
+      iconOnly: false,
+      hidden: get(rxFromSignal(() => !state.viewDirty)),
+    });
+    const gap = createGapSeparator();
+    const nodes: ActionGraphNodes = [add, save, ...gap.nodes];
+    const edges: ActionGraphEdges = nodes.map(({ id: target }) => ({ source: 'root', target }));
+    if (customActions) {
+      const custom = get(customActions);
+      nodes.push(...custom.nodes);
+      edges.push(...custom.edges);
+    }
+    return {
+      nodes,
+      edges,
+    };
   });
-  const save = createMenuAction<TableToolbarActionProperties>('save-view', () => onAction(save), {
-    type: 'save-view' as const,
-    icon: 'ph--floppy-disk--regular',
-    label: ['save view label', { ns: translationKey }],
-    testId: 'table.toolbar.save-view',
-    iconOnly: false,
-    hidden: !state.viewDirty,
-  });
-  const gap = createGapSeparator();
-  const comment = createMenuAction('comment', () => onAction(comment), {
-    type: 'comment' as const,
-    icon: 'ph--chat-text--regular',
-    label: ['create comment', { ns: translationKey }],
-    testId: 'table.toolbar.comment',
-  });
-  const nodes = [add, save, ...gap.nodes, comment];
-  return {
-    nodes,
-    edges: nodes.map(({ id: target }) => ({ source: 'root', target })),
-  };
-};
 
-export const TableToolbar = ({ classNames, viewDirty, attendableId, onAction }: TableToolbarProps) => {
+export const TableToolbar = ({
+  classNames,
+  viewDirty,
+  attendableId,
+  onAdd,
+  onSave,
+  customActions,
+}: TableToolbarProps) => {
   const state = useMemo(() => live<TableToolbarState>({ viewDirty }), []);
-  const actionsCreator = useCallback(() => createTableToolbarActions(state, onAction), [state, onAction]);
+  const actionsCreator = useMemo(
+    () => createTableToolbarActions({ state, onAdd, onSave, customActions }),
+    [state, onAdd, onSave, customActions],
+  );
   const menu = useMenuActions(actionsCreator);
 
   return (

package/src/hooks/useTableModel.ts

@@ -70,7 +70,9 @@ export const useTableModel = <T extends TableRow = TableRow>({
     }
   }, [model, rows]);
 
-  const { select, clear } = useSelectionActions([table?.id, table?.view?.target?.query.typename].filter(isNonNullable));
+  const { multiSelect, clear } = useSelectionActions(
+    [table?.id, table?.view?.target?.query.typename].filter(isNonNullable),
+  );
 
   useEffect(() => {
     if (!model) {
@@ -79,7 +81,7 @@ export const useTableModel = <T extends TableRow = TableRow>({
 
     const unsubscribe = effect(() => {
       const selectedItems = [...model.selection.selection.value];
-      select(selectedItems);
+      multiSelect(selectedItems);
       onSelectionChanged?.(selectedItems);
     });
 

package/src/model/selection-model.ts

@@ -43,7 +43,7 @@ export class SelectionModel<T extends TableRow> extends Resource {
     super();
   }
 
-  protected override async _open() {
+  protected override async _open(): Promise<void> {
     const selectionWatcher = effect(() => {
       touch(this._selection.value);
       this._onSelectionChanged?.();

package/src/model/table-model.ts

@@ -202,7 +202,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   // Initialisation
   //
 
-  protected override async _open() {
+  protected override async _open(): Promise<void> {
     this.initializeColumnMeta();
     this.initializeEffects();
     this._selection = new SelectionModel(this._sorting.sortedRows, this._features.selection.mode ?? 'multiple', () =>

package/src/model/table-presentation.ts

@@ -171,7 +171,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
         const targetObj = getValue(obj, field.path)?.target;
         if (targetObj) {
           const dxn = getDXN(targetObj)?.toString();
-          cell.accessoryHtml = `<dx-ref-tag ref=${dxn} class="dx-button block is-6 pli-[3px] plb-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
+          cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button block is-6 pli-[3px] plb-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
         }
       }
 

package/src/types/table.ts

@@ -5,7 +5,7 @@
 import { Schema } from 'effect';
 
 // import { ThreadType } from '@dxos/plugin-space/types';
-import { LabelAnnotationId, ObjectId, Ref, Expando, EchoObject } from '@dxos/echo-schema';
+import { ObjectId, Ref, Expando, EchoObject, LabelAnnotation } from '@dxos/echo-schema';
 import { ViewType } from '@dxos/schema';
 
 export const TableSchema = Schema.Struct({
@@ -14,10 +14,7 @@ export const TableSchema = Schema.Struct({
   view: Schema.optional(Ref(ViewType)),
   // TODO(burdon): Document why threads is included here?
   threads: Schema.optional(Schema.Array(Ref(Expando /* ThreadType */))),
-}).annotations({
-  // TODO(burdon): Move annotation to property.
-  [LabelAnnotationId]: 'name',
-});
+}).pipe(LabelAnnotation.set(['name']));
 
 // TODO(burdon): Move out of react-ui-xxx.
 export const TableType = TableSchema.pipe(

package/src/util/table-buttons.ts

@@ -38,7 +38,7 @@ const createButton = ({
     .join(' ');
 
   const positionClass = type === 'primary' ? 'inline-end-2' : 'inline-end-9';
-  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? 'disabled' : ''}><svg><use href="/icons.svg#${icon}"/></svg></button>`;
+  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? 'disabled' : ''}><svg data-size="4"><use href="/icons.svg#${icon}"/></svg></button>`;
 };
 
 const addColumnButton = {

package/src/util/table.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema, SchemaAST } from 'effect';
+import { Schema } from 'effect';
 
 import {
   type EchoSchema,
@@ -83,10 +83,10 @@ const ContactSchema = TypedObject({
   typename: `example.com/type/${PublicKey.random().truncate()}`,
   version: '0.1.0',
 })({
-  name: Schema.optional(Schema.String).annotations({ [SchemaAST.TitleAnnotationId]: 'Name' }),
+  name: Schema.optional(Schema.String).annotations({ title: 'Name' }),
   active: Schema.optional(Schema.Boolean),
   email: Schema.optional(Format.Email),
-  salary: Schema.optional(Format.Currency()).annotations({ [SchemaAST.TitleAnnotationId]: 'Salary' }),
+  salary: Schema.optional(Format.Currency()).annotations({ title: 'Salary' }),
 });
 
 const ContactFields = ['name', 'email', 'salary', 'active'];

package/dist/lib/browser/chunk-PFFO5LYM.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/table.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\n// import { ThreadType } from '@dxos/plugin-space/types';\nimport { LabelAnnotationId, ObjectId, Ref, Expando, EchoObject } from '@dxos/echo-schema';\nimport { ViewType } from '@dxos/schema';\n\nexport const TableSchema = Schema.Struct({\n  id: ObjectId,\n  name: Schema.optional(Schema.String),\n  view: Schema.optional(Ref(ViewType)),\n  // TODO(burdon): Document why threads is included here?\n  threads: Schema.optional(Schema.Array(Ref(Expando /* ThreadType */))),\n}).annotations({\n  // TODO(burdon): Move annotation to property.\n  [LabelAnnotationId]: 'name',\n});\n\n// TODO(burdon): Move out of react-ui-xxx.\nexport const TableType = TableSchema.pipe(\n  EchoObject({\n    typename: 'dxos.org/type/Table',\n    version: '0.1.0',\n  }),\n);\nexport interface TableType extends Schema.Schema.Type<typeof TableType> {}\n"],
-  "mappings": ";AAIA,SAASA,cAAc;AAGvB,SAASC,mBAAmBC,UAAUC,KAAKC,SAASC,kBAAkB;AACtE,SAASC,gBAAgB;AAElB,IAAMC,cAAcC,OAAOC,OAAO;EACvCC,IAAIC;EACJC,MAAMJ,OAAOK,SAASL,OAAOM,MAAM;EACnCC,MAAMP,OAAOK,SAASG,IAAIC,QAAAA,CAAAA;;EAE1BC,SAASV,OAAOK,SAASL,OAAOW,MAAMH;IAAII;;EAAsB,CAAA,CAAA;AAClE,CAAA,EAAGC,YAAY;;EAEb,CAACC,iBAAAA,GAAoB;AACvB,CAAA;AAGO,IAAMC,YAAYhB,YAAYiB,KACnCC,WAAW;EACTC,UAAU;EACVC,SAAS;AACX,CAAA,CAAA;",
-  "names": ["Schema", "LabelAnnotationId", "ObjectId", "Ref", "Expando", "EchoObject", "ViewType", "TableSchema", "Schema", "Struct", "id", "ObjectId", "name", "optional", "String", "view", "Ref", "ViewType", "threads", "Array", "Expando", "annotations", "LabelAnnotationId", "TableType", "pipe", "EchoObject", "typename", "version"]
-}

package/dist/lib/node/chunk-VREQOYRW.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/table.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\n// import { ThreadType } from '@dxos/plugin-space/types';\nimport { LabelAnnotationId, ObjectId, Ref, Expando, EchoObject } from '@dxos/echo-schema';\nimport { ViewType } from '@dxos/schema';\n\nexport const TableSchema = Schema.Struct({\n  id: ObjectId,\n  name: Schema.optional(Schema.String),\n  view: Schema.optional(Ref(ViewType)),\n  // TODO(burdon): Document why threads is included here?\n  threads: Schema.optional(Schema.Array(Ref(Expando /* ThreadType */))),\n}).annotations({\n  // TODO(burdon): Move annotation to property.\n  [LabelAnnotationId]: 'name',\n});\n\n// TODO(burdon): Move out of react-ui-xxx.\nexport const TableType = TableSchema.pipe(\n  EchoObject({\n    typename: 'dxos.org/type/Table',\n    version: '0.1.0',\n  }),\n);\nexport interface TableType extends Schema.Schema.Type<typeof TableType> {}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAIA,oBAAuB;AAGvB,yBAAsE;AACtE,oBAAyB;AAElB,IAAMA,cAAcC,qBAAOC,OAAO;EACvCC,IAAIC;EACJC,MAAMJ,qBAAOK,SAASL,qBAAOM,MAAM;EACnCC,MAAMP,qBAAOK,aAASG,wBAAIC,sBAAAA,CAAAA;;EAE1BC,SAASV,qBAAOK,SAASL,qBAAOW,UAAMH;IAAII;;EAAsB,CAAA,CAAA;AAClE,CAAA,EAAGC,YAAY;;EAEb,CAACC,oCAAAA,GAAoB;AACvB,CAAA;AAGO,IAAMC,YAAYhB,YAAYiB,SACnCC,+BAAW;EACTC,UAAU;EACVC,SAAS;AACX,CAAA,CAAA;",
-  "names": ["TableSchema", "Schema", "Struct", "id", "ObjectId", "name", "optional", "String", "view", "Ref", "ViewType", "threads", "Array", "Expando", "annotations", "LabelAnnotationId", "TableType", "pipe", "EchoObject", "typename", "version"]
-}

package/dist/lib/node-esm/chunk-34JG3SDI.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/table.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\n// import { ThreadType } from '@dxos/plugin-space/types';\nimport { LabelAnnotationId, ObjectId, Ref, Expando, EchoObject } from '@dxos/echo-schema';\nimport { ViewType } from '@dxos/schema';\n\nexport const TableSchema = Schema.Struct({\n  id: ObjectId,\n  name: Schema.optional(Schema.String),\n  view: Schema.optional(Ref(ViewType)),\n  // TODO(burdon): Document why threads is included here?\n  threads: Schema.optional(Schema.Array(Ref(Expando /* ThreadType */))),\n}).annotations({\n  // TODO(burdon): Move annotation to property.\n  [LabelAnnotationId]: 'name',\n});\n\n// TODO(burdon): Move out of react-ui-xxx.\nexport const TableType = TableSchema.pipe(\n  EchoObject({\n    typename: 'dxos.org/type/Table',\n    version: '0.1.0',\n  }),\n);\nexport interface TableType extends Schema.Schema.Type<typeof TableType> {}\n"],
-  "mappings": ";;;AAIA,SAASA,cAAc;AAGvB,SAASC,mBAAmBC,UAAUC,KAAKC,SAASC,kBAAkB;AACtE,SAASC,gBAAgB;AAElB,IAAMC,cAAcC,OAAOC,OAAO;EACvCC,IAAIC;EACJC,MAAMJ,OAAOK,SAASL,OAAOM,MAAM;EACnCC,MAAMP,OAAOK,SAASG,IAAIC,QAAAA,CAAAA;;EAE1BC,SAASV,OAAOK,SAASL,OAAOW,MAAMH;IAAII;;EAAsB,CAAA,CAAA;AAClE,CAAA,EAAGC,YAAY;;EAEb,CAACC,iBAAAA,GAAoB;AACvB,CAAA;AAGO,IAAMC,YAAYhB,YAAYiB,KACnCC,WAAW;EACTC,UAAU;EACVC,SAAS;AACX,CAAA,CAAA;",
-  "names": ["Schema", "LabelAnnotationId", "ObjectId", "Ref", "Expando", "EchoObject", "ViewType", "TableSchema", "Schema", "Struct", "id", "ObjectId", "name", "optional", "String", "view", "Ref", "ViewType", "threads", "Array", "Expando", "annotations", "LabelAnnotationId", "TableType", "pipe", "EchoObject", "typename", "version"]
-}