@nxgt/material 3.92.0 → 3.93.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 +40 -0
- package/README.md +2 -2
- package/dist/{alert-dialog-Bz5PlYKp.js → alert-dialog-D37eph4I.js} +1 -1
- package/dist/{async-slice-veSVxKqt.js → async-slice-BSqwhAj-.js} +1 -1
- package/dist/{button-a3tH3pq4.js → button-CG9SBAT-.js} +1 -1
- package/dist/{calculator-BtuKV3PK.js → calculator-YD3I3y-I.js} +10 -10
- package/dist/calculator-field.js +6 -6
- package/dist/{calculator-segment-CyB9IhEq.js → calculator-segment-Cjec9zi7.js} +1 -1
- package/dist/calculator.js +1 -1
- package/dist/charts.js +3 -3
- package/dist/{chip-BwGvGx_S.js → chip-BbUSBl3i.js} +2 -2
- package/dist/{code-editor-BLkmEoCi.js → code-editor-ZEM7AAcs.js} +4 -4
- package/dist/code-editor.js +4 -4
- package/dist/{code-language-items-DhAC_tCs.js → code-language-items-CAuHPrHd.js} +2 -2
- package/dist/components/components.css +1 -0
- package/dist/components/ui/widgets/event-calendar/event-calendar-backdrop.css +43 -0
- package/dist/{components-DX4aHtgP.js → components-CuFTrmGy.js} +19654 -19043
- package/dist/components.js +38 -38
- package/dist/{conversion-variant-C4t7aH9d.js → conversion-variant-DmEtTCSP.js} +3 -3
- package/dist/{currency-field-D0UQb5pn.js → currency-field-CabGnVO9.js} +5 -5
- package/dist/{dialog-vQMypIOm.js → dialog-Jhpx6ulb.js} +3 -3
- package/dist/dnd.js +1 -1
- package/dist/{dropdown-menu-B2ctUFti.js → dropdown-menu-nl0Q3tQ2.js} +1 -1
- package/dist/editor.js +7 -7
- package/dist/{empty-state-Bs44jnWk.js → empty-state-mrJuqph3.js} +1 -1
- package/dist/{financial-variant-B5iZ3pYf.js → financial-variant-P8gFA9aI.js} +5 -5
- package/dist/{hooks-CJtRFDYD.js → hooks-CjSpziWf.js} +2 -2
- package/dist/hooks.js +2 -2
- package/dist/{hover-card-B8PYUsv_.js → hover-card-BNb1M8ij.js} +1 -1
- package/dist/i18n.js +3 -3
- package/dist/{icon-badge-YT98b2Vx.js → icon-badge-CVMHwdFm.js} +1 -1
- package/dist/{icon-button-BylI02aX.js → icon-button-Ch0PThsa.js} +1 -1
- package/dist/{input-group-CiayHfBN.js → input-group-CPMSQcBx.js} +1 -1
- package/dist/lib/components/ui/collections/day-grouped-list/index.d.ts +6 -0
- package/dist/lib/components/ui/display/entity-header/entity-metadata.d.ts +2 -0
- package/dist/lib/components/ui/display/event-chip/event-chip-badges.d.ts +21 -0
- package/dist/lib/components/ui/display/event-chip/event-chip-content.d.ts +5 -7
- package/dist/lib/components/ui/display/event-chip/event-chip-title.d.ts +9 -0
- package/dist/lib/components/ui/display/event-chip/event-chip.classes.d.ts +9 -0
- package/dist/lib/components/ui/display/event-chip/event-chip.d.ts +15 -2
- package/dist/lib/components/ui/fields/attributes/attribute-values-form-field-set/attribute-values-form-field-set.d.ts +1 -1
- package/dist/lib/components/ui/fields/choice-list/choice-list-control.d.ts +1 -1
- package/dist/lib/components/ui/fields/choice-list/choice-list-field.d.ts +1 -1
- package/dist/lib/components/ui/fields/choice-list/choice-list-focus.d.ts +6 -3
- package/dist/lib/components/ui/fields/choice-list/choice-list-form-field.d.ts +2 -2
- package/dist/lib/components/ui/fields/choice-list/choice-list-names.d.ts +2 -0
- package/dist/lib/components/ui/fields/choice-list/choice-list.utils.d.ts +2 -0
- package/dist/lib/components/ui/fields/choice-list/index.d.ts +1 -1
- package/dist/lib/components/ui/fields/choice-list/partials/choice-row.d.ts +9 -3
- package/dist/lib/components/ui/fields/choice-list/types.d.ts +20 -0
- package/dist/lib/components/ui/fields/contacts/placeholders.d.ts +1 -1
- package/dist/lib/components/ui/layout/record-page/record-details.d.ts +6 -6
- package/dist/lib/components/ui/widgets/event-calendar/backdrop.types.d.ts +75 -0
- package/dist/lib/components/ui/widgets/event-calendar/chrome.types.d.ts +12 -0
- package/dist/lib/components/ui/widgets/event-calendar/event-calendar-context.d.ts +8 -1
- package/dist/lib/components/ui/widgets/event-calendar/event-calendar-events.utils.d.ts +3 -1
- package/dist/lib/components/ui/widgets/event-calendar/event-calendar-shell.d.ts +1 -1
- package/dist/lib/components/ui/widgets/event-calendar/event-calendar.backdrop.d.ts +38 -0
- package/dist/lib/components/ui/widgets/event-calendar/event-calendar.badges.d.ts +14 -0
- package/dist/lib/components/ui/widgets/event-calendar/event-calendar.labels.d.ts +14 -1
- package/dist/lib/components/ui/widgets/event-calendar/event-calendar.lanes.d.ts +9 -0
- package/dist/lib/components/ui/widgets/event-calendar/event-calendar.read-only.d.ts +57 -0
- package/dist/lib/components/ui/widgets/event-calendar/event-calendar.resources.d.ts +6 -1
- package/dist/lib/components/ui/widgets/event-calendar/index.d.ts +2 -1
- package/dist/lib/components/ui/widgets/event-calendar/partials/all-day-bars.d.ts +14 -0
- package/dist/lib/components/ui/widgets/event-calendar/partials/backdrop-bands.d.ts +11 -0
- package/dist/lib/components/ui/widgets/event-calendar/partials/backdrop-bar.d.ts +11 -0
- package/dist/lib/components/ui/widgets/event-calendar/partials/backdrop-cell.d.ts +13 -0
- package/dist/lib/components/ui/widgets/event-calendar/partials/backdrop-row.d.ts +8 -0
- package/dist/lib/components/ui/widgets/event-calendar/partials/calendar-badge.d.ts +16 -0
- package/dist/lib/components/ui/widgets/event-calendar/partials/month-day-cell.d.ts +4 -1
- package/dist/lib/components/ui/widgets/event-calendar/partials/month-day-parts.d.ts +12 -1
- package/dist/lib/components/ui/widgets/event-calendar/partials/resource-header.d.ts +2 -1
- package/dist/lib/components/ui/widgets/event-calendar/partials/span-event.d.ts +3 -1
- package/dist/lib/components/ui/widgets/event-calendar/partials/time-grid-header-day.d.ts +3 -6
- package/dist/lib/components/ui/widgets/event-calendar/partials/zone-corner.d.ts +10 -2
- package/dist/lib/components/ui/widgets/event-calendar/template.types.d.ts +7 -2
- package/dist/lib/components/ui/widgets/event-calendar/types.d.ts +25 -13
- package/dist/lib/components/ui/widgets/event-calendar/use-backdrops.d.ts +8 -0
- package/dist/lib/components/ui/widgets/event-calendar/use-badges.d.ts +5 -0
- package/dist/lib/components/ui/widgets/event-calendar/use-event-calendar.d.ts +3 -2
- package/dist/lib/components/ui/widgets/event-calendar/use-month-day.d.ts +6 -1
- package/dist/lib/components/ui/widgets/event-calendar/use-time-column.d.ts +1 -0
- package/dist/lib/i18n/resources/en/en.d.ts +7 -0
- package/dist/lib/i18n/resources/en/material.json.d.ts +7 -0
- package/dist/lib/i18n/resources/fr/fr.d.ts +7 -0
- package/dist/lib/i18n/resources/fr/material.json.d.ts +7 -0
- package/dist/lib/i18n/resources/resources.d.ts +14 -0
- package/dist/lib/i18n/translator.d.ts +1 -1
- package/dist/lib.js +1 -1
- package/dist/main.js +54 -54
- package/dist/map.js +7 -7
- package/dist/material.css +1 -1
- package/dist/pdf-reader.js +1 -1
- package/dist/{percent-field-DuoZieW9.js → percent-field-TWyupyr_.js} +1 -1
- package/dist/{picker-surface-BKzM6TWN.js → picker-surface-CoNsDWxX.js} +4 -4
- package/dist/{popover-ukgGm5B6.js → popover-BA1U82Wk.js} +1 -1
- package/dist/{pos-types-BNXbls3v.js → pos-types-BQqv-kb6.js} +1 -1
- package/dist/{pos-variant-CZ3OZtPq.js → pos-variant-D043n5y8.js} +4 -4
- package/dist/print.js +1 -1
- package/dist/{programmer-variant-DVu-pYhB.js → programmer-variant-jneMqtLs.js} +2 -2
- package/dist/{public-DtXwn8bx.js → public-DgrbdeZj.js} +9 -9
- package/dist/{rich-code-block-DUaSLxLT.js → rich-code-block-CGNjHawR.js} +5 -5
- package/dist/{scientific-variant-Ku9feVN1.js → scientific-variant-1L7brNNT.js} +2 -2
- package/dist/{sortable-provider-DIb1HgZA.js → sortable-provider-DZLV_svg.js} +2 -2
- package/dist/{spinner-CHWFXCfd.js → spinner-CQqRWxAW.js} +1 -1
- package/dist/{tabs-BideU0Rb.js → tabs-DQTx3C8e.js} +1 -1
- package/dist/theme-picker.js +2 -2
- package/dist/{theme-toggle-DUQTEe1y.js → theme-toggle-3NQ3VmJH.js} +1 -1
- package/dist/{toolbar-items-azkXY5w2.js → toolbar-items-BYCdJGUf.js} +4 -4
- package/dist/{translate-material-d8Q5K5a_.js → translate-material-jxfcGlD5.js} +1 -1
- package/dist/{translator-CxyFsfO0.js → translator-6XuDmqUJ.js} +10 -0
- package/dist/{use-chat-composer-FACltVyX.js → use-chat-composer-1eb4I1kM.js} +16 -16
- package/dist/{use-heading-spy-DHd5TScW.js → use-heading-spy-CzPujlKr.js} +4 -4
- package/dist/{use-material-translation-DA5ECZfA.js → use-material-translation-BUPqNmAg.js} +1 -1
- package/dist/{use-return-focus-CAAvJ6p5.js → use-return-focus-B_enQxp5.js} +1 -1
- package/docs/README.md +1 -0
- package/docs/components/data-display.md +6 -1
- package/docs/components/data-table-filter-and-lists.md +3 -0
- package/docs/components/form-fields.md +38 -5
- package/docs/components/navigation-and-layout.md +1 -0
- package/docs/components/rich-widgets.md +58 -5
- package/docs/guides/event-calendar.md +163 -0
- package/docs/guides/forms.md +2 -1
- package/docs/guides/i18n.md +2 -0
- package/docs/previews/data-display-eventchip.webp +0 -0
- package/docs/previews/rich-widgets-eventcalendar.webp +0 -0
- package/docs/roadmap.md +12 -0
- package/lib/components/components.css +1 -0
- package/lib/components/ui/widgets/event-calendar/event-calendar-backdrop.css +43 -0
- package/package.json +1 -1
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-CabGnVO9.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-B_enQxp5.js";
|
|
4
|
+
import { i as p, o as m, r as h, t as g } from "./popover-BA1U82Wk.js";
|
|
5
|
+
import { t as _ } from "./use-material-translation-BUPqNmAg.js";
|
|
6
|
+
import { n as v, t as y } from "./icon-button-Ch0PThsa.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-CQqRWxAW.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-BUPqNmAg.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-BUPqNmAg.js";
|
|
3
|
+
import { t as n } from "./icon-button-Ch0PThsa.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-BQqv-kb6.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-Cjec9zi7.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-jxfcGlD5.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-BUPqNmAg.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-Cjec9zi7.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-CQqRWxAW.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-B_enQxp5.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-nl0Q3tQ2.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-BYCdJGUf.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-CG9SBAT-.js";
|
|
15
|
+
import { t as N } from "./use-material-translation-BUPqNmAg.js";
|
|
16
|
+
import { n as me, t as he } from "./icon-button-Ch0PThsa.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-mrJuqph3.js";
|
|
24
|
+
import { r as Te, t as Ee, u as De } from "./dialog-Jhpx6ulb.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";
|
|
@@ -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-CQqRWxAW.js";
|
|
2
|
+
import { c as t, n, t as r } from "./dropdown-menu-nl0Q3tQ2.js";
|
|
3
|
+
import { t as i } from "./use-material-translation-BUPqNmAg.js";
|
|
4
|
+
import { a, i as o, n as s, o as c, t as l } from "./code-language-items-CAuHPrHd.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-ZEM7AAcs.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-BUPqNmAg.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-Cjec9zi7.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-BUPqNmAg.js";
|
|
4
|
+
import { t as r } from "./icon-button-Ch0PThsa.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-BUPqNmAg.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-BUPqNmAg.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-BUPqNmAg.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-3NQ3VmJH.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-BUPqNmAg.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-CQqRWxAW.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-nl0Q3tQ2.js";
|
|
9
|
+
import { a as te, n as ne } from "./popover-BA1U82Wk.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-BUPqNmAg.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-6XuDmqUJ.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
|
|
@@ -1763,6 +1763,7 @@ var r = {
|
|
|
1763
1763
|
events: "{count, plural, one {# event} other {# events}}",
|
|
1764
1764
|
more: "+{count} more",
|
|
1765
1765
|
drag: "Drag event",
|
|
1766
|
+
label: "Event calendar",
|
|
1766
1767
|
add: "Add event",
|
|
1767
1768
|
resize: "Resize event",
|
|
1768
1769
|
"new-event": "New event",
|
|
@@ -1782,8 +1783,11 @@ var r = {
|
|
|
1782
1783
|
resource: "Resource",
|
|
1783
1784
|
lane: "Week",
|
|
1784
1785
|
"lane-all": "All weeks",
|
|
1786
|
+
cancelled: "Cancelled",
|
|
1787
|
+
"week-badge": "Week: {label}",
|
|
1785
1788
|
"time-zone": "Time zone: {zone}"
|
|
1786
1789
|
},
|
|
1790
|
+
"event-chip": { cancelled: "Cancelled" },
|
|
1787
1791
|
dnd: { drag: "Drag" },
|
|
1788
1792
|
"rich-text-editor": {
|
|
1789
1793
|
words: "words",
|
|
@@ -2209,6 +2213,7 @@ var r = {
|
|
|
2209
2213
|
"none-single": "Mark the correct {label}",
|
|
2210
2214
|
"none-multiple": "Mark at least one correct {label}",
|
|
2211
2215
|
blank: "Fill in every {label}",
|
|
2216
|
+
detail: "Explanation",
|
|
2212
2217
|
"text-required": "Enter the {label}"
|
|
2213
2218
|
},
|
|
2214
2219
|
"repeatable-group": {
|
|
@@ -5243,6 +5248,7 @@ var r = {
|
|
|
5243
5248
|
events: "{count, plural, one {# événement} other {# événements}}",
|
|
5244
5249
|
more: "+{count} de plus",
|
|
5245
5250
|
drag: "Déplacer l'événement",
|
|
5251
|
+
label: "Calendrier d'événements",
|
|
5246
5252
|
add: "Ajouter un événement",
|
|
5247
5253
|
resize: "Redimensionner l'événement",
|
|
5248
5254
|
"new-event": "Nouvel événement",
|
|
@@ -5262,8 +5268,11 @@ var r = {
|
|
|
5262
5268
|
resource: "Ressource",
|
|
5263
5269
|
lane: "Semaine",
|
|
5264
5270
|
"lane-all": "Toutes les semaines",
|
|
5271
|
+
cancelled: "Annulé",
|
|
5272
|
+
"week-badge": "Semaine : {label}",
|
|
5265
5273
|
"time-zone": "Fuseau horaire : {zone}"
|
|
5266
5274
|
},
|
|
5275
|
+
"event-chip": { cancelled: "Annulé" },
|
|
5267
5276
|
dnd: { drag: "Déplacer" },
|
|
5268
5277
|
"rich-text-editor": {
|
|
5269
5278
|
words: "mots",
|
|
@@ -5689,6 +5698,7 @@ var r = {
|
|
|
5689
5698
|
"none-single": "Indiquez la {label} juste",
|
|
5690
5699
|
"none-multiple": "Indiquez au moins une {label} juste",
|
|
5691
5700
|
blank: "Remplissez chaque {label}",
|
|
5701
|
+
detail: "Explication",
|
|
5692
5702
|
"text-required": "Saisissez la {label}"
|
|
5693
5703
|
},
|
|
5694
5704
|
"repeatable-group": {
|
|
@@ -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-CQqRWxAW.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-D37eph4I.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-nl0Q3tQ2.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-BA1U82Wk.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 { d as it, n as at, r as ot, t 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 { d as it, n as at, r as ot, t as st } from "./tabs-DQTx3C8e.js";
|
|
18
|
+
import { a as ct, n as lt, o as ut, s as dt, v as ft, y as pt } from "./toolbar-items-BYCdJGUf.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-CG9SBAT-.js";
|
|
24
|
+
import { a as Ct } from "./translator-6XuDmqUJ.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-BUPqNmAg.js";
|
|
28
|
+
import { t as R } from "./icon-button-Ch0PThsa.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,15 +36,15 @@ 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-BbUSBl3i.js";
|
|
40
40
|
import { c as qt, o as Jt, r as Yt, s as Xt, t as Zt } from "./input-CC2joTjB.js";
|
|
41
|
-
import { i as Qt, n as $t, t as en } from "./input-group-
|
|
41
|
+
import { i as Qt, n as $t, t as en } from "./input-group-CPMSQcBx.js";
|
|
42
42
|
import { t as tn } from "./text-field-BAdY-kpO.js";
|
|
43
43
|
import { r as nn } from "./use-csp-nonce-ZKs9k-ov.js";
|
|
44
|
-
import { t as rn } from "./empty-state-
|
|
44
|
+
import { t as rn } from "./empty-state-mrJuqph3.js";
|
|
45
45
|
import { t as an } from "./skeleton-DSdtr2qc.js";
|
|
46
|
-
import { l as on, n as sn, o as cn, r as ln, s as un, t as dn, u as fn } from "./dialog-
|
|
47
|
-
import { t as pn } from "./icon-badge-
|
|
46
|
+
import { l as on, n as sn, o as cn, r as ln, s as un, t as dn, u as fn } from "./dialog-Jhpx6ulb.js";
|
|
47
|
+
import { t as pn } from "./icon-badge-CVMHwdFm.js";
|
|
48
48
|
import { H as mn, V as hn, X as gn, bt as _n, it as vn, lt as yn, n as bn, t as xn, xt as Sn, yt as Cn } from "./dist-moutbfbd.js";
|
|
49
49
|
import { t as wn } from "./markdown-Dw_uH7j7.js";
|
|
50
50
|
import { r as Tn, t as En } from "./create-store-Dqp-PLLn.js";
|
|
@@ -11180,7 +11180,7 @@ var eS = (e = {}) => Tn({
|
|
|
11180
11180
|
let [{ default: t }, { lowlight: n }, { richCodeBlock: r }] = await Promise.all([
|
|
11181
11181
|
import("./dist-CRMFGjng.js"),
|
|
11182
11182
|
import("./lowlight-OtcjU2Sa.js"),
|
|
11183
|
-
import("./rich-code-block-
|
|
11183
|
+
import("./rich-code-block-CGNjHawR.js")
|
|
11184
11184
|
]);
|
|
11185
11185
|
return [r(t, {
|
|
11186
11186
|
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-D37eph4I.js";
|
|
3
|
+
import { a as l } from "./button-CG9SBAT-.js";
|
|
4
|
+
import { i as u } from "./translate-material-jxfcGlD5.js";
|
|
5
|
+
import { t as d } from "./use-material-translation-BUPqNmAg.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-CQqRWxAW.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";
|
package/docs/README.md
CHANGED
|
@@ -13,6 +13,7 @@ detail: every option, the second example, and the traps.
|
|
|
13
13
|
| [Calculator](guides/calculator.md) | You add an exact-decimal calculator with `@nxgt/material/calculator` (and `CalculatorField` with `@nxgt/material/calculator-field`): `Calculator`, the keyboard, the tape and memory, copy and paste, what is stored, feedback, sizing and accessibility |
|
|
14
14
|
| [Charts](guides/charts.md) | You draw charts with `@nxgt/material/charts`: each chart, the shared props, reference bands, thresholds and point tones, zoom and phone scroll, the keyboard, accessibility, theming the `--chart-1..5` tokens, and moving off the Nivo charts, removed in 3.0 |
|
|
15
15
|
| [Cards and tiles](guides/cards-and-tiles.md) | You want a `DataTable` as a list of cards or tiles: `layout`, `renderCard`, `renderTile`, the card's one link, selection, the sort control, columns by the list's width |
|
|
16
|
+
| [EventCalendar](guides/event-calendar.md) | You mark periods with `spans`, label days and weeks with `dayBadges` and `weekBadges`, colour events with `tone`, cancel them with `status`, or make them read-only with `readOnlyEvents` |
|
|
16
17
|
| [DataGrid](guides/data-grid.md) | You are building an editable grid: columns and editors, save modes and conflicts, resizing, hiding and reordering columns, paste, fill and series, undo, totals, long lists, phones, custom editors, CSP |
|
|
17
18
|
| [Code editor](guides/code-editor.md) | You want `CodeEditor` or `CodeDiff` in a theme preset or your own (`defineCodeTheme`), several themes on one page, Monaco bundled instead of the CDN, or the new `@nxgt/material/code-editor` import (the reader look, the view props, the `ref` handle and the file tabs are in the component's own page) |
|
|
18
19
|
| [i18n](guides/i18n.md) | You want the components in French, your own strings typed, or translated Zod messages |
|
|
@@ -1607,9 +1607,14 @@ import { EventChip } from '@nxgt/material/components';
|
|
|
1607
1607
|
| `compact` | `boolean` | `false` | one line, the time before the title, for month cells |
|
|
1608
1608
|
| `continuesBefore`, `continuesAfter` | `boolean` | `false` | square edges for a multi-day event |
|
|
1609
1609
|
| `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` |
|
|
1610
|
+
| `badges` | `{ label: string; tone?: Tone }[]` | — | further badges after `badge`, each with the same pill and tone-dot behaviour and each in the accessible name. `EventCalendar` sets it from `CalendarEvent.badges` |
|
|
1611
|
+
| `tone` | `Tone` | — | draws the chip in a tone of the library (or one your app declared) when it sets no `color`; a `color` wins |
|
|
1612
|
+
| `cancelled` | `boolean` | `false` | a muted chip with a dashed outline, the title struck through (`<del>`) and "Cancelled" in its accessible name (`material.event-chip.cancelled`, English and French) |
|
|
1610
1613
|
| `selected`, `disabled` | `boolean` | `false` | state |
|
|
1611
1614
|
|
|
1612
|
-
|
|
1615
|
+
The colour shows as a thin accent bar inset from the chip's edges (never a border of the chip); a cancelled chip fades it.
|
|
1616
|
+
|
|
1617
|
+
**Storybook:** `Data display/EventChip` · **Vue:** `EventChip` (`variant`, `endTime`: React only for now, #892; `badge`, `badges`, `tone`, `cancelled`: #2526, #2662)
|
|
1613
1618
|
|
|
1614
1619
|
---
|
|
1615
1620
|
|
|
@@ -1727,6 +1727,9 @@ items go last under "No date". Pass `now` and `timeZone` from the server so the
|
|
|
1727
1727
|
headings match on hydration; an unknown `timeZone` falls back to the runtime's
|
|
1728
1728
|
with a warning in development. The split is also plain data:
|
|
1729
1729
|
`groupByDate` (re-exported by `@nxgt/material/components`, beside `groupByDay`).
|
|
1730
|
+
`useDayGroups({ items, getDate, … })` (options type `DayGroupsOptions`) returns the
|
|
1731
|
+
resolved groups (`ResolvedDayGroup[]`, each with its heading) for a custom layout,
|
|
1732
|
+
and `DAY_GROUP_ORDER` is the order of the buckets.
|
|
1730
1733
|
`calendarDateOf`, `formatCalendarDate` and `isValidTimeZone` are in
|
|
1731
1734
|
`@nxgt/material-core/day-math`.
|
|
1732
1735
|
|
|
@@ -333,8 +333,8 @@ masculine one.
|
|
|
333
333
|

|
|
334
334
|
|
|
335
335
|
An editable list of answer choices, for a quiz question: each row has a text
|
|
336
|
-
and a "correct" mark. `ChoiceListFormField` wires it to react-hook-form; the
|
|
337
|
-
value is an array of `{ id, text, correct }
|
|
336
|
+
and a "correct" mark (and, with `rowDetail`, a short explanation). `ChoiceListFormField` wires it to react-hook-form; the
|
|
337
|
+
value is an array of `{ id, text, correct }` (plus `explanation?` with `rowDetail`).
|
|
338
338
|
|
|
339
339
|
```tsx
|
|
340
340
|
import { useForm } from 'react-hook-form';
|
|
@@ -403,6 +403,8 @@ form.setError('choices.1.text', { message }, { shouldFocus: true });
|
|
|
403
403
|
| `label` | `ReactNode` | none | names the group (a `group`, or a `radiogroup` in `single`) |
|
|
404
404
|
| `rowLabel`, `addLabel` | `string` | "answer", "Add answer" | lower-case noun for the buttons (translated by default) |
|
|
405
405
|
| `error`, `rowErrors` | `ReactNode`, `{ [id]: ReactNode }` | none | the list's error and each row's, by id (`ChoiceListField`; the form field fills them from the form) |
|
|
406
|
+
| `rowDetail` | `boolean \| { label?, placeholder?, maxLength? }` | off | adds a textarea under each row, stored as `ChoiceRow.explanation` (why a choice is right or wrong). `true` uses the defaults (`ChoiceRowDetail` types the object): label "Explanation" (translated, numbered "Explanation 2"), no placeholder, no limit. `maxLength` limits the text and shows a counter. Off: rows are `{ id, text, correct }` and nothing changes |
|
|
407
|
+
| `rowDetailErrors` | `{ [id]: ReactNode }` | none | each row's detail error, by id (`ChoiceListField`; the form field fills them from the form) |
|
|
406
408
|
| `onBlur` | `() => void` | none | `ChoiceListField` alone: called when the focus leaves the whole list. In a form the list's root is registered with the form's `FieldBlur`, so touched works without it |
|
|
407
409
|
| `onAssignIds` | `(rows) => void` | `onChange` | `ChoiceListField`: called once on mount with ids given to rows that had none or repeated one; the form field sets them without marking the form dirty |
|
|
408
410
|
| other props | `div` props | | passed to the group's root (`className`, `id`, `data-*`, `ref`) |
|
|
@@ -414,6 +416,28 @@ form.setError('choices.1.text', { message }, { shouldFocus: true });
|
|
|
414
416
|
one on mount (the form field does it with `setValue` when the `FormProvider` above is its own form, and then leaves the form clean; otherwise it calls `onChange`). Give the rows ids in `defaultValues`, the clean path: with assigned ids `defaultValues` still lack them, so `dirtyFields.choices` marks rows after the first real edit.
|
|
415
417
|
In `single`, the new row is marked when no row is. A list that arrives with
|
|
416
418
|
several rows marked is not changed: it fails the `too-many` rule.
|
|
419
|
+
- **Row detail:** with `rowDetail`, each row gets a textarea named "Explanation 2"
|
|
420
|
+
(or your `label`) that edits `ChoiceRow.explanation`. It follows its row through
|
|
421
|
+
reorder, add and remove, like `text`. A resolver's issue on
|
|
422
|
+
`choices.2.explanation` shows under that textarea, and `setFocus('choices.2.explanation')`
|
|
423
|
+
focuses it. The built-in rules never refuse a blank explanation; require one in
|
|
424
|
+
your schema. `explanation` stays absent on a row until its textarea is edited.
|
|
425
|
+
|
|
426
|
+
```tsx
|
|
427
|
+
import type { ChoiceRowDetail } from '@nxgt/material/components';
|
|
428
|
+
|
|
429
|
+
const detail: ChoiceRowDetail = { label: 'Why', maxLength: 200 };
|
|
430
|
+
// <ChoiceListFormField … rowDetail={detail} />
|
|
431
|
+
```
|
|
432
|
+
|
|
433
|
+
```tsx
|
|
434
|
+
<ChoiceListFormField
|
|
435
|
+
control={control}
|
|
436
|
+
name="choices"
|
|
437
|
+
label="Answers"
|
|
438
|
+
rowDetail={{ label: 'Why', placeholder: 'Why is it right or wrong?', maxLength: 200 }}
|
|
439
|
+
/>
|
|
440
|
+
```
|
|
417
441
|
- **Semantics:** each row's text is a labelled input ("Answer 2"); its mark
|
|
418
442
|
is a radio or a checkbox named "Correct: answer 2" (the visible word
|
|
419
443
|
"Correct" starts the name), so `getByRole('checkbox', { name: 'Correct: answer 2' })`
|
|
@@ -433,7 +457,7 @@ form.setError('choices.1.text', { message }, { shouldFocus: true });
|
|
|
433
457
|
list, and blank rows are marked invalid (only for that rule, never for a resolver's or another rule's message). With a resolver (zod), an issue on
|
|
434
458
|
`choices.2.text` shows under row 3 and an issue on `choices` under the list.
|
|
435
459
|
When both fail in one pass, react-hook-form keeps only the list's.
|
|
436
|
-
- **Translations:** `material.choice-list.*` (English and French). The
|
|
460
|
+
- **Translations:** `material.choice-list.*` (English and French; `detail` is the default label of `rowDetail`). The
|
|
437
461
|
messages name the row with `rowLabel` ("Fill in every answer"); `too-few`
|
|
438
462
|
is a plural that adds `s` to it, and the French templates carry the
|
|
439
463
|
feminine article, so a French app overrides the keys for a masculine noun.
|
|
@@ -1753,7 +1777,14 @@ import { AttributesFormField } from '@nxgt/material/components';
|
|
|
1753
1777
|
```tsx
|
|
1754
1778
|
import { AttributeValuesFormFieldSet, FormSection } from '@nxgt/material/components';
|
|
1755
1779
|
|
|
1756
|
-
|
|
1780
|
+
interface ItemValues {
|
|
1781
|
+
label: string;
|
|
1782
|
+
attributes: Record<string, string>;
|
|
1783
|
+
}
|
|
1784
|
+
|
|
1785
|
+
const form = useForm<ItemValues>({
|
|
1786
|
+
defaultValues: { label: 'Shirt', attributes: { color: '#2563eb', size: 'M' } },
|
|
1787
|
+
});
|
|
1757
1788
|
|
|
1758
1789
|
<FormSection title="Attributes">
|
|
1759
1790
|
<AttributeValuesFormFieldSet
|
|
@@ -1769,10 +1800,12 @@ const form = useForm({ defaultValues: { attributes: { color: '#2563eb', size: 'M
|
|
|
1769
1800
|
</FormSection>
|
|
1770
1801
|
```
|
|
1771
1802
|
|
|
1803
|
+
`T` is inferred from `control`, so `name` is checked against the form's paths and no `as never` cast is needed.
|
|
1804
|
+
|
|
1772
1805
|
| Prop | |
|
|
1773
1806
|
| --- | --- |
|
|
1774
1807
|
| `attributes` | the attributes to fill, one input each |
|
|
1775
|
-
| `control`, `name` | the form and the path of the object it writes |
|
|
1808
|
+
| `control`, `name` | the form and the path of the object it writes; generic over the form values (`Control<T>`, `Path<T>`), so a typed form needs no cast |
|
|
1776
1809
|
| `label` | the fieldset's accessible name (required) |
|
|
1777
1810
|
| `hideLabel` | default `false`. `true` keeps `label` as the name but draws nothing, for a `FormSection` that already has the title |
|
|
1778
1811
|
| `defaultValues` | optional fallback, used only while the form value at `name` is empty: `undefined`, `null` or an object with no keys (`{}`). Any other value in the form wins |
|
|
@@ -1249,6 +1249,7 @@ import { Badge, Button, Card, CardContent, Description, RecordDetails, RecordPag
|
|
|
1249
1249
|
| `created`, `updated` | `{ label: string; at: Date \| string \| number }` | — | The two segments of the muted meta line; each « label date » stays on one line |
|
|
1250
1250
|
| `timeZone` | IANA zone | `'UTC'` | The zone the dates are written in, the same on a server and in a browser. Dates have no seconds and no zone suffix |
|
|
1251
1251
|
| `maxColumns` | `1`-`6` | `4` | The most columns of the facts: the panel's own width gives one, a stacked and wide panel up to this |
|
|
1252
|
+
| other `div` props | `ComponentProps<'div'>` minus `title` | — | `data-*`, `id`, `aria-*` and `className` go to the root card; `className` is merged with its own classes |
|
|
1252
1253
|
|
|
1253
1254
|
The facts are a [`DescriptionList`](data-display.md#descriptionlist), so the columns follow the card's width, not the window's.
|
|
1254
1255
|
|