@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/dist/containers/data-grid/fill-series.js

@@ -0,0 +1,168 @@
+const isBackward = (direction) => direction === "up" || direction === "left";
+function handleExtent(base, to, limits) {
+  const down = Math.min(to.r, limits.maxR) - base.r1;
+  const right = Math.min(to.c, limits.maxC) - base.c1;
+  const up = base.r0 - Math.max(to.r, limits.minR ?? 0);
+  const left = base.c0 - Math.max(to.c, limits.minC ?? 0);
+  const best = Math.max(down, right, up, left);
+  if (best <= 0) return null;
+  if (down === best) return { direction: "down", bounds: { ...base, r1: base.r1 + down } };
+  if (right === best) return { direction: "right", bounds: { ...base, c1: base.c1 + right } };
+  if (up === best) return { direction: "up", bounds: { ...base, r0: base.r0 - up } };
+  return { direction: "left", bounds: { ...base, c0: base.c0 - left } };
+}
+function edgeScrollStep(pos, lo, hi, zone = 40, max = 22) {
+  const ratio = (limit, sign) => sign * Math.min(1, Math.abs(limit) / zone) * max;
+  if (pos < lo + zone) return Math.round(ratio(lo + zone - pos, -1));
+  if (pos > hi - zone) return Math.round(ratio(pos - (hi - zone), 1));
+  return 0;
+}
+function fillLanes(base, extent) {
+  const lanes = [];
+  const vertical = extent.direction === "down" || extent.direction === "up";
+  const outer = vertical ? [base.c0, base.c1] : [base.r0, base.r1];
+  for (let lane = outer[0]; lane <= outer[1]; lane += 1) {
+    const cell = (index) => vertical ? { r: index, c: lane } : { r: lane, c: index };
+    const [from, to] = vertical ? [base.r0, base.r1] : [base.c0, base.c1];
+    const source = [];
+    const targets = [];
+    for (let i = from; i <= to; i += 1) source.push(cell(i));
+    if (extent.direction === "down" || extent.direction === "right") {
+      const end = vertical ? extent.bounds.r1 : extent.bounds.c1;
+      for (let i = to + 1; i <= end; i += 1) targets.push(cell(i));
+    } else {
+      const end = vertical ? extent.bounds.r0 : extent.bounds.c0;
+      for (let i = from - 1; i >= end; i -= 1) targets.push(cell(i));
+    }
+    lanes.push({ source, targets });
+  }
+  return lanes;
+}
+const isBlank = (value) => value === null || value === void 0 || value === "";
+const isFormula = (value) => typeof value === "string" && value.trimStart().startsWith("=");
+const near = (a, b) => Math.abs(a - b) <= 1e-9 * Math.max(1, Math.abs(a), Math.abs(b));
+function constantStep(values) {
+  if (values.length < 2) return null;
+  const step = values[1] - values[0];
+  for (let i = 2; i < values.length; i += 1) {
+    if (!near(values[i] - values[i - 1], step)) return null;
+  }
+  return step;
+}
+const DAY = 864e5;
+const utcDay = (date) => Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
+function addMonths(date, months, endOfMonth = false) {
+  const total = date.getFullYear() * 12 + date.getMonth() + months;
+  const year = Math.floor(total / 12);
+  const month = (total % 12 + 12) % 12;
+  const lastDay = new Date(year, month + 1, 0).getDate();
+  const next = new Date(date.getTime());
+  next.setFullYear(year, month, endOfMonth ? lastDay : Math.min(date.getDate(), lastDay));
+  return next;
+}
+function addDays(date, days) {
+  const next = new Date(date.getTime());
+  next.setDate(next.getDate() + days);
+  return next;
+}
+function dateStep(dates, mode = "auto") {
+  if (dates.length < 2) return null;
+  const first = dates[0];
+  const second = dates[1];
+  const monthly = (b, a) => (b.getFullYear() - a.getFullYear()) * 12 + b.getMonth() - a.getMonth();
+  const months = monthly(second, first);
+  const sameDay = dates.every((date) => date.getDate() === first.getDate());
+  const endOfMonth = dates.every(
+    (date) => date.getDate() === new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()
+  );
+  if (mode === "month") {
+    const steady2 = months !== 0 && dates.every((date, i) => i === 0 || monthly(date, dates[i - 1]) === months);
+    return steady2 ? { unit: "months", amount: months, endOfMonth: endOfMonth && !sameDay } : null;
+  }
+  if (mode === "auto" && months !== 0 && (sameDay || endOfMonth)) {
+    const steady2 = dates.every(
+      (date, i) => i === 0 || monthly(date, dates[i - 1]) === months
+    );
+    return steady2 ? { unit: "months", amount: months, endOfMonth: endOfMonth && !sameDay } : null;
+  }
+  const days = Math.round((utcDay(second) - utcDay(first)) / DAY);
+  const steady = dates.every(
+    (date, i) => i === 0 || Math.round((utcDay(date) - utcDay(dates[i - 1])) / DAY) === days
+  );
+  return steady && days !== 0 ? { unit: "days", amount: days } : null;
+}
+const TRAILING_NUMBER = /^(.*?)(\d+)$/s;
+function parseCounted(text) {
+  const match = TRAILING_NUMBER.exec(text);
+  if (!match) return null;
+  const digits = match[2];
+  return {
+    prefix: match[1],
+    value: Number(digits),
+    width: digits.length,
+    padded: digits.length > 1 && digits.startsWith("0")
+  };
+}
+function formatCounted(prefix, value, width, padded) {
+  const digits = String(Math.abs(value));
+  return `${prefix}${value < 0 ? "-" : ""}${padded ? digits.padStart(width, "0") : digits}`;
+}
+const copyFill = (count, length, backward = false) => Array.from({ length: count }, (_unused, i) => ({
+  from: backward ? length - 1 - i % length : i % length
+}));
+function seriesFill(source, count, options = {}) {
+  if (count <= 0 || source.length === 0) return [];
+  const backward = options.backward === true;
+  if (source.some(isFormula) || source.some(isBlank)) {
+    return copyFill(count, source.length, backward);
+  }
+  if (backward) {
+    const last = source.length - 1;
+    const reversed = source.slice().reverse();
+    return seriesFill(reversed, count, { ...options, backward: false, loneStep: -1 }).map(
+      (item) => "from" in item ? { from: last - item.from } : item
+    );
+  }
+  if (source.every((value) => typeof value === "number")) {
+    const step = constantStep(source);
+    if (step === null) return copyFill(count, source.length);
+    const last = source[source.length - 1];
+    return Array.from({ length: count }, (_unused, i) => ({ value: last + step * (i + 1) }));
+  }
+  if (source.every((value) => value instanceof Date)) {
+    const step = dateStep(source, options.dateStep);
+    if (!step) return copyFill(count, source.length);
+    const last = source[source.length - 1];
+    return Array.from({ length: count }, (_unused, i) => ({
+      value: step.unit === "months" ? addMonths(last, step.amount * (i + 1), step.endOfMonth) : addDays(last, step.amount * (i + 1))
+    }));
+  }
+  if (source.every((value) => typeof value === "string")) {
+    const counted = source.map(parseCounted);
+    const first = counted[0];
+    if (first && counted.every((item) => item !== null && item.prefix === first.prefix)) {
+      const items = counted;
+      const step = items.length === 1 ? options.loneStep ?? 1 : constantStep(items.map((item) => item.value));
+      if (step !== null) {
+        const last = items[items.length - 1];
+        const padded = items.some((item) => item.padded);
+        const width = Math.max(...items.map((item) => item.width));
+        return Array.from({ length: count }, (_unused, i) => ({
+          value: formatCounted(first.prefix, last.value + step * (i + 1), width, padded)
+        }));
+      }
+    }
+  }
+  return copyFill(count, source.length);
+}
+export {
+  addDays,
+  addMonths,
+  copyFill,
+  dateStep,
+  edgeScrollStep,
+  fillLanes,
+  handleExtent,
+  isBackward,
+  seriesFill
+};

