@12-apps/ui 6.50.1 → 6.51.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.
Files changed (60) hide show
  1. package/components-catalog.md +2 -2
  2. package/dist/_internal/components/index.js +7 -7
  3. package/dist/_internal/components/navigation/SectionNav/SectionNav.bar.js +5 -5
  4. package/dist/_internal/components/navigation/SectionNav/SectionNav.helpers.js +5 -1
  5. package/dist/_internal/components/navigation/SectionNav/SectionNav.js +7 -7
  6. package/dist/_internal/components/navigation/SectionNav/SectionNav.parts.js +8 -2
  7. package/dist/_internal/components/navigation/SectionNav/SectionNav.primary.js +3 -3
  8. package/dist/_internal/components/navigation/SectionNav/SectionNav.rail.js +3 -3
  9. package/dist/_internal/components/navigation/SectionNav/SectionNav.sheet.js +3 -3
  10. package/dist/_internal/components/navigation/SectionNav/__stories__/fixtures.js +12 -0
  11. package/dist/_internal/components/navigation/SectionNav/__stories__/fixtures.js.map +1 -1
  12. package/dist/_internal/components/navigation/index.js +7 -7
  13. package/dist/{chunk-GLKQT2DS.js → chunk-A436VORP.js} +33 -4
  14. package/dist/chunk-A436VORP.js.map +1 -0
  15. package/dist/{chunk-RX7J6VRI.js → chunk-HKEBTPKY.js} +119 -42
  16. package/dist/chunk-HKEBTPKY.js.map +1 -0
  17. package/dist/{chunk-VHVI3D4R.js → chunk-P3GBXE73.js} +11 -2
  18. package/dist/chunk-P3GBXE73.js.map +1 -0
  19. package/dist/{chunk-32JMSHEA.js → chunk-S4ZUZ6DS.js} +10 -6
  20. package/dist/chunk-S4ZUZ6DS.js.map +1 -0
  21. package/dist/{chunk-SA2ERYVV.js → chunk-VAO63IIP.js} +3 -3
  22. package/dist/{chunk-43Q6CVPB.js → chunk-VELGOFCL.js} +127 -78
  23. package/dist/chunk-VELGOFCL.js.map +1 -0
  24. package/dist/chunk-WNKRFMSI.js +113 -0
  25. package/dist/chunk-WNKRFMSI.js.map +1 -0
  26. package/dist/navigation/SectionNav.js +7 -7
  27. package/dist/types/components/navigation/SectionNav/SectionNav.bar.d.ts.map +1 -1
  28. package/dist/types/components/navigation/SectionNav/SectionNav.helpers.d.ts +12 -1
  29. package/dist/types/components/navigation/SectionNav/SectionNav.helpers.d.ts.map +1 -1
  30. package/dist/types/components/navigation/SectionNav/SectionNav.parts.d.ts +36 -2
  31. package/dist/types/components/navigation/SectionNav/SectionNav.parts.d.ts.map +1 -1
  32. package/dist/types/components/navigation/SectionNav/SectionNav.primary.d.ts +22 -4
  33. package/dist/types/components/navigation/SectionNav/SectionNav.primary.d.ts.map +1 -1
  34. package/dist/types/components/navigation/SectionNav/SectionNav.rail.d.ts.map +1 -1
  35. package/dist/types/components/navigation/SectionNav/SectionNav.sheet.d.ts.map +1 -1
  36. package/dist/types/components/navigation/SectionNav/SectionNav.types.d.ts +81 -5
  37. package/dist/types/components/navigation/SectionNav/SectionNav.types.d.ts.map +1 -1
  38. package/dist/types/components/navigation/SectionNav/__stories__/fixtures.d.ts +11 -1
  39. package/dist/types/components/navigation/SectionNav/__stories__/fixtures.d.ts.map +1 -1
  40. package/dist/types/components/navigation/SectionNav/index.d.ts +1 -1
  41. package/dist/types/components/navigation/SectionNav/index.d.ts.map +1 -1
  42. package/package.json +1 -1
  43. package/src/components/navigation/SectionNav/SectionNav.bar.tsx +161 -88
  44. package/src/components/navigation/SectionNav/SectionNav.helpers.ts +16 -1
  45. package/src/components/navigation/SectionNav/SectionNav.md +40 -4
  46. package/src/components/navigation/SectionNav/SectionNav.parts.tsx +59 -1
  47. package/src/components/navigation/SectionNav/SectionNav.primary.tsx +107 -30
  48. package/src/components/navigation/SectionNav/SectionNav.rail.tsx +154 -41
  49. package/src/components/navigation/SectionNav/SectionNav.sheet.tsx +6 -2
  50. package/src/components/navigation/SectionNav/SectionNav.types.ts +82 -5
  51. package/src/components/navigation/SectionNav/__stories__/fixtures.tsx +21 -1
  52. package/src/components/navigation/SectionNav/index.ts +1 -0
  53. package/dist/chunk-32JMSHEA.js.map +0 -1
  54. package/dist/chunk-43Q6CVPB.js.map +0 -1
  55. package/dist/chunk-GLKQT2DS.js.map +0 -1
  56. package/dist/chunk-RX7J6VRI.js.map +0 -1
  57. package/dist/chunk-RZ4SBSLP.js +0 -62
  58. package/dist/chunk-RZ4SBSLP.js.map +0 -1
  59. package/dist/chunk-VHVI3D4R.js.map +0 -1
  60. /package/dist/{chunk-SA2ERYVV.js.map → chunk-VAO63IIP.js.map} +0 -0
