@jielga/tmdatagrid 2.0.0-beta.2 → 2.0.0-beta.20

package/src/useTMDataGridExport.ts

@@ -0,0 +1,78 @@
+import { useSelector } from "@tanstack/react-store";
+import { useTMDataGridContext } from "./TMDataGridContext";
+import {
+  buildExportData,
+  countSelectedExportRows,
+  resolveExportOptions,
+  writeExportFile,
+  type TMDataGridExportOptions,
+} from "./core/export";
+
+/** What {@link useTMDataGridExport} returns. */
+export type TMDataGridExportApi = {
+  /**
+   * Downloads every filtered and sorted row, all pages. `overrides` are folded
+   * over the hook's options for this one call - the column picker's chosen
+   * columns, for instance.
+   */
+  exportAll: (overrides?: TMDataGridExportOptions) => Promise<void>;
+  /**
+   * Downloads the selected rows of the current view, in grid order. Resolves
+   * without a download when none is selected.
+   */
+  exportSelected: (overrides?: TMDataGridExportOptions) => Promise<void>;
+  /** How many rows `exportSelected` would write. Subscribes to the selection. */
+  selectedCount: number;
+  /**
+   * Whether row selection is on at all - `false` under
+   * `selectionMode: "highlight"` or `enableRowSelection: false`, where a
+   * "selected rows" control has nothing to offer.
+   */
+  canExportSelected: boolean;
+};
+
+/**
+ * The export as click handlers, for a button of your own anywhere inside the
+ * grid. The `TMDataGrid.Menu.Export*` items are this hook behind a
+ * `Menu.Item`.
+ *
+ * ```tsx
+ * function ExportButton() {
+ *   const { exportAll } = useTMDataGridExport();
+ *   return <Button onClick={() => void exportAll()}>Export</Button>;
+ * }
+ * ```
+ *
+ * `overrides` are folded over the grid's `exportOptions` for this caller:
+ * another format, another file name, another set of columns.
+ */
+export function useTMDataGridExport(
+  overrides?: TMDataGridExportOptions,
+): TMDataGridExportApi {
+  const { table, features, exportOptions } = useTMDataGridContext();
+  const selectedCount = useSelector(table.store, () =>
+    countSelectedExportRows(table),
+  );
+
+  const run = async (
+    rows: "all" | "selected",
+    callOverrides?: TMDataGridExportOptions,
+  ) => {
+    const resolved = resolveExportOptions(
+      exportOptions,
+      overrides,
+      callOverrides,
+    );
+    const data = buildExportData({ table, rows, columns: resolved.columns });
+    if (data.columnIds.length === 0) return;
+    if (rows === "selected" && data.rows.length === 0) return;
+    await writeExportFile(data, resolved);
+  };
+
+  return {
+    exportAll: (callOverrides) => run("all", callOverrides),
+    exportSelected: (callOverrides) => run("selected", callOverrides),
+    selectedCount,
+    canExportSelected: features.rowSelection,
+  };
+}

package/src/tmdatagrid/components/TMDataGridEditActions.tsx

