@ntbjs/react-components 1.1.0-beta.45 → 1.1.0-beta.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/{ActionButton-90485300.js → ActionButton-c3f5ed94.js} +1 -1
  2. package/{Alert-fcc0bb50.js → Alert-3e4f8be1.js} +1 -1
  3. package/{AssetGallery-d4b26808.js → AssetGallery-9a11459d.js} +18 -18
  4. package/{AssetPreviewTopBar-020a6f96.js → AssetPreviewTopBar-159b9885.js} +1 -1
  5. package/{AutocompleteSelect-8ebb82de.js → AutocompleteSelect-45be3cb4.js} +2 -2
  6. package/{Badge-34ad2850.js → Badge-9bcebe96.js} +1 -1
  7. package/{Button-32e38cc9.js → Button-dd271c4b.js} +3 -3
  8. package/{Checkbox-50f1f3c7.js → Checkbox-1a92da17.js} +4 -3
  9. package/{CompactStarRating-f05e7414.js → CompactStarRating-364ca893.js} +1 -1
  10. package/{CompactTextInput-3627d8ab.js → CompactTextInput-ea908a7c.js} +7 -7
  11. package/{ContextMenu-59c2a64f.js → ContextMenu-d088833b.js} +1 -1
  12. package/{InputGroup-66dd343c.js → InputGroup-09ce9572.js} +1 -1
  13. package/{Instructions-5c48bcee.js → Instructions-d8ab91c2.js} +3 -3
  14. package/{MultiSelect-873f707d.js → MultiSelect-2cbc13b3.js} +2 -2
  15. package/{Popover-de874e41.js → Popover-11df9750.js} +2 -2
  16. package/{Radio-0b46b2a8.js → Radio-0594409d.js} +1 -1
  17. package/{SectionSeparator-12aff748.js → SectionSeparator-225719cd.js} +1 -1
  18. package/{Switch-aa384260.js → Switch-cd165c8c.js} +1 -1
  19. package/{Tab-075c8c0a.js → Tab-7fe07e8b.js} +1 -1
  20. package/{Tabs-22df37ba.js → Tabs-1269b6fe.js} +3 -3
  21. package/{TextArea-af6a812d.js → TextArea-8cffb1e7.js} +1 -1
  22. package/{TextInput-e4c6d536.js → TextInput-a1083be3.js} +1 -1
  23. package/{Tooltip-e7f59097.js → Tooltip-e4e5e0e5.js} +2 -2
  24. package/data/Alert/index.js +2 -2
  25. package/data/Badge/index.js +2 -2
  26. package/data/Popover/index.js +3 -3
  27. package/data/Tab/index.js +2 -2
  28. package/data/Tabs/index.js +3 -3
  29. package/data/Tooltip/index.js +3 -3
  30. package/data/index.js +8 -8
  31. package/{defaultTheme-870f7df1.js → defaultTheme-50f2b88f.js} +17 -0
  32. package/inputs/ActionButton/index.js +2 -2
  33. package/inputs/AutocompleteSelect/index.js +3 -3
  34. package/inputs/Button/index.js +5 -5
  35. package/inputs/Checkbox/index.js +2 -2
  36. package/inputs/CompactStarRating/index.js +2 -2
  37. package/inputs/CompactTextInput/index.js +9 -9
  38. package/inputs/MultiSelect/index.js +3 -3
  39. package/inputs/Radio/index.js +2 -2
  40. package/inputs/Switch/index.js +2 -2
  41. package/inputs/TextArea/index.js +2 -2
  42. package/inputs/TextInput/index.js +2 -2
  43. package/inputs/index.js +21 -21
  44. package/layout/InputGroup/index.js +2 -2
  45. package/layout/SectionSeparator/index.js +2 -2
  46. package/layout/index.js +3 -3
  47. package/package.json +1 -1
  48. package/{react-select-creatable.esm-eb462367.js → react-select-creatable.esm-2f23d6c6.js} +124 -37
  49. package/{shift-away-subtle-0bdd3b0d.js → shift-away-subtle-cfdf1dbe.js} +1 -1
  50. package/widgets/AssetGallery/index.js +22 -22
  51. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +2 -2
  52. package/widgets/ContextMenu/ContextMenuItem/index.js +1 -1
  53. package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +1 -1
  54. package/widgets/ContextMenu/index.js +2 -2
  55. package/widgets/Instructions/index.js +5 -5
  56. package/widgets/index.js +24 -24
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var TextArea = require('../../TextArea-af6a812d.js');
4
- require('../../defaultTheme-870f7df1.js');
3
+ var TextArea = require('../../TextArea-8cffb1e7.js');
4
+ require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
  require('nanoid');
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var TextInput = require('../../TextInput-e4c6d536.js');
4
- require('../../defaultTheme-870f7df1.js');
3
+ var TextInput = require('../../TextInput-a1083be3.js');
4
+ require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
  require('nanoid');
