@dxos/react-ui-table 0.8.3 → 0.8.4-main.1f223c7

package/src/util/table-buttons.ts

@@ -2,13 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-export type TableButton = 'columnSettings' | 'rowMenu' | 'newColumn' | 'referencedCell' | 'sort';
+export type TableButton = 'columnSettings' | 'rowMenu' | 'newColumn' | 'referencedCell' | 'sort' | 'saveDraftRow';
 
 export const BUTTON_IDENTIFIERS: { [K in TableButton]: string } = {
   columnSettings: 'data-table-column-settings-button',
   newColumn: 'data-table-new-column-button',
   referencedCell: 'data-table-ref-cell-button',
   rowMenu: 'data-table-row-menu-button',
+  saveDraftRow: 'data-table-save-draft-row-button',
   sort: 'data-table-sort-button',
 } as const;
 
@@ -16,6 +17,7 @@ type ButtonData =
   | { type: 'columnSettings'; fieldId: string }
   | { type: 'newColumn'; disabled?: boolean }
   | { type: 'rowMenu'; rowIndex: number }
+  | { type: 'saveDraftRow'; rowIndex: number; disabled?: boolean }
   | { type: 'sort'; fieldId: string; direction?: 'asc' | 'desc' };
 
 const createButton = ({
@@ -24,7 +26,7 @@ const createButton = ({
   disabled = false,
   icon,
   testId,
-  type = 'primary',
+  type: _type = 'primary',
 }: {
   attr: string;
   data: Record<string, string>;
@@ -37,8 +39,7 @@ const createButton = ({
     .map(([k, v]) => `${k}="${v}"`)
     .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 data-size="4"><use href="/icons.svg#${icon}"/></svg></button>`;
+  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 aspect-square pli-0.5 min-bs-0" ${dataAttrs} ${disabled ? 'disabled' : ''} data-dx-grid-action="accessory"><svg data-size="4"><use href="/icons.svg#${icon}"/></svg></button>`;
 };
 
 const addColumnButton = {
@@ -65,6 +66,7 @@ const columnSettingsButton = {
       icon: columnSettingsButton.icon,
       data: {
         'data-field-id': fieldId,
+        'data-variant': 'ghost',
       },
       testId: 'table-column-settings-button',
     });
@@ -118,9 +120,31 @@ const sortButton = {
   }),
 } as const;
 
+const saveDraftRowButton = {
+  attr: BUTTON_IDENTIFIERS.saveDraftRow,
+  icon: 'ph--floppy-disk--regular',
+  render: ({ rowIndex, disabled }: Omit<Extract<ButtonData, { type: 'saveDraftRow' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.saveDraftRow,
+      icon: saveDraftRowButton.icon,
+      disabled,
+      data: {
+        'data-row-index': rowIndex.toString(),
+        'data-variant': 'primary',
+      },
+      testId: 'table-save-draft-row-button',
+    });
+  },
+  getData: (el: HTMLElement): Extract<ButtonData, { type: 'saveDraftRow' }> => ({
+    type: 'saveDraftRow',
+    rowIndex: Number(el.getAttribute('data-row-index')!),
+  }),
+} as const;
+
 export const tableButtons = {
   addColumn: addColumnButton,
   columnSettings: columnSettingsButton,
   rowMenu: rowMenuButton,
+  saveDraftRow: saveDraftRowButton,
   sort: sortButton,
 } as const;

package/src/util/table-controls.ts

@@ -3,6 +3,8 @@
 //
 
 // Core types.
+import { accessoryHandlesPointerdownAttrs } from '@dxos/lit-grid';
+
 export type TableControl = 'checkbox' | 'switch';
 
 export type ControlData =
@@ -41,7 +43,7 @@ const renderInput = (
   preventToggle = false,
   testId: string,
 ) => {
-  return `<input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? 'checked' : ''} ${preventToggle ? 'onclick="return false"' : ''} ${disabled ? 'disabled' : ''} data-testid="${testId}"/>`;
+  return `<input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? 'checked' : ''} ${preventToggle ? 'onclick="return false"' : ''} ${disabled ? 'disabled' : ''} data-testid="${testId}" data-dx-grid-action="accessory"/>`;
 };
 
 export const CheckboxStory = ({
@@ -64,6 +66,7 @@ export const SwitchStory = ({ colIndex, rowIndex, checked = false, disabled = fa
     [CONTROL_IDENTIFIERS.switch]: '',
     'data-row-index': rowIndex.toString(),
     'data-col-index': colIndex.toString(),
+    ...accessoryHandlesPointerdownAttrs,
   };
 
   return renderInput(BASE_CLASSES.switch, attrs, checked, disabled, true, 'table-switch');

package/dist/lib/browser/chunk-TL7CKQQV.mjs

@@ -1,27 +0,0 @@
-// packages/ui/react-ui-table/src/types/table.ts
-import { Schema } from "effect";
-import { Type } from "@dxos/echo";
-import { ObjectId, Ref, Expando, LabelAnnotation } from "@dxos/echo-schema";
-import { ViewType } from "@dxos/schema";
-var TableSchema = Schema.Struct({
-  id: ObjectId,
-  name: Schema.optional(Schema.String),
-  view: Schema.optional(Ref(ViewType)),
-  // TODO(burdon): Document why threads is included here?
-  threads: Schema.optional(Schema.Array(Ref(
-    Expando
-    /* ThreadType */
-  )))
-}).pipe(LabelAnnotation.set([
-  "name"
-]));
-var TableType = TableSchema.pipe(Type.Obj({
-  typename: "dxos.org/type/Table",
-  version: "0.1.0"
-}));
-
-export {
-  TableSchema,
-  TableType
-};
-//# sourceMappingURL=chunk-TL7CKQQV.mjs.map

package/dist/lib/browser/chunk-TL7CKQQV.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 { Type } from '@dxos/echo';\nimport { ObjectId, Ref, Expando, LabelAnnotation } 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}).pipe(LabelAnnotation.set(['name']));\n\n// TODO(burdon): Move out of react-ui-xxx.\nexport const TableType = TableSchema.pipe(\n  Type.Obj({\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,YAAY;AACrB,SAASC,UAAUC,KAAKC,SAASC,uBAAuB;AACxD,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,KAAKC,gBAAgBC,IAAI;EAAC;CAAO,CAAA;AAG7B,IAAMC,YAAYjB,YAAYc,KACnCI,KAAKC,IAAI;EACPC,UAAU;EACVC,SAAS;AACX,CAAA,CAAA;",
-  "names": ["Schema", "Type", "ObjectId", "Ref", "Expando", "LabelAnnotation", "ViewType", "TableSchema", "Schema", "Struct", "id", "ObjectId", "name", "optional", "String", "view", "Ref", "ViewType", "threads", "Array", "Expando", "pipe", "LabelAnnotation", "set", "TableType", "Type", "Obj", "typename", "version"]
-}

package/dist/lib/node/chunk-O2VPBNS5.cjs

@@ -1,50 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var chunk_O2VPBNS5_exports = {};
-__export(chunk_O2VPBNS5_exports, {
-  TableSchema: () => TableSchema,
-  TableType: () => TableType
-});
-module.exports = __toCommonJS(chunk_O2VPBNS5_exports);
-var import_effect = require("effect");
-var import_echo = require("@dxos/echo");
-var import_echo_schema = require("@dxos/echo-schema");
-var import_schema = require("@dxos/schema");
-var TableSchema = import_effect.Schema.Struct({
-  id: import_echo_schema.ObjectId,
-  name: import_effect.Schema.optional(import_effect.Schema.String),
-  view: import_effect.Schema.optional((0, import_echo_schema.Ref)(import_schema.ViewType)),
-  // TODO(burdon): Document why threads is included here?
-  threads: import_effect.Schema.optional(import_effect.Schema.Array((0, import_echo_schema.Ref)(
-    import_echo_schema.Expando
-    /* ThreadType */
-  )))
-}).pipe(import_echo_schema.LabelAnnotation.set([
-  "name"
-]));
-var TableType = TableSchema.pipe(import_echo.Type.Obj({
-  typename: "dxos.org/type/Table",
-  version: "0.1.0"
-}));
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  TableSchema,
-  TableType
-});
-//# sourceMappingURL=chunk-O2VPBNS5.cjs.map

package/dist/lib/node/chunk-O2VPBNS5.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 { Type } from '@dxos/echo';\nimport { ObjectId, Ref, Expando, LabelAnnotation } 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}).pipe(LabelAnnotation.set(['name']));\n\n// TODO(burdon): Move out of react-ui-xxx.\nexport const TableType = TableSchema.pipe(\n  Type.Obj({\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,kBAAqB;AACrB,yBAAwD;AACxD,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,KAAKC,mCAAgBC,IAAI;EAAC;CAAO,CAAA;AAG7B,IAAMC,YAAYjB,YAAYc,KACnCI,iBAAKC,IAAI;EACPC,UAAU;EACVC,SAAS;AACX,CAAA,CAAA;",
-  "names": ["TableSchema", "Schema", "Struct", "id", "ObjectId", "name", "optional", "String", "view", "Ref", "ViewType", "threads", "Array", "Expando", "pipe", "LabelAnnotation", "set", "TableType", "Type", "Obj", "typename", "version"]
-}