@multiplatform.one/table 7.10.0 → 7.11.0

package/dist/cjs/components/DataTableToolbar/index.cjs

@@ -22,6 +22,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var DataTableToolbar_exports = {};
 __export(DataTableToolbar_exports, {
+  DataTableCardToolbar: () => DataTableCardToolbar,
   DataTableToolbar: () => DataTableToolbar
 });
 module.exports = __toCommonJS(DataTableToolbar_exports);
@@ -39,6 +40,20 @@ var import_DataTableExport = require("../DataTableExport/index.cjs");
 var import_DataTableFilterButton = require("../DataTableFilterButton/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function DataTableToolbar(props) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToolbarLayout, {
+    ...props
+  });
+}
+function DataTableCardToolbar(props) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToolbarLayout, {
+    ...props,
+    cardLayout: true
+  });
+}
+function ToolbarLayout({
+  cardLayout = false,
+  ...props
+}) {
   const ctx = (0, import_DataTableStateContext.useDataTableState)();
   const globalFilter = props.globalFilter ?? ctx?.state.globalFilter ?? "";
   const onGlobalFilterChange = props.onGlobalFilterChange ?? ctx?.actions.setGlobalFilter ?? (() => {});
@@ -86,8 +101,123 @@ function DataTableToolbar(props) {
   const showSave = enableViews && showViewSelector;
   const showActionCluster = Boolean(customActions || showFilterButton || showViewPicker || showSave || enableExport);
   const hasTrailing = showActionCluster || isFetching;
+  const viewPickerContent = showViewPicker && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu, {
+    closeOnSelect: true,
+    placement: "bottom-end",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
+      asChild: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
+        focusable: true,
+        asChild: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          chromeless: true,
+          size: controlSize,
+          iconAfter: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
+            size: iconPx
+          }),
+          "aria-label": (0, import_t.t)("Saved views"),
+          ...(cardLayout ? {
+            minWidth: 0,
+            maxWidth: "100%"
+          } : {}),
+          "aria-haspopup": "menu",
+          children: activeView?.name ?? (0, import_t.t)("Views")
+        })
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Content, {
+      children: views.map(view => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.CheckboxItem, {
+        checked: view.id === activeViewId,
+        closeOnSelect: true,
+        onSelect: () => onLoadView(view.id),
+        children: view.name
+      }, view.id))
+    })]
+  });
+  const viewPicker = cardLayout && showViewPicker ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+    minWidth: 0,
+    maxWidth: "100%",
+    flexBasis: "auto",
+    flexGrow: 0,
+    flexShrink: 1,
+    children: viewPickerContent
+  }) : viewPickerContent;
+  const saveView = showSave && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+    open: showSaveViewDialog,
+    onOpenChange: setShowSaveViewDialog,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+      asChild: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
+        focusable: true,
+        asChild: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          chromeless: true,
+          size: controlSize,
+          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FloppyDiskIcon, {
+            size: iconPx
+          }),
+          "aria-label": (0, import_t.t)("Save view")
+        })
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
+      ...knobProps.elevatedSurface,
+      ...knobProps.borderRadius,
+      borderColor: "$color6",
+      transition: knobProps.transition,
+      enterStyle: {
+        x: 0,
+        y: -10,
+        opacity: 0
+      },
+      exitStyle: {
+        x: 0,
+        y: -10,
+        opacity: 0
+      },
+      "data-dismiss-class": "compose",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        ...knobProps.gap,
+        ...knobProps.panelPadding,
+        minWidth: 240,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+          placeholder: (0, import_t.t)("View name"),
+          value: newViewName,
+          onChangeText: setNewViewName,
+          size: searchSize,
+          ...(compact === void 0 ? {} : {
+            compact
+          }),
+          inputProps: {
+            "aria-label": (0, import_t.t)("View name"),
+            onKeyDown: e => {
+              if (e.key === "Enter") handleSaveView();
+            }
+          }
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          ...knobProps.gap,
+          justifyContent: "flex-end",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            size: controlSize,
+            onPress: () => setShowSaveViewDialog(false),
+            children: (0, import_t.t)("Cancel")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            size: controlSize,
+            onPress: handleSaveView,
+            disabled: !newViewName.trim(),
+            disabledReason: (0, import_t.t)("Enter a view name"),
+            children: (0, import_t.t)("Save")
+          })]
+        })]
+      })
+    })]
+  });
+  const showSecondary = showViewPicker || showSave || enableExport || isFetching;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-    alignItems: "center",
+    alignItems: cardLayout ? "stretch" : "center",
+    flexDirection: cardLayout ? "column" : "row",
+    ...(cardLayout ? {
+      width: "100%",
+      minWidth: 0
+    } : {}),
     paddingVertical: knobProps.panelPadding.padding,
     paddingHorizontal: 0,
     ...knobProps.gap,
