@nxgt/material 2.19.0 → 2.20.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 +21 -0
- package/dist/{_Uint8Array-B6RHzY7k.js → _Uint8Array-DGVY6NfN.js} +1 -1
- package/dist/{_overRest-Cs3RIAVd.js → _overRest-DCKNcrF0.js} +1 -1
- package/dist/{async-slice-CgbRYTRY.js → async-slice-DAVXvBm1.js} +3 -3
- package/dist/{blockDiagram-BEXU5L5S-D5ptXmBP.js → blockDiagram-BEXU5L5S-BrCVxVRd.js} +2 -2
- package/dist/{chunk-3FUC2YCW-al8CepY8.js → chunk-3FUC2YCW-DWaNSANO.js} +2 -2
- package/dist/{chunk-7M6MHVWA-BERAnmfo.js → chunk-7M6MHVWA-x-N4hnls.js} +1 -1
- package/dist/{chunk-GNY47TPC-DMMDhC9T.js → chunk-GNY47TPC-Dzk3o85s.js} +4 -4
- package/dist/{chunk-NETBCI7D-CsMBdu5o.js → chunk-NETBCI7D-WvAAUJne.js} +1 -1
- package/dist/{chunk-Z7XXMR3K-CLYmaWUD.js → chunk-Z7XXMR3K-DY6U0Uq4.js} +1 -1
- package/dist/{classDiagram-v2-NBCMYWYE-C-6ddqhF.js → classDiagram-v2-NBCMYWYE-QeFmLU9L.js} +2 -2
- package/dist/components/base-content.css +64 -4
- package/dist/{components-C5y9FL-6.js → components-DH5dpaU8.js} +20768 -20704
- package/dist/components.js +5 -5
- package/dist/{dagre-6A5THRUB-Ck8np52h.js → dagre-6A5THRUB-D-NdHe_L.js} +11 -11
- package/dist/{diagram-22UHCM2B-oIfSvE0L.js → diagram-22UHCM2B-DZ4jejn3.js} +2 -2
- package/dist/{diagram-3UASUU5V-CAG93Qkg.js → diagram-3UASUU5V-DRoFk6qc.js} +1 -1
- package/dist/dnd.js +1 -1
- package/dist/{elk-276RUBZZ-BfEvNh_f.js → elk-276RUBZZ-BG0kHR2f.js} +3 -3
- package/dist/{erDiagram-OPXOYQCR-B966QSkJ.js → erDiagram-OPXOYQCR-B6XRmJuU.js} +2 -2
- package/dist/{field-blur-B6VqkpE6.js → field-blur-B1VUvTws.js} +941 -927
- package/dist/{flowDiagram-KWPJA3E3-CzUHW7vw.js → flowDiagram-KWPJA3E3-BghxpN0G.js} +3 -3
- package/dist/{ganttDiagram-FUAMR5RP-B4JstFXN.js → ganttDiagram-FUAMR5RP-C3aoaoXQ.js} +1 -1
- package/dist/{graphlib-CORKO6lR.js → graphlib-Dc5Siwxn.js} +6 -6
- package/dist/hooks.js +2 -2
- package/dist/{i18n-provider-BC7MMAID.js → i18n-provider-Cq_VScPv.js} +1 -1
- package/dist/i18n.js +6 -6
- package/dist/{isArrayLikeObject-gzSxxbGJ.js → isArrayLikeObject-DeHDPOEB.js} +3 -3
- package/dist/{isEmpty-SD8ldTK-.js → isEmpty-Sic-RRp7.js} +3 -3
- package/dist/{journeyDiagram-ZHPQQLJL-DcgTl4Bw.js → journeyDiagram-ZHPQQLJL-DcUX0asi.js} +1 -1
- package/dist/lib/components/ui/collections/data-table/data-table-density.d.ts +15 -0
- package/dist/lib/components/ui/collections/data-table/data-table.d.ts +1 -1
- package/dist/lib/components/ui/collections/data-table/types.d.ts +7 -0
- package/dist/lib/components/ui/overlays/dialog/dialog-outside.d.ts +4 -2
- package/dist/lib/components/ui/overlays/dialog/dialog-parts.d.ts +7 -0
- package/dist/lib/components/ui/overlays/dialog/dialog.d.ts +2 -5
- package/dist/lib/components/ui/overlays/dialog/in-dialog.d.ts +13 -0
- package/dist/lib/components/ui/overlays/menubar/menubar-items.d.ts +18 -0
- package/dist/lib/components/ui/overlays/menubar/menubar-sub.d.ts +8 -0
- package/dist/lib/components/ui/overlays/menubar/menubar.d.ts +3 -21
- package/dist/lib/components/ui/overlays/sheet/sheet-parts.d.ts +7 -0
- package/dist/lib/components/ui/overlays/sheet/sheet.d.ts +2 -5
- package/dist/lib/components/ui/selection/autocomplete/partials/autocomplete-chips.d.ts +2 -0
- package/dist/lib/components/ui/selection/autocomplete/partials/autocomplete-popup.d.ts +2 -1
- package/dist/lib/components/ui/selection/combobox/combobox-content.d.ts +14 -0
- package/dist/lib/components/ui/selection/combobox/combobox.d.ts +1 -4
- package/dist/lib/i18n/resources/en/en.d.ts +1 -0
- package/dist/lib/i18n/resources/en/material.json.d.ts +1 -0
- package/dist/lib/i18n/resources/fr/fr.d.ts +1 -0
- package/dist/lib/i18n/resources/fr/material.json.d.ts +1 -0
- package/dist/lib/i18n/resources/resources.d.ts +2 -0
- package/dist/lib/i18n/translator.d.ts +1 -1
- package/dist/lib.js +2 -2
- package/dist/main.js +11 -11
- package/dist/map.js +8 -8
- package/dist/material.css +1 -1
- package/dist/{merge-Cek5eQP5.js → merge-VyOzRzYB.js} +4 -4
- package/dist/{mermaid.core-DZMjEtsT.js → mermaid.core-DLu6PrQ9.js} +21 -21
- package/dist/{mindmap-definition-NLK3R4M7-BWaJFjFb.js → mindmap-definition-NLK3R4M7-B7Y8Yx12.js} +2 -2
- package/dist/{pieDiagram-5QR66LMP-C8iomTeg.js → pieDiagram-5QR66LMP-Bv9VMy5P.js} +1 -1
- package/dist/print.js +2 -2
- package/dist/{quadrantDiagram-O4NWA36T-D529X2yn.js → quadrantDiagram-O4NWA36T-Dr2CLVD8.js} +1 -1
- package/dist/{requirementDiagram-PLB6GJNP-Cs5ieS_S.js → requirementDiagram-PLB6GJNP-XuNWo4K8.js} +2 -2
- package/dist/{sankeyDiagram-IPEJSGJF-BOIAba-k.js → sankeyDiagram-IPEJSGJF-DzXzUNs5.js} +1 -1
- package/dist/{sortable-provider-DNmv3XmW.js → sortable-provider-XneXCqY1.js} +1 -1
- package/dist/{stateDiagram-v2-GCMORJYK-CT46B5KK.js → stateDiagram-v2-GCMORJYK-BN2OBfZa.js} +2 -2
- package/dist/{stored-language-FHwsTPoM.js → stored-language-DqlfjXt8.js} +2 -0
- package/dist/{swimlanes-2SLR337P-C8TrgNLm.js → swimlanes-2SLR337P-Ma7iLhhV.js} +3 -3
- package/dist/{swimlanesDiagram-TC7HE7FX-Dii9S4bC.js → swimlanesDiagram-TC7HE7FX-DWBnIppx.js} +3 -3
- package/dist/{timeline-definition-EJHVYXUP-K00somtn.js → timeline-definition-EJHVYXUP-BBwvY1Xf.js} +1 -1
- package/dist/{translate-material-cZ6VSQ98.js → translate-material-B6HO6ykL.js} +2 -2
- package/dist/{translator-DX_ArUA5.js → translator-B_lmafJN.js} +1 -1
- package/dist/{use-heading-spy-DR1jat6E.js → use-heading-spy-D1Ifooi5.js} +2 -2
- package/dist/{use-material-translation-W6jOKCbO.js → use-material-translation-Bp4ECeT4.js} +2 -2
- package/dist/{usecaseDiagram-POWQR4AR-liF9q6mE.js → usecaseDiagram-POWQR4AR-B1HduAbh.js} +2 -2
- package/dist/{xychartDiagram-PMCCYNJV-B9Qx3wAO.js → xychartDiagram-PMCCYNJV-ByjPOY-5.js} +1 -1
- package/docs/components/data-table-filter-and-lists.md +3 -1
- package/docs/guides/forms.md +49 -0
- package/docs/guides/i18n.md +2 -1
- package/docs/troubleshooting.md +27 -0
- package/lib/components/base-content.css +64 -4
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { S as e, _ as t, g as n, p as r, v as i, w as a, x as o } from "./translator-
|
|
2
|
-
import { n as s, r as c } from "./_overRest-
|
|
3
|
-
import { a as l, c as u, d, i as f, l as p, n as m, p as h, r as g, t as _, u as v } from "./_Uint8Array-
|
|
4
|
-
import { n as y, r as b, t as x } from "./isArrayLikeObject-
|
|
1
|
+
import { S as e, _ as t, g as n, p as r, v as i, w as a, x as o } from "./translator-B_lmafJN.js";
|
|
2
|
+
import { n as s, r as c } from "./_overRest-DCKNcrF0.js";
|
|
3
|
+
import { a as l, c as u, d, i as f, l as p, n as m, p as h, r as g, t as _, u as v } from "./_Uint8Array-DGVY6NfN.js";
|
|
4
|
+
import { n as y, r as b, t as x } from "./isArrayLikeObject-DeHDPOEB.js";
|
|
5
5
|
//#region ../../node_modules/lodash-es/_baseCreate.js
|
|
6
6
|
var S = Object.create, C = function() {
|
|
7
7
|
function e() {}
|
|
@@ -8,9 +8,9 @@ import { a as he } from "./chunk-MBY4JIJT-BFIqOe-8.js";
|
|
|
8
8
|
import "./chunk-7PRAP22T-0C6_H8Li.js";
|
|
9
9
|
import "./chunk-7INBJB4K-k-I67NSP.js";
|
|
10
10
|
import "./chunk-5DYCD2WN-Cd1zazNp.js";
|
|
11
|
-
import "./chunk-Z7XXMR3K-
|
|
11
|
+
import "./chunk-Z7XXMR3K-DY6U0Uq4.js";
|
|
12
12
|
import "./chunk-UA2S7LBM-ChuksCDg.js";
|
|
13
|
-
import { n as ge } from "./chunk-GNY47TPC-
|
|
13
|
+
import { n as ge } from "./chunk-GNY47TPC-Dzk3o85s.js";
|
|
14
14
|
import { n as _e, t as ve } from "./chunk-LNGE3PJU-DJjGTS7O.js";
|
|
15
15
|
//#region ../../node_modules/es-toolkit/dist/compat/_internal/isPrototype.mjs
|
|
16
16
|
function ye(e) {
|
|
@@ -302,7 +302,7 @@ var qe = "c4", Je = {
|
|
|
302
302
|
id: Ye,
|
|
303
303
|
detector: /* @__PURE__ */ p((e) => /^\s*(graph|flowchart)/.test(e), "detector"),
|
|
304
304
|
loader: /* @__PURE__ */ p(async () => {
|
|
305
|
-
let { diagram: e } = await import("./flowDiagram-KWPJA3E3-
|
|
305
|
+
let { diagram: e } = await import("./flowDiagram-KWPJA3E3-BghxpN0G.js");
|
|
306
306
|
return {
|
|
307
307
|
id: Ye,
|
|
308
308
|
diagram: e
|
|
@@ -312,7 +312,7 @@ var qe = "c4", Je = {
|
|
|
312
312
|
id: Ze,
|
|
313
313
|
detector: /* @__PURE__ */ p((e) => /^\s*agentflow-beta\b/.test(e), "detector"),
|
|
314
314
|
loader: /* @__PURE__ */ p(async () => {
|
|
315
|
-
let { diagram: e } = await import("./diagram-22UHCM2B-
|
|
315
|
+
let { diagram: e } = await import("./diagram-22UHCM2B-DZ4jejn3.js");
|
|
316
316
|
return {
|
|
317
317
|
id: Ze,
|
|
318
318
|
diagram: e
|
|
@@ -322,7 +322,7 @@ var qe = "c4", Je = {
|
|
|
322
322
|
id: $e,
|
|
323
323
|
detector: /* @__PURE__ */ p((e) => /^\s*swimlane-beta\b/.test(e), "detector"),
|
|
324
324
|
loader: /* @__PURE__ */ p(async () => {
|
|
325
|
-
let { diagram: e } = await import("./swimlanesDiagram-TC7HE7FX-
|
|
325
|
+
let { diagram: e } = await import("./swimlanesDiagram-TC7HE7FX-DWBnIppx.js");
|
|
326
326
|
return {
|
|
327
327
|
id: $e,
|
|
328
328
|
diagram: e
|
|
@@ -332,7 +332,7 @@ var qe = "c4", Je = {
|
|
|
332
332
|
id: tt,
|
|
333
333
|
detector: /* @__PURE__ */ p((e) => /^\s*erDiagram/.test(e), "detector"),
|
|
334
334
|
loader: /* @__PURE__ */ p(async () => {
|
|
335
|
-
let { diagram: e } = await import("./erDiagram-OPXOYQCR-
|
|
335
|
+
let { diagram: e } = await import("./erDiagram-OPXOYQCR-B6XRmJuU.js");
|
|
336
336
|
return {
|
|
337
337
|
id: tt,
|
|
338
338
|
diagram: e
|
|
@@ -352,7 +352,7 @@ var qe = "c4", Je = {
|
|
|
352
352
|
id: at,
|
|
353
353
|
detector: /* @__PURE__ */ p((e) => /^\s*gantt/.test(e), "detector"),
|
|
354
354
|
loader: /* @__PURE__ */ p(async () => {
|
|
355
|
-
let { diagram: e } = await import("./ganttDiagram-FUAMR5RP-
|
|
355
|
+
let { diagram: e } = await import("./ganttDiagram-FUAMR5RP-C3aoaoXQ.js");
|
|
356
356
|
return {
|
|
357
357
|
id: at,
|
|
358
358
|
diagram: e
|
|
@@ -372,7 +372,7 @@ var qe = "c4", Je = {
|
|
|
372
372
|
id: lt,
|
|
373
373
|
detector: /* @__PURE__ */ p((e) => /^\s*pie/.test(e), "detector"),
|
|
374
374
|
loader: /* @__PURE__ */ p(async () => {
|
|
375
|
-
let { diagram: e } = await import("./pieDiagram-5QR66LMP-
|
|
375
|
+
let { diagram: e } = await import("./pieDiagram-5QR66LMP-Bv9VMy5P.js");
|
|
376
376
|
return {
|
|
377
377
|
id: lt,
|
|
378
378
|
diagram: e
|
|
@@ -382,7 +382,7 @@ var qe = "c4", Je = {
|
|
|
382
382
|
id: dt,
|
|
383
383
|
detector: /* @__PURE__ */ p((e) => /^\s*quadrantChart/.test(e), "detector"),
|
|
384
384
|
loader: /* @__PURE__ */ p(async () => {
|
|
385
|
-
let { diagram: e } = await import("./quadrantDiagram-O4NWA36T-
|
|
385
|
+
let { diagram: e } = await import("./quadrantDiagram-O4NWA36T-Dr2CLVD8.js");
|
|
386
386
|
return {
|
|
387
387
|
id: dt,
|
|
388
388
|
diagram: e
|
|
@@ -392,7 +392,7 @@ var qe = "c4", Je = {
|
|
|
392
392
|
id: pt,
|
|
393
393
|
detector: /* @__PURE__ */ p((e) => /^\s*xychart(-beta)?/.test(e), "detector"),
|
|
394
394
|
loader: /* @__PURE__ */ p(async () => {
|
|
395
|
-
let { diagram: e } = await import("./xychartDiagram-PMCCYNJV-
|
|
395
|
+
let { diagram: e } = await import("./xychartDiagram-PMCCYNJV-ByjPOY-5.js");
|
|
396
396
|
return {
|
|
397
397
|
id: pt,
|
|
398
398
|
diagram: e
|
|
@@ -402,7 +402,7 @@ var qe = "c4", Je = {
|
|
|
402
402
|
id: ht,
|
|
403
403
|
detector: /* @__PURE__ */ p((e) => /^\s*requirement(Diagram)?/.test(e), "detector"),
|
|
404
404
|
loader: /* @__PURE__ */ p(async () => {
|
|
405
|
-
let { diagram: e } = await import("./requirementDiagram-PLB6GJNP-
|
|
405
|
+
let { diagram: e } = await import("./requirementDiagram-PLB6GJNP-XuNWo4K8.js");
|
|
406
406
|
return {
|
|
407
407
|
id: ht,
|
|
408
408
|
diagram: e
|
|
@@ -422,7 +422,7 @@ var qe = "c4", Je = {
|
|
|
422
422
|
id: yt,
|
|
423
423
|
detector: /* @__PURE__ */ p((e) => /^\s*classDiagram/.test(e), "detector"),
|
|
424
424
|
loader: /* @__PURE__ */ p(async () => {
|
|
425
|
-
let { diagram: e } = await import("./classDiagram-v2-NBCMYWYE-
|
|
425
|
+
let { diagram: e } = await import("./classDiagram-v2-NBCMYWYE-QeFmLU9L.js");
|
|
426
426
|
return {
|
|
427
427
|
id: yt,
|
|
428
428
|
diagram: e
|
|
@@ -432,7 +432,7 @@ var qe = "c4", Je = {
|
|
|
432
432
|
id: xt,
|
|
433
433
|
detector: /* @__PURE__ */ p((e) => /^\s*stateDiagram/.test(e), "detector"),
|
|
434
434
|
loader: /* @__PURE__ */ p(async () => {
|
|
435
|
-
let { diagram: e } = await import("./stateDiagram-v2-GCMORJYK-
|
|
435
|
+
let { diagram: e } = await import("./stateDiagram-v2-GCMORJYK-BN2OBfZa.js");
|
|
436
436
|
return {
|
|
437
437
|
id: xt,
|
|
438
438
|
diagram: e
|
|
@@ -442,7 +442,7 @@ var qe = "c4", Je = {
|
|
|
442
442
|
id: Ct,
|
|
443
443
|
detector: /* @__PURE__ */ p((e) => /^\s*journey/.test(e), "detector"),
|
|
444
444
|
loader: /* @__PURE__ */ p(async () => {
|
|
445
|
-
let { diagram: e } = await import("./journeyDiagram-ZHPQQLJL-
|
|
445
|
+
let { diagram: e } = await import("./journeyDiagram-ZHPQQLJL-DcUX0asi.js");
|
|
446
446
|
return {
|
|
447
447
|
id: Ct,
|
|
448
448
|
diagram: e
|
|
@@ -460,7 +460,7 @@ var qe = "c4", Je = {
|
|
|
460
460
|
id: Ot,
|
|
461
461
|
detector: /* @__PURE__ */ p((e, t = {}) => /^\s*flowchart-elk/.test(e) ? (t.layout = "elk", !0) : !1, "detector"),
|
|
462
462
|
loader: /* @__PURE__ */ p(async () => {
|
|
463
|
-
let { diagram: e } = await import("./flowDiagram-KWPJA3E3-
|
|
463
|
+
let { diagram: e } = await import("./flowDiagram-KWPJA3E3-BghxpN0G.js");
|
|
464
464
|
return {
|
|
465
465
|
id: Ot,
|
|
466
466
|
diagram: e
|
|
@@ -470,7 +470,7 @@ var qe = "c4", Je = {
|
|
|
470
470
|
id: At,
|
|
471
471
|
detector: /* @__PURE__ */ p((e) => /^\s*timeline/.test(e), "detector"),
|
|
472
472
|
loader: /* @__PURE__ */ p(async () => {
|
|
473
|
-
let { diagram: e } = await import("./timeline-definition-EJHVYXUP-
|
|
473
|
+
let { diagram: e } = await import("./timeline-definition-EJHVYXUP-BBwvY1Xf.js");
|
|
474
474
|
return {
|
|
475
475
|
id: At,
|
|
476
476
|
diagram: e
|
|
@@ -480,7 +480,7 @@ var qe = "c4", Je = {
|
|
|
480
480
|
id: Mt,
|
|
481
481
|
detector: /* @__PURE__ */ p((e) => /^\s*mindmap/.test(e), "detector"),
|
|
482
482
|
loader: /* @__PURE__ */ p(async () => {
|
|
483
|
-
let { diagram: e } = await import("./mindmap-definition-NLK3R4M7-
|
|
483
|
+
let { diagram: e } = await import("./mindmap-definition-NLK3R4M7-B7Y8Yx12.js");
|
|
484
484
|
return {
|
|
485
485
|
id: Mt,
|
|
486
486
|
diagram: e
|
|
@@ -500,7 +500,7 @@ var qe = "c4", Je = {
|
|
|
500
500
|
id: It,
|
|
501
501
|
detector: /* @__PURE__ */ p((e) => /^\s*sankey(-beta)?/.test(e), "detector"),
|
|
502
502
|
loader: /* @__PURE__ */ p(async () => {
|
|
503
|
-
let { diagram: e } = await import("./sankeyDiagram-IPEJSGJF-
|
|
503
|
+
let { diagram: e } = await import("./sankeyDiagram-IPEJSGJF-DzXzUNs5.js");
|
|
504
504
|
return {
|
|
505
505
|
id: It,
|
|
506
506
|
diagram: e
|
|
@@ -530,7 +530,7 @@ var qe = "c4", Je = {
|
|
|
530
530
|
id: Ht,
|
|
531
531
|
detector: /* @__PURE__ */ p((e) => /^\s*block(-beta)?/.test(e), "detector"),
|
|
532
532
|
loader: /* @__PURE__ */ p(async () => {
|
|
533
|
-
let { diagram: e } = await import("./blockDiagram-BEXU5L5S-
|
|
533
|
+
let { diagram: e } = await import("./blockDiagram-BEXU5L5S-BrCVxVRd.js");
|
|
534
534
|
return {
|
|
535
535
|
id: Ht,
|
|
536
536
|
diagram: e
|
|
@@ -590,7 +590,7 @@ var qe = "c4", Je = {
|
|
|
590
590
|
id: en,
|
|
591
591
|
detector: /* @__PURE__ */ p((e) => /^\s*treemap/.test(e), "detector"),
|
|
592
592
|
loader: /* @__PURE__ */ p(async () => {
|
|
593
|
-
let { diagram: e } = await import("./diagram-3UASUU5V-
|
|
593
|
+
let { diagram: e } = await import("./diagram-3UASUU5V-DRoFk6qc.js");
|
|
594
594
|
return {
|
|
595
595
|
id: en,
|
|
596
596
|
diagram: e
|
|
@@ -600,7 +600,7 @@ var qe = "c4", Je = {
|
|
|
600
600
|
id: nn,
|
|
601
601
|
detector: /* @__PURE__ */ p((e) => /^\s*usecase-beta(?:\s|$)/.test(e), "detector"),
|
|
602
602
|
loader: /* @__PURE__ */ p(async () => {
|
|
603
|
-
let { diagram: e } = await import("./usecaseDiagram-POWQR4AR-
|
|
603
|
+
let { diagram: e } = await import("./usecaseDiagram-POWQR4AR-B1HduAbh.js");
|
|
604
604
|
return {
|
|
605
605
|
id: nn,
|
|
606
606
|
diagram: e
|
package/dist/{mindmap-definition-NLK3R4M7-BWaJFjFb.js → mindmap-definition-NLK3R4M7-B7Y8Yx12.js}
RENAMED
|
@@ -7,11 +7,11 @@ import "./chunk-MBY4JIJT-BFIqOe-8.js";
|
|
|
7
7
|
import "./chunk-7PRAP22T-0C6_H8Li.js";
|
|
8
8
|
import "./chunk-7INBJB4K-k-I67NSP.js";
|
|
9
9
|
import "./chunk-5DYCD2WN-Cd1zazNp.js";
|
|
10
|
-
import "./chunk-Z7XXMR3K-
|
|
10
|
+
import "./chunk-Z7XXMR3K-DY6U0Uq4.js";
|
|
11
11
|
import { t as u } from "./chunk-XXDRQBXY-dKXxu_aj.js";
|
|
12
12
|
import { t as d } from "./chunk-WEXAMYUT-CbFOhEve.js";
|
|
13
13
|
import "./chunk-UA2S7LBM-ChuksCDg.js";
|
|
14
|
-
import { r as f, t as p } from "./chunk-GNY47TPC-
|
|
14
|
+
import { r as f, t as p } from "./chunk-GNY47TPC-Dzk3o85s.js";
|
|
15
15
|
//#region ../../node_modules/uuid/dist/stringify.js
|
|
16
16
|
var m = [];
|
|
17
17
|
for (let e = 0; e < 256; ++e) m.push((e + 256).toString(16).slice(1));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ct as e, ot as t } from "./components-
|
|
1
|
+
import { ct as e, ot as t } from "./components-DH5dpaU8.js";
|
|
2
2
|
import { n } from "./src-CsLQInsN.js";
|
|
3
3
|
import { i as r, p as i } from "./chunk-ZIGJFQKS-9VXArDKF.js";
|
|
4
4
|
import { t as a } from "./ordinal-DwxdXP1t.js";
|
package/dist/print.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { r as e } from "./i18n-provider-
|
|
2
|
-
import { t } from "./translate-material-
|
|
1
|
+
import { r as e } from "./i18n-provider-Cq_VScPv.js";
|
|
2
|
+
import { t } from "./translate-material-B6HO6ykL.js";
|
|
3
3
|
import { jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
4
4
|
import { Children as i, createContext as a, isValidElement as o, useCallback as s, useContext as c, useEffect as l, useMemo as u, useState as d } from "react";
|
|
5
5
|
import { OBJECT_URL_TTL_MS as f, downloadPdfFile as p } from "@nxgt/material-core/pdf-download";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { rt as e } from "./components-
|
|
1
|
+
import { rt as e } from "./components-DH5dpaU8.js";
|
|
2
2
|
import { n as t, t as n } from "./src-CsLQInsN.js";
|
|
3
3
|
import { n as r } from "./chunk-Y2CYZVJY-BAad7w_K.js";
|
|
4
4
|
import { D as i, H as a, U as o, a as s, c, f as l, q as u, v as d, w as f, x as p, y as m, z as h } from "./chunk-O7XYJQB3-BChweQ_V.js";
|
package/dist/{requirementDiagram-PLB6GJNP-Cs5ieS_S.js → requirementDiagram-PLB6GJNP-XuNWo4K8.js}
RENAMED
|
@@ -8,11 +8,11 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
|
|
|
8
8
|
import { a as p, i as m, o as h, r as g } from "./chunk-J5ZVWO5B-DmRRmhon.js";
|
|
9
9
|
import "./chunk-7INBJB4K-k-I67NSP.js";
|
|
10
10
|
import "./chunk-5DYCD2WN-Cd1zazNp.js";
|
|
11
|
-
import "./chunk-Z7XXMR3K-
|
|
11
|
+
import "./chunk-Z7XXMR3K-DY6U0Uq4.js";
|
|
12
12
|
import { t as _ } from "./chunk-XXDRQBXY-dKXxu_aj.js";
|
|
13
13
|
import { t as v } from "./chunk-WEXAMYUT-CbFOhEve.js";
|
|
14
14
|
import "./chunk-UA2S7LBM-ChuksCDg.js";
|
|
15
|
-
import { r as y, t as b } from "./chunk-GNY47TPC-
|
|
15
|
+
import { r as y, t as b } from "./chunk-GNY47TPC-Dzk3o85s.js";
|
|
16
16
|
//#region ../../node_modules/mermaid/dist/chunks/mermaid.core/requirementDiagram-PLB6GJNP.mjs
|
|
17
17
|
var x = (function() {
|
|
18
18
|
var e = /* @__PURE__ */ n(function(e, t, n, r) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { t as e } from "./utils-DC8bw9A_.js";
|
|
2
2
|
import { pt as t, t as n } from "./icon-button-B1nN3J6B.js";
|
|
3
|
-
import { t as r } from "./use-material-translation-
|
|
3
|
+
import { t as r } from "./use-material-translation-Bp4ECeT4.js";
|
|
4
4
|
import { GripVertical as i } from "lucide-react";
|
|
5
5
|
import { jsx as a } from "react/jsx-runtime";
|
|
6
6
|
import o, { cloneElement as s, createContext as c, forwardRef as l, memo as u, useCallback as d, useContext as f, useEffect as p, useLayoutEffect as m, useMemo as h, useReducer as g, useRef as _, useState as v } from "react";
|
|
@@ -8,12 +8,12 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
|
|
|
8
8
|
import { a as h, i as g, o as _, r as v } from "./chunk-J5ZVWO5B-DmRRmhon.js";
|
|
9
9
|
import "./chunk-7INBJB4K-k-I67NSP.js";
|
|
10
10
|
import "./chunk-5DYCD2WN-Cd1zazNp.js";
|
|
11
|
-
import "./chunk-Z7XXMR3K-
|
|
11
|
+
import "./chunk-Z7XXMR3K-DY6U0Uq4.js";
|
|
12
12
|
import { t as y } from "./chunk-GWA4HPMP-B8jXI0Tl.js";
|
|
13
13
|
import { t as b } from "./chunk-XXDRQBXY-dKXxu_aj.js";
|
|
14
14
|
import { t as x } from "./chunk-WEXAMYUT-CbFOhEve.js";
|
|
15
15
|
import "./chunk-UA2S7LBM-ChuksCDg.js";
|
|
16
|
-
import { r as S, t as C } from "./chunk-GNY47TPC-
|
|
16
|
+
import { r as S, t as C } from "./chunk-GNY47TPC-Dzk3o85s.js";
|
|
17
17
|
//#region ../../node_modules/mermaid/dist/chunks/mermaid.core/stateDiagram-v2-GCMORJYK.mjs
|
|
18
18
|
var w = (function() {
|
|
19
19
|
var e = /* @__PURE__ */ i(function(e, t, n, r) {
|
|
@@ -340,6 +340,7 @@ var e = {
|
|
|
340
340
|
"select-all": "Select all",
|
|
341
341
|
"select-row": "Select row",
|
|
342
342
|
"toggle-row": "Toggle row details",
|
|
343
|
+
expand: "Expand",
|
|
343
344
|
"scroll-region": "Scrollable table"
|
|
344
345
|
},
|
|
345
346
|
pagination: {
|
|
@@ -1584,6 +1585,7 @@ var e = {
|
|
|
1584
1585
|
"select-all": "Tout sélectionner",
|
|
1585
1586
|
"select-row": "Sélectionner la ligne",
|
|
1586
1587
|
"toggle-row": "Afficher ou masquer les détails de la ligne",
|
|
1588
|
+
expand: "Déplier",
|
|
1587
1589
|
"scroll-region": "Tableau défilant"
|
|
1588
1590
|
},
|
|
1589
1591
|
pagination: {
|
|
@@ -7,10 +7,10 @@ import "./chunk-MBY4JIJT-BFIqOe-8.js";
|
|
|
7
7
|
import "./chunk-7PRAP22T-0C6_H8Li.js";
|
|
8
8
|
import "./chunk-7INBJB4K-k-I67NSP.js";
|
|
9
9
|
import "./chunk-5DYCD2WN-Cd1zazNp.js";
|
|
10
|
-
import "./chunk-Z7XXMR3K-
|
|
10
|
+
import "./chunk-Z7XXMR3K-DY6U0Uq4.js";
|
|
11
11
|
import "./chunk-UA2S7LBM-ChuksCDg.js";
|
|
12
|
-
import { r as n } from "./chunk-3FUC2YCW-
|
|
13
|
-
import { t as r } from "./chunk-NETBCI7D-
|
|
12
|
+
import { r as n } from "./chunk-3FUC2YCW-DWaNSANO.js";
|
|
13
|
+
import { t as r } from "./chunk-NETBCI7D-WvAAUJne.js";
|
|
14
14
|
//#region ../../node_modules/mermaid/dist/chunks/mermaid.core/swimlanes-2SLR337P.mjs
|
|
15
15
|
function i(e, { measure: t }) {
|
|
16
16
|
let n = e.config?.swimlane?.lineHops;
|
package/dist/{swimlanesDiagram-TC7HE7FX-Dii9S4bC.js → swimlanesDiagram-TC7HE7FX-DWBnIppx.js}
RENAMED
|
@@ -7,14 +7,14 @@ import "./chunk-MBY4JIJT-BFIqOe-8.js";
|
|
|
7
7
|
import "./chunk-7PRAP22T-0C6_H8Li.js";
|
|
8
8
|
import "./chunk-7INBJB4K-k-I67NSP.js";
|
|
9
9
|
import "./chunk-5DYCD2WN-Cd1zazNp.js";
|
|
10
|
-
import "./chunk-Z7XXMR3K-
|
|
10
|
+
import "./chunk-Z7XXMR3K-DY6U0Uq4.js";
|
|
11
11
|
import "./chunk-GWA4HPMP-B8jXI0Tl.js";
|
|
12
12
|
import "./chunk-XXDRQBXY-dKXxu_aj.js";
|
|
13
13
|
import "./chunk-WEXAMYUT-CbFOhEve.js";
|
|
14
14
|
import "./chunk-UA2S7LBM-ChuksCDg.js";
|
|
15
|
-
import "./chunk-GNY47TPC-
|
|
15
|
+
import "./chunk-GNY47TPC-Dzk3o85s.js";
|
|
16
16
|
import "./chunk-LNGE3PJU-DJjGTS7O.js";
|
|
17
|
-
import { r as t, t as n } from "./chunk-7M6MHVWA-
|
|
17
|
+
import { r as t, t as n } from "./chunk-7M6MHVWA-x-N4hnls.js";
|
|
18
18
|
//#region ../../node_modules/mermaid/dist/chunks/mermaid.core/swimlanesDiagram-TC7HE7FX.mjs
|
|
19
19
|
var r = n({ styles: /* @__PURE__ */ e((e) => `${t(e)}
|
|
20
20
|
.swimlane.cluster:not([data-color-id]) rect {
|
package/dist/{timeline-definition-EJHVYXUP-K00somtn.js → timeline-definition-EJHVYXUP-BBwvY1Xf.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ct as e } from "./components-
|
|
1
|
+
import { ct as e } from "./components-DH5dpaU8.js";
|
|
2
2
|
import { n as t, t as n } from "./src-CsLQInsN.js";
|
|
3
3
|
import { p as r } from "./chunk-ZIGJFQKS-9VXArDKF.js";
|
|
4
4
|
import { n as i, t as a } from "./chunk-Y2CYZVJY-BAad7w_K.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import "./stored-language-
|
|
2
|
-
import { E as e, r as t } from "./translator-
|
|
1
|
+
import "./stored-language-DqlfjXt8.js";
|
|
2
|
+
import { E as e, r as t } from "./translator-B_lmafJN.js";
|
|
3
3
|
//#region lib/i18n/translate-material.ts
|
|
4
4
|
function n(n, r, i, a) {
|
|
5
5
|
if (n) for (let e of /* @__PURE__ */ new Set([n, n.split("-")[0]])) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as e, i as t, o as n, t as r } from "./stored-language-
|
|
1
|
+
import { a as e, i as t, o as n, t as r } from "./stored-language-DqlfjXt8.js";
|
|
2
2
|
//#region ../../node_modules/@formatjs/fast-memoize/index.js
|
|
3
3
|
function i(e, t) {
|
|
4
4
|
let n = t && t.cache ? t.cache : ne, r = t && t.serializer ? t.serializer : ee;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { n as e } from "./stored-language-
|
|
2
|
-
import { r as t } from "./i18n-provider-
|
|
1
|
+
import { n as e } from "./stored-language-DqlfjXt8.js";
|
|
2
|
+
import { r as t } from "./i18n-provider-Cq_VScPv.js";
|
|
3
3
|
import { _ as n, g as r, h as i, n as a, v as o, y as s } from "./number.utils-BiBN2hWJ.js";
|
|
4
4
|
import { createContext as c, useCallback as l, useContext as u, useEffect as d, useMemo as f, useRef as p, useSyncExternalStore as m } from "react";
|
|
5
5
|
//#region lib/hooks/resolve-theme.ts
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { r as e } from "./i18n-provider-
|
|
2
|
-
import { t } from "./translate-material-
|
|
1
|
+
import { r as e } from "./i18n-provider-Cq_VScPv.js";
|
|
2
|
+
import { t } from "./translate-material-B6HO6ykL.js";
|
|
3
3
|
import { useCallback as n } from "react";
|
|
4
4
|
//#region lib/i18n/use-material-translation.ts
|
|
5
5
|
function r() {
|
|
@@ -8,11 +8,11 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
|
|
|
8
8
|
import { a as g, i as _, o as v, r as y } from "./chunk-J5ZVWO5B-DmRRmhon.js";
|
|
9
9
|
import "./chunk-7INBJB4K-k-I67NSP.js";
|
|
10
10
|
import "./chunk-5DYCD2WN-Cd1zazNp.js";
|
|
11
|
-
import "./chunk-Z7XXMR3K-
|
|
11
|
+
import "./chunk-Z7XXMR3K-DY6U0Uq4.js";
|
|
12
12
|
import { t as ee } from "./chunk-XXDRQBXY-dKXxu_aj.js";
|
|
13
13
|
import { t as te } from "./chunk-WEXAMYUT-CbFOhEve.js";
|
|
14
14
|
import "./chunk-UA2S7LBM-ChuksCDg.js";
|
|
15
|
-
import { r as ne, t as re } from "./chunk-GNY47TPC-
|
|
15
|
+
import { r as ne, t as re } from "./chunk-GNY47TPC-Dzk3o85s.js";
|
|
16
16
|
//#region ../../node_modules/chevrotain/node_modules/lodash-es/_freeGlobal.js
|
|
17
17
|
var ie = typeof global == "object" && global && global.Object === Object && global, ae = typeof self == "object" && self && self.Object === Object && self, b = ie || ae || Function("return this")(), oe = b.Symbol, se = Object.prototype, ce = se.hasOwnProperty, le = se.toString, ue = oe ? oe.toStringTag : void 0;
|
|
18
18
|
function de(e) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { at as e, rt as t, st as n } from "./components-
|
|
1
|
+
import { at as e, rt as t, st as n } from "./components-DH5dpaU8.js";
|
|
2
2
|
import { n as r } from "./src-CsLQInsN.js";
|
|
3
3
|
import { i } from "./chunk-ZIGJFQKS-9VXArDKF.js";
|
|
4
4
|
import { n as a } from "./chunk-Y2CYZVJY-BAad7w_K.js";
|
|
@@ -57,7 +57,8 @@ action); `DataTablePagination`, `DataTableServerFooter` and
|
|
|
57
57
|
`useColumnHelpers<T>()` returns a
|
|
58
58
|
`columnHelper` bound to the table's features and `predefinedColumns()` —
|
|
59
59
|
`select` (checkboxes) and `expand` (a toggle for `renderExpandedRow`, named
|
|
60
|
-
"Toggle row details" (`material.table.labels.toggle-row`) with `aria-expanded
|
|
60
|
+
"Toggle row details" (`material.table.labels.toggle-row`) with `aria-expanded`, under a
|
|
61
|
+
visually hidden header "Expand", `material.table.labels.expand`);
|
|
61
62
|
`useDeleteRowsHandler(onDelete)` returns a `handleDelete(rows)` click
|
|
62
63
|
handler and the `confirmDialog` to render.
|
|
63
64
|
`dataTableFeatures` / `DataTableFeatures` are the TanStack v9 features the
|
|
@@ -77,6 +78,7 @@ table enables, for typing your own column defs.
|
|
|
77
78
|
| `scrollLabel` | `string` | "Scrollable table" | the name of the scroll region the table becomes while it overflows |
|
|
78
79
|
| `loading` | `boolean` | `false` | skeleton rows, or the current rows dimmed; `aria-busy`; controls disabled |
|
|
79
80
|
| `loadingRows` | `number` | the page size | how many skeleton rows |
|
|
81
|
+
| `density` | `'comfortable' \| 'compact'` | `'comfortable'` | `compact` tightens the cell padding, the row and header heights and the gap between rows, the selection column included; it is the table's `data-density` attribute, styled with classes (no inline style). The toolbar band and the empty state keep their size; the print variant is unchanged |
|
|
80
82
|
| `empty` | `ReactNode \| ({ filtered }) => ReactNode` | icon and "No data available" | content of the empty row, spanning every visible column |
|
|
81
83
|
| `manual` | `boolean` | `false` | `data` is one server page: no client filtering, sorting or paging; the footer is the server footer ([server-side data](#server-side-data)) |
|
|
82
84
|
| `sorting` / `onSortingChange` | `SortingState` / `(sorting) => void` | held inside | controlled sorting; the callback gets the new state, not an updater, and is not called for an update that resolves to the current value |
|
package/docs/guides/forms.md
CHANGED
|
@@ -270,6 +270,55 @@ in `[data-slot="form-actions"]`) and put each group of fields in a
|
|
|
270
270
|
fields still take a row of their own. A rule separates each section from the
|
|
271
271
|
one before it (`separated={false}` drops it).
|
|
272
272
|
|
|
273
|
+
### One scroll, sticky actions
|
|
274
|
+
|
|
275
|
+
The form grid has no height of its own and its fields no scroll box: a long
|
|
276
|
+
form grows with the page, and the page is the one scroll. The actions
|
|
277
|
+
(`[data-slot="form-actions"]`) are sticky at the bottom of whatever scrolls
|
|
278
|
+
the form, on a translucent, blurred background, so Cancel and Save stay in
|
|
279
|
+
reach while the fields scroll under them; a form shorter than the screen
|
|
280
|
+
shows them right under its fields.
|
|
281
|
+
|
|
282
|
+
- In a `DialogContent` or a `SheetContent`, which are capped to the screen
|
|
283
|
+
and scroll themselves, the actions stick to the dialog's or the sheet's
|
|
284
|
+
bottom. A `DrawerContent` does not scroll: a form that is its direct child
|
|
285
|
+
is the scroll box there.
|
|
286
|
+
- In an `AlertDialogContent` (the rich text editor's edit dialogs use one),
|
|
287
|
+
the actions stick to its bottom the same way, over its padding.
|
|
288
|
+
- `ConfirmationDialog` holds a form when you pass it `formOptions` (a schema, its `defaultValues` and `renderForm`): it renders the
|
|
289
|
+
fields in a `.form-grid-layout` with no `form-actions`, so its footer
|
|
290
|
+
(Cancel, Confirm) is what sticks to the dialog's bottom. Any `Dialog` or
|
|
291
|
+
`AlertDialog` whose content holds a `.form-grid-layout` without
|
|
292
|
+
`form-actions` gets the same sticky footer.
|
|
293
|
+
- A focused control or link is scrolled into view clear of the actions and
|
|
294
|
+
a line of helper text below it (`scroll-margin-bottom` on the fields'
|
|
295
|
+
controls: 6rem, plus a dialog's bottom padding, 7.5rem above a
|
|
296
|
+
`ConfirmationDialog`'s stacked footer), so a field you tab to is never
|
|
297
|
+
hidden behind them (WCAG 2.4.11). It is set on the controls, so it holds
|
|
298
|
+
in a scroll box of your own too.
|
|
299
|
+
- Taller actions (a third button, labels that wrap) or helper text on
|
|
300
|
+
several lines need more room: raise `--form-actions-clearance` on the
|
|
301
|
+
form. A dialog whose bottom padding is not the default 1.5rem (`p-0` and
|
|
302
|
+
`p-4` are recognised) sets `--form-actions-fill` to it:
|
|
303
|
+
|
|
304
|
+
```css
|
|
305
|
+
.edit-school-form {
|
|
306
|
+
--form-actions-clearance: 9rem;
|
|
307
|
+
}
|
|
308
|
+
.edit-school-dialog {
|
|
309
|
+
--form-actions-fill: 2rem; /* its pb-8 */
|
|
310
|
+
}
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
```tsx
|
|
314
|
+
<form className="form-grid-layout edit-school-form">
|
|
315
|
+
```
|
|
316
|
+
- To scroll a form in a box of your own, give it a height and the scroll
|
|
317
|
+
(`className="form-grid-layout max-h-[60vh] overflow-y-auto"`); to keep the
|
|
318
|
+
actions in place, give them `className="static"`. The
|
|
319
|
+
[troubleshooting entry](../troubleshooting.md#a-forms-fields-no-longer-scroll-in-their-own-box-after-upgrading)
|
|
320
|
+
has the details.
|
|
321
|
+
|
|
273
322
|
## Validation messages
|
|
274
323
|
|
|
275
324
|
`zodLocaleError()` from `@nxgt/material/lib` is a Zod v4 error map that
|
package/docs/guides/i18n.md
CHANGED
|
@@ -209,7 +209,8 @@ single value's input, when nothing names the slider, `material.slider.value`
|
|
|
209
209
|
("Value", "Valeur"). `CopyButton` reads `material.copy.copy`, `copied` and `failed` ("Copy", "Copied",
|
|
210
210
|
"Copy failed"). The other icon-only buttons are named from it too: the
|
|
211
211
|
`Sidebar` toggle (`material.sidebar.toggle`), the data table's row expander
|
|
212
|
-
(`material.table.labels.toggle-row`)
|
|
212
|
+
(`material.table.labels.toggle-row`) and its header, a hidden "Expand" / "Déplier"
|
|
213
|
+
(`material.table.labels.expand`), its loading status, "Loading data…" /
|
|
213
214
|
"Chargement des données…" (`material.table.loading`), its scroll region,
|
|
214
215
|
"Scrollable table" / "Tableau défilant"
|
|
215
216
|
(`material.table.labels.scroll-region`, or the `scrollLabel` prop), a chip's remove button — `Chip`,
|
package/docs/troubleshooting.md
CHANGED
|
@@ -28,6 +28,7 @@ words in your error.
|
|
|
28
28
|
- [A Content-Security-Policy reports a `data:` image on every form with a required field](#a-content-security-policy-reports-a-data-image-on-every-form-with-a-required-field)
|
|
29
29
|
- [A Button's label overflows a card on a phone](#a-buttons-label-overflows-a-card-on-a-phone)
|
|
30
30
|
- [A dialog or sheet scrolls, or clips a child, after upgrading](#a-dialog-or-sheet-scrolls-or-clips-a-child-after-upgrading)
|
|
31
|
+
- [A form's fields no longer scroll in their own box after upgrading](#a-forms-fields-no-longer-scroll-in-their-own-box-after-upgrading)
|
|
31
32
|
|
|
32
33
|
**Feedback**
|
|
33
34
|
|
|
@@ -643,6 +644,32 @@ with `className="max-h-none overflow-visible"`; to change the cap, pass your own
|
|
|
643
644
|
For a dialog that should grow taller than the screen and scroll inside the
|
|
644
645
|
overlay instead of capping, use `DialogScrollContent`.
|
|
645
646
|
|
|
647
|
+
### A form's fields no longer scroll in their own box after upgrading
|
|
648
|
+
|
|
649
|
+
**When:** after upgrading, a `.form-grid-layout` form grows with the page
|
|
650
|
+
instead of scrolling its fields in a box of its own, Cancel and Save stay at
|
|
651
|
+
the bottom of the screen, or a form inside a box you gave a fixed height
|
|
652
|
+
overflows it.
|
|
653
|
+
**Why:** the form grid used to cap its height
|
|
654
|
+
(`max-h-[calc(100lvh-184px)]`, more from `md`) and scroll
|
|
655
|
+
`[data-slot="form-fields"]` inside it, so a page had two scrolls, one inside
|
|
656
|
+
the other. It now has no cap and no scroll of its own: the page, or the
|
|
657
|
+
`DialogContent` / `SheetContent` around it, is the one scroll, and
|
|
658
|
+
`[data-slot="form-actions"]` is sticky at its bottom on a blurred background.
|
|
659
|
+
A `Drawer`'s content does not scroll, so a form that is a direct child of
|
|
660
|
+
`DrawerContent` is the scroll box there.
|
|
661
|
+
**Fix:** to scroll a form inside a box again, give the box (or the form) a
|
|
662
|
+
height and the scroll; the actions then stick to its bottom. To keep the
|
|
663
|
+
actions where they are, make them static:
|
|
664
|
+
|
|
665
|
+
```tsx
|
|
666
|
+
<form className="form-grid-layout max-h-[60vh] overflow-y-auto">
|
|
667
|
+
<div data-slot="form-actions" className="static">
|
|
668
|
+
```
|
|
669
|
+
|
|
670
|
+
An app's own fixed bottom bar or floating action button now sits under the
|
|
671
|
+
sticky actions (`z-index: 10`): give it a z-index above 10 (`className="z-20"`).
|
|
672
|
+
|
|
646
673
|
## Feedback
|
|
647
674
|
|
|
648
675
|
### A toast with an action never goes away
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
.form-grid-layout {
|
|
98
98
|
@apply relative flex flex-col gap-2 @container;
|
|
99
99
|
[data-slot="form-fields"] {
|
|
100
|
-
@apply grid @2xl:grid-cols-2 @4xl:grid-cols-3 @6xl:grid-cols-4 gap-2 bg-background/80 p-4 place-items-start
|
|
100
|
+
@apply grid @2xl:grid-cols-2 @4xl:grid-cols-3 @6xl:grid-cols-4 gap-2 bg-background/80 p-4 place-items-start;
|
|
101
101
|
|
|
102
102
|
[data-slot="separator"] {
|
|
103
103
|
@apply col-start-full;
|
|
@@ -125,13 +125,73 @@
|
|
|
125
125
|
@apply col-start-full;
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
|
+
/* A focused control scrolls into view clear of the actions and a line
|
|
129
|
+
of helper text, in any scroll box (WCAG 2.4.11 Focus Not Obscured). */
|
|
130
|
+
[data-slot="form-fields"]
|
|
131
|
+
:is(
|
|
132
|
+
input,
|
|
133
|
+
textarea,
|
|
134
|
+
select,
|
|
135
|
+
button,
|
|
136
|
+
a[href],
|
|
137
|
+
summary,
|
|
138
|
+
[tabindex],
|
|
139
|
+
[contenteditable]
|
|
140
|
+
) {
|
|
141
|
+
scroll-margin-bottom: calc(
|
|
142
|
+
var(--form-actions-clearance, 6rem) +
|
|
143
|
+
var(--form-actions-fill, 0px)
|
|
144
|
+
);
|
|
145
|
+
}
|
|
146
|
+
/* Sticky at the bottom of whatever scrolls the form: in reach. */
|
|
128
147
|
[data-slot="form-actions"] {
|
|
129
|
-
@apply flex w-full justify-end gap-2
|
|
148
|
+
@apply sticky bottom-0 z-10 flex w-full justify-end gap-2 bg-background/90 p-4 backdrop-blur-sm max-sm:*:flex-1;
|
|
130
149
|
}
|
|
131
150
|
}
|
|
132
151
|
|
|
133
|
-
|
|
134
|
-
|
|
152
|
+
/* No height cap and no scroll of its own: the page (or the overlay) is
|
|
153
|
+
the one scroll. A Drawer's content does not scroll: the form does. */
|
|
154
|
+
[data-slot="drawer-content"] > .form-grid-layout {
|
|
155
|
+
@apply min-h-0 overflow-y-auto;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* In a dialog, the stuck actions sit above its bottom padding
|
|
159
|
+
(`--form-actions-fill`: p-6 by default; set it for another one). */
|
|
160
|
+
:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]) {
|
|
161
|
+
--form-actions-fill: 1.5rem;
|
|
162
|
+
&:is(.p-0, .py-0, .pb-0) {
|
|
163
|
+
--form-actions-fill: 0px;
|
|
164
|
+
}
|
|
165
|
+
&:is(.p-4, .py-4, .pb-4) {
|
|
166
|
+
--form-actions-fill: 1rem;
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/* ConfirmationDialog's form has no actions of its own: the dialog's
|
|
171
|
+
footer (two stacked buttons on a phone) sticks instead. */
|
|
172
|
+
:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]):has(
|
|
173
|
+
.form-grid-layout
|
|
174
|
+
):not(:has([data-slot="form-actions"])) {
|
|
175
|
+
--form-actions-clearance: 7.5rem;
|
|
176
|
+
> :is([data-slot="dialog-footer"], [data-slot="alert-dialog-footer"]) {
|
|
177
|
+
@apply sticky bottom-0 z-10 bg-background/90 backdrop-blur-sm;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* A sticky element stops at the scroll box's padding: in a dialog, an
|
|
182
|
+
`::after` as tall as that padding fills the strip below the stuck
|
|
183
|
+
actions, so no field shows there, and adds no overflow. */
|
|
184
|
+
:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"])
|
|
185
|
+
.form-grid-layout
|
|
186
|
+
> [data-slot="form-actions"]::after,
|
|
187
|
+
:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]):has(
|
|
188
|
+
.form-grid-layout
|
|
189
|
+
):not(:has([data-slot="form-actions"]))
|
|
190
|
+
> :is(
|
|
191
|
+
[data-slot="dialog-footer"],
|
|
192
|
+
[data-slot="alert-dialog-footer"]
|
|
193
|
+
)::after {
|
|
194
|
+
@apply absolute inset-x-0 top-full h-(--form-actions-fill) bg-background content-[""];
|
|
135
195
|
}
|
|
136
196
|
|
|
137
197
|
/* No height cap on `DataTable` here (it nested a scroll in the page's):
|