package/inputs/index.js CHANGED
@@ -2,39 +2,39 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var ActionButton = require('../ActionButton-90485300.js');
6
- var AutocompleteSelect = require('../AutocompleteSelect-8ebb82de.js');
7
- var Button = require('../Button-32e38cc9.js');
8
- var Checkbox = require('../Checkbox-50f1f3c7.js');
9
- var CompactStarRating = require('../CompactStarRating-f05e7414.js');
10
- var CompactTextInput = require('../CompactTextInput-3627d8ab.js');
11
- var MultiSelect = require('../MultiSelect-873f707d.js');
12
- var Radio = require('../Radio-0b46b2a8.js');
13
- var TextArea = require('../TextArea-af6a812d.js');
14
- var TextInput = require('../TextInput-e4c6d536.js');
15
- var Switch = require('../Switch-aa384260.js');
16
- require('../defaultTheme-870f7df1.js');
5
+ var ActionButton = require('../ActionButton-c3f5ed94.js');
6
+ var AutocompleteSelect = require('../AutocompleteSelect-45be3cb4.js');
7
+ var Button = require('../Button-dd271c4b.js');
8
+ var Checkbox = require('../Checkbox-1a92da17.js');
9
+ var CompactStarRating = require('../CompactStarRating-364ca893.js');
10
+ var CompactTextInput = require('../CompactTextInput-ea908a7c.js');
11
+ var MultiSelect = require('../MultiSelect-2cbc13b3.js');
12
+ var Radio = require('../Radio-0594409d.js');
13
+ var TextArea = require('../TextArea-8cffb1e7.js');
14
+ var TextInput = require('../TextInput-a1083be3.js');
15
+ var Switch = require('../Switch-cd165c8c.js');
16
+ require('../defaultTheme-50f2b88f.js');
17
17
  require('styled-components');
18
18
  require('react');
19
19
  require('nanoid');
20
20
  require('lodash');
21
21
  require('react-select');
22
- require('../react-select-creatable.esm-eb462367.js');
22
+ require('../react-select-creatable.esm-2f23d6c6.js');
23
23
  require('react-dom');
24
24
  require('react-select-async-paginate');
25
25
  require('../close-ebf2f3cf.js');
26
26
  require('../expand-more-94585605.js');
27
- require('../Popover-de874e41.js');
27
+ require('../Popover-11df9750.js');
28
28
  require('polished');
29
29
  require('@tippyjs/react');
30
- require('../shift-away-subtle-0bdd3b0d.js');
31
- require('../ContextMenu-59c2a64f.js');
30
+ require('../shift-away-subtle-cfdf1dbe.js');
31
+ require('../ContextMenu-d088833b.js');
32
32
  require('../edit-note-c47d292e.js');
33
- require('../Alert-fcc0bb50.js');
34
- require('../Badge-34ad2850.js');
35
- require('../Tab-075c8c0a.js');
36
- require('../Tabs-22df37ba.js');
37
- require('../Tooltip-e7f59097.js');
33
+ require('../Alert-3e4f8be1.js');
34
+ require('../Badge-9bcebe96.js');
35
+ require('../Tab-7fe07e8b.js');
36
+ require('../Tabs-1269b6fe.js');
37
+ require('../Tooltip-e4e5e0e5.js');
38
38
 
39
39
 
40
40
 
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var InputGroup = require('../../InputGroup-66dd343c.js');
4
- require('../../defaultTheme-870f7df1.js');
3
+ var InputGroup = require('../../InputGroup-09ce9572.js');
4
+ require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
 
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var SectionSeparator = require('../../SectionSeparator-12aff748.js');
4
- require('../../defaultTheme-870f7df1.js');
3
+ var SectionSeparator = require('../../SectionSeparator-225719cd.js');
4
+ require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
 
package/layout/index.js CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var InputGroup = require('../InputGroup-66dd343c.js');
6
- var SectionSeparator = require('../SectionSeparator-12aff748.js');
7
- require('../defaultTheme-870f7df1.js');
5
+ var InputGroup = require('../InputGroup-09ce9572.js');
6
+ var SectionSeparator = require('../SectionSeparator-225719cd.js');
7
+ require('../defaultTheme-50f2b88f.js');
8
8
  require('styled-components');
