@dxos/react-ui-table 0.8.2-main.f081794 → 0.8.2-main.f11618f

package/src/model/table-model.ts

@@ -21,6 +21,7 @@ import { type ViewType, type ViewProjection } from '@dxos/schema';
 import { type SelectionMode, SelectionModel } from './selection-model';
 import { TableSorting } from './table-sorting';
 import { touch } from '../util';
+import { extractTagIds } from '../util/tag';
 
 // TODO(burdon): Use schema types.
 export type TableRow = Record<JsonProp, any> & { id: string };
@@ -348,6 +349,22 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
         break;
       }
 
+      case FormatEnum.SingleSelect: {
+        const ids = extractTagIds(value);
+        if (ids && ids.length > 0) {
+          setValue(this._rows.value[rowIdx], field.path, ids[0]);
+        }
+        break;
+      }
+
+      case FormatEnum.MultiSelect: {
+        const ids = extractTagIds(value);
+        if (ids) {
+          setValue(this._rows.value[rowIdx], field.path, ids);
+        }
+        break;
+      }
+
       default: {
         setValue(
           this._rows.value[rowIdx],

package/src/model/table-presentation.ts

@@ -4,7 +4,7 @@
 
 import { signal } from '@preact/signals-core';
 
-import { FormatEnum, getValue } from '@dxos/echo-schema';
+import { FormatEnum, getDXN, getValue } from '@dxos/echo-schema';
 import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
   type DxGridPlane,
@@ -124,10 +124,8 @@ export class TablePresentation<T extends TableRow = TableRow> {
       if (props.format === FormatEnum.Ref && props.referenceSchema) {
         const targetObj = getValue(obj, field.path)?.target;
         if (targetObj) {
-          cell.accessoryHtml = tableButtons.referencedCell.render({
-            targetId: targetObj.id as any as string,
-            schemaId: props.referenceSchema,
-          });
+          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>`;
         }
       }
 

package/src/util/table-buttons.ts

@@ -15,7 +15,6 @@ export const BUTTON_IDENTIFIERS: { [K in TableButton]: string } = {
 type ButtonData =
   | { type: 'columnSettings'; fieldId: string }
   | { type: 'newColumn'; disabled?: boolean }
-  | { type: 'referencedCell'; schemaId: string; targetId: string }
   | { type: 'rowMenu'; rowIndex: number }
   | { type: 'sort'; fieldId: string; direction?: 'asc' | 'desc' };
 
@@ -76,27 +75,6 @@ const columnSettingsButton = {
   }),
 } as const;
 
-const referencedCellButton = {
-  attr: BUTTON_IDENTIFIERS.referencedCell,
-  icon: 'ph--link-simple-horizontal--regular',
-  render: ({ targetId, schemaId }: Omit<Extract<ButtonData, { type: 'referencedCell' }>, 'type'>) => {
-    return createButton({
-      attr: BUTTON_IDENTIFIERS.referencedCell,
-      icon: referencedCellButton.icon,
-      data: {
-        'data-target-id': targetId,
-        'data-schema-id': schemaId,
-      },
-      testId: 'table-ref-cell-button',
-    });
-  },
-  getData: (el: HTMLElement): Extract<ButtonData, { type: 'referencedCell' }> => ({
-    type: 'referencedCell',
-    targetId: el.getAttribute('data-target-id')!,
-    schemaId: el.getAttribute('data-schema-id')!,
-  }),
-} as const;
-
 const rowMenuButton = {
   attr: BUTTON_IDENTIFIERS.rowMenu,
   icon: 'ph--dots-three--regular',
@@ -143,7 +121,6 @@ const sortButton = {
 export const tableButtons = {
   addColumn: addColumnButton,
   columnSettings: columnSettingsButton,
-  referencedCell: referencedCellButton,
   rowMenu: rowMenuButton,
   sort: sortButton,
 } as const;

package/src/util/table.ts

@@ -41,11 +41,7 @@ export const initializeTable = async ({
       throw new Error(`Schema not found: ${typename}`);
     }
 
-    // We need to get the schema properties here.
-    // For now, only simple types and refs, not compound types are going to be supported.
-    const fields = getSchemaProperties(schema.ast)
-      .filter((prop) => prop.format !== FormatEnum.Ref)
-      .map((prop) => prop.name);
+    const fields = getSchemaProperties(schema.ast).map((prop) => prop.name);
 
     table.view = makeRef(
       createView({

package/src/util/tag.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// TODO(ZaymonFC): Push this into the tag picker module.
+
+/**
+ * Regex pattern for matching tags in the format [Label](id)
+ */
+export const TAG_PATTERN_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
+
+/**
+ * Extracts tag IDs from a string in the format [Label](id)
+ * @param value The string to extract IDs from
+ * @returns Array of extracted IDs or undefined if no matches or value is not a string
+ */
+export const extractTagIds = (value: unknown): string[] | undefined => {
+  if (typeof value !== 'string') {
+    return undefined;
+  }
+
+  const ids: string[] = [];
+  let match;
+
+  // Use the global regex to find all matches
+  while ((match = TAG_PATTERN_REGEX.exec(value)) !== null) {
+    if (match[2]) {
+      ids.push(match[2]);
+    }
+  }
+
+  return ids.length > 0 ? ids : undefined;
+};

package/dist/types/src/components/Table/RefPanel.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { type TableModel, type ModalController } from '../../model';
-type RefPanelProps = {
-    model: TableModel;
-    modals: ModalController;
-};
-export declare const RefPanel: ({ model, modals }: RefPanelProps) => React.JSX.Element | null;
-export {};
-//# sourceMappingURL=RefPanel.d.ts.map

package/dist/types/src/components/Table/RefPanel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RefPanel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/RefPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAEpE,KAAK,aAAa,GAAG;IAAE,KAAK,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,eAAe,CAAA;CAAE,CAAC;AAUpE,eAAO,MAAM,QAAQ,sBAAuB,aAAa,6BA6BxD,CAAC"}

package/src/components/Table/RefPanel.tsx

@@ -1,52 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React from 'react';
-
-import { type Space } from '@dxos/react-client/echo';
-import { Popover } from '@dxos/react-ui';
-import { Form } from '@dxos/react-ui-form';
-
-import { type TableModel, type ModalController } from '../../model';
-
-type RefPanelProps = { model: TableModel; modals: ModalController };
-
-const getRefTargetObj = (space?: Space, id?: string) => {
-  if (space && id) {
-    return space?.db.getObjectById(id);
-  } else {
-    return undefined;
-  }
-};
-
-export const RefPanel = ({ model, modals }: RefPanelProps) => {
-  const state = modals.state.value;
-  const space = model?.space;
-  const targetObj = getRefTargetObj(space, state?.type === 'refPanel' ? state.targetId : undefined);
-  const schema = space && state?.type === 'refPanel' ? space.db.schemaRegistry.getSchema(state.typename) : undefined;
-
-  if (!model.view || !model.projection) {
-    return null;
-  }
-
-  return (
-    <Popover.Root
-      modal={false}
-      open={state?.type === 'refPanel' && !!targetObj && !!schema}
-      onOpenChange={(nextOpen) => {
-        if (!nextOpen) {
-          return modals.close();
-        }
-      }}
-    >
-      <Popover.VirtualTrigger virtualRef={modals.trigger} />
-      <Popover.Portal>
-        <Popover.Content classNames='md:is-64'>
-          {targetObj && schema && <Form readonly values={targetObj} schema={schema} />}
-          <Popover.Arrow />
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-};