@@ -99,9 +229,9 @@ function DataTableToolbar(props) {
     "aria-label": (0, import_t.t)("Table toolbar"),
     "aria-busy": isFetching || void 0,
     children: [enableGlobalSearch && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-      flex: 1,
-      minWidth: 160,
-      maxWidth: searchMaxWidth,
+      flex: cardLayout ? void 0 : 1,
+      minWidth: cardLayout ? 0 : 160,
+      maxWidth: cardLayout ? void 0 : searchMaxWidth,
       flexShrink: 1,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.SearchInput, {
         value: globalFilter,
@@ -114,7 +244,49 @@ function DataTableToolbar(props) {
         }),
         size: searchSize
       })
-    }), hasTrailing && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    }), cardLayout ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [(showFilterButton || customActions) && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {
+        orientation: "horizontal",
+        loop: true,
+        asChild: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          "data-table-card-primary": "",
+          width: "100%",
+          minWidth: 0,
+          alignItems: "center",
+          flexWrap: "nowrap",
+          ...knobProps.gap,
+          children: [showFilterButton && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            flexShrink: 0,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableFilterButton.DataTableCardFilterButton, {})
+          }), customActions]
+        })
+      }), showSecondary && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {
+        orientation: "horizontal",
+        loop: true,
+        asChild: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          "data-table-card-secondary": "",
+          width: "100%",
+          minWidth: 0,
+          flexWrap: "wrap",
+          alignItems: "center",
+          ...knobProps.gap,
+          children: [enableExport && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            maxWidth: "100%",
+            minWidth: 0,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableExport.DataTableExport, {})
+          }), viewPicker, saveView, isFetching && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            alignItems: "center",
+            "aria-live": "polite",
+            "data-table-fetching": "true",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Spinner, {
+              size: "small"
+            })
+          })]
+        })
+      })]
+    }) : hasTrailing && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
       alignItems: "center",
       ...knobProps.gap,
       flexShrink: 0,
