280 lines
10 KiB
Diff
280 lines
10 KiB
Diff
diff --git a/node_modules/wordpress-components/build-module/combobox-control/index.js b/node_modules/wordpress-components/build-module/combobox-control/index.js
|
|
index 51c59c1..93cbddc 100644
|
|
--- a/node_modules/wordpress-components/build-module/combobox-control/index.js
|
|
+++ b/node_modules/wordpress-components/build-module/combobox-control/index.js
|
|
@@ -1,19 +1,10 @@
|
|
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
-import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
-import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
|
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
|
import { createElement } from "@wordpress/element";
|
|
|
|
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
-
|
|
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
|
|
-
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
import classnames from 'classnames';
|
|
+import { noop, deburr } from 'lodash';
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
@@ -34,77 +25,47 @@ import BaseControl from '../base-control';
|
|
import Button from '../button';
|
|
import { Flex, FlexBlock, FlexItem } from '../flex';
|
|
import withFocusOutside from '../higher-order/with-focus-outside';
|
|
-var DetectOutside = withFocusOutside( /*#__PURE__*/function (_Component) {
|
|
- _inherits(_class, _Component);
|
|
-
|
|
- var _super = _createSuper(_class);
|
|
-
|
|
- function _class() {
|
|
- _classCallCheck(this, _class);
|
|
-
|
|
- return _super.apply(this, arguments);
|
|
+const DetectOutside = withFocusOutside(class extends Component {
|
|
+ handleFocusOutside(event) {
|
|
+ this.props.onFocusOutside(event);
|
|
}
|
|
|
|
- _createClass(_class, [{
|
|
- key: "handleFocusOutside",
|
|
- value: function handleFocusOutside(event) {
|
|
- this.props.onFocusOutside(event);
|
|
- }
|
|
- }, {
|
|
- key: "render",
|
|
- value: function render() {
|
|
- return this.props.children;
|
|
- }
|
|
- }]);
|
|
-
|
|
- return _class;
|
|
-}(Component));
|
|
+ render() {
|
|
+ return this.props.children;
|
|
+ }
|
|
|
|
-function ComboboxControl(_ref) {
|
|
+});
|
|
+
|
|
+function ComboboxControl({
|
|
+ value,
|
|
+ label,
|
|
+ options,
|
|
+ onChange,
|
|
+ onFilterValueChange = noop,
|
|
+ hideLabelFromVision,
|
|
+ help,
|
|
+ allowReset = true,
|
|
+ className,
|
|
+ messages = {
|
|
+ selected: __('Item selected.')
|
|
+ }
|
|
+}) {
|
|
var _currentOption$label;
|
|
|
|
- var value = _ref.value,
|
|
- label = _ref.label,
|
|
- options = _ref.options,
|
|
- onChange = _ref.onChange,
|
|
- onFilterValueChange = _ref.onFilterValueChange,
|
|
- hideLabelFromVision = _ref.hideLabelFromVision,
|
|
- help = _ref.help,
|
|
- _ref$allowReset = _ref.allowReset,
|
|
- allowReset = _ref$allowReset === void 0 ? true : _ref$allowReset,
|
|
- className = _ref.className,
|
|
- _ref$messages = _ref.messages,
|
|
- messages = _ref$messages === void 0 ? {
|
|
- selected: __('Item selected.')
|
|
- } : _ref$messages;
|
|
- var instanceId = useInstanceId(ComboboxControl);
|
|
-
|
|
- var _useState = useState(null),
|
|
- _useState2 = _slicedToArray(_useState, 2),
|
|
- selectedSuggestion = _useState2[0],
|
|
- setSelectedSuggestion = _useState2[1];
|
|
-
|
|
- var _useState3 = useState(false),
|
|
- _useState4 = _slicedToArray(_useState3, 2),
|
|
- isExpanded = _useState4[0],
|
|
- setIsExpanded = _useState4[1];
|
|
-
|
|
- var _useState5 = useState(''),
|
|
- _useState6 = _slicedToArray(_useState5, 2),
|
|
- inputValue = _useState6[0],
|
|
- setInputValue = _useState6[1];
|
|
-
|
|
- var inputContainer = useRef();
|
|
- var currentOption = options.find(function (option) {
|
|
- return option.value === value;
|
|
- });
|
|
- var currentLabel = (_currentOption$label = currentOption === null || currentOption === void 0 ? void 0 : currentOption.label) !== null && _currentOption$label !== void 0 ? _currentOption$label : '';
|
|
- var matchingSuggestions = useMemo(function () {
|
|
- var startsWithMatch = [];
|
|
- var containsMatch = [];
|
|
- var match = inputValue.toLocaleLowerCase();
|
|
- options.forEach(function (option) {
|
|
- var index = option.label.toLocaleLowerCase().indexOf(match);
|
|
+ const currentOption = options.find(option => option.value === value);
|
|
+ const currentLabel = (_currentOption$label = currentOption === null || currentOption === void 0 ? void 0 : currentOption.label) !== null && _currentOption$label !== void 0 ? _currentOption$label : '';
|
|
+ const instanceId = useInstanceId(ComboboxControl);
|
|
+ const [selectedSuggestion, setSelectedSuggestion] = useState(currentOption || null);
|
|
+ const [isExpanded, setIsExpanded] = useState(false);
|
|
+ const [inputHasFocus, setInputHasFocus] = useState(false);
|
|
+ const [inputValue, setInputValue] = useState('');
|
|
+ const inputContainer = useRef();
|
|
+ const matchingSuggestions = useMemo(() => {
|
|
+ const startsWithMatch = [];
|
|
+ const containsMatch = [];
|
|
+ const match = deburr(inputValue.toLocaleLowerCase());
|
|
+ options.forEach(option => {
|
|
+ const index = deburr(option.label).toLocaleLowerCase().indexOf(match);
|
|
|
|
if (index === 0) {
|
|
startsWithMatch.push(option);
|
|
@@ -115,7 +76,7 @@ function ComboboxControl(_ref) {
|
|
return startsWithMatch.concat(containsMatch);
|
|
}, [inputValue, options, value]);
|
|
|
|
- var onSuggestionSelected = function onSuggestionSelected(newSelectedSuggestion) {
|
|
+ const onSuggestionSelected = newSelectedSuggestion => {
|
|
onChange(newSelectedSuggestion.value);
|
|
speak(messages.selected, 'assertive');
|
|
setSelectedSuggestion(newSelectedSuggestion);
|
|
@@ -123,10 +84,9 @@ function ComboboxControl(_ref) {
|
|
setIsExpanded(false);
|
|
};
|
|
|
|
- var handleArrowNavigation = function handleArrowNavigation() {
|
|
- var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
|
|
- var index = matchingSuggestions.indexOf(selectedSuggestion);
|
|
- var nextIndex = index + offset;
|
|
+ const handleArrowNavigation = (offset = 1) => {
|
|
+ const index = matchingSuggestions.indexOf(selectedSuggestion);
|
|
+ let nextIndex = index + offset;
|
|
|
|
if (nextIndex < 0) {
|
|
nextIndex = matchingSuggestions.length - 1;
|
|
@@ -138,8 +98,12 @@ function ComboboxControl(_ref) {
|
|
setIsExpanded(true);
|
|
};
|
|
|
|
- var onKeyDown = function onKeyDown(event) {
|
|
- var preventDefault = false;
|
|
+ const onKeyDown = event => {
|
|
+ let preventDefault = false;
|
|
+
|
|
+ if (event.defaultPrevented) {
|
|
+ return;
|
|
+ }
|
|
|
|
switch (event.keyCode) {
|
|
case ENTER:
|
|
@@ -164,7 +128,6 @@ function ComboboxControl(_ref) {
|
|
setIsExpanded(false);
|
|
setSelectedSuggestion(null);
|
|
preventDefault = true;
|
|
- event.stopPropagation();
|
|
break;
|
|
|
|
default:
|
|
@@ -176,34 +139,52 @@ function ComboboxControl(_ref) {
|
|
}
|
|
};
|
|
|
|
- var onFocus = function onFocus() {
|
|
+ const onBlur = () => {
|
|
+ setInputHasFocus(false);
|
|
+ };
|
|
+
|
|
+ const onFocus = () => {
|
|
+ setInputHasFocus(true);
|
|
setIsExpanded(true);
|
|
onFilterValueChange('');
|
|
setInputValue('');
|
|
};
|
|
|
|
- var onFocusOutside = function onFocusOutside() {
|
|
+ const onFocusOutside = () => {
|
|
setIsExpanded(false);
|
|
};
|
|
|
|
- var onInputChange = function onInputChange(event) {
|
|
- var text = event.value;
|
|
+ const onInputChange = event => {
|
|
+ const text = event.value;
|
|
setInputValue(text);
|
|
onFilterValueChange(text);
|
|
- setIsExpanded(true);
|
|
+
|
|
+ if (inputHasFocus) {
|
|
+ setIsExpanded(true);
|
|
+ }
|
|
};
|
|
|
|
- var handleOnReset = function handleOnReset() {
|
|
+ const handleOnReset = () => {
|
|
onChange(null);
|
|
inputContainer.current.input.focus();
|
|
- }; // Announcements
|
|
+ }; // Update current selections when the filter input changes.
|
|
+
|
|
|
|
+ useEffect(() => {
|
|
+ const hasMatchingSuggestions = matchingSuggestions.length > 0;
|
|
+ const hasSelectedMatchingSuggestions = matchingSuggestions.indexOf(selectedSuggestion) > 0;
|
|
|
|
- useEffect(function () {
|
|
- var hasMatchingSuggestions = matchingSuggestions.length > 0;
|
|
+ if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) {
|
|
+ // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.
|
|
+ setSelectedSuggestion(matchingSuggestions[0]);
|
|
+ }
|
|
+ }, [matchingSuggestions, selectedSuggestion]); // Announcements
|
|
+
|
|
+ useEffect(() => {
|
|
+ const hasMatchingSuggestions = matchingSuggestions.length > 0;
|
|
|
|
if (isExpanded) {
|
|
- var message = hasMatchingSuggestions ? sprintf(
|
|
+ const message = hasMatchingSuggestions ? sprintf(
|
|
/* translators: %d: number of results. */
|
|
_n('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : __('No results.');
|
|
speak(message, 'polite');
|
|
@@ -220,7 +201,7 @@ function ComboboxControl(_ref) {
|
|
className: classnames(className, 'components-combobox-control'),
|
|
tabIndex: "-1",
|
|
label: label,
|
|
- id: "components-form-token-input-".concat(instanceId),
|
|
+ id: `components-form-token-input-${instanceId}`,
|
|
hideLabelFromVision: hideLabelFromVision,
|
|
help: help
|
|
}, createElement("div", {
|
|
@@ -232,8 +213,9 @@ function ComboboxControl(_ref) {
|
|
instanceId: instanceId,
|
|
ref: inputContainer,
|
|
value: isExpanded ? inputValue : currentLabel,
|
|
- "aria-label": currentLabel ? "".concat(currentLabel, ", ").concat(label) : null,
|
|
+ "aria-label": currentLabel ? `${currentLabel}, ${label}` : null,
|
|
onFocus: onFocus,
|
|
+ onBlur: onBlur,
|
|
isExpanded: isExpanded,
|
|
selectedSuggestionIndex: matchingSuggestions.indexOf(selectedSuggestion),
|
|
onChange: onInputChange
|
|
@@ -248,9 +230,7 @@ function ComboboxControl(_ref) {
|
|
match: {
|
|
label: inputValue
|
|
},
|
|
- displayTransform: function displayTransform(suggestion) {
|
|
- return suggestion.label;
|
|
- },
|
|
+ displayTransform: suggestion => suggestion.label,
|
|
suggestions: matchingSuggestions,
|
|
selectedIndex: matchingSuggestions.indexOf(selectedSuggestion),
|
|
onHover: setSelectedSuggestion,
|