@wordpress/components 26.0.2 → 27.0.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/.stylelintrc.js +2 -2
- package/CHANGELOG.md +23 -0
- package/CONTRIBUTING.md +72 -0
- package/build/autocomplete/index.js +3 -8
- package/build/autocomplete/index.js.map +1 -1
- package/build/color-picker/component.js +10 -1
- package/build/color-picker/component.js.map +1 -1
- package/build/color-picker/styles.js +8 -9
- package/build/color-picker/styles.js.map +1 -1
- package/build/combobox-control/index.js +4 -9
- package/build/combobox-control/index.js.map +1 -1
- package/build/custom-select-control/index.js +2 -15
- package/build/custom-select-control/index.js.map +1 -1
- package/build/custom-select-control-v2/custom-select-item.js +32 -0
- package/build/custom-select-control-v2/custom-select-item.js.map +1 -0
- package/build/custom-select-control-v2/custom-select.js +91 -0
- package/build/custom-select-control-v2/custom-select.js.map +1 -0
- package/build/custom-select-control-v2/default-component/index.js +41 -0
- package/build/custom-select-control-v2/default-component/index.js.map +1 -0
- package/build/custom-select-control-v2/index.js +13 -82
- package/build/custom-select-control-v2/index.js.map +1 -1
- package/build/custom-select-control-v2/legacy-adapter.js +29 -0
- package/build/custom-select-control-v2/legacy-adapter.js.map +1 -0
- package/build/custom-select-control-v2/legacy-component/index.js +123 -0
- package/build/custom-select-control-v2/legacy-component/index.js.map +1 -0
- package/build/custom-select-control-v2/styles.js +73 -50
- package/build/custom-select-control-v2/styles.js.map +1 -1
- package/build/custom-select-control-v2/types.js.map +1 -1
- package/build/font-size-picker/font-size-picker-select.js +0 -1
- package/build/font-size-picker/font-size-picker-select.js.map +1 -1
- package/build/form-token-field/index.js +3 -8
- package/build/form-token-field/index.js.map +1 -1
- package/build/form-token-field/suggestions-list.js +5 -12
- package/build/form-token-field/suggestions-list.js.map +1 -1
- package/build/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js +1 -1
- package/build/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js.map +1 -1
- package/build/modal/index.js +2 -10
- package/build/modal/index.js.map +1 -1
- package/build/progress-bar/styles.js +5 -5
- package/build/progress-bar/styles.js.map +1 -1
- package/build/utils/with-ignore-ime-events.js +34 -0
- package/build/utils/with-ignore-ime-events.js.map +1 -0
- package/build-module/autocomplete/index.js +3 -8
- package/build-module/autocomplete/index.js.map +1 -1
- package/build-module/color-picker/component.js +11 -2
- package/build-module/color-picker/component.js.map +1 -1
- package/build-module/color-picker/styles.js +8 -9
- package/build-module/color-picker/styles.js.map +1 -1
- package/build-module/combobox-control/index.js +4 -9
- package/build-module/combobox-control/index.js.map +1 -1
- package/build-module/custom-select-control/index.js +2 -15
- package/build-module/custom-select-control/index.js.map +1 -1
- package/build-module/custom-select-control-v2/custom-select-item.js +26 -0
- package/build-module/custom-select-control-v2/custom-select-item.js.map +1 -0
- package/build-module/custom-select-control-v2/custom-select.js +82 -0
- package/build-module/custom-select-control-v2/custom-select.js.map +1 -0
- package/build-module/custom-select-control-v2/default-component/index.js +30 -0
- package/build-module/custom-select-control-v2/default-component/index.js.map +1 -0
- package/build-module/custom-select-control-v2/index.js +2 -74
- package/build-module/custom-select-control-v2/index.js.map +1 -1
- package/build-module/custom-select-control-v2/legacy-adapter.js +21 -0
- package/build-module/custom-select-control-v2/legacy-adapter.js.map +1 -0
- package/build-module/custom-select-control-v2/legacy-component/index.js +111 -0
- package/build-module/custom-select-control-v2/legacy-component/index.js.map +1 -0
- package/build-module/custom-select-control-v2/styles.js +73 -42
- package/build-module/custom-select-control-v2/styles.js.map +1 -1
- package/build-module/custom-select-control-v2/types.js.map +1 -1
- package/build-module/font-size-picker/font-size-picker-select.js +0 -1
- package/build-module/font-size-picker/font-size-picker-select.js.map +1 -1
- package/build-module/form-token-field/index.js +3 -8
- package/build-module/form-token-field/index.js.map +1 -1
- package/build-module/form-token-field/suggestions-list.js +5 -12
- package/build-module/form-token-field/suggestions-list.js.map +1 -1
- package/build-module/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js +1 -1
- package/build-module/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js.map +1 -1
- package/build-module/modal/index.js +3 -10
- package/build-module/modal/index.js.map +1 -1
- package/build-module/progress-bar/styles.js +5 -5
- package/build-module/progress-bar/styles.js.map +1 -1
- package/build-module/utils/with-ignore-ime-events.js +28 -0
- package/build-module/utils/with-ignore-ime-events.js.map +1 -0
- package/build-style/style-rtl.css +8 -1
- package/build-style/style.css +8 -1
- package/build-types/alignment-matrix-control/stories/index.story.d.ts +1 -1
- package/build-types/angle-picker-control/stories/index.story.d.ts +1 -1
- package/build-types/animate/stories/index.story.d.ts +7 -7
- package/build-types/autocomplete/index.d.ts.map +1 -1
- package/build-types/base-control/stories/index.story.d.ts +1 -1
- package/build-types/border-box-control/stories/index.story.d.ts +1 -1
- package/build-types/border-control/stories/index.story.d.ts +6 -6
- package/build-types/box-control/stories/index.story.d.ts +6 -6
- package/build-types/button/stories/e2e/index.story.d.ts +1 -1
- package/build-types/button/stories/index.story.d.ts +7 -7
- package/build-types/card/stories/index.story.d.ts +2 -2
- package/build-types/circular-option-picker/stories/index.story.d.ts +5 -5
- package/build-types/color-palette/stories/index.story.d.ts +3 -3
- package/build-types/color-picker/component.d.ts.map +1 -1
- package/build-types/color-picker/stories/index.story.d.ts +1 -1
- package/build-types/color-picker/styles.d.ts.map +1 -1
- package/build-types/combobox-control/index.d.ts.map +1 -1
- package/build-types/combobox-control/stories/index.story.d.ts +2 -2
- package/build-types/confirm-dialog/stories/index.story.d.ts +2 -2
- package/build-types/custom-gradient-picker/stories/index.story.d.ts +1 -1
- package/build-types/custom-select-control/index.d.ts.map +1 -1
- package/build-types/custom-select-control-v2/custom-select-item.d.ts +9 -0
- package/build-types/custom-select-control-v2/custom-select-item.d.ts.map +1 -0
- package/build-types/custom-select-control-v2/custom-select.d.ts +6 -0
- package/build-types/custom-select-control-v2/custom-select.d.ts.map +1 -0
- package/build-types/custom-select-control-v2/default-component/index.d.ts +5 -0
- package/build-types/custom-select-control-v2/default-component/index.d.ts.map +1 -0
- package/build-types/custom-select-control-v2/index.d.ts +5 -6
- package/build-types/custom-select-control-v2/index.d.ts.map +1 -1
- package/build-types/custom-select-control-v2/legacy-adapter.d.ts +6 -0
- package/build-types/custom-select-control-v2/legacy-adapter.d.ts.map +1 -0
- package/build-types/custom-select-control-v2/legacy-component/index.d.ts +5 -0
- package/build-types/custom-select-control-v2/legacy-component/index.d.ts.map +1 -0
- package/build-types/custom-select-control-v2/stories/default.story.d.ts +29 -0
- package/build-types/custom-select-control-v2/stories/default.story.d.ts.map +1 -0
- package/build-types/custom-select-control-v2/stories/legacy.story.d.ts +12 -0
- package/build-types/custom-select-control-v2/stories/legacy.story.d.ts.map +1 -0
- package/build-types/custom-select-control-v2/styles.d.ts +31 -6
- package/build-types/custom-select-control-v2/styles.d.ts.map +1 -1
- package/build-types/custom-select-control-v2/types.d.ts +137 -14
- package/build-types/custom-select-control-v2/types.d.ts.map +1 -1
- package/build-types/dimension-control/stories/index.story.d.ts +2 -2
- package/build-types/drop-zone/stories/index.story.d.ts +1 -1
- package/build-types/dropdown/stories/index.story.d.ts +3 -3
- package/build-types/dropdown-menu/stories/index.story.d.ts +2 -2
- package/build-types/dropdown-menu-v2/stories/index.story.d.ts.map +1 -1
- package/build-types/duotone-picker/stories/duotone-picker.story.d.ts +1 -1
- package/build-types/duotone-picker/stories/duotone-swatch.story.d.ts +3 -3
- package/build-types/focal-point-picker/stories/index.story.d.ts +4 -4
- package/build-types/font-size-picker/font-size-picker-select.d.ts.map +1 -1
- package/build-types/form-file-upload/stories/index.story.d.ts +5 -5
- package/build-types/form-token-field/index.d.ts.map +1 -1
- package/build-types/form-token-field/suggestions-list.d.ts.map +1 -1
- package/build-types/gradient-picker/stories/index.story.d.ts +3 -3
- package/build-types/guide/stories/index.story.d.ts +1 -1
- package/build-types/icon/stories/index.story.d.ts +4 -4
- package/build-types/input-control/stories/index.story.d.ts +6 -6
- package/build-types/keyboard-shortcuts/stories/index.story.d.ts +1 -1
- package/build-types/menu-group/stories/index.story.d.ts +1 -1
- package/build-types/menu-item/stories/index.story.d.ts +4 -4
- package/build-types/modal/index.d.ts.map +1 -1
- package/build-types/navigation/stories/index.story.d.ts +6 -6
- package/build-types/notice/stories/index.story.d.ts +4 -4
- package/build-types/number-control/stories/index.story.d.ts +1 -1
- package/build-types/palette-edit/stories/index.story.d.ts +2 -2
- package/build-types/progress-bar/stories/index.story.d.ts.map +1 -1
- package/build-types/query-controls/stories/index.story.d.ts +1 -1
- package/build-types/resizable-box/stories/index.story.d.ts +2 -2
- package/build-types/responsive-wrapper/stories/index.story.d.ts +1 -1
- package/build-types/sandbox/stories/index.story.d.ts +1 -1
- package/build-types/search-control/stories/index.story.d.ts +2 -2
- package/build-types/select-control/stories/index.story.d.ts +2 -2
- package/build-types/shortcut/stories/index.story.d.ts +1 -1
- package/build-types/tab-panel/stories/index.story.d.ts +4 -4
- package/build-types/tabs/stories/index.story.d.ts +9 -9
- package/build-types/tabs/stories/index.story.d.ts.map +1 -1
- package/build-types/text/stories/index.story.d.ts +3 -3
- package/build-types/theme/stories/index.story.d.ts +1 -1
- package/build-types/theme/stories/index.story.d.ts.map +1 -1
- package/build-types/toggle-control/stories/index.story.d.ts +2 -2
- package/build-types/toolbar/stories/index.story.d.ts +3 -3
- package/build-types/tooltip/stories/index.story.d.ts +1 -1
- package/build-types/tree-grid/stories/index.story.d.ts +1 -1
- package/build-types/tree-select/stories/index.story.d.ts +1 -1
- package/build-types/utils/with-ignore-ime-events.d.ts +15 -0
- package/build-types/utils/with-ignore-ime-events.d.ts.map +1 -0
- package/build-types/v-stack/stories/index.story.d.ts +1 -1
- package/package.json +19 -20
- package/src/alignment-matrix-control/test/index.tsx +3 -1
- package/src/autocomplete/index.tsx +3 -10
- package/src/circular-option-picker/test/index.tsx +4 -1
- package/src/color-picker/component.tsx +22 -11
- package/src/color-picker/styles.ts +1 -15
- package/src/combobox-control/index.tsx +33 -41
- package/src/composite/legacy/test/index.tsx +18 -2
- package/src/custom-select-control/README.md +0 -10
- package/src/custom-select-control/index.js +3 -22
- package/src/custom-select-control/stories/index.story.js +0 -1
- package/src/custom-select-control/test/index.js +17 -17
- package/src/custom-select-control-v2/README.md +97 -7
- package/src/custom-select-control-v2/custom-select-item.tsx +29 -0
- package/src/custom-select-control-v2/custom-select.tsx +122 -0
- package/src/custom-select-control-v2/default-component/index.tsx +24 -0
- package/src/custom-select-control-v2/index.tsx +2 -102
- package/src/custom-select-control-v2/legacy-adapter.tsx +25 -0
- package/src/custom-select-control-v2/legacy-component/index.tsx +133 -0
- package/src/custom-select-control-v2/stories/{index.story.tsx → default.story.tsx} +27 -33
- package/src/custom-select-control-v2/stories/legacy.story.tsx +88 -0
- package/src/custom-select-control-v2/styles.ts +82 -38
- package/src/custom-select-control-v2/test/index.tsx +808 -148
- package/src/custom-select-control-v2/types.ts +148 -20
- package/src/dropdown-menu-v2/stories/index.story.tsx +1 -0
- package/src/dropdown-menu-v2/test/index.tsx +4 -1
- package/src/font-size-picker/font-size-picker-select.tsx +0 -1
- package/src/form-token-field/index.tsx +3 -10
- package/src/form-token-field/suggestions-list.tsx +5 -17
- package/src/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js +1 -1
- package/src/modal/index.tsx +2 -12
- package/src/modal/style.scss +1 -0
- package/src/progress-bar/stories/index.story.tsx +1 -0
- package/src/progress-bar/styles.ts +2 -2
- package/src/tab-panel/test/index.tsx +8 -1
- package/src/tabs/stories/index.story.tsx +1 -0
- package/src/tabs/test/index.tsx +36 -6
- package/src/theme/stories/index.story.tsx +1 -0
- package/src/toggle-group-control/test/index.tsx +4 -0
- package/src/toolbar/toolbar-group/style.scss +1 -0
- package/src/tooltip/test/index.tsx +5 -0
- package/src/utils/with-ignore-ime-events.ts +32 -0
- package/tsconfig.json +0 -1
- package/tsconfig.tsbuildinfo +1 -1
- package/build/custom-select-control/styles.js +0 -27
- package/build/custom-select-control/styles.js.map +0 -1
- package/build-module/custom-select-control/styles.js +0 -18
- package/build-module/custom-select-control/styles.js.map +0 -1
- package/build-types/custom-select-control/styles.d.ts +0 -11
- package/build-types/custom-select-control/styles.d.ts.map +0 -1
- package/build-types/custom-select-control-v2/stories/index.story.d.ts +0 -20
- package/build-types/custom-select-control-v2/stories/index.story.d.ts.map +0 -1
- package/src/custom-select-control/styles.ts +0 -28
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_numberControl","_interopRequireDefault","require","_selectControl","_rangeControl","_space","_utils","_button","_flex","_hStack","
|
|
1
|
+
{"version":3,"names":["_numberControl","_interopRequireDefault","require","_selectControl","_rangeControl","_space","_utils","_button","_flex","_hStack","_configValues","NumberControlWrapper","exports","_base","default","NumberControl","process","env","NODE_ENV","target","label","space","SelectControl","InnerSelectControl","RangeControl","InnerRangeControl","interactiveHueStyles","AuxiliaryColorArtefactWrapper","AuxiliaryColorArtefactHStackHeader","HStack","ColorInputWrapper","Flex","ColorfulWrapper","boxSizingReset","CONFIG","borderWidthFocus","CopyButton","Button"],"sources":["@wordpress/components/src/color-picker/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport NumberControl from '../number-control';\nimport InnerSelectControl from '../select-control';\nimport InnerRangeControl from '../range-control';\nimport { space } from '../utils/space';\nimport { boxSizingReset } from '../utils';\nimport Button from '../button';\nimport { Flex } from '../flex';\nimport { HStack } from '../h-stack';\nimport CONFIG from '../utils/config-values';\n\nexport const NumberControlWrapper = styled( NumberControl )`\n\twidth: ${ space( 24 ) };\n`;\n\nexport const SelectControl = styled( InnerSelectControl )`\n\tmargin-left: ${ space( -2 ) };\n\twidth: 5em;\n`;\n\nexport const RangeControl = styled( InnerRangeControl )`\n\tflex: 1;\n\tmargin-right: ${ space( 2 ) };\n`;\n\n// Make the Hue circle picker not go out of the bar.\nconst interactiveHueStyles = `\n.react-colorful__interactive {\n\twidth: calc( 100% - ${ space( 2 ) } );\n\tmargin-left: ${ space( 1 ) };\n}`;\n\nexport const AuxiliaryColorArtefactWrapper = styled.div`\n\tpadding-top: ${ space( 2 ) };\n\tpadding-right: 0;\n\tpadding-left: 0;\n\tpadding-bottom: 0;\n`;\n\nexport const AuxiliaryColorArtefactHStackHeader = styled( HStack )`\n\tpadding-left: ${ space( 4 ) };\n\tpadding-right: ${ space( 4 ) };\n`;\n\nexport const ColorInputWrapper = styled( Flex )`\n\tpadding-top: ${ space( 4 ) };\n\tpadding-left: ${ space( 4 ) };\n\tpadding-right: ${ space( 3 ) };\n\tpadding-bottom: ${ space( 5 ) };\n`;\n\nexport const ColorfulWrapper = styled.div`\n\t${ boxSizingReset };\n\n\twidth: 216px;\n\n\t.react-colorful {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\twidth: 216px;\n\t\theight: auto;\n\t}\n\n\t.react-colorful__saturation {\n\t\twidth: 100%;\n\t\tborder-radius: 0;\n\t\theight: 216px;\n\t\tmargin-bottom: ${ space( 4 ) };\n\t\tborder-bottom: none;\n\t}\n\n\t.react-colorful__hue,\n\t.react-colorful__alpha {\n\t\twidth: 184px;\n\t\theight: 16px;\n\t\tborder-radius: 16px;\n\t\tmargin-bottom: ${ space( 2 ) };\n\t}\n\n\t.react-colorful__pointer {\n\t\theight: 16px;\n\t\twidth: 16px;\n\t\tborder: none;\n\t\tbox-shadow: 0 0 2px 0 rgba( 0, 0, 0, 0.25 );\n\n\t\t// Shown instead of box-shadow to Windows high contrast mode.\n\t\toutline: 2px solid transparent;\n\t}\n\n\t.react-colorful__pointer-fill {\n\t\tbox-shadow: inset 0 0 0 ${ CONFIG.borderWidthFocus } #fff;\n\t}\n\n\t${ interactiveHueStyles }\n`;\n\nexport const CopyButton = styled( Button )`\n\t&&&&& {\n\t\tmin-width: ${ space( 6 ) };\n\t\tpadding: 0;\n\n\t\t> svg {\n\t\t\tmargin-right: 0;\n\t\t}\n\t}\n`;\n"],"mappings":"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"}
|
|
@@ -22,6 +22,7 @@ var _withFocusOutside = _interopRequireDefault(require("../higher-order/with-foc
|
|
|
22
22
|
var _hooks = require("../utils/hooks");
|
|
23
23
|
var _strings = require("../utils/strings");
|
|
24
24
|
var _useDeprecatedProps = require("../utils/use-deprecated-props");
|
|
25
|
+
var _withIgnoreImeEvents = require("../utils/with-ignore-ime-events");
|
|
25
26
|
/**
|
|
26
27
|
* External dependencies
|
|
27
28
|
*/
|
|
@@ -157,15 +158,9 @@ function ComboboxControl(props) {
|
|
|
157
158
|
setSelectedSuggestion(matchingSuggestions[nextIndex]);
|
|
158
159
|
setIsExpanded(true);
|
|
159
160
|
};
|
|
160
|
-
const onKeyDown = event => {
|
|
161
|
+
const onKeyDown = (0, _withIgnoreImeEvents.withIgnoreIMEEvents)(event => {
|
|
161
162
|
let preventDefault = false;
|
|
162
|
-
if (event.defaultPrevented
|
|
163
|
-
// Ignore keydowns from IMEs
|
|
164
|
-
event.nativeEvent.isComposing ||
|
|
165
|
-
// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
|
|
166
|
-
// is `isComposing=false`, even though it's technically still part of the composition.
|
|
167
|
-
// These can only be detected by keyCode.
|
|
168
|
-
event.keyCode === 229) {
|
|
163
|
+
if (event.defaultPrevented) {
|
|
169
164
|
return;
|
|
170
165
|
}
|
|
171
166
|
switch (event.code) {
|
|
@@ -194,7 +189,7 @@ function ComboboxControl(props) {
|
|
|
194
189
|
if (preventDefault) {
|
|
195
190
|
event.preventDefault();
|
|
196
191
|
}
|
|
197
|
-
};
|
|
192
|
+
});
|
|
198
193
|
const onBlur = () => {
|
|
199
194
|
setInputHasFocus(false);
|
|
200
195
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_element","_compose","_a11y","_icons","_styles","_tokenInput","_suggestionsList","_baseControl","_button","_flex","_withFocusOutside","_hooks","_strings","_useDeprecatedProps","noop","DetectOutside","withFocusOutside","Component","handleFocusOutside","event","props","onFocusOutside","render","children","getIndexOfMatchingSuggestion","selectedSuggestion","matchingSuggestions","indexOf","ComboboxControl","_currentOption$label","__nextHasNoMarginBottom","__next40pxDefaultSize","value","valueProp","label","options","onChange","onChangeProp","onFilterValueChange","hideLabelFromVision","help","allowReset","className","messages","selected","__","__experimentalRenderItem","useDeprecated36pxDefaultSizeProp","setValue","useControlledValue","currentOption","find","option","currentLabel","instanceId","useInstanceId","setSelectedSuggestion","useState","isExpanded","setIsExpanded","inputHasFocus","setInputHasFocus","inputValue","setInputValue","inputContainer","useRef","useMemo","startsWithMatch","containsMatch","match","normalizeTextString","forEach","index","push","concat","onSuggestionSelected","newSelectedSuggestion","speak","handleArrowNavigation","offset","nextIndex","length","onKeyDown","preventDefault","defaultPrevented","nativeEvent","isComposing","keyCode","code","onBlur","onFocus","onInputChange","text","handleOnReset","current","focus","useEffect","hasMatchingSuggestions","hasSelectedMatchingSuggestions","message","sprintf","_n","_react","createElement","default","classnames","id","tabIndex","InputWrapperFlex","FlexBlock","ref","selectedSuggestionIndex","FlexItem","icon","closeSmall","disabled","onClick","displayTransform","suggestion","suggestions","selectedIndex","onHover","onSelect","scrollIntoView","_default","exports"],"sources":["@wordpress/components/src/combobox-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tComponent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { InputWrapperFlex } from './styles';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { FlexBlock, FlexItem } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\nimport type { ComboboxControlOption, ComboboxControlProps } from './types';\nimport type { TokenInputProps } from '../form-token-field/types';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\n\nconst noop = () => {};\n\ninterface DetectOutsideComponentProps {\n\tonFocusOutside: ( event: React.FocusEvent ) => void;\n\tchildren?: React.ReactNode;\n}\n\nconst DetectOutside = withFocusOutside(\n\tclass extends Component< DetectOutsideComponentProps > {\n\t\thandleFocusOutside( event: React.FocusEvent ) {\n\t\t\tthis.props.onFocusOutside( event );\n\t\t}\n\n\t\trender() {\n\t\t\treturn this.props.children;\n\t\t}\n\t}\n);\n\nconst getIndexOfMatchingSuggestion = (\n\tselectedSuggestion: ComboboxControlOption | null,\n\tmatchingSuggestions: ComboboxControlOption[]\n) =>\n\tselectedSuggestion === null\n\t\t? -1\n\t\t: matchingSuggestions.indexOf( selectedSuggestion );\n\n/**\n * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of\n * being able to search for options using a search input.\n *\n * ```jsx\n * import { ComboboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const options = [\n * \t{\n * \t\tvalue: 'small',\n * \t\tlabel: 'Small',\n * \t},\n * \t{\n * \t\tvalue: 'normal',\n * \t\tlabel: 'Normal',\n * \t},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\n * \t},\n * ];\n *\n * function MyComboboxControl() {\n * \tconst [ fontSize, setFontSize ] = useState();\n * \tconst [ filteredOptions, setFilteredOptions ] = useState( options );\n * \treturn (\n * \t\t<ComboboxControl\n * \t\t\tlabel=\"Font Size\"\n * \t\t\tvalue={ fontSize }\n * \t\t\tonChange={ setFontSize }\n * \t\t\toptions={ filteredOptions }\n * \t\t\tonFilterValueChange={ ( inputValue ) =>\n * \t\t\t\tsetFilteredOptions(\n * \t\t\t\t\toptions.filter( ( option ) =>\n * \t\t\t\t\t\toption.label\n * \t\t\t\t\t\t\t.toLowerCase()\n * \t\t\t\t\t\t\t.startsWith( inputValue.toLowerCase() )\n * \t\t\t\t\t)\n * \t\t\t\t)\n * \t\t\t}\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction ComboboxControl( props: ComboboxControlProps ) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\t__next40pxDefaultSize = false,\n\t\tvalue: valueProp,\n\t\tlabel,\n\t\toptions,\n\t\tonChange: onChangeProp,\n\t\tonFilterValueChange = noop,\n\t\thideLabelFromVision,\n\t\thelp,\n\t\tallowReset = true,\n\t\tclassName,\n\t\tmessages = {\n\t\t\tselected: __( 'Item selected.' ),\n\t\t},\n\t\t__experimentalRenderItem,\n\t} = useDeprecated36pxDefaultSizeProp( props );\n\n\tconst [ value, setValue ] = useControlledValue( {\n\t\tvalue: valueProp,\n\t\tonChange: onChangeProp,\n\t} );\n\n\tconst currentOption = options.find( ( option ) => option.value === value );\n\tconst currentLabel = currentOption?.label ?? '';\n\t// Use a custom prefix when generating the `instanceId` to avoid having\n\t// duplicate input IDs when rendering this component and `FormTokenField`\n\t// in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n\tconst instanceId = useInstanceId( ComboboxControl, 'combobox-control' );\n\tconst [ selectedSuggestion, setSelectedSuggestion ] = useState(\n\t\tcurrentOption || null\n\t);\n\tconst [ isExpanded, setIsExpanded ] = useState( false );\n\tconst [ inputHasFocus, setInputHasFocus ] = useState( false );\n\tconst [ inputValue, setInputValue ] = useState( '' );\n\tconst inputContainer = useRef< HTMLInputElement >( null );\n\n\tconst matchingSuggestions = useMemo( () => {\n\t\tconst startsWithMatch: ComboboxControlOption[] = [];\n\t\tconst containsMatch: ComboboxControlOption[] = [];\n\t\tconst match = normalizeTextString( inputValue );\n\t\toptions.forEach( ( option ) => {\n\t\t\tconst index = normalizeTextString( option.label ).indexOf( match );\n\t\t\tif ( index === 0 ) {\n\t\t\t\tstartsWithMatch.push( option );\n\t\t\t} else if ( index > 0 ) {\n\t\t\t\tcontainsMatch.push( option );\n\t\t\t}\n\t\t} );\n\n\t\treturn startsWithMatch.concat( containsMatch );\n\t}, [ inputValue, options ] );\n\n\tconst onSuggestionSelected = (\n\t\tnewSelectedSuggestion: ComboboxControlOption\n\t) => {\n\t\tsetValue( newSelectedSuggestion.value );\n\t\tspeak( messages.selected, 'assertive' );\n\t\tsetSelectedSuggestion( newSelectedSuggestion );\n\t\tsetInputValue( '' );\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst handleArrowNavigation = ( offset = 1 ) => {\n\t\tconst index = getIndexOfMatchingSuggestion(\n\t\t\tselectedSuggestion,\n\t\t\tmatchingSuggestions\n\t\t);\n\t\tlet nextIndex = index + offset;\n\t\tif ( nextIndex < 0 ) {\n\t\t\tnextIndex = matchingSuggestions.length - 1;\n\t\t} else if ( nextIndex >= matchingSuggestions.length ) {\n\t\t\tnextIndex = 0;\n\t\t}\n\t\tsetSelectedSuggestion( matchingSuggestions[ nextIndex ] );\n\t\tsetIsExpanded( true );\n\t};\n\n\tconst onKeyDown: React.KeyboardEventHandler< HTMLDivElement > = (\n\t\tevent\n\t) => {\n\t\tlet preventDefault = false;\n\n\t\tif (\n\t\t\tevent.defaultPrevented ||\n\t\t\t// Ignore keydowns from IMEs\n\t\t\tevent.nativeEvent.isComposing ||\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( event.code ) {\n\t\t\tcase 'Enter':\n\t\t\t\tif ( selectedSuggestion ) {\n\t\t\t\t\tonSuggestionSelected( selectedSuggestion );\n\t\t\t\t\tpreventDefault = true;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\thandleArrowNavigation( -1 );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\thandleArrowNavigation( 1 );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tcase 'Escape':\n\t\t\t\tsetIsExpanded( false );\n\t\t\t\tsetSelectedSuggestion( null );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t};\n\n\tconst onBlur = () => {\n\t\tsetInputHasFocus( false );\n\t};\n\n\tconst onFocus = () => {\n\t\tsetInputHasFocus( true );\n\t\tsetIsExpanded( true );\n\t\tonFilterValueChange( '' );\n\t\tsetInputValue( '' );\n\t};\n\n\tconst onFocusOutside = () => {\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst onInputChange: TokenInputProps[ 'onChange' ] = ( event ) => {\n\t\tconst text = event.value;\n\t\tsetInputValue( text );\n\t\tonFilterValueChange( text );\n\t\tif ( inputHasFocus ) {\n\t\t\tsetIsExpanded( true );\n\t\t}\n\t};\n\n\tconst handleOnReset = () => {\n\t\tsetValue( null );\n\t\tinputContainer.current?.focus();\n\t};\n\n\t// Update current selections when the filter input changes.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tconst hasSelectedMatchingSuggestions =\n\t\t\tgetIndexOfMatchingSuggestion(\n\t\t\t\tselectedSuggestion,\n\t\t\t\tmatchingSuggestions\n\t\t\t) > 0;\n\n\t\tif ( hasMatchingSuggestions && ! hasSelectedMatchingSuggestions ) {\n\t\t\t// If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n\t\t\tsetSelectedSuggestion( matchingSuggestions[ 0 ] );\n\t\t}\n\t}, [ matchingSuggestions, selectedSuggestion ] );\n\n\t// Announcements.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tif ( isExpanded ) {\n\t\t\tconst message = hasMatchingSuggestions\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t )\n\t\t\t\t: __( 'No results.' );\n\n\t\t\tspeak( message, 'polite' );\n\t\t}\n\t}, [ matchingSuggestions, isExpanded ] );\n\n\t// Disable reason: There is no appropriate role which describes the\n\t// input container intended accessible usability.\n\t// TODO: Refactor click detection to use blur to stop propagation.\n\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\treturn (\n\t\t<DetectOutside onFocusOutside={ onFocusOutside }>\n\t\t\t<BaseControl\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'components-combobox-control'\n\t\t\t\t) }\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ `components-form-token-input-${ instanceId }` }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\thelp={ help }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-combobox-control__suggestions-container\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<InputWrapperFlex\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t<TokenInput\n\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__input\"\n\t\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\t\tref={ inputContainer }\n\t\t\t\t\t\t\t\tvalue={ isExpanded ? inputValue : currentLabel }\n\t\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\t\tonBlur={ onBlur }\n\t\t\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t\t\tselectedSuggestionIndex={ getIndexOfMatchingSuggestion(\n\t\t\t\t\t\t\t\t\tselectedSuggestion,\n\t\t\t\t\t\t\t\t\tmatchingSuggestions\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ onInputChange }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t{ allowReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__reset\"\n\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</InputWrapperFlex>\n\t\t\t\t\t{ isExpanded && (\n\t\t\t\t\t\t<SuggestionsList\n\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\t// The empty string for `value` here is not actually used, but is\n\t\t\t\t\t\t\t// just a quick way to satisfy the TypeScript requirements of SuggestionsList.\n\t\t\t\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330\n\t\t\t\t\t\t\tmatch={ { label: inputValue, value: '' } }\n\t\t\t\t\t\t\tdisplayTransform={ ( suggestion ) =>\n\t\t\t\t\t\t\t\tsuggestion.label\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsuggestions={ matchingSuggestions }\n\t\t\t\t\t\t\tselectedIndex={ getIndexOfMatchingSuggestion(\n\t\t\t\t\t\t\t\tselectedSuggestion,\n\t\t\t\t\t\t\t\tmatchingSuggestions\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonHover={ setSelectedSuggestion }\n\t\t\t\t\t\t\tonSelect={ onSuggestionSelected }\n\t\t\t\t\t\t\tscrollIntoView\n\t\t\t\t\t\t\t__experimentalRenderItem={\n\t\t\t\t\t\t\t\t__experimentalRenderItem\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</BaseControl>\n\t\t</DetectOutside>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n}\n\nexport default ComboboxControl;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_element","_compose","_a11y","_icons","_styles","_tokenInput","_suggestionsList","_baseControl","_button","_flex","_withFocusOutside","_hooks","_strings","_useDeprecatedProps","_withIgnoreImeEvents","noop","DetectOutside","withFocusOutside","Component","handleFocusOutside","event","props","onFocusOutside","render","children","getIndexOfMatchingSuggestion","selectedSuggestion","matchingSuggestions","indexOf","ComboboxControl","_currentOption$label","__nextHasNoMarginBottom","__next40pxDefaultSize","value","valueProp","label","options","onChange","onChangeProp","onFilterValueChange","hideLabelFromVision","help","allowReset","className","messages","selected","__","__experimentalRenderItem","useDeprecated36pxDefaultSizeProp","setValue","useControlledValue","currentOption","find","option","currentLabel","instanceId","useInstanceId","setSelectedSuggestion","useState","isExpanded","setIsExpanded","inputHasFocus","setInputHasFocus","inputValue","setInputValue","inputContainer","useRef","useMemo","startsWithMatch","containsMatch","match","normalizeTextString","forEach","index","push","concat","onSuggestionSelected","newSelectedSuggestion","speak","handleArrowNavigation","offset","nextIndex","length","onKeyDown","withIgnoreIMEEvents","preventDefault","defaultPrevented","code","onBlur","onFocus","onInputChange","text","handleOnReset","current","focus","useEffect","hasMatchingSuggestions","hasSelectedMatchingSuggestions","message","sprintf","_n","_react","createElement","default","classnames","id","tabIndex","InputWrapperFlex","FlexBlock","ref","selectedSuggestionIndex","FlexItem","icon","closeSmall","disabled","onClick","displayTransform","suggestion","suggestions","selectedIndex","onHover","onSelect","scrollIntoView","_default","exports"],"sources":["@wordpress/components/src/combobox-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tComponent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { InputWrapperFlex } from './styles';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { FlexBlock, FlexItem } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\nimport type { ComboboxControlOption, ComboboxControlProps } from './types';\nimport type { TokenInputProps } from '../form-token-field/types';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\n\nconst noop = () => {};\n\ninterface DetectOutsideComponentProps {\n\tonFocusOutside: ( event: React.FocusEvent ) => void;\n\tchildren?: React.ReactNode;\n}\n\nconst DetectOutside = withFocusOutside(\n\tclass extends Component< DetectOutsideComponentProps > {\n\t\thandleFocusOutside( event: React.FocusEvent ) {\n\t\t\tthis.props.onFocusOutside( event );\n\t\t}\n\n\t\trender() {\n\t\t\treturn this.props.children;\n\t\t}\n\t}\n);\n\nconst getIndexOfMatchingSuggestion = (\n\tselectedSuggestion: ComboboxControlOption | null,\n\tmatchingSuggestions: ComboboxControlOption[]\n) =>\n\tselectedSuggestion === null\n\t\t? -1\n\t\t: matchingSuggestions.indexOf( selectedSuggestion );\n\n/**\n * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of\n * being able to search for options using a search input.\n *\n * ```jsx\n * import { ComboboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const options = [\n * \t{\n * \t\tvalue: 'small',\n * \t\tlabel: 'Small',\n * \t},\n * \t{\n * \t\tvalue: 'normal',\n * \t\tlabel: 'Normal',\n * \t},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\n * \t},\n * ];\n *\n * function MyComboboxControl() {\n * \tconst [ fontSize, setFontSize ] = useState();\n * \tconst [ filteredOptions, setFilteredOptions ] = useState( options );\n * \treturn (\n * \t\t<ComboboxControl\n * \t\t\tlabel=\"Font Size\"\n * \t\t\tvalue={ fontSize }\n * \t\t\tonChange={ setFontSize }\n * \t\t\toptions={ filteredOptions }\n * \t\t\tonFilterValueChange={ ( inputValue ) =>\n * \t\t\t\tsetFilteredOptions(\n * \t\t\t\t\toptions.filter( ( option ) =>\n * \t\t\t\t\t\toption.label\n * \t\t\t\t\t\t\t.toLowerCase()\n * \t\t\t\t\t\t\t.startsWith( inputValue.toLowerCase() )\n * \t\t\t\t\t)\n * \t\t\t\t)\n * \t\t\t}\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction ComboboxControl( props: ComboboxControlProps ) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\t__next40pxDefaultSize = false,\n\t\tvalue: valueProp,\n\t\tlabel,\n\t\toptions,\n\t\tonChange: onChangeProp,\n\t\tonFilterValueChange = noop,\n\t\thideLabelFromVision,\n\t\thelp,\n\t\tallowReset = true,\n\t\tclassName,\n\t\tmessages = {\n\t\t\tselected: __( 'Item selected.' ),\n\t\t},\n\t\t__experimentalRenderItem,\n\t} = useDeprecated36pxDefaultSizeProp( props );\n\n\tconst [ value, setValue ] = useControlledValue( {\n\t\tvalue: valueProp,\n\t\tonChange: onChangeProp,\n\t} );\n\n\tconst currentOption = options.find( ( option ) => option.value === value );\n\tconst currentLabel = currentOption?.label ?? '';\n\t// Use a custom prefix when generating the `instanceId` to avoid having\n\t// duplicate input IDs when rendering this component and `FormTokenField`\n\t// in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n\tconst instanceId = useInstanceId( ComboboxControl, 'combobox-control' );\n\tconst [ selectedSuggestion, setSelectedSuggestion ] = useState(\n\t\tcurrentOption || null\n\t);\n\tconst [ isExpanded, setIsExpanded ] = useState( false );\n\tconst [ inputHasFocus, setInputHasFocus ] = useState( false );\n\tconst [ inputValue, setInputValue ] = useState( '' );\n\tconst inputContainer = useRef< HTMLInputElement >( null );\n\n\tconst matchingSuggestions = useMemo( () => {\n\t\tconst startsWithMatch: ComboboxControlOption[] = [];\n\t\tconst containsMatch: ComboboxControlOption[] = [];\n\t\tconst match = normalizeTextString( inputValue );\n\t\toptions.forEach( ( option ) => {\n\t\t\tconst index = normalizeTextString( option.label ).indexOf( match );\n\t\t\tif ( index === 0 ) {\n\t\t\t\tstartsWithMatch.push( option );\n\t\t\t} else if ( index > 0 ) {\n\t\t\t\tcontainsMatch.push( option );\n\t\t\t}\n\t\t} );\n\n\t\treturn startsWithMatch.concat( containsMatch );\n\t}, [ inputValue, options ] );\n\n\tconst onSuggestionSelected = (\n\t\tnewSelectedSuggestion: ComboboxControlOption\n\t) => {\n\t\tsetValue( newSelectedSuggestion.value );\n\t\tspeak( messages.selected, 'assertive' );\n\t\tsetSelectedSuggestion( newSelectedSuggestion );\n\t\tsetInputValue( '' );\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst handleArrowNavigation = ( offset = 1 ) => {\n\t\tconst index = getIndexOfMatchingSuggestion(\n\t\t\tselectedSuggestion,\n\t\t\tmatchingSuggestions\n\t\t);\n\t\tlet nextIndex = index + offset;\n\t\tif ( nextIndex < 0 ) {\n\t\t\tnextIndex = matchingSuggestions.length - 1;\n\t\t} else if ( nextIndex >= matchingSuggestions.length ) {\n\t\t\tnextIndex = 0;\n\t\t}\n\t\tsetSelectedSuggestion( matchingSuggestions[ nextIndex ] );\n\t\tsetIsExpanded( true );\n\t};\n\n\tconst onKeyDown: React.KeyboardEventHandler< HTMLDivElement > =\n\t\twithIgnoreIMEEvents( ( event ) => {\n\t\t\tlet preventDefault = false;\n\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tswitch ( event.code ) {\n\t\t\t\tcase 'Enter':\n\t\t\t\t\tif ( selectedSuggestion ) {\n\t\t\t\t\t\tonSuggestionSelected( selectedSuggestion );\n\t\t\t\t\t\tpreventDefault = true;\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\t\thandleArrowNavigation( -1 );\n\t\t\t\t\tpreventDefault = true;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\thandleArrowNavigation( 1 );\n\t\t\t\t\tpreventDefault = true;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'Escape':\n\t\t\t\t\tsetIsExpanded( false );\n\t\t\t\t\tsetSelectedSuggestion( null );\n\t\t\t\t\tpreventDefault = true;\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tif ( preventDefault ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t} );\n\n\tconst onBlur = () => {\n\t\tsetInputHasFocus( false );\n\t};\n\n\tconst onFocus = () => {\n\t\tsetInputHasFocus( true );\n\t\tsetIsExpanded( true );\n\t\tonFilterValueChange( '' );\n\t\tsetInputValue( '' );\n\t};\n\n\tconst onFocusOutside = () => {\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst onInputChange: TokenInputProps[ 'onChange' ] = ( event ) => {\n\t\tconst text = event.value;\n\t\tsetInputValue( text );\n\t\tonFilterValueChange( text );\n\t\tif ( inputHasFocus ) {\n\t\t\tsetIsExpanded( true );\n\t\t}\n\t};\n\n\tconst handleOnReset = () => {\n\t\tsetValue( null );\n\t\tinputContainer.current?.focus();\n\t};\n\n\t// Update current selections when the filter input changes.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tconst hasSelectedMatchingSuggestions =\n\t\t\tgetIndexOfMatchingSuggestion(\n\t\t\t\tselectedSuggestion,\n\t\t\t\tmatchingSuggestions\n\t\t\t) > 0;\n\n\t\tif ( hasMatchingSuggestions && ! hasSelectedMatchingSuggestions ) {\n\t\t\t// If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n\t\t\tsetSelectedSuggestion( matchingSuggestions[ 0 ] );\n\t\t}\n\t}, [ matchingSuggestions, selectedSuggestion ] );\n\n\t// Announcements.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tif ( isExpanded ) {\n\t\t\tconst message = hasMatchingSuggestions\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t )\n\t\t\t\t: __( 'No results.' );\n\n\t\t\tspeak( message, 'polite' );\n\t\t}\n\t}, [ matchingSuggestions, isExpanded ] );\n\n\t// Disable reason: There is no appropriate role which describes the\n\t// input container intended accessible usability.\n\t// TODO: Refactor click detection to use blur to stop propagation.\n\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\treturn (\n\t\t<DetectOutside onFocusOutside={ onFocusOutside }>\n\t\t\t<BaseControl\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'components-combobox-control'\n\t\t\t\t) }\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ `components-form-token-input-${ instanceId }` }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\thelp={ help }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-combobox-control__suggestions-container\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<InputWrapperFlex\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t<TokenInput\n\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__input\"\n\t\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\t\tref={ inputContainer }\n\t\t\t\t\t\t\t\tvalue={ isExpanded ? inputValue : currentLabel }\n\t\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\t\tonBlur={ onBlur }\n\t\t\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t\t\tselectedSuggestionIndex={ getIndexOfMatchingSuggestion(\n\t\t\t\t\t\t\t\t\tselectedSuggestion,\n\t\t\t\t\t\t\t\t\tmatchingSuggestions\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ onInputChange }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t{ allowReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__reset\"\n\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</InputWrapperFlex>\n\t\t\t\t\t{ isExpanded && (\n\t\t\t\t\t\t<SuggestionsList\n\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\t// The empty string for `value` here is not actually used, but is\n\t\t\t\t\t\t\t// just a quick way to satisfy the TypeScript requirements of SuggestionsList.\n\t\t\t\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330\n\t\t\t\t\t\t\tmatch={ { label: inputValue, value: '' } }\n\t\t\t\t\t\t\tdisplayTransform={ ( suggestion ) =>\n\t\t\t\t\t\t\t\tsuggestion.label\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsuggestions={ matchingSuggestions }\n\t\t\t\t\t\t\tselectedIndex={ getIndexOfMatchingSuggestion(\n\t\t\t\t\t\t\t\tselectedSuggestion,\n\t\t\t\t\t\t\t\tmatchingSuggestions\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonHover={ setSelectedSuggestion }\n\t\t\t\t\t\t\tonSelect={ onSuggestionSelected }\n\t\t\t\t\t\t\tscrollIntoView\n\t\t\t\t\t\t\t__experimentalRenderItem={\n\t\t\t\t\t\t\t\t__experimentalRenderItem\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</BaseControl>\n\t\t</DetectOutside>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n}\n\nexport default ComboboxControl;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAOA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AAKA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,WAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,gBAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,YAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,OAAA,GAAAX,sBAAA,CAAAC,OAAA;AACA,IAAAW,KAAA,GAAAX,OAAA;AACA,IAAAY,iBAAA,GAAAb,sBAAA,CAAAC,OAAA;AACA,IAAAa,MAAA,GAAAb,OAAA;AACA,IAAAc,QAAA,GAAAd,OAAA;AAGA,IAAAe,mBAAA,GAAAf,OAAA;AACA,IAAAgB,oBAAA,GAAAhB,OAAA;AAnCA;AACA;AACA;;AAGA;AACA;AACA;;AAaA;AACA;AACA;;AAeA,MAAMiB,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAOrB,MAAMC,aAAa,GAAG,IAAAC,yBAAgB,EACrC,cAAcC,kBAAS,CAAgC;EACtDC,kBAAkBA,CAAEC,KAAuB,EAAG;IAC7C,IAAI,CAACC,KAAK,CAACC,cAAc,CAAEF,KAAM,CAAC;EACnC;EAEAG,MAAMA,CAAA,EAAG;IACR,OAAO,IAAI,CAACF,KAAK,CAACG,QAAQ;EAC3B;AACD,CACD,CAAC;AAED,MAAMC,4BAA4B,GAAGA,CACpCC,kBAAgD,EAChDC,mBAA4C,KAE5CD,kBAAkB,KAAK,IAAI,GACxB,CAAC,CAAC,GACFC,mBAAmB,CAACC,OAAO,CAAEF,kBAAmB,CAAC;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,eAAeA,CAAER,KAA2B,EAAG;EAAA,IAAAS,oBAAA;EACvD,MAAM;IACLC,uBAAuB,GAAG,KAAK;IAC/BC,qBAAqB,GAAG,KAAK;IAC7BC,KAAK,EAAEC,SAAS;IAChBC,KAAK;IACLC,OAAO;IACPC,QAAQ,EAAEC,YAAY;IACtBC,mBAAmB,GAAGxB,IAAI;IAC1ByB,mBAAmB;IACnBC,IAAI;IACJC,UAAU,GAAG,IAAI;IACjBC,SAAS;IACTC,QAAQ,GAAG;MACVC,QAAQ,EAAE,IAAAC,QAAE,EAAE,gBAAiB;IAChC,CAAC;IACDC;EACD,CAAC,GAAG,IAAAC,oDAAgC,EAAE3B,KAAM,CAAC;EAE7C,MAAM,CAAEY,KAAK,EAAEgB,QAAQ,CAAE,GAAG,IAAAC,yBAAkB,EAAE;IAC/CjB,KAAK,EAAEC,SAAS;IAChBG,QAAQ,EAAEC;EACX,CAAE,CAAC;EAEH,MAAMa,aAAa,GAAGf,OAAO,CAACgB,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACpB,KAAK,KAAKA,KAAM,CAAC;EAC1E,MAAMqB,YAAY,IAAAxB,oBAAA,GAAGqB,aAAa,EAAEhB,KAAK,cAAAL,oBAAA,cAAAA,oBAAA,GAAI,EAAE;EAC/C;EACA;EACA;EACA,MAAMyB,UAAU,GAAG,IAAAC,sBAAa,EAAE3B,eAAe,EAAE,kBAAmB,CAAC;EACvE,MAAM,CAAEH,kBAAkB,EAAE+B,qBAAqB,CAAE,GAAG,IAAAC,iBAAQ,EAC7DP,aAAa,IAAI,IAClB,CAAC;EACD,MAAM,CAAEQ,UAAU,EAAEC,aAAa,CAAE,GAAG,IAAAF,iBAAQ,EAAE,KAAM,CAAC;EACvD,MAAM,CAAEG,aAAa,EAAEC,gBAAgB,CAAE,GAAG,IAAAJ,iBAAQ,EAAE,KAAM,CAAC;EAC7D,MAAM,CAAEK,UAAU,EAAEC,aAAa,CAAE,GAAG,IAAAN,iBAAQ,EAAE,EAAG,CAAC;EACpD,MAAMO,cAAc,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAEzD,MAAMvC,mBAAmB,GAAG,IAAAwC,gBAAO,EAAE,MAAM;IAC1C,MAAMC,eAAwC,GAAG,EAAE;IACnD,MAAMC,aAAsC,GAAG,EAAE;IACjD,MAAMC,KAAK,GAAG,IAAAC,4BAAmB,EAAER,UAAW,CAAC;IAC/C3B,OAAO,CAACoC,OAAO,CAAInB,MAAM,IAAM;MAC9B,MAAMoB,KAAK,GAAG,IAAAF,4BAAmB,EAAElB,MAAM,CAAClB,KAAM,CAAC,CAACP,OAAO,CAAE0C,KAAM,CAAC;MAClE,IAAKG,KAAK,KAAK,CAAC,EAAG;QAClBL,eAAe,CAACM,IAAI,CAAErB,MAAO,CAAC;MAC/B,CAAC,MAAM,IAAKoB,KAAK,GAAG,CAAC,EAAG;QACvBJ,aAAa,CAACK,IAAI,CAAErB,MAAO,CAAC;MAC7B;IACD,CAAE,CAAC;IAEH,OAAOe,eAAe,CAACO,MAAM,CAAEN,aAAc,CAAC;EAC/C,CAAC,EAAE,CAAEN,UAAU,EAAE3B,OAAO,CAAG,CAAC;EAE5B,MAAMwC,oBAAoB,GACzBC,qBAA4C,IACxC;IACJ5B,QAAQ,CAAE4B,qBAAqB,CAAC5C,KAAM,CAAC;IACvC,IAAA6C,WAAK,EAAElC,QAAQ,CAACC,QAAQ,EAAE,WAAY,CAAC;IACvCY,qBAAqB,CAAEoB,qBAAsB,CAAC;IAC9Cb,aAAa,CAAE,EAAG,CAAC;IACnBJ,aAAa,CAAE,KAAM,CAAC;EACvB,CAAC;EAED,MAAMmB,qBAAqB,GAAGA,CAAEC,MAAM,GAAG,CAAC,KAAM;IAC/C,MAAMP,KAAK,GAAGhD,4BAA4B,CACzCC,kBAAkB,EAClBC,mBACD,CAAC;IACD,IAAIsD,SAAS,GAAGR,KAAK,GAAGO,MAAM;IAC9B,IAAKC,SAAS,GAAG,CAAC,EAAG;MACpBA,SAAS,GAAGtD,mBAAmB,CAACuD,MAAM,GAAG,CAAC;IAC3C,CAAC,MAAM,IAAKD,SAAS,IAAItD,mBAAmB,CAACuD,MAAM,EAAG;MACrDD,SAAS,GAAG,CAAC;IACd;IACAxB,qBAAqB,CAAE9B,mBAAmB,CAAEsD,SAAS,CAAG,CAAC;IACzDrB,aAAa,CAAE,IAAK,CAAC;EACtB,CAAC;EAED,MAAMuB,SAAuD,GAC5D,IAAAC,wCAAmB,EAAIhE,KAAK,IAAM;IACjC,IAAIiE,cAAc,GAAG,KAAK;IAE1B,IAAKjE,KAAK,CAACkE,gBAAgB,EAAG;MAC7B;IACD;IAEA,QAASlE,KAAK,CAACmE,IAAI;MAClB,KAAK,OAAO;QACX,IAAK7D,kBAAkB,EAAG;UACzBkD,oBAAoB,CAAElD,kBAAmB,CAAC;UAC1C2D,cAAc,GAAG,IAAI;QACtB;QACA;MACD,KAAK,SAAS;QACbN,qBAAqB,CAAE,CAAC,CAAE,CAAC;QAC3BM,cAAc,GAAG,IAAI;QACrB;MACD,KAAK,WAAW;QACfN,qBAAqB,CAAE,CAAE,CAAC;QAC1BM,cAAc,GAAG,IAAI;QACrB;MACD,KAAK,QAAQ;QACZzB,aAAa,CAAE,KAAM,CAAC;QACtBH,qBAAqB,CAAE,IAAK,CAAC;QAC7B4B,cAAc,GAAG,IAAI;QACrB;MACD;QACC;IACF;IAEA,IAAKA,cAAc,EAAG;MACrBjE,KAAK,CAACiE,cAAc,CAAC,CAAC;IACvB;EACD,CAAE,CAAC;EAEJ,MAAMG,MAAM,GAAGA,CAAA,KAAM;IACpB1B,gBAAgB,CAAE,KAAM,CAAC;EAC1B,CAAC;EAED,MAAM2B,OAAO,GAAGA,CAAA,KAAM;IACrB3B,gBAAgB,CAAE,IAAK,CAAC;IACxBF,aAAa,CAAE,IAAK,CAAC;IACrBrB,mBAAmB,CAAE,EAAG,CAAC;IACzByB,aAAa,CAAE,EAAG,CAAC;EACpB,CAAC;EAED,MAAM1C,cAAc,GAAGA,CAAA,KAAM;IAC5BsC,aAAa,CAAE,KAAM,CAAC;EACvB,CAAC;EAED,MAAM8B,aAA4C,GAAKtE,KAAK,IAAM;IACjE,MAAMuE,IAAI,GAAGvE,KAAK,CAACa,KAAK;IACxB+B,aAAa,CAAE2B,IAAK,CAAC;IACrBpD,mBAAmB,CAAEoD,IAAK,CAAC;IAC3B,IAAK9B,aAAa,EAAG;MACpBD,aAAa,CAAE,IAAK,CAAC;IACtB;EACD,CAAC;EAED,MAAMgC,aAAa,GAAGA,CAAA,KAAM;IAC3B3C,QAAQ,CAAE,IAAK,CAAC;IAChBgB,cAAc,CAAC4B,OAAO,EAAEC,KAAK,CAAC,CAAC;EAChC,CAAC;;EAED;EACA,IAAAC,kBAAS,EAAE,MAAM;IAChB,MAAMC,sBAAsB,GAAGrE,mBAAmB,CAACuD,MAAM,GAAG,CAAC;IAC7D,MAAMe,8BAA8B,GACnCxE,4BAA4B,CAC3BC,kBAAkB,EAClBC,mBACD,CAAC,GAAG,CAAC;IAEN,IAAKqE,sBAAsB,IAAI,CAAEC,8BAA8B,EAAG;MACjE;MACAxC,qBAAqB,CAAE9B,mBAAmB,CAAE,CAAC,CAAG,CAAC;IAClD;EACD,CAAC,EAAE,CAAEA,mBAAmB,EAAED,kBAAkB,CAAG,CAAC;;EAEhD;EACA,IAAAqE,kBAAS,EAAE,MAAM;IAChB,MAAMC,sBAAsB,GAAGrE,mBAAmB,CAACuD,MAAM,GAAG,CAAC;IAC7D,IAAKvB,UAAU,EAAG;MACjB,MAAMuC,OAAO,GAAGF,sBAAsB,GACnC,IAAAG,aAAO,GACP;MACA,IAAAC,QAAE,EACD,0DAA0D,EAC1D,2DAA2D,EAC3DzE,mBAAmB,CAACuD,MACrB,CAAC,EACDvD,mBAAmB,CAACuD,MACpB,CAAC,GACD,IAAApC,QAAE,EAAE,aAAc,CAAC;MAEtB,IAAAgC,WAAK,EAAEoB,OAAO,EAAE,QAAS,CAAC;IAC3B;EACD,CAAC,EAAE,CAAEvE,mBAAmB,EAAEgC,UAAU,CAAG,CAAC;;EAExC;EACA;EACA;EACA;EACA,OACC,IAAA0C,MAAA,CAAAC,aAAA,EAACtF,aAAa;IAACM,cAAc,EAAGA;EAAgB,GAC/C,IAAA+E,MAAA,CAAAC,aAAA,EAAC/F,YAAA,CAAAgG,OAAW;IACXxE,uBAAuB,EAAGA,uBAAyB;IACnDY,SAAS,EAAG,IAAA6D,mBAAU,EACrB7D,SAAS,EACT,6BACD,CAAG;IACHR,KAAK,EAAGA,KAAO;IACfsE,EAAE,EAAI,+BAA+BlD,UAAY,EAAG;IACpDf,mBAAmB,EAAGA,mBAAqB;IAC3CC,IAAI,EAAGA;EAAM,GAEb,IAAA4D,MAAA,CAAAC,aAAA;IACC3D,SAAS,EAAC,oDAAoD;IAC9D+D,QAAQ,EAAG,CAAC,CAAG;IACfvB,SAAS,EAAGA;EAAW,GAEvB,IAAAkB,MAAA,CAAAC,aAAA,EAAClG,OAAA,CAAAuG,gBAAgB;IAChB3E,qBAAqB,EAAGA;EAAuB,GAE/C,IAAAqE,MAAA,CAAAC,aAAA,EAAC7F,KAAA,CAAAmG,SAAS,QACT,IAAAP,MAAA,CAAAC,aAAA,EAACjG,WAAA,CAAAkG,OAAU;IACV5D,SAAS,EAAC,oCAAoC;IAC9CY,UAAU,EAAGA,UAAY;IACzBsD,GAAG,EAAG5C,cAAgB;IACtBhC,KAAK,EAAG0B,UAAU,GAAGI,UAAU,GAAGT,YAAc;IAChDmC,OAAO,EAAGA,OAAS;IACnBD,MAAM,EAAGA,MAAQ;IACjB7B,UAAU,EAAGA,UAAY;IACzBmD,uBAAuB,EAAGrF,4BAA4B,CACrDC,kBAAkB,EAClBC,mBACD,CAAG;IACHU,QAAQ,EAAGqD;EAAe,CAC1B,CACS,CAAC,EACVhD,UAAU,IACX,IAAA2D,MAAA,CAAAC,aAAA,EAAC7F,KAAA,CAAAsG,QAAQ,QACR,IAAAV,MAAA,CAAAC,aAAA,EAAC9F,OAAA,CAAA+F,OAAM;IACN5D,SAAS,EAAC,oCAAoC;IAC9CqE,IAAI,EAAGC,iBAAY;IACnBC,QAAQ,EAAG,CAAEjF,KAAO;IACpBkF,OAAO,EAAGvB,aAAe;IACzBzD,KAAK,EAAG,IAAAW,QAAE,EAAE,OAAQ;EAAG,CACvB,CACQ,CAEM,CAAC,EACjBa,UAAU,IACX,IAAA0C,MAAA,CAAAC,aAAA,EAAChG,gBAAA,CAAAiG,OAAe;IACfhD,UAAU,EAAGA;IACb;IACA;IACA;IAAA;IACAe,KAAK,EAAG;MAAEnC,KAAK,EAAE4B,UAAU;MAAE9B,KAAK,EAAE;IAAG,CAAG;IAC1CmF,gBAAgB,EAAKC,UAAU,IAC9BA,UAAU,CAAClF,KACX;IACDmF,WAAW,EAAG3F,mBAAqB;IACnC4F,aAAa,EAAG9F,4BAA4B,CAC3CC,kBAAkB,EAClBC,mBACD,CAAG;IACH6F,OAAO,EAAG/D,qBAAuB;IACjCgE,QAAQ,EAAG7C,oBAAsB;IACjC8C,cAAc;IACd3E,wBAAwB,EACvBA;EACA,CACD,CAEE,CACO,CACC,CAAC;EAEjB;AACD;AAAC,IAAA4E,QAAA,GAAAC,OAAA,CAAArB,OAAA,GAEc1E,eAAe"}
|
|
@@ -12,13 +12,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
12
12
|
var _icons = require("@wordpress/icons");
|
|
13
13
|
var _i18n = require("@wordpress/i18n");
|
|
14
14
|
var _element = require("@wordpress/element");
|
|
15
|
-
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
|
|
16
15
|
var _visuallyHidden = require("../visually-hidden");
|
|
17
16
|
var _selectControlStyles = require("../select-control/styles/select-control-styles");
|
|
18
17
|
var _chevronDown = _interopRequireDefault(require("../select-control/chevron-down"));
|
|
19
|
-
var _styles = require("./styles");
|
|
20
18
|
var _baseControlStyles = require("../base-control/styles/base-control-styles");
|
|
21
19
|
var _useDeprecatedProps = require("../utils/use-deprecated-props");
|
|
20
|
+
var _inputBase = _interopRequireDefault(require("../input-control/input-base"));
|
|
22
21
|
// @ts-nocheck
|
|
23
22
|
/**
|
|
24
23
|
* External dependencies
|
|
@@ -67,8 +66,6 @@ function CustomSelectControl(props) {
|
|
|
67
66
|
const {
|
|
68
67
|
/** Start opting into the larger default height that will become the default size in a future version. */
|
|
69
68
|
__next40pxDefaultSize = false,
|
|
70
|
-
/** Start opting into the unconstrained width that will become the default in a future version. */
|
|
71
|
-
__nextUnconstrainedWidth = false,
|
|
72
69
|
className,
|
|
73
70
|
hideLabelFromVision,
|
|
74
71
|
label,
|
|
@@ -111,13 +108,6 @@ function CustomSelectControl(props) {
|
|
|
111
108
|
setIsFocused(false);
|
|
112
109
|
onBlur?.(e);
|
|
113
110
|
}
|
|
114
|
-
if (!__nextUnconstrainedWidth) {
|
|
115
|
-
(0, _deprecated.default)('Constrained width styles for wp.components.CustomSelectControl', {
|
|
116
|
-
since: '6.1',
|
|
117
|
-
version: '6.4',
|
|
118
|
-
hint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version'
|
|
119
|
-
});
|
|
120
|
-
}
|
|
121
111
|
function getDescribedBy() {
|
|
122
112
|
if (describedBy) {
|
|
123
113
|
return describedBy;
|
|
@@ -152,12 +142,9 @@ function CustomSelectControl(props) {
|
|
|
152
142
|
...getLabelProps({
|
|
153
143
|
className: 'components-custom-select-control__label'
|
|
154
144
|
})
|
|
155
|
-
}, label), (0, _react.createElement)(
|
|
145
|
+
}, label), (0, _react.createElement)(_inputBase.default, {
|
|
156
146
|
__next40pxDefaultSize: __next40pxDefaultSize,
|
|
157
|
-
__nextUnconstrainedWidth: __nextUnconstrainedWidth,
|
|
158
147
|
isFocused: isOpen || isFocused,
|
|
159
|
-
__unstableInputWidth: __nextUnconstrainedWidth ? undefined : 'auto',
|
|
160
|
-
labelPosition: __nextUnconstrainedWidth ? undefined : 'top',
|
|
161
148
|
size: size,
|
|
162
149
|
suffix: (0, _react.createElement)(_chevronDown.default, null)
|
|
163
150
|
}, (0, _react.createElement)(_selectControlStyles.Select, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_downshift","require","_classnames","_interopRequireDefault","_icons","_i18n","_element","_deprecated","_visuallyHidden","_selectControlStyles","_chevronDown","_styles","_baseControlStyles","_useDeprecatedProps","itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","useSelect","stateChangeTypes","ToggleButtonKeyDownArrowDown","Math","min","indexOf","length","ToggleButtonKeyDownArrowUp","max","CustomSelectControl","__next40pxDefaultSize","__nextUnconstrainedWidth","className","hideLabelFromVision","label","describedBy","options","onChange","onSelectedItemChange","size","value","_selectedItem","onMouseOver","onMouseOut","onFocus","onBlur","__experimentalShowSelectedHint","useDeprecated36pxDefaultSizeProp","getLabelProps","getToggleButtonProps","getMenuProps","getItemProps","isOpen","highlightedIndex","initialSelectedItem","undefined","isFocused","setIsFocused","useState","handleOnFocus","e","handleOnBlur","deprecated","since","version","hint","getDescribedBy","__","sprintf","menuProps","onKeyDownHandler","useCallback","stopPropagation","onKeyDown","startsWith","_react","createElement","classnames","VisuallyHidden","as","StyledLabel","InputBaseWithBackCompatMinWidth","__unstableInputWidth","labelPosition","suffix","default","Select","selectSize","__experimentalHint","map","index","key","style","Icon","icon","check","StableCustomSelectControl"],"sources":["@wordpress/components/src/custom-select-control/index.js"],"sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { useSelect } from 'downshift';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useState } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport { InputBaseWithBackCompatMinWidth } from './styles';\nimport { StyledLabel } from '../base-control/styles/base-control-styles';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\n\nconst itemToString = ( item ) => item?.name;\n// This is needed so that in Windows, where\n// the menu does not necessarily open on\n// key up/down, you can still switch between\n// options with the menu closed.\nconst stateReducer = (\n\t{ selectedItem },\n\t{ type, changes, props: { items } }\n) => {\n\tswitch ( type ) {\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:\n\t\t\t// If we already have a selected item, try to select the next one,\n\t\t\t// without circular navigation. Otherwise, select the first item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.min(\n\t\t\t\t\t\t\t\t\titems.indexOf( selectedItem ) + 1,\n\t\t\t\t\t\t\t\t\titems.length - 1\n\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t: 0\n\t\t\t\t\t],\n\t\t\t};\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:\n\t\t\t// If we already have a selected item, try to select the previous one,\n\t\t\t// without circular navigation. Otherwise, select the last item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.max( items.indexOf( selectedItem ) - 1, 0 )\n\t\t\t\t\t\t\t: items.length - 1\n\t\t\t\t\t],\n\t\t\t};\n\t\tdefault:\n\t\t\treturn changes;\n\t}\n};\n\nexport default function CustomSelectControl( props ) {\n\tconst {\n\t\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t\t__next40pxDefaultSize = false,\n\t\t/** Start opting into the unconstrained width that will become the default in a future version. */\n\t\t__nextUnconstrainedWidth = false,\n\t\tclassName,\n\t\thideLabelFromVision,\n\t\tlabel,\n\t\tdescribedBy,\n\t\toptions: items,\n\t\tonChange: onSelectedItemChange,\n\t\t/** @type {import('../select-control/types').SelectControlProps.size} */\n\t\tsize = 'default',\n\t\tvalue: _selectedItem,\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t\tonFocus,\n\t\tonBlur,\n\t\t__experimentalShowSelectedHint = false,\n\t} = useDeprecated36pxDefaultSizeProp( props );\n\n\tconst {\n\t\tgetLabelProps,\n\t\tgetToggleButtonProps,\n\t\tgetMenuProps,\n\t\tgetItemProps,\n\t\tisOpen,\n\t\thighlightedIndex,\n\t\tselectedItem,\n\t} = useSelect( {\n\t\tinitialSelectedItem: items[ 0 ],\n\t\titems,\n\t\titemToString,\n\t\tonSelectedItemChange,\n\t\t...( typeof _selectedItem !== 'undefined' && _selectedItem !== null\n\t\t\t? { selectedItem: _selectedItem }\n\t\t\t: undefined ),\n\t\tstateReducer,\n\t} );\n\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\tfunction handleOnFocus( e ) {\n\t\tsetIsFocused( true );\n\t\tonFocus?.( e );\n\t}\n\n\tfunction handleOnBlur( e ) {\n\t\tsetIsFocused( false );\n\t\tonBlur?.( e );\n\t}\n\n\tif ( ! __nextUnconstrainedWidth ) {\n\t\tdeprecated(\n\t\t\t'Constrained width styles for wp.components.CustomSelectControl',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t\t}\n\t\t);\n\t}\n\n\tfunction getDescribedBy() {\n\t\tif ( describedBy ) {\n\t\t\treturn describedBy;\n\t\t}\n\n\t\tif ( ! selectedItem ) {\n\t\t\treturn __( 'No selection' );\n\t\t}\n\n\t\t// translators: %s: The selected option.\n\t\treturn sprintf( __( 'Currently selected: %s' ), selectedItem.name );\n\t}\n\n\tconst menuProps = getMenuProps( {\n\t\tclassName: 'components-custom-select-control__menu',\n\t\t'aria-hidden': ! isOpen,\n\t} );\n\n\tconst onKeyDownHandler = useCallback(\n\t\t( e ) => {\n\t\t\te.stopPropagation();\n\t\t\tmenuProps?.onKeyDown?.( e );\n\t\t},\n\t\t[ menuProps ]\n\t);\n\n\t// We need this here, because the null active descendant is not fully ARIA compliant.\n\tif (\n\t\tmenuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )\n\t) {\n\t\tdelete menuProps[ 'aria-activedescendant' ];\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-select-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ hideLabelFromVision ? (\n\t\t\t\t<VisuallyHidden as=\"label\" { ...getLabelProps() }>\n\t\t\t\t\t{ label }\n\t\t\t\t</VisuallyHidden>\n\t\t\t) : (\n\t\t\t\t/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */\n\t\t\t\t<StyledLabel\n\t\t\t\t\t{ ...getLabelProps( {\n\t\t\t\t\t\tclassName: 'components-custom-select-control__label',\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</StyledLabel>\n\t\t\t) }\n\t\t\t<InputBaseWithBackCompatMinWidth\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t__nextUnconstrainedWidth={ __nextUnconstrainedWidth }\n\t\t\t\tisFocused={ isOpen || isFocused }\n\t\t\t\t__unstableInputWidth={\n\t\t\t\t\t__nextUnconstrainedWidth ? undefined : 'auto'\n\t\t\t\t}\n\t\t\t\tlabelPosition={ __nextUnconstrainedWidth ? undefined : 'top' }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ <SelectControlChevronDown /> }\n\t\t\t>\n\t\t\t\t<SelectControlSelect\n\t\t\t\t\tonMouseOver={ onMouseOver }\n\t\t\t\t\tonMouseOut={ onMouseOut }\n\t\t\t\t\tas=\"button\"\n\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\t\tselectSize={ size }\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t{ ...getToggleButtonProps( {\n\t\t\t\t\t\t// This is needed because some speech recognition software don't support `aria-labelledby`.\n\t\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t\t'aria-labelledby': undefined,\n\t\t\t\t\t\tclassName: 'components-custom-select-control__button',\n\t\t\t\t\t\tdescribedBy: getDescribedBy(),\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ itemToString( selectedItem ) }\n\t\t\t\t\t{ __experimentalShowSelectedHint &&\n\t\t\t\t\t\tselectedItem.__experimentalHint && (\n\t\t\t\t\t\t\t<span className=\"components-custom-select-control__hint\">\n\t\t\t\t\t\t\t\t{ selectedItem.__experimentalHint }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) }\n\t\t\t\t</SelectControlSelect>\n\t\t\t</InputBaseWithBackCompatMinWidth>\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>\n\t\t\t\t{ isOpen &&\n\t\t\t\t\titems.map( ( item, index ) => (\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-key\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t{ ...getItemProps( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\tkey: item.key,\n\t\t\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t\t\titem.className,\n\t\t\t\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'is-highlighted':\n\t\t\t\t\t\t\t\t\t\t\tindex === highlightedIndex,\n\t\t\t\t\t\t\t\t\t\t'has-hint': !! item.__experimentalHint,\n\t\t\t\t\t\t\t\t\t\t'is-next-40px-default-size':\n\t\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tstyle: item.style,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ item.name }\n\t\t\t\t\t\t\t{ item.__experimentalHint && (\n\t\t\t\t\t\t\t\t<span className=\"components-custom-select-control__item-hint\">\n\t\t\t\t\t\t\t\t\t{ item.__experimentalHint }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ item === selectedItem && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-select-control__item-icon\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t) ) }\n\t\t\t</ul>\n\t\t</div>\n\t);\n}\n\nexport function StableCustomSelectControl( props ) {\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t{ ...props }\n\t\t\t__experimentalShowSelectedHint={ false }\n\t\t/>\n\t);\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["_downshift","require","_classnames","_interopRequireDefault","_icons","_i18n","_element","_visuallyHidden","_selectControlStyles","_chevronDown","_baseControlStyles","_useDeprecatedProps","_inputBase","itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","useSelect","stateChangeTypes","ToggleButtonKeyDownArrowDown","Math","min","indexOf","length","ToggleButtonKeyDownArrowUp","max","CustomSelectControl","__next40pxDefaultSize","className","hideLabelFromVision","label","describedBy","options","onChange","onSelectedItemChange","size","value","_selectedItem","onMouseOver","onMouseOut","onFocus","onBlur","__experimentalShowSelectedHint","useDeprecated36pxDefaultSizeProp","getLabelProps","getToggleButtonProps","getMenuProps","getItemProps","isOpen","highlightedIndex","initialSelectedItem","undefined","isFocused","setIsFocused","useState","handleOnFocus","e","handleOnBlur","getDescribedBy","__","sprintf","menuProps","onKeyDownHandler","useCallback","stopPropagation","onKeyDown","startsWith","_react","createElement","classnames","VisuallyHidden","as","StyledLabel","default","suffix","Select","selectSize","__experimentalHint","map","index","key","style","Icon","icon","check","StableCustomSelectControl"],"sources":["@wordpress/components/src/custom-select-control/index.js"],"sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { useSelect } from 'downshift';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport { StyledLabel } from '../base-control/styles/base-control-styles';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport InputBase from '../input-control/input-base';\n\nconst itemToString = ( item ) => item?.name;\n// This is needed so that in Windows, where\n// the menu does not necessarily open on\n// key up/down, you can still switch between\n// options with the menu closed.\nconst stateReducer = (\n\t{ selectedItem },\n\t{ type, changes, props: { items } }\n) => {\n\tswitch ( type ) {\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:\n\t\t\t// If we already have a selected item, try to select the next one,\n\t\t\t// without circular navigation. Otherwise, select the first item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.min(\n\t\t\t\t\t\t\t\t\titems.indexOf( selectedItem ) + 1,\n\t\t\t\t\t\t\t\t\titems.length - 1\n\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t: 0\n\t\t\t\t\t],\n\t\t\t};\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:\n\t\t\t// If we already have a selected item, try to select the previous one,\n\t\t\t// without circular navigation. Otherwise, select the last item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.max( items.indexOf( selectedItem ) - 1, 0 )\n\t\t\t\t\t\t\t: items.length - 1\n\t\t\t\t\t],\n\t\t\t};\n\t\tdefault:\n\t\t\treturn changes;\n\t}\n};\n\nexport default function CustomSelectControl( props ) {\n\tconst {\n\t\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t\t__next40pxDefaultSize = false,\n\t\tclassName,\n\t\thideLabelFromVision,\n\t\tlabel,\n\t\tdescribedBy,\n\t\toptions: items,\n\t\tonChange: onSelectedItemChange,\n\t\t/** @type {import('../select-control/types').SelectControlProps.size} */\n\t\tsize = 'default',\n\t\tvalue: _selectedItem,\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t\tonFocus,\n\t\tonBlur,\n\t\t__experimentalShowSelectedHint = false,\n\t} = useDeprecated36pxDefaultSizeProp( props );\n\n\tconst {\n\t\tgetLabelProps,\n\t\tgetToggleButtonProps,\n\t\tgetMenuProps,\n\t\tgetItemProps,\n\t\tisOpen,\n\t\thighlightedIndex,\n\t\tselectedItem,\n\t} = useSelect( {\n\t\tinitialSelectedItem: items[ 0 ],\n\t\titems,\n\t\titemToString,\n\t\tonSelectedItemChange,\n\t\t...( typeof _selectedItem !== 'undefined' && _selectedItem !== null\n\t\t\t? { selectedItem: _selectedItem }\n\t\t\t: undefined ),\n\t\tstateReducer,\n\t} );\n\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\tfunction handleOnFocus( e ) {\n\t\tsetIsFocused( true );\n\t\tonFocus?.( e );\n\t}\n\n\tfunction handleOnBlur( e ) {\n\t\tsetIsFocused( false );\n\t\tonBlur?.( e );\n\t}\n\n\tfunction getDescribedBy() {\n\t\tif ( describedBy ) {\n\t\t\treturn describedBy;\n\t\t}\n\n\t\tif ( ! selectedItem ) {\n\t\t\treturn __( 'No selection' );\n\t\t}\n\n\t\t// translators: %s: The selected option.\n\t\treturn sprintf( __( 'Currently selected: %s' ), selectedItem.name );\n\t}\n\n\tconst menuProps = getMenuProps( {\n\t\tclassName: 'components-custom-select-control__menu',\n\t\t'aria-hidden': ! isOpen,\n\t} );\n\n\tconst onKeyDownHandler = useCallback(\n\t\t( e ) => {\n\t\t\te.stopPropagation();\n\t\t\tmenuProps?.onKeyDown?.( e );\n\t\t},\n\t\t[ menuProps ]\n\t);\n\n\t// We need this here, because the null active descendant is not fully ARIA compliant.\n\tif (\n\t\tmenuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )\n\t) {\n\t\tdelete menuProps[ 'aria-activedescendant' ];\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-select-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ hideLabelFromVision ? (\n\t\t\t\t<VisuallyHidden as=\"label\" { ...getLabelProps() }>\n\t\t\t\t\t{ label }\n\t\t\t\t</VisuallyHidden>\n\t\t\t) : (\n\t\t\t\t/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */\n\t\t\t\t<StyledLabel\n\t\t\t\t\t{ ...getLabelProps( {\n\t\t\t\t\t\tclassName: 'components-custom-select-control__label',\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</StyledLabel>\n\t\t\t) }\n\t\t\t<InputBase\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\tisFocused={ isOpen || isFocused }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ <SelectControlChevronDown /> }\n\t\t\t>\n\t\t\t\t<SelectControlSelect\n\t\t\t\t\tonMouseOver={ onMouseOver }\n\t\t\t\t\tonMouseOut={ onMouseOut }\n\t\t\t\t\tas=\"button\"\n\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\t\tselectSize={ size }\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t{ ...getToggleButtonProps( {\n\t\t\t\t\t\t// This is needed because some speech recognition software don't support `aria-labelledby`.\n\t\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t\t'aria-labelledby': undefined,\n\t\t\t\t\t\tclassName: 'components-custom-select-control__button',\n\t\t\t\t\t\tdescribedBy: getDescribedBy(),\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ itemToString( selectedItem ) }\n\t\t\t\t\t{ __experimentalShowSelectedHint &&\n\t\t\t\t\t\tselectedItem.__experimentalHint && (\n\t\t\t\t\t\t\t<span className=\"components-custom-select-control__hint\">\n\t\t\t\t\t\t\t\t{ selectedItem.__experimentalHint }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) }\n\t\t\t\t</SelectControlSelect>\n\t\t\t</InputBase>\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>\n\t\t\t\t{ isOpen &&\n\t\t\t\t\titems.map( ( item, index ) => (\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-key\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t{ ...getItemProps( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\tkey: item.key,\n\t\t\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t\t\titem.className,\n\t\t\t\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'is-highlighted':\n\t\t\t\t\t\t\t\t\t\t\tindex === highlightedIndex,\n\t\t\t\t\t\t\t\t\t\t'has-hint': !! item.__experimentalHint,\n\t\t\t\t\t\t\t\t\t\t'is-next-40px-default-size':\n\t\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tstyle: item.style,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ item.name }\n\t\t\t\t\t\t\t{ item.__experimentalHint && (\n\t\t\t\t\t\t\t\t<span className=\"components-custom-select-control__item-hint\">\n\t\t\t\t\t\t\t\t\t{ item.__experimentalHint }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ item === selectedItem && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-select-control__item-icon\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t) ) }\n\t\t\t</ul>\n\t\t</div>\n\t);\n}\n\nexport function StableCustomSelectControl( props ) {\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t{ ...props }\n\t\t\t__experimentalShowSelectedHint={ false }\n\t\t/>\n\t);\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.CustomSelectItem = CustomSelectItem;
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
var _element = require("@wordpress/element");
|
|
10
|
+
var _icons = require("@wordpress/icons");
|
|
11
|
+
var Styled = _interopRequireWildcard(require("./styles"));
|
|
12
|
+
var _customSelect = require("./custom-select");
|
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
|
+
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 && Object.prototype.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; }
|
|
15
|
+
/**
|
|
16
|
+
* WordPress dependencies
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
function CustomSelectItem({
|
|
20
|
+
children,
|
|
21
|
+
...props
|
|
22
|
+
}) {
|
|
23
|
+
const customSelectContext = (0, _element.useContext)(_customSelect.CustomSelectContext);
|
|
24
|
+
return (0, _react.createElement)(Styled.SelectItem, {
|
|
25
|
+
store: customSelectContext?.store,
|
|
26
|
+
...props
|
|
27
|
+
}, children !== null && children !== void 0 ? children : props.value, (0, _react.createElement)(Styled.SelectedItemCheck, null, (0, _react.createElement)(_icons.Icon, {
|
|
28
|
+
icon: _icons.check
|
|
29
|
+
})));
|
|
30
|
+
}
|
|
31
|
+
var _default = exports.default = CustomSelectItem;
|
|
32
|
+
//# sourceMappingURL=custom-select-item.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_element","require","_icons","Styled","_interopRequireWildcard","_customSelect","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CustomSelectItem","children","props","customSelectContext","useContext","CustomSelectContext","_react","createElement","SelectItem","store","value","SelectedItemCheck","Icon","icon","check","_default","exports"],"sources":["@wordpress/components/src/custom-select-control-v2/custom-select-item.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport type { CustomSelectItemProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport * as Styled from './styles';\nimport { CustomSelectContext } from './custom-select';\n\nexport function CustomSelectItem( {\n\tchildren,\n\t...props\n}: WordPressComponentProps< CustomSelectItemProps, 'div', false > ) {\n\tconst customSelectContext = useContext( CustomSelectContext );\n\treturn (\n\t\t<Styled.SelectItem store={ customSelectContext?.store } { ...props }>\n\t\t\t{ children ?? props.value }\n\t\t\t<Styled.SelectedItemCheck>\n\t\t\t\t<Icon icon={ check } />\n\t\t\t</Styled.SelectedItemCheck>\n\t\t</Styled.SelectItem>\n\t);\n}\n\nexport default CustomSelectItem;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAMA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAAsD,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAXtD;AACA;AACA;;AAWO,SAASY,gBAAgBA,CAAE;EACjCC,QAAQ;EACR,GAAGC;AAC4D,CAAC,EAAG;EACnE,MAAMC,mBAAmB,GAAG,IAAAC,mBAAU,EAAEC,iCAAoB,CAAC;EAC7D,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAC/B,MAAM,CAACgC,UAAU;IAACC,KAAK,EAAGN,mBAAmB,EAAEM,KAAO;IAAA,GAAMP;EAAK,GAC/DD,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIC,KAAK,CAACQ,KAAK,EACzB,IAAAJ,MAAA,CAAAC,aAAA,EAAC/B,MAAM,CAACmC,iBAAiB,QACxB,IAAAL,MAAA,CAAAC,aAAA,EAAChC,MAAA,CAAAqC,IAAI;IAACC,IAAI,EAAGC;EAAO,CAAE,CACG,CACR,CAAC;AAEtB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA/B,OAAA,GAEce,gBAAgB"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.CustomSelectContext = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _element = require("@wordpress/element");
|
|
9
|
+
var _i18n = require("@wordpress/i18n");
|
|
10
|
+
var _icons = require("@wordpress/icons");
|
|
11
|
+
var _ = require("..");
|
|
12
|
+
var Styled = _interopRequireWildcard(require("./styles"));
|
|
13
|
+
var _context = require("../context");
|
|
14
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
15
|
+
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 && Object.prototype.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
|
+
/**
|
|
17
|
+
* WordPress dependencies
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Internal dependencies
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
const CustomSelectContext = exports.CustomSelectContext = (0, _element.createContext)(undefined);
|
|
25
|
+
function defaultRenderSelectedValue(value) {
|
|
26
|
+
const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;
|
|
27
|
+
if (isValueEmpty) {
|
|
28
|
+
return (0, _i18n.__)('Select an item');
|
|
29
|
+
}
|
|
30
|
+
if (Array.isArray(value)) {
|
|
31
|
+
return value.length === 1 ? value[0] :
|
|
32
|
+
// translators: %s: number of items selected (it will always be 2 or more items)
|
|
33
|
+
(0, _i18n.sprintf)((0, _i18n.__)('%s items selected'), value.length);
|
|
34
|
+
}
|
|
35
|
+
return value;
|
|
36
|
+
}
|
|
37
|
+
const UnconnectedCustomSelectButton = props => {
|
|
38
|
+
const {
|
|
39
|
+
renderSelectedValue,
|
|
40
|
+
size = 'default',
|
|
41
|
+
store,
|
|
42
|
+
...restProps
|
|
43
|
+
} = (0, _context.useContextSystem)(props, 'CustomSelectControlButton');
|
|
44
|
+
const {
|
|
45
|
+
value: currentValue
|
|
46
|
+
} = store.useState();
|
|
47
|
+
const computedRenderSelectedValue = (0, _element.useMemo)(() => renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue, [renderSelectedValue]);
|
|
48
|
+
return (0, _react.createElement)(Styled.Select, {
|
|
49
|
+
...restProps,
|
|
50
|
+
size: size,
|
|
51
|
+
hasCustomRenderProp: !!renderSelectedValue,
|
|
52
|
+
store: store
|
|
53
|
+
// to match legacy behavior where using arrow keys
|
|
54
|
+
// move selection rather than open the popover
|
|
55
|
+
,
|
|
56
|
+
showOnKeyDown: false
|
|
57
|
+
}, (0, _react.createElement)("div", null, computedRenderSelectedValue(currentValue)), (0, _react.createElement)(_icons.Icon, {
|
|
58
|
+
icon: _icons.chevronDown,
|
|
59
|
+
size: 18
|
|
60
|
+
}));
|
|
61
|
+
};
|
|
62
|
+
const CustomSelectButton = (0, _context.contextConnectWithoutRef)(UnconnectedCustomSelectButton, 'CustomSelectControlButton');
|
|
63
|
+
function _CustomSelect(props) {
|
|
64
|
+
const {
|
|
65
|
+
children,
|
|
66
|
+
hideLabelFromVision = false,
|
|
67
|
+
label,
|
|
68
|
+
store,
|
|
69
|
+
...restProps
|
|
70
|
+
} = props;
|
|
71
|
+
return (0, _react.createElement)(_react.Fragment, null, hideLabelFromVision ?
|
|
72
|
+
// TODO: Replace with BaseControl
|
|
73
|
+
(0, _react.createElement)(_.VisuallyHidden, {
|
|
74
|
+
as: "label"
|
|
75
|
+
}, label) : (0, _react.createElement)(Styled.SelectLabel, {
|
|
76
|
+
store: store
|
|
77
|
+
}, label), (0, _react.createElement)(CustomSelectButton, {
|
|
78
|
+
...restProps,
|
|
79
|
+
store: store
|
|
80
|
+
}), (0, _react.createElement)(Styled.SelectPopover, {
|
|
81
|
+
gutter: 12,
|
|
82
|
+
store: store,
|
|
83
|
+
sameWidth: true
|
|
84
|
+
}, (0, _react.createElement)(CustomSelectContext.Provider, {
|
|
85
|
+
value: {
|
|
86
|
+
store
|
|
87
|
+
}
|
|
88
|
+
}, children)));
|
|
89
|
+
}
|
|
90
|
+
var _default = exports.default = _CustomSelect;
|
|
91
|
+
//# sourceMappingURL=custom-select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_element","require","_i18n","_icons","_","Styled","_interopRequireWildcard","_context","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CustomSelectContext","exports","createContext","undefined","defaultRenderSelectedValue","value","isValueEmpty","Array","isArray","length","__","sprintf","UnconnectedCustomSelectButton","props","renderSelectedValue","size","store","restProps","useContextSystem","currentValue","useState","computedRenderSelectedValue","useMemo","_react","createElement","Select","hasCustomRenderProp","showOnKeyDown","Icon","icon","chevronDown","CustomSelectButton","contextConnectWithoutRef","_CustomSelect","children","hideLabelFromVision","label","Fragment","VisuallyHidden","as","SelectLabel","SelectPopover","gutter","sameWidth","Provider","_default"],"sources":["@wordpress/components/src/custom-select-control-v2/custom-select.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Icon, chevronDown } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '..';\nimport * as Styled from './styles';\nimport type {\n\tCustomSelectContext as CustomSelectContextType,\n\tCustomSelectStore,\n\tCustomSelectButtonProps,\n\t_CustomSelectProps,\n} from './types';\nimport {\n\tcontextConnectWithoutRef,\n\tuseContextSystem,\n\ttype WordPressComponentProps,\n} from '../context';\n\nexport const CustomSelectContext =\n\tcreateContext< CustomSelectContextType >( undefined );\n\nfunction defaultRenderSelectedValue(\n\tvalue: CustomSelectButtonProps[ 'value' ]\n) {\n\tconst isValueEmpty = Array.isArray( value )\n\t\t? value.length === 0\n\t\t: value === undefined || value === null;\n\n\tif ( isValueEmpty ) {\n\t\treturn __( 'Select an item' );\n\t}\n\n\tif ( Array.isArray( value ) ) {\n\t\treturn value.length === 1\n\t\t\t? value[ 0 ]\n\t\t\t: // translators: %s: number of items selected (it will always be 2 or more items)\n\t\t\t sprintf( __( '%s items selected' ), value.length );\n\t}\n\n\treturn value;\n}\n\nconst UnconnectedCustomSelectButton = (\n\tprops: Omit<\n\t\tWordPressComponentProps<\n\t\t\tCustomSelectButtonProps & CustomSelectStore,\n\t\t\t'button',\n\t\t\tfalse\n\t\t>,\n\t\t'onChange'\n\t>\n) => {\n\tconst {\n\t\trenderSelectedValue,\n\t\tsize = 'default',\n\t\tstore,\n\t\t...restProps\n\t} = useContextSystem( props, 'CustomSelectControlButton' );\n\n\tconst { value: currentValue } = store.useState();\n\n\tconst computedRenderSelectedValue = useMemo(\n\t\t() => renderSelectedValue ?? defaultRenderSelectedValue,\n\t\t[ renderSelectedValue ]\n\t);\n\n\treturn (\n\t\t<Styled.Select\n\t\t\t{ ...restProps }\n\t\t\tsize={ size }\n\t\t\thasCustomRenderProp={ !! renderSelectedValue }\n\t\t\tstore={ store }\n\t\t\t// to match legacy behavior where using arrow keys\n\t\t\t// move selection rather than open the popover\n\t\t\tshowOnKeyDown={ false }\n\t\t>\n\t\t\t<div>{ computedRenderSelectedValue( currentValue ) }</div>\n\t\t\t<Icon icon={ chevronDown } size={ 18 } />\n\t\t</Styled.Select>\n\t);\n};\n\nconst CustomSelectButton = contextConnectWithoutRef(\n\tUnconnectedCustomSelectButton,\n\t'CustomSelectControlButton'\n);\n\nfunction _CustomSelect( props: _CustomSelectProps & CustomSelectStore ) {\n\tconst {\n\t\tchildren,\n\t\thideLabelFromVision = false,\n\t\tlabel,\n\t\tstore,\n\t\t...restProps\n\t} = props;\n\n\treturn (\n\t\t<>\n\t\t\t{ hideLabelFromVision ? ( // TODO: Replace with BaseControl\n\t\t\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t\t\t) : (\n\t\t\t\t<Styled.SelectLabel store={ store }>\n\t\t\t\t\t{ label }\n\t\t\t\t</Styled.SelectLabel>\n\t\t\t) }\n\t\t\t<CustomSelectButton { ...restProps } store={ store } />\n\t\t\t<Styled.SelectPopover gutter={ 12 } store={ store } sameWidth>\n\t\t\t\t<CustomSelectContext.Provider value={ { store } }>\n\t\t\t\t\t{ children }\n\t\t\t\t</CustomSelectContext.Provider>\n\t\t\t</Styled.SelectPopover>\n\t\t</>\n\t);\n}\n\nexport default _CustomSelect;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
|
|
10
|
+
var _customSelect = _interopRequireDefault(require("../custom-select"));
|
|
11
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
|
+
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 && Object.prototype.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; }
|
|
13
|
+
/**
|
|
14
|
+
* External dependencies
|
|
15
|
+
*/
|
|
16
|
+
// eslint-disable-next-line no-restricted-imports
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Internal dependencies
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
function CustomSelect(props) {
|
|
23
|
+
const {
|
|
24
|
+
defaultValue,
|
|
25
|
+
onChange,
|
|
26
|
+
value,
|
|
27
|
+
...restProps
|
|
28
|
+
} = props;
|
|
29
|
+
// Forward props + store from v2 implementation
|
|
30
|
+
const store = Ariakit.useSelectStore({
|
|
31
|
+
setValue: nextValue => onChange?.(nextValue),
|
|
32
|
+
defaultValue,
|
|
33
|
+
value
|
|
34
|
+
});
|
|
35
|
+
return (0, _react.createElement)(_customSelect.default, {
|
|
36
|
+
...restProps,
|
|
37
|
+
store: store
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
var _default = exports.default = CustomSelect;
|
|
41
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_customSelect","_interopRequireDefault","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CustomSelect","props","defaultValue","onChange","value","restProps","store","useSelectStore","setValue","nextValue","_react","createElement","_default","exports"],"sources":["@wordpress/components/src/custom-select-control-v2/default-component/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n/**\n * Internal dependencies\n */\nimport _CustomSelect from '../custom-select';\nimport type { CustomSelectProps } from '../types';\n\nfunction CustomSelect( props: CustomSelectProps ) {\n\tconst { defaultValue, onChange, value, ...restProps } = props;\n\t// Forward props + store from v2 implementation\n\tconst store = Ariakit.useSelectStore( {\n\t\tsetValue: ( nextValue ) => onChange?.( nextValue ),\n\t\tdefaultValue,\n\t\tvalue,\n\t} );\n\n\treturn <_CustomSelect { ...restProps } store={ store } />;\n}\n\nexport default CustomSelect;\n"],"mappings":";;;;;;;;AAIA,IAAAA,OAAA,GAAAC,uBAAA,CAAAC,OAAA;AAIA,IAAAC,aAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA6C,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAR7C;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAIA,SAASY,YAAYA,CAAEC,KAAwB,EAAG;EACjD,MAAM;IAAEC,YAAY;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAC7D;EACA,MAAMK,KAAK,GAAGhC,OAAO,CAACiC,cAAc,CAAE;IACrCC,QAAQ,EAAIC,SAAS,IAAMN,QAAQ,GAAIM,SAAU,CAAC;IAClDP,YAAY;IACZE;EACD,CAAE,CAAC;EAEH,OAAO,IAAAM,MAAA,CAAAC,aAAA,EAAClC,aAAA,CAAAQ,OAAa;IAAA,GAAMoB,SAAS;IAAGC,KAAK,EAAGA;EAAO,CAAE,CAAC;AAC1D;AAAC,IAAAM,QAAA,GAAAC,OAAA,CAAA5B,OAAA,GAEce,YAAY"}
|
|
@@ -1,90 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
|
-
exports
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
|
|
11
|
-
var _element = require("@wordpress/element");
|
|
12
|
-
var _i18n = require("@wordpress/i18n");
|
|
13
|
-
var Styled = _interopRequireWildcard(require("./styles"));
|
|
14
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
15
|
-
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 && Object.prototype.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
|
-
/**
|
|
17
|
-
* External dependencies
|
|
18
|
-
*/
|
|
19
|
-
// eslint-disable-next-line no-restricted-imports
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* WordPress dependencies
|
|
23
|
-
*/
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* Internal dependencies
|
|
27
|
-
*/
|
|
28
|
-
|
|
29
|
-
const CustomSelectContext = exports.CustomSelectContext = (0, _element.createContext)(undefined);
|
|
30
|
-
function defaultRenderSelectedValue(value) {
|
|
31
|
-
const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;
|
|
32
|
-
if (isValueEmpty) {
|
|
33
|
-
return (0, _i18n.__)('Select an item');
|
|
7
|
+
Object.defineProperty(exports, "CustomSelect", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return _legacyAdapter.default;
|
|
34
11
|
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
12
|
+
});
|
|
13
|
+
Object.defineProperty(exports, "CustomSelectItem", {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function () {
|
|
16
|
+
return _customSelectItem.default;
|
|
39
17
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
children,
|
|
44
|
-
defaultValue,
|
|
45
|
-
label,
|
|
46
|
-
onChange,
|
|
47
|
-
size = 'default',
|
|
48
|
-
value,
|
|
49
|
-
renderSelectedValue,
|
|
50
|
-
...props
|
|
51
|
-
}) {
|
|
52
|
-
const store = Ariakit.useSelectStore({
|
|
53
|
-
setValue: nextValue => onChange?.(nextValue),
|
|
54
|
-
defaultValue,
|
|
55
|
-
value,
|
|
56
|
-
// fix for Safari bug: https://github.com/WordPress/gutenberg/issues/55023#issuecomment-1834035917
|
|
57
|
-
virtualFocus: false
|
|
58
|
-
});
|
|
59
|
-
const {
|
|
60
|
-
value: currentValue
|
|
61
|
-
} = store.useState();
|
|
62
|
-
const computedRenderSelectedValue = renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue;
|
|
63
|
-
return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(Styled.CustomSelectLabel, {
|
|
64
|
-
store: store
|
|
65
|
-
}, label), (0, _react.createElement)(Styled.CustomSelectButton, {
|
|
66
|
-
...props,
|
|
67
|
-
size: size,
|
|
68
|
-
hasCustomRenderProp: !!renderSelectedValue,
|
|
69
|
-
store: store
|
|
70
|
-
}, computedRenderSelectedValue(currentValue), (0, _react.createElement)(Ariakit.SelectArrow, null)), (0, _react.createElement)(Styled.CustomSelectPopover, {
|
|
71
|
-
gutter: 12,
|
|
72
|
-
store: store,
|
|
73
|
-
sameWidth: true
|
|
74
|
-
}, (0, _react.createElement)(CustomSelectContext.Provider, {
|
|
75
|
-
value: {
|
|
76
|
-
store
|
|
77
|
-
}
|
|
78
|
-
}, children)));
|
|
79
|
-
}
|
|
80
|
-
function CustomSelectItem({
|
|
81
|
-
children,
|
|
82
|
-
...props
|
|
83
|
-
}) {
|
|
84
|
-
const customSelectContext = (0, _element.useContext)(CustomSelectContext);
|
|
85
|
-
return (0, _react.createElement)(Styled.CustomSelectItem, {
|
|
86
|
-
store: customSelectContext?.store,
|
|
87
|
-
...props
|
|
88
|
-
}, children !== null && children !== void 0 ? children : props.value, (0, _react.createElement)(Ariakit.SelectItemCheck, null));
|
|
89
|
-
}
|
|
18
|
+
});
|
|
19
|
+
var _legacyAdapter = _interopRequireDefault(require("./legacy-adapter"));
|
|
20
|
+
var _customSelectItem = _interopRequireDefault(require("./custom-select-item"));
|
|
90
21
|
//# sourceMappingURL=index.js.map
|