@dxos/react-ui-table 0.9.0 → 0.9.1-staging.ee54ba693a

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/types/Table.ts"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Match from 'effect/Match';\nimport * as Schema from 'effect/Schema';\nimport * as SchemaAST from 'effect/SchemaAST';\n\n// QueryAST is referenced indirectly through `Type.InstanceType<typeof TableSchema>`\n// (Ref.Ref(View.View) → View.View → QueryAST.Query) in the emitted .d.ts; the\n// namespace import keeps the inferred types portable.\n// eslint-disable-next-line unused-imports/no-unused-imports\nimport { Annotation, DXN, JsonSchema, Obj, QueryAST, Ref, Type, View } from '@dxos/echo';\nimport { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/Annotation';\nimport { type JsonSchema as JsonSchemaType } from '@dxos/echo/JsonSchema';\nimport { SchemaEx } from '@dxos/effect';\nimport { ViewAnnotation } from '@dxos/schema';\n\n// TODO(wittjosiah): Try to clean up this type inference.\nexport class Table extends Type.makeObject<Table>(DXN.make('org.dxos.type.table', '0.1.0'))(\n  Schema.Struct({\n    name: Schema.String.pipe(Schema.optional),\n\n    view: Ref.Ref(View.View).pipe(FormInputAnnotation.set(false)),\n\n    sizes: Schema.Record({\n      // TODO(wittjosiah): Should be JsonPath.\n      key: Schema.String,\n      value: Schema.Number,\n    }).pipe(Schema.mutable, FormInputAnnotation.set(false)),\n  }).pipe(\n    LabelAnnotation.set(['name']),\n    ViewAnnotation.set(['view']),\n    Annotation.IconAnnotation.set({ icon: 'ph--table--regular', hue: 'green' }),\n  ),\n) {}\n\ntype MakeProps = {\n  name?: string;\n  sizes?: Record<string, number>;\n  view: View.View;\n  /** Required to auto-size columns. */\n  jsonSchema?: JsonSchemaType;\n};\n\n/**\n * Make a table as a view of a data set.\n */\nexport const make = ({ name, sizes = {}, view, jsonSchema }: MakeProps): Table => {\n  const table = Obj.make(Table, { name, view: Ref.make(view), sizes } as Obj.MakeProps<typeof Table>);\n\n  // Preset sizes.\n  if (jsonSchema) {\n    const schema = JsonSchema.toEffectSchema(jsonSchema);\n    const properties = SchemaAST.getPropertySignatures(schema.ast);\n    for (const property of properties) {\n      const name = property.name.toString() as SchemaEx.JsonPath;\n      if (sizes?.[name]) {\n        table.sizes[name] = sizes[name];\n        continue;\n      }\n\n      Match.type<SchemaAST.AST>().pipe(\n        Match.when({ _tag: 'BooleanKeyword' }, () => {\n          table.sizes[name] = 100;\n        }),\n        Match.when({ _tag: 'NumberKeyword' }, () => {\n          table.sizes[name] = 100;\n        }),\n        Match.orElse(() => {\n          // Noop.\n        }),\n      )(property.type);\n    }\n  }\n\n  return table;\n};\n"],
+  "mappings": ";;;;;AAAA;;;;;AAIA,YAAYA,WAAW;AACvB,YAAYC,YAAY;AACxB,YAAYC,eAAe;AAM3B,SAASC,YAAYC,KAAKC,YAAYC,KAAeC,KAAKC,MAAMC,YAAY;AAC5E,SAASC,qBAAqBC,uBAAuB;AAGrD,SAASC,sBAAsB;AAGxB,IAAMC,QAAN,cAAoBL,KAAKM,WAAkBV,IAAIW,KAAK,uBAAuB,OAAA,CAAA,EACzEC,cAAO;EACZC,MAAaC,cAAOC,KAAYC,eAAQ;EAExCC,MAAMd,IAAIA,IAAIE,KAAKA,IAAI,EAAEU,KAAKT,oBAAoBY,IAAI,KAAA,CAAA;EAEtDC,OAAcC,cAAO;;IAEnBC,KAAYP;IACZQ,OAAcC;EAChB,CAAA,EAAGR,KAAYS,gBAASlB,oBAAoBY,IAAI,KAAA,CAAA;AAClD,CAAA,EAAGH,KACDR,gBAAgBW,IAAI;EAAC;CAAO,GAC5BV,eAAeU,IAAI;EAAC;CAAO,GAC3BnB,WAAW0B,eAAeP,IAAI;EAAEQ,MAAM;EAAsBC,KAAK;AAAQ,CAAA,CAAA,CAAA,EAAA;AAE1E;AAaI,IAAMhB,OAAO,CAAC,EAAEE,MAAMM,QAAQ,CAAC,GAAGF,MAAMW,WAAU,MAAa;AACpE,QAAMC,QAAQ3B,IAAIS,KAAKF,OAAO;IAAEI;IAAMI,MAAMd,IAAIQ,KAAKM,IAAAA;IAAOE;EAAM,CAAA;AAGlE,MAAIS,YAAY;AACd,UAAME,SAAS7B,WAAW8B,eAAeH,UAAAA;AACzC,UAAMI,aAAuBC,gCAAsBH,OAAOI,GAAG;AAC7D,eAAWC,YAAYH,YAAY;AACjC,YAAMnB,QAAOsB,SAAStB,KAAKuB,SAAQ;AACnC,UAAIjB,QAAQN,KAAAA,GAAO;AACjBgB,cAAMV,MAAMN,KAAAA,IAAQM,MAAMN,KAAAA;AAC1B;MACF;AAEAjB,MAAMyC,WAAI,EAAkBtB,KACpBuB,WAAK;QAAEC,MAAM;MAAiB,GAAG,MAAA;AACrCV,cAAMV,MAAMN,KAAAA,IAAQ;MACtB,CAAA,GACMyB,WAAK;QAAEC,MAAM;MAAgB,GAAG,MAAA;AACpCV,cAAMV,MAAMN,KAAAA,IAAQ;MACtB,CAAA,GACM2B,aAAO,MAAA;MAEb,CAAA,CAAA,EACAL,SAASE,IAAI;IACjB;EACF;AAEA,SAAOR;AACT;",
+  "names": ["Match", "Schema", "SchemaAST", "Annotation", "DXN", "JsonSchema", "Obj", "Ref", "Type", "View", "FormInputAnnotation", "LabelAnnotation", "ViewAnnotation", "Table", "makeObject", "make", "Struct", "name", "String", "pipe", "optional", "view", "set", "sizes", "Record", "key", "value", "Number", "mutable", "IconAnnotation", "icon", "hue", "jsonSchema", "table", "schema", "toEffectSchema", "properties", "getPropertySignatures", "ast", "property", "toString", "type", "when", "_tag", "orElse"]
+}

