@jielga/tmdatagrid 0.3.0 → 0.5.0

package/src/tmdatagrid/components/TMDataGridFilterPanel.tsx

@@ -1,17 +1,29 @@
-import { ActionIcon, Button, Select, Stack, Text, TextInput } from "@mantine/core";
+import {
+  ActionIcon,
+  Button,
+  MultiSelect,
+  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 {
+  optionsToComboboxData,
+  resolveColumnOptions,
+} from "../core/columnOptions";
 import { getColumnLabel, getColumnType } from "../core/columnUtils";
 import {
   type TMDataGridFilterOperator,
   type TMDataGridFilterValue,
-  FILTER_OPERATOR_LABELS,
   getDefaultOperator,
   getOperatorsForType,
   isTMDataGridFilterValue,
   operatorNeedsValue,
+  operatorTakesArrayValue,
 } from "../core/filterOperators";
 import { CloseIcon } from "./icons";
 
@@ -28,7 +40,7 @@ function asFilterValue(value: unknown): TMDataGridFilterValue {
  * free — the state is forwarded to the server instead of a row model.
  */
 export function TMDataGridFilterPanel() {
-  const { table, ui, controlSize } = useTMDataGridContext();
+  const { table, ui, labels, controlSize } = useTMDataGridContext();
   const opened = useSelector(ui, (state) => state.filterPanelOpen);
   const columnFilters = useSelector(
     table.store,
@@ -78,6 +90,18 @@ export function TMDataGridFilterPanel() {
       columnFilters.find((filter) => filter.id === fromColumnId)?.value,
     );
     const target = table.getColumn(toColumnId);
+    const operator = getDefaultOperator(
+      target ? getColumnType(target) : "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 =
+      operatorTakesArrayValue(operator) === Array.isArray(current.value)
+        ? current.value
+        : operatorTakesArrayValue(operator)
+          ? []
+          : "";
     table.setColumnFilters(
       columnFilters
         .filter((filter) => filter.id !== toColumnId)
@@ -85,12 +109,7 @@ export function TMDataGridFilterPanel() {
           filter.id === fromColumnId
             ? {
                 id: toColumnId,
-                value: {
-                  operator: getDefaultOperator(
-                    target ? getColumnType(target) : "string",
-                  ),
-                  value: current.value,
-                } satisfies TMDataGridFilterValue,
+                value: { operator, value } satisfies TMDataGridFilterValue,
               }
             : filter,
         ),
@@ -108,6 +127,21 @@ export function TMDataGridFilterPanel() {
     );
   }
 
+  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 the array/scalar boundary.
+    const value =
+      operatorTakesArrayValue(operator) === Array.isArray(current.value)
+        ? current.value
+        : operatorTakesArrayValue(operator)
+          ? []
+          : "";
+    patchFilter(columnId, { operator, value });
+  }
+
   /** Clears every filter, including half-typed ones the pills never showed. */
   function clearAllFilters() {
     table.setColumnFilters([]);
@@ -141,7 +175,7 @@ export function TMDataGridFilterPanel() {
     <div
       ref={panelRef}
       role="group"
-      aria-label="Filters"
+      aria-label={labels.filters}
       className={classes.filterPanel}
       // Escape is what closes a floating surface, and every control that can
       // hold focus in here sits inside this element.
@@ -153,13 +187,13 @@ export function TMDataGridFilterPanel() {
     >
       <div className={classes.filterPanelHeader}>
         <Text size={controlSize} fw={600}>
-          Filters
+          {labels.filters}
         </Text>
         <ActionIcon
           variant="subtle"
           color="gray"
           size="sm"
-          aria-label="Close filters"
+          aria-label={labels.closeFilters}
           onClick={ui.actions.closeFilterPanel}
         >
           <CloseIcon size={16} stroke={1.6} />
@@ -172,6 +206,8 @@ export function TMDataGridFilterPanel() {
           const value = asFilterValue(filter.value);
           const type = column ? getColumnType(column) : "string";
           const needsValue = operatorNeedsValue(value.operator);
+          const takesArray = operatorTakesArrayValue(value.operator);
+          const scalarValue = typeof value.value === "string" ? value.value : "";
 
           return (
             <div key={filter.id} className={classes.filterRow}>
@@ -179,14 +215,14 @@ export function TMDataGridFilterPanel() {
                 variant="subtle"
                 color="gray"
                 size="lg"
-                aria-label="Remove filter"
+                aria-label={labels.removeFilter}
                 onClick={() => removeFilter(filter.id)}
               >
                 <CloseIcon size={18} stroke={1.6} />
               </ActionIcon>
 
               <Select
-                label="Column"
+                label={labels.filterColumn}
                 size={controlSize}
                 w={160}
                 allowDeselect={false}
@@ -200,36 +236,78 @@ export function TMDataGridFilterPanel() {
               />
 
               <Select
-                label="Operator"
+                label={labels.filterOperator}
                 size={controlSize}
                 w={170}
                 allowDeselect={false}
                 comboboxProps={{ withinPortal: false }}
                 data={getOperatorsForType(type).map((operator) => ({
                   value: operator,
-                  label: FILTER_OPERATOR_LABELS[operator],
+                  label: labels.operators[operator],
                 }))}
                 value={value.operator}
                 onChange={(next) =>
                   next &&
-                  patchFilter(filter.id, {
-                    operator: next as TMDataGridFilterOperator,
-                  })
+                  changeOperator(filter.id, next as TMDataGridFilterOperator)
                 }
               />
 
-              <TextInput
-                label="Value"
-                size={controlSize}
-                w={180}
-                type={type === "number" && needsValue ? "number" : "text"}
-                disabled={!needsValue}
-                placeholder={needsValue ? "Filter value" : ""}
-                value={needsValue ? value.value : ""}
-                onChange={(event) =>
-                  patchFilter(filter.id, { value: event.currentTarget.value })
-                }
-              />
+              {takesArray && column ? (
+                // The set the cell is tested against. Options come from
+                // `meta.options`; a select column that declares none still
+                // gets the values present in the data, via the faceted index.
+                <MultiSelect
+                  label={labels.filterValue}
+                  size={controlSize}
+                  w={180}
+                  comboboxProps={{ withinPortal: false }}
+                  searchable
+                  data={optionsToComboboxData(
+                    resolveColumnOptions({ table, column, fallback: "faceted" }),
+                  )}
+                  value={Array.isArray(value.value) ? [...value.value] : []}
+                  onChange={(next) => patchFilter(filter.id, { value: next })}
+                />
+              ) : type === "boolean" ? (
+                <Select
+                  label={labels.filterValue}
+                  size={controlSize}
+                  w={180}
+                  comboboxProps={{ withinPortal: false }}
+                  disabled={!needsValue}
+                  clearable
+                  placeholder={needsValue ? labels.filterValuePlaceholder : ""}
+                  data={[
+                    { value: "true", label: labels.booleanTrue },
+                    { value: "false", label: labels.booleanFalse },
+                  ]}
+                  value={needsValue && scalarValue !== "" ? scalarValue : null}
+                  onChange={(next) =>
+                    patchFilter(filter.id, { value: next ?? "" })
+                  }
+                />
+              ) : (
+                <TextInput
+                  label={labels.filterValue}
+                  size={controlSize}
+                  w={180}
+                  type={
+                    !needsValue
+                      ? "text"
+                      : type === "number"
+                        ? "number"
+                        : type === "date"
+                          ? "date"
+                          : "text"
+                  }
+                  disabled={!needsValue}
+                  placeholder={needsValue ? labels.filterValuePlaceholder : ""}
+                  value={needsValue ? scalarValue : ""}
+                  onChange={(event) =>
+                    patchFilter(filter.id, { value: event.currentTarget.value })
+                  }
+                />
+              )}
             </div>
           );
         })}
@@ -241,7 +319,7 @@ export function TMDataGridFilterPanel() {
             disabled={!canAddFilter}
             onClick={addFilter}
           >
-            Add filter
+            {labels.addFilter}
           </Button>
           <Button
             variant="subtle"
@@ -250,7 +328,7 @@ export function TMDataGridFilterPanel() {
             disabled={columnFilters.length === 0}
             onClick={clearAllFilters}
           >
-            Clear all
+            {labels.clearAllFilters}
           </Button>
         </div>
       </Stack>

package/src/tmdatagrid/components/TMDataGridFilterPills.tsx

@@ -53,7 +53,7 @@ export function TMDataGridFilterPills<TData extends RowData>({
   onPillClick,
   className,
 }: TMDataGridFilterPillsProps<TData>) {
-  const { table } = api;
+  const { table, labels } = api;
   const columnFilters = useSelector(
     table.store,
     (state) => state.columnFilters,
@@ -67,7 +67,7 @@ export function TMDataGridFilterPills<TData extends RowData>({
   return (
     <div
       role="group"
-      aria-label="Active filters"
+      aria-label={labels.activeFilters}
       className={[classes.filterPills, className].filter(Boolean).join(" ")}
     >
       <Pill.Group size={size}>
@@ -94,7 +94,7 @@ export function TMDataGridFilterPills<TData extends RowData>({
               // way out. These pills stand on their own, so the ✕ has to be a
               // real button.
               removeButtonProps={{
-                "aria-label": `Clear ${label} filter`,
+                "aria-label": labels.clearFilter(label),
                 "aria-hidden": false,
                 tabIndex: 0,
               }}
@@ -111,6 +111,7 @@ export function TMDataGridFilterPills<TData extends RowData>({
                   label,
                   type: column ? getColumnType(column) : "string",
                   filter: value,
+                  operatorLabels: labels.operators,
                 })}
               </UnstyledButton>
             </Pill>
@@ -127,7 +128,7 @@ export function TMDataGridFilterPills<TData extends RowData>({
           size="compact-xs"
           onClick={() => table.setColumnFilters([])}
         >
-          Clear all
+          {labels.clearAllFilters}
         </Button>
       )}
     </div>

package/src/tmdatagrid/components/TMDataGridFooter.tsx

@@ -9,10 +9,6 @@ import { isPagingActive } from "../core/rowSelection";
 import { ChevronLeftIcon, ChevronRightIcon } from "./icons";
 import type { TMDataGridTable } from "../useTMDataGrid";
 
-/** Shown on the greyed-out pager, and the reason it is greyed out. */
-const PAGING_SUSPENDED_HINT =
-  "Paging is off while the rows are grouped: the whole tree is rendered and virtualized. Ungroup to page again.";
-
 /** Distilled pagination state and actions for building a custom pager. */
 export type TMDataGridPaginationApi = {
   pageIndex: number;
@@ -75,7 +71,7 @@ export function TMDataGridFooter({
   pageSizeOptions = [10, 25, 50, 100],
   pagination,
 }: TMDataGridFooterProps) {
-  const { table, features, controlSize } = useTMDataGridContext();
+  const { table, features, labels, controlSize } = useTMDataGridContext();
   useSelector(table.store);
 
   if (!getGridCapabilities(table, features).canPaginate) return null;
@@ -105,7 +101,7 @@ export function TMDataGridFooter({
 
   return (
     <Tooltip
-      label={PAGING_SUSPENDED_HINT}
+      label={labels.pagingSuspendedHint}
       disabled={paging}
       withArrow
       multiline
@@ -115,7 +111,7 @@ export function TMDataGridFooter({
       <div className={classes.footer} data-paging-suspended={!paging}>
         <Group gap="xs" wrap="nowrap">
           <Text size={controlSize} c="dimmed">
-            Rows per page:
+            {labels.rowsPerPage}
           </Text>
           <Select
             size={controlSize}
@@ -133,23 +129,19 @@ export function TMDataGridFooter({
         </Group>
 
         <Text size={controlSize} c="dimmed">
-          {paging ? (
-            <>
-              {from}–{to} of {total}
-            </>
-          ) : (
-            // Not a range: nothing is being sliced, so a range would be a lie.
-            // Counted before grouping too — `getRowCount()` would be counting
-            // the tree, so a collapsed grid would claim to hold eight rows.
-            <>Grouped · all {table.getFilteredRowModel().rows.length} rows</>
-          )}
+          {paging
+            ? labels.pageRange({ from, to, total })
+            : // Not a range: nothing is being sliced, so a range would be a lie.
+              // Counted before grouping too — `getRowCount()` would be counting
+              // the tree, so a collapsed grid would claim to hold eight rows.
+              labels.groupedAllRows(table.getFilteredRowModel().rows.length)}
         </Text>
 
         <Group gap={4} wrap="nowrap">
           <ActionIcon
             variant="subtle"
             color="gray"
-            aria-label="Previous page"
+            aria-label={labels.previousPage}
             disabled={!paging || !table.getCanPreviousPage()}
             onClick={() => table.previousPage()}
           >
@@ -158,7 +150,7 @@ export function TMDataGridFooter({
           <ActionIcon
             variant="subtle"
             color="gray"
-            aria-label="Next page"
+            aria-label={labels.nextPage}
             disabled={!paging || !table.getCanNextPage()}
             onClick={() => table.nextPage()}
           >

package/src/tmdatagrid/components/TMDataGridGroupColumn.tsx

@@ -1,4 +1,8 @@
 import { UnstyledButton } from "@mantine/core";
+import {
+  useCellControlTabIndex,
+  useTMDataGridContext,
+} from "../TMDataGridContext";
 import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
 import { useSelector } from "@tanstack/react-store";
 import { shallow } from "@tanstack/store";
@@ -23,9 +27,12 @@ const BLANK_GROUP_LABEL = "(Blank)";
  * written for a data row and is free to reach into `row.original`, which on a
  * group row is the first leaf's record rather than anything about the group.
  */
-export function formatGroupValue(value: unknown): string {
+export function formatGroupValue(
+  value: unknown,
+  blankLabel = BLANK_GROUP_LABEL,
+): string {
   if (value === null || value === undefined || value === "") {
-    return BLANK_GROUP_LABEL;
+    return blankLabel;
   }
   if (value instanceof Date) return value.toLocaleDateString();
   return String(value);
@@ -44,21 +51,27 @@ function GroupCell<TData extends RowData>({
 }: {
   row: Row<TMDataGridFeatures, TData>;
 }) {
+  const { labels } = useTMDataGridContext();
   const expanded = useSelector(row.table.store, () => row.getIsExpanded());
+  // See useCellControlTabIndex: reached by stepping into the cell, not by Tab.
+  const tabIndex = useCellControlTabIndex();
 
   // Leaf rows keep the lane empty: their values are in the data columns, and
   // the indent alone is what places them under their group.
   if (!row.getIsGrouped()) return null;
 
-  const label = formatGroupValue(row.groupingValue);
+  const label = formatGroupValue(row.groupingValue, labels.blankGroupValue);
 
   return (
     <UnstyledButton
       className={classes.groupToggle}
       // Padding rather than margin, so the whole indented width stays clickable.
       style={{ paddingInlineStart: row.depth * INDENT_STEP }}
+      tabIndex={tabIndex}
       aria-expanded={expanded}
-      aria-label={`${expanded ? "Collapse" : "Expand"} ${label}`}
+      aria-label={
+        expanded ? labels.collapseGroup(label) : labels.expandGroup(label)
+      }
       // The row underneath may select or highlight on click; expanding is its
       // own gesture and must not also trigger those.
       onClick={(event) => {
@@ -88,11 +101,12 @@ function GroupHeader<TData extends RowData>({
 }: {
   table: TMDataGridTable<TData>;
 }) {
+  const { labels } = useTMDataGridContext();
   const grouping = useSelector(table.store, (state) => state.grouping, {
     compare: shallow,
   });
 
-  if (grouping.length === 0) return "Group";
+  if (grouping.length === 0) return labels.groupColumnLabel;
   return grouping
     .map((columnId) => {
       const column = table.getColumn(columnId);
@@ -114,15 +128,13 @@ function GroupHeader<TData extends RowData>({
  * `column.getCanGroup()` requires an `accessorFn`, which a display column has
  * no reason to have.
  */
-export function createGroupColumn<TData extends RowData>(): ColumnDef<
-  TMDataGridFeatures,
-  TData,
-  unknown
-> {
+export function createGroupColumn<TData extends RowData>(
+  label = "Group",
+): ColumnDef<TMDataGridFeatures, TData, unknown> {
   return {
     id: GROUP_COLUMN_ID,
     meta: {
-      label: "Group",
+      label,
       // Structurally the first column after the checkbox lane.
       enableOrdering: false,
     },

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

@@ -21,9 +21,10 @@
   justify-content: center;
 }
 
-/* Same as the body cells: the select-all box sits in a fixed 48px track, which
-   the text padding would squeeze it out of at the larger sizes. */
-.headerCell[data-select-column="true"] {
+/* Same as the body cells: a control lane's header — the select-all box, the
+   expand-all chevron — sits in a fixed 36px track, which the text padding would
+   squeeze it out of at the larger sizes. */
+.headerCell[data-control-column="true"] {
   padding: 0;
 }
 
@@ -84,6 +85,17 @@
   cursor: pointer;
 }
 
+/* Sort priority under multi-sort — "1", "2", … beside the arrow. Only rendered
+   while more than one column sorts, so a single sort stays as it always was. */
+.sortIndex {
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--mantine-color-dimmed);
+  min-width: 10px;
+  text-align: center;
+}
+
 /* Column reordering. The dragged header stays in place and dims — the browser
    already carries a snapshot of it under the pointer — while the header being
    dragged over draws a bar on the edge the column will land against. */