@@ -126,102 +298,7 @@ function DataTableToolbar(props) {
         children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
           alignItems: "center",
           ...knobProps.gap,
-          children: [showFilterButton && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableFilterButton.DataTableFilterButton, {}), enableExport && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableExport.DataTableExport, {}), customActions, showViewPicker && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu, {
-            closeOnSelect: true,
-            placement: "bottom-end",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
-              asChild: true,
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
-                focusable: true,
-                asChild: true,
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                  chromeless: true,
-                  size: controlSize,
-                  iconAfter: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
-                    size: iconPx
-                  }),
-                  "aria-label": (0, import_t.t)("Saved views"),
-                  "aria-haspopup": "menu",
-                  children: activeView?.name ?? (0, import_t.t)("Views")
-                })
-              })
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Content, {
-              children: views.map(view => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.CheckboxItem, {
-                checked: view.id === activeViewId,
-                closeOnSelect: true,
-                onSelect: () => onLoadView(view.id),
-                children: view.name
-              }, view.id))
-            })]
-          }), showSave && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
-            open: showSaveViewDialog,
-            onOpenChange: setShowSaveViewDialog,
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
-              asChild: true,
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
-                focusable: true,
-                asChild: true,
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                  chromeless: true,
-                  size: controlSize,
-                  icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FloppyDiskIcon, {
-                    size: iconPx
-                  }),
-                  "aria-label": (0, import_t.t)("Save view")
-                })
-              })
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
-              ...knobProps.elevatedSurface,
-              ...knobProps.borderRadius,
-              borderColor: "$color6",
-              transition: knobProps.transition,
-              enterStyle: {
-                x: 0,
-                y: -10,
-                opacity: 0
-              },
-              exitStyle: {
-                x: 0,
-                y: -10,
-                opacity: 0
-              },
-              "data-dismiss-class": "compose",
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-                ...knobProps.gap,
-                ...knobProps.panelPadding,
-                minWidth: 240,
-                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-                  placeholder: (0, import_t.t)("View name"),
-                  value: newViewName,
-                  onChangeText: setNewViewName,
-                  size: searchSize,
-                  ...(compact === void 0 ? {} : {
-                    compact
-                  }),
-                  inputProps: {
-                    "aria-label": (0, import_t.t)("View name"),
-                    onKeyDown: e => {
-                      if (e.key === "Enter") handleSaveView();
-                    }
-                  }
-                }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-                  ...knobProps.gap,
-                  justifyContent: "flex-end",
-                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                    size: controlSize,
-                    onPress: () => setShowSaveViewDialog(false),
-                    children: (0, import_t.t)("Cancel")
-                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                    size: controlSize,
-                    onPress: handleSaveView,
-                    disabled: !newViewName.trim(),
-                    disabledReason: (0, import_t.t)("Enter a view name"),
-                    children: (0, import_t.t)("Save")
-                  })]
-                })]
-              })
-            })]
-          })]
+          children: [showFilterButton && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableFilterButton.DataTableFilterButton, {}), enableExport && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableExport.DataTableExport, {}), customActions, viewPicker, saveView]
         })
       }), isFetching && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
         alignItems: "center",

package/dist/cjs/components/DataTableToolbar/index.native.js

@@ -24,6 +24,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var DataTableToolbar_exports = {};
 __export(DataTableToolbar_exports, {
+  DataTableCardToolbar: () => DataTableCardToolbar,
   DataTableToolbar: () => DataTableToolbar
 });
 module.exports = __toCommonJS(DataTableToolbar_exports);
