@dxos/react-ui-table 0.9.1-main.c7dcc2e112 → 0.10.0

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-5V5FV3GS.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,