@jielga/tmdatagrid 2.0.0-beta.9 → 2.0.0

package/src/components/TMDataGridExportPicker.module.css

@@ -0,0 +1,77 @@
+.title {
+  font-weight: 500;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-default);
+  overflow: hidden;
+}
+
+.listHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  background-color: var(--mantine-color-default-hover);
+  border-bottom: 1px solid var(--mantine-color-default-border);
+}
+
+.headerLabel {
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.rows {
+  display: flex;
+  flex-direction: column;
+  padding: calc(var(--mantine-spacing-xs) / 2) 0;
+}
+
+/* Each column is one full-width row: the label stretches over the free space
+   so the whole row toggles the box, and the row highlights on hover like a
+   menu item. */
+.row {
+  padding: 0 var(--mantine-spacing-sm);
+}
+
+.row:hover {
+  background-color: var(--mantine-color-default-hover);
+}
+
+.rowBody {
+  align-items: center;
+}
+
+.rowLabelWrapper {
+  flex: 1;
+  min-width: 0;
+}
+
+.rowLabel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-sm);
+  padding-block: calc(var(--mantine-spacing-xs) * 0.75);
+  cursor: pointer;
+}
+
+.rowText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rowHint {
+  flex: none;
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+}
+
+.empty {
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+}

package/src/components/TMDataGridExportPicker.tsx

