@spaced-out/ui-design-system 0.6.36 → 0.6.37
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 +9 -0
- package/CHANGELOG.md +9 -0
- package/lib/components/ButtonDropdown/ButtonDropdown.d.ts +10 -0
- package/lib/components/ButtonDropdown/ButtonDropdown.d.ts.map +1 -1
- package/lib/components/ButtonDropdown/ButtonDropdown.js +26 -3
- package/lib/components/ButtonTabs/ButtonTab/ButtonTab.d.ts +9 -1
- package/lib/components/ButtonTabs/ButtonTab/ButtonTab.d.ts.map +1 -1
- package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js +8 -0
- package/lib/components/ButtonTabs/ButtonTabDropdown.d.ts +10 -1
- package/lib/components/ButtonTabs/ButtonTabDropdown.d.ts.map +1 -1
- package/lib/components/ButtonTabs/ButtonTabDropdown.js +31 -3
- package/lib/components/ButtonTabs/ButtonTabs.d.ts +6 -0
- package/lib/components/ButtonTabs/ButtonTabs.d.ts.map +1 -1
- package/lib/components/ButtonTabs/ButtonTabs.js +2 -0
- package/lib/components/Combobox/Combobox.d.ts +9 -0
- package/lib/components/Combobox/Combobox.d.ts.map +1 -1
- package/lib/components/Combobox/Combobox.js +21 -0
- package/lib/components/Combobox/helper.d.ts.map +1 -1
- package/lib/components/Combobox/helper.js +0 -4
- package/lib/components/Dropdown/Dropdown.d.ts +9 -0
- package/lib/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/lib/components/Dropdown/Dropdown.js +92 -24
- package/lib/components/Dropdown/Dropdown.module.css +24 -0
- package/lib/components/InlineDropdown/InlineDropdown.d.ts +10 -0
- package/lib/components/InlineDropdown/InlineDropdown.d.ts.map +1 -1
- package/lib/components/InlineDropdown/InlineDropdown.js +23 -3
- package/lib/components/Input/Input.module.css +38 -0
- package/lib/components/Menu/Menu.d.ts +99 -0
- package/lib/components/Menu/Menu.d.ts.map +1 -1
- package/lib/components/Menu/Menu.js +1152 -187
- package/lib/components/Menu/Menu.module.css +191 -7
- package/lib/components/Menu/MenuFocusScope.d.ts +21 -0
- package/lib/components/Menu/MenuFocusScope.d.ts.map +1 -0
- package/lib/components/Menu/MenuFocusScope.js +37 -0
- package/lib/components/Menu/MenuOptionButton.d.ts +36 -0
- package/lib/components/Menu/MenuOptionButton.d.ts.map +1 -1
- package/lib/components/Menu/MenuOptionButton.js +137 -29
- package/lib/components/Menu/index.d.ts +2 -0
- package/lib/components/Menu/index.d.ts.map +1 -1
- package/lib/components/Menu/index.js +22 -0
- package/lib/components/Menu/menuOptionId.d.ts +12 -0
- package/lib/components/Menu/menuOptionId.d.ts.map +1 -0
- package/lib/components/Menu/menuOptionId.js +18 -0
- package/lib/components/Menu/useMenuKeyboardNavigation.d.ts +93 -0
- package/lib/components/Menu/useMenuKeyboardNavigation.d.ts.map +1 -0
- package/lib/components/Menu/useMenuKeyboardNavigation.js +471 -0
- package/lib/components/Menu/useMenuTrigger.d.ts +207 -0
- package/lib/components/Menu/useMenuTrigger.d.ts.map +1 -0
- package/lib/components/Menu/useMenuTrigger.js +389 -0
- package/lib/components/OptionButton/OptionButton.d.ts +16 -0
- package/lib/components/OptionButton/OptionButton.d.ts.map +1 -1
- package/lib/components/OptionButton/OptionButton.js +4 -1
- package/lib/components/Tabs/Tab/Tab.d.ts +8 -1
- package/lib/components/Tabs/Tab/Tab.d.ts.map +1 -1
- package/lib/components/Tabs/Tab/Tab.js +8 -0
- package/lib/components/Tabs/TabList/TabDropdown.d.ts +10 -1
- package/lib/components/Tabs/TabList/TabDropdown.d.ts.map +1 -1
- package/lib/components/Tabs/TabList/TabDropdown.js +23 -3
- package/lib/components/Tabs/TabList/TabList.d.ts +14 -0
- package/lib/components/Tabs/TabList/TabList.d.ts.map +1 -1
- package/lib/components/Tabs/TabList/TabList.js +6 -0
- package/lib/components/Typeahead/Typeahead.d.ts +9 -0
- package/lib/components/Typeahead/Typeahead.d.ts.map +1 -1
- package/lib/components/Typeahead/Typeahead.js +107 -13
- package/lib/components/Typeahead/Typeahead.module.css +13 -0
- package/lib/hooks/index.d.ts +1 -0
- package/lib/hooks/index.d.ts.map +1 -1
- package/lib/hooks/index.js +11 -0
- package/lib/hooks/useInteractionModality/index.d.ts +2 -0
- package/lib/hooks/useInteractionModality/index.d.ts.map +1 -0
- package/lib/hooks/useInteractionModality/index.js +16 -0
- package/lib/hooks/useInteractionModality/useInteractionModality.d.ts +39 -0
- package/lib/hooks/useInteractionModality/useInteractionModality.d.ts.map +1 -0
- package/lib/hooks/useInteractionModality/useInteractionModality.js +111 -0
- package/lib/utils/click-away/click-away.d.ts +16 -0
- package/lib/utils/click-away/click-away.d.ts.map +1 -1
- package/lib/utils/click-away/click-away.js +49 -0
- package/mcp/package.json +1 -1
- package/package.json +1 -1
package/.cspell/custom-words.txt
CHANGED
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,15 @@
|
|
|
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.37](https://github.com/spaced-out/ui-design-system/compare/v0.6.37-beta.0...v0.6.37) (2026-10-01)
|
|
6
|
+
|
|
7
|
+
### [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)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Features
|
|
11
|
+
|
|
12
|
+
* **menu:** add opt-in accessibility to the Menu and dropdown family ([#509](https://github.com/spaced-out/ui-design-system/issues/509)) ([c7be045](https://github.com/spaced-out/ui-design-system/commit/c7be0452e8016f87904b57cfdf737d79ac172b0c)), closes [#504](https://github.com/spaced-out/ui-design-system/issues/504) [#508](https://github.com/spaced-out/ui-design-system/issues/508) [#500](https://github.com/spaced-out/ui-design-system/issues/500) [#500](https://github.com/spaced-out/ui-design-system/issues/500)
|
|
13
|
+
|
|
5
14
|
### [0.6.36](https://github.com/spaced-out/ui-design-system/compare/v0.6.35...v0.6.36) (2026-09-28)
|
|
6
15
|
|
|
7
16
|
|
|
@@ -33,6 +33,16 @@ export interface ButtonDropdownProps extends Omit<ButtonProps, 'classNames' | 'm
|
|
|
33
33
|
onMenuClose?: () => unknown;
|
|
34
34
|
tooltip?: BaseTooltipProps;
|
|
35
35
|
elevation?: ElevationType;
|
|
36
|
+
/**
|
|
37
|
+
* Opt in to the accessibility behavior: `aria-haspopup` / `aria-expanded` /
|
|
38
|
+
* `aria-controls` on the trigger, the arrow key that opens the popup, focus
|
|
39
|
+
* moving into the menu and back to the trigger, and the roving tab stop
|
|
40
|
+
* inside it. Forwarded to the `Menu` this opens.
|
|
41
|
+
*
|
|
42
|
+
* Off by default, and off is this component exactly as it behaved before any
|
|
43
|
+
* of it existed.
|
|
44
|
+
*/
|
|
45
|
+
enableA11y?: boolean;
|
|
36
46
|
clickAwayRef?: React.RefObject<ClickAwayRefType | null>;
|
|
37
47
|
testId?: string;
|
|
38
48
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonDropdown/ButtonDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ButtonDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonDropdown/ButtonDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAK3D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAGvD,OAAO,KAAK,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAI/D,OAAO,KAAK,EAAC,gBAAgB,EAAE,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAM5E,eAAO,MAAM,oBAAoB;;;;;;;EAO/B,CAAC;AAEH,eAAO,MAAM,aAAa;;;EAGxB,CAAC;AAEH,MAAM,MAAM,UAAU,GACpB,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAC;AACnE,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAE1E,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,mBACf,SAAQ,IAAI,CACV,WAAW,EACT,YAAY,GACZ,MAAM,GACN,kBAAkB,GAClB,gBAAgB,GAChB,gBAAgB,GAChB,YAAY,GACZ,aAAa,GACb,SAAS,GACT,WAAW,GACX,cAAc,CACjB;IACD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IAC5B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,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,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,cAAc,EAAE,IAAI,CAAC,iBAAiB,CACjD,mBAAmB,EACnB,cAAc,CAyLf,CAAC"}
|
|
@@ -15,6 +15,8 @@ var _qa = require("../../utils/qa");
|
|
|
15
15
|
var _Button = require("../Button");
|
|
16
16
|
var _ConditionalWrapper = require("../ConditionalWrapper");
|
|
17
17
|
var _Menu = require("../Menu");
|
|
18
|
+
var _MenuFocusScope = require("../Menu/MenuFocusScope");
|
|
19
|
+
var _useMenuTrigger = require("../Menu/useMenuTrigger");
|
|
18
20
|
var _Tooltip = require("../Tooltip");
|
|
19
21
|
var _ButtonDropdownModule = _interopRequireDefault(require("./ButtonDropdown.module.css"));
|
|
20
22
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
@@ -51,10 +53,22 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
|
|
|
51
53
|
onClick,
|
|
52
54
|
elevation = 'modal',
|
|
53
55
|
clickAwayRef,
|
|
56
|
+
enableA11y = false,
|
|
54
57
|
testId,
|
|
55
58
|
...restButtonProps
|
|
56
59
|
} = _ref;
|
|
57
60
|
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
|
|
61
|
+
const menuTrigger = (0, _useMenuTrigger.useMenuTrigger)({
|
|
62
|
+
enabled: enableA11y,
|
|
63
|
+
// A consumer's own `id` is kept rather than replaced by a generated one:
|
|
64
|
+
// it is what their label, their `aria-labelledby` elsewhere, or their
|
|
65
|
+
// tests already point at. Same for the menu's naming — what the consumer
|
|
66
|
+
// said about the listbox wins over naming it after the trigger.
|
|
67
|
+
id: restButtonProps.id,
|
|
68
|
+
menuId: menu?.menuId,
|
|
69
|
+
ariaLabel: menu?.ariaLabel,
|
|
70
|
+
ariaLabelledBy: menu?.ariaLabelledBy
|
|
71
|
+
});
|
|
58
72
|
const {
|
|
59
73
|
x,
|
|
60
74
|
y,
|
|
@@ -81,6 +95,7 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
|
|
|
81
95
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_clickAway.ClickAway, {
|
|
82
96
|
onChange: onMenuToggle,
|
|
83
97
|
clickAwayRef: clickAwayRef,
|
|
98
|
+
restoreFocusOnClose: enableA11y,
|
|
84
99
|
children: _ref2 => {
|
|
85
100
|
let {
|
|
86
101
|
isOpen,
|
|
@@ -111,6 +126,12 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
|
|
|
111
126
|
}),
|
|
112
127
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
|
|
113
128
|
...restButtonProps,
|
|
129
|
+
...menuTrigger.getTriggerProps({
|
|
130
|
+
// With no `menu` there is no popup to advertise or to open.
|
|
131
|
+
isOpen: isOpen && Boolean(menu),
|
|
132
|
+
onOpen,
|
|
133
|
+
onKeyDown: restButtonProps.onKeyDown
|
|
134
|
+
}),
|
|
114
135
|
iconRightName: children ? iconRightName || (isOpen ? 'caret-up' : 'caret-down') : iconRightName,
|
|
115
136
|
iconRightType: iconRightType,
|
|
116
137
|
disabled: disabled,
|
|
@@ -133,8 +154,8 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
|
|
|
133
154
|
children: children
|
|
134
155
|
})
|
|
135
156
|
}), isOpen && menu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingPortal, {
|
|
136
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
137
|
-
|
|
157
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuFocusScope.MenuFocusScope, {
|
|
158
|
+
enabled: !enableA11y,
|
|
138
159
|
context: context,
|
|
139
160
|
initialFocus: refs.reference,
|
|
140
161
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
@@ -161,6 +182,7 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
|
|
|
161
182
|
},
|
|
162
183
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.Menu, {
|
|
163
184
|
...menu,
|
|
185
|
+
...menuTrigger.menuProps,
|
|
164
186
|
testId: (0, _qa.generateTestId)({
|
|
165
187
|
base: testId,
|
|
166
188
|
slot: 'menu'
|
|
@@ -174,7 +196,8 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
|
|
|
174
196
|
}
|
|
175
197
|
},
|
|
176
198
|
size: menu.size || size,
|
|
177
|
-
onTabOut: clickAway
|
|
199
|
+
onTabOut: clickAway,
|
|
200
|
+
enableA11y: enableA11y
|
|
178
201
|
})
|
|
179
202
|
})
|
|
180
203
|
})
|
|
@@ -4,7 +4,15 @@ import type { IconType } from '../../../components/Icon';
|
|
|
4
4
|
type ClassNames = Readonly<{
|
|
5
5
|
wrapper?: string;
|
|
6
6
|
}>;
|
|
7
|
-
|
|
7
|
+
/**
|
|
8
|
+
* Attributes forwarded straight to the underlying `<button>`. Declared rather
|
|
9
|
+
* than relied on: `ButtonTab` spreads its rest props, so these reached the DOM
|
|
10
|
+
* whether or not the type mentioned them. `id` is NOT among them — this
|
|
11
|
+
* component takes `id` as the tab's own identity, which is why a menu trigger
|
|
12
|
+
* names its listbox with `ariaLabel` instead.
|
|
13
|
+
*/
|
|
14
|
+
type ForwardedButtonProps = Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-haspopup' | 'aria-expanded' | 'aria-controls' | 'onKeyDown'>;
|
|
15
|
+
export interface ButtonTabProps extends ForwardedButtonProps {
|
|
8
16
|
classNames?: ClassNames;
|
|
9
17
|
children?: React.ReactNode;
|
|
10
18
|
disabled?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonTab.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonTabs/ButtonTab/ButtonTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAKlD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"ButtonTab.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonTabs/ButtonTab/ButtonTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAKlD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,KAAK,oBAAoB,GAAG,IAAI,CAC9B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,eAAe,GAAG,eAAe,GAAG,eAAe,GAAG,WAAW,CAClE,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,oBAAoB;IAC1D,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EACd,CAAC,CACC,EAAE,EAAE,MAAM,EACV,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACrD,OAAO,CAAC,GACb,IAAI,GACJ,SAAS,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAC5C,cAAc,EACd,iBAAiB,CAkDlB,CAAC"}
|
|
@@ -11,6 +11,14 @@ var _ButtonTabModule = _interopRequireDefault(require("./ButtonTab.module.css"))
|
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
13
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
|
+
/**
|
|
15
|
+
* Attributes forwarded straight to the underlying `<button>`. Declared rather
|
|
16
|
+
* than relied on: `ButtonTab` spreads its rest props, so these reached the DOM
|
|
17
|
+
* whether or not the type mentioned them. `id` is NOT among them — this
|
|
18
|
+
* component takes `id` as the tab's own identity, which is why a menu trigger
|
|
19
|
+
* names its listbox with `ariaLabel` instead.
|
|
20
|
+
*/
|
|
21
|
+
|
|
14
22
|
const ButtonTab = exports.ButtonTab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
15
23
|
let {
|
|
16
24
|
classNames,
|
|
@@ -6,8 +6,17 @@ export interface ButtonTabDropdownProps extends Omit<ButtonTabProps, 'title' | '
|
|
|
6
6
|
title: string;
|
|
7
7
|
elevation?: ElevationType;
|
|
8
8
|
dropdownClass?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Opt in to the accessibility behavior: `aria-haspopup` / `aria-expanded` /
|
|
11
|
+
* `aria-controls` on the tab, the arrow key that opens the popup, and focus
|
|
12
|
+
* moving into the menu and back. Forwarded to the `Menu` this opens.
|
|
13
|
+
*
|
|
14
|
+
* Off by default, and off is this component exactly as it behaved before any
|
|
15
|
+
* of it existed.
|
|
16
|
+
*/
|
|
17
|
+
enableA11y?: boolean;
|
|
9
18
|
anchorPosition?: AnchorType;
|
|
10
19
|
testId?: string;
|
|
11
20
|
}
|
|
12
|
-
export declare const ButtonTabDropdown: ({ title, elevation, anchorPosition, testId, ...buttonTabProps }: ButtonTabDropdownProps) => React.JSX.Element;
|
|
21
|
+
export declare const ButtonTabDropdown: ({ title, elevation, anchorPosition, enableA11y, testId, ...buttonTabProps }: ButtonTabDropdownProps) => React.JSX.Element;
|
|
13
22
|
//# sourceMappingURL=ButtonTabDropdown.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonTabDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonTabs/ButtonTabDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ButtonTabDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonTabs/ButtonTabDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,qCAAqC,CAAC;AAOxE,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAM1D,MAAM,WAAW,sBACf,SAAQ,IAAI,CACV,cAAc,EACd,OAAO,GAAG,WAAW,GAAG,eAAe,GAAG,gBAAgB,CAC3D;IACD,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAcD,eAAO,MAAM,iBAAiB,GAAI,6EAO/B,sBAAsB,sBAoIxB,CAAC"}
|
|
@@ -14,6 +14,8 @@ var _mergeRefs = require("../../utils/merge-refs");
|
|
|
14
14
|
var _qa = require("../../utils/qa");
|
|
15
15
|
var _ButtonTab = require("./ButtonTab");
|
|
16
16
|
var _Menu = require("../Menu");
|
|
17
|
+
var _MenuFocusScope = require("../Menu/MenuFocusScope");
|
|
18
|
+
var _useMenuTrigger = require("../Menu/useMenuTrigger");
|
|
17
19
|
var _Tooltip = require("../Tooltip");
|
|
18
20
|
var _ButtonTabDropdownModule = _interopRequireDefault(require("./ButtonTabDropdown.module.css"));
|
|
19
21
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
@@ -24,6 +26,7 @@ const ButtonTabDropdown = _ref => {
|
|
|
24
26
|
title,
|
|
25
27
|
elevation = 'modal',
|
|
26
28
|
anchorPosition = 'bottom-end',
|
|
29
|
+
enableA11y = false,
|
|
27
30
|
testId,
|
|
28
31
|
...buttonTabProps
|
|
29
32
|
} = _ref;
|
|
@@ -62,6 +65,12 @@ const ButtonTabDropdown = _ref => {
|
|
|
62
65
|
} = _ref2;
|
|
63
66
|
return key;
|
|
64
67
|
}), selectedButtonTabId) ? 'more-tab' : selectedButtonTabId;
|
|
68
|
+
const menuTrigger = (0, _useMenuTrigger.useMenuTrigger)({
|
|
69
|
+
enabled: enableA11y,
|
|
70
|
+
// `ButtonTab` takes `id` as the tab's own identity, so the listbox is named
|
|
71
|
+
// after the tab title instead of after the trigger element.
|
|
72
|
+
ariaLabel: title
|
|
73
|
+
});
|
|
65
74
|
const {
|
|
66
75
|
x,
|
|
67
76
|
y,
|
|
@@ -76,6 +85,7 @@ const ButtonTabDropdown = _ref => {
|
|
|
76
85
|
middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
|
|
77
86
|
});
|
|
78
87
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_clickAway.ClickAway, {
|
|
88
|
+
restoreFocusOnClose: enableA11y,
|
|
79
89
|
children: _ref3 => {
|
|
80
90
|
let {
|
|
81
91
|
isOpen,
|
|
@@ -84,6 +94,21 @@ const ButtonTabDropdown = _ref => {
|
|
|
84
94
|
boundaryRef,
|
|
85
95
|
triggerRef
|
|
86
96
|
} = _ref3;
|
|
97
|
+
// `id` is dropped: `ButtonTab` uses it as the tab's identity, so the
|
|
98
|
+
// hook's generated trigger id would break selection. The listbox is
|
|
99
|
+
// named by `ariaLabel` above instead.
|
|
100
|
+
const {
|
|
101
|
+
id: _triggerId,
|
|
102
|
+
...triggerProps
|
|
103
|
+
} = menuTrigger.getTriggerProps({
|
|
104
|
+
// With no options there is no popup to advertise or to open.
|
|
105
|
+
isOpen: isOpen && menuOptions.length > 0,
|
|
106
|
+
onOpen,
|
|
107
|
+
// Chained rather than replaced: these props are spread AFTER the
|
|
108
|
+
// consumer's, so without this the hook's own handler would take the
|
|
109
|
+
// place of theirs.
|
|
110
|
+
onKeyDown: buttonTabProps.onKeyDown
|
|
111
|
+
});
|
|
87
112
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
88
113
|
"data-testid": (0, _qa.generateTestId)({
|
|
89
114
|
base: testId,
|
|
@@ -94,6 +119,7 @@ const ButtonTabDropdown = _ref => {
|
|
|
94
119
|
...buttonTabProps,
|
|
95
120
|
ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
|
|
96
121
|
selectedButtonTabId: moreTabSelectedId,
|
|
122
|
+
...triggerProps,
|
|
97
123
|
onButtonTabSelect: (_id, e) => {
|
|
98
124
|
e?.stopPropagation();
|
|
99
125
|
onOpen();
|
|
@@ -104,8 +130,8 @@ const ButtonTabDropdown = _ref => {
|
|
|
104
130
|
}),
|
|
105
131
|
children: title
|
|
106
132
|
}), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingPortal, {
|
|
107
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
108
|
-
|
|
133
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuFocusScope.MenuFocusScope, {
|
|
134
|
+
enabled: !enableA11y,
|
|
109
135
|
context: context,
|
|
110
136
|
initialFocus: refs.reference,
|
|
111
137
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
@@ -123,6 +149,7 @@ const ButtonTabDropdown = _ref => {
|
|
|
123
149
|
'--menu-elevation': (0, _Tooltip.getElevationValue)(elevation)
|
|
124
150
|
},
|
|
125
151
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.Menu, {
|
|
152
|
+
...menuTrigger.menuProps,
|
|
126
153
|
onSelect: (option, e) => {
|
|
127
154
|
onTabSelect?.(option.key, e);
|
|
128
155
|
clickAway();
|
|
@@ -134,7 +161,8 @@ const ButtonTabDropdown = _ref => {
|
|
|
134
161
|
testId: (0, _qa.generateTestId)({
|
|
135
162
|
base: testId,
|
|
136
163
|
slot: 'menu'
|
|
137
|
-
})
|
|
164
|
+
}),
|
|
165
|
+
enableA11y: enableA11y
|
|
138
166
|
})
|
|
139
167
|
})
|
|
140
168
|
})
|
|
@@ -17,6 +17,12 @@ export interface ButtonTabsProps {
|
|
|
17
17
|
wrapAfter?: number;
|
|
18
18
|
elevation?: ElevationType;
|
|
19
19
|
wrapTabTitle?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Opt in to the accessibility behavior for the overflow tab and the menu it
|
|
22
|
+
* opens. Off by default, and off is this component exactly as it behaved
|
|
23
|
+
* before any of it existed.
|
|
24
|
+
*/
|
|
25
|
+
enableA11y?: boolean;
|
|
20
26
|
anchorPosition?: AnchorType;
|
|
21
27
|
testId?: string;
|
|
22
28
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonTabs.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonTabs/ButtonTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAc1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC,CAAC,CAAC;AAEH,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EACd,CAAC,CACC,EAAE,EAAE,MAAM,EACV,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACrD,OAAO,CAAC,GACb,IAAI,GACJ,SAAS,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,
|
|
1
|
+
{"version":3,"file":"ButtonTabs.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonTabs/ButtonTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAc1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC,CAAC,CAAC;AAEH,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EACd,CAAC,CACC,EAAE,EAAE,MAAM,EACV,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACrD,OAAO,CAAC,GACb,IAAI,GACJ,SAAS,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,CAoGf,CAAC"}
|
|
@@ -26,6 +26,7 @@ const ButtonTabs = exports.ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref
|
|
|
26
26
|
wrapAfter,
|
|
27
27
|
elevation = 'modal',
|
|
28
28
|
wrapTabTitle = 'more',
|
|
29
|
+
enableA11y = false,
|
|
29
30
|
anchorPosition,
|
|
30
31
|
testId
|
|
31
32
|
} = _ref;
|
|
@@ -43,6 +44,7 @@ const ButtonTabs = exports.ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref
|
|
|
43
44
|
elevation: elevation,
|
|
44
45
|
anchorPosition: anchorPosition,
|
|
45
46
|
dropdownClass: classNames?.buttonTabDropdownWrapper,
|
|
47
|
+
enableA11y: enableA11y,
|
|
46
48
|
testId: (0, _qa.generateTestId)({
|
|
47
49
|
base: testId,
|
|
48
50
|
slot: 'dropdown'
|
|
@@ -65,6 +65,15 @@ export interface ComboboxProps {
|
|
|
65
65
|
onMenuOpen?: () => unknown;
|
|
66
66
|
onMenuClose?: () => unknown;
|
|
67
67
|
scrollMenuToBottom?: boolean;
|
|
68
|
+
/**
|
|
69
|
+
* Opt in to the accessibility behavior: the label and helper/error text
|
|
70
|
+
* programmatically associated with both fields, and the `combobox` wiring in
|
|
71
|
+
* the `Dropdown` this renders.
|
|
72
|
+
*
|
|
73
|
+
* Off by default, and off is this component exactly as it behaved before any
|
|
74
|
+
* of it existed.
|
|
75
|
+
*/
|
|
76
|
+
enableA11y?: boolean;
|
|
68
77
|
onDropdownFocus?: React.FocusEventHandler<HTMLInputElement>;
|
|
69
78
|
onDropdownBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
70
79
|
onDropdownKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Combobox.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Combobox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -52,6 +52,7 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
|
|
|
52
52
|
onMenuOpen,
|
|
53
53
|
onMenuClose,
|
|
54
54
|
scrollMenuToBottom,
|
|
55
|
+
enableA11y = false,
|
|
55
56
|
onDropdownFocus,
|
|
56
57
|
onDropdownBlur,
|
|
57
58
|
onDropdownKeyDown,
|
|
@@ -63,6 +64,12 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
|
|
|
63
64
|
} = props;
|
|
64
65
|
const inputRef = React.useRef(null);
|
|
65
66
|
const dropdownRef = React.useRef(null);
|
|
67
|
+
|
|
68
|
+
// Programmatic associations: the visible label names both fields, and the
|
|
69
|
+
// helper/error text describes them (WCAG 1.3.1 / 3.3.1 / 3.3.2 / 4.1.2).
|
|
70
|
+
const labelId = React.useId();
|
|
71
|
+
const descriptionId = React.useId();
|
|
72
|
+
const hasDescription = Boolean(helperText) || Boolean(error);
|
|
66
73
|
const {
|
|
67
74
|
input: inputValue,
|
|
68
75
|
dropdown: dropdownInputText
|
|
@@ -118,6 +125,7 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
|
|
|
118
125
|
}),
|
|
119
126
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
120
127
|
className: _ComboboxModule.default.infoContent,
|
|
128
|
+
id: enableA11y ? labelId : undefined,
|
|
121
129
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
|
|
122
130
|
color: "secondary",
|
|
123
131
|
testId: (0, _qa.generateTestId)({
|
|
@@ -135,6 +143,8 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
|
|
|
135
143
|
})]
|
|
136
144
|
})
|
|
137
145
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
146
|
+
role: enableA11y ? 'group' : undefined,
|
|
147
|
+
"aria-labelledby": enableA11y && label ? labelId : undefined,
|
|
138
148
|
className: (0, _classify.default)(_ComboboxModule.default.box, {
|
|
139
149
|
[_ComboboxModule.default.withError]: error ?? false
|
|
140
150
|
}, classNames?.box),
|
|
@@ -147,6 +157,11 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
|
|
|
147
157
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
|
|
148
158
|
ref: dropdownRef,
|
|
149
159
|
menu: menu,
|
|
160
|
+
"aria-labelledby": enableA11y && label ? labelId : undefined,
|
|
161
|
+
"aria-required": enableA11y && required || undefined,
|
|
162
|
+
"aria-invalid": enableA11y && error || undefined,
|
|
163
|
+
"aria-describedby": enableA11y && hasDescription ? descriptionId : undefined,
|
|
164
|
+
error: error,
|
|
150
165
|
boxRef: dropdownBoxRef,
|
|
151
166
|
placeholder: dropdownPlaceholder,
|
|
152
167
|
readOnly: readOnly,
|
|
@@ -164,6 +179,7 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
|
|
|
164
179
|
onMenuClose: onMenuClose,
|
|
165
180
|
onChange: handleDropdownChange,
|
|
166
181
|
scrollMenuToBottom: scrollMenuToBottom,
|
|
182
|
+
enableA11y: enableA11y,
|
|
167
183
|
dropdownInputText: dropdownInputText,
|
|
168
184
|
onFocus: onDropdownFocus,
|
|
169
185
|
onBlur: onDropdownBlur,
|
|
@@ -177,6 +193,10 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
|
|
|
177
193
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, {
|
|
178
194
|
ref: inputRef,
|
|
179
195
|
boxRef: inputBoxRef,
|
|
196
|
+
"aria-labelledby": enableA11y && label ? labelId : undefined,
|
|
197
|
+
"aria-required": enableA11y && required || undefined,
|
|
198
|
+
"aria-invalid": enableA11y && error || undefined,
|
|
199
|
+
"aria-describedby": enableA11y && hasDescription ? descriptionId : undefined,
|
|
180
200
|
name: inputName,
|
|
181
201
|
placeholder: inputPlaceholder,
|
|
182
202
|
onFocus: onInputFocus,
|
|
@@ -215,6 +235,7 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
|
|
|
215
235
|
})
|
|
216
236
|
})]
|
|
217
237
|
}), (Boolean(helperText) || error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
238
|
+
id: enableA11y ? descriptionId : undefined,
|
|
218
239
|
className: _ComboboxModule.default.info,
|
|
219
240
|
"data-testid": (0, _qa.generateTestId)({
|
|
220
241
|
base: testId,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/helper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,qBAAqB,CAAC;AAGpD,eAAO,MAAM,cAAc,EAAE,UAAU,EAmCtC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/helper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,qBAAqB,CAAC;AAGpD,eAAO,MAAM,cAAc,EAAE,UAAU,EAmCtC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,UAAU,EAoCvC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,UAAU,EA6B1C,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAC5B,aAAa,MAAM,EACnB,eAAa,KACZ,MA+EF,CAAC"}
|
|
@@ -19,6 +19,15 @@ export interface DropdownProps extends Omit<InputProps, 'classNames' | 'onChange
|
|
|
19
19
|
menu?: MenuProps;
|
|
20
20
|
elevation?: ElevationType;
|
|
21
21
|
clickAwayRef?: React.RefObject<ClickAwayRefType | null>;
|
|
22
|
+
/**
|
|
23
|
+
* Opt in to the accessibility behavior: the `combobox` role and its ARIA,
|
|
24
|
+
* keyboard navigation of the options from the input, and focus returning to
|
|
25
|
+
* the input on close. Forwarded to the `Menu` this opens.
|
|
26
|
+
*
|
|
27
|
+
* Off by default, and off is this component exactly as it behaved before any
|
|
28
|
+
* of it existed.
|
|
29
|
+
*/
|
|
30
|
+
enableA11y?: boolean;
|
|
22
31
|
testId?: string;
|
|
23
32
|
}
|
|
24
33
|
export declare const Dropdown: Flow.AbstractComponent<DropdownProps, HTMLInputElement>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAK3D,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAErD,OAAO,KAAK,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAI/D,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAM1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,UAAU,EACR,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,aAAa,GACb,oBAAoB,GACpB,mBAAmB,GACnB,MAAM,GACN,WAAW,GACX,cAAc,CACjB;IACD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,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,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,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;AAED,eAAO,MAAM,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,gBAAgB,CAyO1E,CAAC"}
|