@@ -1,162 +0,0 @@
-import { Button, Group } from "@mantine/core";
-import { useSelector } from "@tanstack/react-store";
-import type { ReactNode } from "react";
-import { useTMDataGridContext } from "../TMDataGridContext";
-
-/**
- * How many rows are waiting to be saved: dirty edits, entry rows (an add is
- * pending whether or not it was touched), and deletion marks.
- */
-function usePendingCount(): number {
-  const { edit } = useTMDataGridContext();
-  return useSelector(
-    edit.store,
-    (state) =>
-      state.openRowIds.filter(
-        (rowId) =>
-          state.newRows.some((newRow) => newRow.tempId === rowId) ||
-          (state.rows[rowId]?.dirtyFields.length ?? 0) > 0,
-      ).length + state.deletedRowIds.length,
-  );
-}
-
-/*
- * Module scope, like the pagination controls and for the same reason: a
- * component defined inside the render body is a new type every render, so
- * React would remount the buttons underneath an interaction.
- */
-
-function EditSaveButton() {
-  const { edit, labels } = useTMDataGridContext();
-  const pendingCount = usePendingCount();
-  const isSubmitting = useSelector(edit.store, (state) =>
-    state.openRowIds.some((rowId) => state.rows[rowId]?.isSubmitting === true),
-  );
-
-  return (
-    <Button
-      size="compact-sm"
-      disabled={pendingCount === 0}
-      loading={isSubmitting}
-      data-dg-part="save-all"
-      onClick={() => void edit.submitAll()}
-    >
-      {labels.saveAllEdits(pendingCount)}
-    </Button>
-  );
-}
-
-function EditDiscardButton() {
-  const { edit, labels } = useTMDataGridContext();
-  const pendingCount = usePendingCount();
-
-  return (
-    <Button
-      variant="subtle"
-      color="gray"
-      size="compact-sm"
-      disabled={pendingCount === 0}
-      data-dg-part="discard-all"
-      onClick={() => edit.cancelAll()}
-    >
-      {labels.discardAllEdits}
-    </Button>
-  );
-}
-
-const EDIT_ACTIONS_CONTROLS: TMDataGridEditActionsControls = {
-  Save: EditSaveButton,
-  Discard: EditDiscardButton,
-};
-
-/** What the edit chrome is showing. */
-export type TMDataGridEditActionsState = {
-  /** Rows with unsaved work: dirty edits, entry rows, and deletion marks. */
-  pendingCount: number;
-  /** Whether a submit is in flight. */
-  isSubmitting: boolean;
-};
-
-/** What the edit chrome can do. */
-export type TMDataGridEditActionsActions = {
-  /** Commits every open row. Resolves `false` when a row stayed open. */
-  save: () => Promise<boolean>;
-  /** Drops every draft. */
-  discard: () => void;
-};
-
-/** The pre-bound pieces of the built-in edit chrome. */
-export type TMDataGridEditActionsControls = {
-  /** Save, with the pending count, disabled while nothing is pending. */
-  Save: () => ReactNode;
-  /** Discard, disabled while nothing is pending. */
-  Discard: () => ReactNode;
-};
-
-/** What {@link TMDataGridEditActionsProps.renderActions} is handed. */
-export type TMDataGridEditActionsSlotArgs = {
-  state: TMDataGridEditActionsState;
-  actions: TMDataGridEditActionsActions;
-  Controls: TMDataGridEditActionsControls;
-};
-
-export type TMDataGridEditActionsProps = {
-  /**
-   * Replaces the built-in Save/Discard pair, and is handed the pieces of it.
-   *
-   * ```tsx
-   * <TMDataGrid.EditActions
-   *   renderActions={({ state, Controls }) => (
-   *     <Group>
-   *       {state.pendingCount > 0 && <Badge>{state.pendingCount}</Badge>}
-   *       <Controls.Save />
-   *       <Controls.Discard />
-   *     </Group>
-   *   )}
-   * />
-   * ```
-   */
-  renderActions?: (args: TMDataGridEditActionsSlotArgs) => ReactNode;
-};
-
-/**
- * Draft mode's toolbar chrome: Save with the dirty-row count, and Discard.
- * Both read the edit store, so they grey out while nothing is dirty and the
- * Save spins while a submit is in flight. Works under any `editing.mode` - a
- * cellConfirm grid accumulating drafts can offer the same pair - and renders
- * nothing while editing is off.
- *
- * ```tsx
- * <TMDataGrid.Toolbar>
- *   <TMDataGrid.SummaryCount />
- *   <TMDataGrid.Spacer />
- *   <TMDataGrid.EditActions />
- * </TMDataGrid.Toolbar>
- * ```
- */
-export function TMDataGridEditActions({
-  renderActions,
-}: TMDataGridEditActionsProps = {}) {
-  const { edit, features } = useTMDataGridContext();
-  const pendingCount = usePendingCount();
-  const isSubmitting = useSelector(edit.store, (state) =>
-    state.openRowIds.some((rowId) => state.rows[rowId]?.isSubmitting === true),
-  );
-
-  if (!features.editing) return null;
-
-  if (renderActions) {
-    return renderActions({
-      state: { pendingCount, isSubmitting },
-      actions: { save: () => edit.submitAll(), discard: () => edit.cancelAll() },
-      Controls: EDIT_ACTIONS_CONTROLS,
-    });
-  }
-
-  return (
-    <Group gap="xs" wrap="nowrap">
-      <EditSaveButton />
-      <EditDiscardButton />
-    </Group>
-  );
-}

package/src/tmdatagrid/components/TMDataGridFilterPanel.module.css