@@ -1,6 +1,7 @@
1
1
  import Box from '@mui/material/Box/index.js';
2
2
  import type { SxProps, Theme } from '@mui/material/styles/index.js';
3
3
  import type { ElementType, ReactNode } from 'react';
4
+ import type { SectionNavDestination } from './SectionNav.types';
4
5
  /**
5
6
  * An icon with its count on the shoulder.
6
7
  *
@@ -21,13 +22,43 @@ export declare function focusRing(theme: Theme): SxProps<Theme>;
21
22
  * `href`, a button for an `onSelect`.
22
23
  *
23
24
  * Returned as props for a `Box`, so the control stays ONE interactive
24
- * element — never a button wrapped around a link.
25
+ * element — never a button wrapped around a link. Whatever it would lead to,
26
+ * a control that is not live is a BUTTON: a link cannot be disabled, and one
27
+ * that looks dimmed but still navigates is the lie this rules out.
28
+ *
29
+ * - `inert` — a native `disabled` button: no focus, no click.
30
+ * - `busy` — a write is in flight: `aria-disabled`, still focusable, and the
31
+ * click is dropped, so the keyboard keeps its place until the write answers.
32
+ * - `dimmed` — `aria-disabled`, still focusable, and the click STILL runs, so
33
+ * the host can explain why the act cannot be done now.
25
34
  */
