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..a4b58ab 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,