gridsmith-ui 0.27.0 → 0.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +63 -1
- package/dist/charts.d.ts +2 -2
- package/dist/charts.js +2 -2
- package/dist/charts.js.map +1 -1
- package/dist/chat.js +5 -5
- package/dist/chat.js.map +1 -1
- package/dist/{chunk-64TXZ4L7.js → chunk-2ROVDVLZ.js} +3 -3
- package/dist/{chunk-64TXZ4L7.js.map → chunk-2ROVDVLZ.js.map} +1 -1
- package/dist/chunk-66JJCQU3.js +46 -0
- package/dist/chunk-66JJCQU3.js.map +1 -0
- package/dist/chunk-7RKC5C7G.js +35 -0
- package/dist/chunk-7RKC5C7G.js.map +1 -0
- package/dist/{chunk-OTCEJN64.js → chunk-BRAXJEEP.js} +7 -6
- package/dist/chunk-BRAXJEEP.js.map +1 -0
- package/dist/{chunk-IXR4UEF4.js → chunk-DQCHCLEJ.js} +9 -8
- package/dist/chunk-DQCHCLEJ.js.map +1 -0
- package/dist/{chunk-5TUVX4B2.js → chunk-EIWXVICU.js} +3 -3
- package/dist/{chunk-5TUVX4B2.js.map → chunk-EIWXVICU.js.map} +1 -1
- package/dist/{chunk-SFY2KMHG.js → chunk-FD4YED7O.js} +5 -4
- package/dist/chunk-FD4YED7O.js.map +1 -0
- package/dist/{chunk-MD2EFMES.js → chunk-GXMTS3YD.js} +3 -3
- package/dist/{chunk-MD2EFMES.js.map → chunk-GXMTS3YD.js.map} +1 -1
- package/dist/chunk-HTXP5BMM.js +38 -0
- package/dist/chunk-HTXP5BMM.js.map +1 -0
- package/dist/{chunk-R5NFCEZ3.js → chunk-OPFJEL3Z.js} +52 -24
- package/dist/chunk-OPFJEL3Z.js.map +1 -0
- package/dist/{chunk-EKBWWA6P.js → chunk-R4GXKH4U.js} +7 -7
- package/dist/chunk-R4GXKH4U.js.map +1 -0
- package/dist/{chunk-PO65I3MQ.js → chunk-TRDXWHD2.js} +6 -6
- package/dist/chunk-TRDXWHD2.js.map +1 -0
- package/dist/{chunk-2CKSSWYG.js → chunk-YUTF2X6B.js} +39 -20
- package/dist/chunk-YUTF2X6B.js.map +1 -0
- package/dist/data-grid.js +18 -11
- package/dist/data-grid.js.map +1 -1
- package/dist/editor-mentions.js +2 -2
- package/dist/editor.js +44 -24
- package/dist/editor.js.map +1 -1
- package/dist/index.d.ts +46 -24
- package/dist/index.js +404 -295
- package/dist/index.js.map +1 -1
- package/dist/kanban.js +18 -11
- package/dist/kanban.js.map +1 -1
- package/dist/resizable.js +20 -15
- package/dist/resizable.js.map +1 -1
- package/dist/roots.css +91 -15
- package/dist/tokens.css +111 -26
- package/dist/utils.d.ts +47 -5
- package/dist/utils.js +15 -5
- package/dist/utils.js.map +1 -1
- package/dist/virtualized.js +17 -11
- package/dist/virtualized.js.map +1 -1
- package/dist-static/tokens.css +111 -26
- package/package.json +2 -2
- package/dist/chunk-2CKSSWYG.js.map +0 -1
- package/dist/chunk-EKBWWA6P.js.map +0 -1
- package/dist/chunk-IXR4UEF4.js.map +0 -1
- package/dist/chunk-M2QRNBDQ.js +0 -42
- package/dist/chunk-M2QRNBDQ.js.map +0 -1
- package/dist/chunk-OTCEJN64.js.map +0 -1
- package/dist/chunk-PO65I3MQ.js.map +0 -1
- package/dist/chunk-R5NFCEZ3.js.map +0 -1
- package/dist/chunk-SFY2KMHG.js.map +0 -1
package/dist/data-grid.js
CHANGED
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useCardsSwitch, CARDS_BELOW, inferColumnKinds, CardValue } from './chunk-
|
|
3
|
-
import { usePagination, useWholeListCheck, pagerPart, Pagination, Input } from './chunk-
|
|
4
|
-
import { useShellPreferences } from './chunk-
|
|
2
|
+
import { useCardsSwitch, CARDS_BELOW, inferColumnKinds, CardValue } from './chunk-BRAXJEEP.js';
|
|
3
|
+
import { usePagination, useWholeListCheck, pagerPart, Pagination, Input } from './chunk-YUTF2X6B.js';
|
|
4
|
+
import { useShellPreferences } from './chunk-R4GXKH4U.js';
|
|
5
5
|
import './chunk-OYNUU346.js';
|
|
6
|
+
import './chunk-7RKC5C7G.js';
|
|
6
7
|
import { useBreakpoint } from './chunk-CRQ6KCRD.js';
|
|
7
8
|
import { FormChangeCtx } from './chunk-XVB55M3N.js';
|
|
8
9
|
import { useFramesItself, TableCardCtx, RowsCtx } from './chunk-QM4SJKWV.js';
|
|
10
|
+
import { useRevealFocus } from './chunk-HTXP5BMM.js';
|
|
9
11
|
import { useGridKeyboard } from './chunk-ZI3OQDET.js';
|
|
10
|
-
import { useTextOverflow, Tooltip } from './chunk-
|
|
12
|
+
import { useTextOverflow, Tooltip } from './chunk-GXMTS3YD.js';
|
|
11
13
|
import './chunk-7Q46JXSK.js';
|
|
12
14
|
import { Icon } from './chunk-TJEV7YAY.js';
|
|
13
15
|
import './chunk-HP7WUZPK.js';
|
|
14
16
|
import './chunk-WH2FUFAC.js';
|
|
15
|
-
import { cn } from './chunk-
|
|
17
|
+
import { cn, FOCUS_INSET, FOCUS_RING } from './chunk-66JJCQU3.js';
|
|
16
18
|
import { useState, useMemo, useCallback, useRef, useEffect, useLayoutEffect } from 'react';
|
|
17
19
|
import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
|
|
18
20
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
@@ -44,6 +46,8 @@ function DataGrid({
|
|
|
44
46
|
const narrowScreen = useBreakpoint(mobileBreakpoint);
|
|
45
47
|
const { cards: isMobile, rootRef } = useCardsSwitch(editable ? false : narrowScreen, editable ? 0 : cardsBelow);
|
|
46
48
|
const [sorting, setSorting] = useState([]);
|
|
49
|
+
const [scrollArea, setScrollArea] = useState(null);
|
|
50
|
+
useRevealFocus(scrollArea);
|
|
47
51
|
const [editing, setEditing] = useState(null);
|
|
48
52
|
const columnKeys = useMemo(() => columns.map((c) => c.id ?? ("accessorKey" in c ? String(c.accessorKey) : "")).filter(Boolean), [columns]);
|
|
49
53
|
const inferredKinds = useMemo(
|
|
@@ -216,8 +220,8 @@ function DataGrid({
|
|
|
216
220
|
);
|
|
217
221
|
}
|
|
218
222
|
const sortIcons = (sorted) => /* @__PURE__ */ jsxs("span", { className: "inline-flex flex-col -space-y-ds-1.5", "aria-hidden": "true", children: [
|
|
219
|
-
/* @__PURE__ */ jsx(Icon, { name: "chevron-up", size: 10, className: sorted === "asc" ? "text-[var(--ds-accent-
|
|
220
|
-
/* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 10, className: sorted === "desc" ? "text-[var(--ds-accent-
|
|
223
|
+
/* @__PURE__ */ jsx(Icon, { name: "chevron-up", size: 10, className: sorted === "asc" ? "text-[var(--ds-accent-ink)]" : "opacity-30" }),
|
|
224
|
+
/* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 10, className: sorted === "desc" ? "text-[var(--ds-accent-ink)]" : "opacity-30" })
|
|
221
225
|
] });
|
|
222
226
|
const headerCell = (header, c) => {
|
|
223
227
|
const canSort = header.column.getCanSort();
|
|
@@ -236,7 +240,8 @@ function DataGrid({
|
|
|
236
240
|
...editable ? { "data-grid-key": cellKey(at), tabIndex: grid.tabIndexOf(at) } : {},
|
|
237
241
|
className: cn(
|
|
238
242
|
"inline-flex items-center gap-ds-1 uppercase tracking-wider cursor-pointer select-none [font:inherit] text-inherit",
|
|
239
|
-
"hover:text-[var(--ds-text-primary)] rounded-[var(--ds-radius-sm)]
|
|
243
|
+
"hover:text-[var(--ds-text-primary)] rounded-[var(--ds-radius-sm)]",
|
|
244
|
+
FOCUS_RING
|
|
240
245
|
),
|
|
241
246
|
children: [
|
|
242
247
|
label,
|
|
@@ -254,7 +259,8 @@ function DataGrid({
|
|
|
254
259
|
"px-ds-4 py-ds-3 text-xs font-[var(--ds-weight-heading)] uppercase tracking-wider",
|
|
255
260
|
headerAlign === "right" ? "text-right" : headerAlign === "center" ? "text-center" : "text-left",
|
|
256
261
|
shrink && "w-px whitespace-nowrap",
|
|
257
|
-
"text-[var(--ds-text-secondary)]
|
|
262
|
+
"text-[var(--ds-text-secondary)]",
|
|
263
|
+
FOCUS_INSET
|
|
258
264
|
),
|
|
259
265
|
style: meta?.maxWidth || meta?.width || meta?.minWidth ? { maxWidth: meta?.maxWidth, width: meta?.width, minWidth: meta?.minWidth } : void 0,
|
|
260
266
|
children: /* @__PURE__ */ jsx("span", { className: cn("flex items-center gap-ds-1", headerAlign === "right" && "justify-end", headerAlign === "center" && "justify-center"), children: inside })
|
|
@@ -267,9 +273,10 @@ function DataGrid({
|
|
|
267
273
|
/* @__PURE__ */ jsx(
|
|
268
274
|
"div",
|
|
269
275
|
{
|
|
276
|
+
ref: setScrollArea,
|
|
270
277
|
"data-table-scroll": "",
|
|
271
278
|
className: cn(
|
|
272
|
-
"relative w-full overflow-auto rounded-[var(--ds-radius-md)]",
|
|
279
|
+
"relative w-full overflow-auto scroll-p-[4px] rounded-[var(--ds-radius-md)]",
|
|
273
280
|
"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
|
|
274
281
|
"shadow-[var(--ds-shadow-card)]",
|
|
275
282
|
"bg-[var(--ds-bg-surface)]"
|
|
@@ -349,7 +356,7 @@ function DataGrid({
|
|
|
349
356
|
align === "right" && "text-right",
|
|
350
357
|
align === "center" && "text-center",
|
|
351
358
|
shrink && "w-px whitespace-nowrap",
|
|
352
|
-
editable &&
|
|
359
|
+
editable && FOCUS_INSET
|
|
353
360
|
),
|
|
354
361
|
style: meta?.maxWidth || meta?.width || meta?.minWidth ? { maxWidth: meta?.maxWidth, width: meta?.width, minWidth: meta?.minWidth } : void 0,
|
|
355
362
|
children: [
|
package/dist/data-grid.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../showcase/src/components/DataGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAkDA,SAAS,SAAA,CAAU,EAAE,QAAA,EAAU,KAAA,EAAM,EAA2C;AAC9E,EAAA,MAAM,EAAE,GAAA,EAAK,WAAA,KAAgB,eAAA,CAAgB,EAAE,OAAO,CAAA;AACtD,EAAA,MAAM,UAAA,GAAa,KAAA,KAAU,CAAA,GAAI,UAAA,GAAa,cAAc,KAAK,CAAA,CAAA;AACjE,EAAA,MAAM,IAAA,uBAAQ,MAAA,EAAA,EAAK,GAAA,EAAU,WAAW,EAAA,CAAG,UAAA,EAAY,OAAO,CAAA,EAAI,QAAA,EAAS,CAAA;AAC3E,EAAA,IAAI,CAAC,aAAa,OAAO,IAAA;AACzB,EAAA,uBAAO,GAAA,CAAC,OAAA,EAAA,EAAQ,OAAA,EAAS,QAAA,EAAW,QAAA,EAAA,IAAA,EAAK,CAAA;AAC3C;AA0CA,IAAM,OAAA,GAAU,CAAC,CAAA,KAAe,CAAA,CAAE,IAAI,CAAA,GAAI,CAAA,EAAA,EAAK,CAAA,CAAE,CAAC,KAAK,CAAA,EAAG,CAAA,CAAE,CAAC,CAAA,CAAA,EAAI,EAAE,CAAC,CAAA,CAAA;AAIpE,IAAM,aAAA,GAAgB,IAAA;AAEf,SAAS,QAAA,CAAY;AAAA,EAC1B,IAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,UAAA;AAAA,EACA,gBAAA,EAAkB,oBAAA;AAAA,EAClB,UAAA,GAAa,WAAA;AAAA,EACb,KAAA,EAAO,SAAA;AAAA,EACP,YAAA,EAAc,SAAA;AAAA,EACd;AACF,CAAA,EAAqB;AAEnB,EAAA,eAAA,EAAgB;AAEhB,EAAA,MAAM,cAAc,mBAAA,EAAoB;AACxC,EAAA,MAAM,gBAAA,GAAkC,oBAAA,IAAwB,WAAA,CAAY,sBAAA,IAA0B,IAAA;AACtG,EAAA,MAAM,YAAA,GAAe,cAAc,gBAAgB,CAAA;AAInD,EAAA,MAAM,EAAE,KAAA,EAAO,QAAA,EAAU,OAAA,EAAQ,GAAI,cAAA,CAAe,QAAA,GAAW,KAAA,GAAQ,YAAA,EAAc,QAAA,GAAW,CAAA,GAAI,UAAU,CAAA;AAC9G,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,QAAA,CAAuB,EAAE,CAAA;AACvD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAA2D,IAAI,CAAA;AAG7F,EAAA,MAAM,UAAA,GAAa,QAAQ,MAAM,OAAA,CAAQ,IAAI,CAAC,CAAA,KAAM,CAAA,CAAE,EAAA,KAAO,aAAA,IAAiB,CAAA,GAAI,OAAO,CAAA,CAAE,WAAW,IAAI,EAAA,CAAG,CAAA,CAAE,OAAO,OAAO,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AACzI,EAAA,MAAM,aAAA,GAAgB,OAAA;AAAA,IACpB,MAAM,gBAAA,CAAiB,IAAA,EAAmC,UAAU,CAAA;AAAA,IACpE,CAAC,MAAM,UAAU;AAAA,GACnB;AACA,EAAA,MAAM,MAAA,GAAS,WAAA;AAAA,IACb,CAAC,KAAA,EAAe,IAAA,KAAyC,MAAM,IAAA,IAAQ,aAAA,CAAc,IAAI,KAAK,CAAA;AAAA,IAC9F,CAAC,aAAa;AAAA,GAChB;AAMA,EAAA,MAAM,QAAQ,aAAA,CAAc;AAAA,IAC1B,IAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA,EAAO,EAAE,OAAA,EAAQ;AAAA,IACjB,eAAA,EAAiB,CAAC,OAAA,KAAY;AAAE,MAAA,UAAA,CAAW,OAAO,CAAA;AAAG,MAAA,SAAA,EAAW,QAAQ,CAAC,CAAA;AAAA,IAAG,CAAA;AAAA,IAC5E,iBAAiB,eAAA,EAAgB;AAAA,IACjC,mBAAmB,iBAAA;AAAkB,GACtC,CAAA;AAGD,EAAA,MAAM,UAAA,GAAa,KAAA,CAAM,WAAA,EAAY,CAAE,IAAA;AACvC,EAAA,MAAM,WAAW,aAAA,CAAc,UAAA,EAAY,EAAE,QAAA,EAAU,OAAA,EAAS,SAAS,CAAA;AACzE,EAAA,MAAM,QAAQ,SAAA,IAAa,QAAA;AAC3B,EAAA,iBAAA,CAAkB,UAAA,EAAY,IAAA,CAAK,MAAA,EAAQ,SAAS,CAAA;AACpD,EAAA,MAAM,IAAA,GAAO,SAAA,CAAU,UAAA,EAAY,KAAK,CAAA;AACxC,EAAA,MAAM,WAAA,GAAc,MAAM,qBAAA,EAAsB;AAChD,EAAA,MAAM,UAAA,GAAa,CAAC,EAAA,KAAe;AACjC,IAAA,MAAM,MAAA,GAAS,YAAY,IAAA,CAAK,CAAC,MAAM,CAAA,CAAE,EAAA,KAAO,EAAE,CAAA,EAAG,SAAA,CAAU,MAAA;AAC/D,IAAA,OAAO,OAAO,MAAA,KAAW,QAAA,GAAW,MAAA,GAAS,EAAA;AAAA,EAC/C,CAAA;AAKA,EAAA,MAAM,OAAA,GAAU,OAAyB,IAAI,CAAA;AAC7C,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,QAAA,CAAiB,EAAE,GAAA,EAAK,IAAA,EAAM,CAAA,EAAG,CAAA,EAAG,CAAA;AACpE,EAAA,MAAM,OAAA,GAAU,KAAK,MAAA,GAAS,CAAA;AAC9B,EAAA,MAAM,KAAA,GAAQ,CAAC,EAAA,KAAuB,EAAA,KAAO,IAAA,GAAO,EAAA,GAAK,IAAA,CAAK,SAAA,CAAU,CAAC,GAAA,KAAQ,GAAA,CAAI,EAAA,KAAO,EAAE,CAAA;AAC9F,EAAA,MAAM,OAAO,CAAC,CAAA,MAAuB,EAAE,GAAA,EAAK,EAAE,CAAA,GAAI,CAAA,GAAI,IAAA,GAAO,IAAA,CAAK,EAAE,CAAC,CAAA,EAAG,MAAM,IAAA,EAAM,CAAA,EAAG,EAAE,CAAA,EAAE,CAAA;AAC3F,EAAA,MAAM,OAAA,GAAkB,EAAE,CAAA,EAAG,IAAA,CAAK,IAAI,KAAA,CAAM,QAAA,CAAS,GAAG,CAAA,EAAG,OAAO,CAAA,EAAG,GAAG,IAAA,CAAK,GAAA,CAAI,QAAA,CAAS,CAAA,EAAG,IAAA,CAAK,GAAA,CAAI,GAAG,WAAA,CAAY,MAAA,GAAS,CAAC,CAAC,CAAA,EAAE;AAClI,EAAA,MAAM,YAAY,CAAC,CAAA,KAAc,WAAA,CAAY,IAAA,CAAK,CAAC,CAAC,CAAA;AACpD,EAAA,MAAM,IAAA,GAAO,CAAC,CAAA,EAAW,CAAA,KAAyC;AAGhE,IAAA,IAAI,CAAA,CAAE,QAAQ,OAAO,IAAA;AACrB,IAAA,MAAM,QAAA,GAAW,CAAA,CAAE,OAAA,IAAW,CAAA,CAAE,OAAA;AAChC,IAAA,QAAQ,EAAE,GAAA;AAAK,MACb,KAAK,YAAA;AAAc,QAAA,OAAO,CAAC,QAAA,IAAY,CAAA,CAAE,CAAA,GAAI,YAAY,MAAA,GAAS,CAAA,GAAI,EAAE,GAAG,CAAA,EAAG,CAAA,EAAG,CAAA,CAAE,CAAA,GAAI,GAAE,GAAI,IAAA;AAAA,MAC7F,KAAK,WAAA;AAAa,QAAA,OAAO,CAAC,QAAA,IAAY,CAAA,CAAE,CAAA,GAAI,CAAA,GAAI,EAAE,GAAG,CAAA,EAAG,CAAA,EAAG,CAAA,CAAE,CAAA,GAAI,CAAA,EAAE,GAAI,IAAA;AAAA,MACvE,KAAK,WAAA;AAAa,QAAA,OAAO,CAAC,QAAA,IAAY,CAAA,CAAE,CAAA,GAAI,OAAA,GAAU,EAAE,GAAG,CAAA,EAAG,CAAA,EAAG,CAAA,CAAE,CAAA,GAAI,CAAA,EAAE,GAAI,IAAA;AAAA,MAC7E,KAAK,SAAA;AAAW,QAAA,OAAO,CAAC,QAAA,IAAY,CAAA,CAAE,CAAA,GAAI,EAAA,GAAK,EAAE,GAAG,CAAA,EAAG,CAAA,EAAG,CAAA,CAAE,CAAA,GAAI,CAAA,EAAE,GAAI,IAAA;AAAA,MACtE,KAAK,MAAA;AAAQ,QAAA,OAAO,QAAA,GAAW,EAAE,CAAA,EAAG,EAAA,EAAI,CAAA,EAAG,CAAA,EAAE,GAAI,EAAE,GAAG,CAAA,EAAG,CAAA,EAAG,CAAA,EAAE;AAAA,MAC9D,KAAK,KAAA;AAAO,QAAA,OAAO,QAAA,GAAW,EAAE,CAAA,EAAG,OAAA,EAAS,GAAG,WAAA,CAAY,MAAA,GAAS,CAAA,EAAE,GAAI,EAAE,GAAG,CAAA,EAAG,CAAA,EAAG,WAAA,CAAY,SAAS,CAAA,EAAE;AAAA,MAC5G;AAAS,QAAA,OAAO,IAAA;AAAA;AAClB,EACF,CAAA;AAEA,EAAA,MAAM,KAAA,GAAQ,OAAO,KAAK,CAAA;AAC1B,EAAA,MAAM,SAAA,GAAY,CAAC,CAAA,KAAc;AAC/B,IAAA,MAAM,GAAA,GAAM,IAAA,CAAK,CAAA,CAAE,CAAC,CAAA;AACpB,IAAA,MAAM,MAAA,GAAS,WAAA,CAAY,CAAA,CAAE,CAAC,CAAA;AAC9B,IAAA,IAAI,CAAC,OAAO,CAAC,MAAA,IAAW,OAAO,SAAA,CAAU,IAAA,EAAyC,aAAa,KAAA,EAAO;AACtG,IAAA,KAAA,CAAM,OAAA,GAAU,KAAA;AAChB,IAAA,SAAA,CAAU,CAAC,CAAA;AACX,IAAA,MAAM,OAAO,MAAA,CAAO,GAAA,CAAI,SAAS,MAAA,CAAO,EAAE,KAAK,EAAE,CAAA;AACjD,IAAA,UAAA,CAAW,EAAE,GAAA,EAAK,GAAA,CAAI,EAAA,EAAI,CAAA,EAAG,CAAA,CAAE,CAAA,EAAG,KAAA,EAAO,IAAA,EAAM,GAAA,EAAK,IAAA,EAAM,CAAA;AAAA,EAC5D,CAAA;AACA,EAAA,MAAM,OAAO,eAAA,CAAwB;AAAA,IACnC,SAAA,EAAW,OAAA;AAAA,IACX,MAAA,EAAQ,OAAA;AAAA,IACR,SAAA;AAAA,IACA,KAAA,EAAO,OAAA;AAAA,IACP,IAAA;AAAA,IACA,UAAA,EAAY,CAAC,CAAA,EAAG,CAAA,KAAM;AACpB,MAAA,IAAI,CAAA,CAAE,IAAI,CAAA,EAAG;AAAE,QAAA,IAAI,WAAA,CAAY,CAAA,CAAE,CAAC,CAAA,EAAG,UAAA,IAAc,WAAA,CAAY,CAAA,CAAE,CAAC,CAAA,CAAE,aAAA,EAAc;AAAA,MAAG,CAAA,MAAA,IAC5E,CAAA,CAAE,GAAA,KAAQ,OAAA,YAAmB,CAAC,CAAA;AAAA,IACzC,CAAA;AAAA,IACA,YAAA,EAAc;AAAA,GACf,CAAA;AACD,EAAA,MAAM,aAAA,GAAgB,CAAC,CAAA,KAA0B;AAE/C,IAAA,IAAI,EAAE,GAAA,KAAQ,IAAA,IAAQ,CAAC,OAAA,IAAW,OAAA,CAAQ,KAAK,CAAA,IAAK,CAAA,CAAE,MAAA,YAAkB,WAAA,IAAe,EAAE,MAAA,CAAO,YAAA,CAAa,eAAe,CAAA,KAAM,OAAA,CAAQ,OAAO,CAAA,EAAG;AAClJ,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA,SAAA,CAAU,OAAO,CAAA;AACjB,MAAA;AAAA,IACF;AACA,IAAA,IAAA,CAAK,UAAU,CAAC,CAAA;AAAA,EAClB,CAAA;AAGA,EAAA,MAAM,WAAA,GAAc,CAAC,CAAA,KAAwB;AAC3C,IAAA,MAAM,GAAA,GAAM,EAAE,MAAA,YAAkB,WAAA,GAAc,EAAE,MAAA,CAAO,YAAA,CAAa,eAAe,CAAA,GAAI,IAAA;AACvF,IAAA,IAAI,CAAC,GAAA,EAAK;AACV,IAAA,MAAM,CAAC,GAAG,CAAC,CAAA,GAAI,IAAI,UAAA,CAAW,IAAI,CAAA,GAAI,CAAC,EAAA,EAAI,MAAA,CAAO,IAAI,KAAA,CAAM,CAAC,CAAC,CAAC,CAAA,GAAI,IAAI,KAAA,CAAM,GAAG,CAAA,CAAE,GAAA,CAAI,MAAM,CAAA;AAC5F,IAAA,IAAI,OAAO,QAAA,CAAS,CAAC,CAAA,IAAK,MAAA,CAAO,SAAS,CAAC,CAAA,IAAK,OAAA,CAAQ,OAAO,MAAM,GAAA,EAAK,SAAA,CAAU,EAAE,CAAA,EAAG,GAAG,CAAA;AAAA,EAC9F,CAAA;AAGA,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAoE,IAAI,CAAA;AAClG,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,KAAA,EAAO;AACZ,IAAA,MAAM,CAAA,GAAI,UAAA,CAAW,MAAM,QAAA,CAAS,CAAC,CAAA,KAAO,CAAA,IAAK,CAAA,CAAE,CAAA,KAAM,KAAA,CAAM,CAAA,GAAI,IAAA,GAAO,CAAE,GAAG,aAAa,CAAA;AAC5F,IAAA,OAAO,MAAM,aAAa,CAAC,CAAA;AAAA,EAC7B,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AACV,EAAA,MAAM,KAAA,GAAQ,OAAO,CAAC,CAAA;AAEtB,EAAA,MAAM,OAAA,GAAU,OAAsB,IAAI,CAAA;AAC1C,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,OAAO,OAAA,CAAQ,OAAA;AACrB,IAAA,IAAI,CAAC,IAAA,EAAM;AACX,IAAA,MAAM,CAAA,GAAI,KAAA,CAAM,IAAA,CAAK,GAAG,CAAA;AACxB,IAAA,IAAI,IAAI,CAAA,EAAG;AACT,MAAA,MAAM,GAAA,GAAM,WAAW,SAAA,CAAU,CAAC,QAAQ,GAAA,CAAI,EAAA,KAAO,KAAK,GAAG,CAAA;AAC7D,MAAA,IAAI,GAAA,IAAO,CAAA,IAAK,KAAA,CAAM,KAAA,KAAU,YAAA,EAAc;AAAE,QAAA,MAAM,OAAO,IAAA,CAAK,KAAA,CAAM,GAAA,GAAM,KAAA,CAAM,QAAQ,CAAA,GAAI,CAAA;AAAG,QAAA,IAAI,IAAA,KAAS,MAAM,IAAA,EAAM;AAAE,UAAA,KAAA,CAAM,QAAQ,IAAI,CAAA;AAAG,UAAA;AAAA,QAAQ;AAAA,MAAE;AAC7J,MAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAClB,MAAA;AAAA,IACF;AACA,IAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAClB,IAAA,IAAA,CAAK,MAAM,EAAE,CAAA,EAAG,CAAA,EAAG,IAAA,CAAK,GAAG,CAAA;AAAA,EAC7B,CAAC,CAAA;AACD,EAAA,MAAM,UAAA,GAAa,CAAC,MAAA,EAAiB,SAAA,KAAuB;AAC1D,IAAA,IAAI,CAAC,OAAA,IAAW,KAAA,CAAM,OAAA,EAAS;AAC/B,IAAA,KAAA,CAAM,OAAA,GAAU,IAAA;AAChB,IAAA,MAAM,CAAA,GAAI,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAC3B,IAAA,MAAM,GAAA,GAAM,KAAK,CAAC,CAAA;AAClB,IAAA,MAAM,MAAA,GAAS,WAAA,CAAY,OAAA,CAAQ,CAAC,CAAA;AACpC,IAAA,MAAM,OAAO,EAAE,GAAA,EAAK,QAAQ,GAAA,EAAK,CAAA,EAAG,QAAQ,CAAA,EAAE;AAC9C,IAAA,UAAA,CAAW,IAAI,CAAA;AAGf,IAAA,IAAI,SAAA,EAAW;AAAE,MAAA,WAAA,CAAY,IAAI,CAAA;AAAG,MAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,IAAM;AAE5D,IAAA,IAAI,CAAC,UAAU,CAAC,GAAA,IAAO,CAAC,MAAA,IAAU,OAAA,CAAQ,KAAA,KAAU,OAAA,CAAQ,GAAA,EAAK;AACjE,IAAA,MAAM,IAAA,GAAO,OAAO,SAAA,CAAU,IAAA;AAC9B,IAAA,MAAM,IAAA,GAAO,CAAC,EAAA,KAAgB;AAAE,MAAA,KAAA,CAAM,OAAA,IAAW,CAAA;AAAG,MAAA,QAAA,CAAS,EAAE,GAAG,IAAA,EAAM,GAAA,EAAK,OAAA,CAAQ,KAAM,CAAA,EAAG,KAAA,CAAM,OAAA,EAAS,EAAA,EAAI,CAAA;AAAA,IAAG,CAAA;AACpH,IAAA,MAAM,MAAA,GAAS,UAAA,GAAa,GAAA,CAAI,KAAA,EAAO,OAAO,EAAA,EAAI,IAAA,EAAM,KAAA,GAAQ,IAAA,CAAK,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA,GAAI,QAAQ,KAAK,CAAA;AACzG,IAAA,IAAI,MAAA,IAAU,OAAQ,MAAA,CAA4B,IAAA,KAAS,YAAa,MAAA,CAA4B,IAAA,CAAK,MAAM,KAAK,IAAI,CAAA,EAAG,MAAM,IAAA,CAAK,KAAK,CAAC,CAAA;AAAA,cAClI,IAAI,CAAA;AAAA,EAChB,CAAA;AAIA,EAAA,MAAM,OAAA,GAAU,KAAK,MAAA,GAAS,CAAA,uBAAK,UAAA,EAAA,EAAY,GAAG,KAAA,CAAM,KAAA,EAAO,CAAA,GAAK,IAAA;AACpE,EAAA,MAAM,OAAA,GAAU,CAAC,IAAA,KAAgC;AAAE,IAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,EAAM,CAAA;AAC3E,EAAA,MAAM,WAAA,GAAc,CAAC,IAAA,qBAAoB,IAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,OAAA,EAAS,eAAA,EAAc,EAAA,EAAG,SAAA,EAAW,EAAA,CAAG,uBAAA,EAAyB,SAAS,CAAA,EAAI,QAAA,EAAA;AAAA,IAAA,IAAA;AAAA,IAAM;AAAA,GAAA,EAAQ,CAAA;AAE/I,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO,WAAA;AAAA,sBACL,GAAA,CAAC,SAAI,cAAA,EAAa,EAAA,EAAG,WAAU,cAAA,EAC7B,QAAA,kBAAA,GAAA,CAAC,gBAAa,KAAA,EAAO,IAAA,EAAM,8BAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,MAC3C,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wBAAA,EACZ,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBACT,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAW,EAAA;AAAA,YACT,yEAAA;AAAA,YACA,yDAAA;AAAA,YACA;AAAA,WACF;AAAA,UAEC,QAAA,EAAA,GAAA,CAAI,iBAAgB,CAAE,GAAA,CAAI,CAAC,IAAA,qBAC1B,IAAA,CAAC,KAAA,EAAA,EAAkB,SAAA,EAAU,uCAAA,EAC3B,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uFAAA,EACb,QAAA,EAAA,OAAO,KAAK,MAAA,CAAO,SAAA,CAAU,MAAA,KAAW,QAAA,GACrC,KAAK,MAAA,CAAO,SAAA,CAAU,MAAA,GACtB,IAAA,CAAK,OAAO,EAAA,EAClB,CAAA;AAAA,4BACA,GAAA,CAAC,SAAA,EAAA,EAAU,KAAA,EAAO,UAAA,CAAW,IAAA,CAAK,MAAA,CAAO,SAAA,CAAU,IAAA,EAAM,IAAA,CAAK,UAAA,EAAY,CAAA,EAAG;AAAA,WAAA,EAAA,EANrE,IAAA,CAAK,EAOf,CACD;AAAA,SAAA;AAAA,QAhBI,GAAA,CAAI;AAAA,OAkBZ,CAAA,EACH,CAAA,EACA,CAAA,EAAU,CAAA,EACZ;AAAA,KACF;AAAA,EACF;AAEA,EAAA,MAAM,SAAA,GAAY,CAAC,MAAA,qBACjB,IAAA,CAAC,UAAK,SAAA,EAAU,sCAAA,EAAuC,eAAY,MAAA,EACjE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,MAAK,YAAA,EAAa,IAAA,EAAM,IAAI,SAAA,EAAW,MAAA,KAAW,KAAA,GAAQ,iCAAA,GAAoC,YAAA,EAAc,CAAA;AAAA,oBAClH,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,cAAA,EAAe,IAAA,EAAM,IAAI,SAAA,EAAW,MAAA,KAAW,MAAA,GAAS,iCAAA,GAAoC,YAAA,EAAc;AAAA,GAAA,EACvH,CAAA;AAEF,EAAA,MAAM,UAAA,GAAa,CAAC,MAAA,EAA4B,CAAA,KAAc;AAC5D,IAAA,MAAM,OAAA,GAAU,MAAA,CAAO,MAAA,CAAO,UAAA,EAAW;AACzC,IAAA,MAAM,MAAA,GAAS,MAAA,CAAO,MAAA,CAAO,WAAA,EAAY;AACzC,IAAA,MAAM,IAAA,GAAO,MAAA,CAAO,MAAA,CAAO,SAAA,CAAU,IAAA;AACrC,IAAA,MAAM,UAAA,GAAa,MAAA,CAAO,MAAA,CAAO,MAAA,CAAO,IAAI,IAAI,CAAA;AAChD,IAAA,MAAM,WAAA,GAAc,IAAA,EAAM,KAAA,KAAU,UAAA,KAAe,WAAW,OAAA,GAAU,MAAA,CAAA;AACxE,IAAA,MAAM,UAAU,UAAA,KAAe,QAAA,IAAY,UAAA,KAAe,MAAA,KAAW,CAAC,IAAA,EAAM,QAAA;AAC5E,IAAA,MAAM,EAAA,GAAK,EAAE,CAAA,EAAG,EAAA,EAAI,CAAA,EAAE;AACtB,IAAA,MAAM,KAAA,GAAQ,WAAW,MAAA,CAAO,MAAA,CAAO,UAAU,MAAA,EAAQ,MAAA,CAAO,YAAY,CAAA;AAE5E,IAAA,MAAM,SAAS,OAAA,mBACb,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,OAAA,EAAS,MAAA,CAAO,MAAA,CAAO,uBAAA,EAAwB;AAAA,QAC9C,GAAI,QAAA,GAAW,EAAE,eAAA,EAAiB,OAAA,CAAQ,EAAE,CAAA,EAAG,QAAA,EAAU,IAAA,CAAK,UAAA,CAAW,EAAE,CAAA,KAAM,EAAC;AAAA,QACnF,SAAA,EAAW,EAAA;AAAA,UACT,mHAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,KAAA;AAAA,UACA,UAAU,MAAM;AAAA;AAAA;AAAA,KACnB,GACE,KAAA;AACJ,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QAEC,IAAA,EAAM,WAAW,cAAA,GAAiB,MAAA;AAAA,QAClC,aAAW,MAAA,KAAW,KAAA,GAAQ,WAAA,GAAc,MAAA,KAAW,SAAS,YAAA,GAAe,MAAA;AAAA,QAC9E,GAAI,QAAA,IAAY,CAAC,OAAA,GAAU,EAAE,eAAA,EAAiB,OAAA,CAAQ,EAAE,CAAA,EAAG,UAAU,IAAA,CAAK,UAAA,CAAW,EAAE,CAAA,KAAM,EAAC;AAAA,QAC/F,SAAA,EAAW,EAAA;AAAA,UACT,kFAAA;AAAA,UACA,WAAA,KAAgB,OAAA,GAAU,YAAA,GAAe,WAAA,KAAgB,WAAW,aAAA,GAAgB,WAAA;AAAA,UACpF,MAAA,IAAU,wBAAA;AAAA,UACV;AAAA,SACF;AAAA,QACA,OAAO,IAAA,EAAM,QAAA,IAAY,IAAA,EAAM,KAAA,IAAS,MAAM,QAAA,GAAW,EAAE,QAAA,EAAU,IAAA,EAAM,UAAU,KAAA,EAAO,IAAA,EAAM,OAAO,QAAA,EAAU,IAAA,EAAM,UAAS,GAAI,MAAA;AAAA,QAEtI,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,EAAA,CAAG,4BAAA,EAA8B,WAAA,KAAgB,OAAA,IAAW,aAAA,EAAe,WAAA,KAAgB,QAAA,IAAY,gBAAgB,CAAA,EACrI,QAAA,EAAA,MAAA,EACH;AAAA,OAAA;AAAA,MAdK,MAAA,CAAO;AAAA,KAed;AAAA,EAEJ,CAAA;AAEA,EAAA,OAAO,WAAA;AAAA,oBACL,IAAA,CAAC,KAAA,EAAA,EAAI,cAAA,EAAa,EAAA,EAAG,WAAU,SAAA,EAC7B,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,mBAAA,EAAkB,EAAA;AAAA,UAClB,SAAA,EAAW,EAAA;AAAA,YACT,6DAAA;AAAA,YACA,yEAAA;AAAA,YACA,gCAAA;AAAA,YACA;AAAA,WACF;AAAA,UAEA,QAAA,kBAAA,IAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,OAAA;AAAA,cACL,IAAA,EAAM,WAAW,MAAA,GAAS,MAAA;AAAA,cAC1B,YAAA,EAAY,SAAA;AAAA,cACZ,SAAA,EAAW,WAAW,aAAA,GAAgB,MAAA;AAAA,cACtC,OAAA,EAAS,WAAW,WAAA,GAAc,MAAA;AAAA,cAClC,SAAA,EAAU,gBAAA;AAAA,cAEV,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,yBAAA,EACd,QAAA,EAAA,KAAA,CAAM,eAAA,EAAgB,CAAE,GAAA,CAAI,CAAC,EAAA,qBAC5B,GAAA,CAAC,IAAA,EAAA,EAAe,IAAA,EAAM,WAAW,KAAA,GAAQ,MAAA,EAAW,SAAA,EAAU,4EAAA,EAC3D,QAAA,EAAA,EAAA,CAAG,OAAA,CAAQ,GAAA,CAAI,CAAC,QAAQ,CAAA,KAAM,UAAA,CAAW,MAAA,EAAQ,CAAC,CAAC,CAAA,EAAA,EAD7C,EAAA,CAAG,EAEZ,CACD,CAAA,EACH,CAAA;AAAA,gCACA,GAAA,CAAC,OAAA,EAAA,EAAM,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,MACpB,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,EAAK,CAAA,qBACd,GAAA;AAAA,kBAAC,IAAA;AAAA,kBAAA;AAAA,oBAEC,IAAA,EAAM,WAAW,KAAA,GAAQ,MAAA;AAAA,oBACzB,SAAA,EAAW,EAAA;AAAA,sBACT,4FAAA;AAAA,sBACA;AAAA,qBACF;AAAA,oBAEC,cAAI,eAAA,EAAgB,CAAE,GAAA,CAAI,CAAC,MAAM,CAAA,KAAM;AACtC,sBAAA,MAAM,IAAA,GAAO,IAAA,CAAK,MAAA,CAAO,SAAA,CAAU,IAAA;AACnC,sBAAA,MAAM,UAAA,GAAa,MAAM,QAAA,KAAa,IAAA,GAAO,IAAI,IAAA,EAAM,QAAA,GAAW,IAAA,CAAK,QAAA,CAAS,KAAA,GAAQ,CAAA;AACxF,sBAAA,MAAM,IAAA,GAAO,MAAA,CAAO,IAAA,CAAK,MAAA,CAAO,IAAI,IAAI,CAAA;AACxC,sBAAA,MAAM,QAAA,GAAW,WAAW,IAAA,CAAK,MAAA,CAAO,UAAU,IAAA,EAAM,IAAA,CAAK,YAAuC,CAAA;AACpG,sBAAA,MAAM,EAAA,GAAK,EAAE,CAAA,EAAG,CAAA,EAAE;AAClB,sBAAA,MAAM,YAAY,QAAA,IAAY,OAAA,EAAS,QAAQ,GAAA,CAAI,EAAA,IAAM,QAAQ,CAAA,KAAM,CAAA;AAEvE,sBAAA,MAAM,UAAU,IAAA,KAAS,QAAA,IAAY,IAAA,KAAS,MAAA,KAAW,CAAC,IAAA,EAAM,QAAA;AAChE,sBAAA,IAAI,KAAA;AACJ,sBAAA,IAAI,SAAA,EAAW;AAIb,wBAAA,KAAA,mBACE,GAAA,CAAC,aAAA,EAAA,EAAc,KAAA,EAAO,IAAA,EACpB,QAAA,kBAAA,GAAA;AAAA,0BAAC,KAAA;AAAA,0BAAA;AAAA,4BACC,IAAA,EAAK,IAAA;AAAA,4BACL,SAAA,EAAS,IAAA;AAAA,4BACT,YAAA,EAAY,UAAA,CAAW,IAAA,CAAK,MAAA,CAAO,EAAE,CAAA;AAAA,4BAErC,OAAA,EAAS,CAAC,CAAA,KAAM,CAAA,CAAE,cAAc,MAAA,EAAO;AAAA,4BACvC,OAAO,OAAA,CAAQ,KAAA;AAAA,4BACf,QAAA,EAAU,CAAC,CAAA,KAAM,UAAA,CAAW,EAAE,GAAG,OAAA,EAAS,KAAA,EAAO,CAAA,CAAE,MAAA,CAAO,KAAA,EAAO,CAAA;AAAA,4BACjE,MAAA,EAAQ,MAAM,UAAA,CAAW,IAAA,EAAM,KAAK,CAAA;AAAA,4BACpC,SAAA,EAAW,CAAC,CAAA,KAAM;AAChB,8BAAA,IAAI,CAAA,CAAE,QAAQ,OAAA,EAAS;AAAE,gCAAA,CAAA,CAAE,cAAA,EAAe;AAAG,gCAAA,UAAA,CAAW,MAAM,IAAI,CAAA;AAAA,8BAAG,CAAA,MAAA,IAC5D,CAAA,CAAE,GAAA,KAAQ,QAAA,EAAU;AAAE,gCAAA,CAAA,CAAE,cAAA,EAAe;AAAG,gCAAA,CAAA,CAAE,eAAA,EAAgB;AAAG,gCAAA,UAAA,CAAW,OAAO,IAAI,CAAA;AAAA,8BAAG;AAAA,4BACnG;AAAA;AAAA,yBACF,EACF,CAAA;AAAA,sBAEJ,CAAA,MAAA,IAAW,aAAa,CAAA,EAAG;AACzB,wBAAA,KAAA,mBAAQ,GAAA,CAAC,SAAA,EAAA,EAAU,KAAA,EAAO,UAAA,EAAa,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,sBAClD,CAAA,MAAA,IAAW,SAAS,OAAA,EAAS;AAC3B,wBAAA,KAAA,mBACE,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iDAAA,EAAkD,OAAO,OAAO,IAAA,CAAK,QAAA,EAAS,KAAM,QAAA,GAAW,IAAA,CAAK,QAAA,EAAS,GAAc,QACxI,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,sBAEJ,CAAA,MAAO;AACL,wBAAA,KAAA,GAAQ,QAAA;AAAA,sBACV;AAEA,sBAAA,MAAM,KAAA,GAAQ,IAAA,EAAM,KAAA,KAAU,IAAA,KAAS,WAAW,OAAA,GAAU,MAAA,CAAA;AAC5D,sBAAA,MAAM,KAAA,GAAQ,KAAK,QAAA,EAAS;AAC5B,sBAAA,IAAI,CAAC,SAAA,IAAa,KAAA,KAAU,MAAA,IAAU,OAAO,KAAA,KAAU,QAAA,IAAY,OAAO,KAAA,KAAU,QAAA,IAAY,KAAA,KAAU,IAAA,IAAQ,UAAU,MAAA,EAAW;AACrI,wBAAA,KAAA,mBAAQ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,mBAAA,EAAqB,UAAU,QAAA,GAAW,gBAAA,GAAmB,aAAa,CAAA,EAAI,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBACjH;AACA,sBAAA,MAAM,OAAO,QAAA,IAAY,KAAA,EAAO,MAAM,KAAA,CAAM,GAAA,KAAQ,IAAI,EAAA,IAAM,KAAA,CAAM,MAAM,CAAA,mBACtE,GAAA,CAAC,QAAK,IAAA,EAAK,OAAA,EAAQ,MAAM,EAAA,EAAI,SAAA,EAAU,qEAAoE,CAAA,GAC3G,IAAA;AAEJ,sBAAA,uBACE,IAAA;AAAA,wBAAC,IAAA;AAAA,wBAAA;AAAA,0BAGE,GAAI,QAAA,GAAW,EAAE,IAAA,EAAM,YAAY,eAAA,EAAiB,OAAA,CAAQ,EAAE,CAAA,EAAG,UAAU,IAAA,CAAK,UAAA,CAAW,EAAE,CAAA,EAAG,eAAe,MAAM;AAAE,4BAAA,IAAI,CAAC,SAAA,EAAW,SAAA,CAAU,EAAE,CAAA;AAAA,0BAAG,CAAA,KAAM,EAAC;AAAA,0BAC9J,SAAA,EAAW,EAAA;AAAA,4BACT,+CAAA;AAAA,4BACA,UAAU,OAAA,IAAW,YAAA;AAAA,4BACrB,UAAU,QAAA,IAAY,aAAA;AAAA,4BACtB,MAAA,IAAU,wBAAA;AAAA,4BACV,QAAA,IAAY;AAAA,2BACd;AAAA,0BACA,OAAO,IAAA,EAAM,QAAA,IAAY,IAAA,EAAM,KAAA,IAAS,MAAM,QAAA,GAAW,EAAE,QAAA,EAAU,IAAA,EAAM,UAAU,KAAA,EAAO,IAAA,EAAM,OAAO,QAAA,EAAU,IAAA,EAAM,UAAS,GAAI,MAAA;AAAA,0BAErI,QAAA,EAAA;AAAA,4BAAA,KAAA;AAAA,4BACA;AAAA;AAAA,yBAAA;AAAA,wBAbI,IAAA,CAAK;AAAA,uBAcZ;AAAA,oBAEJ,CAAC;AAAA,mBAAA;AAAA,kBA9EI,GAAA,CAAI;AAAA,iBAgFZ,GACH,CAAA,EAAU;AAAA;AAAA;AAAA;AACZ;AAAA,OACF;AAAA,MAEC,4BAAY,GAAA,CAAC,KAAA,EAAA,EAAI,MAAK,QAAA,EAAS,SAAA,EAAU,WAAU,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAA0B,QAAA,EAAA,KAAA,GAAS,KAAA,CAAM,KAAK,OAAA,GAAU,WAAA,GAAe,MAA7D,KAAA,EAAO,CAAA,IAAK,CAAoD,CAAA,EAAO;AAAA,KAAA,EACxI;AAAA,GACF;AACF","file":"data-grid.js","sourcesContent":["import { useState, useCallback, useEffect, useLayoutEffect, useMemo, useRef, type ReactNode, type KeyboardEvent as ReactKeyboardEvent } from \"react\";\nimport { useShellPreferences } from \"../lib/preferences\";\nimport {\n useReactTable,\n getCoreRowModel,\n getSortedRowModel,\n flexRender,\n type CellContext,\n type ColumnDef,\n type Header,\n type SortingState,\n} from \"@tanstack/react-table\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../lib/icons\";\nimport { Tooltip } from \"./Tooltip\";\nimport { Input } from \"./Input\";\nimport { Pagination } from \"./Pagination\";\nimport { useTextOverflow } from \"../lib/use-text-overflow\";\nimport { useBreakpoint, type BreakpointKey } from \"../lib/use-breakpoint\";\nimport { inferColumnKinds, type ColumnKind } from \"../lib/table-utils\";\nimport { CardValue } from \"../lib/card-cell\";\nimport { TableCardCtx, RowsCtx, useFramesItself } from \"../lib/surface-context\";\nimport { FormChangeCtx } from \"../lib/form-context\";\nimport { useGridKeyboard } from \"../lib/focus\";\nimport { usePagination, pagerPart, useWholeListCheck, type Pager } from \"../lib/use-pagination\";\nimport { CARDS_BELOW, useCardsSwitch } from \"../lib/use-cards-switch\";\n\n/** Column meta for opt-in truncation. Set on ColumnDef.meta. */\nexport interface DataGridColumnMeta {\n /** true = single-line, or { lines: N } for multi-line clamp. */\n truncate?: boolean | { lines: number };\n /** CSS max-width for the column. */\n maxWidth?: string;\n /** CSS width for the column — sibling grids that share a column set line up when their columns carry the same widths (round 14). */\n width?: string;\n /** CSS min-width for the column. */\n minWidth?: string;\n /** Explicit column kind. When omitted the DataGrid infers it from data values. */\n kind?: ColumnKind;\n /** Horizontal alignment of the header and the cells; a block element (a Checkbox, a Button) is laid out with flex so it follows too (round 14). Default: numbers right, everything else left. */\n align?: \"left\" | \"center\" | \"right\";\n /** In an editable grid, whether this column's cells edit (default true); false for a column that shows (a status, actions). */\n editable?: boolean;\n /**\n * In an editable grid, the value onCellEdit gets from the text typed (default the text itself): a number column's\n * `(text) => Number(text)`, so a salary stays a number (the review of 30 September).\n */\n parse?: (text: string) => unknown;\n}\n\nfunction TruncCell({ children, lines }: { children: ReactNode; lines: number }) {\n const { ref, isTruncated } = useTextOverflow({ lines });\n const clampClass = lines === 1 ? \"truncate\" : `line-clamp-${lines}`;\n const cell = <span ref={ref} className={cn(clampClass, \"block\")}>{children}</span>;\n if (!isTruncated) return cell;\n return <Tooltip content={children}>{cell}</Tooltip>;\n}\n\nexport interface DataGridProps<T> {\n data: T[];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- public API: columns may carry any value type\n columns: ColumnDef<T, any>[];\n /**\n * Rows a page, over the project's (dataDisplay.itemsPerPage), for a grid the user asked to page differently. Leave it\n * out: the grid pages as the project says, with the project's control (Sprint 25.13 A5; it was 10).\n */\n pageSize?: number;\n /**\n * Cells edit in place, as the APG's grid (Sprint 25.13 A5): the grid is one Tab stop and the arrow keys move between\n * cells; Enter or F2 (or a double-click) opens a cell's editor, Enter or leaving it saves and Escape cancels, and a\n * brief tick, announced as \"Saved\", shows the save. A grid saves as you go, so it never marks a form around it.\n */\n editable?: boolean;\n /**\n * A saved edit: the row's index in `data`, the column's id and the new value (the text typed, or the column's\n * `meta.parse` of it). Called only when the value changed. Return a promise to have the tick and \"Saved\" wait for it:\n * a rejection is announced as \"Not saved\", and the page says why and keeps the old value.\n */\n onCellEdit?: (rowIndex: number, columnId: string, value: unknown) => void | Promise<unknown>;\n /** The screen width below which the grid shows cards: the project's responsive.tableToCardsBreakpoint, else \"md\". */\n mobileBreakpoint?: BreakpointKey;\n /**\n * The grid's own width below which it shows cards when it doesn't fit, in px (Sprint 25.13 A35): about a phone's; 0\n * never switches by width. An editable grid never shows cards: it stays the APG's grid, scrolling sideways.\n */\n cardsBelow?: number;\n /**\n * The list's pager (Sprint 25.13 A3), from `usePagination(data)` over the same rows: pass it when the page also shows\n * the count (TableToolbar). Without it the grid pages itself the same way.\n */\n pager?: Pager<unknown>;\n /** The grid's name for assistive tech. */\n \"aria-label\"?: string;\n className?: string;\n}\n\n/** A cell of an editable grid: its row among those drawn (-1 for the header) and its column. */\ninterface CellAt { r: number; c: number }\nconst cellKey = (p: CellAt) => (p.r < 0 ? `h:${p.c}` : `${p.r}:${p.c}`);\n/** A cell by its row's id (null for the header), which a sort or a save that re-sorts never moves to another row. */\ninterface CellId { row: string | null; c: number }\n/** How long the saved tick shows, in ms (A5). */\nconst SAVED_TICK_MS = 1500;\n\nexport function DataGrid<T>({\n data,\n columns,\n pageSize,\n editable = false,\n onCellEdit,\n mobileBreakpoint: mobileBreakpointProp,\n cardsBelow = CARDS_BELOW,\n pager: pagerProp,\n \"aria-label\": ariaLabel,\n className,\n}: DataGridProps<T>) {\n // Sprint 25.14 A44: a grid draws its own frame, so a SplitView's list pane draws none around it\n useFramesItself();\n // Sprint 25.6 (B9): responsive.tableToCardsBreakpoint reaches the table through the shell; a prop wins; md outside any shell.\n const preferences = useShellPreferences();\n const mobileBreakpoint: BreakpointKey = mobileBreakpointProp ?? preferences.tableToCardsBreakpoint ?? \"md\";\n const narrowScreen = useBreakpoint(mobileBreakpoint);\n // A35: cards only on a narrow screen or where the grid's own width is a phone's. An editable grid stays the APG's grid\n // at every width, scrolling sideways: its cards have no editor (the review of 30 September: in a default Drawer, whose\n // body is 359 px, the grid went to cards and could no longer be edited).\n const { cards: isMobile, rootRef } = useCardsSwitch(editable ? false : narrowScreen, editable ? 0 : cardsBelow);\n const [sorting, setSorting] = useState<SortingState>([]);\n const [editing, setEditing] = useState<(CellId & { value: string; was: string }) | null>(null);\n\n /* ── Column kind inference ─────────────────────────────────────────── */\n const columnKeys = useMemo(() => columns.map((c) => c.id ?? (\"accessorKey\" in c ? String(c.accessorKey) : \"\")).filter(Boolean), [columns]);\n const inferredKinds = useMemo(\n () => inferColumnKinds(data as Record<string, unknown>[], columnKeys),\n [data, columnKeys],\n );\n const kindOf = useCallback(\n (colId: string, meta: DataGridColumnMeta | undefined) => meta?.kind ?? inferredKinds.get(colId),\n [inferredKinds],\n );\n\n // TanStack Table returns functions the React Compiler cannot memoise; the\n // compiler would skip this component, which is fine — the project does not\n // use it. The note is informational, not a defect.\n // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Table is not compiler-compatible\n const table = useReactTable({\n data,\n columns,\n state: { sorting },\n onSortingChange: (updater) => { setSorting(updater); pagerProp?.setPage(1); },\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n });\n\n // ── A5 / A3: the project's page size and list style, through the pager, over every row sorted ──\n const sortedRows = table.getRowModel().rows;\n const ownPager = usePagination(sortedRows, { pageSize, resetOn: sorting });\n const pager = pagerProp ?? ownPager;\n useWholeListCheck(\"DataGrid\", data.length, pagerProp);\n const rows = pagerPart(sortedRows, pager);\n const leafColumns = table.getVisibleLeafColumns();\n const headerText = (id: string) => {\n const header = leafColumns.find((c) => c.id === id)?.columnDef.header;\n return typeof header === \"string\" ? header : id;\n };\n\n // ── A5: the grid's keyboard (the APG's grid), when editable ──\n // The Tab stop, the editor and the saved tick are kept by the row's id, so a sort, or a save that re-sorts the rows,\n // keeps each on its row (the review of 30 September: the tick and the Tab stop went to the row now in the old place).\n const gridRef = useRef<HTMLTableElement>(null);\n const [activeId, setActiveId] = useState<CellId>({ row: null, c: 0 });\n const lastRow = rows.length - 1;\n const rowAt = (id: string | null) => (id === null ? -1 : rows.findIndex((row) => row.id === id));\n const idAt = (p: CellAt): CellId => ({ row: p.r < 0 ? null : rows[p.r]?.id ?? null, c: p.c });\n const current: CellAt = { r: Math.min(rowAt(activeId.row), lastRow), c: Math.min(activeId.c, Math.max(0, leafColumns.length - 1)) };\n const setActive = (p: CellAt) => setActiveId(idAt(p));\n const move = (p: CellAt, e: ReactKeyboardEvent): CellAt | null => {\n // Alt with an arrow is the browser's (Back, Forward), and Ctrl or ⌘ with one too; Ctrl or ⌘ with Home or End goes to\n // the grid's first or last cell (the APG's grid)\n if (e.altKey) return null;\n const toCorner = e.ctrlKey || e.metaKey;\n switch (e.key) {\n case \"ArrowRight\": return !toCorner && p.c < leafColumns.length - 1 ? { ...p, c: p.c + 1 } : null;\n case \"ArrowLeft\": return !toCorner && p.c > 0 ? { ...p, c: p.c - 1 } : null;\n case \"ArrowDown\": return !toCorner && p.r < lastRow ? { ...p, r: p.r + 1 } : null;\n case \"ArrowUp\": return !toCorner && p.r > -1 ? { ...p, r: p.r - 1 } : null;\n case \"Home\": return toCorner ? { r: -1, c: 0 } : { ...p, c: 0 };\n case \"End\": return toCorner ? { r: lastRow, c: leafColumns.length - 1 } : { ...p, c: leafColumns.length - 1 };\n default: return null;\n }\n };\n // an edit ends once: Enter saves and unmounts the editor, whose blur must not save it again\n const ended = useRef(false);\n const startEdit = (p: CellAt) => {\n const row = rows[p.r];\n const column = leafColumns[p.c];\n if (!row || !column || (column.columnDef.meta as DataGridColumnMeta | undefined)?.editable === false) return;\n ended.current = false;\n setActive(p);\n const text = String(row.getValue(column.id) ?? \"\");\n setEditing({ row: row.id, c: p.c, value: text, was: text });\n };\n const grid = useGridKeyboard<CellAt>({\n container: gridRef,\n active: current,\n setActive,\n keyOf: cellKey,\n move,\n onActivate: (p, e) => {\n if (p.r < 0) { if (leafColumns[p.c]?.getCanSort()) leafColumns[p.c].toggleSorting(); }\n else if (e.key === \"Enter\") startEdit(p);\n },\n modifierKeys: true,\n });\n const onGridKeyDown = (e: ReactKeyboardEvent) => {\n // F2 opens the cell's editor too (the APG's grid)\n if (e.key === \"F2\" && !editing && current.r >= 0 && e.target instanceof HTMLElement && e.target.getAttribute(\"data-grid-key\") === cellKey(current)) {\n e.preventDefault();\n startEdit(current);\n return;\n }\n grid.onKeyDown(e);\n };\n // the Tab stop follows focus, however it got there: a click, a screen reader's command, a double-click (the hook's\n // contract; the review of 30 September: a clicked cell took no Enter, and ArrowDown went from the header)\n const onGridFocus = (e: React.FocusEvent) => {\n const key = e.target instanceof HTMLElement ? e.target.getAttribute(\"data-grid-key\") : null;\n if (!key) return;\n const [r, c] = key.startsWith(\"h:\") ? [-1, Number(key.slice(2))] : key.split(\":\").map(Number);\n if (Number.isFinite(r) && Number.isFinite(c) && cellKey(current) !== key) setActive({ r, c });\n };\n\n // ── A5: the save, its tick and its announcement ──\n const [saved, setSaved] = useState<{ row: string; c: number; n: number; ok: boolean } | null>(null);\n useEffect(() => {\n if (!saved) return;\n const t = setTimeout(() => setSaved((s) => (s && s.n === saved.n ? null : s)), SAVED_TICK_MS);\n return () => clearTimeout(t);\n }, [saved]);\n const heard = useRef(0);\n // after Enter or Escape focus comes back to the cell, on its row wherever a save that re-sorts puts it: its page first\n const refocus = useRef<CellId | null>(null);\n useLayoutEffect(() => {\n const want = refocus.current;\n if (!want) return;\n const r = rowAt(want.row);\n if (r < 0) {\n const all = sortedRows.findIndex((row) => row.id === want.row);\n if (all >= 0 && pager.style === \"pagination\") { const page = Math.floor(all / pager.pageSize) + 1; if (page !== pager.page) { pager.setPage(page); return; } }\n refocus.current = null;\n return;\n }\n refocus.current = null;\n grid.focus({ r, c: want.c });\n });\n const finishEdit = (commit: boolean, focusBack: boolean) => {\n if (!editing || ended.current) return;\n ended.current = true;\n const r = rowAt(editing.row);\n const row = rows[r];\n const column = leafColumns[editing.c];\n const cell = { row: editing.row, c: editing.c };\n setEditing(null);\n // leaving the editor (a click elsewhere, Tab) saves and lets focus go where it went (the review of 30 September:\n // it pulled focus back, and the next keys were lost)\n if (focusBack) { setActiveId(cell); refocus.current = cell; }\n // a save that changes nothing isn't one\n if (!commit || !row || !column || editing.value === editing.was) return;\n const meta = column.columnDef.meta as DataGridColumnMeta | undefined;\n const done = (ok: boolean) => { heard.current += 1; setSaved({ ...cell, row: editing.row!, n: heard.current, ok }); };\n const result = onCellEdit?.(row.index, column.id, meta?.parse ? meta.parse(editing.value) : editing.value);\n if (result && typeof (result as Promise<unknown>).then === \"function\") (result as Promise<unknown>).then(() => done(true), () => done(false));\n else done(true);\n };\n\n // A3: the grid and its control are one element, as in 0.21, which takes the className: in a grid or a flex row they\n // stay one item (the review of 30 September: the control became an item of its own beside the grid)\n const control = data.length > 0 ? <Pagination {...pager.props} /> : null;\n const setRoot = (node: HTMLDivElement | null) => { rootRef.current = node; };\n const withControl = (list: ReactNode) => <div ref={setRoot} data-gs-paged=\"\" className={cn(\"flex flex-col min-w-0\", className)}>{list}{control}</div>;\n\n if (isMobile) {\n return withControl(\n <div data-ds-list=\"\" className=\"space-y-ds-3\">\n <TableCardCtx value={true}><RowsCtx value={true}>\n <div className=\"flex flex-col gap-ds-3\">\n {rows.map((row) => (\n <div\n key={row.id}\n className={cn(\n \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n \"rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]\",\n \"p-ds-4 space-y-ds-3\",\n )}\n >\n {row.getVisibleCells().map((cell) => (\n <div key={cell.id} className=\"flex justify-between gap-ds-2 text-sm\">\n <span className=\"shrink-0 text-[var(--ds-text-secondary)] font-medium text-xs uppercase tracking-wider\">\n {typeof cell.column.columnDef.header === \"string\"\n ? cell.column.columnDef.header\n : cell.column.id}\n </span>\n <CardValue value={flexRender(cell.column.columnDef.cell, cell.getContext())} />\n </div>\n ))}\n </div>\n ))}\n </div>\n </RowsCtx></TableCardCtx>\n </div>\n );\n }\n\n const sortIcons = (sorted: false | \"asc\" | \"desc\") => (\n <span className=\"inline-flex flex-col -space-y-ds-1.5\" aria-hidden=\"true\">\n <Icon name=\"chevron-up\" size={10} className={sorted === \"asc\" ? \"text-[var(--ds-accent-primary)]\" : \"opacity-30\"} />\n <Icon name=\"chevron-down\" size={10} className={sorted === \"desc\" ? \"text-[var(--ds-accent-primary)]\" : \"opacity-30\"} />\n </span>\n );\n const headerCell = (header: Header<T, unknown>, c: number) => {\n const canSort = header.column.getCanSort();\n const sorted = header.column.getIsSorted();\n const meta = header.column.columnDef.meta as DataGridColumnMeta | undefined;\n const headerKind = kindOf(header.column.id, meta);\n const headerAlign = meta?.align ?? (headerKind === \"number\" ? \"right\" : \"left\");\n const shrink = (headerKind === \"number\" || headerKind === \"date\") && !meta?.maxWidth;\n const at = { r: -1, c };\n const label = flexRender(header.column.columnDef.header, header.getContext());\n // A47: a sortable header holds a button: a Tab stop in a read-only grid, a cell the arrows reach in an editable one\n const inside = canSort ? (\n <button\n type=\"button\"\n onClick={header.column.getToggleSortingHandler()}\n {...(editable ? { \"data-grid-key\": cellKey(at), tabIndex: grid.tabIndexOf(at) } : {})}\n className={cn(\n \"inline-flex items-center gap-ds-1 uppercase tracking-wider cursor-pointer select-none [font:inherit] text-inherit\",\n \"hover:text-[var(--ds-text-primary)] rounded-[var(--ds-radius-sm)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]\",\n )}\n >\n {label}\n {sortIcons(sorted)}\n </button>\n ) : label;\n return (\n <th\n key={header.id}\n role={editable ? \"columnheader\" : undefined}\n aria-sort={sorted === \"asc\" ? \"ascending\" : sorted === \"desc\" ? \"descending\" : undefined}\n {...(editable && !canSort ? { \"data-grid-key\": cellKey(at), tabIndex: grid.tabIndexOf(at) } : {})}\n className={cn(\n \"px-ds-4 py-ds-3 text-xs font-[var(--ds-weight-heading)] uppercase tracking-wider\",\n headerAlign === \"right\" ? \"text-right\" : headerAlign === \"center\" ? \"text-center\" : \"text-left\",\n shrink && \"w-px whitespace-nowrap\",\n \"text-[var(--ds-text-secondary)] outline-none focus-visible:shadow-[inset_var(--ds-shadow-focus)]\",\n )}\n style={meta?.maxWidth || meta?.width || meta?.minWidth ? { maxWidth: meta?.maxWidth, width: meta?.width, minWidth: meta?.minWidth } : undefined}\n >\n <span className={cn(\"flex items-center gap-ds-1\", headerAlign === \"right\" && \"justify-end\", headerAlign === \"center\" && \"justify-center\")}>\n {inside}\n </span>\n </th>\n );\n };\n\n return withControl(\n <div data-ds-list=\"\" className=\"min-w-0\">\n <div\n // the scroll area the width switch reads (A35), as the Table's\n data-table-scroll=\"\"\n className={cn(\n \"relative w-full overflow-auto rounded-[var(--ds-radius-md)]\",\n \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n \"shadow-[var(--ds-shadow-card)]\",\n \"bg-[var(--ds-bg-surface)]\",\n )}\n >\n <table\n ref={gridRef}\n role={editable ? \"grid\" : undefined}\n aria-label={ariaLabel}\n onKeyDown={editable ? onGridKeyDown : undefined}\n onFocus={editable ? onGridFocus : undefined}\n className=\"w-full text-sm\"\n >\n <thead className=\"bg-[var(--ds-bg-muted)]\">\n {table.getHeaderGroups().map((hg) => (\n <tr key={hg.id} role={editable ? \"row\" : undefined} className=\"border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]\">\n {hg.headers.map((header, c) => headerCell(header, c))}\n </tr>\n ))}\n </thead>\n <tbody><RowsCtx value={true}>\n {rows.map((row, r) => (\n <tr\n key={row.id}\n role={editable ? \"row\" : undefined}\n className={cn(\n \"border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0\",\n \"hover:bg-[var(--ds-bg-muted)] transition-colors\",\n )}\n >\n {row.getVisibleCells().map((cell, c) => {\n const meta = cell.column.columnDef.meta as DataGridColumnMeta | undefined;\n const truncLines = meta?.truncate === true ? 1 : meta?.truncate ? meta.truncate.lines : 0;\n const kind = kindOf(cell.column.id, meta);\n const rendered = flexRender(cell.column.columnDef.cell, cell.getContext() as CellContext<T, unknown>);\n const at = { r, c };\n const isEditing = editable && editing?.row === row.id && editing.c === c;\n\n const shrink = (kind === \"number\" || kind === \"date\") && !meta?.maxWidth;\n let inner: ReactNode;\n if (isEditing) {\n // the library's Input, named for its column; Enter or leaving it saves, Escape cancels. A grid saves as\n // you go, so its editor never marks a form around it; the cells' own controls still do (the review\n // of 30 September: the whole grid opted out, and a Drawer closed on a changed checkbox unasked)\n inner = (\n <FormChangeCtx value={null}>\n <Input\n size=\"sm\"\n autoFocus\n aria-label={headerText(cell.column.id)}\n // the value opens selected: typing replaces it, an arrow key keeps it\n onFocus={(e) => e.currentTarget.select()}\n value={editing.value}\n onChange={(e) => setEditing({ ...editing, value: e.target.value })}\n onBlur={() => finishEdit(true, false)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") { e.preventDefault(); finishEdit(true, true); }\n else if (e.key === \"Escape\") { e.preventDefault(); e.stopPropagation(); finishEdit(false, true); }\n }}\n />\n </FormChangeCtx>\n );\n } else if (truncLines > 0) {\n inner = <TruncCell lines={truncLines}>{rendered}</TruncCell>;\n } else if (kind === \"email\") {\n inner = (\n <span className=\"max-w-[40ch] truncate inline-block align-bottom\" title={typeof cell.getValue() === \"string\" ? cell.getValue() as string : undefined}>\n {rendered}\n </span>\n );\n } else {\n inner = rendered;\n }\n // Round 14 (50.2): a centred or right-aligned column lays a block element out with flex — text-align moves inline content only.\n const align = meta?.align ?? (kind === \"number\" ? \"right\" : \"left\");\n const value = cell.getValue();\n if (!isEditing && align !== \"left\" && typeof value !== \"string\" && typeof value !== \"number\" && value !== null && value !== undefined) {\n inner = <div className={cn(\"flex items-center\", align === \"center\" ? \"justify-center\" : \"justify-end\")}>{inner}</div>;\n }\n const tick = editable && saved?.ok && saved.row === row.id && saved.c === c\n ? <Icon name=\"check\" size={14} className=\"ml-ds-1 inline-block align-middle text-[var(--ds-status-success)]\" />\n : null;\n\n return (\n <td\n key={cell.id}\n // a double-click in the open editor selects a word, and never reopens it over what was typed\n {...(editable ? { role: \"gridcell\", \"data-grid-key\": cellKey(at), tabIndex: grid.tabIndexOf(at), onDoubleClick: () => { if (!isEditing) startEdit(at); } } : {})}\n className={cn(\n \"px-ds-4 py-ds-3 text-[var(--ds-text-primary)]\",\n align === \"right\" && \"text-right\",\n align === \"center\" && \"text-center\",\n shrink && \"w-px whitespace-nowrap\",\n editable && \"outline-none focus-visible:shadow-[inset_var(--ds-shadow-focus)]\",\n )}\n style={meta?.maxWidth || meta?.width || meta?.minWidth ? { maxWidth: meta?.maxWidth, width: meta?.width, minWidth: meta?.minWidth } : undefined}\n >\n {inner}\n {tick}\n </td>\n );\n })}\n </tr>\n ))}\n </RowsCtx></tbody>\n </table>\n </div>\n {/* A5: a save is heard, politely (WCAG 4.1.3); each one is a new line, so two saves are heard twice */}\n {editable && <div role=\"status\" className=\"sr-only\"><span key={saved?.n ?? 0}>{saved ? (saved.ok ? \"Saved\" : \"Not saved\") : \"\"}</span></div>}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../showcase/src/components/DataGrid.tsx"],"names":[],"mappings":"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","file":"data-grid.js","sourcesContent":["import { useState, useCallback, useEffect, useLayoutEffect, useMemo, useRef, type ReactNode, type KeyboardEvent as ReactKeyboardEvent } from \"react\";\nimport { useShellPreferences } from \"../lib/preferences\";\nimport {\n useReactTable,\n getCoreRowModel,\n getSortedRowModel,\n flexRender,\n type CellContext,\n type ColumnDef,\n type Header,\n type SortingState,\n} from \"@tanstack/react-table\";\nimport { cn, FOCUS_INSET, FOCUS_RING } from \"../lib/utils\";\nimport { Icon } from \"../lib/icons\";\nimport { Tooltip } from \"./Tooltip\";\nimport { Input } from \"./Input\";\nimport { Pagination } from \"./Pagination\";\nimport { useTextOverflow } from \"../lib/use-text-overflow\";\nimport { useBreakpoint, type BreakpointKey } from \"../lib/use-breakpoint\";\nimport { useRevealFocus } from \"../lib/reveal-focus\";\nimport { inferColumnKinds, type ColumnKind } from \"../lib/table-utils\";\nimport { CardValue } from \"../lib/card-cell\";\nimport { TableCardCtx, RowsCtx, useFramesItself } from \"../lib/surface-context\";\nimport { FormChangeCtx } from \"../lib/form-context\";\nimport { useGridKeyboard } from \"../lib/focus\";\nimport { usePagination, pagerPart, useWholeListCheck, type Pager } from \"../lib/use-pagination\";\nimport { CARDS_BELOW, useCardsSwitch } from \"../lib/use-cards-switch\";\n\n/** Column meta for opt-in truncation. Set on ColumnDef.meta. */\nexport interface DataGridColumnMeta {\n /** true = single-line, or { lines: N } for multi-line clamp. */\n truncate?: boolean | { lines: number };\n /** CSS max-width for the column. */\n maxWidth?: string;\n /** CSS width for the column — sibling grids that share a column set line up when their columns carry the same widths (round 14). */\n width?: string;\n /** CSS min-width for the column. */\n minWidth?: string;\n /** Explicit column kind. When omitted the DataGrid infers it from data values. */\n kind?: ColumnKind;\n /** Horizontal alignment of the header and the cells; a block element (a Checkbox, a Button) is laid out with flex so it follows too (round 14). Default: numbers right, everything else left. */\n align?: \"left\" | \"center\" | \"right\";\n /** In an editable grid, whether this column's cells edit (default true); false for a column that shows (a status, actions). */\n editable?: boolean;\n /**\n * In an editable grid, the value onCellEdit gets from the text typed (default the text itself): a number column's\n * `(text) => Number(text)`, so a salary stays a number (the review of 30 September).\n */\n parse?: (text: string) => unknown;\n}\n\nfunction TruncCell({ children, lines }: { children: ReactNode; lines: number }) {\n const { ref, isTruncated } = useTextOverflow({ lines });\n const clampClass = lines === 1 ? \"truncate\" : `line-clamp-${lines}`;\n const cell = <span ref={ref} className={cn(clampClass, \"block\")}>{children}</span>;\n if (!isTruncated) return cell;\n return <Tooltip content={children}>{cell}</Tooltip>;\n}\n\nexport interface DataGridProps<T> {\n data: T[];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- public API: columns may carry any value type\n columns: ColumnDef<T, any>[];\n /**\n * Rows a page, over the project's (dataDisplay.itemsPerPage), for a grid the user asked to page differently. Leave it\n * out: the grid pages as the project says, with the project's control (Sprint 25.13 A5; it was 10).\n */\n pageSize?: number;\n /**\n * Cells edit in place, as the APG's grid (Sprint 25.13 A5): the grid is one Tab stop and the arrow keys move between\n * cells; Enter or F2 (or a double-click) opens a cell's editor, Enter or leaving it saves and Escape cancels, and a\n * brief tick, announced as \"Saved\", shows the save. A grid saves as you go, so it never marks a form around it.\n */\n editable?: boolean;\n /**\n * A saved edit: the row's index in `data`, the column's id and the new value (the text typed, or the column's\n * `meta.parse` of it). Called only when the value changed. Return a promise to have the tick and \"Saved\" wait for it:\n * a rejection is announced as \"Not saved\", and the page says why and keeps the old value.\n */\n onCellEdit?: (rowIndex: number, columnId: string, value: unknown) => void | Promise<unknown>;\n /** The screen width below which the grid shows cards: the project's responsive.tableToCardsBreakpoint, else \"md\". */\n mobileBreakpoint?: BreakpointKey;\n /**\n * The grid's own width below which it shows cards when it doesn't fit, in px (Sprint 25.13 A35): about a phone's; 0\n * never switches by width. An editable grid never shows cards: it stays the APG's grid, scrolling sideways.\n */\n cardsBelow?: number;\n /**\n * The list's pager (Sprint 25.13 A3), from `usePagination(data)` over the same rows: pass it when the page also shows\n * the count (TableToolbar). Without it the grid pages itself the same way.\n */\n pager?: Pager<unknown>;\n /** The grid's name for assistive tech. */\n \"aria-label\"?: string;\n className?: string;\n}\n\n/** A cell of an editable grid: its row among those drawn (-1 for the header) and its column. */\ninterface CellAt { r: number; c: number }\nconst cellKey = (p: CellAt) => (p.r < 0 ? `h:${p.c}` : `${p.r}:${p.c}`);\n/** A cell by its row's id (null for the header), which a sort or a save that re-sorts never moves to another row. */\ninterface CellId { row: string | null; c: number }\n/** How long the saved tick shows, in ms (A5). */\nconst SAVED_TICK_MS = 1500;\n\nexport function DataGrid<T>({\n data,\n columns,\n pageSize,\n editable = false,\n onCellEdit,\n mobileBreakpoint: mobileBreakpointProp,\n cardsBelow = CARDS_BELOW,\n pager: pagerProp,\n \"aria-label\": ariaLabel,\n className,\n}: DataGridProps<T>) {\n // Sprint 25.14 A44: a grid draws its own frame, so a SplitView's list pane draws none around it\n useFramesItself();\n // Sprint 25.6 (B9): responsive.tableToCardsBreakpoint reaches the table through the shell; a prop wins; md outside any shell.\n const preferences = useShellPreferences();\n const mobileBreakpoint: BreakpointKey = mobileBreakpointProp ?? preferences.tableToCardsBreakpoint ?? \"md\";\n const narrowScreen = useBreakpoint(mobileBreakpoint);\n // A35: cards only on a narrow screen or where the grid's own width is a phone's. An editable grid stays the APG's grid\n // at every width, scrolling sideways: its cards have no editor (the review of 30 September: in a default Drawer, whose\n // body is 359 px, the grid went to cards and could no longer be edited).\n const { cards: isMobile, rootRef } = useCardsSwitch(editable ? false : narrowScreen, editable ? 0 : cardsBelow);\n const [sorting, setSorting] = useState<SortingState>([]);\n // the scroll area: a header or a cell the keyboard reaches is scrolled in whole, with its outline (Sprint 30, P3)\n const [scrollArea, setScrollArea] = useState<HTMLDivElement | null>(null);\n useRevealFocus(scrollArea);\n const [editing, setEditing] = useState<(CellId & { value: string; was: string }) | null>(null);\n\n /* ── Column kind inference ─────────────────────────────────────────── */\n const columnKeys = useMemo(() => columns.map((c) => c.id ?? (\"accessorKey\" in c ? String(c.accessorKey) : \"\")).filter(Boolean), [columns]);\n const inferredKinds = useMemo(\n () => inferColumnKinds(data as Record<string, unknown>[], columnKeys),\n [data, columnKeys],\n );\n const kindOf = useCallback(\n (colId: string, meta: DataGridColumnMeta | undefined) => meta?.kind ?? inferredKinds.get(colId),\n [inferredKinds],\n );\n\n // TanStack Table returns functions the React Compiler cannot memoise; the\n // compiler would skip this component, which is fine — the project does not\n // use it. The note is informational, not a defect.\n // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Table is not compiler-compatible\n const table = useReactTable({\n data,\n columns,\n state: { sorting },\n onSortingChange: (updater) => { setSorting(updater); pagerProp?.setPage(1); },\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n });\n\n // ── A5 / A3: the project's page size and list style, through the pager, over every row sorted ──\n const sortedRows = table.getRowModel().rows;\n const ownPager = usePagination(sortedRows, { pageSize, resetOn: sorting });\n const pager = pagerProp ?? ownPager;\n useWholeListCheck(\"DataGrid\", data.length, pagerProp);\n const rows = pagerPart(sortedRows, pager);\n const leafColumns = table.getVisibleLeafColumns();\n const headerText = (id: string) => {\n const header = leafColumns.find((c) => c.id === id)?.columnDef.header;\n return typeof header === \"string\" ? header : id;\n };\n\n // ── A5: the grid's keyboard (the APG's grid), when editable ──\n // The Tab stop, the editor and the saved tick are kept by the row's id, so a sort, or a save that re-sorts the rows,\n // keeps each on its row (the review of 30 September: the tick and the Tab stop went to the row now in the old place).\n const gridRef = useRef<HTMLTableElement>(null);\n const [activeId, setActiveId] = useState<CellId>({ row: null, c: 0 });\n const lastRow = rows.length - 1;\n const rowAt = (id: string | null) => (id === null ? -1 : rows.findIndex((row) => row.id === id));\n const idAt = (p: CellAt): CellId => ({ row: p.r < 0 ? null : rows[p.r]?.id ?? null, c: p.c });\n const current: CellAt = { r: Math.min(rowAt(activeId.row), lastRow), c: Math.min(activeId.c, Math.max(0, leafColumns.length - 1)) };\n const setActive = (p: CellAt) => setActiveId(idAt(p));\n const move = (p: CellAt, e: ReactKeyboardEvent): CellAt | null => {\n // Alt with an arrow is the browser's (Back, Forward), and Ctrl or ⌘ with one too; Ctrl or ⌘ with Home or End goes to\n // the grid's first or last cell (the APG's grid)\n if (e.altKey) return null;\n const toCorner = e.ctrlKey || e.metaKey;\n switch (e.key) {\n case \"ArrowRight\": return !toCorner && p.c < leafColumns.length - 1 ? { ...p, c: p.c + 1 } : null;\n case \"ArrowLeft\": return !toCorner && p.c > 0 ? { ...p, c: p.c - 1 } : null;\n case \"ArrowDown\": return !toCorner && p.r < lastRow ? { ...p, r: p.r + 1 } : null;\n case \"ArrowUp\": return !toCorner && p.r > -1 ? { ...p, r: p.r - 1 } : null;\n case \"Home\": return toCorner ? { r: -1, c: 0 } : { ...p, c: 0 };\n case \"End\": return toCorner ? { r: lastRow, c: leafColumns.length - 1 } : { ...p, c: leafColumns.length - 1 };\n default: return null;\n }\n };\n // an edit ends once: Enter saves and unmounts the editor, whose blur must not save it again\n const ended = useRef(false);\n const startEdit = (p: CellAt) => {\n const row = rows[p.r];\n const column = leafColumns[p.c];\n if (!row || !column || (column.columnDef.meta as DataGridColumnMeta | undefined)?.editable === false) return;\n ended.current = false;\n setActive(p);\n const text = String(row.getValue(column.id) ?? \"\");\n setEditing({ row: row.id, c: p.c, value: text, was: text });\n };\n const grid = useGridKeyboard<CellAt>({\n container: gridRef,\n active: current,\n setActive,\n keyOf: cellKey,\n move,\n onActivate: (p, e) => {\n if (p.r < 0) { if (leafColumns[p.c]?.getCanSort()) leafColumns[p.c].toggleSorting(); }\n else if (e.key === \"Enter\") startEdit(p);\n },\n modifierKeys: true,\n });\n const onGridKeyDown = (e: ReactKeyboardEvent) => {\n // F2 opens the cell's editor too (the APG's grid)\n if (e.key === \"F2\" && !editing && current.r >= 0 && e.target instanceof HTMLElement && e.target.getAttribute(\"data-grid-key\") === cellKey(current)) {\n e.preventDefault();\n startEdit(current);\n return;\n }\n grid.onKeyDown(e);\n };\n // the Tab stop follows focus, however it got there: a click, a screen reader's command, a double-click (the hook's\n // contract; the review of 30 September: a clicked cell took no Enter, and ArrowDown went from the header)\n const onGridFocus = (e: React.FocusEvent) => {\n const key = e.target instanceof HTMLElement ? e.target.getAttribute(\"data-grid-key\") : null;\n if (!key) return;\n const [r, c] = key.startsWith(\"h:\") ? [-1, Number(key.slice(2))] : key.split(\":\").map(Number);\n if (Number.isFinite(r) && Number.isFinite(c) && cellKey(current) !== key) setActive({ r, c });\n };\n\n // ── A5: the save, its tick and its announcement ──\n const [saved, setSaved] = useState<{ row: string; c: number; n: number; ok: boolean } | null>(null);\n useEffect(() => {\n if (!saved) return;\n const t = setTimeout(() => setSaved((s) => (s && s.n === saved.n ? null : s)), SAVED_TICK_MS);\n return () => clearTimeout(t);\n }, [saved]);\n const heard = useRef(0);\n // after Enter or Escape focus comes back to the cell, on its row wherever a save that re-sorts puts it: its page first\n const refocus = useRef<CellId | null>(null);\n useLayoutEffect(() => {\n const want = refocus.current;\n if (!want) return;\n const r = rowAt(want.row);\n if (r < 0) {\n const all = sortedRows.findIndex((row) => row.id === want.row);\n if (all >= 0 && pager.style === \"pagination\") { const page = Math.floor(all / pager.pageSize) + 1; if (page !== pager.page) { pager.setPage(page); return; } }\n refocus.current = null;\n return;\n }\n refocus.current = null;\n grid.focus({ r, c: want.c });\n });\n const finishEdit = (commit: boolean, focusBack: boolean) => {\n if (!editing || ended.current) return;\n ended.current = true;\n const r = rowAt(editing.row);\n const row = rows[r];\n const column = leafColumns[editing.c];\n const cell = { row: editing.row, c: editing.c };\n setEditing(null);\n // leaving the editor (a click elsewhere, Tab) saves and lets focus go where it went (the review of 30 September:\n // it pulled focus back, and the next keys were lost)\n if (focusBack) { setActiveId(cell); refocus.current = cell; }\n // a save that changes nothing isn't one\n if (!commit || !row || !column || editing.value === editing.was) return;\n const meta = column.columnDef.meta as DataGridColumnMeta | undefined;\n const done = (ok: boolean) => { heard.current += 1; setSaved({ ...cell, row: editing.row!, n: heard.current, ok }); };\n const result = onCellEdit?.(row.index, column.id, meta?.parse ? meta.parse(editing.value) : editing.value);\n if (result && typeof (result as Promise<unknown>).then === \"function\") (result as Promise<unknown>).then(() => done(true), () => done(false));\n else done(true);\n };\n\n // A3: the grid and its control are one element, as in 0.21, which takes the className: in a grid or a flex row they\n // stay one item (the review of 30 September: the control became an item of its own beside the grid)\n const control = data.length > 0 ? <Pagination {...pager.props} /> : null;\n const setRoot = (node: HTMLDivElement | null) => { rootRef.current = node; };\n const withControl = (list: ReactNode) => <div ref={setRoot} data-gs-paged=\"\" className={cn(\"flex flex-col min-w-0\", className)}>{list}{control}</div>;\n\n if (isMobile) {\n return withControl(\n <div data-ds-list=\"\" className=\"space-y-ds-3\">\n <TableCardCtx value={true}><RowsCtx value={true}>\n <div className=\"flex flex-col gap-ds-3\">\n {rows.map((row) => (\n <div\n key={row.id}\n className={cn(\n \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n \"rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]\",\n \"p-ds-4 space-y-ds-3\",\n )}\n >\n {row.getVisibleCells().map((cell) => (\n <div key={cell.id} className=\"flex justify-between gap-ds-2 text-sm\">\n <span className=\"shrink-0 text-[var(--ds-text-secondary)] font-medium text-xs uppercase tracking-wider\">\n {typeof cell.column.columnDef.header === \"string\"\n ? cell.column.columnDef.header\n : cell.column.id}\n </span>\n <CardValue value={flexRender(cell.column.columnDef.cell, cell.getContext())} />\n </div>\n ))}\n </div>\n ))}\n </div>\n </RowsCtx></TableCardCtx>\n </div>\n );\n }\n\n const sortIcons = (sorted: false | \"asc\" | \"desc\") => (\n <span className=\"inline-flex flex-col -space-y-ds-1.5\" aria-hidden=\"true\">\n <Icon name=\"chevron-up\" size={10} className={sorted === \"asc\" ? \"text-[var(--ds-accent-ink)]\" : \"opacity-30\"} />\n <Icon name=\"chevron-down\" size={10} className={sorted === \"desc\" ? \"text-[var(--ds-accent-ink)]\" : \"opacity-30\"} />\n </span>\n );\n const headerCell = (header: Header<T, unknown>, c: number) => {\n const canSort = header.column.getCanSort();\n const sorted = header.column.getIsSorted();\n const meta = header.column.columnDef.meta as DataGridColumnMeta | undefined;\n const headerKind = kindOf(header.column.id, meta);\n const headerAlign = meta?.align ?? (headerKind === \"number\" ? \"right\" : \"left\");\n const shrink = (headerKind === \"number\" || headerKind === \"date\") && !meta?.maxWidth;\n const at = { r: -1, c };\n const label = flexRender(header.column.columnDef.header, header.getContext());\n // A47: a sortable header holds a button: a Tab stop in a read-only grid, a cell the arrows reach in an editable one\n const inside = canSort ? (\n <button\n type=\"button\"\n onClick={header.column.getToggleSortingHandler()}\n {...(editable ? { \"data-grid-key\": cellKey(at), tabIndex: grid.tabIndexOf(at) } : {})}\n className={cn(\n \"inline-flex items-center gap-ds-1 uppercase tracking-wider cursor-pointer select-none [font:inherit] text-inherit\",\n \"hover:text-[var(--ds-text-primary)] rounded-[var(--ds-radius-sm)]\",\n FOCUS_RING,\n )}\n >\n {label}\n {sortIcons(sorted)}\n </button>\n ) : label;\n return (\n <th\n key={header.id}\n role={editable ? \"columnheader\" : undefined}\n aria-sort={sorted === \"asc\" ? \"ascending\" : sorted === \"desc\" ? \"descending\" : undefined}\n {...(editable && !canSort ? { \"data-grid-key\": cellKey(at), tabIndex: grid.tabIndexOf(at) } : {})}\n className={cn(\n \"px-ds-4 py-ds-3 text-xs font-[var(--ds-weight-heading)] uppercase tracking-wider\",\n headerAlign === \"right\" ? \"text-right\" : headerAlign === \"center\" ? \"text-center\" : \"text-left\",\n shrink && \"w-px whitespace-nowrap\",\n \"text-[var(--ds-text-secondary)]\",\n FOCUS_INSET,\n )}\n style={meta?.maxWidth || meta?.width || meta?.minWidth ? { maxWidth: meta?.maxWidth, width: meta?.width, minWidth: meta?.minWidth } : undefined}\n >\n <span className={cn(\"flex items-center gap-ds-1\", headerAlign === \"right\" && \"justify-end\", headerAlign === \"center\" && \"justify-center\")}>\n {inside}\n </span>\n </th>\n );\n };\n\n return withControl(\n <div data-ds-list=\"\" className=\"min-w-0\">\n <div\n ref={setScrollArea}\n // the scroll area the width switch reads (A35), as the Table's\n data-table-scroll=\"\"\n className={cn(\n \"relative w-full overflow-auto scroll-p-[4px] rounded-[var(--ds-radius-md)]\",\n \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n \"shadow-[var(--ds-shadow-card)]\",\n \"bg-[var(--ds-bg-surface)]\",\n )}\n >\n <table\n ref={gridRef}\n role={editable ? \"grid\" : undefined}\n aria-label={ariaLabel}\n onKeyDown={editable ? onGridKeyDown : undefined}\n onFocus={editable ? onGridFocus : undefined}\n className=\"w-full text-sm\"\n >\n <thead className=\"bg-[var(--ds-bg-muted)]\">\n {table.getHeaderGroups().map((hg) => (\n <tr key={hg.id} role={editable ? \"row\" : undefined} className=\"border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]\">\n {hg.headers.map((header, c) => headerCell(header, c))}\n </tr>\n ))}\n </thead>\n <tbody><RowsCtx value={true}>\n {rows.map((row, r) => (\n <tr\n key={row.id}\n role={editable ? \"row\" : undefined}\n className={cn(\n \"border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0\",\n \"hover:bg-[var(--ds-bg-muted)] transition-colors\",\n )}\n >\n {row.getVisibleCells().map((cell, c) => {\n const meta = cell.column.columnDef.meta as DataGridColumnMeta | undefined;\n const truncLines = meta?.truncate === true ? 1 : meta?.truncate ? meta.truncate.lines : 0;\n const kind = kindOf(cell.column.id, meta);\n const rendered = flexRender(cell.column.columnDef.cell, cell.getContext() as CellContext<T, unknown>);\n const at = { r, c };\n const isEditing = editable && editing?.row === row.id && editing.c === c;\n\n const shrink = (kind === \"number\" || kind === \"date\") && !meta?.maxWidth;\n let inner: ReactNode;\n if (isEditing) {\n // the library's Input, named for its column; Enter or leaving it saves, Escape cancels. A grid saves as\n // you go, so its editor never marks a form around it; the cells' own controls still do (the review\n // of 30 September: the whole grid opted out, and a Drawer closed on a changed checkbox unasked)\n inner = (\n <FormChangeCtx value={null}>\n <Input\n size=\"sm\"\n autoFocus\n aria-label={headerText(cell.column.id)}\n // the value opens selected: typing replaces it, an arrow key keeps it\n onFocus={(e) => e.currentTarget.select()}\n value={editing.value}\n onChange={(e) => setEditing({ ...editing, value: e.target.value })}\n onBlur={() => finishEdit(true, false)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") { e.preventDefault(); finishEdit(true, true); }\n else if (e.key === \"Escape\") { e.preventDefault(); e.stopPropagation(); finishEdit(false, true); }\n }}\n />\n </FormChangeCtx>\n );\n } else if (truncLines > 0) {\n inner = <TruncCell lines={truncLines}>{rendered}</TruncCell>;\n } else if (kind === \"email\") {\n inner = (\n <span className=\"max-w-[40ch] truncate inline-block align-bottom\" title={typeof cell.getValue() === \"string\" ? cell.getValue() as string : undefined}>\n {rendered}\n </span>\n );\n } else {\n inner = rendered;\n }\n // Round 14 (50.2): a centred or right-aligned column lays a block element out with flex — text-align moves inline content only.\n const align = meta?.align ?? (kind === \"number\" ? \"right\" : \"left\");\n const value = cell.getValue();\n if (!isEditing && align !== \"left\" && typeof value !== \"string\" && typeof value !== \"number\" && value !== null && value !== undefined) {\n inner = <div className={cn(\"flex items-center\", align === \"center\" ? \"justify-center\" : \"justify-end\")}>{inner}</div>;\n }\n const tick = editable && saved?.ok && saved.row === row.id && saved.c === c\n ? <Icon name=\"check\" size={14} className=\"ml-ds-1 inline-block align-middle text-[var(--ds-status-success)]\" />\n : null;\n\n return (\n <td\n key={cell.id}\n // a double-click in the open editor selects a word, and never reopens it over what was typed\n {...(editable ? { role: \"gridcell\", \"data-grid-key\": cellKey(at), tabIndex: grid.tabIndexOf(at), onDoubleClick: () => { if (!isEditing) startEdit(at); } } : {})}\n className={cn(\n \"px-ds-4 py-ds-3 text-[var(--ds-text-primary)]\",\n align === \"right\" && \"text-right\",\n align === \"center\" && \"text-center\",\n shrink && \"w-px whitespace-nowrap\",\n editable && FOCUS_INSET,\n )}\n style={meta?.maxWidth || meta?.width || meta?.minWidth ? { maxWidth: meta?.maxWidth, width: meta?.width, minWidth: meta?.minWidth } : undefined}\n >\n {inner}\n {tick}\n </td>\n );\n })}\n </tr>\n ))}\n </RowsCtx></tbody>\n </table>\n </div>\n {/* A5: a save is heard, politely (WCAG 4.1.3); each one is a new line, so two saves are heard twice */}\n {editable && <div role=\"status\" className=\"sr-only\"><span key={saved?.n ?? 0}>{saved ? (saved.ok ? \"Saved\" : \"Not saved\") : \"\"}</span></div>}\n </div>\n );\n}\n"]}
|
package/dist/editor-mentions.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { matchMentions, shownMentions, mentionOptionId, MentionList } from './chunk-
|
|
2
|
+
import { matchMentions, shownMentions, mentionOptionId, MentionList } from './chunk-EIWXVICU.js';
|
|
3
3
|
import { useOverlayLayer } from './chunk-ZI3OQDET.js';
|
|
4
4
|
import './chunk-HP7WUZPK.js';
|
|
5
5
|
import { useLatest } from './chunk-WH2FUFAC.js';
|
|
6
|
-
import './chunk-
|
|
6
|
+
import './chunk-66JJCQU3.js';
|
|
7
7
|
import { useState, useSyncExternalStore, useId, useRef, useEffect } from 'react';
|
|
8
8
|
import Mention from '@tiptap/extension-mention';
|
|
9
9
|
import { exitSuggestion } from '@tiptap/suggestion';
|
package/dist/editor.js
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useScrollEdges } from './chunk-3BRQRKDO.js';
|
|
3
|
+
import { useInputModality } from './chunk-7RKC5C7G.js';
|
|
3
4
|
import { useBreakpoint } from './chunk-CRQ6KCRD.js';
|
|
4
5
|
import { FormChangeCtx } from './chunk-XVB55M3N.js';
|
|
6
|
+
import { useRevealFocus } from './chunk-HTXP5BMM.js';
|
|
5
7
|
import { useOverlayLayer, useCloseOnFocusOut } from './chunk-ZI3OQDET.js';
|
|
6
8
|
import { warnOnce, Icon } from './chunk-TJEV7YAY.js';
|
|
7
9
|
import { useLatest } from './chunk-WH2FUFAC.js';
|
|
8
|
-
import { cn,
|
|
9
|
-
import {
|
|
10
|
+
import { cn, FIELD_FOCUS_WITHIN_RING, FOCUS_RING, FIELD_FOCUS_RING } from './chunk-66JJCQU3.js';
|
|
11
|
+
import { useState, useCallback, useContext, useRef, useEffect, useImperativeHandle } from 'react';
|
|
10
12
|
import { Extension, Node, mergeAttributes, useEditor, EditorContent, createDocument } from '@tiptap/react';
|
|
11
13
|
import { Plugin } from '@tiptap/pm/state';
|
|
12
14
|
import StarterKit from '@tiptap/starter-kit';
|
|
@@ -123,6 +125,14 @@ function RichTextEditor({
|
|
|
123
125
|
mentions
|
|
124
126
|
}) {
|
|
125
127
|
const resolvedToolbar = toolbar === "full" ? DEFAULT_TOOLBAR : toolbar === "minimal" ? MINIMAL_TOOLBAR : toolbar;
|
|
128
|
+
useInputModality();
|
|
129
|
+
const [box, setBox] = useState(null);
|
|
130
|
+
const setBoxRef = useCallback((node) => {
|
|
131
|
+
setBox(node);
|
|
132
|
+
if (typeof ref === "function") ref(node);
|
|
133
|
+
else if (ref) ref.current = node;
|
|
134
|
+
}, [ref]);
|
|
135
|
+
useRevealFocus(box);
|
|
126
136
|
const reportChange = useLatest(useContext(FormChangeCtx));
|
|
127
137
|
const ownOutputs = useRef([]);
|
|
128
138
|
const editor = useEditor({
|
|
@@ -248,12 +258,15 @@ function RichTextEditor({
|
|
|
248
258
|
return /* @__PURE__ */ jsxs(
|
|
249
259
|
"div",
|
|
250
260
|
{
|
|
251
|
-
ref,
|
|
261
|
+
ref: setBoxRef,
|
|
252
262
|
className: cn(
|
|
253
263
|
"flex flex-col rounded-[var(--ds-radius-md)] overflow-hidden",
|
|
254
264
|
// a field's resting edge, every other control's (Sprint 25.14 A20; the soft border again since 25.19 K1)
|
|
255
265
|
"border-[length:var(--ds-border-width)] border-[var(--ds-input-border)]",
|
|
256
266
|
"bg-[var(--ds-bg-surface)]",
|
|
267
|
+
// the box is the field's edge: it shows the field's focus while the typing surface has it; the toolbar's buttons and
|
|
268
|
+
// selects, and the popups' fields, show their own (Sprint 30)
|
|
269
|
+
FIELD_FOCUS_WITHIN_RING,
|
|
257
270
|
className
|
|
258
271
|
),
|
|
259
272
|
children: [
|
|
@@ -264,7 +277,7 @@ function RichTextEditor({
|
|
|
264
277
|
editor,
|
|
265
278
|
className: cn(
|
|
266
279
|
"rte-content",
|
|
267
|
-
"flex-1 overflow-y-auto px-ds-4 py-ds-3",
|
|
280
|
+
"flex-1 overflow-y-auto px-ds-4 py-ds-3 scroll-p-[4px]",
|
|
268
281
|
"text-sm text-[var(--ds-text-primary)]",
|
|
269
282
|
"focus-within:outline-none"
|
|
270
283
|
)
|
|
@@ -434,15 +447,15 @@ function Toolbar({ editor, groups, onImageRequest }) {
|
|
|
434
447
|
onScroll: measureToolbar,
|
|
435
448
|
...toolbarFade,
|
|
436
449
|
className: cn(
|
|
437
|
-
"flex items-center gap-ds-0.5 px-ds-2 py-ds-1",
|
|
438
|
-
isMobile ? "overflow-x-auto flex-nowrap gs-scrollbar-none" : "flex-wrap"
|
|
450
|
+
"flex items-center gap-ds-0.5 px-ds-2 py-[max(var(--ds-space-1),4px)]",
|
|
451
|
+
isMobile ? "overflow-x-auto flex-nowrap gs-scrollbar-none scroll-px-[28px]" : "flex-wrap"
|
|
439
452
|
),
|
|
440
453
|
children: withDividers
|
|
441
454
|
}
|
|
442
455
|
),
|
|
443
456
|
inTable && /* @__PURE__ */ jsxs("div", { ref: tableBarRef, onScroll: measureTableBar, ...tableBarFade, className: cn(
|
|
444
|
-
"flex items-center gap-ds-0.5 px-ds-2 py-ds-1 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
|
|
445
|
-
isMobile && "overflow-x-auto flex-nowrap gs-scrollbar-none"
|
|
457
|
+
"flex items-center gap-ds-0.5 px-ds-2 py-[max(var(--ds-space-1),4px)] border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
|
|
458
|
+
isMobile && "overflow-x-auto flex-nowrap gs-scrollbar-none scroll-px-[28px]"
|
|
446
459
|
), children: [
|
|
447
460
|
/* @__PURE__ */ jsx("span", { className: "text-2xs text-[var(--ds-text-muted)] uppercase tracking-wider mr-ds-1 shrink-0", children: "Table" }),
|
|
448
461
|
/* @__PURE__ */ jsx(TableOpBtn, { onClick: () => editor.chain().focus().addRowAfter().run(), label: "+ Row" }),
|
|
@@ -459,6 +472,7 @@ function Toolbar({ editor, groups, onImageRequest }) {
|
|
|
459
472
|
] });
|
|
460
473
|
}
|
|
461
474
|
function BlockTypeSelect({ editor }) {
|
|
475
|
+
useInputModality();
|
|
462
476
|
const value = editor.isActive("heading", { level: 1 }) ? "h1" : editor.isActive("heading", { level: 2 }) ? "h2" : editor.isActive("heading", { level: 3 }) ? "h3" : "p";
|
|
463
477
|
return /* @__PURE__ */ jsxs(
|
|
464
478
|
"select",
|
|
@@ -476,8 +490,8 @@ function BlockTypeSelect({ editor }) {
|
|
|
476
490
|
className: cn(
|
|
477
491
|
"h-7 px-ds-1.5 text-xs rounded-[var(--ds-radius-sm)] cursor-pointer",
|
|
478
492
|
"bg-transparent text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-surface)]",
|
|
479
|
-
"border-none
|
|
480
|
-
|
|
493
|
+
"border-none",
|
|
494
|
+
FIELD_FOCUS_RING
|
|
481
495
|
),
|
|
482
496
|
children: [
|
|
483
497
|
/* @__PURE__ */ jsx("option", { value: "p", children: "Paragraph" }),
|
|
@@ -552,7 +566,7 @@ function ColorPicker({
|
|
|
552
566
|
title,
|
|
553
567
|
className: cn(
|
|
554
568
|
"flex flex-col items-center justify-center w-7 h-7 rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer",
|
|
555
|
-
|
|
569
|
+
FOCUS_RING,
|
|
556
570
|
open ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-surface)] hover:text-[var(--ds-text-primary)]"
|
|
557
571
|
),
|
|
558
572
|
children: [
|
|
@@ -572,8 +586,9 @@ function ColorPicker({
|
|
|
572
586
|
},
|
|
573
587
|
className: cn(
|
|
574
588
|
"w-6 h-6 rounded-[var(--ds-radius-sm)] border-[2px] transition-all cursor-pointer",
|
|
575
|
-
|
|
576
|
-
|
|
589
|
+
FOCUS_RING,
|
|
590
|
+
// the chosen colour: the accent border, never a halo (Sprint 30, D2)
|
|
591
|
+
activeColor === c.value ? "border-[var(--ds-accent-ink)] scale-110" : "border-transparent hover:scale-110"
|
|
577
592
|
),
|
|
578
593
|
style: { backgroundColor: c.value || "var(--ds-text-primary)" },
|
|
579
594
|
children: !c.value && /* @__PURE__ */ jsx("span", { className: "block w-full h-full rounded-[calc(var(--ds-radius-sm)-2px)] bg-[var(--ds-bg-surface)] relative after:absolute after:inset-0 after:rounded-[inherit] after:bg-gradient-to-br after:from-transparent after:to-[var(--ds-text-muted)] after:opacity-30" })
|
|
@@ -583,6 +598,7 @@ function ColorPicker({
|
|
|
583
598
|
] });
|
|
584
599
|
}
|
|
585
600
|
function LinkPopover({ editor }) {
|
|
601
|
+
useInputModality();
|
|
586
602
|
const [open, setOpen] = useState(false);
|
|
587
603
|
const isTopLayer = useOverlayLayer(open);
|
|
588
604
|
const [url, setUrl] = useState("");
|
|
@@ -631,7 +647,8 @@ function LinkPopover({ editor }) {
|
|
|
631
647
|
};
|
|
632
648
|
return /* @__PURE__ */ jsxs("div", { ref, className: "relative", children: [
|
|
633
649
|
/* @__PURE__ */ jsx(ToolBtn, { active: editor.isActive("link"), onClick: toggle, title: "Link", children: /* @__PURE__ */ jsx(Icon, { name: "link", size: 16 }) }),
|
|
634
|
-
open &&
|
|
650
|
+
open && // a non-modal dialog, named: the editor's box leaves the focus of the field in it to the field (Sprint 30)
|
|
651
|
+
/* @__PURE__ */ jsxs("div", { role: "dialog", "aria-label": "Link", className: "absolute top-full left-0 mt-ds-1 z-[var(--ds-z-popover)] p-ds-1.5 rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-surface-elevated)] shadow-[var(--ds-shadow-dropdown)] flex items-center gap-ds-1 w-[240px]", children: [
|
|
635
652
|
/* @__PURE__ */ jsx(
|
|
636
653
|
"input",
|
|
637
654
|
{
|
|
@@ -647,7 +664,7 @@ function LinkPopover({ editor }) {
|
|
|
647
664
|
"flex-1 h-6 px-ds-2 text-xs rounded-[var(--ds-radius-sm)]",
|
|
648
665
|
"bg-transparent text-[var(--ds-text-primary)] placeholder:text-[var(--ds-text-muted)]",
|
|
649
666
|
"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
|
|
650
|
-
|
|
667
|
+
FIELD_FOCUS_RING
|
|
651
668
|
)
|
|
652
669
|
}
|
|
653
670
|
),
|
|
@@ -660,7 +677,7 @@ function LinkPopover({ editor }) {
|
|
|
660
677
|
"shrink-0 h-6 px-ds-2 text-xs font-medium rounded-[var(--ds-radius-sm)] cursor-pointer",
|
|
661
678
|
"bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]",
|
|
662
679
|
"hover:opacity-90 transition-opacity",
|
|
663
|
-
|
|
680
|
+
FOCUS_RING
|
|
664
681
|
),
|
|
665
682
|
children: "Apply"
|
|
666
683
|
}
|
|
@@ -669,6 +686,7 @@ function LinkPopover({ editor }) {
|
|
|
669
686
|
] });
|
|
670
687
|
}
|
|
671
688
|
function ImagePopover({ editor }) {
|
|
689
|
+
useInputModality();
|
|
672
690
|
const [open, setOpen] = useState(false);
|
|
673
691
|
const isTopLayer = useOverlayLayer(open);
|
|
674
692
|
const [url, setUrl] = useState("");
|
|
@@ -710,7 +728,8 @@ function ImagePopover({ editor }) {
|
|
|
710
728
|
};
|
|
711
729
|
return /* @__PURE__ */ jsxs("div", { ref, className: "relative", children: [
|
|
712
730
|
/* @__PURE__ */ jsx(ToolBtn, { onClick: () => setOpen((o) => !o), title: "Image", children: /* @__PURE__ */ jsx(Icon, { name: "image", size: 16 }) }),
|
|
713
|
-
open &&
|
|
731
|
+
open && // a non-modal dialog, named, as the link's (Sprint 30)
|
|
732
|
+
/* @__PURE__ */ jsxs("div", { role: "dialog", "aria-label": "Image", className: "absolute top-full left-0 mt-ds-1 z-[var(--ds-z-popover)] p-ds-1.5 rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-surface-elevated)] shadow-[var(--ds-shadow-dropdown)] flex flex-col gap-ds-1 w-[240px]", children: [
|
|
714
733
|
/* @__PURE__ */ jsx(
|
|
715
734
|
"input",
|
|
716
735
|
{
|
|
@@ -723,7 +742,7 @@ function ImagePopover({ editor }) {
|
|
|
723
742
|
"h-6 px-ds-2 text-xs rounded-[var(--ds-radius-sm)]",
|
|
724
743
|
"bg-transparent text-[var(--ds-text-primary)] placeholder:text-[var(--ds-text-muted)]",
|
|
725
744
|
"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
|
|
726
|
-
|
|
745
|
+
FIELD_FOCUS_RING
|
|
727
746
|
)
|
|
728
747
|
}
|
|
729
748
|
),
|
|
@@ -742,7 +761,7 @@ function ImagePopover({ editor }) {
|
|
|
742
761
|
"flex-1 h-6 px-ds-2 text-xs rounded-[var(--ds-radius-sm)]",
|
|
743
762
|
"bg-transparent text-[var(--ds-text-primary)] placeholder:text-[var(--ds-text-muted)]",
|
|
744
763
|
"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
|
|
745
|
-
|
|
764
|
+
FIELD_FOCUS_RING
|
|
746
765
|
)
|
|
747
766
|
}
|
|
748
767
|
),
|
|
@@ -755,7 +774,7 @@ function ImagePopover({ editor }) {
|
|
|
755
774
|
"shrink-0 h-6 px-ds-2 text-xs font-medium rounded-[var(--ds-radius-sm)] cursor-pointer",
|
|
756
775
|
"bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]",
|
|
757
776
|
"hover:opacity-90 transition-opacity",
|
|
758
|
-
|
|
777
|
+
FOCUS_RING
|
|
759
778
|
),
|
|
760
779
|
children: "Insert"
|
|
761
780
|
}
|
|
@@ -765,6 +784,7 @@ function ImagePopover({ editor }) {
|
|
|
765
784
|
] });
|
|
766
785
|
}
|
|
767
786
|
function FontFamilySelect({ editor }) {
|
|
787
|
+
useInputModality();
|
|
768
788
|
const current = editor.getAttributes("textStyle").fontFamily ?? "";
|
|
769
789
|
return /* @__PURE__ */ jsx(
|
|
770
790
|
"select",
|
|
@@ -780,8 +800,8 @@ function FontFamilySelect({ editor }) {
|
|
|
780
800
|
className: cn(
|
|
781
801
|
"h-7 px-ds-1.5 text-xs rounded-[var(--ds-radius-sm)] cursor-pointer",
|
|
782
802
|
"bg-transparent text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-surface)]",
|
|
783
|
-
"border-none
|
|
784
|
-
|
|
803
|
+
"border-none",
|
|
804
|
+
FIELD_FOCUS_RING
|
|
785
805
|
),
|
|
786
806
|
children: FONT_FAMILIES.map((f) => /* @__PURE__ */ jsx("option", { value: f.value, children: f.label }, f.label))
|
|
787
807
|
}
|
|
@@ -802,7 +822,7 @@ function TableOpBtn({ onClick, label }) {
|
|
|
802
822
|
title: label,
|
|
803
823
|
className: cn(
|
|
804
824
|
"h-6 px-ds-1.5 text-2xs font-medium rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer whitespace-nowrap",
|
|
805
|
-
|
|
825
|
+
FOCUS_RING,
|
|
806
826
|
"text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-surface)] hover:text-[var(--ds-text-primary)]"
|
|
807
827
|
),
|
|
808
828
|
children: label
|
|
@@ -819,7 +839,7 @@ function ToolBtn({ active, disabled, onClick, title, children }) {
|
|
|
819
839
|
title,
|
|
820
840
|
className: cn(
|
|
821
841
|
"flex items-center justify-center w-7 h-7 rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer",
|
|
822
|
-
|
|
842
|
+
FOCUS_RING,
|
|
823
843
|
active ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-surface)] hover:text-[var(--ds-text-primary)]",
|
|
824
844
|
disabled && "opacity-disabled pointer-events-none"
|
|
825
845
|
),
|