26
- export declare function controlProps({ href, onClick, linkComponent, }: {
35
+ export declare function controlProps({ href, onClick, linkComponent, inert, busy, dimmed, }: {
27
36
  href: string | undefined;
28
37
  onClick?: () => void;
29
38
  linkComponent: ElementType | undefined;
39
+ inert?: boolean;
40
+ busy?: boolean;
41
+ dimmed?: boolean;
30
42
  }): Record<string, unknown>;
43
+ /**
44
+ * A destination's control: `controlProps` from its own state, plus
45
+ * `aria-pressed` when it is an action slot that is a toggle. A link reports
46
+ * where the viewer is through `aria-current` instead — the row draws that.
47
+ */
48
+ export declare function destinationControl(destination: SectionNavDestination, linkComponent: ElementType | undefined, onClick: () => void): Record<string, unknown>;
49
+ /**
50
+ * The selector for a control drawn as not live: natively disabled, or
51
+ * `aria-disabled` (in flight, or dimmed) and still focusable.
52
+ */
53
+ export declare const NOT_LIVE = "&:disabled, &[aria-disabled=\"true\"]";
54
+ /**
55
+ * The icon, or the spinner that stands in for it while the slot's write is in
56
+ * flight — the same box, so the label under it does not move.
57
+ */
58
+ export declare function SlotIcon({ icon, loading }: {
59
+ icon: ReactNode;
60
+ loading: boolean;
61
+ }): React.JSX.Element;
31
62
  /** The base reset every clickable in the nav shares: no underline, no button chrome. */
32
63
  export declare const CONTROL_RESET: {
33
64
  readonly border: 0;
@@ -37,6 +68,9 @@ export declare const CONTROL_RESET: {
37
68
  readonly textDecoration: "none";
38
69
  readonly cursor: "pointer";
39
70
  readonly margin: 0;
71
+ readonly "&:disabled, &[aria-disabled=\"true\"]": {
72
+ readonly cursor: "default";
73
+ };
40
74
  };
41
75
  export { Box };
42
76
  //# sourceMappingURL=SectionNav.parts.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SectionNav.parts.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.parts.tsx"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,4BAA4B,CAAC;AAC7C,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOpD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,GACP,EAAE;IACD,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkBpB;AAED,mFAAmF;AACnF,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAOtD;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,OAAO,EACP,aAAa,GACd,EAAE;IACD,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;CACxC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAG1B;AAED,wFAAwF;AACxF,eAAO,MAAM,aAAa;;;;;;;;CAQhB,CAAC;AAEX,OAAO,EAAE,GAAG,EAAE,CAAC"}
1
+ {"version":3,"file":"SectionNav.parts.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.parts.tsx"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,4BAA4B,CAAC;AAE7C,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMpD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,GACP,EAAE;IACD,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkBpB;AAED,mFAAmF;AACnF,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAOtD;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,OAAO,EACP,aAAa,EACb,KAAa,EACb,IAAY,EACZ,MAAc,GACf,EAAE;IACD,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAM1B;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,qBAAqB,EAClC,aAAa,EAAE,WAAW,GAAG,SAAS,EACtC,OAAO,EAAE,MAAM,IAAI,GAClB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAYzB;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,0CAAwC,CAAC;AAE9D;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAGpG;AAED,wFAAwF;AACxF,eAAO,MAAM,aAAa;;;;;;;;;;;CAShB,CAAC;AAEX,OAAO,EAAE,GAAG,EAAE,CAAC"}
@@ -1,6 +1,10 @@
1
1
  import type { ReactNode } from 'react';
2
2
  export interface RaisedActionButtonProps {
3
- /** The button's accessible name — it has no visible label. */
3
+ /**
4
+ * The button's accessible name. Drawn under the button only when
5
+ * `captioned`; the caption is hidden from assistive tech, so the name is
6
+ * read once either way.
7
+ */
4
8
  label: string;
5
9
  icon: ReactNode;
6
10
  onClick: () => void;
@@ -12,6 +16,19 @@ export interface RaisedActionButtonProps {
12
16
  open?: boolean;
13
17
  /** The name it takes while `open` — the same control closes what it opened. REQUIRED with `open`. */
14
18
  closeLabel?: string;
19
+ /**
20
+ * Draw `label` under the button. A bar of VERBS names the act it is for; a
21
+ * bar of places can leave its one action to the icon.
22
+ */
23
+ captioned?: boolean;
24
+ /** Dimmed and not operable: a native `disabled` button. */
25
+ disabled?: boolean;
26
+ /**
27
+ * A write it started is in flight: a spinner replaces the icon, it reports
28
+ * `aria-busy` and `aria-disabled`, and a tap is ignored. It stays focusable,
29
+ * so the keyboard does not lose its place while the write answers.
30
+ */
31
+ loading?: boolean;
15
32
  dataTestId?: string;
16
33
  }
17
34
  /**
@@ -19,11 +36,12 @@ export interface RaisedActionButtonProps {
19
36
  * the row that is an ACTION rather than a place.
20
37
  *
21
38
  * Lifted half out of the bar so it reads as different in kind from the tabs
22
- * beside it, and unlabelled so it costs the row less width than a tab: that
23
- * width is what lets a bar keep four labelled tabs AND this button at 320px.
39
+ * beside it. Uncaptioned it costs the row less width than a tab: that width is
40
+ * what lets a bar keep four labelled tabs AND this button at 320px. A bar of
41
+ * verbs captions it, naming the act under the button.
24
42
  *
25
43
  * `SectionNav` draws it for its `primary` menu. It is exported on its own for
26
44
  * a bar the host already draws — drop it between two tabs, in a flex row.
27
45
  */
28
- export declare function RaisedActionButton({ label, icon, onClick, open, closeLabel, dataTestId, }: RaisedActionButtonProps): React.JSX.Element;
46
+ export declare function RaisedActionButton({ label, icon, onClick, open, closeLabel, captioned, disabled, loading, dataTestId, }: RaisedActionButtonProps): React.JSX.Element;
29
47
  //# sourceMappingURL=SectionNav.primary.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SectionNav.primary.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.primary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,uBAAuB;IACtC,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qGAAqG;IACrG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,UAAU,EACV,UAA4B,GAC7B,EAAE,uBAAuB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAuC7C"}
1
+ {"version":3,"file":"SectionNav.primary.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.primary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qGAAqG;IACrG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,UAAU,EACV,SAAiB,EACjB,QAAgB,EAChB,OAAe,EACf,UAA4B,GAC7B,EAAE,uBAAuB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4B7C"}
@@ -1 +1 @@
1
- {"version":3,"file":"SectionNav.rail.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.rail.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AAMpD,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAqH1E;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,YAAY,EACZ,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,IAAI,EACJ,UAAU,GACX,EAAE,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,YAAY,CAAC,CAAC,GAClF,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,GAAG;IAC/D,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;CACxC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA8DtB"}
1
+ {"version":3,"file":"SectionNav.rail.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.rail.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AAgBpD,OAAO,KAAK,EAKV,eAAe,EAChB,MAAM,oBAAoB,CAAC;AA+O5B;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,YAAY,EACZ,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,IAAI,EACJ,UAAU,GACX,EAAE,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,YAAY,CAAC,CAAC,GAClF,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,GAAG;IAC/D,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;CACxC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqCtB"}
@@ -1 +1 @@
1
- {"version":3,"file":"SectionNav.sheet.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAMzC,OAAO,KAAK,EAAoC,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC3F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAiIpD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,IAAI,EACJ,MAAM,EACN,YAAY,GACb,EAAE;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;IACvC,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,0GAA0G;IAC1G,YAAY,EAAE,MAAM,CAAC;CACtB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4CpB"}
1
+ {"version":3,"file":"SectionNav.sheet.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAMzC,OAAO,KAAK,EAAoC,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC3F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAqIpD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,IAAI,EACJ,MAAM,EACN,YAAY,GACb,EAAE;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;IACvC,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,0GAA0G;IAC1G,YAAY,EAAE,MAAM,CAAC;CACtB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4CpB"}
@@ -1,21 +1,61 @@
1
1
  import type { ElementType, ReactNode } from 'react';
2
2
  import type { SectionNavCopy } from '../../../copy';
3
3
  /**
4
- * One place the section leads to — a bar slot on a phone, a row in the rail.
4
+ * One slot of the section — a bar slot on a phone, a row in the rail.
5
+ *
6
+ * A slot either LEADS somewhere (`href`, rendered through `linkComponent`) or
7
+ * DOES something (`onSelect`), the way a menu entry does. A bar of places is a
8
+ * section's navigation; a bar of verbs is a screen's actions pinned at its
9
+ * foot, and it is the same bar, so the two cannot be drawn two ways. Give a
10
+ * slot one or the other.
5
11
  */
6
12
  export interface SectionNavDestination {
7
13
  /** Stable key. Also the suffix of the slot's `data-testid`. */
8
14
  id: string;
9
15
  label: string;
10
16
  icon: ReactNode;
11
- href: string;
17
+ href?: string;
18
+ /**
19
+ * What the slot does, for an action slot. Ignored while `disabled` or
20
+ * `loading`; still called while `dimmed`.
21
+ */
22
+ onSelect?: () => void;
23
+ /**
24
+ * Drawn dimmed and not operable: the act exists here, and cannot be done
25
+ * now. A native `disabled` button — a tap does nothing, and `onSelect` is
26
+ * not called.
27
+ */
28
+ disabled?: boolean;
29
+ /**
30
+ * Drawn exactly like `disabled`, but still TAPPABLE: for an act the screen
31
+ * cannot do now and should EXPLAIN when tapped. It reports
32
+ * `aria-disabled="true"`, stays focusable, never lights up, and its
33
+ * `onSelect` still fires so the host can answer with a message (why not,
34
+ * and what would make it possible).
35
+ */
36
+ dimmed?: boolean;
37
+ /**
38
+ * A write this slot started is in flight — a spinner replaces the icon, the
39
+ * slot reports `aria-busy` and `aria-disabled`, and a tap is ignored. It
40
+ * stays focusable, so the keyboard does not lose its place mid-write.
41
+ */
42
+ loading?: boolean;
43
+ /**
44
+ * The control's own `data-testid`, in place of the one the nav derives. For
45
+ * a host whose suites already drive an id of their own shape.
46
+ */
47
+ dataTestId?: string;
12
48
  /**
13
49
  * How many things behind this destination wait on the viewer. `0` and
14
50
  * `undefined` render no badge — "nothing waiting" and "not known yet" are
15
51
  * different claims and neither is a number.
16
52
  */
17
53
  badge?: number;
18
- /** The destination the viewer is on. The host decides; the nav never reads the URL. */
54
+ /**
55
+ * For a link: the destination the viewer is on (`aria-current="page"`). For
56
+ * an action slot: a toggle that is ON (`aria-pressed`). The host decides;
57
+ * the nav never reads the URL.
58
+ */
19
59
  active?: boolean;
20
60
  }
21
61
  /**
@@ -34,6 +74,13 @@ export interface SectionNavEntry {
34
74
  onSelect?: () => void;
35
75
  badge?: number;
36
76
  active?: boolean;
77
+ /** Drawn dimmed and not operable — a print already on its way, an act this state refuses. */
78
+ disabled?: boolean;
79
+ /**
80
+ * The control's own `data-testid`, in place of the one the nav derives. For
81
+ * a host whose suites already drive an id of their own shape.
82
+ */
83
+ dataTestId?: string;
37
84
  }
38
85
  /** A titled run of entries inside a menu. */
39
86
  export interface SectionNavGroup {
@@ -62,6 +109,32 @@ export interface SectionNavMenu {
62
109
  /** The sheet's heading, and the rail section's. */
63
110
  title: string;
64
111
  groups: SectionNavGroup[];
112
+ /** The trigger is drawn dimmed and does not open; in the rail every row of it is inert. */
113
+ disabled?: boolean;
114
+ /**
115
+ * The control's own `data-testid`, in place of the one the nav derives. For
116
+ * a host whose suites already drive an id of their own shape.
117
+ */
118
+ dataTestId?: string;
119
+ }
120
+ /**
121
+ * The raised primary as a plain ACTION rather than a menu: one act, done on
122
+ * tap. Its label is drawn under the button, because a bar of verbs names the
123
+ * act it is for rather than leaving it to an icon.
124
+ */
125
+ export interface SectionNavAction {
126
+ label: string;
127
+ icon: ReactNode;
128
+ onSelect: () => void;
129
+ /** A native `disabled` button: a tap does nothing. */
130
+ disabled?: boolean;
131
+ /** In flight: a spinner, `aria-busy`, `aria-disabled`; focusable, and a tap is ignored. */
132
+ loading?: boolean;
133
+ /**
134
+ * The control's own `data-testid`, in place of the one the nav derives. For
135
+ * a host whose suites already drive an id of their own shape.
136
+ */
137
+ dataTestId?: string;
65
138
  }
66
139
  /** The way out of the section, drawn at the top of the rail. */
67
140
  export interface SectionNavBack {
@@ -81,8 +154,11 @@ export interface SectionNavProps {
81
154
  /** The navigation landmark's accessible name. */
82
155
  label: string;
83
156
  destinations: SectionNavDestination[];
84
- /** The raised action in the middle of the bar. */
85
- primary?: SectionNavMenu;
157
+ /**
158
+ * The raised button in the middle of the bar: a menu it opens as a sheet,
159
+ * or an action it does on tap (drawn with its label under it).
160
+ */
161
+ primary?: SectionNavMenu | SectionNavAction;
86
162
  /** The last slot of the bar. Its badge is the sum of its entries' badges. */
87
163
  more?: SectionNavMenu;
88
164
  /** Rail only: the way back out of the section. */
@@ -1 +1 @@
1
- {"version":3,"file":"SectionNav.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpD;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,+DAA+D;IAC/D,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uFAAuF;IACvF,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,6CAA6C;AAC7C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,MAAM,WAAW,cAAc;IAC7B,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,eAAe,EAAE,CAAC;CAC3B;AAED,gEAAgE;AAChE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,MAAM,EAAE,KAAK,GAAG,MAAM,CAAC;IACvB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,qBAAqB,EAAE,CAAC;IACtC,kDAAkD;IAClD,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,kDAAkD;IAClD,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,kEAAkE;IAClE,IAAI,EAAE,cAAc,CAAC;IACrB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}
1
+ {"version":3,"file":"SectionNav.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.types.ts"],"names":[],"mappings":"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"}
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import type { SectionNavDestination, SectionNavMenu } from '../SectionNav.types';
2
+ import type { SectionNavAction, SectionNavDestination, SectionNavMenu } from '../SectionNav.types';
3
3
  /**
4
4
  * The stories' example section, shared by the showcase and the interaction
5
5
  * tests. Kept out of the `*.stories.tsx` files because Storybook reads every
@@ -17,4 +17,14 @@ export declare function PhoneFrame({ children }: {
17
17
  export declare function RailFrame({ children }: {
18
18
  children: React.ReactNode;
19
19
  }): React.ReactElement;
20
+ /**
21
+ * A screen's ACTIONS pinned at its foot — the same bar, drawn with verbs: a
22
+ * bill being settled, one person at a time.
23
+ *
24
+ * `split` is DIMMED — it cannot be done yet, and a tap still reaches the host
25
+ * so it can say why. `equal` is a TOGGLE that is on: `aria-pressed`, never
26
+ * `aria-current`, because an action is not a page.
27
+ */
28
+ export declare const ACTIONS: SectionNavDestination[];
29
+ export declare const PAY_ALL: SectionNavAction;
20
30
  //# sourceMappingURL=fixtures.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"fixtures.d.ts","sourceRoot":"","sources":["../../../../../../src/components/navigation/SectionNav/__stories__/fixtures.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAEjF;;;;GAIG;AAEH,8FAA8F;AAC9F,eAAO,MAAM,YAAY,EAAE,qBAAqB,EAI/C,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,cA6BrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,cAiBlB,CAAC;AAEF,6EAA6E;AAC7E,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAoB1F;AAGD,iDAAiD;AACjD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAEzF"}
1
+ {"version":3,"file":"fixtures.d.ts","sourceRoot":"","sources":["../../../../../../src/components/navigation/SectionNav/__stories__/fixtures.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAEnG;;;;GAIG;AAEH,8FAA8F;AAC9F,eAAO,MAAM,YAAY,EAAE,qBAAqB,EAI/C,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,cA6BrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,cAiBlB,CAAC;AAEF,6EAA6E;AAC7E,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAoB1F;AAGD,iDAAiD;AACjD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAEzF;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,EAAE,qBAAqB,EAI1C,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,gBAIrB,CAAC"}
@@ -2,6 +2,6 @@ export { SectionNav } from './SectionNav';
2
2
  export { sectionNavBarInset } from './SectionNav.bar';
3
3
  export { RaisedActionButton } from './SectionNav.primary';
4
4
  export type { RaisedActionButtonProps } from './SectionNav.primary';
5
- export type { SectionNavBack, SectionNavDestination, SectionNavEntry, SectionNavGroup, SectionNavMenu, SectionNavProps, } from './SectionNav.types';
5
+ export type { SectionNavAction, SectionNavBack, SectionNavDestination, SectionNavEntry, SectionNavGroup, SectionNavMenu, SectionNavProps, } from './SectionNav.types';
6
6
  export type { SectionNavCopy } from '../../../copy';
7
7
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,YAAY,EACV,cAAc,EACd,qBAAqB,EACrB,eAAe,EACf,eAAe,EACf,cAAc,EACd,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,YAAY,EACV,gBAAgB,EAChB,cAAc,EACd,qBAAqB,EACrB,eAAe,EACf,eAAe,EACf,cAAc,EACd,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@12-apps/ui",
3
- "version": "6.50.1",
3
+ "version": "6.51.0",
4
4
  "license": "MIT",
5
5
  "packageManager": "pnpm@10.34.5",
6
6
  "type": "module",