9
9
  require('react');
10
10
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.1.0-beta.45",
3
+ "version": "1.1.0-beta.47",
4
4
  "description": "NTBs common front-end design utilities and React components.",
5
5
  "scripts": {
6
6
  "build": "cross-env NODE_ENV=production rollup -c",
@@ -4938,14 +4938,14 @@ var defaultAriaLiveMessages = {
4938
4938
  guidance: function guidance(props) {
4939
4939
  var isSearchable = props.isSearchable,
4940
4940
  isMulti = props.isMulti,
4941
- isDisabled = props.isDisabled,
4942
4941
  tabSelectsValue = props.tabSelectsValue,
4943
- context = props.context;
4942
+ context = props.context,
4943
+ isInitialFocus = props.isInitialFocus;
4944
4944
  switch (context) {
4945
4945
  case 'menu':
4946
- return "Use Up and Down to choose options".concat(isDisabled ? '' : ', press Enter to select the currently focused option', ", press Escape to exit the menu").concat(tabSelectsValue ? ', press Tab to select the option and exit the menu' : '', ".");
4946
+ return "Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu".concat(tabSelectsValue ? ', press Tab to select the option and exit the menu' : '', ".");
4947
4947
  case 'input':
4948
- return "".concat(props['aria-label'] || 'Select', " is focused ").concat(isSearchable ? ',type to refine list' : '', ", press Down to open the menu, ").concat(isMulti ? ' press left to focus selected values' : '');
4948
+ return isInitialFocus ? "".concat(props['aria-label'] || 'Select', " is focused ").concat(isSearchable ? ',type to refine list' : '', ", press Down to open the menu, ").concat(isMulti ? ' press left to focus selected values' : '') : '';
4949
4949
  case 'value':
4950
4950
  return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';
4951
4951
  default:
@@ -4981,17 +4981,18 @@ var defaultAriaLiveMessages = {
4981
4981
  label = _props$label2 === void 0 ? '' : _props$label2,
4982
4982
  selectValue = props.selectValue,
4983
4983
  isDisabled = props.isDisabled,
4984
- isSelected = props.isSelected;
4984
+ isSelected = props.isSelected,
4985
+ isAppleDevice = props.isAppleDevice;
4985
4986
  var getArrayIndex = function getArrayIndex(arr, item) {
4986
4987
  return arr && arr.length ? "".concat(arr.indexOf(item) + 1, " of ").concat(arr.length) : '';
4987
4988
  };
4988
4989
  if (context === 'value' && selectValue) {
4989
4990
  return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
4990
4991
  }
4991
- if (context === 'menu') {
4992
+ if (context === 'menu' && isAppleDevice) {
4992
4993
  var disabled = isDisabled ? ' disabled' : '';
4993
- var status = "".concat(isSelected ? 'selected' : 'focused').concat(disabled);
4994
- return "option ".concat(label, " ").concat(status, ", ").concat(getArrayIndex(options, focused), ".");
4994
+ var status = "".concat(isSelected ? ' selected' : '').concat(disabled);
4995
+ return "".concat(label).concat(status, ", ").concat(getArrayIndex(options, focused), ".");
4995
4996
  }
4996
4997
  return '';
4997
4998
  },
@@ -5010,7 +5011,8 @@ var LiveRegion = function LiveRegion(props) {
5010
5011
  isFocused = props.isFocused,
5011
5012
  selectValue = props.selectValue,
5012
5013
  selectProps = props.selectProps,
5013
- id = props.id;
5014
+ id = props.id,
5015
+ isAppleDevice = props.isAppleDevice;
5014
5016
  var ariaLiveMessages = selectProps.ariaLiveMessages,
5015
5017
  getOptionLabel = selectProps.getOptionLabel,
5016
5018
  inputValue = selectProps.inputValue,
@@ -5020,7 +5022,8 @@ var LiveRegion = function LiveRegion(props) {
5020
5022
  menuIsOpen = selectProps.menuIsOpen,
5021
5023
  options = selectProps.options,
5022
5024
  screenReaderStatus = selectProps.screenReaderStatus,
5023
- tabSelectsValue = selectProps.tabSelectsValue;
5025
+ tabSelectsValue = selectProps.tabSelectsValue,
5026
+ isLoading = selectProps.isLoading;
5024
5027
  var ariaLabel = selectProps['aria-label'];
5025
5028
  var ariaLive = selectProps['aria-live'];
5026
5029
 
@@ -5073,15 +5076,16 @@ var LiveRegion = function LiveRegion(props) {
5073
5076
  isSelected: isSelected,
5074
5077
  options: focusableOptions,
5075
5078
  context: focused === focusedOption ? 'menu' : 'value',
5076
- selectValue: selectValue
5079
+ selectValue: selectValue,
5080
+ isAppleDevice: isAppleDevice
5077
5081
  };
5078
5082
  focusMsg = messages.onFocus(onFocusProps);
5079
5083
  }
5080
5084
  return focusMsg;
5081
- }, [focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue]);
5085
+ }, [focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice]);
5082
5086
  var ariaResults = React.useMemo(function () {
5083
5087
  var resultsMsg = '';
5084
- if (menuIsOpen && options.length && messages.onFilter) {
5088
+ if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
5085
5089
  var resultsMessage = screenReaderStatus({
5086
5090
  count: focusableOptions.length
5087
5091
  });
@@ -5091,7 +5095,8 @@ var LiveRegion = function LiveRegion(props) {
5091
5095
  });
5092
5096
  }
5093
5097
  return resultsMsg;
5094
- }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus]);
5098
+ }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
5099
+ var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
5095
5100
  var ariaGuidance = React.useMemo(function () {
5096
5101
  var guidanceMsg = '';
5097
5102
  if (messages.guidance) {
@@ -5102,24 +5107,28 @@ var LiveRegion = function LiveRegion(props) {
5102
5107
  isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
5103
5108
  isMulti: isMulti,
5104
5109
  isSearchable: isSearchable,
5105
- tabSelectsValue: tabSelectsValue
5110
+ tabSelectsValue: tabSelectsValue,
5111
+ isInitialFocus: isInitialFocus
5106
5112
  });
5107
5113
  }
5108
5114
  return guidanceMsg;
5109
- }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue]);
5110
- var ariaContext = "".concat(ariaFocused, " ").concat(ariaResults, " ").concat(ariaGuidance);
5115
+ }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
5111
5116
  var ScreenReaderText = jsx(React.Fragment, null, jsx("span", {
5112
5117
  id: "aria-selection"
5113
5118
  }, ariaSelected), jsx("span", {
5114
- id: "aria-context"
5115
- }, ariaContext));
5116
- var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
5119
+ id: "aria-focused"
5120
+ }, ariaFocused), jsx("span", {
5121
+ id: "aria-results"
5122
+ }, ariaResults), jsx("span", {
5123
+ id: "aria-guidance"
5124
+ }, ariaGuidance));
5117
5125
  return jsx(React.Fragment, null, jsx(A11yText$1, {
5118
5126
  id: id
5119
5127
  }, isInitialFocus && ScreenReaderText), jsx(A11yText$1, {
5120
5128
  "aria-live": ariaLive,
5121
5129
  "aria-atomic": "false",
5122
- "aria-relevant": "additions text"
5130
+ "aria-relevant": "additions text",
5131
+ role: "log"
5123
5132
  }, isFocused && !isInitialFocus && ScreenReaderText));