@@ -41,6 +42,21 @@ var import_DataTableStateContext = require("../DataTable/DataTableStateContext.n
 var import_DataTableExport = require("../DataTableExport/index.native.js");
 var import_DataTableFilterButton = require("../DataTableFilterButton/index.native.js");
 function DataTableToolbar(props) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToolbarLayout, {
+    ...props
+  });
+}
+function DataTableCardToolbar(props) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToolbarLayout, {
+    ...props,
+    cardLayout: true
+  });
+}
+function ToolbarLayout(param) {
+  var {
+    cardLayout = false,
+    ...props
+  } = param;
   var _ref, _props_globalFilter, _ref1, _props_onGlobalFilterChange, _ref2, _props_onClearFilters, _ref3, _props_onSaveView, _ref4, _props_onLoadView, _ref5, _props_views, _props_activeViewId, _ref6, _ref7, _ref8;
   var _ctx_computed_filterFields, _ctx_computed;
   var ctx = (0, import_DataTableStateContext.useDataTableState)();
@@ -92,8 +108,131 @@ function DataTableToolbar(props) {
   var showSave = enableViews && showViewSelector;
   var showActionCluster = Boolean(customActions || showFilterButton || showViewPicker || showSave || enableExport);
   var hasTrailing = showActionCluster || isFetching;
+  var viewPickerContent = showViewPicker && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu, {
+    closeOnSelect: true,
+    placement: "bottom-end",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
+      asChild: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
+        focusable: true,
+        asChild: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          chromeless: true,
+          size: controlSize,
+          iconAfter: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
+            size: iconPx
+          }),
+          "aria-label": (0, import_t.t)("Saved views"),
+          ...(cardLayout ? {
+            minWidth: 0,
+            maxWidth: "100%"
+          } : {}),
+          "aria-haspopup": "menu",
+          children: (_ref8 = activeView === null || activeView === void 0 ? void 0 : activeView.name) !== null && _ref8 !== void 0 ? _ref8 : (0, import_t.t)("Views")
+        })
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Content, {
+      children: views.map(function (view) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.CheckboxItem, {
+          checked: view.id === activeViewId,
+          closeOnSelect: true,
+          onSelect: function onSelect() {
+            return onLoadView(view.id);
+          },
+          children: view.name
+        }, view.id);
+      })
+    })]
+  });
+  var viewPicker = cardLayout && showViewPicker ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+    minWidth: 0,
+    maxWidth: "100%",
+    flexBasis: "auto",
+    flexGrow: 0,
+    flexShrink: 1,
+    children: viewPickerContent
+  }) : viewPickerContent;
+  var saveView = showSave && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+    open: showSaveViewDialog,
+    onOpenChange: setShowSaveViewDialog,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+      asChild: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
+        focusable: true,
+        asChild: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          chromeless: true,
+          size: controlSize,
+          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FloppyDiskIcon, {
+            size: iconPx
+          }),
+          "aria-label": (0, import_t.t)("Save view")
+        })
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
+      ...knobProps.elevatedSurface,
+      ...knobProps.borderRadius,
+      borderColor: "$color6",
+      // LC-24: enter/exitStyle need a `transition` driver on the
+      // same element ({...string} spread set nothing).
+      transition: knobProps.transition,
+      enterStyle: {
+        x: 0,
+        y: -10,
+        opacity: 0
+      },
+      exitStyle: {
+        x: 0,
+        y: -10,
+        opacity: 0
+      },
+      "data-dismiss-class": "compose",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        ...knobProps.gap,
+        ...knobProps.panelPadding,
+        minWidth: 240,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+          placeholder: (0, import_t.t)("View name"),
+          value: newViewName,
+          onChangeText: setNewViewName,
+          size: searchSize,
+          ...(compact === void 0 ? {} : {
+            compact
+          }),
+          inputProps: {
+            "aria-label": (0, import_t.t)("View name"),
+            onKeyDown: function onKeyDown(e) {
+              if (e.key === "Enter") handleSaveView();
+            }
+          }
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          ...knobProps.gap,
+          justifyContent: "flex-end",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            size: controlSize,
+            onPress: function onPress() {
+              return setShowSaveViewDialog(false);
+            },
+            children: (0, import_t.t)("Cancel")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            size: controlSize,
+            onPress: handleSaveView,
+            disabled: !newViewName.trim(),
+            disabledReason: (0, import_t.t)("Enter a view name"),
+            children: (0, import_t.t)("Save")
+          })]
+        })]
+      })
+    })]
+  });
+  var showSecondary = showViewPicker || showSave || enableExport || isFetching;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-    alignItems: "center",
+    alignItems: cardLayout ? "stretch" : "center",
+    flexDirection: cardLayout ? "column" : "row",
+    ...(cardLayout ? {
+      width: "100%",
+      minWidth: 0
+    } : {}),
     // LC-39: flush band — no painted panel, so no horizontal inset.
     paddingVertical: knobProps.panelPadding.padding,
     paddingHorizontal: 0,
@@ -106,9 +245,9 @@ function DataTableToolbar(props) {
     "aria-label": (0, import_t.t)("Table toolbar"),
     "aria-busy": isFetching || void 0,
     children: [enableGlobalSearch && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-      flex: 1,
-      minWidth: 160,
-      maxWidth: searchMaxWidth,
+      flex: cardLayout ? void 0 : 1,
+      minWidth: cardLayout ? 0 : 160,
+      maxWidth: cardLayout ? void 0 : searchMaxWidth,
       flexShrink: 1,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.SearchInput, {
         value: globalFilter,
@@ -128,7 +267,49 @@ function DataTableToolbar(props) {
         }),
         size: searchSize
       })
-    }), hasTrailing && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    }), cardLayout ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [(showFilterButton || customActions) && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {
+        orientation: "horizontal",
+        loop: true,
+        asChild: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          "data-table-card-primary": "",
+          width: "100%",
+          minWidth: 0,
+          alignItems: "center",
+          flexWrap: "nowrap",
+          ...knobProps.gap,
+          children: [showFilterButton && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            flexShrink: 0,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableFilterButton.DataTableCardFilterButton, {})
+          }), customActions]
+        })
+      }), showSecondary && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {
+        orientation: "horizontal",
+        loop: true,
+        asChild: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          "data-table-card-secondary": "",
+          width: "100%",
+          minWidth: 0,
+          flexWrap: "wrap",
+          alignItems: "center",
+          ...knobProps.gap,
+          children: [enableExport && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            maxWidth: "100%",
+            minWidth: 0,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableExport.DataTableExport, {})
+          }), viewPicker, saveView, isFetching && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            alignItems: "center",
+            "aria-live": "polite",
+            "data-table-fetching": "true",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Spinner, {
+              size: "small"
+            })
+          })]
+        })
+      })]
+    }) : hasTrailing && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
       alignItems: "center",
       ...knobProps.gap,
       flexShrink: 0,
