var _excluded = ["event", "props", "refresh", "store"]; function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } import { onInput } from './onInput'; import { getActiveItem } from './utils'; export function onKeyDown(_ref) { var event = _ref.event, props = _ref.props, refresh = _ref.refresh, store = _ref.store, setters = _objectWithoutProperties(_ref, _excluded); if (event.key === 'ArrowUp' || event.key === 'ArrowDown') { // eslint-disable-next-line no-inner-declarations var triggerScrollIntoView = function triggerScrollIntoView() { var nodeItem = props.environment.document.getElementById("".concat(props.id, "-item-").concat(store.getState().activeItemId)); if (nodeItem) { if (nodeItem.scrollIntoViewIfNeeded) { nodeItem.scrollIntoViewIfNeeded(false); } else { nodeItem.scrollIntoView(false); } } }; // eslint-disable-next-line no-inner-declarations var triggerOnActive = function triggerOnActive() { var highlightedItem = getActiveItem(store.getState()); if (store.getState().activeItemId !== null && highlightedItem) { var item = highlightedItem.item, itemInputValue = highlightedItem.itemInputValue, itemUrl = highlightedItem.itemUrl, source = highlightedItem.source; source.onActive(_objectSpread({ event: event, item: item, itemInputValue: itemInputValue, itemUrl: itemUrl, refresh: refresh, source: source, state: store.getState() }, setters)); } }; // Default browser behavior changes the caret placement on ArrowUp and // ArrowDown. event.preventDefault(); // When re-opening the panel, we need to split the logic to keep the actions // synchronized as `onInput` returns a promise. if (store.getState().isOpen === false && (props.openOnFocus || Boolean(store.getState().query))) { onInput(_objectSpread({ event: event, props: props, query: store.getState().query, refresh: refresh, store: store }, setters)).then(function () { store.dispatch(event.key, { nextActiveItemId: props.defaultActiveItemId }); triggerOnActive(); // Since we rely on the DOM, we need to wait for all the micro tasks to // finish (which include re-opening the panel) to make sure all the // elements are available. setTimeout(triggerScrollIntoView, 0); }); } else { store.dispatch(event.key, {}); triggerOnActive(); triggerScrollIntoView(); } } else if (event.key === 'Escape') { // This prevents the default browser behavior on `input[type="search"]` // from removing the query right away because we first want to close the // panel. event.preventDefault(); store.dispatch(event.key, null); // Hitting the `Escape` key signals the end of a user interaction with the // autocomplete. At this point, we should ignore any requests that are still // pending and could reopen the panel once they resolve, because that would // result in an unsolicited UI behavior. store.pendingRequests.cancelAll(); } else if (event.key === 'Enter') { // No active item, so we let the browser handle the native `onSubmit` form // event. if (store.getState().activeItemId === null || store.getState().collections.every(function (collection) { return collection.items.length === 0; })) { return; } // This prevents the `onSubmit` event to be sent because an item is // highlighted. event.preventDefault(); var _ref2 = getActiveItem(store.getState()), item = _ref2.item, itemInputValue = _ref2.itemInputValue, itemUrl = _ref2.itemUrl, source = _ref2.source; if (event.metaKey || event.ctrlKey) { if (itemUrl !== undefined) { source.onSelect(_objectSpread({ event: event, item: item, itemInputValue: itemInputValue, itemUrl: itemUrl, refresh: refresh, source: source, state: store.getState() }, setters)); props.navigator.navigateNewTab({ itemUrl: itemUrl, item: item, state: store.getState() }); } } else if (event.shiftKey) { if (itemUrl !== undefined) { source.onSelect(_objectSpread({ event: event, item: item, itemInputValue: itemInputValue, itemUrl: itemUrl, refresh: refresh, source: source, state: store.getState() }, setters)); props.navigator.navigateNewWindow({ itemUrl: itemUrl, item: item, state: store.getState() }); } } else if (event.altKey) {// Keep native browser behavior } else { if (itemUrl !== undefined) { source.onSelect(_objectSpread({ event: event, item: item, itemInputValue: itemInputValue, itemUrl: itemUrl, refresh: refresh, source: source, state: store.getState() }, setters)); props.navigator.navigate({ itemUrl: itemUrl, item: item, state: store.getState() }); return; } onInput(_objectSpread({ event: event, nextState: { isOpen: false }, props: props, query: itemInputValue, refresh: refresh, store: store }, setters)).then(function () { source.onSelect(_objectSpread({ event: event, item: item, itemInputValue: itemInputValue, itemUrl: itemUrl, refresh: refresh, source: source, state: store.getState() }, setters)); }); } } }