5124
5133
  };
5125
5134
  var LiveRegion$1 = LiveRegion;
@@ -5759,6 +5768,30 @@ var RequiredInput = function RequiredInput(_ref) {
5759
5768
  };
5760
5769
  var RequiredInput$1 = RequiredInput;
5761
5770
 
5771
+ /// <reference types="user-agent-data-types" />
5772
+
5773
+ function testPlatform(re) {
5774
+ var _window$navigator$use;
5775
+ return typeof window !== 'undefined' && window.navigator != null ? re.test(((_window$navigator$use = window.navigator['userAgentData']) === null || _window$navigator$use === void 0 ? void 0 : _window$navigator$use.platform) || window.navigator.platform) : false;
5776
+ }
5777
+ function isIPhone() {
5778
+ return testPlatform(/^iPhone/i);
5779
+ }
5780
+ function isMac() {
5781
+ return testPlatform(/^Mac/i);
5782
+ }
5783
+ function isIPad() {
5784
+ return testPlatform(/^iPad/i) ||
5785
+ // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
5786
+ isMac() && navigator.maxTouchPoints > 1;
5787
+ }
5788
+ function isIOS() {
5789
+ return isIPhone() || isIPad();
5790
+ }
5791
+ function isAppleDevice() {
5792
+ return isMac() || isIOS();
5793
+ }
5794
+
5762
5795
  var formatGroupLabel = function formatGroupLabel(group) {
5763
5796
  return group.label;
5764
5797
  };