@@ -1,35 +0,0 @@
-/* Floats over the first body rows, anchored to `.tableWrapper`. Sits just
-   below the header row, so its offset follows the size scale rather than a
-   fixed pixel count. */
-.filterPanel {
-  position: absolute;
-  top: calc(var(--dg-header-height) + 2px);
-  left: var(--mantine-spacing-md);
-  z-index: 5;
-  padding: var(--mantine-spacing-sm);
-  border-radius: var(--mantine-radius-md);
-  border: 1px solid var(--mantine-color-default-border);
-  background-color: var(--mantine-color-body);
-  box-shadow: var(--mantine-shadow-md);
-}
-
-.filterRow {
-  display: flex;
-  align-items: flex-end;
-  gap: var(--mantine-spacing-xs);
-}
-
-.filterPanelHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--mantine-spacing-md);
-  padding-bottom: var(--mantine-spacing-xs);
-}
-
-.filterPanelFooter {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--mantine-spacing-md);
-}

package/src/tmdatagrid/components/TMDataGridFilterPanel.tsx

@@ -1,354 +0,0 @@
-import {
-  ActionIcon,
-  Button,
-  Select,
-  Stack,
-  Text,
-  TextInput,
-} from "@mantine/core";
-import { useSelector } from "@tanstack/react-store";
-import { useEffect, useRef } from "react";
-import classes from "./TMDataGridFilterPanel.module.css";
-import { useTMDataGridContext } from "../TMDataGridContext";
-import { resolveColumnOptions } from "../core/columnOptions";
-import {
-  getColumnDefaultOperator,
-  getColumnFilterControl,
-  getColumnLabel,
-  getColumnType,
-} from "../core/columnUtils";
-import {
-  type TMDataGridFilterOperator,
-  type TMDataGridFilterValue,
-  emptyValueForOperator,
-  getDefaultOperator,
-  getOperatorsForType,
-  isTMDataGridFilterValue,
-  operatorNeedsValue,
-  operatorTakesArrayValue,
-  operatorTakesRangeValue,
-} from "../core/filterOperators";
-import { CloseIcon } from "./icons";
-import { TMDataGridFilterValueInput } from "./filters/TMDataGridFilterValueInput";
-
-const FALLBACK_FILTER: TMDataGridFilterValue = { operator: "contains", value: "" };
-
-function asFilterValue(value: unknown): TMDataGridFilterValue {
-  return isTMDataGridFilterValue(value) ? value : FALLBACK_FILTER;
-}
-
-/**
- * The three value shapes an operator can take. A typed value survives an
- * operator or column change only within its shape - a set is not a range,
- * even though both are arrays.
- */
-function valueShape(
-  operator: TMDataGridFilterOperator,
-): "scalar" | "set" | "range" {
-  if (operatorTakesArrayValue(operator)) return "set";
-  if (operatorTakesRangeValue(operator)) return "range";
-  return "scalar";
-}
-
-/**
- * The MUI-style filter surface: one row per active column filter, each row a
- * column / operator / value triple. It only ever reads and writes the table's
- * `columnFilters` state, so a `manualFiltering` grid gets the same panel for
- * free - the state is forwarded to the server instead of a row model.
- */
-export function TMDataGridFilterPanel() {
-  const { table, ui, labels, controlSize } = useTMDataGridContext();
-  const opened = useSelector(ui, (state) => state.filterPanelOpen);
-  const columnFilters = useSelector(
-    table.store,
-    (state) => state.columnFilters,
-  );
-  const panelRef = useRef<HTMLDivElement>(null);
-
-  // Clicking away hides the panel, the way any floating surface behaves. On
-  // pointerdown rather than click, so a press that starts outside dismisses it
-  // even when the pointer is released somewhere else.
-  useEffect(() => {
-    if (!opened) return;
-
-    const handlePointerDown = (event: PointerEvent) => {
-      const target = event.target;
-      if (!(target instanceof Element)) return;
-      if (panelRef.current?.contains(target)) return;
-      // The toolbar button toggles the panel itself. Closing from here first
-      // would leave its click reopening what the user meant to close.
-      if (target.closest('[data-dg-part="filter-button"]')) return;
-      ui.actions.closeFilterPanel();
-    };
-
-    document.addEventListener("pointerdown", handlePointerDown);
-    return () => document.removeEventListener("pointerdown", handlePointerDown);
-  }, [opened, ui]);
-
-  if (!opened) return null;
-
-  const filterableColumns = table
-    .getAllLeafColumns()
-    .filter((column) => column.getCanFilter());
-
-  const columnOptions = filterableColumns.map((column) => ({
-    value: column.id,
-    label: getColumnLabel(column),
-  }));
-
-  function removeFilter(columnId: string) {
-    const remaining = columnFilters.filter((filter) => filter.id !== columnId);
-    table.setColumnFilters(remaining);
-    if (remaining.length === 0) ui.actions.closeFilterPanel();
-  }
-
-  function changeFilterColumn(fromColumnId: string, toColumnId: string) {
-    const current = asFilterValue(
-      columnFilters.find((filter) => filter.id === fromColumnId)?.value,
-    );
-    const target = table.getColumn(toColumnId);
-    const operator = target
-      ? getColumnDefaultOperator(target)
-      : getDefaultOperator("string");
-    // The typed value only survives the move while it still fits the new
-    // operator - a text needle has no meaning to an `isAnyOf` set, or a set
-    // to a text input.
-    const value =
-      valueShape(operator) === valueShape(current.operator)
-        ? current.value
-        : emptyValueForOperator(operator);
-    table.setColumnFilters(
-      columnFilters
-        .filter((filter) => filter.id !== toColumnId)
-        .map((filter) =>
-          filter.id === fromColumnId
-            ? {
-                id: toColumnId,
-                value: { operator, value } satisfies TMDataGridFilterValue,
-              }
-            : filter,
-        ),
-    );
-    ui.actions.openFilterPanel(toColumnId);
-  }
-
-  function patchFilter(columnId: string, patch: Partial<TMDataGridFilterValue>) {
-    table.setColumnFilters(
-      columnFilters.map((filter) =>
-        filter.id === columnId
-          ? { ...filter, value: { ...asFilterValue(filter.value), ...patch } }
-          : filter,
-      ),
-    );
-  }
-
-  function changeOperator(columnId: string, operator: TMDataGridFilterOperator) {
-    const current = asFilterValue(
-      columnFilters.find((filter) => filter.id === columnId)?.value,
-    );
-    // Same arity rule as changing the column: keep the value across operators
-    // of the same shape, reset it across any shape boundary.
-    const value =
-      valueShape(operator) === valueShape(current.operator)
-        ? current.value
-        : emptyValueForOperator(operator);
-    patchFilter(columnId, { operator, value });
-  }
-
-  /** Clears every filter, including half-typed ones the pills never showed. */
-  function clearAllFilters() {
-    table.setColumnFilters([]);
-    // Same exit as removing the last filter row by hand: an empty panel has
-    // nothing to show but its own buttons.
-    ui.actions.closeFilterPanel();
-  }
-
-  function addFilter() {
-    const nextColumn = filterableColumns.find(
-      (column) => !columnFilters.some((filter) => filter.id === column.id),
-    );
-    if (!nextColumn) return;
-    const operator = getColumnDefaultOperator(nextColumn);
-    table.setColumnFilters([
-      ...columnFilters,
-      {
-        id: nextColumn.id,
-        value: {
-          operator,
-          value: emptyValueForOperator(operator),
-        } satisfies TMDataGridFilterValue,
-      },
-    ]);
-  }
-
-  const canAddFilter = filterableColumns.some(
-    (column) => !columnFilters.some((filter) => filter.id === column.id),
-  );
-
-  return (
-    <div
-      ref={panelRef}
-      role="group"
-      aria-label={labels.filters}
-      data-dg-part="filter-panel"
-      className={classes.filterPanel}
-      // Escape is what closes a floating surface, and every control that can
-      // hold focus in here sits inside this element.
-      onKeyDown={(event) => {
-        if (event.key !== "Escape") return;
-        event.stopPropagation();
-        ui.actions.closeFilterPanel();
-      }}
-    >
-      <div className={classes.filterPanelHeader}>
-        <Text span size={controlSize} fw={600}>
-          {labels.filters}
-        </Text>
-        <ActionIcon
-          variant="subtle"
-          color="gray"
-          size="sm"
-          aria-label={labels.closeFilters}
-          data-dg-part="filter-panel-close"
-          onClick={ui.actions.closeFilterPanel}
-        >
-          <CloseIcon size={16} stroke={1.6} />
-        </ActionIcon>
-      </div>
-
-      <Stack gap="xs">
-        {columnFilters.map((filter) => {
-          const column = table.getColumn(filter.id);
-          const value = asFilterValue(filter.value);
-          const type = column ? getColumnType(column) : "string";
-          const needsValue = operatorNeedsValue(value.operator);
-          const scalarValue = typeof value.value === "string" ? value.value : "";
-          // Pre-resolved only where options mean something out of the box -
-          // a declared set, or a select-shaped column's faceted values. A
-          // custom control wanting faceted values elsewhere resolves them
-          // itself; resolving here would build the faceted index for every
-          // filtered column.
-          const options =
-            column &&
-            (column.columnDef.meta?.options !== undefined ||
-              type === "select" ||
-              type === "multiSelect")
-              ? resolveColumnOptions({ table, column, fallback: "faceted" })
-              : [];
-          const ValueControl =
-            (column === undefined ? undefined : getColumnFilterControl(column)) ??
-            TMDataGridFilterValueInput;
-
-          return (
-            <div
-              key={filter.id}
-              // The row is the handle: a `meta.filter.control` renders whatever
-              // it likes in the value slot, so the one thing a test can always
-              // count on is which row it is in.
-              data-dg-part="filter-row"
-              data-column-id={filter.id}
-              className={classes.filterRow}
-            >
-              <ActionIcon
-                variant="subtle"
-                color="gray"
-                size="lg"
-                aria-label={labels.removeFilter}
-                data-dg-part="filter-remove"
-                onClick={() => removeFilter(filter.id)}
-              >
-                <CloseIcon size={18} stroke={1.6} />
-              </ActionIcon>
-
-              <Select
-                label={labels.filterColumn}
-                size={controlSize}
-                w={160}
-                allowDeselect={false}
-                // Both dropdowns render inside the panel: a portalled one is
-                // outside it in the DOM, and picking an option would read as a
-                // click away and close the panel under the user.
-                comboboxProps={{ withinPortal: false }}
-                data-dg-part="filter-column"
-                data={columnOptions}
-                value={filter.id}
-                onChange={(next) => next && changeFilterColumn(filter.id, next)}
-              />
-
-              <Select
-                label={labels.filterOperator}
-                size={controlSize}
-                w={170}
-                allowDeselect={false}
-                comboboxProps={{ withinPortal: false }}
-                data-dg-part="filter-operator"
-                data={getOperatorsForType(type).map((operator) => ({
-                  value: operator,
-                  label: labels.operators[operator],
-                }))}
-                value={value.operator}
-                onChange={(next) =>
-                  next &&
-                  changeOperator(filter.id, next as TMDataGridFilterOperator)
-                }
-              />
-
-              {column ? (
-                // The value slot: `meta.filter.control` if the column declares
-                // one, the built-in shape-by-operator input otherwise - both
-                // through the same value-only contract.
-                <ValueControl
-                  column={column}
-                  table={table}
-                  operator={value.operator}
-                  value={value.value}
-                  onChange={(next) => patchFilter(filter.id, { value: next })}
-                  options={options}
-                  size={controlSize}
-                  labels={labels}
-                />
-              ) : (
-                // The column is gone from the definition; the row survives
-                // only to be re-pointed or removed.
-                <TextInput
-                  label={labels.filterValue}
-                  size={controlSize}
-                  w={180}
-                  data-dg-part="filter-value"
-                  disabled={!needsValue}
-                  placeholder={needsValue ? labels.filterValuePlaceholder : ""}
-                  value={needsValue ? scalarValue : ""}
-                  onChange={(event) =>
-                    patchFilter(filter.id, { value: event.currentTarget.value })
-                  }
-                />
-              )}
-            </div>
-          );
-        })}
-
-        <div className={classes.filterPanelFooter}>
-          <Button
-            variant="subtle"
-            size="compact-sm"
-            disabled={!canAddFilter}
-            data-dg-part="filter-add"
-            onClick={addFilter}
-          >
-            {labels.addFilter}
-          </Button>
-          <Button
-            variant="subtle"
-            color="gray"
-            size="compact-sm"
-            disabled={columnFilters.length === 0}
-            data-dg-part="filter-clear-all"
-            onClick={clearAllFilters}
-          >
-            {labels.clearAllFilters}
-          </Button>
-        </div>
-      </Stack>
-    </div>
-  );
-}

package/src/tmdatagrid/components/TMDataGridToolbar.module.css

@@ -1,12 +0,0 @@
-.toolbar {
-  display: flex;
-  align-items: center;
-  gap: var(--mantine-spacing-xs);
-  padding: 6px var(--mantine-spacing-xs);
-  min-height: 42px;
-  flex-shrink: 0;
-}
-
-.toolbarSpacer {
-  flex: 1;
-}