@jielga/tmdatagrid 2.0.0-beta.9 → 2.0.1

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/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.tsx

@@ -1,161 +0,0 @@
-import { ActionIcon, Loader, Popover, Text, Tooltip } from "@mantine/core";
-import { useSelector } from "@tanstack/react-store";
-import type { ReactNode } from "react";
-import classes from "./TMDataGridToolbar.module.css";
-import { TMDataGridColumnsPanel } from "./TMDataGridColumnsPanel";
-import { useTMDataGridContext } from "../TMDataGridContext";
-import { getGridCapabilities } from "../core/capabilities";
-import { useSettledTableState } from "../core/useSettledTableState";
-import { isFilterActive } from "../core/filterOperators";
-import { BurgerIcon, FilterIcon } from "./icons";
-import { openColumnFilter } from "../useTMDataGrid";
-
-/** Row above the grid. Compose it from the pieces below, or anything else. */
-export function TMDataGridToolbar({ children }: { children?: ReactNode }) {
-  return (
-    <div data-dg-part="toolbar" className={classes.toolbar}>
-      {children}
-    </div>
-  );
-}
-
-/** Pushes the following toolbar items to the right. */
-export function TMDataGridToolbarSpacer() {
-  return <div className={classes.toolbarSpacer} />;
-}
-
-/**
- * A small spinner shown while `meta.loading` is true, and nothing otherwise.
- *
- * The body only shows its loading state while the grid is *empty* - a
- * server-driven grid refetching with rows on screen keeps showing them, which
- * is right, but leaves nothing saying a fetch is running. This is that signal,
- * and the consumer decides where it sits by placing it in the toolbar:
- *
- * ```tsx
- * <TMDataGrid.Toolbar>
- *   <TMDataGrid.SummaryCount />
- *   <TMDataGrid.Spacer />
- *   <TMDataGrid.LoadingIndicator />
- *   <TMDataGrid.FilterButton />
- * </TMDataGrid.Toolbar>
- * ```
- */
-export function TMDataGridLoadingIndicator() {
-  const { table, labels } = useTMDataGridContext();
-  if (table.options.meta?.loading !== true) return null;
-  return <Loader size="xs" data-dg-part="loading" aria-label={labels.loading} />;
-}
-
-/**
- * Visible rows over total rows. On a server-driven grid, set
- * `meta.totalRowCount` for the denominator - the client never sees every row.
- */
-export function TMDataGridSummaryCount({ children }: { children?: ReactNode }) {
-  const { table, controlSize } = useTMDataGridContext();
-  useSettledTableState(table.store);
-
-  const shown = table.getRowCount();
-  const total =
-    table.options.meta?.totalRowCount ??
-    table.getPreFilteredRowModel().rows.length;
-
-  return (
-    <Text
-      span
-      size={controlSize}
-      c="dimmed"
-      className={classes.summaryCount}
-      data-dg-part="summary-count"
-    >
-      {children !== undefined ? children : `${shown} / ${total}`}
-    </Text>
-  );
-}
-
-/**
- * Burger menu in the grid's top-right corner - opens "Manage columns".
- * Renders nothing when no column can be hidden (`enableHiding: false`).
- */
-export function TMDataGridColumnsButton() {
-  const { table, ui, features, labels, controlSize } = useTMDataGridContext();
-  const opened = useSelector(ui, (state) => state.columnsPanelOpen);
-
-  if (!getGridCapabilities(table, features).canHideAny) return null;
-
-  return (
-    <Popover
-      opened={opened}
-      onChange={ui.actions.setColumnsPanelOpen}
-      position="bottom-end"
-      shadow="md"
-      radius="md"
-      withinPortal
-      trapFocus
-    >
-      <Popover.Target>
-        <Tooltip label={labels.manageColumns} openDelay={400}>
-          <ActionIcon
-            variant="subtle"
-            color="gray"
-            size={controlSize}
-            aria-label={labels.manageColumns}
-            data-dg-part="columns-button"
-            onClick={ui.actions.toggleColumnsPanel}
-          >
-            <BurgerIcon size={18} stroke={1.6} />
-          </ActionIcon>
-        </Tooltip>
-      </Popover.Target>
-      <Popover.Dropdown p={0}>
-        <TMDataGridColumnsPanel />
-      </Popover.Dropdown>
-    </Popover>
-  );
-}
-
-/**
- * Toggles the filter panel, seeding a filter row on the first filterable column.
- * Renders nothing when no column can be filtered (`enableColumnFilters: false`).
- */
-export function TMDataGridFilterButton() {
-  const api = useTMDataGridContext();
-  const { table, ui, features, labels, controlSize } = api;
-  const opened = useSelector(ui, (state) => state.filterPanelOpen);
-  const columnFilters = useSelector(
-    table.store,
-    (state) => state.columnFilters,
-  );
-  const activeCount = columnFilters.filter((filter) =>
-    isFilterActive(filter.value),
-  ).length;
-
-  if (!getGridCapabilities(table, features).canFilterAny) return null;
-
-  return (
-    <Tooltip label={labels.filters} openDelay={400}>
-      <ActionIcon
-        variant={opened || activeCount > 0 ? "light" : "subtle"}
-        color={activeCount > 0 ? undefined : "gray"}
-        size={controlSize}
-        aria-label={labels.filters}
-        // Also what the panel's click-away handler tests for, so that a click
-        // here reads as a toggle rather than as a click outside.
-        data-dg-part="filter-button"
-        onClick={() => {
-          if (opened) {
-            ui.actions.closeFilterPanel();
-            return;
-          }
-          const firstFilterable = table
-            .getAllLeafColumns()
-            .find((column) => column.getCanFilter());
-          if (firstFilterable) openColumnFilter(api, firstFilterable.id);
-          else ui.actions.openFilterPanel();
-        }}
-      >
-        <FilterIcon size={16} stroke={1.6} />
-      </ActionIcon>
-    </Tooltip>
-  );
-}