@@ -5928,6 +5961,24 @@ function buildFocusableOptionsFromCategorizedOptions(categorizedOptions) {
5928
5961
  return optionsAccumulator;
5929
5962
  }, []);
5930
5963
  }
5964
+ function buildFocusableOptionsWithIds(categorizedOptions, optionId) {
5965
+ return categorizedOptions.reduce(function (optionsAccumulator, categorizedOption) {
5966
+ if (categorizedOption.type === 'group') {
5967
+ optionsAccumulator.push.apply(optionsAccumulator, _toConsumableArray(categorizedOption.options.map(function (option) {
5968
+ return {
5969
+ data: option.data,
5970
+ id: "".concat(optionId, "-").concat(categorizedOption.index, "-").concat(option.index)
5971
+ };
5972
+ })));
5973
+ } else {
5974
+ optionsAccumulator.push({
5975
+ data: categorizedOption.data,
5976
+ id: "".concat(optionId, "-").concat(categorizedOption.index)
5977
+ });
5978
+ }
5979
+ return optionsAccumulator;
5980
+ }, []);
5981
+ }
5931
5982
  function buildFocusableOptions(props, selectValue) {
5932
5983
  return buildFocusableOptionsFromCategorizedOptions(buildCategorizedOptions(props, selectValue));
5933
5984
  }
@@ -5965,6 +6016,13 @@ function getNextFocusedOption(state, options) {
5965
6016
  var lastFocusedOption = state.focusedOption;
5966
6017
  return lastFocusedOption && options.indexOf(lastFocusedOption) > -1 ? lastFocusedOption : options[0];
5967
6018
  }
6019
+ var getFocusedOptionId = function getFocusedOptionId(focusableOptionsWithIds, focusedOption) {
6020
+ var _focusableOptionsWith;
6021
+ var focusedOptionId = (_focusableOptionsWith = focusableOptionsWithIds.find(function (option) {
6022
+ return option.data === focusedOption;
6023
+ })) === null || _focusableOptionsWith === void 0 ? void 0 : _focusableOptionsWith.id;
6024
+ return focusedOptionId || null;
6025
+ };
5968
6026
  var getOptionLabel = function getOptionLabel(props, data) {
5969
6027
  return props.getOptionLabel(data);
5970
6028
  };
