@dxos/react-ui-table 0.7.4 → 0.7.5-labs.a279d8c

package/src/util/table-buttons.ts

@@ -2,69 +2,148 @@
 // Copyright 2024 DXOS.org
 //
 
-type TableButton = 'columnSettings' | 'rowMenu' | 'newColumn' | 'referencedCell';
+export type TableButton = 'columnSettings' | 'rowMenu' | 'newColumn' | 'referencedCell' | 'sort';
 
-// TODO(thure): Lots of copy-pasted business here, this could by DRYed out substantially.
-
-// TODO(thure): These unique attributes come with more caveats than e.g. applying multiple attributes – one key-value
-//  pair for identifying the button type and another for passing the fieldId.
-
-const TABLE_ATTRS: { [K in TableButton]: string } = {
-  referencedCell: 'data-table-ref-cell-button',
+export const BUTTON_IDENTIFIERS: { [K in TableButton]: string } = {
   columnSettings: 'data-table-column-settings-button',
-  rowMenu: 'data-table-row-menu-button',
   newColumn: 'data-table-new-column-button',
+  referencedCell: 'data-table-ref-cell-button',
+  rowMenu: 'data-table-row-menu-button',
+  sort: 'data-table-sort-button',
 } as const;
 
-const ICONS: { [K in TableButton]: string } = {
-  referencedCell: 'ph--link-simple-horizontal--regular',
-  columnSettings: 'ph--caret-down--regular',
-  rowMenu: 'ph--dots-three--regular',
-  newColumn: 'ph--plus--regular',
-} as const;
+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' };
 
-const createButtonHtml = ({
-  button,
-  value = '',
+const createButton = ({
+  attr,
+  data,
   disabled = false,
+  icon,
   testId,
+  type = 'primary',
 }: {
-  button: TableButton;
-  value?: string;
+  attr: string;
+  data: Record<string, string>;
   disabled?: boolean;
+  icon: string;
   testId: string;
-}): string => {
-  const buttonClasses = 'ch-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 inline-end-2' as const;
-  return `<button class="${buttonClasses}" ${TABLE_ATTRS[button]}="${value}" data-testid="${testId}" ${disabled ? 'disabled' : ''}><svg><use href="/icons.svg#${ICONS[button]}"/></svg></button>`;
+  type?: 'primary' | 'secondary';
+}) => {
+  const dataAttrs = Object.entries(data)
+    .map(([k, v]) => `${k}="${v}"`)
+    .join(' ');
+
+  const positionClass = type === 'primary' ? 'inline-end-2' : 'inline-end-9';
+  return `<button ${attr} data-testid="${testId}" class="ch-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>`;
 };
 
-export const tableButtons = {
-  referencedCell: {
-    attr: TABLE_ATTRS.referencedCell,
-    icon: ICONS.referencedCell,
-    render: ({ targetId, schemaId }: { targetId: string; schemaId: string }) =>
-      createButtonHtml({
-        button: 'referencedCell',
-        value: `${schemaId}#${targetId}`,
-        testId: 'table-ref-cell-button',
-      }),
+const addColumnButton = {
+  attr: BUTTON_IDENTIFIERS.newColumn,
+  icon: 'ph--plus--regular',
+  render: ({ disabled }: Omit<Extract<ButtonData, { type: 'newColumn' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.newColumn,
+      icon: addColumnButton.icon,
+      disabled,
+      data: {},
+      testId: 'table-new-column-button',
+    });
   },
-  columnSettings: {
-    attr: TABLE_ATTRS.columnSettings,
-    icon: ICONS.columnSettings,
-    render: ({ fieldId }: { fieldId: string }) =>
-      createButtonHtml({ button: 'columnSettings', value: fieldId, testId: 'table-column-settings-button' }),
+  getData: (_el: HTMLElement): Extract<ButtonData, { type: 'newColumn' }> => ({ type: 'newColumn' }),
+} as const;
+
+const columnSettingsButton = {
+  attr: BUTTON_IDENTIFIERS.columnSettings,
+  icon: 'ph--caret-down--regular',
+  render: ({ fieldId }: Omit<Extract<ButtonData, { type: 'columnSettings' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.columnSettings,
+      icon: columnSettingsButton.icon,
+      data: {
+        'data-field-id': fieldId,
+      },
+      testId: 'table-column-settings-button',
+    });
   },
-  rowMenu: {
-    attr: TABLE_ATTRS.rowMenu,
-    icon: ICONS.rowMenu,
-    render: ({ rowIndex }: { rowIndex: number }) =>
-      createButtonHtml({ button: 'rowMenu', value: rowIndex.toString(), testId: 'table-row-menu-button' }),
+  getData: (el: HTMLElement): Extract<ButtonData, { type: 'columnSettings' }> => ({
+    type: 'columnSettings',
+    fieldId: el.getAttribute('data-field-id')!,
+  }),
+} 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',
+  render: ({ rowIndex }: Omit<Extract<ButtonData, { type: 'rowMenu' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.rowMenu,
+      icon: rowMenuButton.icon,
+      data: {
+        'data-row-index': rowIndex.toString(),
+      },
+      testId: 'table-row-menu-button',
+    });
   },
-  addColumn: {
-    attr: TABLE_ATTRS.newColumn,
-    icon: ICONS.newColumn,
-    render: ({ disabled }: { disabled?: boolean } = {}) =>
-      createButtonHtml({ button: 'newColumn', disabled, testId: 'table-new-column-button' }),
+  getData: (el: HTMLElement): Extract<ButtonData, { type: 'rowMenu' }> => ({
+    type: 'rowMenu',
+    rowIndex: Number(el.getAttribute('data-row-index')!),
+  }),
+} as const;
+
+const sortButton = {
+  attr: BUTTON_IDENTIFIERS.sort,
+  icon: 'ph--sort-ascending--regular',
+  render: ({ fieldId, direction }: Omit<Extract<ButtonData, { type: 'sort' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.sort,
+      icon: direction === 'desc' ? 'ph--sort-descending--regular' : 'ph--sort-ascending--regular',
+      data: {
+        'data-field-id': fieldId,
+        'data-direction': direction ?? '',
+      },
+      testId: 'table-sort-button',
+      // TODO(ZaymonFC): All buttons should be rendered into an absolutely positioned flex container.
+      // This is a bit hacky.
+      type: 'secondary',
+    });
   },
+  getData: (el: HTMLElement): Extract<ButtonData, { type: 'sort' }> => ({
+    type: 'sort',
+    fieldId: el.getAttribute('data-field-id')!,
+    direction: el.getAttribute('data-direction') as 'asc' | 'desc' | undefined,
+  }),
+} as const;
+
+export const tableButtons = {
+  addColumn: addColumnButton,
+  columnSettings: columnSettingsButton,
+  referencedCell: referencedCellButton,
+  rowMenu: rowMenuButton,
+  sort: sortButton,
 } as const;

package/src/util/table-controls.ts

@@ -2,26 +2,90 @@
 // Copyright 2024 DXOS.org
 //
 
-export const checkboxAttributes = {
+// Core types.
+export type TableControl = 'checkbox' | 'switch';
+
+export type ControlData =
+  | { type: 'checkbox'; rowIndex: number; header?: boolean }
+  | { type: 'switch'; colIndex: number; rowIndex: number };
+
+type CommonRenderProps = {
+  checked?: boolean;
+  disabled?: boolean;
+};
+
+export type RenderCheckboxProps = CommonRenderProps & Omit<Extract<ControlData, { type: 'checkbox' }>, 'type'>;
+export type RenderSwitchProps = CommonRenderProps & Omit<Extract<ControlData, { type: 'switch' }>, 'type'>;
+
+export const CONTROL_IDENTIFIERS = {
   checkbox: 'data-table-checkbox',
-  header: 'data-table-header',
+  switch: 'data-table-switch',
 } as const;
 
-export type RenderCheckboxProps = { rowIndex: number; header?: boolean; checked?: boolean; disabled?: boolean };
+const BASE_CLASSES = {
+  checkbox: 'absolute inset-block-[.375rem] inline-end-[.375rem] ch-checkbox',
+  switch: 'absolute inset-block-[.25rem] inline-end-[.25rem] ch-checkbox--switch',
+} as const;
+
+const renderAttributes = (data: Record<string, string>) => {
+  return Object.entries(data)
+    .map(([k, v]) => `${k}="${v}"`)
+    .join(' ');
+};
+
+const renderInput = (
+  baseClass: string,
+  attrs: Record<string, string>,
+  checked = false,
+  disabled = false,
+  preventToggle = false,
+  testId: string,
+) => {
+  return `<input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? 'checked' : ''} ${preventToggle ? 'onclick="return false"' : ''} ${disabled ? 'disabled' : ''} data-testid="${testId}"/>`;
+};
+
 export const renderCheckbox = ({
   rowIndex,
   header = false,
   checked = false,
   disabled = false,
 }: RenderCheckboxProps): string => {
-  const baseClasses = 'absolute inset-block-[6px] inline-end-[6px] ch-checkbox' as const;
-  const { attributes } = tableControls.checkbox;
-  return `<input type="checkbox" class="${baseClasses}" ${attributes.checkbox}="${rowIndex}" ${header ? attributes.header : ''} ${checked ? 'checked' : ''} ${disabled ? 'disabled' : ''} data-testid="table-selection"/>`;
+  const attrs = {
+    [CONTROL_IDENTIFIERS.checkbox]: '',
+    'data-row-index': rowIndex.toString(),
+    ...(header && { 'data-header': '' }),
+  };
+
+  return renderInput(BASE_CLASSES.checkbox, attrs, checked, disabled, true, 'table-selection');
+};
+
+export const renderSwitch = ({ colIndex, rowIndex, checked = false, disabled = false }: RenderSwitchProps): string => {
+  const attrs = {
+    [CONTROL_IDENTIFIERS.switch]: '',
+    'data-row-index': rowIndex.toString(),
+    'data-col-index': colIndex.toString(),
+  };
+
+  return renderInput(BASE_CLASSES.switch, attrs, checked, disabled, true, 'table-switch');
 };
 
 export const tableControls = {
   checkbox: {
-    attributes: checkboxAttributes,
+    attr: CONTROL_IDENTIFIERS.checkbox,
     render: renderCheckbox,
+    getData: (el: HTMLElement): Extract<ControlData, { type: 'checkbox' }> => ({
+      type: 'checkbox',
+      rowIndex: Number(el.getAttribute('data-row-index')),
+      header: el.hasAttribute('data-header'),
+    }),
+  },
+  switch: {
+    attr: CONTROL_IDENTIFIERS.switch,
+    render: renderSwitch,
+    getData: (el: HTMLElement): Extract<ControlData, { type: 'switch' }> => ({
+      type: 'switch',
+      rowIndex: Number(el.getAttribute('data-row-index')),
+      colIndex: Number(el.getAttribute('data-col-index')),
+    }),
   },
 } as const;

package/src/util/table.ts

@@ -8,15 +8,14 @@ import {
   FormatEnum,
   type JsonPath,
   type JsonProp,
-  type MutableSchema,
+  type EchoSchema,
   S,
   TypedObject,
   TypeEnum,
 } from '@dxos/echo-schema';
-import { log } from '@dxos/log';
 import { PublicKey } from '@dxos/react-client';
-import { create, type Space } from '@dxos/react-client/echo';
-import { createFieldId, createView, ViewProjection } from '@dxos/schema';
+import { create, makeRef, type Space } from '@dxos/react-client/echo';
+import { createFieldId, createView, getSchemaProperties, ViewProjection } from '@dxos/schema';
 
 import { type TableType } from '../types';
 
@@ -24,62 +23,104 @@ type InitialiseTableProps = {
   space: Space;
   table: TableType;
   initialRow?: boolean;
+  initialSchema?: string;
 };
 
+// TODO(ZaymonFC): Clean up the branching in this file.
+
 // TODO(burdon): Pass in type.
 // TODO(burdon): User should determine typename.
-export const initializeTable = ({ space, table, initialRow = true }: InitialiseTableProps): MutableSchema => {
-  log.info('initializeTable', { table });
+export const initializeTable = async ({
+  space,
+  table,
+  initialRow = true,
+  initialSchema,
+}: InitialiseTableProps): Promise<EchoSchema> => {
+  if (initialSchema) {
+    const schema = await space.db.schemaRegistry.query({ typename: initialSchema }).firstOrUndefined();
 
-  const ContactSchema = TypedObject({
-    typename: `example.com/type/${PublicKey.random().truncate()}`,
-    version: '0.1.0',
-  })({
-    name: S.optional(S.String).annotations({
-      [AST.TitleAnnotationId]: 'Name',
-    }),
-    email: S.optional(Format.Email),
-    salary: S.optional(Format.Currency()).annotations({
-      [AST.TitleAnnotationId]: 'Salary',
-    }), // TODO(burdon): Should default to prop name?
-  });
+    if (!schema) {
+      throw new Error(`Schema not found: ${initialSchema}`);
+    }
 
-  const contactSchema = space.db.schemaRegistry.addSchema(ContactSchema);
-  table.view = createView({
-    name: 'Test',
-    typename: contactSchema.typename,
-    jsonSchema: contactSchema.jsonSchema,
-    fields: ['name', 'email', 'salary'],
-  });
+    // 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.type !== 'object' || prop.format === FormatEnum.Ref)
+      .map((prop) => prop.name);
 
-  const projection = new ViewProjection(contactSchema, table.view!);
-  projection.setFieldProjection({
-    field: {
-      id: table.view.fields[2].id,
-      path: 'salary' as JsonPath,
-      size: 150,
-    },
-  });
+    table.view = makeRef(
+      createView({
+        // TODO(ZaymonFC): Don't hardcode name?
+        name: 'View',
+        typename: schema.typename,
+        jsonSchema: schema.jsonSchema,
+        fields,
+      }),
+    );
 
-  projection.setFieldProjection({
-    field: {
-      id: createFieldId(),
-      path: 'manager' as JsonPath,
-      referencePath: 'name' as JsonPath,
-    },
-    props: {
-      property: 'manager' as JsonProp,
-      type: TypeEnum.Ref,
-      format: FormatEnum.Ref,
-      referenceSchema: contactSchema.typename,
-      title: 'Manager',
-    },
-  });
+    return schema;
+  } else {
+    const ContactSchema = TypedObject({
+      typename: `example.com/type/${PublicKey.random().truncate()}`,
+      version: '0.1.0',
+    })({
+      name: S.optional(S.String).annotations({
+        [AST.TitleAnnotationId]: 'Name',
+      }),
+      active: S.optional(S.Boolean),
+      email: S.optional(Format.Email),
+      salary: S.optional(Format.Currency()).annotations({
+        [AST.TitleAnnotationId]: 'Salary',
+      }), // TODO(burdon): Should default to prop name?
+    });
 
-  if (initialRow) {
-    // TODO(burdon): Last (first) row should not be in db and should be managed by the model.
-    space.db.add(create(contactSchema, {}));
-  }
+    const [contactSchema] = await space.db.schemaRegistry.register([ContactSchema]);
+
+    table.view = makeRef(
+      createView({
+        name: 'View',
+        typename: contactSchema.typename,
+        jsonSchema: contactSchema.jsonSchema,
+        fields: ['name', 'email', 'salary', 'active'],
+      }),
+    );
 
-  return contactSchema;
+    const projection = new ViewProjection(contactSchema, table.view.target!);
+    projection.setFieldProjection({
+      field: {
+        id: table.view.target!.fields.find((f) => f.path === 'salary')!.id,
+        path: 'salary' as JsonPath,
+        size: 150,
+      },
+    });
+    projection.setFieldProjection({
+      field: {
+        id: table.view.target!.fields.find((f) => f.path === 'active')!.id,
+        path: 'active' as JsonPath,
+        size: 100,
+      },
+    });
+
+    projection.setFieldProjection({
+      field: {
+        id: createFieldId(),
+        path: 'manager' as JsonPath,
+        referencePath: 'name' as JsonPath,
+      },
+      props: {
+        property: 'manager' as JsonProp,
+        type: TypeEnum.Ref,
+        format: FormatEnum.Ref,
+        referenceSchema: contactSchema.typename,
+        title: 'Manager',
+      },
+    });
+    if (initialRow) {
+      // TODO(burdon): Last (first) row should not be in db and should be managed by the model.
+      space.db.add(create(contactSchema, {}));
+    }
+
+    return contactSchema;
+  }
 };

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/table.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { ref, ObjectId, S, TypedObject } from '@dxos/echo-schema';\nimport { ThreadType } from '@dxos/plugin-space';\nimport { ViewType } from '@dxos/schema';\n\nexport const TableSchema = S.Struct({\n  id: ObjectId, // TODO(burdon): Where should this be?\n  name: S.optional(S.String),\n  view: S.optional(ref(ViewType)),\n  // TODO(burdon): Should not import from plugin. Either factor out type or use reverse deps when supported.\n  threads: S.optional(S.Array(ref(ThreadType))),\n});\n\n// type TableType = S.Schema.Type<typeof TableSchema>;\n\nexport class TableType extends TypedObject({\n  typename: 'dxos.org/type/Table',\n  version: '0.1.0',\n})(TableSchema.fields) {}\n"],
-  "mappings": ";AAIA,SAASA,KAAKC,UAAUC,GAAGC,mBAAmB;AAC9C,SAASC,kBAAkB;AAC3B,SAASC,gBAAgB;AAElB,IAAMC,cAAcC,EAAEC,OAAO;EAClCC,IAAIC;EACJC,MAAMJ,EAAEK,SAASL,EAAEM,MAAM;EACzBC,MAAMP,EAAEK,SAASG,IAAIC,QAAAA,CAAAA;;EAErBC,SAASV,EAAEK,SAASL,EAAEW,MAAMH,IAAII,UAAAA,CAAAA,CAAAA;AAClC,CAAA;AAIO,IAAMC,YAAN,cAAwBC,YAAY;EACzCC,UAAU;EACVC,SAAS;AACX,CAAA,EAAGjB,YAAYkB,MAAM,EAAA;AAAG;",
-  "names": ["ref", "ObjectId", "S", "TypedObject", "ThreadType", "ViewType", "TableSchema", "S", "Struct", "id", "ObjectId", "name", "optional", "String", "view", "ref", "ViewType", "threads", "Array", "ThreadType", "TableType", "TypedObject", "typename", "version", "fields"]
-}

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/table.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { ref, ObjectId, S, TypedObject } from '@dxos/echo-schema';\nimport { ThreadType } from '@dxos/plugin-space';\nimport { ViewType } from '@dxos/schema';\n\nexport const TableSchema = S.Struct({\n  id: ObjectId, // TODO(burdon): Where should this be?\n  name: S.optional(S.String),\n  view: S.optional(ref(ViewType)),\n  // TODO(burdon): Should not import from plugin. Either factor out type or use reverse deps when supported.\n  threads: S.optional(S.Array(ref(ThreadType))),\n});\n\n// type TableType = S.Schema.Type<typeof TableSchema>;\n\nexport class TableType extends TypedObject({\n  typename: 'dxos.org/type/Table',\n  version: '0.1.0',\n})(TableSchema.fields) {}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAIA,yBAA8C;AAC9C,0BAA2B;AAC3B,oBAAyB;AAElB,IAAMA,cAAcC,qBAAEC,OAAO;EAClCC,IAAIC;EACJC,MAAMJ,qBAAEK,SAASL,qBAAEM,MAAM;EACzBC,MAAMP,qBAAEK,aAASG,wBAAIC,sBAAAA,CAAAA;;EAErBC,SAASV,qBAAEK,SAASL,qBAAEW,UAAMH,wBAAII,8BAAAA,CAAAA,CAAAA;AAClC,CAAA;AAIO,IAAMC,YAAN,kBAAwBC,gCAAY;EACzCC,UAAU;EACVC,SAAS;AACX,CAAA,EAAGjB,YAAYkB,MAAM,EAAA;AAAG;",
-  "names": ["TableSchema", "S", "Struct", "id", "ObjectId", "name", "optional", "String", "view", "ref", "ViewType", "threads", "Array", "ThreadType", "TableType", "TypedObject", "typename", "version", "fields"]
-}

package/dist/lib/node-esm/chunk-BMWGPXPL.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/table.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { ref, ObjectId, S, TypedObject } from '@dxos/echo-schema';\nimport { ThreadType } from '@dxos/plugin-space';\nimport { ViewType } from '@dxos/schema';\n\nexport const TableSchema = S.Struct({\n  id: ObjectId, // TODO(burdon): Where should this be?\n  name: S.optional(S.String),\n  view: S.optional(ref(ViewType)),\n  // TODO(burdon): Should not import from plugin. Either factor out type or use reverse deps when supported.\n  threads: S.optional(S.Array(ref(ThreadType))),\n});\n\n// type TableType = S.Schema.Type<typeof TableSchema>;\n\nexport class TableType extends TypedObject({\n  typename: 'dxos.org/type/Table',\n  version: '0.1.0',\n})(TableSchema.fields) {}\n"],
-  "mappings": ";;;AAIA,SAASA,KAAKC,UAAUC,GAAGC,mBAAmB;AAC9C,SAASC,kBAAkB;AAC3B,SAASC,gBAAgB;AAElB,IAAMC,cAAcC,EAAEC,OAAO;EAClCC,IAAIC;EACJC,MAAMJ,EAAEK,SAASL,EAAEM,MAAM;EACzBC,MAAMP,EAAEK,SAASG,IAAIC,QAAAA,CAAAA;;EAErBC,SAASV,EAAEK,SAASL,EAAEW,MAAMH,IAAII,UAAAA,CAAAA,CAAAA;AAClC,CAAA;AAIO,IAAMC,YAAN,cAAwBC,YAAY;EACzCC,UAAU;EACVC,SAAS;AACX,CAAA,EAAGjB,YAAYkB,MAAM,EAAA;AAAG;",
-  "names": ["ref", "ObjectId", "S", "TypedObject", "ThreadType", "ViewType", "TableSchema", "S", "Struct", "id", "ObjectId", "name", "optional", "String", "view", "ref", "ViewType", "threads", "Array", "ThreadType", "TableType", "TypedObject", "typename", "version", "fields"]
-}

package/dist/types/src/components/Toolbar/Toolbar.d.ts

@@ -1,21 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import { type ThemedClassName } from '@dxos/react-ui';
-export type ToolbarAction = {
-    type: 'add-row';
-} | {
-    type: 'comment';
-};
-export type ToolbarActionType = ToolbarAction['type'];
-export type ToolbarActionHandler = (action: ToolbarAction) => void;
-export type ToolbarProps = ThemedClassName<PropsWithChildren<{
-    onAction?: ToolbarActionHandler;
-}>>;
-declare const useToolbarContext: (consumerName: string) => ToolbarProps;
-export declare const Toolbar: {
-    Root: ({ classNames, children, onAction }: ToolbarProps) => React.JSX.Element;
-    Editing: () => React.JSX.Element;
-    Actions: () => React.JSX.Element;
-    Separator: () => React.JSX.Element;
-};
-export { useToolbarContext };
-//# sourceMappingURL=Toolbar.d.ts.map

package/dist/types/src/components/Toolbar/Toolbar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAA6B,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAUjG,MAAM,MAAM,aAAa,GAAG;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAEtE,MAAM,MAAM,iBAAiB,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;AAEtD,MAAM,MAAM,oBAAoB,GAAG,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;AAEnE,MAAM,MAAM,YAAY,GAAG,eAAe,CACxC,iBAAiB,CAAC;IAChB,QAAQ,CAAC,EAAE,oBAAoB,CAAC;CACjC,CAAC,CACH,CAAC;AAEF,QAAA,MAA+B,iBAAiB,wCAA0C,CAAC;AAkD3F,eAAO,MAAM,OAAO;+CAhDqC,YAAY;;;;CAqDpE,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/types/src/components/Toolbar/common.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { type IconProps, type ToolbarButtonProps as NaturalToolbarButtonProps, type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps } from '@dxos/react-ui';
-export declare const buttonStyles = "min-bs-0 p-2";
-export declare const tooltipProps: {
-    side: "top";
-    classNames: string;
-};
-export declare const ToolbarSeparator: () => React.JSX.Element;
-type ToolbarButtonProps = NaturalToolbarButtonProps & Pick<IconProps, 'icon'>;
-export declare const ToolbarButton: ({ icon, children, ...props }: ToolbarButtonProps) => React.JSX.Element;
-export type ToolbarToggleButtonProps = NaturalToolbarToggleGroupItemProps & Pick<IconProps, 'icon'>;
-export declare const ToolbarToggleButton: ({ icon, children, ...props }: ToolbarToggleButtonProps) => React.JSX.Element;
-export {};
-//# sourceMappingURL=common.d.ts.map

package/dist/types/src/components/Toolbar/common.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/common.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,KAAK,SAAS,EAGd,KAAK,kBAAkB,IAAI,yBAAyB,EACpD,KAAK,2BAA2B,IAAI,kCAAkC,EACvE,MAAM,gBAAgB,CAAC;AAIxB,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAC3C,eAAO,MAAM,YAAY;;;CAA+C,CAAC;AAEzE,eAAO,MAAM,gBAAgB,yBAAkD,CAAC;AAMhF,KAAK,kBAAkB,GAAG,yBAAyB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAE9E,eAAO,MAAM,aAAa,iCAAkC,kBAAkB,sBAiB7E,CAAC;AAMF,MAAM,MAAM,wBAAwB,GAAG,kCAAkC,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAEpG,eAAO,MAAM,mBAAmB,iCAAkC,wBAAwB,sBAiBzF,CAAC"}

package/dist/types/src/components/Toolbar/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Toolbar';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/Toolbar/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC"}

package/src/components/Toolbar/Toolbar.tsx

@@ -1,87 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren } from 'react';
-
-import { Toolbar as NaturalToolbar, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-
-import { ToolbarButton, ToolbarSeparator } from './common';
-import { translationKey } from '../../translations';
-
-//
-// Root
-//
-
-// TODO(Zan): This should become a union later.
-export type ToolbarAction = { type: 'add-row' } | { type: 'comment' };
-
-export type ToolbarActionType = ToolbarAction['type'];
-
-export type ToolbarActionHandler = (action: ToolbarAction) => void;
-
-export type ToolbarProps = ThemedClassName<
-  PropsWithChildren<{
-    onAction?: ToolbarActionHandler;
-  }>
->;
-
-const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
-
-const ToolbarRoot = ({ classNames, children, onAction }: ToolbarProps) => {
-  return (
-    <ToolbarContextProvider onAction={onAction}>
-      <NaturalToolbar.Root
-        classNames={['is-full shrink-0 overflow-x-auto overflow-y-hidden p-1 attention-surface', classNames]}
-      >
-        {children}
-      </NaturalToolbar.Root>
-    </ToolbarContextProvider>
-  );
-};
-
-const Editing = () => {
-  const { onAction } = useToolbarContext('Editing');
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <>
-      <ToolbarButton
-        value='add-row'
-        icon='ph--plus--regular'
-        data-testid='table.toolbar.add-row'
-        onClick={() => onAction?.({ type: 'add-row' })}
-      >
-        {t('add row')}
-      </ToolbarButton>
-    </>
-  );
-};
-
-const Actions = () => {
-  const { onAction } = useToolbarContext('Actions');
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <>
-      <ToolbarButton
-        value='comment'
-        icon='ph--chat-text--regular'
-        data-testid='table.toolbar.comment'
-        onClick={() => onAction?.({ type: 'comment' })}
-      >
-        {t('create comment')}
-      </ToolbarButton>
-    </>
-  );
-};
-
-export const Toolbar = {
-  Root: ToolbarRoot,
-  Editing,
-  Actions,
-  Separator: ToolbarSeparator,
-};
-
-export { useToolbarContext };