@atlaskit/select 20.6.1 → 20.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/cjs/CheckboxSelect.js +1 -2
- package/dist/cjs/CountrySelect.js +4 -17
- package/dist/cjs/PopupSelect/PopupSelect.js +3 -66
- package/dist/cjs/PopupSelect/components.js +1 -2
- package/dist/cjs/RadioSelect.js +1 -2
- package/dist/cjs/Select.js +1 -1
- package/dist/cjs/components/input-options.js +1 -2
- package/dist/cjs/createSelect.js +2 -15
- package/dist/cjs/entry-points/select.js +1 -2
- package/dist/cjs/index.js +1 -15
- package/dist/cjs/utils/grouped-options-announcement.js +6 -10
- package/dist/es2019/CountrySelect.js +1 -12
- package/dist/es2019/PopupSelect/PopupSelect.js +2 -68
- package/dist/es2019/Select.js +1 -1
- package/dist/es2019/createSelect.js +1 -11
- package/dist/es2019/index.js +0 -1
- package/dist/es2019/utils/grouped-options-announcement.js +3 -8
- package/dist/esm/CountrySelect.js +2 -15
- package/dist/esm/PopupSelect/PopupSelect.js +2 -64
- package/dist/esm/Select.js +1 -1
- package/dist/esm/createSelect.js +1 -13
- package/dist/esm/index.js +0 -1
- package/dist/esm/utils/grouped-options-announcement.js +3 -8
- package/dist/types/index.d.ts +0 -1
- package/dist/types/utils/grouped-options-announcement.d.ts +1 -1
- package/dist/types-ts4.5/index.d.ts +0 -1
- package/dist/types-ts4.5/utils/grouped-options-announcement.d.ts +1 -1
- package/package.json +6 -10
- package/dist/cjs/utils/country-groups-announcement.js +0 -29
- package/dist/es2019/utils/country-groups-announcement.js +0 -22
- package/dist/esm/utils/country-groups-announcement.js +0 -22
- package/dist/types/utils/country-groups-announcement.d.ts +0 -15
- package/dist/types-ts4.5/utils/country-groups-announcement.d.ts +0 -15
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @atlaskit/select
|
|
2
2
|
|
|
3
|
+
## 20.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#155546](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/155546)
|
|
8
|
+
[`4133da7ce5d92`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4133da7ce5d92) -
|
|
9
|
+
This cleans up the feature flag references for assistive technology improvements, making them
|
|
10
|
+
fully available to all people.
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
16
|
+
## 20.6.2
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 20.6.1
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
|
@@ -13,8 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
13
13
|
var _inputOptions = require("./components/input-options");
|
|
14
14
|
var _Select = _interopRequireDefault(require("./Select"));
|
|
15
15
|
var _excluded = ["components"];
|
|
16
|
-
function
|
|
17
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
16
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
|
|
18
17
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
19
18
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
20
19
|
var CheckboxSelectInternal = function CheckboxSelectInternal(_ref) {
|
|
@@ -11,15 +11,10 @@ require("./CountrySelect.compiled.css");
|
|
|
11
11
|
var React = _interopRequireWildcard(require("react"));
|
|
12
12
|
var _runtime = require("@compiled/react/runtime");
|
|
13
13
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
14
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
16
14
|
var _countries = require("./data/countries");
|
|
17
15
|
var _Select = _interopRequireDefault(require("./Select"));
|
|
18
|
-
var
|
|
19
|
-
|
|
20
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
21
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
22
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable @repo/internal/fs/filename-pattern-match */
|
|
16
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
|
|
17
|
+
/* eslint-disable @repo/internal/fs/filename-pattern-match */
|
|
23
18
|
// custom option renderer
|
|
24
19
|
var labelStyles = null;
|
|
25
20
|
var flagStyles = null;
|
|
@@ -76,8 +71,7 @@ var formatOptionLabel = function formatOptionLabel(opt, _ref4) {
|
|
|
76
71
|
|
|
77
72
|
// put it all together
|
|
78
73
|
var CountrySelect = function CountrySelect(props) {
|
|
79
|
-
var
|
|
80
|
-
options = props.options;
|
|
74
|
+
var options = props.options;
|
|
81
75
|
var countryOptions = options || _countries.groupedCountries;
|
|
82
76
|
return /*#__PURE__*/React.createElement(_Select.default, (0, _extends2.default)({
|
|
83
77
|
isClearable: false,
|
|
@@ -85,14 +79,7 @@ var CountrySelect = function CountrySelect(props) {
|
|
|
85
79
|
getOptionLabel: getOptionLabel,
|
|
86
80
|
getOptionValue: getOptionValue,
|
|
87
81
|
isMulti: false,
|
|
88
|
-
options: countryOptions
|
|
89
|
-
ariaLiveMessages:
|
|
90
|
-
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
91
|
-
(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : (0, _countryGroupsAnnouncement.isCountryOptionsGrouped)(countryOptions) ? _objectSpread({
|
|
92
|
-
onFocus: function onFocus(data) {
|
|
93
|
-
return (0, _countryGroupsAnnouncement.onCountryOptionFocus)(data, countryOptions);
|
|
94
|
-
}
|
|
95
|
-
}, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages)
|
|
82
|
+
options: countryOptions
|
|
96
83
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
97
84
|
}, props));
|
|
98
85
|
};
|
|
@@ -20,18 +20,14 @@ var _reactDom = require("react-dom");
|
|
|
20
20
|
var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
|
|
21
21
|
var _reactPopper = require("react-popper");
|
|
22
22
|
var _shallowEqual = require("shallow-equal");
|
|
23
|
-
var _deviceCheck = require("@atlaskit/ds-lib/device-check");
|
|
24
23
|
var _useId = require("@atlaskit/ds-lib/use-id");
|
|
25
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
26
24
|
var _reactSelect = require("@atlaskit/react-select");
|
|
27
25
|
var _colors = require("@atlaskit/theme/colors");
|
|
28
26
|
var _Select = _interopRequireDefault(require("../Select"));
|
|
29
|
-
var _groupedOptionsAnnouncement = require("../utils/grouped-options-announcement");
|
|
30
27
|
var _components = require("./components");
|
|
31
28
|
var _notifyOpenLayerObserver = require("./notify-open-layer-observer");
|
|
32
29
|
var _excluded = ["footer", "label", "maxMenuWidth", "minMenuWidth", "placeholder", "target", "testId", "onMenuOpen", "onMenuClose"];
|
|
33
|
-
function
|
|
34
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
30
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
|
|
35
31
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
36
32
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
37
33
|
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
|
|
@@ -349,57 +345,6 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
|
349
345
|
return placeholder;
|
|
350
346
|
}
|
|
351
347
|
};
|
|
352
|
-
var providedAriaLabel = getLabel();
|
|
353
|
-
var updateInputAriaLabel = function updateInputAriaLabel(ariaLabelText) {
|
|
354
|
-
var _this$selectRef;
|
|
355
|
-
// Update aria-label to get first announcement when popup opened.
|
|
356
|
-
if ((_this$selectRef = _this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef = _this$selectRef.select) !== null && _this$selectRef !== void 0 && _this$selectRef.inputRef) {
|
|
357
|
-
var _this$selectRef2;
|
|
358
|
-
if (providedAriaLabel) {
|
|
359
|
-
// I might want to use a comma instead of a period here, when the feature flag is removed.
|
|
360
|
-
ariaLabelText = "".concat(providedAriaLabel, ". ").concat(ariaLabelText);
|
|
361
|
-
}
|
|
362
|
-
(_this$selectRef2 = _this.selectRef) === null || _this$selectRef2 === void 0 || (_this$selectRef2 = _this$selectRef2.select.inputRef) === null || _this$selectRef2 === void 0 || _this$selectRef2.setAttribute('aria-label', ariaLabelText);
|
|
363
|
-
}
|
|
364
|
-
};
|
|
365
|
-
var generateNoGroupsAriaText = function generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix) {
|
|
366
|
-
var _options$findIndex;
|
|
367
|
-
var focused = onFocusProps.focused;
|
|
368
|
-
var options = (props === null || props === void 0 ? void 0 : props.options) || [];
|
|
369
|
-
var totalLength = options === null || options === void 0 ? void 0 : options.length;
|
|
370
|
-
var optionIndex = (_options$findIndex = options === null || options === void 0 ? void 0 : options.findIndex(function (option) {
|
|
371
|
-
return option === focused;
|
|
372
|
-
})) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
|
|
373
|
-
var optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
|
|
374
|
-
var ariaLabelText = (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? "".concat(optionName, ", (").concat(optionIndex + 1, " of ").concat(totalLength, ")") : "Option ".concat(optionName, " focused, ").concat(optionIndex + 1, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
|
|
375
|
-
// Option LABEL focused, 1 of 8. 8 results available.
|
|
376
|
-
// Use Up and Down to choose options, press Enter to select the currently focused option,
|
|
377
|
-
// press Escape to exit the menu.
|
|
378
|
-
return ariaLabelText;
|
|
379
|
-
};
|
|
380
|
-
var onReactSelectFocus = function onReactSelectFocus(onFocusProps) {
|
|
381
|
-
var _props$options;
|
|
382
|
-
var ariaLabelSuffix = (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? '' : ' Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu.';
|
|
383
|
-
var ariaLabelText = '';
|
|
384
|
-
var ariaLiveMessage = '';
|
|
385
|
-
if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
|
|
386
|
-
if ((0, _groupedOptionsAnnouncement.isOptionsGrouped)(props.options)) {
|
|
387
|
-
var totalLength = (0, _groupedOptionsAnnouncement.countAllOptions)(props.options);
|
|
388
|
-
ariaLiveMessage = (0, _groupedOptionsAnnouncement.onFocus)(onFocusProps, props.options);
|
|
389
|
-
ariaLabelText = "".concat(ariaLiveMessage, " ").concat(totalLength, " results available. ").concat(ariaLabelSuffix);
|
|
390
|
-
} else {
|
|
391
|
-
ariaLabelText = generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix);
|
|
392
|
-
ariaLiveMessage = ariaLabelText;
|
|
393
|
-
}
|
|
394
|
-
// Safari still does not announce the first option when menu is opened, so forcing a change to the input label
|
|
395
|
-
// will include the first option in the initial announcement.
|
|
396
|
-
if (!(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') || (0, _deviceCheck.isSafari)() && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement')) {
|
|
397
|
-
updateInputAriaLabel(ariaLabelText);
|
|
398
|
-
}
|
|
399
|
-
return ariaLiveMessage;
|
|
400
|
-
}
|
|
401
|
-
return ariaLiveMessage;
|
|
402
|
-
};
|
|
403
348
|
var popper = /*#__PURE__*/_react.default.createElement(_reactPopper.Popper, (0, _extends2.default)({}, mergedPopperProps, {
|
|
404
349
|
onFirstUpdate: function onFirstUpdate(state) {
|
|
405
350
|
var _mergedPopperProps$on;
|
|
@@ -426,11 +371,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
|
426
371
|
disabled: !focusLockEnabled,
|
|
427
372
|
returnFocus: true
|
|
428
373
|
}, /*#__PURE__*/_react.default.createElement(_Select.default, (0, _extends2.default)({
|
|
429
|
-
label:
|
|
430
|
-
// TODO: Popup Select does not work well with active-descendant
|
|
431
|
-
,
|
|
432
|
-
"aria-live": (0, _deviceCheck.isAppleDevice)() && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? 'assertive' // only needed on Apple products
|
|
433
|
-
: undefined,
|
|
374
|
+
label: getLabel(),
|
|
434
375
|
backspaceRemovesValue: false,
|
|
435
376
|
controlShouldRenderValue: false,
|
|
436
377
|
isClearable: false,
|
|
@@ -444,11 +385,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
|
444
385
|
maxMenuHeight: _this.getMaxHeight(),
|
|
445
386
|
components: selectComponents,
|
|
446
387
|
onChange: _this.handleSelectChange,
|
|
447
|
-
testId: testId
|
|
448
|
-
ariaLiveMessages: _objectSpread({
|
|
449
|
-
// Overwriting ariaLiveMessages builtin onFocus method to announce selected option when popup has been opened
|
|
450
|
-
onFocus: onReactSelectFocus
|
|
451
|
-
}, props.ariaLiveMessages)
|
|
388
|
+
testId: testId
|
|
452
389
|
// Note: We are intentionally not using `onMenuClose={this.close}` here, due to state management conflicts
|
|
453
390
|
// between PopupSelect's popup and the internal select menu. This can result in the PopupSelect closing
|
|
454
391
|
// or opening unexpectedly.
|
|
@@ -20,8 +20,7 @@ var _colors = require("@atlaskit/theme/colors");
|
|
|
20
20
|
var _constants = require("@atlaskit/theme/constants");
|
|
21
21
|
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
|
|
22
22
|
var _excluded = ["innerRef", "innerProps"];
|
|
23
|
-
function
|
|
24
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
23
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
|
|
25
24
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
26
25
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
27
26
|
// ==============================
|
package/dist/cjs/RadioSelect.js
CHANGED
|
@@ -13,8 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
13
13
|
var _Select = _interopRequireDefault(require("./Select"));
|
|
14
14
|
var _inputOptions = require("./components/input-options");
|
|
15
15
|
var _excluded = ["components"];
|
|
16
|
-
function
|
|
17
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
16
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
|
|
18
17
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
19
18
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
20
19
|
var RadioSelect = /*#__PURE__*/_react.default.memo(function (_ref) {
|
package/dist/cjs/Select.js
CHANGED
|
@@ -11,7 +11,7 @@ var _createSelect = _interopRequireDefault(require("./createSelect"));
|
|
|
11
11
|
/* eslint-disable @repo/internal/react/require-jsdoc */
|
|
12
12
|
|
|
13
13
|
var packageName = "@atlaskit/select";
|
|
14
|
-
var packageVersion = "20.
|
|
14
|
+
var packageVersion = "20.7.0";
|
|
15
15
|
var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_async.default);
|
|
16
16
|
var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
|
|
17
17
|
var Select = (0, _analyticsNext.withAnalyticsContext)({
|
|
@@ -17,8 +17,7 @@ var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"))
|
|
|
17
17
|
var _radio = _interopRequireDefault(require("@atlaskit/icon/glyph/radio"));
|
|
18
18
|
var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
|
|
19
19
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
20
|
-
function
|
|
21
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
20
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
|
|
22
21
|
var optionStyles = {
|
|
23
22
|
default: "_1e0c1txw _4cvr1h6o _1bsb1osq _uiztglyw _18ql1j7p _vchhusvi _85i51b66 _1q511b66 _bozgpxbi _y4tiutpp _bfhk1j28 _16qs1kw7 _syaz1kw7 _1di61dty",
|
|
24
23
|
focused: "_bfhk166n _16qsn8hf _112e1vrj",
|
package/dist/cjs/createSelect.js
CHANGED
|
@@ -7,18 +7,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = createSelect;
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
12
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
14
|
-
var _groupedOptionsAnnouncement = require("./utils/grouped-options-announcement");
|
|
15
12
|
var _excluded = ["ariaLiveMessages", "isInvalid", "onClickPreventDefault", "tabSelectsValue", "validationState"];
|
|
16
13
|
/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
|
|
17
14
|
// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
|
|
18
|
-
function
|
|
19
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
20
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
21
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
15
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
|
|
22
16
|
function createSelect(WrappedComponent) {
|
|
23
17
|
var AtlaskitSelect = /*#__PURE__*/(0, _react.forwardRef)(function AtlaskitSelect(props, forwardedRef) {
|
|
24
18
|
var ariaLiveMessages = props.ariaLiveMessages,
|
|
@@ -54,14 +48,7 @@ function createSelect(WrappedComponent) {
|
|
|
54
48
|
}, []);
|
|
55
49
|
return /*#__PURE__*/_react.default.createElement(WrappedComponent, (0, _extends2.default)({
|
|
56
50
|
ref: internalSelectRef,
|
|
57
|
-
|
|
58
|
-
ariaLiveMessages:
|
|
59
|
-
//TO DO: Still need live region for PopupSelect because of the menu being open by default
|
|
60
|
-
(0, _groupedOptionsAnnouncement.isOptionsGrouped)(props.options) ? _objectSpread({
|
|
61
|
-
onFocus: function onFocus(data) {
|
|
62
|
-
return (0, _groupedOptionsAnnouncement.onFocus)(data, props.options);
|
|
63
|
-
}
|
|
64
|
-
}, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages),
|
|
51
|
+
ariaLiveMessages: ariaLiveMessages,
|
|
65
52
|
tabSelectsValue: tabSelectsValue,
|
|
66
53
|
onClickPreventDefault: onClickPreventDefault,
|
|
67
54
|
isInvalid: isInvalid || validationState === 'error'
|
|
@@ -17,5 +17,4 @@ Object.defineProperty(exports, "default", {
|
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
19
|
var _Select = _interopRequireWildcard(require("../Select"));
|
|
20
|
-
function
|
|
21
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
20
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
|
package/dist/cjs/index.js
CHANGED
|
@@ -83,12 +83,6 @@ Object.defineProperty(exports, "default", {
|
|
|
83
83
|
return _select.default;
|
|
84
84
|
}
|
|
85
85
|
});
|
|
86
|
-
Object.defineProperty(exports, "isCountryOptionsGrouped", {
|
|
87
|
-
enumerable: true,
|
|
88
|
-
get: function get() {
|
|
89
|
-
return _countryGroupsAnnouncement.isCountryOptionsGrouped;
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
86
|
Object.defineProperty(exports, "isOptionsGrouped", {
|
|
93
87
|
enumerable: true,
|
|
94
88
|
get: function get() {
|
|
@@ -101,12 +95,6 @@ Object.defineProperty(exports, "mergeStyles", {
|
|
|
101
95
|
return _reactSelect.mergeStyles;
|
|
102
96
|
}
|
|
103
97
|
});
|
|
104
|
-
Object.defineProperty(exports, "onCountryOptionFocus", {
|
|
105
|
-
enumerable: true,
|
|
106
|
-
get: function get() {
|
|
107
|
-
return _countryGroupsAnnouncement.onCountryOptionFocus;
|
|
108
|
-
}
|
|
109
|
-
});
|
|
110
98
|
Object.defineProperty(exports, "useAsync", {
|
|
111
99
|
enumerable: true,
|
|
112
100
|
get: function get() {
|
|
@@ -128,10 +116,8 @@ var _asyncSelect = _interopRequireDefault(require("./entry-points/async-select")
|
|
|
128
116
|
var _creatableSelect = _interopRequireDefault(require("./entry-points/creatable-select"));
|
|
129
117
|
var _asyncCreatableSelect = _interopRequireDefault(require("./entry-points/async-creatable-select"));
|
|
130
118
|
var _groupedOptionsAnnouncement = require("./utils/grouped-options-announcement");
|
|
131
|
-
var _countryGroupsAnnouncement = require("./utils/country-groups-announcement");
|
|
132
119
|
var _CheckboxSelect = _interopRequireDefault(require("./CheckboxSelect"));
|
|
133
120
|
var _CountrySelect = _interopRequireDefault(require("./CountrySelect"));
|
|
134
121
|
var _RadioSelect = _interopRequireDefault(require("./RadioSelect"));
|
|
135
122
|
var _PopupSelect = _interopRequireDefault(require("./PopupSelect"));
|
|
136
|
-
function
|
|
137
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
123
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
|
|
@@ -3,12 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
7
|
-
exports.
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
// Returns custom built string while focusing each group option. This string is used for screen reader announcement.
|
|
11
|
-
function onFocus(onFocusProps, defaultOptions) {
|
|
6
|
+
exports.countAllOptions = void 0;
|
|
7
|
+
exports.generateGroupLabel = generateGroupLabel;
|
|
8
|
+
exports.isOptionsGrouped = void 0;
|
|
9
|
+
function generateGroupLabel(onFocusProps, defaultOptions) {
|
|
12
10
|
var _groupData$options$fi;
|
|
13
11
|
var focused = onFocusProps.focused;
|
|
14
12
|
var isOptionFocused = function isOptionFocused(option) {
|
|
@@ -19,10 +17,8 @@ function onFocus(onFocusProps, defaultOptions) {
|
|
|
19
17
|
return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
|
|
20
18
|
});
|
|
21
19
|
var groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
return "Option ".concat(focused.label, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label, " group, item ").concat(groupOptionIndex + 1, " out of ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.options.length, ". All in all ");
|
|
20
|
+
var totalLength = countAllOptions(defaultOptions);
|
|
21
|
+
return "".concat(focused.label, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label, " (").concat(groupOptionIndex + 1, " of ").concat(totalLength, ")");
|
|
26
22
|
}
|
|
27
23
|
|
|
28
24
|
// Helper function which identifies if options are grouped.
|
|
@@ -5,10 +5,8 @@ import * as React from 'react';
|
|
|
5
5
|
import { ax, ix } from "@compiled/react/runtime";
|
|
6
6
|
/* eslint-disable @repo/internal/fs/filename-pattern-match */
|
|
7
7
|
|
|
8
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
8
|
import { groupedCountries } from './data/countries';
|
|
10
9
|
import Select from './Select';
|
|
11
|
-
import { isCountryOptionsGrouped, onCountryOptionFocus } from './utils/country-groups-announcement';
|
|
12
10
|
// custom option renderer
|
|
13
11
|
const labelStyles = null;
|
|
14
12
|
const flagStyles = null;
|
|
@@ -58,7 +56,6 @@ const formatOptionLabel = (opt, {
|
|
|
58
56
|
// put it all together
|
|
59
57
|
const CountrySelect = props => {
|
|
60
58
|
const {
|
|
61
|
-
ariaLiveMessages,
|
|
62
59
|
options
|
|
63
60
|
} = props;
|
|
64
61
|
const countryOptions = options || groupedCountries;
|
|
@@ -68,15 +65,7 @@ const CountrySelect = props => {
|
|
|
68
65
|
getOptionLabel: getOptionLabel,
|
|
69
66
|
getOptionValue: getOptionValue,
|
|
70
67
|
isMulti: false,
|
|
71
|
-
options: countryOptions
|
|
72
|
-
ariaLiveMessages:
|
|
73
|
-
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
74
|
-
fg('design_system_select-a11y-improvement') ? undefined : isCountryOptionsGrouped(countryOptions) ? {
|
|
75
|
-
onFocus: data => onCountryOptionFocus(data, countryOptions),
|
|
76
|
-
...ariaLiveMessages
|
|
77
|
-
} : {
|
|
78
|
-
...ariaLiveMessages
|
|
79
|
-
}
|
|
68
|
+
options: countryOptions
|
|
80
69
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
81
70
|
}, props));
|
|
82
71
|
};
|
|
@@ -8,13 +8,10 @@ import { createPortal } from 'react-dom';
|
|
|
8
8
|
import FocusLock from 'react-focus-lock';
|
|
9
9
|
import { Manager, Popper, Reference } from 'react-popper';
|
|
10
10
|
import { shallowEqualObjects } from 'shallow-equal';
|
|
11
|
-
import { isAppleDevice, isSafari } from '@atlaskit/ds-lib/device-check';
|
|
12
11
|
import { IdProvider } from '@atlaskit/ds-lib/use-id';
|
|
13
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
12
|
import { mergeStyles } from '@atlaskit/react-select';
|
|
15
13
|
import { N80 } from '@atlaskit/theme/colors';
|
|
16
14
|
import Select from '../Select';
|
|
17
|
-
import { countAllOptions, isOptionsGrouped, onFocus } from '../utils/grouped-options-announcement';
|
|
18
15
|
import { defaultComponents, DummyControl, MenuDialog } from './components';
|
|
19
16
|
import { NotifyOpenLayerObserver } from './notify-open-layer-observer';
|
|
20
17
|
/**
|
|
@@ -328,60 +325,6 @@ export default class PopupSelect extends PureComponent {
|
|
|
328
325
|
return placeholder;
|
|
329
326
|
}
|
|
330
327
|
};
|
|
331
|
-
const providedAriaLabel = getLabel();
|
|
332
|
-
const updateInputAriaLabel = ariaLabelText => {
|
|
333
|
-
var _this$selectRef, _this$selectRef$selec3;
|
|
334
|
-
// Update aria-label to get first announcement when popup opened.
|
|
335
|
-
if ((_this$selectRef = this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef$selec3 = _this$selectRef.select) !== null && _this$selectRef$selec3 !== void 0 && _this$selectRef$selec3.inputRef) {
|
|
336
|
-
var _this$selectRef2, _this$selectRef2$sele;
|
|
337
|
-
if (providedAriaLabel) {
|
|
338
|
-
// I might want to use a comma instead of a period here, when the feature flag is removed.
|
|
339
|
-
ariaLabelText = `${providedAriaLabel}. ${ariaLabelText}`;
|
|
340
|
-
}
|
|
341
|
-
(_this$selectRef2 = this.selectRef) === null || _this$selectRef2 === void 0 ? void 0 : (_this$selectRef2$sele = _this$selectRef2.select.inputRef) === null || _this$selectRef2$sele === void 0 ? void 0 : _this$selectRef2$sele.setAttribute('aria-label', ariaLabelText);
|
|
342
|
-
}
|
|
343
|
-
};
|
|
344
|
-
const generateNoGroupsAriaText = (onFocusProps, ariaLabelSuffix) => {
|
|
345
|
-
var _options$findIndex;
|
|
346
|
-
const {
|
|
347
|
-
focused
|
|
348
|
-
} = onFocusProps;
|
|
349
|
-
const options = (props === null || props === void 0 ? void 0 : props.options) || [];
|
|
350
|
-
const totalLength = options === null || options === void 0 ? void 0 : options.length;
|
|
351
|
-
const optionIndex = (_options$findIndex = options === null || options === void 0 ? void 0 : options.findIndex(option => option === focused)) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
|
|
352
|
-
const optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
|
|
353
|
-
const ariaLabelText = fg('design_system_select-a11y-improvement') ? `${optionName}, (${optionIndex + 1} of ${totalLength})` : `Option ${optionName} focused, ${optionIndex + 1} of ${totalLength}.
|
|
354
|
-
${totalLength} results available.
|
|
355
|
-
${ariaLabelSuffix}
|
|
356
|
-
`;
|
|
357
|
-
// Option LABEL focused, 1 of 8. 8 results available.
|
|
358
|
-
// Use Up and Down to choose options, press Enter to select the currently focused option,
|
|
359
|
-
// press Escape to exit the menu.
|
|
360
|
-
return ariaLabelText;
|
|
361
|
-
};
|
|
362
|
-
const onReactSelectFocus = onFocusProps => {
|
|
363
|
-
var _props$options;
|
|
364
|
-
const ariaLabelSuffix = fg('design_system_select-a11y-improvement') ? '' : ' Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu.';
|
|
365
|
-
let ariaLabelText = '';
|
|
366
|
-
let ariaLiveMessage = '';
|
|
367
|
-
if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
|
|
368
|
-
if (isOptionsGrouped(props.options)) {
|
|
369
|
-
const totalLength = countAllOptions(props.options);
|
|
370
|
-
ariaLiveMessage = onFocus(onFocusProps, props.options);
|
|
371
|
-
ariaLabelText = `${ariaLiveMessage} ${totalLength} results available. ${ariaLabelSuffix}`;
|
|
372
|
-
} else {
|
|
373
|
-
ariaLabelText = generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix);
|
|
374
|
-
ariaLiveMessage = ariaLabelText;
|
|
375
|
-
}
|
|
376
|
-
// Safari still does not announce the first option when menu is opened, so forcing a change to the input label
|
|
377
|
-
// will include the first option in the initial announcement.
|
|
378
|
-
if (!fg('design_system_select-a11y-improvement') || isSafari() && fg('design_system_select-a11y-improvement')) {
|
|
379
|
-
updateInputAriaLabel(ariaLabelText);
|
|
380
|
-
}
|
|
381
|
-
return ariaLiveMessage;
|
|
382
|
-
}
|
|
383
|
-
return ariaLiveMessage;
|
|
384
|
-
};
|
|
385
328
|
const popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
|
|
386
329
|
onFirstUpdate: state => {
|
|
387
330
|
var _mergedPopperProps$on;
|
|
@@ -409,11 +352,7 @@ export default class PopupSelect extends PureComponent {
|
|
|
409
352
|
disabled: !focusLockEnabled,
|
|
410
353
|
returnFocus: true
|
|
411
354
|
}, /*#__PURE__*/React.createElement(Select, _extends({
|
|
412
|
-
label:
|
|
413
|
-
// TODO: Popup Select does not work well with active-descendant
|
|
414
|
-
,
|
|
415
|
-
"aria-live": isAppleDevice() && fg('design_system_select-a11y-improvement') ? 'assertive' // only needed on Apple products
|
|
416
|
-
: undefined,
|
|
355
|
+
label: getLabel(),
|
|
417
356
|
backspaceRemovesValue: false,
|
|
418
357
|
controlShouldRenderValue: false,
|
|
419
358
|
isClearable: false,
|
|
@@ -427,12 +366,7 @@ export default class PopupSelect extends PureComponent {
|
|
|
427
366
|
maxMenuHeight: this.getMaxHeight(),
|
|
428
367
|
components: selectComponents,
|
|
429
368
|
onChange: this.handleSelectChange,
|
|
430
|
-
testId: testId
|
|
431
|
-
ariaLiveMessages: {
|
|
432
|
-
// Overwriting ariaLiveMessages builtin onFocus method to announce selected option when popup has been opened
|
|
433
|
-
onFocus: onReactSelectFocus,
|
|
434
|
-
...props.ariaLiveMessages // priority to use user handlers if provided
|
|
435
|
-
}
|
|
369
|
+
testId: testId
|
|
436
370
|
// Note: We are intentionally not using `onMenuClose={this.close}` here, due to state management conflicts
|
|
437
371
|
// between PopupSelect's popup and the internal select menu. This can result in the PopupSelect closing
|
|
438
372
|
// or opening unexpectedly.
|
package/dist/es2019/Select.js
CHANGED
|
@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
3
3
|
import AsyncSelect from '@atlaskit/react-select/async';
|
|
4
4
|
import createSelect from './createSelect';
|
|
5
5
|
const packageName = "@atlaskit/select";
|
|
6
|
-
const packageVersion = "20.
|
|
6
|
+
const packageVersion = "20.7.0";
|
|
7
7
|
export const SelectWithoutAnalytics = createSelect(AsyncSelect);
|
|
8
8
|
const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
|
|
9
9
|
const Select = withAnalyticsContext({
|
|
@@ -2,8 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
|
|
3
3
|
// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
|
|
4
4
|
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
|
|
5
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
|
-
import { isOptionsGrouped, onFocus } from './utils/grouped-options-announcement';
|
|
7
5
|
export default function createSelect(WrappedComponent) {
|
|
8
6
|
const AtlaskitSelect = /*#__PURE__*/forwardRef(function AtlaskitSelect(props, forwardedRef) {
|
|
9
7
|
const {
|
|
@@ -37,15 +35,7 @@ export default function createSelect(WrappedComponent) {
|
|
|
37
35
|
}), []);
|
|
38
36
|
return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
|
|
39
37
|
ref: internalSelectRef,
|
|
40
|
-
|
|
41
|
-
ariaLiveMessages:
|
|
42
|
-
//TO DO: Still need live region for PopupSelect because of the menu being open by default
|
|
43
|
-
isOptionsGrouped(props.options) ? {
|
|
44
|
-
onFocus: data => onFocus(data, props.options),
|
|
45
|
-
...ariaLiveMessages
|
|
46
|
-
} : {
|
|
47
|
-
...ariaLiveMessages
|
|
48
|
-
},
|
|
38
|
+
ariaLiveMessages: ariaLiveMessages,
|
|
49
39
|
tabSelectsValue: tabSelectsValue,
|
|
50
40
|
onClickPreventDefault: onClickPreventDefault,
|
|
51
41
|
isInvalid: isInvalid || validationState === 'error'
|
package/dist/es2019/index.js
CHANGED
|
@@ -7,7 +7,6 @@ export { default as AsyncSelect } from './entry-points/async-select';
|
|
|
7
7
|
export { default as CreatableSelect } from './entry-points/creatable-select';
|
|
8
8
|
export { default as AsyncCreatableSelect } from './entry-points/async-creatable-select';
|
|
9
9
|
export { isOptionsGrouped } from './utils/grouped-options-announcement';
|
|
10
|
-
export { isCountryOptionsGrouped, onCountryOptionFocus } from './utils/country-groups-announcement';
|
|
11
10
|
export { default as CheckboxSelect } from './CheckboxSelect';
|
|
12
11
|
export { default as CountrySelect } from './CountrySelect';
|
|
13
12
|
export { default as RadioSelect } from './RadioSelect';
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
// Used for overwriting ariaLiveMessages builtin onFocus method.
|
|
3
|
-
// Returns custom built string while focusing each group option. This string is used for screen reader announcement.
|
|
4
|
-
export function onFocus(onFocusProps, defaultOptions) {
|
|
1
|
+
export function generateGroupLabel(onFocusProps, defaultOptions) {
|
|
5
2
|
var _groupData$options$fi;
|
|
6
3
|
const {
|
|
7
4
|
focused
|
|
@@ -14,10 +11,8 @@ export function onFocus(onFocusProps, defaultOptions) {
|
|
|
14
11
|
return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
|
|
15
12
|
});
|
|
16
13
|
const groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
return `Option ${focused.label}, ${groupData === null || groupData === void 0 ? void 0 : groupData.label} group, item ${groupOptionIndex + 1} out of ${groupData === null || groupData === void 0 ? void 0 : groupData.options.length}. All in all `;
|
|
14
|
+
const totalLength = countAllOptions(defaultOptions);
|
|
15
|
+
return `${focused.label}, ${groupData === null || groupData === void 0 ? void 0 : groupData.label} (${groupOptionIndex + 1} of ${totalLength})`;
|
|
21
16
|
}
|
|
22
17
|
|
|
23
18
|
// Helper function which identifies if options are grouped.
|
|
@@ -1,17 +1,12 @@
|
|
|
1
1
|
/* CountrySelect.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
3
|
import "./CountrySelect.compiled.css";
|
|
5
4
|
import * as React from 'react';
|
|
6
5
|
import { ax, ix } from "@compiled/react/runtime";
|
|
7
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
8
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
9
6
|
/* eslint-disable @repo/internal/fs/filename-pattern-match */
|
|
10
7
|
|
|
11
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
8
|
import { groupedCountries } from './data/countries';
|
|
13
9
|
import Select from './Select';
|
|
14
|
-
import { isCountryOptionsGrouped, onCountryOptionFocus } from './utils/country-groups-announcement';
|
|
15
10
|
// custom option renderer
|
|
16
11
|
var labelStyles = null;
|
|
17
12
|
var flagStyles = null;
|
|
@@ -68,8 +63,7 @@ var formatOptionLabel = function formatOptionLabel(opt, _ref4) {
|
|
|
68
63
|
|
|
69
64
|
// put it all together
|
|
70
65
|
var CountrySelect = function CountrySelect(props) {
|
|
71
|
-
var
|
|
72
|
-
options = props.options;
|
|
66
|
+
var options = props.options;
|
|
73
67
|
var countryOptions = options || groupedCountries;
|
|
74
68
|
return /*#__PURE__*/React.createElement(Select, _extends({
|
|
75
69
|
isClearable: false,
|
|
@@ -77,14 +71,7 @@ var CountrySelect = function CountrySelect(props) {
|
|
|
77
71
|
getOptionLabel: getOptionLabel,
|
|
78
72
|
getOptionValue: getOptionValue,
|
|
79
73
|
isMulti: false,
|
|
80
|
-
options: countryOptions
|
|
81
|
-
ariaLiveMessages:
|
|
82
|
-
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
83
|
-
fg('design_system_select-a11y-improvement') ? undefined : isCountryOptionsGrouped(countryOptions) ? _objectSpread({
|
|
84
|
-
onFocus: function onFocus(data) {
|
|
85
|
-
return onCountryOptionFocus(data, countryOptions);
|
|
86
|
-
}
|
|
87
|
-
}, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages)
|
|
74
|
+
options: countryOptions
|
|
88
75
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
89
76
|
}, props));
|
|
90
77
|
};
|
|
@@ -19,13 +19,10 @@ import { createPortal } from 'react-dom';
|
|
|
19
19
|
import FocusLock from 'react-focus-lock';
|
|
20
20
|
import { Manager, Popper, Reference } from 'react-popper';
|
|
21
21
|
import { shallowEqualObjects } from 'shallow-equal';
|
|
22
|
-
import { isAppleDevice, isSafari } from '@atlaskit/ds-lib/device-check';
|
|
23
22
|
import { IdProvider } from '@atlaskit/ds-lib/use-id';
|
|
24
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
25
23
|
import { mergeStyles } from '@atlaskit/react-select';
|
|
26
24
|
import { N80 } from '@atlaskit/theme/colors';
|
|
27
25
|
import Select from '../Select';
|
|
28
|
-
import { countAllOptions, isOptionsGrouped, onFocus } from '../utils/grouped-options-announcement';
|
|
29
26
|
import { defaultComponents, DummyControl, MenuDialog } from './components';
|
|
30
27
|
import { NotifyOpenLayerObserver } from './notify-open-layer-observer';
|
|
31
28
|
/**
|
|
@@ -341,57 +338,6 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
|
|
|
341
338
|
return placeholder;
|
|
342
339
|
}
|
|
343
340
|
};
|
|
344
|
-
var providedAriaLabel = getLabel();
|
|
345
|
-
var updateInputAriaLabel = function updateInputAriaLabel(ariaLabelText) {
|
|
346
|
-
var _this$selectRef;
|
|
347
|
-
// Update aria-label to get first announcement when popup opened.
|
|
348
|
-
if ((_this$selectRef = _this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef = _this$selectRef.select) !== null && _this$selectRef !== void 0 && _this$selectRef.inputRef) {
|
|
349
|
-
var _this$selectRef2;
|
|
350
|
-
if (providedAriaLabel) {
|
|
351
|
-
// I might want to use a comma instead of a period here, when the feature flag is removed.
|
|
352
|
-
ariaLabelText = "".concat(providedAriaLabel, ". ").concat(ariaLabelText);
|
|
353
|
-
}
|
|
354
|
-
(_this$selectRef2 = _this.selectRef) === null || _this$selectRef2 === void 0 || (_this$selectRef2 = _this$selectRef2.select.inputRef) === null || _this$selectRef2 === void 0 || _this$selectRef2.setAttribute('aria-label', ariaLabelText);
|
|
355
|
-
}
|
|
356
|
-
};
|
|
357
|
-
var generateNoGroupsAriaText = function generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix) {
|
|
358
|
-
var _options$findIndex;
|
|
359
|
-
var focused = onFocusProps.focused;
|
|
360
|
-
var options = (props === null || props === void 0 ? void 0 : props.options) || [];
|
|
361
|
-
var totalLength = options === null || options === void 0 ? void 0 : options.length;
|
|
362
|
-
var optionIndex = (_options$findIndex = options === null || options === void 0 ? void 0 : options.findIndex(function (option) {
|
|
363
|
-
return option === focused;
|
|
364
|
-
})) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
|
|
365
|
-
var optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
|
|
366
|
-
var ariaLabelText = fg('design_system_select-a11y-improvement') ? "".concat(optionName, ", (").concat(optionIndex + 1, " of ").concat(totalLength, ")") : "Option ".concat(optionName, " focused, ").concat(optionIndex + 1, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
|
|
367
|
-
// Option LABEL focused, 1 of 8. 8 results available.
|
|
368
|
-
// Use Up and Down to choose options, press Enter to select the currently focused option,
|
|
369
|
-
// press Escape to exit the menu.
|
|
370
|
-
return ariaLabelText;
|
|
371
|
-
};
|
|
372
|
-
var onReactSelectFocus = function onReactSelectFocus(onFocusProps) {
|
|
373
|
-
var _props$options;
|
|
374
|
-
var ariaLabelSuffix = fg('design_system_select-a11y-improvement') ? '' : ' Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu.';
|
|
375
|
-
var ariaLabelText = '';
|
|
376
|
-
var ariaLiveMessage = '';
|
|
377
|
-
if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
|
|
378
|
-
if (isOptionsGrouped(props.options)) {
|
|
379
|
-
var totalLength = countAllOptions(props.options);
|
|
380
|
-
ariaLiveMessage = onFocus(onFocusProps, props.options);
|
|
381
|
-
ariaLabelText = "".concat(ariaLiveMessage, " ").concat(totalLength, " results available. ").concat(ariaLabelSuffix);
|
|
382
|
-
} else {
|
|
383
|
-
ariaLabelText = generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix);
|
|
384
|
-
ariaLiveMessage = ariaLabelText;
|
|
385
|
-
}
|
|
386
|
-
// Safari still does not announce the first option when menu is opened, so forcing a change to the input label
|
|
387
|
-
// will include the first option in the initial announcement.
|
|
388
|
-
if (!fg('design_system_select-a11y-improvement') || isSafari() && fg('design_system_select-a11y-improvement')) {
|
|
389
|
-
updateInputAriaLabel(ariaLabelText);
|
|
390
|
-
}
|
|
391
|
-
return ariaLiveMessage;
|
|
392
|
-
}
|
|
393
|
-
return ariaLiveMessage;
|
|
394
|
-
};
|
|
395
341
|
var popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
|
|
396
342
|
onFirstUpdate: function onFirstUpdate(state) {
|
|
397
343
|
var _mergedPopperProps$on;
|
|
@@ -418,11 +364,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
|
|
|
418
364
|
disabled: !focusLockEnabled,
|
|
419
365
|
returnFocus: true
|
|
420
366
|
}, /*#__PURE__*/React.createElement(Select, _extends({
|
|
421
|
-
label:
|
|
422
|
-
// TODO: Popup Select does not work well with active-descendant
|
|
423
|
-
,
|
|
424
|
-
"aria-live": isAppleDevice() && fg('design_system_select-a11y-improvement') ? 'assertive' // only needed on Apple products
|
|
425
|
-
: undefined,
|
|
367
|
+
label: getLabel(),
|
|
426
368
|
backspaceRemovesValue: false,
|
|
427
369
|
controlShouldRenderValue: false,
|
|
428
370
|
isClearable: false,
|
|
@@ -436,11 +378,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
|
|
|
436
378
|
maxMenuHeight: _this.getMaxHeight(),
|
|
437
379
|
components: selectComponents,
|
|
438
380
|
onChange: _this.handleSelectChange,
|
|
439
|
-
testId: testId
|
|
440
|
-
ariaLiveMessages: _objectSpread({
|
|
441
|
-
// Overwriting ariaLiveMessages builtin onFocus method to announce selected option when popup has been opened
|
|
442
|
-
onFocus: onReactSelectFocus
|
|
443
|
-
}, props.ariaLiveMessages)
|
|
381
|
+
testId: testId
|
|
444
382
|
// Note: We are intentionally not using `onMenuClose={this.close}` here, due to state management conflicts
|
|
445
383
|
// between PopupSelect's popup and the internal select menu. This can result in the PopupSelect closing
|
|
446
384
|
// or opening unexpectedly.
|
package/dist/esm/Select.js
CHANGED
|
@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
3
3
|
import AsyncSelect from '@atlaskit/react-select/async';
|
|
4
4
|
import createSelect from './createSelect';
|
|
5
5
|
var packageName = "@atlaskit/select";
|
|
6
|
-
var packageVersion = "20.
|
|
6
|
+
var packageVersion = "20.7.0";
|
|
7
7
|
export var SelectWithoutAnalytics = createSelect(AsyncSelect);
|
|
8
8
|
var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
|
|
9
9
|
var Select = withAnalyticsContext({
|
package/dist/esm/createSelect.js
CHANGED
|
@@ -1,14 +1,9 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
3
|
var _excluded = ["ariaLiveMessages", "isInvalid", "onClickPreventDefault", "tabSelectsValue", "validationState"];
|
|
5
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
4
|
/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
|
|
8
5
|
// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
|
|
9
6
|
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
|
|
10
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
11
|
-
import { isOptionsGrouped, onFocus as _onFocus } from './utils/grouped-options-announcement';
|
|
12
7
|
export default function createSelect(WrappedComponent) {
|
|
13
8
|
var AtlaskitSelect = /*#__PURE__*/forwardRef(function AtlaskitSelect(props, forwardedRef) {
|
|
14
9
|
var ariaLiveMessages = props.ariaLiveMessages,
|
|
@@ -44,14 +39,7 @@ export default function createSelect(WrappedComponent) {
|
|
|
44
39
|
}, []);
|
|
45
40
|
return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
|
|
46
41
|
ref: internalSelectRef,
|
|
47
|
-
|
|
48
|
-
ariaLiveMessages:
|
|
49
|
-
//TO DO: Still need live region for PopupSelect because of the menu being open by default
|
|
50
|
-
isOptionsGrouped(props.options) ? _objectSpread({
|
|
51
|
-
onFocus: function onFocus(data) {
|
|
52
|
-
return _onFocus(data, props.options);
|
|
53
|
-
}
|
|
54
|
-
}, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages),
|
|
42
|
+
ariaLiveMessages: ariaLiveMessages,
|
|
55
43
|
tabSelectsValue: tabSelectsValue,
|
|
56
44
|
onClickPreventDefault: onClickPreventDefault,
|
|
57
45
|
isInvalid: isInvalid || validationState === 'error'
|
package/dist/esm/index.js
CHANGED
|
@@ -7,7 +7,6 @@ export { default as AsyncSelect } from './entry-points/async-select';
|
|
|
7
7
|
export { default as CreatableSelect } from './entry-points/creatable-select';
|
|
8
8
|
export { default as AsyncCreatableSelect } from './entry-points/async-creatable-select';
|
|
9
9
|
export { isOptionsGrouped } from './utils/grouped-options-announcement';
|
|
10
|
-
export { isCountryOptionsGrouped, onCountryOptionFocus } from './utils/country-groups-announcement';
|
|
11
10
|
export { default as CheckboxSelect } from './CheckboxSelect';
|
|
12
11
|
export { default as CountrySelect } from './CountrySelect';
|
|
13
12
|
export { default as RadioSelect } from './RadioSelect';
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
// Used for overwriting ariaLiveMessages builtin onFocus method.
|
|
3
|
-
// Returns custom built string while focusing each group option. This string is used for screen reader announcement.
|
|
4
|
-
export function onFocus(onFocusProps, defaultOptions) {
|
|
1
|
+
export function generateGroupLabel(onFocusProps, defaultOptions) {
|
|
5
2
|
var _groupData$options$fi;
|
|
6
3
|
var focused = onFocusProps.focused;
|
|
7
4
|
var isOptionFocused = function isOptionFocused(option) {
|
|
@@ -12,10 +9,8 @@ export function onFocus(onFocusProps, defaultOptions) {
|
|
|
12
9
|
return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
|
|
13
10
|
});
|
|
14
11
|
var groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
18
|
-
return "Option ".concat(focused.label, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label, " group, item ").concat(groupOptionIndex + 1, " out of ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.options.length, ". All in all ");
|
|
12
|
+
var totalLength = countAllOptions(defaultOptions);
|
|
13
|
+
return "".concat(focused.label, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label, " (").concat(groupOptionIndex + 1, " of ").concat(totalLength, ")");
|
|
19
14
|
}
|
|
20
15
|
|
|
21
16
|
// Helper function which identifies if options are grouped.
|
package/dist/types/index.d.ts
CHANGED
|
@@ -7,7 +7,6 @@ export { default as AsyncSelect } from './entry-points/async-select';
|
|
|
7
7
|
export { default as CreatableSelect } from './entry-points/creatable-select';
|
|
8
8
|
export { default as AsyncCreatableSelect } from './entry-points/async-creatable-select';
|
|
9
9
|
export { isOptionsGrouped } from './utils/grouped-options-announcement';
|
|
10
|
-
export { isCountryOptionsGrouped, onCountryOptionFocus, type CountyGroupOptions, } from './utils/country-groups-announcement';
|
|
11
10
|
export { default as CheckboxSelect } from './CheckboxSelect';
|
|
12
11
|
export { default as CountrySelect } from './CountrySelect';
|
|
13
12
|
export { default as RadioSelect } from './RadioSelect';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type AriaOnFocusProps, type GroupBase, type OptionsOrGroups } from '@atlaskit/react-select';
|
|
2
2
|
import { type GroupType, type OptionType } from '../types';
|
|
3
|
-
export declare function
|
|
3
|
+
export declare function generateGroupLabel(onFocusProps: AriaOnFocusProps<OptionType, GroupBase<OptionType>>, defaultOptions?: OptionsOrGroups<OptionType, GroupType<OptionType>>): string;
|
|
4
4
|
export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>> | undefined) => boolean | undefined;
|
|
5
5
|
export declare const countAllOptions: (groupsArray: readonly GroupType<OptionType>[]) => number;
|
|
@@ -7,7 +7,6 @@ export { default as AsyncSelect } from './entry-points/async-select';
|
|
|
7
7
|
export { default as CreatableSelect } from './entry-points/creatable-select';
|
|
8
8
|
export { default as AsyncCreatableSelect } from './entry-points/async-creatable-select';
|
|
9
9
|
export { isOptionsGrouped } from './utils/grouped-options-announcement';
|
|
10
|
-
export { isCountryOptionsGrouped, onCountryOptionFocus, type CountyGroupOptions, } from './utils/country-groups-announcement';
|
|
11
10
|
export { default as CheckboxSelect } from './CheckboxSelect';
|
|
12
11
|
export { default as CountrySelect } from './CountrySelect';
|
|
13
12
|
export { default as RadioSelect } from './RadioSelect';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type AriaOnFocusProps, type GroupBase, type OptionsOrGroups } from '@atlaskit/react-select';
|
|
2
2
|
import { type GroupType, type OptionType } from '../types';
|
|
3
|
-
export declare function
|
|
3
|
+
export declare function generateGroupLabel(onFocusProps: AriaOnFocusProps<OptionType, GroupBase<OptionType>>, defaultOptions?: OptionsOrGroups<OptionType, GroupType<OptionType>>): string;
|
|
4
4
|
export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>> | undefined) => boolean | undefined;
|
|
5
5
|
export declare const countAllOptions: (groupsArray: readonly GroupType<OptionType>[]) => number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/select",
|
|
3
|
-
"version": "20.
|
|
3
|
+
"version": "20.7.0",
|
|
4
4
|
"description": "Select allows users to make a single selection or multiple selections from a list of options.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -41,15 +41,15 @@
|
|
|
41
41
|
".": "./src/index.tsx"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@atlaskit/analytics-next": "^11.
|
|
44
|
+
"@atlaskit/analytics-next": "^11.1.0",
|
|
45
45
|
"@atlaskit/ds-lib": "^4.0.0",
|
|
46
46
|
"@atlaskit/icon": "^26.4.0",
|
|
47
47
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
48
48
|
"@atlaskit/primitives": "^14.8.0",
|
|
49
|
-
"@atlaskit/react-select": "^2.
|
|
49
|
+
"@atlaskit/react-select": "^2.7.0",
|
|
50
50
|
"@atlaskit/spinner": "^18.0.0",
|
|
51
51
|
"@atlaskit/theme": "^18.0.0",
|
|
52
|
-
"@atlaskit/tokens": "^
|
|
52
|
+
"@atlaskit/tokens": "^5.1.0",
|
|
53
53
|
"@atlaskit/visually-hidden": "^3.0.0",
|
|
54
54
|
"@babel/runtime": "^7.0.0",
|
|
55
55
|
"@compiled/react": "^0.18.3",
|
|
@@ -70,10 +70,10 @@
|
|
|
70
70
|
"@atlaskit/button": "^23.2.0",
|
|
71
71
|
"@atlaskit/checkbox": "^17.1.0",
|
|
72
72
|
"@atlaskit/docs": "^10.0.0",
|
|
73
|
-
"@atlaskit/drawer": "^
|
|
73
|
+
"@atlaskit/drawer": "^11.0.0",
|
|
74
74
|
"@atlaskit/form": "^12.0.0",
|
|
75
75
|
"@atlaskit/link": "^3.2.0",
|
|
76
|
-
"@atlaskit/logo": "^
|
|
76
|
+
"@atlaskit/logo": "^19.0.0",
|
|
77
77
|
"@atlaskit/modal-dialog": "^14.2.0",
|
|
78
78
|
"@atlaskit/radio": "^8.1.0",
|
|
79
79
|
"@atlaskit/section-message": "^8.2.0",
|
|
@@ -108,10 +108,6 @@
|
|
|
108
108
|
"platform-visual-refresh-icons-legacy-facade": {
|
|
109
109
|
"type": "boolean"
|
|
110
110
|
},
|
|
111
|
-
"design_system_select-a11y-improvement": {
|
|
112
|
-
"type": "boolean",
|
|
113
|
-
"referenceOnly": true
|
|
114
|
-
},
|
|
115
111
|
"platform-visual-refresh-icons": {
|
|
116
112
|
"type": "boolean"
|
|
117
113
|
},
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.isCountryOptionsGrouped = void 0;
|
|
7
|
-
exports.onCountryOptionFocus = onCountryOptionFocus;
|
|
8
|
-
// Used for overwriting ariaLiveMessages builtin onFocus method.
|
|
9
|
-
// Returns custom built string while focusing each group option. This string is used for screen reader announcement.
|
|
10
|
-
function onCountryOptionFocus(onFocusProps, defaultOptions) {
|
|
11
|
-
var _groupData$options$fi;
|
|
12
|
-
var focused = onFocusProps.focused;
|
|
13
|
-
var isOptionFocused = function isOptionFocused(option) {
|
|
14
|
-
return option.name === focused.name;
|
|
15
|
-
};
|
|
16
|
-
var groupData = defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(function (option) {
|
|
17
|
-
var _option$options;
|
|
18
|
-
return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
|
|
19
|
-
});
|
|
20
|
-
var groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
|
|
21
|
-
return "Option ".concat(focused.name, " (").concat(focused.abbr.toUpperCase(), ") +").concat(focused.code, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label, " group, item ").concat(groupOptionIndex + 1, " out of ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.options.length, ". All in all ");
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
// Helper function which identifies if options are grouped.
|
|
25
|
-
var isCountryOptionsGrouped = exports.isCountryOptionsGrouped = function isCountryOptionsGrouped(arr) {
|
|
26
|
-
return arr === null || arr === void 0 ? void 0 : arr.every(function (obj) {
|
|
27
|
-
return obj.hasOwnProperty('options');
|
|
28
|
-
});
|
|
29
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
// Used for overwriting ariaLiveMessages builtin onFocus method.
|
|
2
|
-
// Returns custom built string while focusing each group option. This string is used for screen reader announcement.
|
|
3
|
-
export function onCountryOptionFocus(onFocusProps, defaultOptions) {
|
|
4
|
-
var _groupData$options$fi;
|
|
5
|
-
const {
|
|
6
|
-
focused
|
|
7
|
-
} = onFocusProps;
|
|
8
|
-
const isOptionFocused = option => {
|
|
9
|
-
return option.name === focused.name;
|
|
10
|
-
};
|
|
11
|
-
const groupData = defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(option => {
|
|
12
|
-
var _option$options;
|
|
13
|
-
return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
|
|
14
|
-
});
|
|
15
|
-
const groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
|
|
16
|
-
return `Option ${focused.name} (${focused.abbr.toUpperCase()}) +${focused.code}, ${groupData === null || groupData === void 0 ? void 0 : groupData.label} group, item ${groupOptionIndex + 1} out of ${groupData === null || groupData === void 0 ? void 0 : groupData.options.length}. All in all `;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
// Helper function which identifies if options are grouped.
|
|
20
|
-
export const isCountryOptionsGrouped = arr => {
|
|
21
|
-
return arr === null || arr === void 0 ? void 0 : arr.every(obj => obj.hasOwnProperty('options'));
|
|
22
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
// Used for overwriting ariaLiveMessages builtin onFocus method.
|
|
2
|
-
// Returns custom built string while focusing each group option. This string is used for screen reader announcement.
|
|
3
|
-
export function onCountryOptionFocus(onFocusProps, defaultOptions) {
|
|
4
|
-
var _groupData$options$fi;
|
|
5
|
-
var focused = onFocusProps.focused;
|
|
6
|
-
var isOptionFocused = function isOptionFocused(option) {
|
|
7
|
-
return option.name === focused.name;
|
|
8
|
-
};
|
|
9
|
-
var groupData = defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(function (option) {
|
|
10
|
-
var _option$options;
|
|
11
|
-
return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
|
|
12
|
-
});
|
|
13
|
-
var groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
|
|
14
|
-
return "Option ".concat(focused.name, " (").concat(focused.abbr.toUpperCase(), ") +").concat(focused.code, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label, " group, item ").concat(groupOptionIndex + 1, " out of ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.options.length, ". All in all ");
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
// Helper function which identifies if options are grouped.
|
|
18
|
-
export var isCountryOptionsGrouped = function isCountryOptionsGrouped(arr) {
|
|
19
|
-
return arr === null || arr === void 0 ? void 0 : arr.every(function (obj) {
|
|
20
|
-
return obj.hasOwnProperty('options');
|
|
21
|
-
});
|
|
22
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { type AriaOnFocusProps, type OptionsOrGroups } from '@atlaskit/react-select';
|
|
2
|
-
import { type GroupType } from '../types';
|
|
3
|
-
type Country = {
|
|
4
|
-
icon: string;
|
|
5
|
-
name: string;
|
|
6
|
-
abbr: string;
|
|
7
|
-
code: string | number;
|
|
8
|
-
};
|
|
9
|
-
export type CountyGroupOptions = {
|
|
10
|
-
label: string;
|
|
11
|
-
options: Country[];
|
|
12
|
-
};
|
|
13
|
-
export declare function onCountryOptionFocus(onFocusProps: AriaOnFocusProps<Country, GroupType<Country>>, defaultOptions?: CountyGroupOptions[]): string;
|
|
14
|
-
export declare const isCountryOptionsGrouped: (arr?: OptionsOrGroups<Country, GroupType<Country>>) => boolean | undefined;
|
|
15
|
-
export {};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { type AriaOnFocusProps, type OptionsOrGroups } from '@atlaskit/react-select';
|
|
2
|
-
import { type GroupType } from '../types';
|
|
3
|
-
type Country = {
|
|
4
|
-
icon: string;
|
|
5
|
-
name: string;
|
|
6
|
-
abbr: string;
|
|
7
|
-
code: string | number;
|
|
8
|
-
};
|
|
9
|
-
export type CountyGroupOptions = {
|
|
10
|
-
label: string;
|
|
11
|
-
options: Country[];
|
|
12
|
-
};
|
|
13
|
-
export declare function onCountryOptionFocus(onFocusProps: AriaOnFocusProps<Country, GroupType<Country>>, defaultOptions?: CountyGroupOptions[]): string;
|
|
14
|
-
export declare const isCountryOptionsGrouped: (arr?: OptionsOrGroups<Country, GroupType<Country>>) => boolean | undefined;
|
|
15
|
-
export {};
|