@@ -6015,6 +6073,8 @@ var Select = /*#__PURE__*/function (_Component) {
6015
6073
  _this.state = {
6016
6074
  ariaSelection: null,
6017
6075
  focusedOption: null,
6076
+ focusedOptionId: null,
6077
+ focusableOptionsWithIds: [],
6018
6078
  focusedValue: null,
6019
6079
  inputIsHidden: false,
6020
6080
  isFocused: false,
@@ -6022,17 +6082,18 @@ var Select = /*#__PURE__*/function (_Component) {
6022
6082
  clearFocusValueOnUpdate: false,
6023
6083
  prevWasFocused: false,
6024
6084
  inputIsHiddenAfterUpdate: undefined,
6025
- prevProps: undefined
6085
+ prevProps: undefined,
6086
+ instancePrefix: ''
6026
6087
  };
6027
6088
  _this.blockOptionHover = false;
6028
6089
  _this.isComposing = false;
6029
6090
  _this.commonProps = void 0;
6030
6091
  _this.initialTouchX = 0;
6031
6092
  _this.initialTouchY = 0;
6032
- _this.instancePrefix = '';
6033
6093
  _this.openAfterFocus = false;
6034
6094
  _this.scrollToFocusedOptionOnUpdate = false;
6035
6095
  _this.userIsDragging = void 0;
6096
+ _this.isAppleDevice = isAppleDevice();
6036
6097
  _this.controlRef = null;
6037
6098
  _this.getControlRef = function (ref) {
6038
6099
  _this.controlRef = ref;
@@ -6147,6 +6208,12 @@ var Select = /*#__PURE__*/function (_Component) {
6147
6208
  removedValue: lastSelectedValue
6148
6209
  });
6149
6210
  };
6211
+ _this.getFocusedOptionId = function (focusedOption) {
6212
+ return getFocusedOptionId(_this.state.focusableOptionsWithIds, focusedOption);
6213
+ };
6214
+ _this.getFocusableOptionsWithIds = function () {
6215
+ return buildFocusableOptionsWithIds(buildCategorizedOptions(_this.props, _this.state.selectValue), _this.getElementId('option'));
6216
+ };
6150
6217
  _this.getValue = function () {
6151
6218
  return _this.state.selectValue;
6152
6219
  };
@@ -6174,7 +6241,7 @@ var Select = /*#__PURE__*/function (_Component) {
6174
6241
  return (_this$props$className = (_this$props$className2 = _this.props.classNames)[key]) === null || _this$props$className === void 0 ? void 0 : _this$props$className.call(_this$props$className2, props);
6175
6242
  };
6176
6243
  _this.getElementId = function (element) {
6177
- return "".concat(_this.instancePrefix, "-").concat(element);
6244
+ return "".concat(_this.state.instancePrefix, "-").concat(element);
6178
6245
  };
6179
6246
  _this.getComponents = function () {
6180
6247
  return defaultComponents(_this.props);
@@ -6383,8 +6450,11 @@ var Select = /*#__PURE__*/function (_Component) {
6383
6450
  if (_this.blockOptionHover || _this.state.focusedOption === focusedOption) {
6384
6451
  return;
6385
6452
  }
6453
+ var options = _this.getFocusableOptions();
6454
+ var focusedOptionIndex = options.indexOf(focusedOption);
6386
6455
  _this.setState({
6387
- focusedOption: focusedOption
6456
+ focusedOption: focusedOption,
6457
+ focusedOptionId: focusedOptionIndex > -1 ? _this.getFocusedOptionId(focusedOption) : null
6388
6458
  });
6389
6459
  };
6390
6460
  _this.shouldHideSelectedOptions = function () {
@@ -6528,14 +6598,16 @@ var Select = /*#__PURE__*/function (_Component) {
6528
6598
  }
6529
6599
  event.preventDefault();
6530
6600
  };
6531
- _this.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
6601
+ _this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
6532
6602
  _this.state.selectValue = cleanValue(_props.value);
6533
-
6534
6603
  // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
6535
6604
  if (_props.menuIsOpen && _this.state.selectValue.length) {
6605
+ var focusableOptionsWithIds = _this.getFocusableOptionsWithIds();
6536
6606
  var focusableOptions = _this.buildFocusableOptions();
6537
6607
  var optionIndex = focusableOptions.indexOf(_this.state.selectValue[0]);
6608
+ _this.state.focusableOptionsWithIds = focusableOptionsWithIds;
6538
6609
  _this.state.focusedOption = focusableOptions[optionIndex];
6610
+ _this.state.focusedOptionId = getFocusedOptionId(focusableOptionsWithIds, focusableOptions[optionIndex]);
6539
6611
  }
6540
6612
  return _this;
6541
6613
  }
@@ -6660,7 +6732,8 @@ var Select = /*#__PURE__*/function (_Component) {
6660
6732
  this.setState({
6661
6733
  inputIsHiddenAfterUpdate: false,
6662
6734
  focusedValue: null,
6663
- focusedOption: focusableOptions[openAtIndex]
6735
+ focusedOption: focusableOptions[openAtIndex],
6736
+ focusedOptionId: this.getFocusedOptionId(focusableOptions[openAtIndex])
6664
6737
  }, function () {
6665
6738
  return _this2.onMenuOpen();
6666
6739
  });
@@ -6736,7 +6809,8 @@ var Select = /*#__PURE__*/function (_Component) {
6736
6809
  this.scrollToFocusedOptionOnUpdate = true;
6737
6810
  this.setState({
6738
6811
  focusedOption: options[nextFocus],
6739
- focusedValue: null
6812
+ focusedValue: null,
6813
+ focusedOptionId: this.getFocusedOptionId(options[nextFocus])
6740
6814
  });
6741
6815
  }
6742
6816
  }, {
@@ -6932,10 +7006,10 @@ var Select = /*#__PURE__*/function (_Component) {
6932
7006
  'aria-label': this.props['aria-label'],
6933
7007
  'aria-labelledby': this.props['aria-labelledby'],
6934
7008
  'aria-required': required,
6935
- role: 'combobox'
7009
+ role: 'combobox',
7010
+ 'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId || ''
6936
7011
  }, menuIsOpen && {
6937
- 'aria-controls': this.getElementId('listbox'),
6938
- 'aria-owns': this.getElementId('listbox')
7012
+ 'aria-controls': this.getElementId('listbox')
6939
7013
  }), !isSearchable && {
6940
7014
  'aria-readonly': true
6941
7015
  }), this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
@@ -7180,8 +7254,11 @@ var Select = /*#__PURE__*/function (_Component) {
7180
7254
  onClick: onSelect,
7181
7255
  onMouseMove: onHover,
7182
7256
  onMouseOver: onHover,
7183
- tabIndex: -1
7257
+ tabIndex: -1,
7258
+ role: 'option',
7259
+ 'aria-selected': _this4.isAppleDevice ? undefined : isSelected // is not supported on Apple devices
7184
7260
  };
