@nxgt/material 3.86.2 → 3.88.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 +22 -0
- package/README.md +2 -0
- package/dist/{alert-dialog-DZnt8PYE.js → alert-dialog-CEGs7LMN.js} +1 -1
- package/dist/{async-slice-D3OdV2BS.js → async-slice-CR0M95Jq.js} +1 -1
- package/dist/{button-MAL5an7L.js → button-h9hXBEQB.js} +1 -1
- package/dist/{calculator-C3a8YMwl.js → calculator-Dn_KL0b0.js} +10 -10
- package/dist/calculator-field.js +6 -6
- package/dist/{calculator-segment-BigMpjhn.js → calculator-segment-DMFptsDf.js} +1 -1
- package/dist/calculator.js +1 -1
- package/dist/charts.js +3 -3
- package/dist/{chip-DKAKoNxq.js → chip-C-RAjar5.js} +2 -2
- package/dist/{code-editor-B6dFQSUJ.js → code-editor-DApeIOZ3.js} +4 -4
- package/dist/code-editor.js +4 -4
- package/dist/{code-language-items-CXEMiWoF.js → code-language-items-CGtYfc1l.js} +2 -2
- package/dist/components/components.css +2 -0
- package/dist/components/ui/collections/marking-list/marking-list.css +16 -0
- package/dist/components/ui/primitives/toggle-group/toggle-group-connected.css +1 -1
- package/dist/components/ui/primitives/toggle-group/toggle-group-segmented.css +1 -1
- package/dist/components/ui/primitives/toggle-group/toggle-group-separate.css +1 -1
- package/dist/components/ui/primitives/toggle-group/toggle-group.css +12 -1
- package/dist/{components-BTukNsPn.js → components-BIATLurA.js} +16555 -15979
- package/dist/components.js +37 -37
- package/dist/{conversion-variant-BT5n4-jm.js → conversion-variant-Cf0sEmnS.js} +3 -3
- package/dist/{currency-field-t41sFYg_.js → currency-field-cwC7cqUE.js} +4 -4
- package/dist/{dialog-BjKiRXJg.js → dialog-Bul68q8u.js} +3 -3
- package/dist/dnd.js +1 -1
- package/dist/{dropdown-menu-IRFp4CH9.js → dropdown-menu-xUUE5X6T.js} +1 -1
- package/dist/editor.js +7 -7
- package/dist/{empty-state-C70prDDr.js → empty-state-CCRfjt0n.js} +1 -1
- package/dist/{financial-variant-BIpzs8IL.js → financial-variant-CYgRZzKT.js} +5 -5
- package/dist/{hooks-CjO11MS7.js → hooks-Dzc6xz5t.js} +2 -2
- package/dist/hooks.js +2 -2
- package/dist/{hover-card-cU_aJa18.js → hover-card-CZLFQwZv.js} +1 -1
- package/dist/i18n.js +3 -3
- package/dist/{icon-badge-D3KO6uEQ.js → icon-badge-0Xo9q7Ey.js} +1 -1
- package/dist/{icon-button-DrqNk1Ww.js → icon-button-DE1EcO2-.js} +1 -1
- package/dist/lib/components/ui/collections/filter/sections/filter-sections-classes.d.ts +4 -3
- package/dist/lib/components/ui/collections/index.d.ts +1 -0
- package/dist/lib/components/ui/collections/marking-list/index.d.ts +2 -0
- package/dist/lib/components/ui/collections/marking-list/marking-list.d.ts +11 -0
- package/dist/lib/components/ui/collections/marking-list/marking-list.utils.d.ts +18 -0
- package/dist/lib/components/ui/collections/marking-list/partials/marking-row-item.d.ts +16 -0
- package/dist/lib/components/ui/collections/marking-list/partials/marking-segments.d.ts +20 -0
- package/dist/lib/components/ui/collections/marking-list/partials/marking-set-remaining.d.ts +11 -0
- package/dist/lib/components/ui/collections/marking-list/partials/marking-tally.d.ts +14 -0
- package/dist/lib/components/ui/collections/marking-list/types.d.ts +74 -0
- package/dist/lib/components/ui/collections/marking-list/use-marking-expanded.d.ts +9 -0
- package/dist/lib/components/ui/collections/marking-list/use-marking-focus.d.ts +22 -0
- package/dist/lib/components/ui/collections/marking-list/use-marking-handlers.d.ts +11 -0
- package/dist/lib/components/ui/collections/marking-list/use-tally-speech.d.ts +16 -0
- package/dist/lib/components/ui/collections/page-footer/page-footer.d.ts +5 -1
- package/dist/lib/components/ui/collections/server-table/index.d.ts +1 -1
- package/dist/lib/components/ui/collections/server-table/server-table-paging.d.ts +8 -0
- package/dist/lib/components/ui/collections/server-table/types-paging.d.ts +6 -0
- package/dist/lib/components/ui/dates/half-day-range-field/half-day-end.d.ts +21 -0
- package/dist/lib/components/ui/dates/half-day-range-field/half-day-ends.d.ts +11 -0
- package/dist/lib/components/ui/dates/half-day-range-field/half-day-range-field.d.ts +39 -0
- package/dist/lib/components/ui/dates/half-day-range-field/half-day-range-form-field.d.ts +3 -0
- package/dist/lib/components/ui/dates/half-day-range-field/half-day-range.d.ts +25 -0
- package/dist/lib/components/ui/dates/half-day-range-field/index.d.ts +3 -0
- package/dist/lib/components/ui/dates/half-day-range-field/use-half-day-draft.d.ts +30 -0
- package/dist/lib/components/ui/dates/index.d.ts +1 -0
- package/dist/lib/components/ui/fields/contacts/placeholders.d.ts +1 -1
- package/dist/lib/i18n/resources/en/en.d.ts +17 -0
- package/dist/lib/i18n/resources/en/material.json.d.ts +17 -0
- package/dist/lib/i18n/resources/fr/fr.d.ts +17 -0
- package/dist/lib/i18n/resources/fr/material.json.d.ts +17 -0
- package/dist/lib/i18n/resources/resources.d.ts +34 -0
- package/dist/lib/i18n/translator.d.ts +1 -1
- package/dist/lib.js +1 -1
- package/dist/main.js +53 -53
- package/dist/map.js +7 -7
- package/dist/material.css +1 -1
- package/dist/pdf-reader.js +1 -1
- package/dist/{percent-field-D47IlaPF.js → percent-field-BFwxazf1.js} +1 -1
- package/dist/{picker-surface-Cg4V4-E0.js → picker-surface-DkfTv_ft.js} +4 -4
- package/dist/{popover-Dzk4-l9U.js → popover-BM6xApJd.js} +1 -1
- package/dist/{pos-types-JOXMY4Y2.js → pos-types-CpTpT4vE.js} +1 -1
- package/dist/{pos-variant-B2mS8bMB.js → pos-variant-Bs5BUB1L.js} +4 -4
- package/dist/print.js +1 -1
- package/dist/{programmer-variant-C_Tl0P4_.js → programmer-variant-B1eI1fd0.js} +2 -2
- package/dist/{public-ByAsqBOf.js → public-CX7ik5Yg.js} +10 -10
- package/dist/{rich-code-block-CJAfqk6b.js → rich-code-block-CdVtxD75.js} +5 -5
- package/dist/{scientific-variant-CskM4MLV.js → scientific-variant-rfvJKxB4.js} +2 -2
- package/dist/{sortable-provider-ICS_vkLA.js → sortable-provider-BopzsciJ.js} +2 -2
- package/dist/{spinner-CweqX5A9.js → spinner-DcW21pN1.js} +1 -1
- package/dist/{tabs-95Y2LmnV.js → tabs-CdoBFtWx.js} +1 -1
- package/dist/theme-picker.js +2 -2
- package/dist/{theme-toggle-WAFkncYx.js → theme-toggle-Ch3GkDDU.js} +1 -1
- package/dist/{toolbar-items-BsgzHSNf.js → toolbar-items-CZ1lJXZZ.js} +4 -4
- package/dist/{translate-material-DTIAPmlU.js → translate-material-BrYBBZ66.js} +1 -1
- package/dist/{translator-BRZNhsy5.js → translator-DoVsjUff.js} +34 -0
- package/dist/{use-chat-composer-CleSUh_y.js → use-chat-composer-BjKhuLfT.js} +15 -15
- package/dist/{use-heading-spy-D8WbHJuK.js → use-heading-spy-CGTTRV2N.js} +4 -4
- package/dist/{use-material-translation-CCy1Me0h.js → use-material-translation-BdrItuwY.js} +1 -1
- package/dist/{use-return-focus-BA8G1qVU.js → use-return-focus-Cqzvj9R0.js} +1 -1
- package/docs/components/README.md +2 -1
- package/docs/components/data-table-filter-and-lists.md +103 -0
- package/docs/components/date-and-time.md +111 -0
- package/docs/components/primitives.md +4 -1
- package/docs/guides/forms.md +1 -0
- package/docs/guides/i18n.md +7 -0
- package/docs/guides/theming.md +1 -1
- package/docs/previews/data-table-filter-lists-markinglist.webp +0 -0
- package/docs/previews/date-time-halfdayrangefield.webp +0 -0
- package/docs/roadmap.md +7 -2
- package/lib/components/components.css +2 -0
- package/lib/components/ui/collections/marking-list/marking-list.css +16 -0
- package/lib/components/ui/primitives/toggle-group/toggle-group-connected.css +1 -1
- package/lib/components/ui/primitives/toggle-group/toggle-group-segmented.css +1 -1
- package/lib/components/ui/primitives/toggle-group/toggle-group-separate.css +1 -1
- package/lib/components/ui/primitives/toggle-group/toggle-group.css +12 -1
- package/package.json +2 -2
package/dist/pdf-reader.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as e } from "./currency-field-
|
|
1
|
+
import { r as e } from "./currency-field-cwC7cqUE.js";
|
|
2
2
|
import { jsx as t } from "react/jsx-runtime";
|
|
3
3
|
//#region lib/components/ui/fields/percent-field/percent-field.tsx
|
|
4
4
|
function n({ min: n = 0, max: r = 100, step: i = 1, ...a }) {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { t as e } from "./utils-BLfntITJ.js";
|
|
2
2
|
import { r as t, t as n } from "./in-dialog-D61Yeaol.js";
|
|
3
|
-
import { a as r, c as i, i as a, l as o, n as s, o as c, r as l, s as u, t as d, u as f } from "./use-return-focus-
|
|
4
|
-
import { i as p, o as m, r as h, t as g } from "./popover-
|
|
5
|
-
import { t as _ } from "./use-material-translation-
|
|
6
|
-
import { n as v, t as y } from "./icon-button-
|
|
3
|
+
import { a as r, c as i, i as a, l as o, n as s, o as c, r as l, s as u, t as d, u as f } from "./use-return-focus-Cqzvj9R0.js";
|
|
4
|
+
import { i as p, o as m, r as h, t as g } from "./popover-BM6xApJd.js";
|
|
5
|
+
import { t as _ } from "./use-material-translation-BdrItuwY.js";
|
|
6
|
+
import { n as v, t as y } from "./icon-button-DE1EcO2-.js";
|
|
7
7
|
import { t as b } from "./use-ssr-media-query-C6M5m8sf.js";
|
|
8
8
|
import { i as x } from "./escape-owner-DpaP0lm1.js";
|
|
9
9
|
import * as S from "react";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { t as e } from "./utils-BLfntITJ.js";
|
|
2
2
|
import { o as t, r as n } from "./dist-DVRQkaTK.js";
|
|
3
3
|
import { i as r, r as i, t as a } from "./dist-DWZXlCZR.js";
|
|
4
|
-
import { S as o, d as s, f as c, l, p as u, u as d, x as f } from "./spinner-
|
|
4
|
+
import { S as o, d as s, f as c, l, p as u, u as d, x as f } from "./spinner-DcW21pN1.js";
|
|
5
5
|
import { a as p, i as m, r as h } from "./dist-DHdUUM1w.js";
|
|
6
6
|
import { a as g, c as _, l as v, o as y, r as b, s as x, t as S } from "./in-dialog-D61Yeaol.js";
|
|
7
7
|
import { i as C } from "./escape-owner-DpaP0lm1.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as e } from "./use-material-translation-
|
|
1
|
+
import { t as e } from "./use-material-translation-BdrItuwY.js";
|
|
2
2
|
import { n as t } from "./calculator-context-BugcKuVG.js";
|
|
3
3
|
import { t as n } from "./calculator-announce-DRd2c6Dq.js";
|
|
4
4
|
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { t as e } from "./utils-BLfntITJ.js";
|
|
2
|
-
import { t } from "./use-material-translation-
|
|
3
|
-
import { t as n } from "./icon-button-
|
|
2
|
+
import { t } from "./use-material-translation-BdrItuwY.js";
|
|
3
|
+
import { t as n } from "./icon-button-DE1EcO2-.js";
|
|
4
4
|
import { n as r } from "./calculator-context-BugcKuVG.js";
|
|
5
|
-
import { a as i, n as a, r as o, t as s } from "./pos-types-
|
|
5
|
+
import { a as i, n as a, r as o, t as s } from "./pos-types-CpTpT4vE.js";
|
|
6
6
|
import { i as c, n as l, s as u } from "./key-layout-cR79xfGE.js";
|
|
7
7
|
import { n as d, t as f } from "./currency-B-r3ig11.js";
|
|
8
|
-
import { t as p } from "./calculator-segment-
|
|
8
|
+
import { t as p } from "./calculator-segment-DMFptsDf.js";
|
|
9
9
|
import { useId as m, useState as h } from "react";
|
|
10
10
|
import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
|
|
11
11
|
import { ChevronDown as y, X as b } from "lucide-react";
|
package/dist/print.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { i as e, t } from "./translate-material-
|
|
1
|
+
import { i as e, t } from "./translate-material-BrYBBZ66.js";
|
|
2
2
|
import { Children as n, createContext as r, isValidElement as i, useCallback as a, useContext as o, useEffect as s, useMemo as c, useState as l } from "react";
|
|
3
3
|
import { jsx as u, jsxs as d } from "react/jsx-runtime";
|
|
4
4
|
import { resolvePdfFileName as f } from "@nxgt/material-core/pdf-file-name";
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { t as e } from "./use-material-translation-
|
|
1
|
+
import { t as e } from "./use-material-translation-BdrItuwY.js";
|
|
2
2
|
import { t } from "./toggle-FeCCJqbg.js";
|
|
3
3
|
import { n } from "./calculator-context-BugcKuVG.js";
|
|
4
4
|
import { i as r, n as i, s as a } from "./key-layout-cR79xfGE.js";
|
|
5
5
|
import { t as o } from "./programmer-word-CNCF7DJF.js";
|
|
6
|
-
import { t as s } from "./calculator-segment-
|
|
6
|
+
import { t as s } from "./calculator-segment-DMFptsDf.js";
|
|
7
7
|
import { useId as c, useState as l } from "react";
|
|
8
8
|
import { jsx as u, jsxs as d } from "react/jsx-runtime";
|
|
9
9
|
import { calculate as f, formatExpression as p, sessionOptions as m, toCanonical as h, tokenize as g } from "@nxgt/material-core/calculator";
|
|
@@ -3,25 +3,25 @@ import { n as t } from "./ui.utils-CAnKTCw5.js";
|
|
|
3
3
|
import { t as n } from "./utils-BLfntITJ.js";
|
|
4
4
|
import { o as r } from "./dist-DVRQkaTK.js";
|
|
5
5
|
import { i, n as a, r as o } from "./dist-DWZXlCZR.js";
|
|
6
|
-
import { o as s } from "./spinner-
|
|
6
|
+
import { o as s } from "./spinner-DcW21pN1.js";
|
|
7
7
|
import { a as c, i as l, n as u } from "./dist-DHdUUM1w.js";
|
|
8
8
|
import { i as d } from "./dist-DOK3zo5C.js";
|
|
9
9
|
import { r as f, t as p } from "./in-dialog-D61Yeaol.js";
|
|
10
|
-
import { a as m, c as h, i as g, l as _, n as v, o as ee, r as y, s as b, t as te, u as ne } from "./use-return-focus-
|
|
11
|
-
import { c as x, d as S, f as C, i as w, l as T, n as E, o as D, t as re, u as O } from "./dropdown-menu-
|
|
12
|
-
import { a as k, b as ie, d as ae, f as oe, i as se, n as A, o as ce, r as le, s as j, t as M, u as ue, v as de } from "./toolbar-items-
|
|
10
|
+
import { a as m, c as h, i as g, l as _, n as v, o as ee, r as y, s as b, t as te, u as ne } from "./use-return-focus-Cqzvj9R0.js";
|
|
11
|
+
import { c as x, d as S, f as C, i as w, l as T, n as E, o as D, t as re, u as O } from "./dropdown-menu-xUUE5X6T.js";
|
|
12
|
+
import { a as k, b as ie, d as ae, f as oe, i as se, n as A, o as ce, r as le, s as j, t as M, u as ue, v as de } from "./toolbar-items-CZ1lJXZZ.js";
|
|
13
13
|
import { t as fe } from "./dist-DkQbkF9T.js";
|
|
14
|
-
import { t as pe } from "./button-
|
|
15
|
-
import { t as N } from "./use-material-translation-
|
|
16
|
-
import { n as me, t as he } from "./icon-button-
|
|
14
|
+
import { t as pe } from "./button-h9hXBEQB.js";
|
|
15
|
+
import { t as N } from "./use-material-translation-BdrItuwY.js";
|
|
16
|
+
import { n as me, t as he } from "./icon-button-DE1EcO2-.js";
|
|
17
17
|
import { t as ge } from "./useEvent-2fKq-6w8.js";
|
|
18
18
|
import { n as _e, t as ve } from "./toggle-group-CVMxEpWi.js";
|
|
19
19
|
import { i as ye } from "./escape-owner-DpaP0lm1.js";
|
|
20
20
|
import { n as be } from "./use-slice-reducer-BGkeGtML.js";
|
|
21
21
|
import { t as xe } from "./input-CC2joTjB.js";
|
|
22
22
|
import { r as Se } from "./use-csp-nonce-ZKs9k-ov.js";
|
|
23
|
-
import { n as Ce, t as we } from "./empty-state-
|
|
24
|
-
import { r as Te, t as Ee, u as De } from "./dialog-
|
|
23
|
+
import { n as Ce, t as we } from "./empty-state-CCRfjt0n.js";
|
|
24
|
+
import { r as Te, t as Ee, u as De } from "./dialog-Bul68q8u.js";
|
|
25
25
|
import { t as Oe } from "./client-only.utils-3nHNzCki.js";
|
|
26
26
|
import { t as ke } from "./use-scroll-away-PQRFZkT2.js";
|
|
27
27
|
import * as P from "react";
|
|
@@ -3600,4 +3600,4 @@ function Xa(e) {
|
|
|
3600
3600
|
return /* @__PURE__ */ H(Ka, { ...Ya(e) });
|
|
3601
3601
|
}
|
|
3602
3602
|
//#endregion
|
|
3603
|
-
export {
|
|
3603
|
+
export { Un as _, or as a, ir as c, Xn as d, Yn as f, qn as g, Kn as h, ar as i, er as l, Gn as m, qa as n, $n as o, Zn as p, ur as r, tr as s, Xa as t, Qn as u, Wn as v, on as y };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { n as e } from "./spinner-
|
|
2
|
-
import { c as t, n, t as r } from "./dropdown-menu-
|
|
3
|
-
import { t as i } from "./use-material-translation-
|
|
4
|
-
import { a, i as o, n as s, o as c, t as l } from "./code-language-items-
|
|
1
|
+
import { n as e } from "./spinner-DcW21pN1.js";
|
|
2
|
+
import { c as t, n, t as r } from "./dropdown-menu-xUUE5X6T.js";
|
|
3
|
+
import { t as i } from "./use-material-translation-BdrItuwY.js";
|
|
4
|
+
import { a, i as o, n as s, o as c, t as l } from "./code-language-items-CGtYfc1l.js";
|
|
5
5
|
import { i as u, n as d, r as f, s as p } from "./dist-C3GR7kJd.js";
|
|
6
6
|
import { t as m } from "./code-block-spec-CGLKRhwD.js";
|
|
7
7
|
import { Suspense as h, lazy as g, useEffect as _, useRef as v, useState as y } from "react";
|
|
@@ -143,7 +143,7 @@ function M({ node: e, editor: t, updateAttributes: n, editable: r, wrap: a, onWr
|
|
|
143
143
|
}
|
|
144
144
|
//#endregion
|
|
145
145
|
//#region lib/components/ui/widgets/editor/extensions/code/code-block-open.tsx
|
|
146
|
-
var N = g(() => import("./code-editor-
|
|
146
|
+
var N = g(() => import("./code-editor-DApeIOZ3.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
|
|
147
147
|
function P() {
|
|
148
148
|
let { t: e } = i();
|
|
149
149
|
return /* @__PURE__ */ b("div", {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { t as e } from "./use-material-translation-
|
|
1
|
+
import { t as e } from "./use-material-translation-BdrItuwY.js";
|
|
2
2
|
import { t } from "./toggle-FeCCJqbg.js";
|
|
3
3
|
import { n } from "./calculator-context-BugcKuVG.js";
|
|
4
4
|
import { i as r, o as i } from "./key-layout-cR79xfGE.js";
|
|
5
5
|
import { t as a } from "./standard-layout-BuSRr3TY.js";
|
|
6
|
-
import { t as o } from "./calculator-segment-
|
|
6
|
+
import { t as o } from "./calculator-segment-DMFptsDf.js";
|
|
7
7
|
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
8
8
|
import { scientificOptions as l } from "@nxgt/material-core/calculator/scientific";
|
|
9
9
|
//#region lib/components/ui/widgets/calculator/variants/scientific/scientific-layout.ts
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { t as e } from "./utils-BLfntITJ.js";
|
|
2
2
|
import { t } from "./dist-DVRQkaTK.js";
|
|
3
|
-
import { t as n } from "./use-material-translation-
|
|
4
|
-
import { t as r } from "./icon-button-
|
|
3
|
+
import { t as n } from "./use-material-translation-BdrItuwY.js";
|
|
4
|
+
import { t as r } from "./icon-button-DE1EcO2-.js";
|
|
5
5
|
import { t as i } from "./compose-refs-G4J4kaUA.js";
|
|
6
6
|
import a, { cloneElement as o, createContext as s, forwardRef as c, memo as l, useCallback as u, useContext as d, useEffect as f, useId as p, useLayoutEffect as m, useMemo as h, useReducer as g, useRef as _, useState as v } from "react";
|
|
7
7
|
import { jsx as y } from "react/jsx-runtime";
|
|
@@ -5,7 +5,7 @@ import { a as i, i as a, n as o, r as s, t as c } from "./dist-DWZXlCZR.js";
|
|
|
5
5
|
import { a as l, i as u, n as d, r as f, t as p } from "./dist-DHdUUM1w.js";
|
|
6
6
|
import { a as m, c as h, d as g, i as _, l as v, o as y, r as b, t as x, u as S } from "./floating-ui.dom-KkZSW8_E.js";
|
|
7
7
|
import { t as C } from "./dist-DkQbkF9T.js";
|
|
8
|
-
import { t as w } from "./use-material-translation-
|
|
8
|
+
import { t as w } from "./use-material-translation-BdrItuwY.js";
|
|
9
9
|
import * as T from "react";
|
|
10
10
|
import { useLayoutEffect as E, useRef as D, useSyncExternalStore as O } from "react";
|
|
11
11
|
import { jsx as k, jsxs as A } from "react/jsx-runtime";
|
|
@@ -3,7 +3,7 @@ import { n as t } from "./dist-DVRQkaTK.js";
|
|
|
3
3
|
import { i as n, r, t as i } from "./dist-DWZXlCZR.js";
|
|
4
4
|
import { a, i as o, r as s } from "./dist-DHdUUM1w.js";
|
|
5
5
|
import { i as c, n as l, r as u, t as d } from "./dist-DOK3zo5C.js";
|
|
6
|
-
import { t as f } from "./use-material-translation-
|
|
6
|
+
import { t as f } from "./use-material-translation-BdrItuwY.js";
|
|
7
7
|
import * as p from "react";
|
|
8
8
|
import { createContext as m, useCallback as h, useContext as g, useEffect as ee, useLayoutEffect as _, useRef as v, useState as te } from "react";
|
|
9
9
|
import { Fragment as ne, jsx as y, jsxs as b } from "react/jsx-runtime";
|
package/dist/theme-picker.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { t as e } from "./utils-BLfntITJ.js";
|
|
2
2
|
import { a as t, i as n, n as r, o as i, r as a, t as o } from "./bubble-input-CQwVSoU3.js";
|
|
3
3
|
import { a as s, r as c } from "./icon-sprites-CaYXzOL4.js";
|
|
4
|
-
import { t as l } from "./use-material-translation-
|
|
4
|
+
import { t as l } from "./use-material-translation-BdrItuwY.js";
|
|
5
5
|
import { t as u } from "./use-theme-BCLireTd.js";
|
|
6
6
|
import { a as d, r as f } from "./theme-context-Cofk6vgs.js";
|
|
7
|
-
import { t as p } from "./theme-toggle-
|
|
7
|
+
import { t as p } from "./theme-toggle-Ch3GkDDU.js";
|
|
8
8
|
import { n as m, t as h } from "./nxgt-theme-DA1IQe0O.js";
|
|
9
9
|
import { useContext as g } from "react";
|
|
10
10
|
import { jsx as _, jsxs as v } from "react/jsx-runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as e } from "./use-material-translation-
|
|
1
|
+
import { t as e } from "./use-material-translation-BdrItuwY.js";
|
|
2
2
|
import { i as t } from "./theme-store-BdPp43cV.js";
|
|
3
3
|
import { n, t as r } from "./use-theme-BCLireTd.js";
|
|
4
4
|
import { r as i } from "./theme-context-Cofk6vgs.js";
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { t as e } from "./utils-BLfntITJ.js";
|
|
2
2
|
import { o as t, t as n } from "./dist-DVRQkaTK.js";
|
|
3
3
|
import { i as r, r as i } from "./dist-DWZXlCZR.js";
|
|
4
|
-
import { n as a } from "./spinner-
|
|
4
|
+
import { n as a } from "./spinner-DcW21pN1.js";
|
|
5
5
|
import { a as o } from "./dist-DHdUUM1w.js";
|
|
6
6
|
import { i as s, n as c, r as l, t as u } from "./dist-DOK3zo5C.js";
|
|
7
7
|
import { t as d } from "./in-dialog-D61Yeaol.js";
|
|
8
|
-
import { A as f, M as p, N as m, b as h, d as g, f as _, i as v, j as y, l as b, n as x, o as S, r as C, t as w, u as T, y as ee } from "./dropdown-menu-
|
|
9
|
-
import { a as te, n as ne } from "./popover-
|
|
8
|
+
import { A as f, M as p, N as m, b as h, d as g, f as _, i as v, j as y, l as b, n as x, o as S, r as C, t as w, u as T, y as ee } from "./dropdown-menu-xUUE5X6T.js";
|
|
9
|
+
import { a as te, n as ne } from "./popover-BM6xApJd.js";
|
|
10
10
|
import { i as re, n as ie, r as ae, t as oe } from "./dist-BZe2evxL.js";
|
|
11
11
|
import { t as se } from "./warn-once-C_e47JM8.js";
|
|
12
|
-
import { t as ce } from "./use-material-translation-
|
|
12
|
+
import { t as ce } from "./use-material-translation-BdrItuwY.js";
|
|
13
13
|
import * as E from "react";
|
|
14
14
|
import { createContext as D, useCallback as le, useContext as O, useEffect as k, useId as ue, useLayoutEffect as A, useMemo as j, useReducer as de, useRef as M, useState as N } from "react";
|
|
15
15
|
import { Fragment as P, jsx as F, jsxs as I } from "react/jsx-runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as e, l as t, r as n, s as r, t as i, u as a } from "./translator-
|
|
1
|
+
import { a as e, l as t, r as n, s as r, t as i, u as a } from "./translator-DoVsjUff.js";
|
|
2
2
|
import { createContext as o, useCallback as s, useContext as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
|
|
3
3
|
import { jsx as p } from "react/jsx-runtime";
|
|
4
4
|
//#region lib/i18n/material-resources-registry.ts
|
|
@@ -3451,6 +3451,23 @@ var r = {
|
|
|
3451
3451
|
menu: "Menu",
|
|
3452
3452
|
footer: "Footer",
|
|
3453
3453
|
"new-tab": "opens in a new tab"
|
|
3454
|
+
},
|
|
3455
|
+
"half-day-range": {
|
|
3456
|
+
morning: "Morning",
|
|
3457
|
+
afternoon: "Afternoon",
|
|
3458
|
+
"start-half": "Start half-day",
|
|
3459
|
+
"end-half": "End half-day",
|
|
3460
|
+
order: "The end cannot be before the start."
|
|
3461
|
+
},
|
|
3462
|
+
"marking-list": {
|
|
3463
|
+
unmarked: "Unmarked",
|
|
3464
|
+
details: "Details: {name}",
|
|
3465
|
+
"set-remaining": "Set remaining to",
|
|
3466
|
+
"set-remaining-to": "{count, plural, one {Set # remaining to {choice}} other {Set # remaining to {choice}}}",
|
|
3467
|
+
bulk: "{count} marked {choice}",
|
|
3468
|
+
locked: "Locked",
|
|
3469
|
+
"choice-name": "{choice}, {name}",
|
|
3470
|
+
"unmarked-count": "Unmarked: {count}"
|
|
3454
3471
|
}
|
|
3455
3472
|
} },
|
|
3456
3473
|
fr: { material: {
|
|
@@ -6900,6 +6917,23 @@ var r = {
|
|
|
6900
6917
|
menu: "Menu",
|
|
6901
6918
|
footer: "Pied de page",
|
|
6902
6919
|
"new-tab": "s'ouvre dans un nouvel onglet"
|
|
6920
|
+
},
|
|
6921
|
+
"half-day-range": {
|
|
6922
|
+
morning: "Matin",
|
|
6923
|
+
afternoon: "Après-midi",
|
|
6924
|
+
"start-half": "Demi-journée de début",
|
|
6925
|
+
"end-half": "Demi-journée de fin",
|
|
6926
|
+
order: "La fin ne peut pas précéder le début."
|
|
6927
|
+
},
|
|
6928
|
+
"marking-list": {
|
|
6929
|
+
unmarked: "Non marqués",
|
|
6930
|
+
details: "Détails : {name}",
|
|
6931
|
+
"set-remaining": "Marquer le reste comme",
|
|
6932
|
+
"set-remaining-to": "{count, plural, one {Marquer le restant : {choice}} other {Marquer les # restants : {choice}}}",
|
|
6933
|
+
bulk: "{count} marqués : {choice}",
|
|
6934
|
+
locked: "Verrouillés",
|
|
6935
|
+
"choice-name": "{choice}, {name}",
|
|
6936
|
+
"unmarked-count": "Non marqués : {count}"
|
|
6903
6937
|
}
|
|
6904
6938
|
} }
|
|
6905
6939
|
}, i = "language", a = "en", o = Object.keys(r);
|
|
@@ -4,28 +4,28 @@ import { t as n } from "./utils-BLfntITJ.js";
|
|
|
4
4
|
import { n as r } from "./use-shape-morph-BKA_R5P5.js";
|
|
5
5
|
import { n as i, o as a, t as o } from "./dist-DVRQkaTK.js";
|
|
6
6
|
import { i as s, n as c, r as l, t as u } from "./dist-DWZXlCZR.js";
|
|
7
|
-
import { _ as d, a as f, b as p, g as m, h, i as g, m as _, n as v, o as y, r as b, s as x, t as S, v as C, y as w } from "./spinner-
|
|
7
|
+
import { _ as d, a as f, b as p, g as m, h, i as g, m as _, n as v, o as y, r as b, s as x, t as S, v as C, y as w } from "./spinner-DcW21pN1.js";
|
|
8
8
|
import { a as T, i as E, n as D, r as O, t as k } from "./dist-DHdUUM1w.js";
|
|
9
9
|
import { a as A, i as ee } from "./dist-DOK3zo5C.js";
|
|
10
10
|
import { i as j, n as M } from "./in-dialog-D61Yeaol.js";
|
|
11
|
-
import { c as N, l as P, n as te, r as F, t as ne } from "./alert-dialog-
|
|
11
|
+
import { c as N, l as P, n as te, r as F, t as ne } from "./alert-dialog-CEGs7LMN.js";
|
|
12
12
|
import { A as re, C as ie, D as ae, E as oe, O as se, S as I, T as ce, _ as le, a as ue, b as de, d as fe, f as pe, g as me, h as he, i as ge, k as _e, l as ve, m as ye, n as be, o as xe, p as Se, r as Ce, s as we, t as Te, u as Ee, v as De, w as Oe, x as ke, y as Ae } from "./floating-ui.dom-KkZSW8_E.js";
|
|
13
|
-
import { D as je, E as Me, N as Ne, O as Pe, c as Fe, d as Ie, f as Le, i as Re, k as ze, m as Be, n as Ve, o as He, p as Ue, t as We, u as Ge } from "./dropdown-menu-
|
|
13
|
+
import { D as je, E as Me, N as Ne, O as Pe, c as Fe, d as Ie, f as Le, i as Re, k as ze, m as Be, n as Ve, o as He, p as Ue, t as We, u as Ge } from "./dropdown-menu-xUUE5X6T.js";
|
|
14
14
|
import { a as Ke, i as qe, n as Je } from "./field-blur-context-BLGgf_3z.js";
|
|
15
|
-
import { i as Ye, n as Xe, r as Ze, t as Qe } from "./popover-
|
|
15
|
+
import { i as Ye, n as Xe, r as Ze, t as Qe } from "./popover-BM6xApJd.js";
|
|
16
16
|
import { a as $e, i as et, n as tt, o as nt, t as rt } from "./bubble-input-CQwVSoU3.js";
|
|
17
|
-
import { n as it, r as at, t as ot, u as st } from "./tabs-
|
|
18
|
-
import { a as ct, n as lt, o as ut, s as dt, v as ft, y as pt } from "./toolbar-items-
|
|
17
|
+
import { n as it, r as at, t as ot, u as st } from "./tabs-CdoBFtWx.js";
|
|
18
|
+
import { a as ct, n as lt, o as ut, s as dt, v as ft, y as pt } from "./toolbar-items-CZ1lJXZZ.js";
|
|
19
19
|
import { t as mt } from "./dist-DkQbkF9T.js";
|
|
20
20
|
import { o as ht, s as gt, t as _t } from "./use-click-lock-Bwg_caHO.js";
|
|
21
21
|
import { a as vt, r as yt } from "./icon-sprites-CaYXzOL4.js";
|
|
22
22
|
import { t as bt } from "./warn-once-C_e47JM8.js";
|
|
23
|
-
import { r as xt, t as St } from "./button-
|
|
24
|
-
import { a as Ct } from "./translator-
|
|
23
|
+
import { r as xt, t as St } from "./button-h9hXBEQB.js";
|
|
24
|
+
import { a as Ct } from "./translator-DoVsjUff.js";
|
|
25
25
|
import { h as wt } from "./get-CTzJAwfc.js";
|
|
26
26
|
import { t as Tt } from "./isEmpty-F_g3jLf8.js";
|
|
27
|
-
import { t as L } from "./use-material-translation-
|
|
28
|
-
import { t as R } from "./icon-button-
|
|
27
|
+
import { t as L } from "./use-material-translation-BdrItuwY.js";
|
|
28
|
+
import { t as R } from "./icon-button-DE1EcO2-.js";
|
|
29
29
|
import { t as Et } from "./use-ssr-media-query-C6M5m8sf.js";
|
|
30
30
|
import { n as Dt, t as Ot } from "./typography-CYEquVeb.js";
|
|
31
31
|
import { n as kt, t as At } from "./util-4heV2LPI.js";
|
|
@@ -36,14 +36,14 @@ import { a as Bt } from "./toggle-group-CVMxEpWi.js";
|
|
|
36
36
|
import { n as Vt } from "./use-slice-reducer-BGkeGtML.js";
|
|
37
37
|
import { t as Ht } from "./browser-only-DQ94lWF8.js";
|
|
38
38
|
import { t as Ut } from "./compose-refs-G4J4kaUA.js";
|
|
39
|
-
import { n as Wt, r as Gt, t as Kt } from "./chip-
|
|
39
|
+
import { n as Wt, r as Gt, t as Kt } from "./chip-C-RAjar5.js";
|
|
40
40
|
import { a as qt, c as Jt, o as Yt, r as Xt, s as Zt, t as Qt } from "./input-CC2joTjB.js";
|
|
41
41
|
import { t as $t } from "./text-field-BAdY-kpO.js";
|
|
42
42
|
import { r as en } from "./use-csp-nonce-ZKs9k-ov.js";
|
|
43
|
-
import { t as tn } from "./empty-state-
|
|
43
|
+
import { t as tn } from "./empty-state-CCRfjt0n.js";
|
|
44
44
|
import { t as nn } from "./skeleton-DSdtr2qc.js";
|
|
45
|
-
import { l as rn, n as an, o as on, r as sn, s as cn, t as ln, u as un } from "./dialog-
|
|
46
|
-
import { t as dn } from "./icon-badge-
|
|
45
|
+
import { l as rn, n as an, o as on, r as sn, s as cn, t as ln, u as un } from "./dialog-Bul68q8u.js";
|
|
46
|
+
import { t as dn } from "./icon-badge-0Xo9q7Ey.js";
|
|
47
47
|
import { H as fn, V as pn, X as mn, bt as hn, it as gn, lt as _n, n as vn, t as yn, xt as bn, yt as xn } from "./dist-moutbfbd.js";
|
|
48
48
|
import { t as Sn } from "./markdown-Dw_uH7j7.js";
|
|
49
49
|
import { r as Cn, t as wn } from "./create-store-Dqp-PLLn.js";
|
|
@@ -11229,7 +11229,7 @@ var aS = (e = {}) => Cn({
|
|
|
11229
11229
|
let [{ default: t }, { lowlight: n }, { richCodeBlock: r }] = await Promise.all([
|
|
11230
11230
|
import("./dist-CRMFGjng.js"),
|
|
11231
11231
|
import("./lowlight-OtcjU2Sa.js"),
|
|
11232
|
-
import("./rich-code-block-
|
|
11232
|
+
import("./rich-code-block-CdVtxD75.js")
|
|
11233
11233
|
]);
|
|
11234
11234
|
return [r(t, {
|
|
11235
11235
|
lowlight: n,
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { t as e } from "./utils-BLfntITJ.js";
|
|
2
|
-
import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-
|
|
3
|
-
import { a as l } from "./button-
|
|
4
|
-
import { i as u } from "./translate-material-
|
|
5
|
-
import { t as d } from "./use-material-translation-
|
|
2
|
+
import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-CEGs7LMN.js";
|
|
3
|
+
import { a as l } from "./button-h9hXBEQB.js";
|
|
4
|
+
import { i as u } from "./translate-material-BrYBBZ66.js";
|
|
5
|
+
import { t as d } from "./use-material-translation-BdrItuwY.js";
|
|
6
6
|
import { _ as f, g as p, h as m, t as h, v as g, y as _ } from "./date.utils-JTEIo3mM.js";
|
|
7
7
|
import { useCallback as v, useEffect as y, useMemo as b, useRef as x, useState as S } from "react";
|
|
8
8
|
import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { o as e, r as t } from "./dist-DVRQkaTK.js";
|
|
2
2
|
import { i as n, n as r, r as i, t as a } from "./dist-DWZXlCZR.js";
|
|
3
|
-
import { C as o, S as s, x as c } from "./spinner-
|
|
3
|
+
import { C as o, S as s, x as c } from "./spinner-DcW21pN1.js";
|
|
4
4
|
import { a as l, i as u, r as d } from "./dist-DHdUUM1w.js";
|
|
5
5
|
import { c as f, i as p, l as m, o as h, r as g, s as ee } from "./in-dialog-D61Yeaol.js";
|
|
6
6
|
import { r as te } from "./escape-owner-DpaP0lm1.js";
|
|
@@ -46,12 +46,13 @@ Labelled inputs with a value, each with its form-library wrapper, and the compos
|
|
|
46
46
|
|
|
47
47
|
## [Date & time](date-and-time.md)
|
|
48
48
|
|
|
49
|
-
Calendar, date, range, time, duration, a month navigator, the now line.
|
|
49
|
+
Calendar, date, range, half-day range, time, duration, a month navigator, the now line. 9 entries.
|
|
50
50
|
|
|
51
51
|
[<img src="../previews/date-time-datefield.webp" height="72" alt="DateField">](date-and-time.md#datefield)
|
|
52
52
|
[<img src="../previews/date-time-daterangefield.webp" height="72" alt="DateRangeField">](date-and-time.md#daterangefield)
|
|
53
53
|
[<img src="../previews/date-time-timefield.webp" height="72" alt="TimeField">](date-and-time.md#timefield)
|
|
54
54
|
[<img src="../previews/date-time-durationfield.webp" height="72" alt="DurationField">](date-and-time.md#durationfield)
|
|
55
|
+
[<img src="../previews/date-time-halfdayrangefield.webp" height="72" alt="HalfDayRangeField">](date-and-time.md#halfdayrangefield)
|
|
55
56
|
[<img src="../previews/date-time-minimonth.webp" height="72" alt="MiniMonth">](date-and-time.md#minimonth)
|
|
56
57
|
[<img src="../previews/date-time-nowindicator.webp" height="72" alt="NowIndicator">](date-and-time.md#nowindicator)
|
|
57
58
|
|
|
@@ -28,6 +28,7 @@ either can be used alone.
|
|
|
28
28
|
| <img src="../previews/data-table-filter-lists-pagination.webp" width="96" alt=""> | [Pagination](#pagination) | Pagination primitives and `PaginationBar` |
|
|
29
29
|
| <img src="../previews/data-table-filter-lists-tree.webp" width="96" alt=""> | [Tree](#tree) | Expandable tree with selection and keyboard navigation |
|
|
30
30
|
| <img src="../previews/data-table-filter-lists-listpane.webp" width="96" alt=""> | [ListPane](#listpane) | A card for a list: select-all, title, count, filter, a scrolling body and a footer, with `ListPaneItem` rows |
|
|
31
|
+
| <img src="../previews/data-table-filter-lists-markinglist.webp" width="96" alt=""> | [MarkingList](#markinglist) | People in rows with a shared segmented choice (present, absent, late), a detail slot, locked rows, "set remaining to" and a live tally |
|
|
31
32
|
| <img src="../previews/data-table-filter-lists-drag-and-drop.webp" width="96" alt=""> | [Drag and drop](#drag-and-drop) | `DndProvider`, `Sortable` and friends |
|
|
32
33
|
|
|
33
34
|
## DataTable
|
|
@@ -817,6 +818,9 @@ export default function Students() {
|
|
|
817
818
|
links built by `serverPagination`: `previous` replays the `trail`, so a
|
|
818
819
|
forward-only API still goes back. `pageHref` builds the hrefs (default
|
|
819
820
|
`` `?${params}` ``), `pagingNames` renames `after` / `trail`.
|
|
821
|
+
`maxTrail` (default 20) caps the cursors the URL keeps: past it the oldest
|
|
822
|
+
become a counted cut mark (`trail=~3,c4,c5`), the range stays exact, and
|
|
823
|
+
Previous from the cut goes to the first page (`<ServerTable maxTrail={50} … />`).
|
|
820
824
|
- **One live region.** With `filter`, the Filter's region tells the count
|
|
821
825
|
("3 results") once the new query is answered: the list has no region of
|
|
822
826
|
its own, `DataTable`'s "Loading data…" stays silent, and the footer's
|
|
@@ -1057,6 +1061,7 @@ Its props are `ServerTableProps<T>`; `filter` is a `ServerTableFilter`,
|
|
|
1057
1061
|
| `enableRowSelection`, `rowSelectionDisabledReason` | `boolean \| (row) => boolean`, `(row) => string \| undefined` | all rows, no reason | with `bulkActions`: which rows can be selected, and why one cannot ([DataTable](#datatable)) |
|
|
1058
1062
|
| `pageHref` | `(params) => string` | `` `?${params}` `` | Previous / Next hrefs |
|
|
1059
1063
|
| `pagingNames` | `{ after?, trail? }` | `after`, `trail` | the cursor's params |
|
|
1064
|
+
| `maxTrail` | `number` | `20` | the cursors the URL keeps; older ones collapse into a counted cut mark (`trail=~3,c4,c5`), Previous from the cut goes to the first page, the range stays exact |
|
|
1060
1065
|
| `resultsLabel` | `(count) => string` | "N results" | without `filter`: what the list's region says. The page past the last has its own words: `material.server-table.past-end`, `past-end-hint`, `first-page` and `past-end-status` |
|
|
1061
1066
|
| `className` | `string` | — | on the list's surface (below 768px the list has no padding or background of its own) |
|
|
1062
1067
|
|
|
@@ -1528,6 +1533,7 @@ A list that fits one page shows "1–5 of 5" by default. `hideOnSinglePage` rend
|
|
|
1528
1533
|
| `count` | `number` | `pageSize` | items on this page, for a short last page |
|
|
1529
1534
|
| `pageHref` | `(params) => string` | ``?${params}`` | a page's href |
|
|
1530
1535
|
| `pagingNames` | `{ after?, trail? }` | `after`, `trail` | the cursor's search param names |
|
|
1536
|
+
| `maxTrail` | `number` | `20` | the cursors the URL keeps; older ones collapse into a counted cut mark (`trail=~3,c4,c5`), Previous from the cut goes to the first page, the range stays exact |
|
|
1531
1537
|
| `pageControls` | `'labelled' \| 'icon'` | `'labelled'` | icon-only controls with a tooltip; 44x44 boxes on a coarse pointer |
|
|
1532
1538
|
| `hideOnSinglePage` | `boolean` | `false` | renders nothing when there is no previous and no next page; the range is then not shown, so tell the count elsewhere (a heading, a status line) or keep the footer |
|
|
1533
1539
|
| `live` | `boolean` | `true` | `false` renders the range as plain text instead of a polite live region |
|
|
@@ -2940,6 +2946,103 @@ yourself.
|
|
|
2940
2946
|
|
|
2941
2947
|
---
|
|
2942
2948
|
|
|
2949
|
+
## MarkingList
|
|
2950
|
+
|
|
2951
|
+

|
|
2952
|
+
|
|
2953
|
+
People in rows, each with the same app-defined segmented choice, to mark many quickly: a roll call, a grade-sheet-like screen. The value is controlled. One tab stop for the whole list, arrow keys between segments and rows, a tally, and "Set remaining to" for the rows still unmarked. One column on a phone, with 48px targets.
|
|
2954
|
+
|
|
2955
|
+
```tsx
|
|
2956
|
+
import { useState } from 'react';
|
|
2957
|
+
import {
|
|
2958
|
+
MarkingList,
|
|
2959
|
+
type MarkingChoice,
|
|
2960
|
+
type MarkingRow,
|
|
2961
|
+
type MarkingValue,
|
|
2962
|
+
} from '@nxgt/material/components';
|
|
2963
|
+
|
|
2964
|
+
const choices: MarkingChoice[] = [
|
|
2965
|
+
{ id: 'present', label: 'Present', tone: 'success' },
|
|
2966
|
+
{ id: 'absent', label: 'Absent', tone: 'error' },
|
|
2967
|
+
{ id: 'late', label: 'Late', tone: 'warning' },
|
|
2968
|
+
];
|
|
2969
|
+
|
|
2970
|
+
function RollCall({ pupils }: { pupils: { id: string; name: string }[] }) {
|
|
2971
|
+
const [value, setValue] = useState<MarkingValue>({});
|
|
2972
|
+
return (
|
|
2973
|
+
<MarkingList
|
|
2974
|
+
label="Roll call, class 6A"
|
|
2975
|
+
choices={choices}
|
|
2976
|
+
rows={[
|
|
2977
|
+
...pupils,
|
|
2978
|
+
{ id: 'x', name: 'Cy Young', locked: 'Excused by the office' },
|
|
2979
|
+
]}
|
|
2980
|
+
value={value}
|
|
2981
|
+
onValueChange={(rowId, choiceId) =>
|
|
2982
|
+
setValue((v) => ({ ...v, [rowId]: choiceId }))
|
|
2983
|
+
}
|
|
2984
|
+
onSetRemaining={(choiceId, rowIds) =>
|
|
2985
|
+
setValue((v) => ({
|
|
2986
|
+
...v,
|
|
2987
|
+
...Object.fromEntries(rowIds.map((id) => [id, choiceId])),
|
|
2988
|
+
}))
|
|
2989
|
+
}
|
|
2990
|
+
/>
|
|
2991
|
+
);
|
|
2992
|
+
}
|
|
2993
|
+
```
|
|
2994
|
+
|
|
2995
|
+
A detail on demand, no tally, the open rows held by the app, and "Set remaining to" offering "Present" alone:
|
|
2996
|
+
|
|
2997
|
+
```tsx
|
|
2998
|
+
const renderDetail = (row: MarkingRow) => <ArrivalNote pupilId={row.id} />; // stable: defined once
|
|
2999
|
+
|
|
3000
|
+
<MarkingList
|
|
3001
|
+
label="Roll call"
|
|
3002
|
+
choices={choices}
|
|
3003
|
+
rows={rows}
|
|
3004
|
+
value={value}
|
|
3005
|
+
onValueChange={onValueChange}
|
|
3006
|
+
tally={false}
|
|
3007
|
+
renderDetail={renderDetail}
|
|
3008
|
+
expanded={open}
|
|
3009
|
+
onExpandedChange={setOpen}
|
|
3010
|
+
onSetRemaining={onSetRemaining}
|
|
3011
|
+
setRemainingChoices={['present']}
|
|
3012
|
+
/>
|
|
3013
|
+
```
|
|
3014
|
+
|
|
3015
|
+
Use `defaultExpanded={['id']}` instead of `expanded` to let the list hold the open rows itself.
|
|
3016
|
+
|
|
3017
|
+
| Prop | Type | Default | Effect |
|
|
3018
|
+
| --- | --- | --- | --- |
|
|
3019
|
+
| `choices` | `{ id, label, text?, tone?, icon? }[]` | required | the segments every row shares; `tone` colours the chosen segment and its tally figure (`neutral` without one), `text` is the plain-text name when `label` is not a string. The chosen segment also shows a check, so colour never carries it alone |
|
|
3020
|
+
| `rows` | `{ id, name, description?, leading?, locked? }[]` | required | the people; `name` names the row's group, `leading` takes an `Avatar`, `locked` (a reason) makes the row read-only: its segments stay focusable with `aria-disabled`, each described by the reason, which is also shown under the name |
|
|
3021
|
+
| `value` | `Record<string, string \| null>` | required | each row's chosen `id` (controlled); a missing id or `null` is unmarked |
|
|
3022
|
+
| `onValueChange` | `(rowId, choiceId \| null) => void` | required | a segment was pressed; `null` when the chosen segment is pressed again. Not called for a locked row |
|
|
3023
|
+
| `onSetRemaining` | `(choiceId, rowIds) => void` | — | shows the "Set remaining to" buttons; `rowIds` are the unmarked, unlocked rows, so one update applies it. The buttons are `aria-disabled` when no row is left, so the focus stays |
|
|
3024
|
+
| `setRemainingChoices` | `string[]` | all choices | the choice ids "Set remaining to" offers |
|
|
3025
|
+
| `label` | `string` | required | names the list |
|
|
3026
|
+
| `tally` | `boolean` | `true` | counts per choice, `Unmarked` (unlocked rows with no choice: 0 means done) and `Locked` (locked rows with no choice, shown when above 0). Plain text; a hidden live region says "n marked Choice" at once after a bulk change, and "Unmarked: n" once marking pauses (loading a saved value is silent) |
|
|
3027
|
+
| `renderDetail` | `(row) => ReactNode` | — | gives every row an expand button (`aria-expanded`), reached with Right past the last segment; called only while the row is open. Keep it stable (`useCallback` or module scope) so closed rows do not re-render. Closing a row unmounts its detail: hold the detail's values in your state |
|
|
3028
|
+
| `defaultExpanded` / `expanded` / `onExpandedChange` | `string[]` / `string[]` / `(ids) => void` | `[]` | the open rows, uncontrolled or controlled |
|
|
3029
|
+
|
|
3030
|
+
| Key | Does |
|
|
3031
|
+
| --- | --- |
|
|
3032
|
+
| Tab | enters the list once (one tab stop), leaves it once |
|
|
3033
|
+
| Left / Right | previous / next cell of the row, swapped in right-to-left; the last cell is the expand button when there is `renderDetail` |
|
|
3034
|
+
| Up / Down | the same cell of the previous / next row, locked rows included; stops at the first and last row |
|
|
3035
|
+
| Home / End | the row's first / last segment |
|
|
3036
|
+
| Space / Enter | presses the segment (marks, or unmarks the chosen one) or opens the detail |
|
|
3037
|
+
|
|
3038
|
+
Moving never marks anyone. The segments are `aria-pressed` toggle buttons in a `group` named by the person; the copy comes from the `marking-list.*` i18n keys.
|
|
3039
|
+
|
|
3040
|
+
Known limit: the segments share one row of equal columns, so with six or more choices they overflow at 360px. Keep a phone list to five choices or fewer; a wrapping layout is tracked in #2553.
|
|
3041
|
+
|
|
3042
|
+
**Storybook:** `Data table, filter & lists/MarkingList`
|
|
3043
|
+
|
|
3044
|
+
---
|
|
3045
|
+
|
|
2943
3046
|
## ListPane
|
|
2944
3047
|
|
|
2945
3048
|

|