package/dist/containers/data-grid/filter-builder-editor.d.ts

@@ -0,0 +1,18 @@
+import { type FilterGroup } from "./filter-builder.js";
+import { type DataGridLabels } from "./labels.js";
+import type { DataGridColumn } from "./types.js";
+export interface FilterBuilderProps<T> {
+    columns: readonly DataGridColumn<T>[];
+    value: FilterGroup;
+    onChange: (next: FilterGroup) => void;
+    /** Values offered for select-like columns; a text box is used when absent or empty. */
+    valuesOf?: (columnId: string) => string[];
+    labels?: Partial<DataGridLabels>;
+    className?: string;
+}
+/**
+ * Builds a filter of nested AND / OR groups of conditions (column, operator, value). It is a
+ * controlled editor over a `FilterGroup`; `applyAdvancedFilter` evaluates it. It adapts to the
+ * width of its container: fields stack when it is narrow.
+ */
+export declare function FilterBuilder<T>({ columns, value, onChange, valuesOf, labels: labelsProp, className, }: FilterBuilderProps<T>): import("react").JSX.Element;

package/dist/containers/data-grid/filter-builder-editor.js

@@ -0,0 +1,207 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Plus, Trash2 } from "lucide-react";
+import { cn } from "../../utils/cn.js";
+import {
+  addChild,
+  emptyGroup,
+  newCondition,
+  operatorNeedsValue,
+  operatorsFor,
+  removeNode,
+  updateNode,
+  valueKindOf
+} from "./filter-builder.js";
+import { DEFAULT_DATA_GRID_LABELS } from "./labels.js";
+import { filterKindOf } from "./model.js";
+const fieldClass = "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control px-2 text-[13px] text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none";
+const buttonClass = "inline-flex h-control-sm shrink-0 items-center gap-1.5 whitespace-nowrap rounded-control border-divider bg-surface-control px-2.5 font-[600] text-[12.5px] text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5";
+function FilterBuilder({
+  columns,
+  value,
+  onChange,
+  valuesOf,
+  labels: labelsProp,
+  className
+}) {
+  const labels = { ...DEFAULT_DATA_GRID_LABELS, ...labelsProp };
+  const filterable = columns.filter((column) => column.filterable !== false);
+  return /* @__PURE__ */ jsx("div", { className: cn("@container/fb min-w-0", className), children: /* @__PURE__ */ jsx(
+    GroupEditor,
+    {
+      group: value,
+      root: value,
+      isRoot: true,
+      columns: filterable,
+      labels,
+      valuesOf,
+      onChange
+    }
+  ) });
+}
+function GroupEditor({
+  group,
+  isRoot,
+  ...context
+}) {
+  const { root, columns, labels, onChange } = context;
+  const first = columns[0];
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className: cn(
+        "m-0 grid min-w-0 gap-2 border-0 p-0",
+        !isRoot && "border-line border-l-2 pl-2.5 @md/fb:pl-3"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("legend", { className: "sr-only", children: labels.filterGroupLabel }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("fieldset", { className: "flex h-control-sm items-center rounded-control border-divider bg-surface-control p-0.5", children: [
+            /* @__PURE__ */ jsx("legend", { className: "sr-only", children: labels.filterGroupLabel }),
+            ["and", "or"].map((logic) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": group.logic === logic,
+                onClick: () => onChange(updateNode(root, group.id, (n) => ({ ...n, logic }))),
+                className: "h-full rounded-xs px-2 font-[600] text-[12px] text-ink-3 hover:text-ink aria-pressed:bg-accent-soft aria-pressed:text-accent-ink",
+                children: logic === "and" ? labels.matchAll : labels.matchAny
+              },
+              logic
+            ))
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+          first ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: buttonClass,
+              onClick: () => onChange(addChild(root, group.id, newCondition(first))),
+              children: [
+                /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" }),
+                labels.addCondition
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: buttonClass,
+              onClick: () => onChange(addChild(root, group.id, emptyGroup("or"))),
+              children: [
+                /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" }),
+                labels.addGroup
+              ]
+            }
+          ),
+          isRoot ? null : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(buttonClass, "px-2"),
+              "aria-label": labels.removeNode,
+              title: labels.removeNode,
+              onClick: () => onChange(removeNode(root, group.id)),
+              children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true" })
+            }
+          )
+        ] }),
+        group.children.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-1 text-[12.5px] text-ink-3", children: labels.noConditions }) : /* @__PURE__ */ jsx("ul", { className: "grid gap-2", children: group.children.map((child, index) => /* @__PURE__ */ jsxs("li", { className: "grid gap-1", children: [
+          index > 0 ? /* @__PURE__ */ jsx("span", { className: "font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em]", children: group.logic === "and" ? labels.filterAnd : labels.filterOr }) : null,
+          child.type === "group" ? /* @__PURE__ */ jsx(GroupEditor, { group: child, ...context }) : /* @__PURE__ */ jsx(ConditionEditor, { condition: child, ...context })
+        ] }, child.id)) })
+      ]
+    }
+  );
+}
+function ConditionEditor({
+  condition,
+  root,
+  columns,
+  labels,
+  valuesOf,
+  onChange
+}) {
+  const column = columns.find((c) => c.id === condition.columnId) ?? columns[0];
+  if (!column) return null;
+  const operators = operatorsFor(column);
+  const kind = valueKindOf(column);
+  const options = ["select", "set"].includes(filterKindOf(column)) ? valuesOf?.(column.id) ?? [] : [];
+  const patch = (next) => onChange(updateNode(root, condition.id, (node) => ({ ...node, ...next })));
+  const needsValue = operatorNeedsValue(condition.operator);
+  const valueField = (key, label) => options.length > 0 ? /* @__PURE__ */ jsxs(
+    "select",
+    {
+      "aria-label": label,
+      value: condition[key] ?? "",
+      onChange: (event) => patch({ [key]: event.target.value }),
+      className: fieldClass,
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "" }),
+        options.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option }, option))
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: kind === "date" ? "date" : "text",
+      inputMode: kind === "number" ? "decimal" : void 0,
+      "aria-label": label,
+      placeholder: label,
+      value: condition[key] ?? "",
+      onChange: (event) => patch({ [key]: event.target.value }),
+      className: fieldClass
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5 @md/fb:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1.2fr)_auto] @md/fb:items-center", children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        "aria-label": labels.filterColumn,
+        value: column.id,
+        onChange: (event) => {
+          const next = columns.find((c) => c.id === event.target.value);
+          if (next) {
+            patch({
+              columnId: next.id,
+              operator: operatorsFor(next)[0] ?? "contains",
+              value: "",
+              value2: ""
+            });
+          }
+        },
+        className: fieldClass,
+        children: columns.map((c) => /* @__PURE__ */ jsx("option", { value: c.id, children: c.header }, c.id))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        "aria-label": labels.filterOperator,
+        value: condition.operator,
+        onChange: (event) => patch({ operator: event.target.value }),
+        className: fieldClass,
+        children: operators.map((operator) => /* @__PURE__ */ jsx("option", { value: operator, children: labels.operators[operator] }, operator))
+      }
+    ),
+    needsValue ? /* @__PURE__ */ jsxs("div", { className: cn("grid gap-1.5", condition.operator === "between" && "grid-cols-2"), children: [
+      valueField("value", labels.filterValue),
+      condition.operator === "between" ? valueField("value2", labels.filterValueTo) : null
+    ] }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "hidden @md/fb:block" }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(buttonClass, "justify-self-start px-2 @md/fb:justify-self-auto"),
+        "aria-label": labels.removeNode,
+        title: labels.removeNode,
+        onClick: () => onChange(removeNode(root, condition.id)),
+        children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true" })
+      }
+    )
+  ] });
+}
+export {
+  FilterBuilder
+};