package/dist/lib/browser/index.mjs

@@ -2,6 +2,7 @@ import {
   BUTTON_IDENTIFIERS,
   CONTROL_IDENTIFIERS,
   CheckboxStory,
+  FieldSortSchema,
   SwitchStory,
   TableModel,
   TablePresentation,
@@ -13,13 +14,14 @@ import {
   getSortValue,
   tableButtons,
   tableControls,
+  tableSortAspect,
   useAddRow,
   useProjectionModel,
   useTableModel
-} from "./chunk-4KOQTPFC.mjs";
+} from "./chunk-K4J2CKTZ.mjs";
 import {
   Table_exports
-} from "./chunk-62PYOJPY.mjs";
+} from "./chunk-VV3P3ADH.mjs";
 import "./chunk-J5LGTIGS.mjs";
 
 // src/components/Table/Table.tsx
@@ -1135,10 +1137,11 @@ TableContent.displayName = TABLE_CONTENT_NAME;
 import { Atom as Atom3, RegistryContext as RegistryContext2 } from "@effect-atom/atom-react";
 import React8, { useContext as useContext2, useEffect as useEffect4, useMemo as useMemo5 } from "react";
 import { composable as composable2, composableProps as composableProps2 } from "@dxos/react-ui";
-import { Menu, createGapSeparator, createMenuAction, useMenuActions } from "@dxos/react-ui-menu";
+import { Menu, createGapSeparator, createMenuAction, createMenuItemGroup, useMenuActions } from "@dxos/react-ui-menu";
 import { translationKey as translationKey4 } from "#translations";
