@12-apps/ui 6.50.1 → 6.51.1
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/components-catalog.md +2 -2
- package/dist/_internal/components/index.js +7 -7
- package/dist/_internal/components/navigation/SectionNav/SectionNav.bar.js +6 -5
- package/dist/_internal/components/navigation/SectionNav/SectionNav.helpers.js +5 -1
- package/dist/_internal/components/navigation/SectionNav/SectionNav.js +8 -7
- package/dist/_internal/components/navigation/SectionNav/SectionNav.parts.js +8 -2
- package/dist/_internal/components/navigation/SectionNav/SectionNav.primary.js +3 -3
- package/dist/_internal/components/navigation/SectionNav/SectionNav.rail.js +3 -3
- package/dist/_internal/components/navigation/SectionNav/SectionNav.sheet.js +3 -3
- package/dist/_internal/components/navigation/SectionNav/__stories__/fixtures.js +12 -0
- package/dist/_internal/components/navigation/SectionNav/__stories__/fixtures.js.map +1 -1
- package/dist/_internal/components/navigation/index.js +8 -7
- package/dist/{chunk-SA2ERYVV.js → chunk-5GQYTB3K.js} +3 -3
- package/dist/{chunk-GLKQT2DS.js → chunk-A436VORP.js} +33 -4
- package/dist/chunk-A436VORP.js.map +1 -0
- package/dist/{chunk-RX7J6VRI.js → chunk-HKEBTPKY.js} +119 -42
- package/dist/chunk-HKEBTPKY.js.map +1 -0
- package/dist/{chunk-VHVI3D4R.js → chunk-P3GBXE73.js} +11 -2
- package/dist/chunk-P3GBXE73.js.map +1 -0
- package/dist/{chunk-32JMSHEA.js → chunk-S4ZUZ6DS.js} +10 -6
- package/dist/chunk-S4ZUZ6DS.js.map +1 -0
- package/dist/chunk-WNKRFMSI.js +113 -0
- package/dist/chunk-WNKRFMSI.js.map +1 -0
- package/dist/chunk-WNZBUR76.js +294 -0
- package/dist/chunk-WNZBUR76.js.map +1 -0
- package/dist/navigation/SectionNav.js +8 -7
- package/dist/types/components/navigation/SectionNav/SectionNav.bar.d.ts.map +1 -1
- package/dist/types/components/navigation/SectionNav/SectionNav.helpers.d.ts +12 -1
- package/dist/types/components/navigation/SectionNav/SectionNav.helpers.d.ts.map +1 -1
- package/dist/types/components/navigation/SectionNav/SectionNav.parts.d.ts +36 -2
- package/dist/types/components/navigation/SectionNav/SectionNav.parts.d.ts.map +1 -1
- package/dist/types/components/navigation/SectionNav/SectionNav.primary.d.ts +22 -4
- package/dist/types/components/navigation/SectionNav/SectionNav.primary.d.ts.map +1 -1
- package/dist/types/components/navigation/SectionNav/SectionNav.rail.d.ts.map +1 -1
- package/dist/types/components/navigation/SectionNav/SectionNav.sheet.d.ts.map +1 -1
- package/dist/types/components/navigation/SectionNav/SectionNav.types.d.ts +81 -5
- package/dist/types/components/navigation/SectionNav/SectionNav.types.d.ts.map +1 -1
- package/dist/types/components/navigation/SectionNav/__stories__/fixtures.d.ts +11 -1
- package/dist/types/components/navigation/SectionNav/__stories__/fixtures.d.ts.map +1 -1
- package/dist/types/components/navigation/SectionNav/index.d.ts +1 -1
- package/dist/types/components/navigation/SectionNav/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/navigation/SectionNav/SectionNav.bar.tsx +166 -90
- package/src/components/navigation/SectionNav/SectionNav.helpers.ts +16 -1
- package/src/components/navigation/SectionNav/SectionNav.md +40 -4
- package/src/components/navigation/SectionNav/SectionNav.parts.tsx +59 -1
- package/src/components/navigation/SectionNav/SectionNav.primary.tsx +107 -30
- package/src/components/navigation/SectionNav/SectionNav.rail.tsx +154 -41
- package/src/components/navigation/SectionNav/SectionNav.sheet.tsx +6 -2
- package/src/components/navigation/SectionNav/SectionNav.types.ts +82 -5
- package/src/components/navigation/SectionNav/__stories__/fixtures.tsx +21 -1
- package/src/components/navigation/SectionNav/index.ts +1 -0
- package/dist/chunk-32JMSHEA.js.map +0 -1
- package/dist/chunk-43Q6CVPB.js +0 -240
- package/dist/chunk-43Q6CVPB.js.map +0 -1
- package/dist/chunk-GLKQT2DS.js.map +0 -1
- package/dist/chunk-RX7J6VRI.js.map +0 -1
- package/dist/chunk-RZ4SBSLP.js +0 -62
- package/dist/chunk-RZ4SBSLP.js.map +0 -1
- package/dist/chunk-VHVI3D4R.js.map +0 -1
- /package/dist/{chunk-SA2ERYVV.js.map → chunk-5GQYTB3K.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;
|
|
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
|
-
/**
|
|
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
|
|
23
|
-
*
|
|
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":"
|
|
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;
|
|
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;
|
|
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
|
|
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
|
|
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
|
-
/**
|
|
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
|
-
/**
|
|
85
|
-
|
|
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
|
|
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;
|
|
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"}
|