@spaced-out/ui-design-system 0.6.37 → 0.6.39
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/.cspell/custom-words.txt +1 -0
- package/CHANGELOG.md +14 -0
- package/lib/components/ButtonDropdown/SimpleButtonDropdown.d.ts +9 -0
- package/lib/components/ButtonDropdown/SimpleButtonDropdown.d.ts.map +1 -1
- package/lib/components/ButtonDropdown/SimpleButtonDropdown.js +2 -0
- package/lib/components/Dropdown/SimpleDropdown.d.ts +9 -0
- package/lib/components/Dropdown/SimpleDropdown.d.ts.map +1 -1
- package/lib/components/Dropdown/SimpleDropdown.js +2 -0
- package/lib/components/InlineDropdown/SimpleInlineDropdown.d.ts +9 -0
- package/lib/components/InlineDropdown/SimpleInlineDropdown.d.ts.map +1 -1
- package/lib/components/InlineDropdown/SimpleInlineDropdown.js +2 -0
- package/lib/components/Menu/Menu.d.ts +2 -4
- package/lib/components/Menu/Menu.d.ts.map +1 -1
- package/lib/components/Menu/Menu.js +96 -77
- package/lib/components/Menu/Menu.module.css +24 -0
- package/lib/components/Menu/MenuOptionButton.d.ts +7 -14
- package/lib/components/Menu/MenuOptionButton.d.ts.map +1 -1
- package/lib/components/Menu/MenuOptionButton.js +26 -29
- package/lib/components/Menu/useMenuKeyboardNavigation.d.ts.map +1 -1
- package/lib/components/Menu/useMenuKeyboardNavigation.js +26 -4
- package/lib/components/Menu/useMenuTrigger.d.ts +4 -4
- package/lib/components/Menu/useMenuTrigger.d.ts.map +1 -1
- package/lib/components/Menu/useMenuTrigger.js +49 -9
- package/lib/components/OptionButton/SimpleOptionButton.d.ts +9 -0
- package/lib/components/OptionButton/SimpleOptionButton.d.ts.map +1 -1
- package/lib/components/OptionButton/SimpleOptionButton.js +2 -0
- package/lib/components/Typeahead/SimpleTypeahead.d.ts +9 -0
- package/lib/components/Typeahead/SimpleTypeahead.d.ts.map +1 -1
- package/lib/components/Typeahead/SimpleTypeahead.js +2 -0
- package/lib/utils/menu/menu.d.ts +10 -0
- package/lib/utils/menu/menu.d.ts.map +1 -1
- package/lib/utils/menu/menu.js +13 -8
- package/mcp/package.json +1 -1
- package/package.json +2 -2
package/.cspell/custom-words.txt
CHANGED
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,20 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [0.6.39](https://github.com/spaced-out/ui-design-system/compare/v0.6.38...v0.6.39) (2026-10-16)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **menu:** typeahead selection, Space in the field, and one highlight at a time ([#513](https://github.com/spaced-out/ui-design-system/issues/513)) ([06bc691](https://github.com/spaced-out/ui-design-system/commit/06bc691a6d266c03978305c0a5aa0fc92c4f7753))
|
|
11
|
+
|
|
12
|
+
### [0.6.38](https://github.com/spaced-out/ui-design-system/compare/v0.6.37...v0.6.38) (2026-10-01)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
* update moment timezone library ([#512](https://github.com/spaced-out/ui-design-system/issues/512)) ([a4792ff](https://github.com/spaced-out/ui-design-system/commit/a4792ff1f8593effb6475835b1d73eda8f7d556e))
|
|
18
|
+
|
|
5
19
|
### [0.6.37](https://github.com/spaced-out/ui-design-system/compare/v0.6.37-beta.0...v0.6.37) (2026-10-01)
|
|
6
20
|
|
|
7
21
|
### [0.6.37-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.6.36...v0.6.37-beta.0) (2026-09-29)
|
|
@@ -40,6 +40,15 @@ export interface SimpleButtonDropdownProps extends Omit<ButtonProps, 'elevation'
|
|
|
40
40
|
resolveLabel?: (option: MenuOption) => string | React.ReactNode;
|
|
41
41
|
resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;
|
|
42
42
|
clickAwayRef?: React.RefObject<ClickAwayRefType | null>;
|
|
43
|
+
/**
|
|
44
|
+
* Opt in to the accessibility behavior of the `ButtonDropdown` this renders: its
|
|
45
|
+
* ARIA roles and state, keyboard navigation of the options, and focus
|
|
46
|
+
* handling on close. Forwarded unchanged.
|
|
47
|
+
*
|
|
48
|
+
* Off by default, and off is this component exactly as it behaved before
|
|
49
|
+
* any of it existed.
|
|
50
|
+
*/
|
|
51
|
+
enableA11y?: boolean;
|
|
43
52
|
testId?: string;
|
|
44
53
|
}
|
|
45
54
|
export declare const SimpleButtonDropdown: Flow.AbstractComponent<SimpleButtonDropdownProps, SimpleButtonDropdownRef>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleButtonDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonDropdown/SimpleButtonDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACrE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAM3D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,8CAA8C,CAAC;AAE7E,OAAO,KAAK,EACV,UAAU,EACV,kBAAkB,EAClB,cAAc,EACf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,gBAAgB,EAAE,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAG5E,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH,MAAM,WAAW,uBAAuB;IACtC,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,yBACf,SAAQ,IAAI,CACV,WAAW,EACT,WAAW,GACX,YAAY,GACZ,gBAAgB,GAChB,SAAS,GACT,SAAS,GACT,gBAAgB,GAChB,aAAa,GACb,cAAc,GACd,oBAAoB,GACpB,QAAQ,GACR,QAAQ,GACR,gBAAgB,GAChB,kBAAkB,GAClB,WAAW,GACX,gBAAgB,GAChB,YAAY,GACZ,aAAa,GACb,cAAc,GACd,cAAc,GACd,uBAAuB,GACvB,cAAc,CACjB;IACD,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,CACf,MAAM,EAAE,UAAU,EAClB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B,CAAC;IACF,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChE,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACzE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;
|
|
1
|
+
{"version":3,"file":"SimpleButtonDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonDropdown/SimpleButtonDropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -34,6 +34,7 @@ const SimpleButtonDropdownBase = (props, ref) => {
|
|
|
34
34
|
clickAwayRef,
|
|
35
35
|
elevation = 'modal',
|
|
36
36
|
staticLabels,
|
|
37
|
+
enableA11y,
|
|
37
38
|
testId,
|
|
38
39
|
...buttonProps
|
|
39
40
|
} = props;
|
|
@@ -72,6 +73,7 @@ const SimpleButtonDropdownBase = (props, ref) => {
|
|
|
72
73
|
elevation: elevation,
|
|
73
74
|
onMenuClose: onMenuClose,
|
|
74
75
|
clickAwayRef: clickAwayRef,
|
|
76
|
+
enableA11y: enableA11y,
|
|
75
77
|
testId: testId,
|
|
76
78
|
menu: {
|
|
77
79
|
// TODO (Sharad): The isFluid prop here controls menu width unlike ButtonDropdown, and is independent from the isFluid prop in ButtonDropdown. There should be a way to set the isFluid prop of ButtonDropdown.
|
|
@@ -37,6 +37,15 @@ export interface SimpleDropdownProps extends Omit<InputProps, 'elevation' | 'cla
|
|
|
37
37
|
onMenuClose?: () => unknown;
|
|
38
38
|
resolveLabel?: (option: MenuOption) => string | React.ReactNode;
|
|
39
39
|
resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;
|
|
40
|
+
/**
|
|
41
|
+
* Opt in to the accessibility behavior of the `Dropdown` this renders: its
|
|
42
|
+
* ARIA roles and state, keyboard navigation of the options, and focus
|
|
43
|
+
* handling on close. Forwarded unchanged.
|
|
44
|
+
*
|
|
45
|
+
* Off by default, and off is this component exactly as it behaved before
|
|
46
|
+
* any of it existed.
|
|
47
|
+
*/
|
|
48
|
+
enableA11y?: boolean;
|
|
40
49
|
testId?: string;
|
|
41
50
|
}
|
|
42
51
|
export declare const SimpleDropdown: Flow.AbstractComponent<SimpleDropdownProps, SimpleDropdownRef>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/SimpleDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACrE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAO3D,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EACV,UAAU,EACV,kBAAkB,EAClB,cAAc,EACf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAG1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEH,MAAM,WAAW,iBAAiB;IAChC,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,mBACf,SAAQ,IAAI,CACV,UAAU,EACR,WAAW,GACX,YAAY,GACZ,cAAc,GACd,SAAS,GACT,gBAAgB,GAChB,aAAa,GACb,cAAc,GACd,aAAa,GACb,oBAAoB,GACpB,QAAQ,GACR,QAAQ,GACR,gBAAgB,GAChB,kBAAkB,GAClB,WAAW,GACX,cAAc,GACd,UAAU,GACV,YAAY,GACZ,aAAa,GACb,cAAc,GACd,uBAAuB,CAC1B;IACD,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACxD,OAAO,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B,CAAC;IACF,QAAQ,CAAC,EAAE,CACT,MAAM,EAAE,UAAU,EAClB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChE,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACzE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;
|
|
1
|
+
{"version":3,"file":"SimpleDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/SimpleDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACrE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAO3D,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EACV,UAAU,EACV,kBAAkB,EAClB,cAAc,EACf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAG1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEH,MAAM,WAAW,iBAAiB;IAChC,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,mBACf,SAAQ,IAAI,CACV,UAAU,EACR,WAAW,GACX,YAAY,GACZ,cAAc,GACd,SAAS,GACT,gBAAgB,GAChB,aAAa,GACb,cAAc,GACd,aAAa,GACb,oBAAoB,GACpB,QAAQ,GACR,QAAQ,GACR,gBAAgB,GAChB,kBAAkB,GAClB,WAAW,GACX,cAAc,GACd,UAAU,GACV,YAAY,GACZ,aAAa,GACb,cAAc,GACd,uBAAuB,CAC1B;IACD,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACxD,OAAO,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B,CAAC;IACF,QAAQ,CAAC,EAAE,CACT,MAAM,EAAE,UAAU,EAClB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChE,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACzE;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAiHD,eAAO,MAAM,cAAc,EAAE,IAAI,CAAC,iBAAiB,CACjD,mBAAmB,EACnB,iBAAiB,CAGlB,CAAC"}
|
|
@@ -33,6 +33,7 @@ const SimpleDropdownBase = (props, ref) => {
|
|
|
33
33
|
clickAwayRef,
|
|
34
34
|
allowWrap = false,
|
|
35
35
|
staticLabels,
|
|
36
|
+
enableA11y,
|
|
36
37
|
testId,
|
|
37
38
|
...inputProps
|
|
38
39
|
} = props;
|
|
@@ -72,6 +73,7 @@ const SimpleDropdownBase = (props, ref) => {
|
|
|
72
73
|
onMenuClose: onMenuClose,
|
|
73
74
|
dropdownInputText: dropdownInputText,
|
|
74
75
|
clickAwayRef: clickAwayRef,
|
|
76
|
+
enableA11y: enableA11y,
|
|
75
77
|
testId: testId,
|
|
76
78
|
menu: {
|
|
77
79
|
options,
|
|
@@ -33,6 +33,15 @@ export interface SimpleInlineDropdownProps extends Omit<ButtonProps, 'elevation'
|
|
|
33
33
|
resolveLabel?: (option: MenuOption) => string | React.ReactNode;
|
|
34
34
|
resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;
|
|
35
35
|
clickAwayRef?: React.RefObject<ClickAwayRefType | null>;
|
|
36
|
+
/**
|
|
37
|
+
* Opt in to the accessibility behavior of the `InlineDropdown` this renders: its
|
|
38
|
+
* ARIA roles and state, keyboard navigation of the options, and focus
|
|
39
|
+
* handling on close. Forwarded unchanged.
|
|
40
|
+
*
|
|
41
|
+
* Off by default, and off is this component exactly as it behaved before
|
|
42
|
+
* any of it existed.
|
|
43
|
+
*/
|
|
44
|
+
enableA11y?: boolean;
|
|
36
45
|
testId?: string;
|
|
37
46
|
}
|
|
38
47
|
export declare const SimpleInlineDropdown: Flow.AbstractComponent<SimpleInlineDropdownProps, SimpleInlineDropdownRef>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleInlineDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/InlineDropdown/SimpleInlineDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACrE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAM3D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EACV,UAAU,EACV,kBAAkB,EAClB,cAAc,EACf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAG1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAEH,MAAM,WAAW,uBAAuB;IACtC,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,yBACf,SAAQ,IAAI,CACV,WAAW,EACT,WAAW,GACX,YAAY,GACZ,gBAAgB,GAChB,SAAS,GACT,gBAAgB,GAChB,aAAa,GACb,cAAc,GACd,kBAAkB,GAClB,WAAW,GACX,gBAAgB,GAChB,YAAY,GACZ,aAAa,GACb,oBAAoB,GACpB,QAAQ,GACR,QAAQ,GACR,gBAAgB,GAChB,cAAc,GACd,uBAAuB,GACvB,cAAc,GACd,QAAQ,CACX;IACD,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,CACf,MAAM,EAAE,UAAU,EAClB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC;IAC5B,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChE,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACzE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;
|
|
1
|
+
{"version":3,"file":"SimpleInlineDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/InlineDropdown/SimpleInlineDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACrE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAM3D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EACV,UAAU,EACV,kBAAkB,EAClB,cAAc,EACf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAG1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAEH,MAAM,WAAW,uBAAuB;IACtC,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,yBACf,SAAQ,IAAI,CACV,WAAW,EACT,WAAW,GACX,YAAY,GACZ,gBAAgB,GAChB,SAAS,GACT,gBAAgB,GAChB,aAAa,GACb,cAAc,GACd,kBAAkB,GAClB,WAAW,GACX,gBAAgB,GAChB,YAAY,GACZ,aAAa,GACb,oBAAoB,GACpB,QAAQ,GACR,QAAQ,GACR,gBAAgB,GAChB,cAAc,GACd,uBAAuB,GACvB,cAAc,GACd,QAAQ,CACX;IACD,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,CACf,MAAM,EAAE,UAAU,EAClB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC;IAC5B,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChE,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACzE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACxD;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAkHD,eAAO,MAAM,oBAAoB,EAAE,IAAI,CAAC,iBAAiB,CACvD,yBAAyB,EACzB,uBAAuB,CAGxB,CAAC"}
|
|
@@ -33,6 +33,7 @@ const SimpleInlineDropdownBase = (props, ref) => {
|
|
|
33
33
|
clickAwayRef,
|
|
34
34
|
allowWrap = false,
|
|
35
35
|
elevation = 'modal',
|
|
36
|
+
enableA11y,
|
|
36
37
|
testId,
|
|
37
38
|
...buttonProps
|
|
38
39
|
} = props;
|
|
@@ -72,6 +73,7 @@ const SimpleInlineDropdownBase = (props, ref) => {
|
|
|
72
73
|
onMenuClose: onMenuClose,
|
|
73
74
|
clickAwayRef: clickAwayRef,
|
|
74
75
|
elevation: elevation,
|
|
76
|
+
enableA11y: enableA11y,
|
|
75
77
|
testId: testId,
|
|
76
78
|
menu: {
|
|
77
79
|
isFluid,
|
|
@@ -162,14 +162,12 @@ export interface MenuProps extends BaseMenuProps, MenuOptionTypes {
|
|
|
162
162
|
}
|
|
163
163
|
export interface RenderOptionProps extends Omit<MenuProps, 'searchText'> {
|
|
164
164
|
searchText?: string;
|
|
165
|
-
/** Pointer-activation handler threaded down to each MenuOptionButton. */
|
|
166
|
-
onPointerActivate?: (key: string, el: HTMLElement, clientX: number, clientY: number) => void;
|
|
167
165
|
/** Handle on the virtual list, so Menu can scroll the active option into view. */
|
|
168
166
|
listRef?: React.RefCallback<VirtualList>;
|
|
169
|
-
/** Key the pointer most recently highlighted — keeps the focus ring off it. */
|
|
170
|
-
pointerActiveKey?: string | null;
|
|
171
167
|
/** Withhold the opening highlight until the user drives the menu themselves. */
|
|
172
168
|
suppressInitialHighlight?: boolean;
|
|
169
|
+
/** Whether the pointer is driving — drops the active option's tint. */
|
|
170
|
+
pointerDriving?: boolean;
|
|
173
171
|
/** Whether focus is inside the menu — a roving highlight is only drawn then. */
|
|
174
172
|
menuHasFocus?: boolean;
|
|
175
173
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACL,aAAa,EAEb,gBAAgB,EACjB,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -27,6 +27,11 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
27
27
|
|
|
28
28
|
// Render first available option set
|
|
29
29
|
|
|
30
|
+
/*
|
|
31
|
+
* Keys that mean "the keyboard is navigating this menu", as opposed to typing
|
|
32
|
+
* into it. Pressing one reveals the focus ring and quiets a parked pointer.
|
|
33
|
+
*/
|
|
34
|
+
const RING_REVEALING_KEYS = new Set(['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown']);
|
|
30
35
|
const menuSizeMedium = 276,
|
|
31
36
|
menuSizeSmall = 228;
|
|
32
37
|
const buttonSizeMedium = 40,
|
|
@@ -770,9 +775,6 @@ const Menu = exports.Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
770
775
|
// key while moving its row — a key-only guard would leave the highlight
|
|
771
776
|
// stranded off-screen with `aria-activedescendant` pointing at nothing.
|
|
772
777
|
const lastScrolledKeyRef = React.useRef(null);
|
|
773
|
-
// Which option the pointer last highlighted. State (not a ref) because the
|
|
774
|
-
// focus ring is rendered from it and has to repaint when it changes.
|
|
775
|
-
const [pointerActiveKey, setPointerActiveKey] = React.useState(null);
|
|
776
778
|
// Exactly the rows react-window renders, in its order. Disabled options ARE
|
|
777
779
|
// included, because they still occupy a row.
|
|
778
780
|
//
|
|
@@ -827,9 +829,6 @@ const Menu = exports.Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
827
829
|
const generatedMenuId = React.useId();
|
|
828
830
|
const resolvedMenuId = menuId ?? generatedMenuId;
|
|
829
831
|
const containerRef = React.useRef(null);
|
|
830
|
-
// Last pointer position seen by an option's mousemove — used to ignore
|
|
831
|
-
// scroll-under-stationary-cursor moves so hover doesn't fight the keyboard.
|
|
832
|
-
const lastPointerRef = React.useRef(null);
|
|
833
832
|
const [internalActiveKey, setInternalActiveKey] = React.useState(() => getInitialActiveOptionKey(props));
|
|
834
833
|
|
|
835
834
|
/*
|
|
@@ -854,7 +853,32 @@ const Menu = exports.Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
854
853
|
* holds focus by design, and this highlight is the only cursor the user has.
|
|
855
854
|
*/
|
|
856
855
|
const [menuHasFocus, setMenuHasFocus] = React.useState(false);
|
|
857
|
-
|
|
856
|
+
|
|
857
|
+
/*
|
|
858
|
+
* The ring waits for the keyboard to NAVIGATE, so a menu looks the same the
|
|
859
|
+
* instant it opens however it was opened — the keypress that opened it does
|
|
860
|
+
* not count, only the one after. Until then the active option carries the
|
|
861
|
+
* background tint alone, which says "Enter lands here" without claiming a
|
|
862
|
+
* keyboard cursor the user has not placed yet.
|
|
863
|
+
*/
|
|
864
|
+
const [suppressInitialHighlight, setSuppressInitialHighlight] = React.useState(true);
|
|
865
|
+
/*
|
|
866
|
+
* Which input is driving the menu, which is what decides the marks it shows.
|
|
867
|
+
*
|
|
868
|
+
* `'none'` — just opened. The active option carries its background tint so
|
|
869
|
+
* the user can see where Enter lands, and the pointer hovers normally.
|
|
870
|
+
*
|
|
871
|
+
* `'keyboard'` — a navigation key has fired. The ring joins the tint on the
|
|
872
|
+
* active option, and `:hover` is muted on every other row: a mouse left
|
|
873
|
+
* sitting over one keeps matching `:hover`, so arrowing away would otherwise
|
|
874
|
+
* leave two tinted rows and nothing to say which one Enter takes.
|
|
875
|
+
*
|
|
876
|
+
* `'pointer'` — the pointer has actually MOVED over the menu. The active
|
|
877
|
+
* option's tint is dropped, because the hovered row is the one being read
|
|
878
|
+
* and a second fixed tint on the opening row is only noise.
|
|
879
|
+
*/
|
|
880
|
+
const [inputDriver, setInputDriver] = React.useState('none');
|
|
881
|
+
const lastPointerRef = React.useRef(null);
|
|
858
882
|
// Primed by the trigger hooks before the popup exists; primed here too for a
|
|
859
883
|
// Menu opened by a trigger that does not use them.
|
|
860
884
|
React.useEffect(() => {
|
|
@@ -868,26 +892,41 @@ const Menu = exports.Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
868
892
|
const activeOptionKey = externalKeyboardNav ? controlledActiveOptionKey ?? null : internalActiveKey;
|
|
869
893
|
const setActiveOptionKey = externalKeyboardNav ? onActiveOptionKeyChange ?? (() => undefined) : setInternalActiveKey;
|
|
870
894
|
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
895
|
+
/*
|
|
896
|
+
* Reveal the ring on the first NAVIGATION key after the menu opened, and
|
|
897
|
+
* quiet the pointer at the same moment.
|
|
898
|
+
*
|
|
899
|
+
* A document listener, because a combobox's keys land on the trigger input
|
|
900
|
+
* OUTSIDE this component and never reach the card's own handler. Attached on
|
|
901
|
+
* mount, which is exactly what makes the opening keypress not count: that
|
|
902
|
+
* event was dispatched before this listener existed, so a keyboard-opened
|
|
903
|
+
* menu and a mouse-opened one look identical until the user navigates.
|
|
904
|
+
*
|
|
905
|
+
* Only navigation keys. Typing filters a list, it does not move a cursor
|
|
906
|
+
* through it, so a Typeahead keeps the plain tint while the user is still
|
|
907
|
+
* narrowing the options down.
|
|
908
|
+
*
|
|
909
|
+
* Popups only. An inline Menu has no trigger outside itself, so the only
|
|
910
|
+
* keyboard that should reveal its ring is the one pressed inside it (the
|
|
911
|
+
* card's own onKeyDown below), not an arrow key meant for the page.
|
|
912
|
+
*/
|
|
885
913
|
const isPopup = Boolean(initialFocusRef || externalKeyboardNav);
|
|
886
914
|
React.useEffect(() => {
|
|
887
|
-
if (isPopup
|
|
888
|
-
|
|
915
|
+
if (!enableA11y || !isPopup || typeof document === 'undefined') {
|
|
916
|
+
return;
|
|
889
917
|
}
|
|
890
|
-
|
|
918
|
+
const onDocumentKeyDown = event => {
|
|
919
|
+
if (!RING_REVEALING_KEYS.has(event.key)) {
|
|
920
|
+
return;
|
|
921
|
+
}
|
|
922
|
+
setSuppressInitialHighlight(false);
|
|
923
|
+
setInputDriver('keyboard');
|
|
924
|
+
};
|
|
925
|
+
document.addEventListener('keydown', onDocumentKeyDown, true);
|
|
926
|
+
return () => {
|
|
927
|
+
document.removeEventListener('keydown', onDocumentKeyDown, true);
|
|
928
|
+
};
|
|
929
|
+
}, [enableA11y, isPopup]);
|
|
891
930
|
|
|
892
931
|
// Keep the roving tab stop valid as the rendered option set changes
|
|
893
932
|
// (search filtering, async options, etc.). Skipped under external nav —
|
|
@@ -1111,50 +1150,6 @@ const Menu = exports.Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
1111
1150
|
});
|
|
1112
1151
|
const activeDescendantId = allowSearch && activeOptionKey ? (0, _menuOptionId.menuOptionId)(resolvedMenuId, activeOptionKey) : undefined;
|
|
1113
1152
|
|
|
1114
|
-
// Hovering an option makes it the single active highlight, so pointer and
|
|
1115
|
-
// keyboard never diverge. In roving mode focus follows the pointer too, so
|
|
1116
|
-
// arrow-key navigation resumes from wherever the mouse last was and the
|
|
1117
|
-
// previously focused option's highlight clears. Search / external-combobox
|
|
1118
|
-
// modes keep DOM focus on the input and only move the active descendant.
|
|
1119
|
-
const handleOptionPointerActivate = (key, el, clientX, clientY) => {
|
|
1120
|
-
// Ignore moves with no real pointer delta — e.g. the list scrolling under
|
|
1121
|
-
// a stationary cursor during keyboard nav fires mousemove with unchanged
|
|
1122
|
-
// viewport coordinates. Acting on those would steal focus from the
|
|
1123
|
-
// keyboard / fight the arrow keys.
|
|
1124
|
-
const last = lastPointerRef.current;
|
|
1125
|
-
if (last && last.x === clientX && last.y === clientY) {
|
|
1126
|
-
return;
|
|
1127
|
-
}
|
|
1128
|
-
lastPointerRef.current = {
|
|
1129
|
-
x: clientX,
|
|
1130
|
-
y: clientY
|
|
1131
|
-
};
|
|
1132
|
-
// The row is already under the cursor, so it must not be scrolled to.
|
|
1133
|
-
// Claiming it here makes the virtual-scroll effect treat it as handled —
|
|
1134
|
-
// otherwise hovering a partially clipped edge row would nudge the list
|
|
1135
|
-
// under a stationary mouse and shift every row out from under it.
|
|
1136
|
-
lastScrolledKeyRef.current = `${key}:${virtualLayout?.rowIndexByKey.get(key) ?? '?'}`;
|
|
1137
|
-
setPointerActiveKey(key);
|
|
1138
|
-
// Hovering an option IS the user picking it out, so show the highlight
|
|
1139
|
-
// even though the menu was opened by mouse.
|
|
1140
|
-
setSuppressInitialHighlight(false);
|
|
1141
|
-
setActiveOptionKey(key);
|
|
1142
|
-
// Roving mode only: move real focus so the keyboard cursor / tab stop
|
|
1143
|
-
// follows the pointer. Search & external-combobox keep focus on the input.
|
|
1144
|
-
// Gate on focus ALREADY being inside the menu so an inline menu (or a
|
|
1145
|
-
// consumer like TokenListInput, where the user types in an external input
|
|
1146
|
-
// and the menu is just a mouse target) is never robbed of its focus by a
|
|
1147
|
-
// stray hover.
|
|
1148
|
-
if (!allowSearch && !externalKeyboardNav) {
|
|
1149
|
-
const container = containerRef.current;
|
|
1150
|
-
if (container && typeof document !== 'undefined' && container.contains(document.activeElement)) {
|
|
1151
|
-
el.focus({
|
|
1152
|
-
preventScroll: true
|
|
1153
|
-
});
|
|
1154
|
-
}
|
|
1155
|
-
}
|
|
1156
|
-
};
|
|
1157
|
-
|
|
1158
1153
|
// Close when focus leaves the menu entirely (e.g. Tab past the footer or
|
|
1159
1154
|
// Shift+Tab before the header). Internal moves between the search input,
|
|
1160
1155
|
// options, header and footer keep focus inside, so they don't close.
|
|
@@ -1249,11 +1244,9 @@ const Menu = exports.Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
1249
1244
|
// as the open-time fallback when no option is focusable (all disabled).
|
|
1250
1245
|
tabIndex: enableA11y ? -1 : undefined,
|
|
1251
1246
|
onKeyDown: enableA11y ? event => {
|
|
1252
|
-
//
|
|
1253
|
-
//
|
|
1254
|
-
|
|
1255
|
-
// would show no focus.
|
|
1256
|
-
setPointerActiveKey(null);
|
|
1247
|
+
// A key press means the keyboard is driving, so a pointer left
|
|
1248
|
+
// parked over a row must stop tinting it.
|
|
1249
|
+
setInputDriver('keyboard');
|
|
1257
1250
|
// A key press means the keyboard is driving, so the opening
|
|
1258
1251
|
// highlight is now wanted even if the key did not move the
|
|
1259
1252
|
// active option (Home on the first option, say).
|
|
@@ -1277,6 +1270,8 @@ const Menu = exports.Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
1277
1270
|
// layout and the card's overflow — so nothing restyles a menu that
|
|
1278
1271
|
// has not opted in.
|
|
1279
1272
|
[_MenuModule.default.menuCardA11y]: enableA11y,
|
|
1273
|
+
// Mutes `:hover` while the keyboard drives — see `inputDriver`.
|
|
1274
|
+
[_MenuModule.default.pointerQuiet]: enableA11y && inputDriver === 'keyboard',
|
|
1280
1275
|
[_MenuModule.default.menuCardTopPaddingZero]: header,
|
|
1281
1276
|
[_MenuModule.default.menuCardBottomPaddingZero]: footer,
|
|
1282
1277
|
// Whatever scrolls the options, the card must not scroll too —
|
|
@@ -1290,6 +1285,32 @@ const Menu = exports.Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
1290
1285
|
maxHeight: cardMaxHeight ? cardMaxHeight + 'px' : ''
|
|
1291
1286
|
},
|
|
1292
1287
|
ref: (0, _mergeRefs.mergeRefs)([ref, containerRef]),
|
|
1288
|
+
onMouseMove: enableA11y ? event => {
|
|
1289
|
+
// Only a REAL move wakes hover back up. Scrolling the list under
|
|
1290
|
+
// a stationary cursor fires mousemove with unchanged viewport
|
|
1291
|
+
// coordinates, and treating that as pointer intent would hand
|
|
1292
|
+
// the tint straight back mid keyboard-navigation.
|
|
1293
|
+
const last = lastPointerRef.current;
|
|
1294
|
+
const moved = !last || last.x !== event.clientX || last.y !== event.clientY;
|
|
1295
|
+
lastPointerRef.current = {
|
|
1296
|
+
x: event.clientX,
|
|
1297
|
+
y: event.clientY
|
|
1298
|
+
};
|
|
1299
|
+
if (!moved) {
|
|
1300
|
+
return;
|
|
1301
|
+
}
|
|
1302
|
+
setInputDriver('pointer');
|
|
1303
|
+
/*
|
|
1304
|
+
* The pointer is driving again, so the keyboard's ring stands
|
|
1305
|
+
* down. Without this it stays parked on the row the keyboard
|
|
1306
|
+
* left while `:hover` tints whichever row the mouse is over —
|
|
1307
|
+
* two highlights, and nothing to say which one Enter takes. The
|
|
1308
|
+
* next navigation key reveals it again, on the row it moves to.
|
|
1309
|
+
*/
|
|
1310
|
+
if (!suppressInitialHighlight) {
|
|
1311
|
+
setSuppressInitialHighlight(true);
|
|
1312
|
+
}
|
|
1313
|
+
} : undefined,
|
|
1293
1314
|
"data-testid": (0, _qa.generateTestId)({
|
|
1294
1315
|
base: testId,
|
|
1295
1316
|
slot: 'wrapper'
|
|
@@ -1336,9 +1357,8 @@ const Menu = exports.Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
1336
1357
|
testId: testId,
|
|
1337
1358
|
menuId: resolvedMenuId,
|
|
1338
1359
|
activeOptionKey: activeOptionKey,
|
|
1339
|
-
onPointerActivate: handleOptionPointerActivate,
|
|
1340
|
-
pointerActiveKey: pointerActiveKey,
|
|
1341
1360
|
suppressInitialHighlight: suppressInitialHighlight,
|
|
1361
|
+
pointerDriving: inputDriver === 'pointer',
|
|
1342
1362
|
menuHasFocus: menuHasFocus,
|
|
1343
1363
|
listRef: setVirtualList
|
|
1344
1364
|
})
|
|
@@ -1348,9 +1368,8 @@ const Menu = exports.Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
1348
1368
|
testId: testId,
|
|
1349
1369
|
menuId: resolvedMenuId,
|
|
1350
1370
|
activeOptionKey: activeOptionKey,
|
|
1351
|
-
onPointerActivate: handleOptionPointerActivate,
|
|
1352
|
-
pointerActiveKey: pointerActiveKey,
|
|
1353
1371
|
suppressInitialHighlight: suppressInitialHighlight,
|
|
1372
|
+
pointerDriving: inputDriver === 'pointer',
|
|
1354
1373
|
menuHasFocus: menuHasFocus,
|
|
1355
1374
|
listRef: setVirtualList
|
|
1356
1375
|
}), hasFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
@@ -482,3 +482,27 @@
|
|
|
482
482
|
top: spaceNone;
|
|
483
483
|
border-top: borderWidthPrimary solid colorBorderPrimary;
|
|
484
484
|
}
|
|
485
|
+
|
|
486
|
+
/*
|
|
487
|
+
* While the keyboard is driving, a pointer left sitting over a row must stop
|
|
488
|
+
* tinting it. Without this, arrowing away from where the mouse happens to rest
|
|
489
|
+
* leaves two tinted rows and nothing to say which one Enter takes. The active
|
|
490
|
+
* row is exempt — that tint is the answer to exactly that question — and a real
|
|
491
|
+
* pointer move clears the class, so hover comes straight back.
|
|
492
|
+
*/
|
|
493
|
+
.menuCardA11y.pointerQuiet .option:hover:not(.active) {
|
|
494
|
+
background: none;
|
|
495
|
+
color: colorTextSecondary;
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
/*
|
|
499
|
+
* Inside the opt-in the ring has exactly one source: `.activeRing`. The
|
|
500
|
+
* browser's own keyboard-focus ring has to stand down, or a roving menu opened
|
|
501
|
+
* with ArrowDown would paint one on the option it focuses itself on — before the
|
|
502
|
+
* user has navigated anywhere, and only when opened by keyboard, so the same
|
|
503
|
+
* menu would look different depending on how it was opened. Rows that DO carry
|
|
504
|
+
* `.activeRing` are left alone, so this never cancels the real ring.
|
|
505
|
+
*/
|
|
506
|
+
.menuCardA11y .option:focus-visible:not(.activeRing) {
|
|
507
|
+
box-shadow: none;
|
|
508
|
+
}
|
|
@@ -16,23 +16,16 @@ export interface MenuOptionProps extends Omit<BaseMenuProps, 'option' | 'isLastI
|
|
|
16
16
|
/** 1-based position — set for virtualized lists (windowed DOM hides the rest). */
|
|
17
17
|
posInSet?: number;
|
|
18
18
|
/**
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
19
|
+
* Whether the keyboard has yet to navigate this menu. True from the moment it
|
|
20
|
+
* opens, however it was opened, and cleared by the first navigation key — so
|
|
21
|
+
* it gates the focus RING, not the background tint.
|
|
22
22
|
*/
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* Key of the option the POINTER most recently highlighted. Used to keep the
|
|
26
|
-
* focus ring off a highlight the mouse created, while the background tint still
|
|
27
|
-
* follows the pointer.
|
|
28
|
-
*/
|
|
29
|
-
pointerActiveKey?: string | null;
|
|
23
|
+
suppressInitialHighlight?: boolean;
|
|
30
24
|
/**
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
* as soon as they move the active option themselves.
|
|
25
|
+
* Whether the POINTER is driving the menu. The active option's tint is dropped
|
|
26
|
+
* while it is, so a cursor moving down the list is the only mark on screen.
|
|
34
27
|
*/
|
|
35
|
-
|
|
28
|
+
pointerDriving?: boolean;
|
|
36
29
|
/**
|
|
37
30
|
* Whether focus is inside the menu. A roving menu's highlight IS its DOM
|
|
38
31
|
* focus, so it must not be drawn once focus has moved elsewhere on the page —
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuOptionButton.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuOptionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AASzC,OAAO,KAAK,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,0BAA0B,CAAC;AASxE,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,YAAY,GAAG,OAAO,CAAC;IAC9D,MAAM,EAAE,UAAU,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAClC,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,
|
|
1
|
+
{"version":3,"file":"MenuOptionButton.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuOptionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AASzC,OAAO,KAAK,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,0BAA0B,CAAC;AASxE,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,YAAY,GAAG,OAAO,CAAC;IAC9D,MAAM,EAAE,UAAU,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAClC,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAcD,eAAO,MAAM,gBAAgB,GAAI,OAAO,eAAe,sBAyStD,CAAC"}
|
|
@@ -59,9 +59,8 @@ const MenuOptionButton = props => {
|
|
|
59
59
|
externalKeyboardNav = false,
|
|
60
60
|
setSize,
|
|
61
61
|
posInSet,
|
|
62
|
-
onPointerActivate,
|
|
63
|
-
pointerActiveKey,
|
|
64
62
|
suppressInitialHighlight = false,
|
|
63
|
+
pointerDriving = false,
|
|
65
64
|
menuHasFocus = false,
|
|
66
65
|
testId
|
|
67
66
|
} = props;
|
|
@@ -99,23 +98,32 @@ const MenuOptionButton = props => {
|
|
|
99
98
|
const isRoving = activeOptionKey !== undefined;
|
|
100
99
|
// `isActive` still drives the roving tab stop and aria-activedescendant — the
|
|
101
100
|
// menu always has an active option so the keyboard has somewhere to start.
|
|
102
|
-
// `showHighlight` is the visible half of it
|
|
103
|
-
// option is active is that the menu just opened under the mouse.
|
|
101
|
+
// `showHighlight` below is the visible half of it.
|
|
104
102
|
const isActive = isRoving && activeOptionKey === key;
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
103
|
+
/*
|
|
104
|
+
* Two marks, two meanings. Both need the menu to be drivable at all, which
|
|
105
|
+
* under roving focus means focus is inside it; `externalKeyboardNav` satisfies
|
|
106
|
+
* that on its own, since there the input holding focus lives outside this DOM.
|
|
107
|
+
*
|
|
108
|
+
* `showHighlight` is the BACKGROUND tint on the active option — the row Enter
|
|
109
|
+
* would take. It is drawn from the moment the menu opens, however it was
|
|
110
|
+
* opened, so Enter never has a target the user cannot see. It deliberately
|
|
111
|
+
* looks like the hover tint: that reads as "this row is queued up" rather than
|
|
112
|
+
* as a keyboard cursor nobody placed. It is dropped once the POINTER is
|
|
113
|
+
* driving, where the hovered row is the one being read and a second fixed tint
|
|
114
|
+
* would just be noise.
|
|
115
|
+
*
|
|
116
|
+
* `showActiveRing` is the FOCUS RING, and it means something stronger: the
|
|
117
|
+
* keyboard is driving. So it waits for a navigation key — the keypress that
|
|
118
|
+
* opened the menu does not count, which is what makes a keyboard-opened menu
|
|
119
|
+
* and a mouse-opened one look alike until the user actually navigates.
|
|
120
|
+
*
|
|
121
|
+
* Both modes share this. Under roving the ring also marks real DOM focus, and
|
|
122
|
+
* withholding it until then is still safe for WCAG 2.4.7: the tint is itself a
|
|
123
|
+
* visible indicator on the row holding focus, so focus is never unmarked.
|
|
124
|
+
*/
|
|
125
|
+
const showHighlight = isActive && (externalKeyboardNav || menuHasFocus) && !pointerDriving;
|
|
126
|
+
const showActiveRing = showHighlight && !suppressInitialHighlight;
|
|
119
127
|
// The option is a real tab stop only under true roving focus. Under search or
|
|
120
128
|
// external combobox nav, focus stays on the input — every option is -1 and the
|
|
121
129
|
// active one is surfaced through the input's aria-activedescendant instead.
|
|
@@ -175,17 +183,6 @@ const MenuOptionButton = props => {
|
|
|
175
183
|
// move focus at all (an inline menu must not steal it).
|
|
176
184
|
,
|
|
177
185
|
autoFocus: !enableA11y && selectedOption?.key === key,
|
|
178
|
-
onMouseMove: e => {
|
|
179
|
-
// Pointer drives the same single active highlight as the keyboard.
|
|
180
|
-
// Guarded so it only fires when crossing into a different option. The
|
|
181
|
-
// cursor coordinates are forwarded so Menu can ignore moves with no real
|
|
182
|
-
// pointer delta (the list scrolling under a stationary cursor during
|
|
183
|
-
// keyboard nav), which would otherwise steal focus from the keyboard.
|
|
184
|
-
if (!enableA11y || isOptionDisabled || isActive) {
|
|
185
|
-
return;
|
|
186
|
-
}
|
|
187
|
-
onPointerActivate?.(key, e.currentTarget, e.clientX, e.clientY);
|
|
188
|
-
},
|
|
189
186
|
testId: (0, _qa.generateTestId)({
|
|
190
187
|
base: optionTestId || testId,
|
|
191
188
|
slot: 'option-button',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMenuKeyboardNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/useMenuKeyboardNavigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,kBAAkB,GAAG,QAAQ,CAAC;AAE1E,oEAAoE;AACpE,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAaD,UAAU,6BAA6B;IACrC,8EAA8E;IAC9E,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAClD,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uEAAuE;IACvE,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,mFAAmF;IACnF,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,+EAA+E;IAC/E,kBAAkB,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;;;OAOG;IACH,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;CAClC;AAkDD;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAClC,MAAM,WAAW,GAAG,IAAI,EACxB,QAAQ,QAAQ,GAAG,QAAQ,KAC1B,WAAW,EAUb,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAChC,MAAM,WAAW,GAAG,IAAI,EACxB,UAAU,OAAO,KAChB,OAYF,CAAC;
|
|
1
|
+
{"version":3,"file":"useMenuKeyboardNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/useMenuKeyboardNavigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,kBAAkB,GAAG,QAAQ,CAAC;AAE1E,oEAAoE;AACpE,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAaD,UAAU,6BAA6B;IACrC,8EAA8E;IAC9E,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAClD,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uEAAuE;IACvE,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,mFAAmF;IACnF,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,+EAA+E;IAC/E,kBAAkB,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;;;OAOG;IACH,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;CAClC;AAkDD;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAClC,MAAM,WAAW,GAAG,IAAI,EACxB,QAAQ,QAAQ,GAAG,QAAQ,KAC1B,WAAW,EAUb,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAChC,MAAM,WAAW,GAAG,IAAI,EACxB,UAAU,OAAO,KAChB,OAYF,CAAC;AAiCF,eAAO,MAAM,yBAAyB,GAAI,6HAUvC,6BAA6B,KAAG;IACjC,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAwY9D,CAAC"}
|
|
@@ -115,7 +115,19 @@ const moveFocusToMenuChrome = (menu, shiftKey) => {
|
|
|
115
115
|
target.focus();
|
|
116
116
|
return true;
|
|
117
117
|
};
|
|
118
|
+
|
|
119
|
+
/*
|
|
120
|
+
* `<input>` types that are buttons or pickers rather than text fields. These
|
|
121
|
+
* hold no caret, so Space and the cursor-motion keys are not theirs.
|
|
122
|
+
*/
|
|
118
123
|
exports.moveFocusToMenuChrome = moveFocusToMenuChrome;
|
|
124
|
+
const NON_TEXT_INPUT_TYPES = new Set(['button', 'checkbox', 'color', 'file', 'image', 'radio', 'range', 'reset', 'submit']);
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Whether the element is a text-entry field — one holding a caret that owns
|
|
128
|
+
* Space (it types) and Home/End/Cmd+Arrow (they move the cursor).
|
|
129
|
+
*/
|
|
130
|
+
const isTextEntryElement = el => el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement && !NON_TEXT_INPUT_TYPES.has(el.type);
|
|
119
131
|
const isPrintableCharacter = event => event.key.length === 1 && event.key !== ' ' && !event.altKey && !event.ctrlKey && !event.metaKey;
|
|
120
132
|
const useMenuKeyboardNavigation = _ref => {
|
|
121
133
|
let {
|
|
@@ -312,10 +324,20 @@ const useMenuKeyboardNavigation = _ref => {
|
|
|
312
324
|
}
|
|
313
325
|
const movesFocus = mode === 'roving';
|
|
314
326
|
const hasSearchField = mode === 'search';
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
327
|
+
/*
|
|
328
|
+
* Space (it types) and Home/End/Cmd+Arrow (they move the cursor) belong to
|
|
329
|
+
* the caret only while the caret HAS focus — but ANY text field counts, not
|
|
330
|
+
* just the menu's own search box. An editable combobox keeps focus on its
|
|
331
|
+
* trigger input, which lives OUTSIDE this menu and so carries no
|
|
332
|
+
* `data-menu-search`; treating that as list navigation made Space select the
|
|
333
|
+
* highlighted option instead of typing one, which left a query with a space
|
|
334
|
+
* in it impossible to type.
|
|
335
|
+
*
|
|
336
|
+
* The one `'search'` case that is not a text field is a searchable menu's
|
|
337
|
+
* virtualized listbox, itself a tab stop: once focus is on the list, these
|
|
338
|
+
* keys move the highlight like any listbox.
|
|
339
|
+
*/
|
|
340
|
+
const caretOwnsKeys = hasSearchField && isTextEntryElement(focused);
|
|
319
341
|
const labelAt = index => windowed ? (options[index].label ?? '').trim().toLowerCase() : (els[index].textContent ?? '').trim().toLowerCase();
|
|
320
342
|
const moveWindowed = index => {
|
|
321
343
|
const key = options[index].key;
|
|
@@ -95,10 +95,10 @@ export declare const useMenuTrigger: ({ enabled, id, menuId: consumerMenuId, ari
|
|
|
95
95
|
* - `select` — a read-only field standing in for a `<select>`. An option is
|
|
96
96
|
* highlighted as soon as the list opens, Space selects it (the field has no
|
|
97
97
|
* typing role), and Enter or Space opens the list in the first place.
|
|
98
|
-
* - `autocomplete` — an editable field that filters the list as you type.
|
|
99
|
-
*
|
|
100
|
-
*
|
|
101
|
-
*
|
|
98
|
+
* - `autocomplete` — an editable field that filters the list as you type. The
|
|
99
|
+
* best match is highlighted for the user as the list narrows under them (APG
|
|
100
|
+
* calls this automatic selection), so Enter takes it without arrowing to it
|
|
101
|
+
* first. Space types a space, and only the arrow keys open the list.
|
|
102
102
|
*/
|
|
103
103
|
export type ComboboxPattern = 'select' | 'autocomplete';
|
|
104
104
|
export interface UseComboboxMenuTriggerArgs {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMenuTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/useMenuTrigger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"useMenuTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/useMenuTrigger.ts"],"names":[],"mappings":"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"}
|
|
@@ -21,6 +21,9 @@ const compact = obj => Object.fromEntries(Object.entries(obj).filter(_ref => {
|
|
|
21
21
|
return value !== undefined;
|
|
22
22
|
}));
|
|
23
23
|
|
|
24
|
+
/** Whether two key lists hold the same keys in the same order. */
|
|
25
|
+
const sameKeys = (previous, next) => previous !== null && previous.length === next.length && previous.every((key, index) => key === next[index]);
|
|
26
|
+
|
|
24
27
|
/**
|
|
25
28
|
* Wires a trigger to the Menu it opens.
|
|
26
29
|
*
|
|
@@ -140,10 +143,10 @@ const useMenuTrigger = function () {
|
|
|
140
143
|
* - `select` — a read-only field standing in for a `<select>`. An option is
|
|
141
144
|
* highlighted as soon as the list opens, Space selects it (the field has no
|
|
142
145
|
* typing role), and Enter or Space opens the list in the first place.
|
|
143
|
-
* - `autocomplete` — an editable field that filters the list as you type.
|
|
144
|
-
*
|
|
145
|
-
*
|
|
146
|
-
*
|
|
146
|
+
* - `autocomplete` — an editable field that filters the list as you type. The
|
|
147
|
+
* best match is highlighted for the user as the list narrows under them (APG
|
|
148
|
+
* calls this automatic selection), so Enter takes it without arrowing to it
|
|
149
|
+
* first. Space types a space, and only the arrow keys open the list.
|
|
147
150
|
*/
|
|
148
151
|
exports.useMenuTrigger = useMenuTrigger;
|
|
149
152
|
/**
|
|
@@ -189,6 +192,15 @@ const useComboboxMenuTrigger = _ref3 => {
|
|
|
189
192
|
}, [enabled]);
|
|
190
193
|
const initialFocusRef = React.useRef(null);
|
|
191
194
|
const [activeOptionKey, setActiveOptionKey] = React.useState(null);
|
|
195
|
+
/*
|
|
196
|
+
* The suggestion keys the highlight was last seeded against. Automatic
|
|
197
|
+
* selection re-seeds whenever the options CHANGE, and array identity is the
|
|
198
|
+
* wrong test for that: a consumer passing an inline `options` array builds a
|
|
199
|
+
* fresh one every render, and re-seeding on each would yank the highlight back
|
|
200
|
+
* to the top the moment the user arrowed off it. So the keys are compared, not
|
|
201
|
+
* the array holding them.
|
|
202
|
+
*/
|
|
203
|
+
const seededOptionKeysRef = React.useRef(null);
|
|
192
204
|
const isAutocomplete = pattern === 'autocomplete';
|
|
193
205
|
|
|
194
206
|
// A searchable menu drives navigation internally from its own filter field; a
|
|
@@ -269,17 +281,45 @@ const useComboboxMenuTrigger = _ref3 => {
|
|
|
269
281
|
const selectedKeys = menu?.selectedKeys;
|
|
270
282
|
const selectedOption = menu?.selectedOption;
|
|
271
283
|
React.useLayoutEffect(() => {
|
|
272
|
-
|
|
284
|
+
/*
|
|
285
|
+
* Nothing to seed when the opt-in is off: `menuProps` hands Menu none of
|
|
286
|
+
* this, so the key would be written and read by no one. It would not merely
|
|
287
|
+
* be wasted either — seeding a real key where the old code left it null
|
|
288
|
+
* re-renders the consumer on every keystroke, which a component that never
|
|
289
|
+
* asked for any of this should not pay.
|
|
290
|
+
*/
|
|
291
|
+
if (!enabled) {
|
|
292
|
+
return;
|
|
293
|
+
}
|
|
294
|
+
// A closed list has no active option, whichever pattern this is. The
|
|
295
|
+
// suggestion set is forgotten with it, so reopening on the very same options
|
|
296
|
+
// still reads as a change and seeds the highlight again.
|
|
273
297
|
if (!isOpen) {
|
|
298
|
+
seededOptionKeysRef.current = null;
|
|
274
299
|
setActiveOptionKey(null);
|
|
275
300
|
return;
|
|
276
301
|
}
|
|
277
302
|
const enabledKeys = optionSource.filter(option => !option.disabled).map(option => option.key);
|
|
278
303
|
const surviving = prev => prev && enabledKeys.includes(prev) ? prev : null;
|
|
279
304
|
if (isAutocomplete) {
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
305
|
+
/*
|
|
306
|
+
* Automatic selection: every time the suggestions change — a keystroke
|
|
307
|
+
* narrowing them, async results landing — the first one is highlighted, so
|
|
308
|
+
* Enter always has a target and the arrows always have a starting point.
|
|
309
|
+
* Between those changes the user's own highlight stands: arrowing down
|
|
310
|
+
* re-renders without touching the option set, and stealing the highlight
|
|
311
|
+
* back to the top there would make the list impossible to navigate.
|
|
312
|
+
*/
|
|
313
|
+
const optionsChanged = !sameKeys(seededOptionKeysRef.current, enabledKeys);
|
|
314
|
+
seededOptionKeysRef.current = enabledKeys;
|
|
315
|
+
setActiveOptionKey(prev =>
|
|
316
|
+
// An open list under this pattern always has a highlight, so a null one
|
|
317
|
+
// is an unseeded list, not a deliberate state — seed it even when the
|
|
318
|
+
// options themselves did not change. Without this the highlight could
|
|
319
|
+
// stay empty for the life of the popup if the key were ever cleared
|
|
320
|
+
// while it was open (a remount under StrictMode, say), and only typing
|
|
321
|
+
// another character would bring it back.
|
|
322
|
+
optionsChanged || prev === null ? enabledKeys[0] ?? null : surviving(prev));
|
|
283
323
|
return;
|
|
284
324
|
}
|
|
285
325
|
if (!usesExternalNav) {
|
|
@@ -291,7 +331,7 @@ const useComboboxMenuTrigger = _ref3 => {
|
|
|
291
331
|
selectedKeys,
|
|
292
332
|
selectedOption
|
|
293
333
|
}));
|
|
294
|
-
}, [isAutocomplete, isOpen, usesExternalNav, optionSource, selectedKeys, selectedOption]);
|
|
334
|
+
}, [enabled, isAutocomplete, isOpen, usesExternalNav, optionSource, selectedKeys, selectedOption]);
|
|
295
335
|
const getTriggerProps = _ref4 => {
|
|
296
336
|
let {
|
|
297
337
|
isOpen: triggerIsOpen,
|
|
@@ -39,6 +39,15 @@ export interface SimpleOptionButtonProps extends Omit<ButtonProps, 'classNames'
|
|
|
39
39
|
resolveLabel?: (option: MenuOption) => string | React.ReactNode;
|
|
40
40
|
resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;
|
|
41
41
|
clickAwayRef?: React.RefObject<ClickAwayRefType | null>;
|
|
42
|
+
/**
|
|
43
|
+
* Opt in to the accessibility behavior of the `OptionButton` this renders: its
|
|
44
|
+
* ARIA roles and state, keyboard navigation of the options, and focus
|
|
45
|
+
* handling on close. Forwarded unchanged.
|
|
46
|
+
*
|
|
47
|
+
* Off by default, and off is this component exactly as it behaved before
|
|
48
|
+
* any of it existed.
|
|
49
|
+
*/
|
|
50
|
+
enableA11y?: boolean;
|
|
42
51
|
testId?: string;
|
|
43
52
|
}
|
|
44
53
|
export declare const SimpleOptionButton: Flow.AbstractComponent<SimpleOptionButtonProps, SimpleOptionButtonRef>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleOptionButton.d.ts","sourceRoot":"","sources":["../../../src/components/OptionButton/SimpleOptionButton.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"SimpleOptionButton.d.ts","sourceRoot":"","sources":["../../../src/components/OptionButton/SimpleOptionButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -34,6 +34,7 @@ const SimpleOptionButtonBase = (props, ref) => {
|
|
|
34
34
|
showLabelTooltip,
|
|
35
35
|
clickAwayRef,
|
|
36
36
|
allowWrap = false,
|
|
37
|
+
enableA11y,
|
|
37
38
|
testId,
|
|
38
39
|
...buttonProps
|
|
39
40
|
} = props;
|
|
@@ -68,6 +69,7 @@ const SimpleOptionButtonBase = (props, ref) => {
|
|
|
68
69
|
onMenuOpen: onMenuOpen,
|
|
69
70
|
onMenuClose: onMenuClose,
|
|
70
71
|
clickAwayRef: clickAwayRef,
|
|
72
|
+
enableA11y: enableA11y,
|
|
71
73
|
testId: testId,
|
|
72
74
|
menu: {
|
|
73
75
|
isFluid: false,
|
|
@@ -35,6 +35,15 @@ export interface SimpleTypeaheadProps extends Omit<InputProps, 'isLoading' | 'me
|
|
|
35
35
|
clickAwayRef?: React.RefObject<ClickAwayRefType | null>;
|
|
36
36
|
allowInternalFilter?: boolean;
|
|
37
37
|
typeaheadInputText?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Opt in to the accessibility behavior of the `Typeahead` this renders: its
|
|
40
|
+
* ARIA roles and state, keyboard navigation of the options, and focus
|
|
41
|
+
* handling on close. Forwarded unchanged.
|
|
42
|
+
*
|
|
43
|
+
* Off by default, and off is this component exactly as it behaved before
|
|
44
|
+
* any of it existed.
|
|
45
|
+
*/
|
|
46
|
+
enableA11y?: boolean;
|
|
38
47
|
testId?: string;
|
|
39
48
|
}
|
|
40
49
|
export declare const SimpleTypeahead: Flow.AbstractComponent<SimpleTypeaheadProps, SimpleTypeaheadRef>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleTypeahead.d.ts","sourceRoot":"","sources":["../../../src/components/Typeahead/SimpleTypeahead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACrE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAG3D,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAC,UAAU,EAAE,cAAc,EAAC,MAAM,qBAAqB,CAAC;AACpE,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAI1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEH,MAAM,WAAW,kBAAkB;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CACV,UAAU,EACR,WAAW,GACX,gBAAgB,GAChB,YAAY,GACZ,SAAS,GACT,cAAc,GACd,oBAAoB,GACpB,QAAQ,GACR,QAAQ,GACR,gBAAgB,GAChB,kBAAkB,GAClB,WAAW,GACX,WAAW,GACX,UAAU,GACV,UAAU,GACV,YAAY,GACZ,aAAa,GACb,SAAS,GACT,cAAc,GACd,uBAAuB,GACvB,cAAc,GACd,qBAAqB,GACrB,oBAAoB,CACvB;IACD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5B,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,QAAQ,CAAC,EAAE,CACT,MAAM,EAAE,UAAU,EAClB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,OAAO,CAAC;IACjE,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChE,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACzE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACxD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;
|
|
1
|
+
{"version":3,"file":"SimpleTypeahead.d.ts","sourceRoot":"","sources":["../../../src/components/Typeahead/SimpleTypeahead.tsx"],"names":[],"mappings":"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"}
|
|
@@ -32,6 +32,7 @@ const SimpleTypeaheadBase = (props, ref) => {
|
|
|
32
32
|
allowInternalFilter = true,
|
|
33
33
|
allowWrap = false,
|
|
34
34
|
elevation = 'modal',
|
|
35
|
+
enableA11y,
|
|
35
36
|
testId,
|
|
36
37
|
...inputProps
|
|
37
38
|
} = props;
|
|
@@ -89,6 +90,7 @@ const SimpleTypeaheadBase = (props, ref) => {
|
|
|
89
90
|
},
|
|
90
91
|
clickAwayRef: clickAwayRef,
|
|
91
92
|
elevation: elevation,
|
|
93
|
+
enableA11y: enableA11y,
|
|
92
94
|
testId: testId
|
|
93
95
|
});
|
|
94
96
|
};
|
package/lib/utils/menu/menu.d.ts
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
import type * as React from 'react';
|
|
2
2
|
import type { MenuGroupTitleOption, MenuOption } from '../../components/Menu';
|
|
3
|
+
/**
|
|
4
|
+
* Toggle an option in or out of a multi-select set.
|
|
5
|
+
*
|
|
6
|
+
* A missing `currentSelectedKeys` means "nothing is selected yet", not "bad
|
|
7
|
+
* input": it is simply what an uncontrolled multi-select dropdown has before its
|
|
8
|
+
* first pick. Treating it as invalid and returning an empty set meant every
|
|
9
|
+
* toggle threw the selection away, so a checkbox-variant dropdown that was never
|
|
10
|
+
* given an initial array could not select anything at all — by mouse as much as
|
|
11
|
+
* by keyboard. Only a missing option key is genuinely nothing to toggle.
|
|
12
|
+
*/
|
|
3
13
|
export declare const getSelectedKeysFromSelectedOption: (currentOption?: MenuOption, currentSelectedKeys?: Array<string>) => Array<string>;
|
|
4
14
|
export declare const getTextLabelFromSelectedKeys: (currentSelectedKeys?: Array<string>, options?: MenuOption[]) => string;
|
|
5
15
|
export declare const getButtonLabelFromSelectedKeys: (currentSelectedKeys?: Array<string>, label?: React.ReactNode) => React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/utils/menu/menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAC,oBAAoB,EAAE,UAAU,EAAC,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/utils/menu/menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAC,oBAAoB,EAAE,UAAU,EAAC,MAAM,qBAAqB,CAAC;AAE1E;;;;;;;;;GASG;AACH,eAAO,MAAM,iCAAiC,GAC5C,gBAAgB,UAAU,EAC1B,sBAAsB,KAAK,CAAC,MAAM,CAAC,KAClC,KAAK,CAAC,MAAM,CAYd,CAAC;AAEF,eAAO,MAAM,4BAA4B,GACvC,sBAAsB,KAAK,CAAC,MAAM,CAAC,EACnC,UAAU,UAAU,EAAE,KACrB,MAQF,CAAC;AAEF,eAAO,MAAM,8BAA8B,GACzC,sBAAsB,KAAK,CAAC,MAAM,CAAC,EACnC,QAAQ,KAAK,CAAC,SAAS,oBAWxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,UAAU,UAAU,EAAE,EACtB,MAAM,MAAM,KACX,UAAU,GAAG,IAAI,GAAG,SAMtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,UAAU,UAAU,EAAE,EACtB,OAAO,KAAK,CAAC,MAAM,CAAC,KACnB,KAAK,CAAC,UAAU,CAWlB,CAAC;AAEF,eAAO,MAAM,gCAAgC,GAC3C,SAAS,UAAU,EAAE,EACrB,YAAY,MAAM,KACjB,UAAU,EAQZ,CAAC;AAEF,eAAO,MAAM,4BAA4B,GACvC,SAAS,UAAU,EAAE,EACrB,cAAc;IACZ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,KACA,MAaF,CAAC;AAEF,eAAO,MAAM,uCAAuC,GAClD,gBAAgB,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,EACxC,YAAY,MAAM,KACjB,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,CAYzB,CAAC;AAEF,eAAO,MAAM,mCAAmC,GAC9C,gBAAgB,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,EACxC,cAAc;IACZ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,KACA,MAeF,CAAC;AAEF,eAAO,MAAM,0CAA0C,GACrD,mBAAmB,KAAK,CAAC,oBAAoB,CAAC,EAC9C,YAAY,MAAM,KACjB,KAAK,CAAC,oBAAoB,CAiB5B,CAAC;AAEF,eAAO,MAAM,sCAAsC,GACjD,mBAAmB,KAAK,CAAC,oBAAoB,CAAC,EAC9C,cAAc;IACZ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,KACA,MAiBF,CAAC"}
|
package/lib/utils/menu/menu.js
CHANGED
|
@@ -4,17 +4,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getTextLabelFromSelectedKeys = exports.getSelectedKeysFromSelectedOption = exports.getOptionsFromKeys = exports.getOptionFromKey = exports.getFilteredOptionsResultText = exports.getFilteredOptionsFromSearchText = exports.getFilteredGroupTitleOptionsResultText = exports.getFilteredGroupTitleOptionsFromSearchText = exports.getFilteredComposeOptionsResultText = exports.getFilteredComposeOptionsFromSearchText = exports.getButtonLabelFromSelectedKeys = void 0;
|
|
7
|
+
/**
|
|
8
|
+
* Toggle an option in or out of a multi-select set.
|
|
9
|
+
*
|
|
10
|
+
* A missing `currentSelectedKeys` means "nothing is selected yet", not "bad
|
|
11
|
+
* input": it is simply what an uncontrolled multi-select dropdown has before its
|
|
12
|
+
* first pick. Treating it as invalid and returning an empty set meant every
|
|
13
|
+
* toggle threw the selection away, so a checkbox-variant dropdown that was never
|
|
14
|
+
* given an initial array could not select anything at all — by mouse as much as
|
|
15
|
+
* by keyboard. Only a missing option key is genuinely nothing to toggle.
|
|
16
|
+
*/
|
|
7
17
|
const getSelectedKeysFromSelectedOption = (currentOption, currentSelectedKeys) => {
|
|
8
|
-
if (!
|
|
18
|
+
if (!currentOption?.key) {
|
|
9
19
|
return [];
|
|
10
20
|
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
newSelectedKeys = currentSelectedKeys.filter(item => item !== currentOption.key);
|
|
14
|
-
} else {
|
|
15
|
-
newSelectedKeys = [...currentSelectedKeys, currentOption.key];
|
|
16
|
-
}
|
|
17
|
-
return newSelectedKeys;
|
|
21
|
+
const selectedKeys = Array.isArray(currentSelectedKeys) ? currentSelectedKeys : [];
|
|
22
|
+
return selectedKeys.includes(currentOption.key) ? selectedKeys.filter(item => item !== currentOption.key) : [...selectedKeys, currentOption.key];
|
|
18
23
|
};
|
|
19
24
|
exports.getSelectedKeysFromSelectedOption = getSelectedKeysFromSelectedOption;
|
|
20
25
|
const getTextLabelFromSelectedKeys = (currentSelectedKeys, options) => {
|
package/mcp/package.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spaced-out/ui-design-system",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.39",
|
|
4
4
|
"description": "Sense UI components library",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Spaced Out"
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"highcharts-react-official": "^3.2.1",
|
|
70
70
|
"lodash": "^4.18.1",
|
|
71
71
|
"moment": "^2.29.4",
|
|
72
|
-
"moment-timezone": "^0.
|
|
72
|
+
"moment-timezone": "^0.6.2",
|
|
73
73
|
"react-dropzone": "^14.2.3",
|
|
74
74
|
"react-window": "^1.8.10"
|
|
75
75
|
},
|