-var createTableToolbarActions = ({ stateAtom, onAdd, onSave, customActions }) => Atom3.make((get) => {
+var createTableToolbarActions = ({ stateAtom, onAdd, onSave, onExport, customActions }) => Atom3.make((get) => {
   const nodes = [];
+  const edges = [];
   if (onAdd) {
     const add = createMenuAction("add-row", onAdd, {
       type: "add-row",
@@ -1152,6 +1155,11 @@ var createTableToolbarActions = ({ stateAtom, onAdd, onSave, customActions }) =>
       testId: "table.toolbar.add-row"
     });
     nodes.push(add);
+    edges.push({
+      source: "root",
+      target: add.id,
+      relation: "child"
+    });
   }
   if (onSave) {
     const state = get(stateAtom);
@@ -1169,14 +1177,68 @@ var createTableToolbarActions = ({ stateAtom, onAdd, onSave, customActions }) =>
       hidden: !state.viewDirty
     });
     nodes.push(save);
+    edges.push({
+      source: "root",
+      target: save.id,
+      relation: "child"
+    });
+  }
+  if (onExport) {
+    const exportGroup = createMenuItemGroup("export-rows", {
+      label: [
+        "export-rows.menu",
+        {
+          ns: translationKey4
+        }
+      ],
+      icon: "ph--export--regular",
+      iconOnly: true,
+      variant: "dropdownMenu"
+    });
+    nodes.push(exportGroup);
+    edges.push({
+      source: "root",
+      target: exportGroup.id,
+      relation: "child"
+    });
+    const formats = [
+      {
+        format: "csv",
+        type: "export-csv",
+        label: "export-rows-csv.menu"
+      },
+      {
+        format: "json",
+        type: "export-json",
+        label: "export-rows-json.menu"
+      },
+      {
+        format: "xml",
+        type: "export-xml",
+        label: "export-rows-xml.menu"
+      }
+    ];
+    for (const { format, type, label } of formats) {
+      const action = createMenuAction(type, () => onExport(format), {
+        type,
+        label: [
+          label,
+          {
+            ns: translationKey4
+          }
+        ]
+      });
+      nodes.push(action);
+      edges.push({
+        source: exportGroup.id,
+        target: action.id,
+        relation: "child"
+      });
+    }
   }
   const gap = createGapSeparator();
   nodes.push(...gap.nodes);
-  const edges = nodes.map(({ id: target }) => ({
-    source: "root",
-    target,
-    relation: "child"
-  }));
+  edges.push(...gap.edges);
   if (customActions) {
     const custom = get(customActions);
     nodes.push(...custom.nodes);
@@ -1187,7 +1249,7 @@ var createTableToolbarActions = ({ stateAtom, onAdd, onSave, customActions }) =>
     edges
   };
 });
-var TableToolbar = composable2(({ attendableId, viewDirty, onAdd, onSave, customActions, ...props }, forwardedRef) => {
+var TableToolbar = composable2(({ attendableId, viewDirty, onAdd, onSave, onExport, customActions, ...props }, forwardedRef) => {
   const registry = useContext2(RegistryContext2);
   const stateAtom = useMemo5(() => Atom3.make({
     viewDirty
@@ -1205,11 +1267,13 @@ var TableToolbar = composable2(({ attendableId, viewDirty, onAdd, onSave, custom
     stateAtom,
     onAdd,
     onSave,
+    onExport,
     customActions
   }), [
     stateAtom,
     onAdd,
     onSave,
+    onExport,
     customActions
   ]);
   const menuActions = useMenuActions(actionsCreator);
@@ -1325,6 +1389,7 @@ export {
   CONTROL_IDENTIFIERS,
   CheckboxStory,
   DynamicTable,
+  FieldSortSchema,
   ModalController,
   SwitchStory,
   Table,
@@ -1341,6 +1406,7 @@ export {
   narrowSchema,
   tableButtons,
   tableControls,
+  tableSortAspect,
   touch,
   useAddRow,
   useProjectionModel,