package/dist/containers/data-grid/filter-builder.d.ts

@@ -0,0 +1,47 @@
+import type { DataGridColumn } from "./types.js";
+export type FilterOperator = "contains" | "notContains" | "equals" | "notEquals" | "startsWith" | "endsWith" | "gt" | "gte" | "lt" | "lte" | "between" | "before" | "after" | "isEmpty" | "isNotEmpty";
+export type FilterLogic = "and" | "or";
+export interface FilterCondition {
+    type: "condition";
+    id: string;
+    columnId: string;
+    operator: FilterOperator;
+    /** Text, number or `yyyy-mm-dd` date, as typed. */
+    value: string;
+    /** Upper end of `between`. */
+    value2?: string;
+}
+export interface FilterGroup {
+    type: "group";
+    id: string;
+    logic: FilterLogic;
+    children: FilterNode[];
+}
+export type FilterNode = FilterCondition | FilterGroup;
+export type ValueKind = "text" | "number" | "date";
+export declare function valueKindOf<T>(column: DataGridColumn<T>): ValueKind;
+export declare function operatorsFor<T>(column: DataGridColumn<T>): FilterOperator[];
+export declare function operatorNeedsValue(operator: FilterOperator): boolean;
+export declare function newFilterId(prefix?: string): string;
+export declare function emptyGroup(logic?: FilterLogic, id?: string): FilterGroup;
+export declare function newCondition<T>(column: DataGridColumn<T>): FilterCondition;
+/** A condition counts once it has what its operator needs. */
+export declare function isConditionActive(condition: FilterCondition): boolean;
+export declare function evaluateCondition<T>(row: T, condition: FilterCondition, columns: readonly DataGridColumn<T>[]): boolean;
+/** Empty groups and incomplete conditions are ignored; a group with no active child matches all. */
+export declare function isNodeActive(node: FilterNode): boolean;
+export declare function evaluateNode<T>(row: T, node: FilterNode, columns: readonly DataGridColumn<T>[]): boolean;
+export declare function applyAdvancedFilter<T>(rows: readonly T[], columns: readonly DataGridColumn<T>[], node: FilterGroup | undefined): T[];
+export declare function countConditions(node: FilterNode): number;
+/** Replaces the node with `id` (immutably). */
+export declare function updateNode(root: FilterGroup, id: string, fn: (node: FilterNode) => FilterNode): FilterGroup;
+/** Adds `child` at the end of the group `groupId`. */
+export declare function addChild(root: FilterGroup, groupId: string, child: FilterNode): FilterGroup;
+/** Removes the node with `id`; the root itself stays. */
+export declare function removeNode(root: FilterGroup, id: string): FilterGroup;
+/** Readable summary, for example `(Barbero es Luis Y Total > 30)`. */
+export declare function describeFilter<T>(node: FilterNode, columns: readonly DataGridColumn<T>[], words: {
+    and: string;
+    or: string;
+    operators: Record<FilterOperator, string>;
+}): string;

