@nxgt/material 3.86.1 → 3.87.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 +1 -0
- package/dist/{alert-dialog-DZnt8PYE.js → alert-dialog-DC_9MW49.js} +1 -1
- package/dist/{async-slice-D3OdV2BS.js → async-slice-C6XbESai.js} +1 -1
- package/dist/{button-MAL5an7L.js → button-BksHtogl.js} +1 -1
- package/dist/{calculator-C3a8YMwl.js → calculator-C_dTrMWE.js} +10 -10
- package/dist/calculator-field.js +6 -6
- package/dist/{calculator-segment-BigMpjhn.js → calculator-segment-FOUl66f6.js} +1 -1
- package/dist/calculator.js +1 -1
- package/dist/charts.js +3 -3
- package/dist/{chip-DKAKoNxq.js → chip-BWaC87zs.js} +2 -2
- package/dist/{code-editor-B6dFQSUJ.js → code-editor-ddbQ0pEc.js} +4 -4
- package/dist/code-editor.js +4 -4
- package/dist/{code-language-items-CXEMiWoF.js → code-language-items-jRlQfjAm.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-C2MBVly0.js → components-B5p3JKhQ.js} +15875 -15491
- package/dist/components.js +37 -37
- package/dist/{conversion-variant-BT5n4-jm.js → conversion-variant-Cauk0BMS.js} +3 -3
- package/dist/{currency-field-t41sFYg_.js → currency-field-Dy2e9kSr.js} +4 -4
- package/dist/{dialog-BjKiRXJg.js → dialog-DNDT81SC.js} +3 -3
- package/dist/dnd.js +1 -1
- package/dist/{dropdown-menu-IRFp4CH9.js → dropdown-menu-DtVC2xQW.js} +1 -1
- package/dist/editor.js +7 -7
- package/dist/{empty-state-C70prDDr.js → empty-state-Dfsp5UF4.js} +1 -1
- package/dist/{financial-variant-BIpzs8IL.js → financial-variant-0fJAMale.js} +5 -5
- package/dist/{hooks-CjO11MS7.js → hooks-kPRle6lM.js} +2 -2
- package/dist/hooks.js +2 -2
- package/dist/{hover-card-cU_aJa18.js → hover-card-CsxW7S7D.js} +1 -1
- package/dist/i18n.js +3 -3
- package/dist/{icon-badge-D3KO6uEQ.js → icon-badge-8CPy2xAU.js} +1 -1
- package/dist/{icon-button-DrqNk1Ww.js → icon-button-caFcCpXV.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/fields/contacts/placeholders.d.ts +1 -1
- package/dist/lib/i18n/resources/en/en.d.ts +10 -0
- package/dist/lib/i18n/resources/en/material.json.d.ts +10 -0
- package/dist/lib/i18n/resources/fr/fr.d.ts +10 -0
- package/dist/lib/i18n/resources/fr/material.json.d.ts +10 -0
- package/dist/lib/i18n/resources/resources.d.ts +20 -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-B6mJfY_p.js} +1 -1
- package/dist/{picker-surface-Cg4V4-E0.js → picker-surface-CVAW0t-r.js} +4 -4
- package/dist/{popover-Dzk4-l9U.js → popover-DhRPftzZ.js} +1 -1
- package/dist/{pos-types-JOXMY4Y2.js → pos-types-QcM9WTr0.js} +1 -1
- package/dist/{pos-variant-B2mS8bMB.js → pos-variant-BeON2e_Q.js} +4 -4
- package/dist/print.js +1 -1
- package/dist/{programmer-variant-C_Tl0P4_.js → programmer-variant-3cEMiII7.js} +2 -2
- package/dist/{public-ByAsqBOf.js → public-DezkDXv3.js} +10 -10
- package/dist/{rich-code-block-CJAfqk6b.js → rich-code-block-DloPqrFQ.js} +5 -5
- package/dist/{scientific-variant-CskM4MLV.js → scientific-variant-0Fq8HLiY.js} +2 -2
- package/dist/{sortable-provider-ICS_vkLA.js → sortable-provider-OB35mdNh.js} +2 -2
- package/dist/{spinner-CweqX5A9.js → spinner-CngjH5-n.js} +1 -1
- package/dist/{tabs-95Y2LmnV.js → tabs-C0CPqX5U.js} +1 -1
- package/dist/theme-picker.js +2 -2
- package/dist/{theme-toggle-WAFkncYx.js → theme-toggle-BfXRbCwj.js} +1 -1
- package/dist/{toolbar-items-BsgzHSNf.js → toolbar-items-BU5_H3UA.js} +4 -4
- package/dist/{translate-material-DTIAPmlU.js → translate-material-B1wzg7uX.js} +1 -1
- package/dist/{translator-BRZNhsy5.js → translator-BwUYrek9.js} +20 -0
- package/dist/{use-chat-composer-CleSUh_y.js → use-chat-composer-Bsc1gCRQ.js} +15 -15
- package/dist/{use-heading-spy-D8WbHJuK.js → use-heading-spy-BpeWvZ2y.js} +4 -4
- package/dist/{use-material-translation-CCy1Me0h.js → use-material-translation-BDVGF7-Z.js} +1 -1
- package/dist/{use-return-focus-BA8G1qVU.js → use-return-focus-BttT8j1o.js} +1 -1
- package/docs/components/data-display.md +1 -1
- package/docs/components/data-table-filter-and-lists.md +103 -0
- package/docs/components/primitives.md +4 -1
- package/docs/components/rich-widgets.md +4 -2
- package/docs/guides/theming.md +1 -1
- package/docs/previews/data-table-filter-lists-markinglist.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-Dy2e9kSr.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-BttT8j1o.js";
|
|
4
|
+
import { i as p, o as m, r as h, t as g } from "./popover-DhRPftzZ.js";
|
|
5
|
+
import { t as _ } from "./use-material-translation-BDVGF7-Z.js";
|
|
6
|
+
import { n as v, t as y } from "./icon-button-caFcCpXV.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-CngjH5-n.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-BDVGF7-Z.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-BDVGF7-Z.js";
|
|
3
|
+
import { t as n } from "./icon-button-caFcCpXV.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-QcM9WTr0.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-FOUl66f6.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-B1wzg7uX.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-BDVGF7-Z.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-FOUl66f6.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-CngjH5-n.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-BttT8j1o.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-DtVC2xQW.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-BU5_H3UA.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-BksHtogl.js";
|
|
15
|
+
import { t as N } from "./use-material-translation-BDVGF7-Z.js";
|
|
16
|
+
import { n as me, t as he } from "./icon-button-caFcCpXV.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-Dfsp5UF4.js";
|
|
24
|
+
import { r as Te, t as Ee, u as De } from "./dialog-DNDT81SC.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-CngjH5-n.js";
|
|
2
|
+
import { c as t, n, t as r } from "./dropdown-menu-DtVC2xQW.js";
|
|
3
|
+
import { t as i } from "./use-material-translation-BDVGF7-Z.js";
|
|
4
|
+
import { a, i as o, n as s, o as c, t as l } from "./code-language-items-jRlQfjAm.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-ddbQ0pEc.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-BDVGF7-Z.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-FOUl66f6.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-BDVGF7-Z.js";
|
|
4
|
+
import { t as r } from "./icon-button-caFcCpXV.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-BDVGF7-Z.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-BDVGF7-Z.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-BDVGF7-Z.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-BfXRbCwj.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-BDVGF7-Z.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-CngjH5-n.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-DtVC2xQW.js";
|
|
9
|
+
import { a as te, n as ne } from "./popover-DhRPftzZ.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-BDVGF7-Z.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-BwUYrek9.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,16 @@ var r = {
|
|
|
3451
3451
|
menu: "Menu",
|
|
3452
3452
|
footer: "Footer",
|
|
3453
3453
|
"new-tab": "opens in a new tab"
|
|
3454
|
+
},
|
|
3455
|
+
"marking-list": {
|
|
3456
|
+
unmarked: "Unmarked",
|
|
3457
|
+
details: "Details: {name}",
|
|
3458
|
+
"set-remaining": "Set remaining to",
|
|
3459
|
+
"set-remaining-to": "{count, plural, one {Set # remaining to {choice}} other {Set # remaining to {choice}}}",
|
|
3460
|
+
bulk: "{count} marked {choice}",
|
|
3461
|
+
locked: "Locked",
|
|
3462
|
+
"choice-name": "{choice}, {name}",
|
|
3463
|
+
"unmarked-count": "Unmarked: {count}"
|
|
3454
3464
|
}
|
|
3455
3465
|
} },
|
|
3456
3466
|
fr: { material: {
|
|
@@ -6900,6 +6910,16 @@ var r = {
|
|
|
6900
6910
|
menu: "Menu",
|
|
6901
6911
|
footer: "Pied de page",
|
|
6902
6912
|
"new-tab": "s'ouvre dans un nouvel onglet"
|
|
6913
|
+
},
|
|
6914
|
+
"marking-list": {
|
|
6915
|
+
unmarked: "Non marqués",
|
|
6916
|
+
details: "Détails : {name}",
|
|
6917
|
+
"set-remaining": "Marquer le reste comme",
|
|
6918
|
+
"set-remaining-to": "{count, plural, one {Marquer le restant : {choice}} other {Marquer les # restants : {choice}}}",
|
|
6919
|
+
bulk: "{count} marqués : {choice}",
|
|
6920
|
+
locked: "Verrouillés",
|
|
6921
|
+
"choice-name": "{choice}, {name}",
|
|
6922
|
+
"unmarked-count": "Non marqués : {count}"
|
|
6903
6923
|
}
|
|
6904
6924
|
} }
|
|
6905
6925
|
}, 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-CngjH5-n.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-DC_9MW49.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-DtVC2xQW.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-DhRPftzZ.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-C0CPqX5U.js";
|
|
18
|
+
import { a as ct, n as lt, o as ut, s as dt, v as ft, y as pt } from "./toolbar-items-BU5_H3UA.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-BksHtogl.js";
|
|
24
|
+
import { a as Ct } from "./translator-BwUYrek9.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-BDVGF7-Z.js";
|
|
28
|
+
import { t as R } from "./icon-button-caFcCpXV.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-BWaC87zs.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-Dfsp5UF4.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-DNDT81SC.js";
|
|
46
|
+
import { t as dn } from "./icon-badge-8CPy2xAU.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-DloPqrFQ.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-DC_9MW49.js";
|
|
3
|
+
import { a as l } from "./button-BksHtogl.js";
|
|
4
|
+
import { i as u } from "./translate-material-B1wzg7uX.js";
|
|
5
|
+
import { t as d } from "./use-material-translation-BDVGF7-Z.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-CngjH5-n.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";
|
|
@@ -1530,7 +1530,7 @@ import { EventChip } from '@nxgt/material/components';
|
|
|
1530
1530
|
| `allDay` | `boolean` | `false` | no time |
|
|
1531
1531
|
| `compact` | `boolean` | `false` | one line, the time before the title, for month cells |
|
|
1532
1532
|
| `continuesBefore`, `continuesAfter` | `boolean` | `false` | square edges for a multi-day event |
|
|
1533
|
-
| `badge` | `{ label: string; tone?: Tone }` | — | a small tinted label after the title (neutral without a `tone`); cut with an ellipsis
|
|
1533
|
+
| `badge` | `{ label: string; tone?: Tone }` | — | a small tinted label after the title (neutral without a `tone`); cut with an ellipsis; in a box under 20px tall or 7rem wide it becomes a tone dot (its tooltip is the label) while the label stays in the chip's accessible name. `EventCalendar` sets it from `CalendarEvent.badge` |
|
|
1534
1534
|
| `selected`, `disabled` | `boolean` | `false` | state |
|
|
1535
1535
|
|
|
1536
1536
|
**Storybook:** `Data display/EventChip` · **Vue:** `EventChip` (`variant`, `endTime`: React only for now, #892; `badge`: #2526)
|
|
@@ -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
|

|
|
@@ -1142,7 +1142,10 @@ page's: Radix writes `dir="ltr"` on the group unless told. A `segmented`
|
|
|
1142
1142
|
group of 9 items or more has no sliding pill: the checked item paints its
|
|
1143
1143
|
own.
|
|
1144
1144
|
|
|
1145
|
-
|
|
1145
|
+
Under a coarse pointer (a touch screen) every item is at least 44×44 px, in
|
|
1146
|
+
every variant, size and orientation, icon-only included.
|
|
1147
|
+
|
|
1148
|
+
**Storybook:** `Primitives/ToggleGroup`, `Guides/Accessibility/Touch targets/Toggle group` · **Vue:** `ToggleGroup`, `ToggleGroupItem`
|
|
1146
1149
|
|
|
1147
1150
|
---
|
|
1148
1151
|
|
|
@@ -367,8 +367,10 @@ const events: CalendarEvent[] = [
|
|
|
367
367
|
- **Accessibility.** The label is part of the event's name (`Visit, Follow-up`),
|
|
368
368
|
and the tone is never the only signal.
|
|
369
369
|
- **Small boxes.** A long label is cut with an ellipsis inside its chip. In a
|
|
370
|
-
box under 20px tall or
|
|
371
|
-
|
|
370
|
+
box under 20px tall or 7rem wide (a phone's week column) it falls back to a
|
|
371
|
+
small dot in the badge's tone, with the label as its tooltip; the label stays
|
|
372
|
+
in the event's accessible name. The agenda view wraps a long description
|
|
373
|
+
instead of cutting it.
|
|
372
374
|
|
|
373
375
|
### EventCalendar resources
|
|
374
376
|
|
package/docs/guides/theming.md
CHANGED
|
@@ -1167,7 +1167,7 @@ are, without growing what is painted (nothing changes for a mouse):
|
|
|
1167
1167
|
`trailing` button of a `TextField`), an autocomplete chip's remove button
|
|
1168
1168
|
(padding the background is clipped out of, with a negative margin, so the
|
|
1169
1169
|
chip and the drawn disc keep their size), and a table's select-all and
|
|
1170
|
-
row-select checkboxes, which sit in a 44x44 `<label>` that toggles them.
|
|
1170
|
+
row-select checkboxes, which sit in a 44x44 `<label>` that toggles them, `AppBreadcrumb` and `BreadcrumbLink` crumbs (at every width), the `FilterBar` / `ServerTable` search input (at both densities), and the move up / move down buttons of `RepeatableGroup` and `ChoiceListFormField` (`reorderable`).
|
|
1171
1171
|
- **The label or row that toggles it is 44px tall** (and at least 44px wide):
|
|
1172
1172
|
a `Checkbox` with a `label`, a `Switch` with a `placeholder` (its row), and
|
|
1173
1173
|
a `RadioGroup` option. The box itself stays 20px or 32px: a finger anywhere
|
|
Binary file
|
package/docs/roadmap.md
CHANGED
|
@@ -167,6 +167,7 @@ version they shipped in, and planned entries may name the major they target.
|
|
|
167
167
|
pill. What changes on upgrade:
|
|
168
168
|
[The field look (2.x)](guides/field-look-2-x.md)
|
|
169
169
|
- **`TotalsList`** — the on-screen `PrintTotals` (#2490): React only for now; Vue twin is #2492.
|
|
170
|
+
- **`MarkingList`** — people in rows with a shared segmented choice, a detail slot, locked rows, "set remaining to" and a live tally (#2547): React only for now; Vue twin is #2549.
|
|
170
171
|
|
|
171
172
|
## Next
|
|
172
173
|
|
|
@@ -254,8 +255,6 @@ version they shipped in, and planned entries may name the major they target.
|
|
|
254
255
|
slot; the bar's `views` slot is planned with it. They are meant to replace
|
|
255
256
|
the legacy `FilterPresets`. Tracked in [#1876](https://github.com/softistx/nxgt-material/issues/1876).
|
|
256
257
|
|
|
257
|
-
- **Cursor trail cap** — `ServerTable` and `PageFooter` keep cursor URLs short: the trail is encoded once and capped by `maxTrail` (20 by default) with an exact page count, and `totalCount` becomes optional for APIs that do not count.
|
|
258
|
-
|
|
259
258
|
## Later
|
|
260
259
|
|
|
261
260
|
- **A lighter first load for the app shell** — `ActivityLayout` pulls about
|
|
@@ -380,6 +379,12 @@ version they shipped in, and planned entries may name the major they target.
|
|
|
380
379
|
|
|
381
380
|
## Shipped
|
|
382
381
|
|
|
382
|
+
- **Cursor trail cap** — `ServerTable` and `PageFooter` keep cursor URLs short:
|
|
383
|
+
each trail entry is encoded once and the trail is capped by `maxTrail` (20 by
|
|
384
|
+
default, a prop on each) behind a counted cut mark, so the "21–40 of N" range
|
|
385
|
+
stays exact; Previous from the cut goes back to the first page. (`ServerTable`'s
|
|
386
|
+
`totalCount` was already optional, with no range then; shipped earlier.)
|
|
387
|
+
|
|
383
388
|
- **App shell header refresh: the TopAppBar family (next minor)** — `TopAppBar`
|
|
384
389
|
takes four sizes (`small`, `medium-flexible`, `large-flexible`, `search`), an
|
|
385
390
|
`align`, a `title` that is the page's `h1` with a `subtitle`, and a collapse
|
|
@@ -148,6 +148,8 @@
|
|
|
148
148
|
@import "./ui/display/vote-tally/vote-tally.css";
|
|
149
149
|
/* TubeCap: a specimen tube chip, cap colours fixed by the tube convention. */
|
|
150
150
|
@import "./ui/display/tube-cap/tube-cap.css";
|
|
151
|
+
/* MarkingList: forced-colours rules for the chosen segment. */
|
|
152
|
+
@import "./ui/collections/marking-list/marking-list.css";
|
|
151
153
|
/* SecretCard: a face that is not rendered until it is revealed. */
|
|
152
154
|
@import "./ui/display/secret-card/secret-card.css";
|
|
153
155
|
/* Alert and Banner span the row in the form grids (#1497). */
|