@jielga/tmdatagrid 2.2.0 → 2.4.0

package/src/core/filterOperators.ts

@@ -6,6 +6,9 @@ import type {
   TableFeatures,
 } from "@tanstack/react-table";
 import type { TMDataGridFeatures, TMDataGridTable } from "../useTMDataGrid";
+import type { TMDataGridOption } from "./columnOptions";
+import type { TMDataGridLabels } from "./labels";
+import { formatValueText } from "./valueText";
 
 /**
  * The value shape stored in `columnFilters` for every TMDataGrid column.
@@ -75,7 +78,7 @@ export const FILTER_OPERATOR_LABELS: Record<TMDataGridFilterOperator, string> =
   isNotEmpty: "is not empty",
 };
 
-const STRING_OPERATORS: readonly TMDataGridFilterOperator[] = [
+const STRING_OPERATORS = [
   "contains",
   "equals",
   "notEquals",
@@ -83,9 +86,9 @@ const STRING_OPERATORS: readonly TMDataGridFilterOperator[] = [
   "endsWith",
   "isEmpty",
   "isNotEmpty",
-];
+] as const satisfies readonly TMDataGridFilterOperator[];
 
-const NUMBER_OPERATORS: readonly TMDataGridFilterOperator[] = [
+const NUMBER_OPERATORS = [
   "equals",
   "notEquals",
   "greaterThan",
@@ -95,12 +98,12 @@ const NUMBER_OPERATORS: readonly TMDataGridFilterOperator[] = [
   "between",
   "isEmpty",
   "isNotEmpty",
-];
+] as const satisfies readonly TMDataGridFilterOperator[];
 
 // `equals` doubles as a date's "is": it compares by calendar day whenever the
 // cell holds a Date (see matchesFilter), so a separate `is` operator would be
 // the same comparison under a second name.
-const DATE_OPERATORS: readonly TMDataGridFilterOperator[] = [
+const DATE_OPERATORS = [
   "equals",
   "notEquals",
   "before",
@@ -110,23 +113,23 @@ const DATE_OPERATORS: readonly TMDataGridFilterOperator[] = [
   "between",
   "isEmpty",
   "isNotEmpty",
-];
+] as const satisfies readonly TMDataGridFilterOperator[];
 
-const BOOLEAN_OPERATORS: readonly TMDataGridFilterOperator[] = [
+const BOOLEAN_OPERATORS = [
   "equals",
   "notEquals",
   "isEmpty",
   "isNotEmpty",
-];
+] as const satisfies readonly TMDataGridFilterOperator[];
 
 // One set for both select types: the operators are about membership in the
 // filter's set, which reads the same whether the cell holds one value or many.
-const SELECT_OPERATORS: readonly TMDataGridFilterOperator[] = [
+const SELECT_OPERATORS = [
   "isAnyOf",
   "isNoneOf",
   "isEmpty",
   "isNotEmpty",
-];
+] as const satisfies readonly TMDataGridFilterOperator[];
 
 /** Operators that ignore the value input (the input is disabled for these). */
 const VALUELESS_OPERATORS: readonly TMDataGridFilterOperator[] = [
@@ -143,16 +146,27 @@ const ARRAY_OPERATORS: readonly TMDataGridFilterOperator[] = [
 /** Operators whose value is a `[min, max]` pair. */
 const RANGE_OPERATORS: readonly TMDataGridFilterOperator[] = ["between"];
 
-const OPERATORS_BY_TYPE: Record<
-  TMDataGridColumnType,
-  readonly TMDataGridFilterOperator[]
-> = {
+const OPERATORS_BY_TYPE = {
   string: STRING_OPERATORS,
   number: NUMBER_OPERATORS,
   boolean: BOOLEAN_OPERATORS,
   date: DATE_OPERATORS,
   select: SELECT_OPERATORS,
   multiSelect: SELECT_OPERATORS,
+} as const satisfies Record<
+  TMDataGridColumnType,
+  readonly TMDataGridFilterOperator[]
+>;
+
+/**
+ * The operators each column type offers, as a type: the same lists the filter
+ * panel offers, so a typed link can never name an operator the panel lacks.
+ *
+ * @internal Feeds the typed links in urlState.ts; not exported from the
+ * package.
+ */
+export type OperatorsByColumnType = {
+  [TType in TMDataGridColumnType]: (typeof OPERATORS_BY_TYPE)[TType][number];
 };
 
 const DEFAULT_OPERATOR_BY_TYPE: Record<
@@ -251,6 +265,19 @@ export function isFilterActive(value: unknown): boolean {
     : typeof value.value === "string" && value.value.trim() !== "";
 }
 
+/**
+ * Whether one `columnFilters` entry narrows the rows, by the one rule the grid
+ * uses for "active": an envelope counts once {@link isFilterActive} says so,
+ * and a value that is not an envelope always counts, since a raw value written
+ * by consumer code narrows the rows as far as the grid can tell.
+ *
+ * @internal Shared by the empty state and the `urlKey` param; not exported
+ * from the package.
+ */
+export function filterNarrowsRows(entry: { value: unknown }): boolean {
+  return !isTMDataGridFilterValue(entry.value) || isFilterActive(entry.value);
+}
+
 /** One column's filter, typed - what `columnFilters` holds per entry. */
 export type TMDataGridColumnFilter = {
   id: string;
@@ -294,30 +321,39 @@ export function activeColumnFilters<TData extends RowData>(
  *
  * The type's default operator is left implicit - "First name: Sofia" reads the
  * way a person would say it - while any other operator is spelled out, since
- * that is the part a reader cannot guess.
+ * that is the part a reader cannot guess. A value with an option reads as the
+ * option's label, and a boolean as `labels.booleanTrue` / `booleanFalse`.
  */
 export function formatFilterLabel({
   label,
   type,
   filter,
   operatorLabels = FILTER_OPERATOR_LABELS,
+  options,
+  labels,
 }: {
   label: string;
   type: TMDataGridColumnType;
   filter: TMDataGridFilterValue;
   /** Localized operator names - `labels.operators`. Defaults to English. */
   operatorLabels?: Record<TMDataGridFilterOperator, string>;
+  /** The column's options, so a value reads as its option's label. */
+  options?: ReadonlyArray<TMDataGridOption>;
+  /** What a boolean value reads as. Defaults to English. */
+  labels?: Pick<TMDataGridLabels, "booleanTrue" | "booleanFalse">;
 }): string {
   const { operator, value } = filter;
   if (!operatorNeedsValue(operator)) {
     return `${label} ${operatorLabels[operator]}`;
   }
+  const valueText = (entry: string) =>
+    formatValueText(String(entry).trim(), { type, options, labels });
   const text =
     operator === "between" && Array.isArray(value)
-      ? value.map((entry) => String(entry).trim()).join("–")
+      ? value.map(valueText).join("–")
       : Array.isArray(value)
-        ? value.join(", ")
-        : String(value).trim();
+        ? value.map(valueText).join(", ")
+        : valueText(String(value));
   if (operator === getDefaultOperator(type)) return `${label}: ${text}`;
   return `${label} ${operatorLabels[operator]} ${text}`;
 }

package/src/core/grouping.ts

@@ -1,5 +1,6 @@
 import type { Row, RowData } from "@tanstack/react-table";
 import type { TMDataGridFeatures } from "../useTMDataGrid";
+import { formatValueText, type TMDataGridValueTextOptions } from "./valueText";
 
 /**
  * The data rows under a group row, at any depth.
@@ -29,14 +30,21 @@ const BLANK_GROUP_LABEL = "(Blank)";
  * Deliberately not the grouped column's own `cell` renderer: that renderer is
  * 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.
+ * `options` carries what the chrome knows of the column instead - its type,
+ * its option labels and the boolean labels.
  */
 export function formatGroupValue(
   value: unknown,
   blankLabel = BLANK_GROUP_LABEL,
+  options?: TMDataGridValueTextOptions,
 ): string {
-  if (value === null || value === undefined || value === "") {
+  if (
+    value === null ||
+    value === undefined ||
+    value === "" ||
+    (Array.isArray(value) && value.length === 0)
+  ) {
     return blankLabel;
   }
-  if (value instanceof Date) return value.toLocaleDateString();
-  return String(value);
+  return formatValueText(value, options);
 }

package/src/core/labels.ts

@@ -2,6 +2,7 @@ import {
   FILTER_OPERATOR_LABELS,
   type TMDataGridFilterOperator,
 } from "./filterOperators";
+import { BOOLEAN_LABELS_EN } from "./valueText";
 
 /**
  * Every user-facing string in the grid - menu items, panels, tooltips, the
@@ -55,7 +56,7 @@ export type TMDataGridLabels = {
   filterTo: string;
   /** `DgTriStateFilter`'s no-filter segment. */
   filterAll: string;
-  /** What a boolean column's `true` reads as - its filter choice and cell text. */
+  /** What a boolean `true` reads as - its filter choice, filter pill and group row. */
   booleanTrue: string;
   booleanFalse: string;
   addFilter: string;
@@ -225,8 +226,8 @@ export const TMDATAGRID_LABELS_EN: TMDataGridLabels = {
   filterFrom: "From",
   filterTo: "To",
   filterAll: "All",
-  booleanTrue: "Yes",
-  booleanFalse: "No",
+  booleanTrue: BOOLEAN_LABELS_EN.booleanTrue,
+  booleanFalse: BOOLEAN_LABELS_EN.booleanFalse,
   addFilter: "Add filter",
   clearAllFilters: "Clear all",
   closeFilters: "Close filters",