@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.
- package/{ActionButton-90485300.js → ActionButton-c3f5ed94.js} +1 -1
- package/{Alert-fcc0bb50.js → Alert-3e4f8be1.js} +1 -1
- package/{AssetGallery-d4b26808.js → AssetGallery-9a11459d.js} +18 -18
- package/{AssetPreviewTopBar-020a6f96.js → AssetPreviewTopBar-159b9885.js} +1 -1
- package/{AutocompleteSelect-8ebb82de.js → AutocompleteSelect-45be3cb4.js} +2 -2
- package/{Badge-34ad2850.js → Badge-9bcebe96.js} +1 -1
- package/{Button-32e38cc9.js → Button-dd271c4b.js} +3 -3
- package/{Checkbox-50f1f3c7.js → Checkbox-1a92da17.js} +4 -3
- package/{CompactStarRating-f05e7414.js → CompactStarRating-364ca893.js} +1 -1
- package/{CompactTextInput-3627d8ab.js → CompactTextInput-ea908a7c.js} +7 -7
- package/{ContextMenu-59c2a64f.js → ContextMenu-d088833b.js} +1 -1
- package/{InputGroup-66dd343c.js → InputGroup-09ce9572.js} +1 -1
- package/{Instructions-5c48bcee.js → Instructions-d8ab91c2.js} +3 -3
- package/{MultiSelect-873f707d.js → MultiSelect-2cbc13b3.js} +2 -2
- package/{Popover-de874e41.js → Popover-11df9750.js} +2 -2
- package/{Radio-0b46b2a8.js → Radio-0594409d.js} +1 -1
- package/{SectionSeparator-12aff748.js → SectionSeparator-225719cd.js} +1 -1
- package/{Switch-aa384260.js → Switch-cd165c8c.js} +1 -1
- package/{Tab-075c8c0a.js → Tab-7fe07e8b.js} +1 -1
- package/{Tabs-22df37ba.js → Tabs-1269b6fe.js} +3 -3
- package/{TextArea-af6a812d.js → TextArea-8cffb1e7.js} +1 -1
- package/{TextInput-e4c6d536.js → TextInput-a1083be3.js} +1 -1
- package/{Tooltip-e7f59097.js → Tooltip-e4e5e0e5.js} +2 -2
- package/data/Alert/index.js +2 -2
- package/data/Badge/index.js +2 -2
- package/data/Popover/index.js +3 -3
- package/data/Tab/index.js +2 -2
- package/data/Tabs/index.js +3 -3
- package/data/Tooltip/index.js +3 -3
- package/data/index.js +8 -8
- package/{defaultTheme-870f7df1.js → defaultTheme-50f2b88f.js} +17 -0
- package/inputs/ActionButton/index.js +2 -2
- package/inputs/AutocompleteSelect/index.js +3 -3
- package/inputs/Button/index.js +5 -5
- package/inputs/Checkbox/index.js +2 -2
- package/inputs/CompactStarRating/index.js +2 -2
- package/inputs/CompactTextInput/index.js +9 -9
- package/inputs/MultiSelect/index.js +3 -3
- package/inputs/Radio/index.js +2 -2
- package/inputs/Switch/index.js +2 -2
- package/inputs/TextArea/index.js +2 -2
- package/inputs/TextInput/index.js +2 -2
- package/inputs/index.js +21 -21
- package/layout/InputGroup/index.js +2 -2
- package/layout/SectionSeparator/index.js +2 -2
- package/layout/index.js +3 -3
- package/package.json +1 -1
- package/{react-select-creatable.esm-eb462367.js → react-select-creatable.esm-2f23d6c6.js} +124 -37
- package/{shift-away-subtle-0bdd3b0d.js → shift-away-subtle-cfdf1dbe.js} +1 -1
- package/widgets/AssetGallery/index.js +22 -22
- package/widgets/AssetPreview/AssetPreviewTopBar/index.js +2 -2
- package/widgets/ContextMenu/ContextMenuItem/index.js +1 -1
- package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +1 -1
- package/widgets/ContextMenu/index.js +2 -2
- package/widgets/Instructions/index.js +5 -5
- package/widgets/index.js +24 -24
package/inputs/TextArea/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var TextArea = require('../../TextArea-
|
|
4
|
-
require('../../defaultTheme-
|
|
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-
|
|
4
|
-
require('../../defaultTheme-
|
|
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-
|
|
6
|
-
var AutocompleteSelect = require('../AutocompleteSelect-
|
|
7
|
-
var Button = require('../Button-
|
|
8
|
-
var Checkbox = require('../Checkbox-
|
|
9
|
-
var CompactStarRating = require('../CompactStarRating-
|
|
10
|
-
var CompactTextInput = require('../CompactTextInput-
|
|
11
|
-
var MultiSelect = require('../MultiSelect-
|
|
12
|
-
var Radio = require('../Radio-
|
|
13
|
-
var TextArea = require('../TextArea-
|
|
14
|
-
var TextInput = require('../TextInput-
|
|
15
|
-
var Switch = require('../Switch-
|
|
16
|
-
require('../defaultTheme-
|
|
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-
|
|
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-
|
|
27
|
+
require('../Popover-11df9750.js');
|
|
28
28
|
require('polished');
|
|
29
29
|
require('@tippyjs/react');
|
|
30
|
-
require('../shift-away-subtle-
|
|
31
|
-
require('../ContextMenu-
|
|
30
|
+
require('../shift-away-subtle-cfdf1dbe.js');
|
|
31
|
+
require('../ContextMenu-d088833b.js');
|
|
32
32
|
require('../edit-note-c47d292e.js');
|
|
33
|
-
require('../Alert-
|
|
34
|
-
require('../Badge-
|
|
35
|
-
require('../Tab-
|
|
36
|
-
require('../Tabs-
|
|
37
|
-
require('../Tooltip-
|
|
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-
|
|
4
|
-
require('../../defaultTheme-
|
|
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-
|
|
4
|
-
require('../../defaultTheme-
|
|
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-
|
|
6
|
-
var SectionSeparator = require('../SectionSeparator-
|
|
7
|
-
require('../defaultTheme-
|
|
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
|
@@ -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
|
|
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' : '
|
|
4994
|
-
return "
|
|
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-
|
|
5115
|
-
},
|
|
5116
|
-
|
|
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-
|
|
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-
|
|
4
|
-
require('../../defaultTheme-
|
|
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-
|
|
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-
|
|
14
|
-
require('../../AutocompleteSelect-
|
|
13
|
+
require('../../ActionButton-c3f5ed94.js');
|
|
14
|
+
require('../../AutocompleteSelect-45be3cb4.js');
|
|
15
15
|
require('react-select');
|
|
16
|
-
require('../../react-select-creatable.esm-
|
|
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-
|
|
22
|
-
require('../../Popover-
|
|
21
|
+
require('../../Button-dd271c4b.js');
|
|
22
|
+
require('../../Popover-11df9750.js');
|
|
23
23
|
require('polished');
|
|
24
24
|
require('@tippyjs/react');
|
|
25
|
-
require('../../shift-away-subtle-
|
|
26
|
-
require('../../ContextMenu-
|
|
27
|
-
require('../../Checkbox-
|
|
28
|
-
require('../../CompactStarRating-
|
|
29
|
-
require('../../CompactTextInput-
|
|
30
|
-
require('../../Alert-
|
|
31
|
-
require('../../Badge-
|
|
32
|
-
require('../../Tab-
|
|
33
|
-
require('../../Tabs-
|
|
34
|
-
require('../../Tooltip-
|
|
35
|
-
require('../../MultiSelect-
|
|
36
|
-
require('../../Radio-
|
|
37
|
-
require('../../TextArea-
|
|
38
|
-
require('../../Switch-
|
|
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-
|
|
4
|
-
require('../../../defaultTheme-
|
|
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,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var ContextMenu = require('../../ContextMenu-
|
|
4
|
-
require('../../defaultTheme-
|
|
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-
|
|
4
|
-
require('../../defaultTheme-
|
|
3
|
+
var Instructions = require('../../Instructions-d8ab91c2.js');
|
|
4
|
+
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
7
|
-
require('../../TextArea-
|
|
7
|
+
require('../../TextArea-8cffb1e7.js');
|
|
8
8
|
require('nanoid');
|
|
9
9
|
require('lodash');
|
|
10
10
|
require('../../edit-note-c47d292e.js');
|
|
11
|
-
require('../../AutocompleteSelect-
|
|
11
|
+
require('../../AutocompleteSelect-45be3cb4.js');
|
|
12
12
|
require('react-select');
|
|
13
|
-
require('../../react-select-creatable.esm-
|
|
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');
|