@@ -140,110 +321,7 @@ function DataTableToolbar(props) {
         children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
           alignItems: "center",
           ...knobProps.gap,
-          children: [showFilterButton && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableFilterButton.DataTableFilterButton, {}), enableExport && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableExport.DataTableExport, {}), customActions, showViewPicker && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu, {
-            closeOnSelect: true,
-            placement: "bottom-end",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
-              asChild: true,
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
-                focusable: true,
-                asChild: true,
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                  chromeless: true,
-                  size: controlSize,
-                  iconAfter: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
-                    size: iconPx
-                  }),
-                  "aria-label": (0, import_t.t)("Saved views"),
-                  "aria-haspopup": "menu",
-                  children: (_ref8 = activeView === null || activeView === void 0 ? void 0 : activeView.name) !== null && _ref8 !== void 0 ? _ref8 : (0, import_t.t)("Views")
-                })
-              })
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Content, {
-              children: views.map(function (view) {
-                return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.CheckboxItem, {
-                  checked: view.id === activeViewId,
-                  closeOnSelect: true,
-                  onSelect: function onSelect() {
-                    return onLoadView(view.id);
-                  },
-                  children: view.name
-                }, view.id);
-              })
-            })]
-          }), showSave && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
-            open: showSaveViewDialog,
-            onOpenChange: setShowSaveViewDialog,
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
-              asChild: true,
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
-                focusable: true,
-                asChild: true,
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                  chromeless: true,
-                  size: controlSize,
-                  icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FloppyDiskIcon, {
-                    size: iconPx
-                  }),
-                  "aria-label": (0, import_t.t)("Save view")
-                })
-              })
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
-              ...knobProps.elevatedSurface,
-              ...knobProps.borderRadius,
-              borderColor: "$color6",
-              // LC-24: enter/exitStyle need a `transition` driver on the
-              // same element ({...string} spread set nothing).
-              transition: knobProps.transition,
-              enterStyle: {
-                x: 0,
-                y: -10,
-                opacity: 0
-              },
-              exitStyle: {
-                x: 0,
-                y: -10,
-                opacity: 0
-              },
-              "data-dismiss-class": "compose",
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-                ...knobProps.gap,
-                ...knobProps.panelPadding,
-                minWidth: 240,
-                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-                  placeholder: (0, import_t.t)("View name"),
-                  value: newViewName,
-                  onChangeText: setNewViewName,
-                  size: searchSize,
-                  ...(compact === void 0 ? {} : {
-                    compact
-                  }),
-                  inputProps: {
-                    "aria-label": (0, import_t.t)("View name"),
-                    onKeyDown: function onKeyDown(e) {
-                      if (e.key === "Enter") handleSaveView();
-                    }
-                  }
-                }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-                  ...knobProps.gap,
-                  justifyContent: "flex-end",
-                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                    size: controlSize,
-                    onPress: function onPress() {
-                      return setShowSaveViewDialog(false);
-                    },
-                    children: (0, import_t.t)("Cancel")
-                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                    size: controlSize,
-                    onPress: handleSaveView,
-                    disabled: !newViewName.trim(),
-                    disabledReason: (0, import_t.t)("Enter a view name"),
-                    children: (0, import_t.t)("Save")
-                  })]
-                })]
-              })
-            })]
-          })]
+          children: [showFilterButton && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableFilterButton.DataTableFilterButton, {}), enableExport && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableExport.DataTableExport, {}), customActions, viewPicker, saveView]
         })
       }), isFetching && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
         alignItems: "center",