package/dist/containers/data-grid/filter-builder.js

@@ -0,0 +1,227 @@
+import {
+  cellToNumber,
+  cellToTime,
+  filterKindOf,
+  formatCellValue,
+  getCellValue,
+  isoDayBounds,
+  normalizeText
+} from "./model.js";
+const TEXT_OPERATORS = [
+  "contains",
+  "notContains",
+  "equals",
+  "notEquals",
+  "startsWith",
+  "endsWith",
+  "isEmpty",
+  "isNotEmpty"
+];
+const NUMBER_OPERATORS = [
+  "equals",
+  "notEquals",
+  "gt",
+  "gte",
+  "lt",
+  "lte",
+  "between",
+  "isEmpty",
+  "isNotEmpty"
+];
+const DATE_OPERATORS = [
+  "equals",
+  "before",
+  "after",
+  "between",
+  "isEmpty",
+  "isNotEmpty"
+];
+const SELECT_OPERATORS = ["equals", "notEquals", "isEmpty", "isNotEmpty"];
+function valueKindOf(column) {
+  const kind = filterKindOf(column);
+  if (kind === "range") return "number";
+  if (kind === "dateRange") return "date";
+  return "text";
+}
+function operatorsFor(column) {
+  const kind = filterKindOf(column);
+  if (kind === "range") return NUMBER_OPERATORS;
+  if (kind === "dateRange") return DATE_OPERATORS;
+  if (kind === "select" || kind === "set") return SELECT_OPERATORS;
+  return TEXT_OPERATORS;
+}
+function operatorNeedsValue(operator) {
+  return operator !== "isEmpty" && operator !== "isNotEmpty";
+}
+let counter = 0;
+function newFilterId(prefix = "f") {
+  counter += 1;
+  return `${prefix}${counter}`;
+}
+function emptyGroup(logic = "and", id = newFilterId("g")) {
+  return { type: "group", id, logic, children: [] };
+}
+function newCondition(column) {
+  return {
+    type: "condition",
+    id: newFilterId("c"),
+    columnId: column.id,
+    operator: operatorsFor(column)[0] ?? "contains",
+    value: ""
+  };
+}
+function isEmptyValue(value) {
+  return value === null || value === void 0 || value === "";
+}
+function compare(a, b) {
+  return a - b;
+}
+function isConditionActive(condition) {
+  if (!operatorNeedsValue(condition.operator)) return true;
+  if (condition.value.trim() === "") return false;
+  if (condition.operator === "between") return (condition.value2 ?? "").trim() !== "";
+  return true;
+}
+function evaluateCondition(row, condition, columns) {
+  const column = columns.find((c) => c.id === condition.columnId);
+  if (!column) return true;
+  const cell = getCellValue(row, column);
+  const { operator } = condition;
+  if (operator === "isEmpty") return isEmptyValue(cell);
+  if (operator === "isNotEmpty") return !isEmptyValue(cell);
+  const kind = valueKindOf(column);
+  if (kind === "number") {
+    const left = cellToNumber(cell);
+    const right = Number.parseFloat(condition.value.replace(",", "."));
+    if (left === null || !Number.isFinite(right)) return false;
+    const upper = Number.parseFloat((condition.value2 ?? "").replace(",", "."));
+    switch (operator) {
+      case "equals":
+        return compare(left, right) === 0;
+      case "notEquals":
+        return compare(left, right) !== 0;
+      case "gt":
+        return left > right;
+      case "gte":
+        return left >= right;
+      case "lt":
+        return left < right;
+      case "lte":
+        return left <= right;
+      case "between":
+        return Number.isFinite(upper) && left >= Math.min(right, upper) && left <= Math.max(right, upper);
+      default:
+        return false;
+    }
+  }
+  if (kind === "date") {
+    const time = cellToTime(cell);
+    const start = isoDayBounds(condition.value, false);
+    const end = isoDayBounds(condition.value, true);
+    if (time === null || start === null || end === null) return false;
+    switch (operator) {
+      case "equals":
+        return time >= start && time <= end;
+      case "before":
+        return time < start;
+      case "after":
+        return time > end;
+      case "between": {
+        const upper = isoDayBounds(condition.value2 ?? "", true);
+        return upper !== null && time >= start && time <= upper;
+      }
+      default:
+        return false;
+    }
+  }
+  const text = normalizeText(formatCellValue(cell, column) || String(cell ?? ""));
+  const needle = normalizeText(condition.value.trim());
+  switch (operator) {
+    case "contains":
+      return text.includes(needle);
+    case "notContains":
+      return !text.includes(needle);
+    case "equals":
+      return text === needle;
+    case "notEquals":
+      return text !== needle;
+    case "startsWith":
+      return text.startsWith(needle);
+    case "endsWith":
+      return text.endsWith(needle);
+    default:
+      return false;
+  }
+}
+function isNodeActive(node) {
+  if (node.type === "condition") return isConditionActive(node);
+  return node.children.some(isNodeActive);
+}
+function evaluateNode(row, node, columns) {
+  if (node.type === "condition") {
+    return isConditionActive(node) ? evaluateCondition(row, node, columns) : true;
+  }
+  const active = node.children.filter(isNodeActive);
+  if (active.length === 0) return true;
+  return node.logic === "and" ? active.every((child) => evaluateNode(row, child, columns)) : active.some((child) => evaluateNode(row, child, columns));
+}
+function applyAdvancedFilter(rows, columns, node) {
+  if (!node || !isNodeActive(node)) return [...rows];
+  return rows.filter((row) => evaluateNode(row, node, columns));
+}
+function countConditions(node) {
+  if (node.type === "condition") return isConditionActive(node) ? 1 : 0;
+  return node.children.reduce((sum, child) => sum + countConditions(child), 0);
+}
+function mapNode(node, id, fn) {
+  if (node.id === id) return fn(node);
+  if (node.type === "condition") return node;
+  return { ...node, children: node.children.map((child) => mapNode(child, id, fn)) };
+}
+function updateNode(root, id, fn) {
+  return mapNode(root, id, fn);
+}
+function addChild(root, groupId, child) {
+  return updateNode(
+    root,
+    groupId,
+    (node) => node.type === "group" ? { ...node, children: [...node.children, child] } : node
+  );
+}
+function removeNode(root, id) {
+  const strip = (group) => ({
+    ...group,
+    children: group.children.filter((child) => child.id !== id).map((child) => child.type === "group" ? strip(child) : child)
+  });
+  return strip(root);
+}
+function describeFilter(node, columns, words) {
+  if (node.type === "condition") {
+    if (!isConditionActive(node)) return "";
+    const header = columns.find((c) => c.id === node.columnId)?.header ?? node.columnId;
+    const value = operatorNeedsValue(node.operator) ? node.operator === "between" ? ` ${node.value} \u2013 ${node.value2 ?? ""}` : ` ${node.value}` : "";
+    return `${header} ${words.operators[node.operator]}${value}`;
+  }
+  const parts = node.children.map((child) => describeFilter(child, columns, words)).filter(Boolean);
+  if (parts.length === 0) return "";
+  const text = parts.join(` ${node.logic === "and" ? words.and : words.or} `);
+  return parts.length > 1 ? `(${text})` : text;
+}
+export {
+  addChild,
+  applyAdvancedFilter,
+  countConditions,
+  describeFilter,
+  emptyGroup,
+  evaluateCondition,
+  evaluateNode,
+  isConditionActive,
+  isNodeActive,
+  newCondition,
+  newFilterId,
+  operatorNeedsValue,
+  operatorsFor,
+  removeNode,
+  updateNode,
+  valueKindOf
+};

package/dist/containers/data-grid/formula-bar.d.ts

@@ -0,0 +1,18 @@
+export interface FormulaBarProps {
+    /** Address of the focused cell (`C4`), empty when no data cell has focus. */
+    address: string;
+    /** Raw content of the cell: the formula text for formula cells. */
+    value: string;
+    editable: boolean;
+    /** Message of the last refused commit. */
+    error?: string;
+    labels: {
+        bar: string;
+        cell: string;
+        empty: string;
+    };
+    onCommit: (text: string) => void;
+    onDiscard: () => void;
+}
+/** Shows (and edits) the raw content of the focused cell, so formulas stay readable. */
+export declare function FormulaBar({ address, value, editable, error, labels, onCommit, onDiscard, }: FormulaBarProps): import("react").JSX.Element;