@box-kite/react 2.2.5 → 2.2.6

package/components/calendar.mjs

@@ -0,0 +1,483 @@
+"use client";
+import { d as e } from "../platform.mjs";
+import t from "../box.mjs";
+import { a as n, i as r } from "../behavior.mjs";
+import { t as i } from "../identity.mjs";
+import { C as a, G as o, Q as s, S as c, U as l, V as ee, W as u, Z as te, f as d, q as f, t as p, w as m, x as ne } from "../dates.mjs";
+import { N as re, x as ie } from "../date-math.mjs";
+import { Path as ae, Svg as oe } from "./svg.mjs";
+import { n as se } from "../date-environment.mjs";
+import ce from "./visuallyHidden.mjs";
+import { useEffect as le, useMemo as ue, useRef as de, useState as h } from "react";
+import { Fragment as fe, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/utils/date/calendarModel.ts
+function v(e) {
+	let t = d(e);
+	return t && t.kind === "date" ? t.fields : null;
+}
+function y(e) {
+	return m({
+		...e,
+		...ee
+	});
+}
+function pe(e, t, n) {
+	let r = {
+		year: e,
+		month: t,
+		day: 1
+	}, i = l(r, -s(o(r) - n, 7));
+	return Array.from({ length: 6 }, (e, r) => {
+		let a = Array.from({ length: 7 }, (e, n) => {
+			let a = l(i, r * 7 + n);
+			return {
+				date: y(a),
+				day: a.day,
+				outside: a.month !== t
+			};
+		}), o = l(i, r * 7 + s(4 - n, 7));
+		return {
+			week: te(o).week,
+			days: a
+		};
+	});
+}
+function me(e, t, n, r) {
+	let i = r.rtl ? "ArrowLeft" : "ArrowRight", a = r.rtl ? "ArrowRight" : "ArrowLeft";
+	switch (t) {
+		case i: return l(e, 1);
+		case a: return l(e, -1);
+		case "ArrowDown": return l(e, 7);
+		case "ArrowUp": return l(e, -7);
+		case "Home": return l(e, -s(o(e) - r.firstDay, 7));
+		case "End": return l(e, 6 - s(o(e) - r.firstDay, 7));
+		case "PageUp": return u(e, n ? -12 : -1);
+		case "PageDown": return u(e, n ? 12 : 1);
+		default: return null;
+	}
+}
+function he(e, t) {
+	return t.min != null && f(e) < f(t.min) || t.max != null && f(e) > f(t.max);
+}
+function b(e, t) {
+	return t.min && f(e) < f(t.min) ? t.min : t.max && f(e) > f(t.max) ? t.max : e;
+}
+function x(e, t) {
+	return f(e) <= f(t) ? [e, t] : [t, e];
+}
+function ge(e, t, n) {
+	if (!t || !n) return t && f(e) === f(t) ? "start" : null;
+	let [r, i] = x(t, n), a = f(e);
+	return a === f(r) ? "start" : a === f(i) ? "end" : a > f(r) && a < f(i) ? "middle" : null;
+}
+function _e(e, t, n) {
+	let [r, i] = x(e, t);
+	for (let e = f(r); e <= f(i); e++) if (n(y(l({
+		year: 1970,
+		month: 1,
+		day: 1
+	}, e)))) return !0;
+	return !1;
+}
+//#endregion
+//#region src/components/calendar.tsx
+var S = "data-date", C = 12;
+function w(e, t) {
+	return e !== null && t !== null && f(e) === f(t);
+}
+function T(o) {
+	let { mode: s = "single", value: l, defaultValue: ee = null, onValueChange: te, min: d, max: f, isDateUnavailable: m, locale: ae, zone: oe, firstDayOfWeek: T, months: D = 1, weekNumbers: k = !1, showOutsideDays: be = !0, focusedDate: xe, defaultFocusedDate: Se, onFocusedDateChange: Ce, disabled: A = !1, readOnly: we = !1, autoFocus: Te = !1, label: j, previousLabel: Ee = "Previous", nextLabel: De = "Next", props: Oe, ...ke } = o, M = se({
+		locale: ae,
+		zone: oe
+	}), { locale: N } = M, P = v(re(M.zone)), F = T ?? c(N).firstDay, I = (e) => ve(N).format(e), L = s === "range", R = ue(() => ({
+		min: v(d),
+		max: v(f)
+	}), [d, f]), [z, Ae] = r({
+		value: l,
+		defaultValue: ee,
+		onChange: (e, t) => {
+			te?.(e, L ? t : {
+				...t,
+				...ie(e, M.zone)
+			});
+		}
+	}), je = L ? null : v(z), B = L && z ? z : null, [V, H] = h(null), [Me, U] = h(null), Ne = y(b(v(Se) ?? je ?? v(B?.start) ?? P, R)), [Pe, W] = r({
+		value: xe,
+		defaultValue: Ne,
+		onChange: Ce
+	}), G = v(Pe) ?? P, [K, Fe] = h("day"), [q, Ie] = h(() => E(G)), J = q;
+	(E(G) < q || E(G) > q + D - 1) && (J = E(G) < q ? E(G) : E(G) - D + 1, Ie(J));
+	let Le = de(null), Y = de(Te), Re = i("calendar");
+	le(() => {
+		Y.current && (Y.current = !1, Le.current?.querySelector(`[${S}="${Pe}"]`)?.focus());
+	});
+	let ze = (e) => he(e, R), Be = (e) => m?.(y(e)) ?? !1, X = (e, t, n) => {
+		Y.current = n, W(y(b(e, R)), { reason: t });
+	}, Ve = (e, t) => {
+		if (A || we || ze(e) || Be(e)) return;
+		if (X(e, "keyboard", !1), !L) {
+			Ae(y(e), {
+				reason: "select",
+				event: t
+			});
+			return;
+		}
+		if (!V) {
+			H(e), U(e);
+			return;
+		}
+		let [n, r] = x(V, e);
+		H(null), U(null), !(m && _e(n, r, m)) && Ae({
+			start: y(n),
+			end: y(r)
+		}, {
+			reason: "select",
+			event: t
+		});
+	}, He = n((t) => {
+		if (A) return;
+		if (t.key === "Enter" || t.key === " ") {
+			t.preventDefault(), Ve(G, t);
+			return;
+		}
+		if (t.key === "Escape" && V) {
+			t.preventDefault(), t.stopPropagation(), H(null), U(null);
+			return;
+		}
+		let n = me(G, t.key, t.shiftKey, {
+			rtl: e(t.currentTarget),
+			firstDay: F
+		});
+		n && (t.preventDefault(), X(n, "keyboard", !0), V && U(b(n, R)));
+	}), Ue = (e) => {
+		K === "day" ? (Ie(J + e * D), X(u(G, e * D), "navigate", !1)) : X(u(G, e * (K === "month" ? 12 : 144)), "navigate", !1);
+	}, Z = Array.from({ length: D }, (e, t) => ({
+		year: Math.floor((J + t) / 12),
+		month: (J + t) % 12 + 1,
+		day: 1
+	})), Q = `${Re}-title`, We = K === "day" && D > 1, Ge = K === "day" ? Z.map((e) => p(y(e), {
+		locale: N,
+		month: "long",
+		year: "numeric"
+	})).join(" – ") : K === "month" ? I(G.year) : `${I(O(G.year))} – ${I(O(G.year) + C - 1)}`, Ke = a(N, "short"), qe = Ke.some((e) => e.length > 4) ? a(N, "narrow") : Ke, Je = a(N, "long"), Ye = Array.from({ length: 7 }, (e, t) => (F + t) % 7), Xe = V ? Me ?? V : null, Ze = V ?? v(B?.start), $ = V ? Xe : v(B?.end), Qe = (e) => {
+		let n = v(e.date), r = ze(n), i = Be(n), a = L ? ge(n, Ze, $) : null, o = L ? a !== null : w(n, je), s = w(n, P), c = w(n, G);
+		return e.outside && (!be || D > 1) ? /* @__PURE__ */ g(t, {
+			tag: "td",
+			component: "calendar.cell",
+			display: "table-cell",
+			props: { role: "gridcell" }
+		}, e.date) : /* @__PURE__ */ g(t, {
+			tag: "td",
+			component: "calendar.cell",
+			display: "table-cell",
+			p: 0,
+			py: .5,
+			variant: {
+				rangeStart: a === "start" && $ !== null && !w(Ze, $),
+				rangeEnd: a === "end",
+				rangeMiddle: a === "middle"
+			},
+			props: {
+				role: "gridcell",
+				"aria-selected": o || void 0,
+				"aria-disabled": r || A || void 0,
+				"aria-current": s ? "date" : void 0
+			},
+			children: /* @__PURE__ */ g(t, {
+				component: "calendar.day",
+				display: "flex",
+				ai: "center",
+				jc: "center",
+				width: 9,
+				height: 9,
+				mx: "auto",
+				borderRadius: 999,
+				fontSize: 14,
+				css: { fontVariantNumeric: "tabular-nums" },
+				variant: {
+					today: s,
+					selected: o && a !== "middle",
+					outside: e.outside,
+					blocked: r || A,
+					unavailable: i
+				},
+				props: {
+					[S]: e.date,
+					tabIndex: c && !r && !A ? 0 : -1,
+					"aria-label": p(e.date, {
+						locale: N,
+						dateStyle: "full"
+					}),
+					onClick: (e) => Ve(n, e),
+					onPointerEnter: () => V && U(n)
+				},
+				children: I(e.day)
+			})
+		}, e.date);
+	}, $e = (t, n, r, i, a, o) => {
+		let s = e(t.currentTarget), c = {
+			ArrowUp: -r,
+			ArrowDown: r,
+			[s ? "ArrowRight" : "ArrowLeft"]: -1,
+			[s ? "ArrowLeft" : "ArrowRight"]: 1
+		};
+		t.key === "Enter" || t.key === " " ? (t.preventDefault(), i(o)) : t.key in c && (t.preventDefault(), a(Math.max(0, Math.min(n - 1, o + c[t.key])), t.currentTarget.parentElement));
+	}, et = () => {
+		let e = ne(N, "short"), n = O(G.year), r = K === "month" ? e.map((e, t) => ({
+			label: e,
+			active: t + 1 === G.month,
+			current: P.year === G.year && P.month === t + 1
+		})) : Array.from({ length: C }, (e, t) => ({
+			label: I(n + t),
+			active: n + t === G.year,
+			current: P.year === n + t
+		})), i = (e) => K === "month" ? {
+			...G,
+			month: e + 1,
+			day: 1
+		} : {
+			...G,
+			year: n + e,
+			day: 1
+		}, a = (e) => {
+			let t = i(e);
+			Y.current = !0, W(y(b({
+				...t,
+				day: Math.min(G.day, 28)
+			}, R)), { reason: "navigate" }), Fe(K === "year" ? "month" : "day");
+		}, o = (e, t) => {
+			let n = i(e);
+			W(y({
+				...n,
+				day: Math.min(G.day, 28)
+			}), { reason: "keyboard" }), t?.querySelector(`[data-zoom="${e}"]`)?.focus();
+		};
+		return /* @__PURE__ */ g(t, {
+			display: "grid",
+			gridTemplateColumns: 3,
+			gap: 1,
+			props: {
+				role: "group",
+				"aria-labelledby": Q
+			},
+			children: r.map((e, n) => /* @__PURE__ */ g(t, {
+				tag: "button",
+				component: "calendar.zoomItem",
+				variant: {
+					selected: e.active,
+					today: e.current
+				},
+				py: 2,
+				borderRadius: 2,
+				disabled: A,
+				props: {
+					type: "button",
+					"data-zoom": n,
+					tabIndex: e.active ? 0 : -1,
+					"aria-pressed": e.active,
+					onClick: () => a(n),
+					onKeyDown: (e) => $e(e, r.length, 3, a, o, n)
+				},
+				children: e.label
+			}, e.label))
+		});
+	}, tt = (e, n) => {
+		let r = pe(e.year, e.month, F), i = p(y(e), {
+			locale: N,
+			month: "long",
+			year: "numeric"
+		});
+		return /* @__PURE__ */ _(t, {
+			tag: "table",
+			css: {
+				borderCollapse: "collapse",
+				tableLayout: "fixed"
+			},
+			props: {
+				role: "grid",
+				"aria-label": D > 1 ? i : void 0,
+				"aria-labelledby": D > 1 ? void 0 : Q,
+				"aria-readonly": we || void 0,
+				onKeyDown: He
+			},
+			children: [/* @__PURE__ */ g(t, {
+				tag: "thead",
+				display: "table-header-group",
+				children: /* @__PURE__ */ _(t, {
+					tag: "tr",
+					display: "table-row",
+					children: [k && /* @__PURE__ */ g(t, {
+						tag: "th",
+						display: "table-cell",
+						component: "calendar.weekday",
+						props: { "aria-hidden": !0 }
+					}), Ye.map((e) => /* @__PURE__ */ g(t, {
+						tag: "th",
+						display: "table-cell",
+						component: "calendar.weekday",
+						pb: 1,
+						fontSize: 12,
+						props: {
+							scope: "col",
+							abbr: Je[e]
+						},
+						children: qe[e]
+					}, e))]
+				})
+			}), /* @__PURE__ */ g(t, {
+				tag: "tbody",
+				display: "table-row-group",
+				children: r.map((e) => /* @__PURE__ */ _(t, {
+					tag: "tr",
+					display: "table-row",
+					children: [k && /* @__PURE__ */ g(t, {
+						tag: "td",
+						display: "table-cell",
+						component: "calendar.weekNumber",
+						fontSize: 11,
+						textAlign: "center",
+						props: { role: "rowheader" },
+						children: I(e.week)
+					}), e.days.map(Qe)]
+				}, e.days[0].date))
+			})]
+		}, n);
+	};
+	return /* @__PURE__ */ _(t, {
+		ref: Le,
+		component: "calendar",
+		display: "inline-block",
+		...ke,
+		variant: [ke.variant, { disabled: A }],
+		props: {
+			role: j ? "group" : void 0,
+			"aria-label": j,
+			...Oe,
+			onPointerLeave: () => V && U(V)
+		},
+		children: [/* @__PURE__ */ _(t, {
+			position: "relative",
+			minHeight: 8,
+			mb: 2,
+			children: [
+				/* @__PURE__ */ g(t, {
+					tag: "button",
+					component: "calendar.nav",
+					position: "absolute",
+					top: 0,
+					insetStart: 0,
+					display: "inline-flex",
+					ai: "center",
+					jc: "center",
+					width: 8,
+					height: 8,
+					borderRadius: 2,
+					disabled: A,
+					props: {
+						type: "button",
+						"aria-label": Ee,
+						onClick: () => Ue(-1)
+					},
+					children: /* @__PURE__ */ g(ye, { direction: -1 })
+				}),
+				We ? /* @__PURE__ */ _(fe, { children: [/* @__PURE__ */ g(t, {
+					display: "flex",
+					gap: 4,
+					children: Z.map((e) => /* @__PURE__ */ g(t, {
+						flex1: !0,
+						textAlign: "center",
+						py: 1.5,
+						fontSize: 14,
+						fontWeight: 600,
+						props: { "aria-hidden": !0 },
+						children: p(y(e), {
+							locale: N,
+							month: "long",
+							year: "numeric"
+						})
+					}, y(e)))
+				}), /* @__PURE__ */ g(ce, {
+					id: Q,
+					props: { "aria-live": "polite" },
+					children: Ge
+				})] }) : /* @__PURE__ */ g(t, {
+					display: "flex",
+					jc: "center",
+					px: 9,
+					children: /* @__PURE__ */ g(t, {
+						tag: "button",
+						component: "calendar.title",
+						py: 1.5,
+						px: 3,
+						borderRadius: 2,
+						fontSize: 14,
+						id: Q,
+						disabled: A || K === "year",
+						props: {
+							type: "button",
+							"aria-live": "polite",
+							onClick: () => Fe(K === "day" ? "month" : "year")
+						},
+						children: Ge
+					})
+				}),
+				/* @__PURE__ */ g(t, {
+					tag: "button",
+					component: "calendar.nav",
+					position: "absolute",
+					top: 0,
+					insetEnd: 0,
+					display: "inline-flex",
+					ai: "center",
+					jc: "center",
+					width: 8,
+					height: 8,
+					borderRadius: 2,
+					disabled: A,
+					props: {
+						type: "button",
+						"aria-label": De,
+						onClick: () => Ue(1)
+					},
+					children: /* @__PURE__ */ g(ye, { direction: 1 })
+				})
+			]
+		}), K === "day" ? /* @__PURE__ */ g(t, {
+			display: "flex",
+			gap: 4,
+			ai: "start",
+			children: Z.map(tt)
+		}) : et()]
+	});
+}
+function E(e) {
+	return e.year * 12 + e.month - 1;
+}
+var D = /* @__PURE__ */ new Map();
+function ve(e) {
+	let t = D.get(e);
+	return t || (t = new Intl.NumberFormat(e, { useGrouping: !1 }), D.set(e, t)), t;
+}
+function O(e) {
+	return e - (e % C + C) % C;
+}
+function ye({ direction: e }) {
+	return /* @__PURE__ */ g(oe, {
+		viewBox: "0 0 16 16",
+		width: "1rem",
+		height: "1rem",
+		rtl: { flip: "xAxis" },
+		props: { fill: "none" },
+		children: /* @__PURE__ */ g(ae, {
+			d: e === 1 ? "M6 3l5 5-5 5" : "M10 3L5 8l5 5",
+			stroke: "currentColor",
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+var k = T;
+k.displayName = "Calendar";
+//#endregion
+export { k as default };

package/components/dataGrid/components/dataGridBooleanValue.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    value: boolean;
+    /** The words for the two, out of the grid's `localeText`. */
+    text: {
+        booleanTrue: string;
+        booleanFalse: string;
+    };
+}
+/** A boolean cell: a check or a muted cross, with the word a screen reader reads, since React writes `true` as nothing. */
+export default function DataGridBooleanValue(props: Props): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridDateParts.d.ts

@@ -0,0 +1,40 @@
+import { CellEditorConfig, ColumnDateFormat } from '../contracts/dataGridContract';
+import { default as CellModel } from '../models/cellModel';
+import { default as ColumnModel } from '../models/columnModel';
+/** A cell's date in the reader's language and zone — the hook `<DateTime>` reads, so a server render hydrates. */
+declare function DateValue(props: {
+    value: unknown;
+    format: ColumnDateFormat;
+}): import("react").JSX.Element;
+interface EditorProps<TRow> {
+    cell: CellModel<TRow>;
+    label: string;
+    errorId?: string;
+    onBlur: () => void;
+}
+/** The `date`/`time`/`datetime` editor: a compact `DateField` bound to the cell's draft. */
+declare function DateEditor<TRow>(props: EditorProps<TRow>): import("react").JSX.Element;
+/**
+ * The filter row's date filter: a comparison and a day, or two for a span, each a `DatePicker` — typed or picked.
+ * A day is only ever whole or absent, so each one commits as it completes rather than after a pause.
+ */
+declare function DateFilter<TRow>(props: {
+    column: ColumnModel<TRow>;
+}): import("react").JSX.Element;
+/** The list layout's date filter: a `DatePicker` per end, and the platform's own picker for the comparison. */
+declare function ListDateFilter<TRow>(props: {
+    column: ColumnModel<TRow>;
+}): import("react").JSX.Element;
+/** A pasted field read the way a date editor reads a paste: ISO, or the reader's own order. */
+declare function parsePasted<TRow>(editor: CellEditorConfig<TRow>, text: string): string | null;
+/** A date filter's value as the list's chip writes it. */
+declare function describeDay(value: string, valueTo?: string): string;
+declare const DataGridDateParts: {
+    DateValue: typeof DateValue;
+    DateEditor: typeof DateEditor;
+    DateFilter: typeof DateFilter;
+    ListDateFilter: typeof ListDateFilter;
+    parsePasted: typeof parsePasted;
+    describeDay: typeof describeDay;
+};
+export default DataGridDateParts;

package/components/dataGrid/components/dataGridDateValue.d.ts

@@ -0,0 +1,14 @@
+import { ColumnDateFormat } from '../contracts/dataGridContract';
+import { default as ColumnModel } from '../models/columnModel';
+/**
+ * How a column's value is written as a date, or `null` when it is not one: the column says so, a date editor
+ * says so, or a `Date` does — which could not be rendered as it stands.
+ */
+export declare function dateFormatOf<TRow>(column: ColumnModel<TRow>, value: unknown): ColumnDateFormat | null;
+interface Props {
+    value: unknown;
+    format: ColumnDateFormat;
+}
+/** A cell's date, once the date parts have arrived — and until then the value as it stands, which a server writes too. */
+export default function DataGridDateValue(props: Props): import("react").JSX.Element;
+export {};

package/components/dataGrid/contracts/dataGridContract.d.ts

@@ -2,6 +2,8 @@ import { BoxProps } from '../../../box';
 import { ChangeHandler } from '../../../react/a11y/useControllableState';
 import { ComponentsAndVariants } from '../../../types';
 import { SortDirection } from '../../../utils/array/arrayUtils';
+import { FormatOptions } from '../../../utils/date/format';
+import { ZoneInput } from '../../../utils/date/zones';
 import { default as AggregateCellModel } from '../models/aggregateCellModel';
 import { default as CellModel } from '../models/cellModel';
 import { DataGridLocaleText } from '../models/localeText';
@@ -163,7 +165,7 @@ export interface DataGridPagination {
     pageSize: number;
 }
 /** Filter type for column-level filtering */
-export type ColumnFilterType = 'text' | 'number' | 'multiselect';
+export type ColumnFilterType = 'text' | 'number' | 'multiselect' | 'date';
 /** Text filter configuration (fuzzy search) */
 export interface TextFilterValue {
     type: 'text';
@@ -181,8 +183,19 @@ export interface MultiselectFilterValue {
     type: 'multiselect';
     values: (string | number | boolean | null)[];
 }
+/**
+ * Date filter: one day, before or after one, or a span of days, each `YYYY-MM-DD` — compared on the reader's
+ * calendar, so an instant late on the 19th in their zone is on the 19th whatever UTC says.
+ */
+export interface DateFilterValue {
+    type: 'date';
+    operator: 'on' | 'before' | 'after' | 'between';
+    value: string;
+    /** For 'between': the last day, included. */
+    valueTo?: string;
+}
 /** Union type for all filter values */
-export type FilterValue = TextFilterValue | NumberFilterValue | MultiselectFilterValue;
+export type FilterValue = TextFilterValue | NumberFilterValue | MultiselectFilterValue | DateFilterValue;
 /** Column filters record - maps column key to filter value */
 export type ColumnFilters<TRow> = Partial<Record<keyof TRow | Key, FilterValue>>;
 /** Filter configuration for a column */
@@ -197,10 +210,10 @@ export interface ColumnFilterConfig {
     }[];
     /** For number: step value for input */
     step?: number;
-    /** For number: min value */
-    min?: number;
-    /** For number: max value */
-    max?: number;
+    /** For number: min value. For date: the earliest day, `YYYY-MM-DD`. */
+    min?: number | string;
+    /** For number: max value. For date: the latest day. */
+    max?: number | string;
 }
 /** Configuration for expandable row detail panel */
 export interface RowDetailConfig<TRow> {
@@ -270,10 +283,11 @@ export interface TreeDataConfig<TRow> {
     selection?: 'self' | 'cascade';
 }
 /**
- * The four editors the grid draws for itself. A column wanting anything else — a date picker, a colour,
- * a lookup against a table — declares `EditCell` instead and renders it, driven by the same model.
+ * The editors the grid draws for itself — `date`, `time` and `datetime` are a `DateField` in the cell. A column
+ * wanting anything else — a colour, a lookup against a table — declares `EditCell` instead and renders it,
+ * driven by the same model.
  */
-export type CellEditorType = 'text' | 'number' | 'checkbox' | 'select';
+export type CellEditorType = 'text' | 'number' | 'checkbox' | 'select' | 'date' | 'time' | 'datetime';
 /** One option of a `select` editor. `value` is what the cell holds; `label` is what the list shows. */
 export interface CellEditorOption {
     value: string | number | boolean | null;
@@ -288,9 +302,17 @@ export interface CellEditorConfig<TRow> {
     placeholder?: string;
     /** `number` only, handed to the input as it stands. */
     step?: number;
-    min?: number;
-    max?: number;
+    /** A number for `number`; an ISO string for the date editors, whose value outside it is marked invalid. */
+    min?: number | string;
+    max?: number | string;
+    /** `datetime` only: whose wall clock it is typed on. Default the reader's; `'none'` for no zone. */
+    zone?: ZoneInput | 'none';
 }
+/**
+ * How a column writes a date: `'date'`, `'time'`, `'datetime'`, `'relative'` (`3 days ago`), or `Intl` options
+ * with a `zone`. In the reader's language and on their wall clock, like `<DateTime>`.
+ */
+export type ColumnDateFormat = 'date' | 'time' | 'datetime' | 'relative' | Omit<FormatOptions, 'locale'>;
 /** Whether a column can be edited: every row of it, or the rows a predicate says. */
 export type ColumnEditable<TRow> = boolean | ((row: TRow) => boolean);
 /**
@@ -523,6 +545,11 @@ export interface ColumnType<TRow> {
      * numbers gets a numeric keypad without being told.
      */
     editor?: CellEditorType | CellEditorConfig<TRow>;
+    /**
+     * Writes the column's values as dates, in the reader's language and zone — an ISO string or a `Date`. A `Date`
+     * is written as a date-time without being told, since it cannot be rendered as it stands.
+     */
+    dateFormat?: ColumnDateFormat;
     /**
      * An editor of your own, for what the four built-in ones do not cover. It is handed the cell, and the
      * cell carries the draft value and the two ways out (`commitEdit`, `cancelEdit`) — so a custom editor

package/components/dataGrid/models/columnModel.d.ts

@@ -1,4 +1,4 @@
-import { ColumnAggregate, ColumnEditable, ColumnFilterConfig, ColumnType, ContextMenuConfig, FilterValue, Key, NumberFilterValue, PinPosition, PinPositionInput, SortDirection } from '../contracts/dataGridContract';
+import { ColumnAggregate, ColumnEditable, ColumnFilterConfig, ColumnType, ContextMenuConfig, DateFilterValue, FilterValue, Key, NumberFilterValue, PinPosition, PinPositionInput, SortDirection } from '../contracts/dataGridContract';
 import { default as GridModel } from './gridModel';
 import { default as HeaderCellModel } from './headerCellModel';
 /** Discriminates the structural role of a column — replaces scattered `key === *_CELL_KEY` checks. */
@@ -80,6 +80,8 @@ export default class ColumnModel<TRow> {
     }[];
     setTextFilter(value: string): void;
     setNumberFilter(operator: NumberFilterValue['operator'], value: string | number, valueTo?: string | number): void;
+    /** A day, before or after one, or a span — `null` for a value still being typed, which is no filter yet. */
+    setDateFilter(operator: DateFilterValue['operator'], value: string | null, valueTo?: string | null): void;
     setMultiselectFilter(values: (string | number | boolean | null)[]): void;
     clearFilter(): void;
     /**

package/components/dataGrid/models/editModel.d.ts

@@ -1,8 +1,10 @@
-import { CellEdit, CellEditorConfig, Key } from '../contracts/dataGridContract';
+import { CellEdit, CellEditorConfig, CellEditorType, Key } from '../contracts/dataGridContract';
 import { default as ColumnModel } from './columnModel';
 import { default as GridModel } from './gridModel';
 import { RangeBounds } from './rangeModel';
 import { default as RowModel } from './rowModel';
+/** Whether an editor is a `DateField`. */
+export declare function isDateEditor(type: CellEditorType): boolean;
 /** A key that starts an edit by replacing the value: one printable character, unmodified. */
 export declare function isTypingKey(event: React.KeyboardEvent): boolean;
 /**

package/components/dataGrid/models/localeText.d.ts

@@ -60,6 +60,10 @@ export interface DataGridLocaleText {
     filterSelectAll: string;
     /** How a multiselect filter lists a `null` value. */
     filterEmptyValue: string;
+    /** What a `true` cell is read out and listed as; it is drawn as a check. */
+    booleanTrue: string;
+    /** What a `false` cell is read out and listed as; it is drawn as a cross. */
+    booleanFalse: string;
     /** What an empty grid shows when there is no `noDataComponent`. */
     noRows: string;
     loadingRows: string;