@@ -0,0 +1,234 @@
+import {
+  Button,
+  Checkbox,
+  Group,
+  type MantineSize,
+  Modal,
+  ScrollArea,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { useSelector } from "@tanstack/react-store";
+import { useState } from "react";
+import classes from "./TMDataGridExportPicker.module.css";
+import { useTMDataGridContext } from "../TMDataGridContext";
+import { getColumnLabel, showColumnSearch } from "../core/columnUtils";
+import {
+  countSelectedExportRows,
+  getExportableColumns,
+  resolveExportOptions,
+  type TMDataGridExportPickerRequest,
+} from "../core/export";
+import type { TMDataGridSize } from "../core/sizes";
+import { useTMDataGridExport } from "../useTMDataGridExport";
+import { SearchIcon } from "./icons";
+
+/**
+ * The column picker behind `columns="custom"` on the export menu items: a
+ * list of every exportable column, the visible ones ticked and the hidden
+ * ones marked, a select-all row over the list, a search box once the list is
+ * long, and an Export button that downloads the ticked ones.
+ *
+ * Mounted once by the root and driven by `ui.state.exportPicker`, because the
+ * menu item that opens it unmounts with the dropdown on the click. The form
+ * inside is keyed on the request, so each opening starts from the visible
+ * columns again rather than from the last choice.
+ */
+export function TMDataGridExportPicker() {
+  const { ui, labels, size, controlSize, exportOptions } =
+    useTMDataGridContext();
+  const request = useSelector(ui, (state) => state.exportPicker);
+  const format = request
+    ? resolveExportOptions(exportOptions, request.options).format
+    : null;
+
+  return (
+    <Modal
+      opened={request !== null}
+      onClose={() => ui.actions.closeExportPicker()}
+      title={
+        format && labels.exportPickerTitle(format.extension.toUpperCase())
+      }
+      size={MODAL_WIDTH[size]}
+      closeButtonProps={{ size: CLOSE_BUTTON_SIZE[controlSize] }}
+      classNames={{ title: classes.title }}
+      styles={{ title: { fontSize: `var(--mantine-font-size-${controlSize})` } }}
+    >
+      {request && <PickerForm request={request} />}
+    </Modal>
+  );
+}
+
+/** Dialog width per grid size: the same three steps as the controls. */
+const MODAL_WIDTH: Record<TMDataGridSize, MantineSize> = {
+  xs: "xs",
+  sm: "xs",
+  md: "sm",
+  lg: "sm",
+  xl: "md",
+};
+
+/** The close button one step above the controls, which is Mantine's own ratio. */
+const CLOSE_BUTTON_SIZE: Record<string, MantineSize> = {
+  xs: "sm",
+  sm: "md",
+  md: "lg",
+};
+
+function PickerForm({ request }: { request: TMDataGridExportPickerRequest }) {
+  const { table, ui, labels, controlSize } = useTMDataGridContext();
+  const { exportAll, exportSelected } = useTMDataGridExport(request.options);
+  const columns = getExportableColumns(table);
+  const [search, setSearch] = useState("");
+  const [checked, setChecked] = useState<ReadonlySet<string>>(
+    () =>
+      new Set(
+        columns
+          .filter((column) => column.getIsVisible())
+          .map((column) => column.id),
+      ),
+  );
+
+  const searchable = showColumnSearch("auto", columns.length);
+  const needle = search.trim().toLowerCase();
+  const listed = needle
+    ? columns.filter((column) =>
+        getColumnLabel(column).toLowerCase().includes(needle),
+      )
+    : columns;
+
+  // Select all works on the listed columns: with a search active it ticks the
+  // matches and leaves the rest as they are, the way a filtered list reads.
+  const listedChecked = listed.filter((column) => checked.has(column.id));
+  const allListed = listed.length > 0 && listedChecked.length === listed.length;
+  const someListed = listedChecked.length > 0 && !allListed;
+
+  const toggle = (columnId: string, on: boolean) =>
+    setChecked((previous) => {
+      const next = new Set(previous);
+      if (on) next.add(columnId);
+      else next.delete(columnId);
+      return next;
+    });
+
+  const toggleListed = (on: boolean) =>
+    setChecked((previous) => {
+      const next = new Set(previous);
+      for (const column of listed) {
+        if (on) next.add(column.id);
+        else next.delete(column.id);
+      }
+      return next;
+    });
+
+  const confirm = async () => {
+    // Render order, whatever order the boxes were ticked in.
+    const ids = columns
+      .filter((column) => checked.has(column.id))
+      .map((column) => column.id);
+    const run = request.rows === "selected" ? exportSelected : exportAll;
+    await run({ columns: ids });
+    ui.actions.closeExportPicker();
+  };
+
+  const hint = labels.exportPickerHint(
+    request.rows === "selected" ? countSelectedExportRows(table) : null,
+  );
+
+  return (
+    <Stack gap="sm" data-dg-part="export-picker">
+      <Text size={controlSize} c="dimmed" data-dg-part="export-picker-hint">
+        {hint}
+      </Text>
+
+      {searchable && (
+        <TextInput
+          value={search}
+          onChange={(event) => setSearch(event.currentTarget.value)}
+          placeholder={labels.columnsSearchPlaceholder}
+          leftSection={<SearchIcon size={16} stroke={1.6} />}
+          size={controlSize}
+          data-dg-part="export-picker-search"
+          data-autofocus
+        />
+      )}
+
+      <div className={classes.list}>
+        <div className={classes.listHeader}>
+          <Checkbox
+            size={controlSize}
+            label={labels.exportPickerSelectAll}
+            checked={allListed}
+            indeterminate={someListed}
+            onChange={(event) => toggleListed(event.currentTarget.checked)}
+            classNames={{ label: classes.headerLabel }}
+            data-dg-part="export-column-all"
+          />
+          <Text size="xs" c="dimmed" data-dg-part="export-picker-count">
+            {labels.exportPickerCount(checked.size, columns.length)}
+          </Text>
+        </div>
+
+        <ScrollArea.Autosize mah="50vh" type="auto">
+          <div className={classes.rows}>
+            {listed.map((column) => (
+              <Checkbox
+                key={column.id}
+                size={controlSize}
+                label={
+                  <>
+                    <span className={classes.rowText}>
+                      {getColumnLabel(column)}
+                    </span>
+                    {!column.getIsVisible() && (
+                      <span className={classes.rowHint}>
+                        {labels.exportPickerHidden}
+                      </span>
+                    )}
+                  </>
+                }
+                checked={checked.has(column.id)}
+                onChange={(event) =>
+                  toggle(column.id, event.currentTarget.checked)
+                }
+                classNames={{
+                  root: classes.row,
+                  body: classes.rowBody,
+                  labelWrapper: classes.rowLabelWrapper,
+                  label: classes.rowLabel,
+                }}
+                data-dg-part="export-column"
+                data-column-id={column.id}
+              />
+            ))}
+            {listed.length === 0 && (
+              <Text size={controlSize} c="dimmed" className={classes.empty}>
+                {labels.columnsNoMatch(search)}
+              </Text>
+            )}
+          </div>
+        </ScrollArea.Autosize>
+      </div>
+
+      <Group justify="flex-end" gap="xs">
+        <Button
+          variant="default"
+          size={controlSize}
+          onClick={() => ui.actions.closeExportPicker()}
+          data-dg-part="export-picker-cancel"
+        >
+          {labels.exportPickerCancel}
+        </Button>
+        <Button
+          size={controlSize}
+          disabled={checked.size === 0}
+          onClick={() => void confirm()}
+          data-dg-part="export-picker-confirm"
+        >
+          {labels.exportPickerConfirm}
+        </Button>
+      </Group>
+    </Stack>
+  );
+}

package/src/components/TMDataGridFilterPanel.module.css

@@ -0,0 +1,54 @@
+/* A plain block of controls. Nothing here positions it - the popup and the
+   sidebar own their own placement, and a consumer placing the panel by hand
+   places it the way any other block. */
+.filterPanel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-xs);
+}
+
+/* Column, operator and value side by side, bottom-aligned so their fields line
+   up under labels of differing heights. */
+.filterRow {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--mantine-spacing-xs);
+}
+
+/* The narrow-host layout: the same three fields one under the other, each
+   filling the width, with the ✕ beside the column it removes. A card rather
+   than a bare stack, because without the side-by-side alignment there is
+   nothing else saying where one filter ends and the next begins. */
+.filterRow[data-layout="stacked"] {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: end;
+  gap: 6px var(--mantine-spacing-xs);
+  padding: var(--mantine-spacing-xs);
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-sm);
+}
+
+.filterRow[data-layout="stacked"] .filterRemove {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.filterRow[data-layout="stacked"] .filterColumnSlot {
+  grid-column: 1;
+  grid-row: 1;
+  min-width: 0;
+}
+
+.filterRow[data-layout="stacked"] .filterOperatorSlot,
+.filterRow[data-layout="stacked"] .filterValueSlot {
+  grid-column: 1 / -1;
+  min-width: 0;
+}
+
+.filterPanelFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-md);
+}