7261
+
7185
7262
  return /*#__PURE__*/React__namespace.createElement(Option, _extends({}, commonProps, {
7186
7263
  innerProps: innerProps,
7187
7264
  data: data,
@@ -7250,8 +7327,7 @@ var Select = /*#__PURE__*/function (_Component) {
7250
7327
  innerRef: ref,
7251
7328
  innerProps: {
7252
7329
  onMouseDown: _this4.onMenuMouseDown,
7253
- onMouseMove: _this4.onMenuMouseMove,
7254
- id: _this4.getElementId('listbox')
7330
+ onMouseMove: _this4.onMenuMouseMove
7255
7331
  },
7256
7332
  isLoading: isLoading,
7257
7333
  placement: placement
@@ -7266,6 +7342,11 @@ var Select = /*#__PURE__*/function (_Component) {
7266
7342
  _this4.getMenuListRef(instance);
7267
7343
  scrollTargetRef(instance);
7268
7344
  },
7345
+ innerProps: {
7346
+ role: 'listbox',
7347
+ 'aria-multiselectable': commonProps.isMulti,
7348
+ id: _this4.getElementId('listbox')
7349
+ },
7269
7350
  isLoading: isLoading,
7270
7351
  maxHeight: maxHeight,
7271
7352
  focusedOption: focusedOption
@@ -7353,7 +7434,8 @@ var Select = /*#__PURE__*/function (_Component) {
7353
7434
  focusedValue: focusedValue,
7354
7435
  isFocused: isFocused,
7355
7436
  selectValue: selectValue,
7356
- focusableOptions: focusableOptions
7437
+ focusableOptions: focusableOptions,
7438
+ isAppleDevice: this.isAppleDevice
7357
7439
  }));
7358
7440
  }
7359
7441
  }, {
@@ -7402,7 +7484,8 @@ var Select = /*#__PURE__*/function (_Component) {
7402
7484
  inputIsHiddenAfterUpdate = state.inputIsHiddenAfterUpdate,
7403
7485
  ariaSelection = state.ariaSelection,
7404
7486
  isFocused = state.isFocused,
7405
- prevWasFocused = state.prevWasFocused;
7487
+ prevWasFocused = state.prevWasFocused,
7488
+ instancePrefix = state.instancePrefix;
7406
7489
  var options = props.options,
7407
7490
  value = props.value,
7408
7491
  menuIsOpen = props.menuIsOpen,
@@ -7412,11 +7495,15 @@ var Select = /*#__PURE__*/function (_Component) {
7412
7495
  var newMenuOptionsState = {};
7413
7496
  if (prevProps && (value !== prevProps.value || options !== prevProps.options || menuIsOpen !== prevProps.menuIsOpen || inputValue !== prevProps.inputValue)) {
7414
7497
  var focusableOptions = menuIsOpen ? buildFocusableOptions(props, selectValue) : [];
7498
+ var focusableOptionsWithIds = menuIsOpen ? buildFocusableOptionsWithIds(buildCategorizedOptions(props, selectValue), "".concat(instancePrefix, "-option")) : [];
7415
7499
  var focusedValue = clearFocusValueOnUpdate ? getNextFocusedValue(state, selectValue) : null;
7416
7500
  var focusedOption = getNextFocusedOption(state, focusableOptions);
7501
+ var focusedOptionId = getFocusedOptionId(focusableOptionsWithIds, focusedOption);
7417
7502
  newMenuOptionsState = {
7418
7503
  selectValue: selectValue,
7419
7504
  focusedOption: focusedOption,
7505
+ focusedOptionId: focusedOptionId,
7506
+ focusableOptionsWithIds: focusableOptionsWithIds,
7420
7507
  focusedValue: focusedValue,
7421
7508
  clearFocusValueOnUpdate: false
7422
7509
  };
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-870f7df1.js');
3
+ var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
4
 
5
5
  var css_248z$1 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
6
6
  defaultTheme.styleInject(css_248z$1);
@@ -1,41 +1,41 @@
1
1
  'use strict';
2
2
 
3
- var AssetGallery = require('../../AssetGallery-d4b26808.js');
4
- require('../../defaultTheme-870f7df1.js');
3
+ var AssetGallery = require('../../AssetGallery-9a11459d.js');
4
+ require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
  require('lodash');
8
- require('../../TextInput-e4c6d536.js');
8
+ require('../../TextInput-a1083be3.js');
9
9
  require('nanoid');
10
10
  require('../../edit-note-c47d292e.js');
11
11
  require('resize-observer-polyfill');
12
12
  require('react-lazy-load-image-component');
13
- require('../../ActionButton-90485300.js');
14
- require('../../AutocompleteSelect-8ebb82de.js');
13
+ require('../../ActionButton-c3f5ed94.js');
14
+ require('../../AutocompleteSelect-45be3cb4.js');
15
15
  require('react-select');
16
- require('../../react-select-creatable.esm-eb462367.js');
16
+ require('../../react-select-creatable.esm-2f23d6c6.js');
17
17
  require('react-dom');
18
18
  require('react-select-async-paginate');
19
19
  require('../../close-ebf2f3cf.js');
20
20
  require('../../expand-more-94585605.js');
21
- require('../../Button-32e38cc9.js');
22
- require('../../Popover-de874e41.js');
21
+ require('../../Button-dd271c4b.js');
22
+ require('../../Popover-11df9750.js');
23
23
  require('polished');
24
24
  require('@tippyjs/react');
25
- require('../../shift-away-subtle-0bdd3b0d.js');
26
- require('../../ContextMenu-59c2a64f.js');
27
- require('../../Checkbox-50f1f3c7.js');
28
- require('../../CompactStarRating-f05e7414.js');
29
- require('../../CompactTextInput-3627d8ab.js');
30
- require('../../Alert-fcc0bb50.js');
31
- require('../../Badge-34ad2850.js');
32
- require('../../Tab-075c8c0a.js');
33
- require('../../Tabs-22df37ba.js');
34
- require('../../Tooltip-e7f59097.js');
35
- require('../../MultiSelect-873f707d.js');
36
- require('../../Radio-0b46b2a8.js');
37
- require('../../TextArea-af6a812d.js');
38
- require('../../Switch-aa384260.js');
25
+ require('../../shift-away-subtle-cfdf1dbe.js');
26
+ require('../../ContextMenu-d088833b.js');
27
+ require('../../Checkbox-1a92da17.js');
28
+ require('../../CompactStarRating-364ca893.js');
29
+ require('../../CompactTextInput-ea908a7c.js');
30
+ require('../../Alert-3e4f8be1.js');
31
+ require('../../Badge-9bcebe96.js');
32
+ require('../../Tab-7fe07e8b.js');
33
+ require('../../Tabs-1269b6fe.js');
34
+ require('../../Tooltip-e4e5e0e5.js');
35
+ require('../../MultiSelect-2cbc13b3.js');
36
+ require('../../Radio-0594409d.js');
37
+ require('../../TextArea-8cffb1e7.js');
38
+ require('../../Switch-cd165c8c.js');
39
39
  require('../../warning-circle-24522402.js');
40
40
 
41
41
 
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var AssetPreviewTopBar = require('../../../AssetPreviewTopBar-020a6f96.js');
4
- require('../../../defaultTheme-870f7df1.js');
3
+ var AssetPreviewTopBar = require('../../../AssetPreviewTopBar-159b9885.js');
4
+ require('../../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
  require('../../../close-ebf2f3cf.js');
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('../../../defaultTheme-870f7df1.js');
3
+ var defaultTheme = require('../../../defaultTheme-50f2b88f.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
6
 
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('../../../defaultTheme-870f7df1.js');
3
+ var defaultTheme = require('../../../defaultTheme-50f2b88f.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
6
 
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var ContextMenu = require('../../ContextMenu-59c2a64f.js');
4
- require('../../defaultTheme-870f7df1.js');
3
+ var ContextMenu = require('../../ContextMenu-d088833b.js');
4
+ require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
 
@@ -1,16 +1,16 @@
1
1
  'use strict';
2
2
 
3
- var Instructions = require('../../Instructions-5c48bcee.js');
4
- require('../../defaultTheme-870f7df1.js');
3
+ var Instructions = require('../../Instructions-d8ab91c2.js');
4
+ require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
- require('../../TextArea-af6a812d.js');
7
+ require('../../TextArea-8cffb1e7.js');
8
8
  require('nanoid');
9
9
  require('lodash');
10
10
  require('../../edit-note-c47d292e.js');
11
- require('../../AutocompleteSelect-8ebb82de.js');
11
+ require('../../AutocompleteSelect-45be3cb4.js');
12
12
  require('react-select');
13
- require('../../react-select-creatable.esm-eb462367.js');
13
+ require('../../react-select-creatable.esm-2f23d6c6.js');
14
14
  require('react-dom');
15
15
  require('react-select-async-paginate');
16
16
  require('../../close-ebf2f3cf.js');