Socket
Socket
Sign inDemoInstall

@reach/combobox

Package Overview
Dependencies
Maintainers
3
Versions
63
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@reach/combobox - npm Package Compare versions

Comparing version 0.7.3 to 0.7.4

466

dist/combobox.cjs.development.js
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var tslib = require('tslib');
var React = require('react');

@@ -16,22 +17,36 @@ var React__default = _interopDefault(React);

/**
* Welcome to @reach/combobox!
*
* Accessible combobox (autocomplete or autosuggest) component for React.
*
* A combobox is the combination of an `<input type="text"/>` and a list. The
* list is designed to help the user arrive at a value, but the value does not
* necessarily have to come from that list. Don't think of it like a
* `<select/>`, but more of an `<input type="text"/>` with some suggestions. You
* can, however, validate that the value comes from the list, that's up to your
* app.
*
* ???: navigate w/ arrows, then hit backspace: should it delete the
* autocompleted text or the old value the user had typed?!
*
* @see Docs https://reacttraining.com/reach-ui/combobox
* @see Source https://github.com/reach/reach-ui/tree/master/packages/combobox
* @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
*/
var _a, _b, _c, _d, _e;
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
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;
}
var _on, _on2, _on3, _on4, _states;
// States

@@ -71,15 +86,15 @@ // Nothing going on, waiting for the user to type or use the arrow keys

initial: IDLE,
states: (_a = {}, _a[IDLE] = {
on: (_b = {}, _b[BLUR] = IDLE, _b[CLEAR] = IDLE, _b[CHANGE] = SUGGESTING, _b[FOCUS] = SUGGESTING, _b[NAVIGATE] = NAVIGATING, _b[OPEN_WITH_BUTTON] = SUGGESTING, _b)
}, _a[SUGGESTING] = {
on: (_c = {}, _c[CHANGE] = SUGGESTING, _c[FOCUS] = SUGGESTING, _c[NAVIGATE] = NAVIGATING, _c[CLEAR] = IDLE, _c[ESCAPE] = IDLE, _c[BLUR] = IDLE, _c[SELECT_WITH_CLICK] = IDLE, _c[INTERACT] = INTERACTING, _c[CLOSE_WITH_BUTTON] = IDLE, _c)
}, _a[NAVIGATING] = {
on: (_d = {}, _d[CHANGE] = SUGGESTING, _d[FOCUS] = SUGGESTING, _d[CLEAR] = IDLE, _d[BLUR] = IDLE, _d[ESCAPE] = IDLE, _d[NAVIGATE] = NAVIGATING, _d[SELECT_WITH_KEYBOARD] = IDLE, _d[CLOSE_WITH_BUTTON] = IDLE, _d[INTERACT] = INTERACTING, _d)
}, _a[INTERACTING] = {
on: (_e = {}, _e[CHANGE] = SUGGESTING, _e[FOCUS] = SUGGESTING, _e[BLUR] = IDLE, _e[ESCAPE] = IDLE, _e[NAVIGATE] = NAVIGATING, _e[CLOSE_WITH_BUTTON] = IDLE, _e[SELECT_WITH_CLICK] = IDLE, _e)
}, _a)
states: (_states = {}, _states[IDLE] = {
on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on)
}, _states[SUGGESTING] = {
on: (_on2 = {}, _on2[CHANGE] = SUGGESTING, _on2[FOCUS] = SUGGESTING, _on2[NAVIGATE] = NAVIGATING, _on2[CLEAR] = IDLE, _on2[ESCAPE] = IDLE, _on2[BLUR] = IDLE, _on2[SELECT_WITH_CLICK] = IDLE, _on2[INTERACT] = INTERACTING, _on2[CLOSE_WITH_BUTTON] = IDLE, _on2)
}, _states[NAVIGATING] = {
on: (_on3 = {}, _on3[CHANGE] = SUGGESTING, _on3[FOCUS] = SUGGESTING, _on3[CLEAR] = IDLE, _on3[BLUR] = IDLE, _on3[ESCAPE] = IDLE, _on3[NAVIGATE] = NAVIGATING, _on3[SELECT_WITH_KEYBOARD] = IDLE, _on3[CLOSE_WITH_BUTTON] = IDLE, _on3[INTERACT] = INTERACTING, _on3)
}, _states[INTERACTING] = {
on: (_on4 = {}, _on4[CHANGE] = SUGGESTING, _on4[FOCUS] = SUGGESTING, _on4[BLUR] = IDLE, _on4[ESCAPE] = IDLE, _on4[NAVIGATE] = NAVIGATING, _on4[CLOSE_WITH_BUTTON] = IDLE, _on4[SELECT_WITH_CLICK] = IDLE, _on4)
}, _states)
};
var reducer = function reducer(data, event) {
var nextState = tslib.__assign(tslib.__assign({}, data), {
var nextState = _extends({}, data, {
lastEventType: event.type

@@ -90,3 +105,3 @@ });

case CHANGE:
return tslib.__assign(tslib.__assign({}, nextState), {
return _extends({}, nextState, {
navigationValue: null,

@@ -98,3 +113,3 @@ value: event.value

case OPEN_WITH_BUTTON:
return tslib.__assign(tslib.__assign({}, nextState), {
return _extends({}, nextState, {
navigationValue: findNavigationValue(nextState, event)

@@ -104,3 +119,3 @@ });

case CLEAR:
return tslib.__assign(tslib.__assign({}, nextState), {
return _extends({}, nextState, {
value: "",

@@ -112,3 +127,3 @@ navigationValue: null

case ESCAPE:
return tslib.__assign(tslib.__assign({}, nextState), {
return _extends({}, nextState, {
navigationValue: null

@@ -118,3 +133,3 @@ });

case SELECT_WITH_CLICK:
return tslib.__assign(tslib.__assign({}, nextState), {
return _extends({}, nextState, {
value: event.value,

@@ -125,3 +140,3 @@ navigationValue: null

case SELECT_WITH_KEYBOARD:
return tslib.__assign(tslib.__assign({}, nextState), {
return _extends({}, nextState, {
value: data.navigationValue,

@@ -132,3 +147,3 @@ navigationValue: null

case CLOSE_WITH_BUTTON:
return tslib.__assign(tslib.__assign({}, nextState), {
return _extends({}, nextState, {
navigationValue: null

@@ -141,3 +156,3 @@ });

case FOCUS:
return tslib.__assign(tslib.__assign({}, nextState), {
return _extends({}, nextState, {
navigationValue: findNavigationValue(nextState, event)

@@ -174,2 +189,5 @@ });

var ComboboxDescendantContext =
/*#__PURE__*/
utils.createDescendantContext("ComboboxDescendantContext");
var ComboboxContext =

@@ -186,3 +204,3 @@ /*#__PURE__*/

/*#__PURE__*/
utils.createNamedContext("OptionContext", null); ////////////////////////////////////////////////////////////////////////////////
utils.createNamedContext("OptionContext", {}); ////////////////////////////////////////////////////////////////////////////////

@@ -197,21 +215,15 @@ /**

/*#__PURE__*/
utils.forwardRefWithAs(function Combobox(_a, forwardedRef) {
var onSelect = _a.onSelect,
_b = _a.openOnFocus,
openOnFocus = _b === void 0 ? false : _b,
children = _a.children,
_c = _a.as,
Comp = _c === void 0 ? "div" : _c,
rest = tslib.__rest(_a, ["onSelect", "openOnFocus", "children", "as"]);
/*
* We store the values of all the ComboboxOptions on this ref. This makes it
* possible to perform the keyboard navigation from the input on the list.
* We manipulate this array through context so that we don't have to enforce
* a parent/child relationship between ComboboxList and ComboboxOption with
* cloneElement or fall back to DOM traversal. It's a new trick for me and
* I'm pretty excited about it.
*/
utils.forwardRefWithAs(function Combobox(_ref, forwardedRef) {
var onSelect = _ref.onSelect,
_ref$openOnFocus = _ref.openOnFocus,
openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
children = _ref.children,
_ref$as = _ref.as,
Comp = _ref$as === void 0 ? "div" : _ref$as,
rest = _objectWithoutPropertiesLoose(_ref, ["onSelect", "openOnFocus", "children", "as"]);
var _useDescendants = utils.useDescendants(),
options = _useDescendants[0],
setOptions = _useDescendants[1]; // Need this to focus it
var optionsRef = React.useRef(null); // Need this to focus it

@@ -242,6 +254,6 @@ var inputRef = React.useRef();

var _d = useReducerMachine(stateChart, reducer, defaultData),
state = _d[0],
data = _d[1],
transition = _d[2];
var _useReducerMachine = useReducerMachine(stateChart, reducer, defaultData),
state = _useReducerMachine[0],
data = _useReducerMachine[1],
transition = _useReducerMachine[2];

@@ -260,3 +272,2 @@ useFocusManagement(data.lastEventType, inputRef);

openOnFocus: openOnFocus,
optionsRef: optionsRef,
persistSelectionRef: persistSelectionRef,

@@ -270,5 +281,9 @@ popoverRef: popoverRef,

}, []);
return React__default.createElement(ComboboxContext.Provider, {
return React__default.createElement(utils.DescendantProvider, {
context: ComboboxDescendantContext,
items: options,
set: setOptions
}, React__default.createElement(ComboboxContext.Provider, {
value: context
}, React__default.createElement(Comp, tslib.__assign({}, rest, {
}, React__default.createElement(Comp, Object.assign({}, rest, {
"data-reach-combobox": "",

@@ -280,3 +295,3 @@ ref: forwardedRef,

"aria-expanded": context.isVisible
}), children));
}), children)));
});

@@ -304,31 +319,34 @@ Combobox.displayName = "Combobox";

/*#__PURE__*/
utils.forwardRefWithAs(function ComboboxInput(_a, forwardedRef) {
var _b = _a.as,
Comp = _b === void 0 ? "input" : _b,
_c = _a.selectOnClick,
selectOnClick = _c === void 0 ? false : _c,
_d = _a.autocomplete,
autocomplete = _d === void 0 ? true : _d,
onClick = _a.onClick,
onChange = _a.onChange,
onKeyDown = _a.onKeyDown,
onBlur = _a.onBlur,
onFocus = _a.onFocus,
controlledValue = _a.value,
props = tslib.__rest(_a, ["as", "selectOnClick", "autocomplete", "onClick", "onChange", "onKeyDown", "onBlur", "onFocus", "value"]);
utils.forwardRefWithAs(function ComboboxInput(_ref2, forwardedRef) {
var _ref2$as = _ref2.as,
Comp = _ref2$as === void 0 ? "input" : _ref2$as,
_ref2$selectOnClick = _ref2.selectOnClick,
selectOnClick = _ref2$selectOnClick === void 0 ? false : _ref2$selectOnClick,
_ref2$autocomplete = _ref2.autocomplete,
autocomplete = _ref2$autocomplete === void 0 ? true : _ref2$autocomplete,
onClick = _ref2.onClick,
onChange = _ref2.onChange,
onKeyDown = _ref2.onKeyDown,
onBlur = _ref2.onBlur,
onFocus = _ref2.onFocus,
controlledValue = _ref2.value,
props = _objectWithoutPropertiesLoose(_ref2, ["as", "selectOnClick", "autocomplete", "onClick", "onChange", "onKeyDown", "onBlur", "onFocus", "value"]);
var _e = React.useContext(ComboboxContext),
_f = _e.data,
navigationValue = _f.navigationValue,
value = _f.value,
lastEventType = _f.lastEventType,
inputRef = _e.inputRef,
state = _e.state,
transition = _e.transition,
listboxId = _e.listboxId,
autocompletePropRef = _e.autocompletePropRef,
openOnFocus = _e.openOnFocus;
var _useContext = React.useContext(ComboboxContext),
_useContext$data = _useContext.data,
navigationValue = _useContext$data.navigationValue,
value = _useContext$data.value,
lastEventType = _useContext$data.lastEventType,
inputRef = _useContext.inputRef,
state = _useContext.state,
transition = _useContext.transition,
listboxId = _useContext.listboxId,
autocompletePropRef = _useContext.autocompletePropRef,
openOnFocus = _useContext.openOnFocus;
var ref = utils.useForkedRef(inputRef, forwardedRef); // Because we close the List on blur, we need to track if the blur is
// caused by clicking inside the list, and if so, don't close the List.
var ref = utils.useForkedRef(inputRef, forwardedRef);
/*
* Because we close the List on blur, we need to track if the blur is
* caused by clicking inside the list, and if so, don't close the List.
*/

@@ -339,6 +357,12 @@ var selectOnClickRef = React.useRef(false);

var isControlled = controlledValue != null;
React.useLayoutEffect(function () {
autocompletePropRef.current = autocomplete; // eslint-disable-next-line react-hooks/exhaustive-deps
}, [autocomplete]);
/*
* Layout effect should be SSR-safe here because we don't actually do
* anything with this ref that involves rendering until after we've
* let the client hydrate in nested components.
*/
utils.useIsomorphicLayoutEffect(function () {
autocompletePropRef.current = autocomplete;
}, [autocomplete, autocompletePropRef]);
var handleValueChange = function handleValueChange(value) {

@@ -352,5 +376,8 @@ if (value.trim() === "") {

}
}; // If they are controlling the value we still need to do our transitions, so
// we have this derived state to emulate onChange of the input as we receive
// new `value`s ...[*]
};
/*
* If they are controlling the value we still need to do our transitions, so
* we have this derived state to emulate onChange of the input as we receive
* new `value`s ...[*]
*/

@@ -360,5 +387,8 @@

handleValueChange(controlledValue);
} // [*]... and when controlled, we don't trigger handleValueChange as the user
// types, instead the developer controls it with the normal input onChange
// prop
}
/*
* [*]... and when controlled, we don't trigger handleValueChange as the user
* types, instead the developer controls it with the normal input onChange
* prop
*/

@@ -377,5 +407,8 @@

selectOnClickRef.current = true;
} // If we select an option with click, useFocusManagement will focus the
// input, in those cases we don't want to cause the menu to open back up,
// so we guard behind these states
}
/*
* If we select an option with click, useFocusManagement will focus the
* input, in those cases we don't want to cause the menu to open back up,
* so we guard behind these states.
*/

@@ -397,3 +430,3 @@

navigationValue || controlledValue || value : controlledValue || value;
return React__default.createElement(Comp, tslib.__assign({}, props, {
return React__default.createElement(Comp, Object.assign({}, props, {
"data-reach-combobox-input": "",

@@ -426,14 +459,14 @@ ref: ref,

/*#__PURE__*/
React.forwardRef(function ComboboxPopover(_a, forwardedRef) {
var children = _a.children,
_b = _a.portal,
portal = _b === void 0 ? true : _b,
onKeyDown = _a.onKeyDown,
onBlur = _a.onBlur,
props = tslib.__rest(_a, ["children", "portal", "onKeyDown", "onBlur"]);
React.forwardRef(function ComboboxPopover(_ref3, forwardedRef) {
var children = _ref3.children,
_ref3$portal = _ref3.portal,
portal = _ref3$portal === void 0 ? true : _ref3$portal,
onKeyDown = _ref3.onKeyDown,
onBlur = _ref3.onBlur,
props = _objectWithoutPropertiesLoose(_ref3, ["children", "portal", "onKeyDown", "onBlur"]);
var _c = React.useContext(ComboboxContext),
popoverRef = _c.popoverRef,
inputRef = _c.inputRef,
isVisible = _c.isVisible;
var _useContext2 = React.useContext(ComboboxContext),
popoverRef = _useContext2.popoverRef,
inputRef = _useContext2.inputRef,
isVisible = _useContext2.isVisible;

@@ -450,8 +483,6 @@ var ref = utils.useForkedRef(popoverRef, forwardedRef);

* Instead of conditionally rendering the popover we use the `hidden` prop
* because we don't want to unmount on close (from escape or onSelect). If
* we unmounted, then we'd lose the optionsRef and the user wouldn't be able
* to use the arrow keys to pop the list back open. However, the developer
* can conditionally render the ComboboxPopover if they do want to cause
* mount/unmount based on the app's own data (like results.length or
* whatever).
* because we don't want to unmount on close (from escape or onSelect).
* However, the developer can conditionally render the ComboboxPopover if
* they do want to cause mount/unmount based on the app's own data (like
* results.length or whatever).
*/

@@ -462,3 +493,3 @@ hidden: !isVisible,

};
return portal ? React__default.createElement(Popover__default, tslib.__assign({}, props, {
return portal ? React__default.createElement(Popover__default, Object.assign({}, props, {
// @ts-ignore

@@ -468,3 +499,3 @@ ref: ref,

targetRef: inputRef
}, sharedProps)) : React__default.createElement("div", tslib.__assign({
}, sharedProps)) : React__default.createElement("div", Object.assign({
ref: ref

@@ -486,16 +517,11 @@ }, props, sharedProps));

/*#__PURE__*/
utils.forwardRefWithAs(function ComboboxList(_a, forwardedRef) {
var // when true, and the list opens again, the option with a matching value will be
// automatically highleted.
_b = _a.persistSelection,
// when true, and the list opens again, the option with a matching value will be
// automatically highleted.
persistSelection = _b === void 0 ? false : _b,
_c = _a.as,
Comp = _c === void 0 ? "ul" : _c,
props = tslib.__rest(_a, ["persistSelection", "as"]);
utils.forwardRefWithAs(function ComboboxList(_ref4, forwardedRef) {
var _ref4$persistSelectio = _ref4.persistSelection,
persistSelection = _ref4$persistSelectio === void 0 ? false : _ref4$persistSelectio,
_ref4$as = _ref4.as,
Comp = _ref4$as === void 0 ? "ul" : _ref4$as,
props = _objectWithoutPropertiesLoose(_ref4, ["persistSelection", "as"]);
var _d = React.useContext(ComboboxContext),
optionsRef = _d.optionsRef,
persistSelectionRef = _d.persistSelectionRef;
var _useContext3 = React.useContext(ComboboxContext),
persistSelectionRef = _useContext3.persistSelectionRef;

@@ -505,17 +531,4 @@ if (persistSelection) {

}
/*
* WEIRD? Reset the options ref every render so that they are always
* accurate and ready for keyboard navigation handlers. Using layout
* effect to schedule this effect before the ComboboxOptions push into
* the array
*/
React.useLayoutEffect(function () {
optionsRef.current = [];
return function () {
optionsRef.current = [];
};
});
return React__default.createElement(Comp, tslib.__assign({}, props, {
return React__default.createElement(Comp, Object.assign({}, props, {
ref: forwardedRef,

@@ -538,16 +551,19 @@ "data-reach-combobox-list": "",

/*#__PURE__*/
React.forwardRef(function ComboboxOption(_a, forwardedRef) {
var children = _a.children,
value = _a.value,
onClick = _a.onClick,
props = tslib.__rest(_a, ["children", "value", "onClick"]);
React.forwardRef(function ComboboxOption(_ref5, forwardedRef) {
var children = _ref5.children,
value = _ref5.value,
onClick = _ref5.onClick,
props = _objectWithoutPropertiesLoose(_ref5, ["children", "value", "onClick"]);
var _b = React.useContext(ComboboxContext),
onSelect = _b.onSelect,
navigationValue = _b.data.navigationValue,
transition = _b.transition,
optionsRef = _b.optionsRef;
var _useContext4 = React.useContext(ComboboxContext),
onSelect = _useContext4.onSelect,
navigationValue = _useContext4.data.navigationValue,
transition = _useContext4.transition;
React.useEffect(function () {
optionsRef.current.push(value);
var ownRef = React.useRef(null);
var ref = utils.useForkedRef(forwardedRef, ownRef);
var index = utils.useDescendant({
context: ComboboxDescendantContext,
element: ownRef.current,
value: value
});

@@ -564,6 +580,9 @@ var isActive = navigationValue === value;

return React__default.createElement(OptionContext.Provider, {
value: value
}, React__default.createElement("li", tslib.__assign({}, props, {
value: {
value: value,
index: index
}
}, React__default.createElement("li", Object.assign({}, props, {
"data-reach-combobox-option": "",
ref: forwardedRef,
ref: ref,
id: String(makeHash(value)),

@@ -605,4 +624,8 @@ role: "option",

function ComboboxOptionText() {
var value = React.useContext(OptionContext);
var contextValue = React.useContext(ComboboxContext).data.value;
var _useContext5 = React.useContext(OptionContext),
value = _useContext5.value;
var _useContext6 = React.useContext(ComboboxContext),
contextValue = _useContext6.data.value;
var results = React.useMemo(function () {

@@ -631,15 +654,15 @@ return highlightWordsCore.findAll({

/*#__PURE__*/
utils.forwardRefWithAs(function ComboboxButton(_a, forwardedRef) {
var _b = _a.as,
Comp = _b === void 0 ? "button" : _b,
onClick = _a.onClick,
onKeyDown = _a.onKeyDown,
props = tslib.__rest(_a, ["as", "onClick", "onKeyDown"]);
utils.forwardRefWithAs(function ComboboxButton(_ref6, forwardedRef) {
var _ref6$as = _ref6.as,
Comp = _ref6$as === void 0 ? "button" : _ref6$as,
onClick = _ref6.onClick,
onKeyDown = _ref6.onKeyDown,
props = _objectWithoutPropertiesLoose(_ref6, ["as", "onClick", "onKeyDown"]);
var _c = React.useContext(ComboboxContext),
transition = _c.transition,
state = _c.state,
buttonRef = _c.buttonRef,
listboxId = _c.listboxId,
isVisible = _c.isVisible;
var _useContext7 = React.useContext(ComboboxContext),
transition = _useContext7.transition,
state = _useContext7.state,
buttonRef = _useContext7.buttonRef,
listboxId = _useContext7.listboxId,
isVisible = _useContext7.isVisible;

@@ -657,3 +680,3 @@ var ref = utils.useForkedRef(buttonRef, forwardedRef);

return React__default.createElement(Comp, tslib.__assign({
return React__default.createElement(Comp, Object.assign({
"data-reach-combobox-button": "",

@@ -683,9 +706,10 @@ "aria-controls": listboxId,

* of awkwardly at the beginning, unclear to me why 🤷‍♂️
*
* Should be safe to use here since we're just focusing an input.
*/
React.useLayoutEffect(function () {
utils.useIsomorphicLayoutEffect(function () {
if (lastEventType === NAVIGATE || lastEventType === ESCAPE || lastEventType === SELECT_WITH_CLICK || lastEventType === OPEN_WITH_BUTTON) {
inputRef.current.focus();
} // eslint-disable-next-line react-hooks/exhaustive-deps
}, [lastEventType]);
}
}, [inputRef, lastEventType]);
}

@@ -699,14 +723,14 @@ /**

function useKeyDown() {
var _a = React.useContext(ComboboxContext),
navigationValue = _a.data.navigationValue,
onSelect = _a.onSelect,
optionsRef = _a.optionsRef,
state = _a.state,
transition = _a.transition,
autocompletePropRef = _a.autocompletePropRef,
persistSelectionRef = _a.persistSelectionRef;
var _useContext8 = React.useContext(ComboboxContext),
navigationValue = _useContext8.data.navigationValue,
onSelect = _useContext8.onSelect,
state = _useContext8.state,
transition = _useContext8.transition,
autocompletePropRef = _useContext8.autocompletePropRef,
persistSelectionRef = _useContext8.persistSelectionRef;
var _useContext9 = React.useContext(ComboboxDescendantContext),
options = _useContext9.descendants;
return function handleKeyDown(event) {
var options = optionsRef.current;
switch (event.key) {

@@ -733,3 +757,6 @@ case "ArrowDown":

} else {
var index = options.indexOf(navigationValue);
var index = options.findIndex(function (_ref7) {
var value = _ref7.value;
return value === navigationValue;
});
var atBottom = index === options.length - 1;

@@ -749,3 +776,3 @@

// cycle through
var firstOption = options[0];
var firstOption = options[0].value;
transition(NAVIGATE, {

@@ -757,3 +784,3 @@ value: firstOption

// Go to the next item in the list
var nextValue = options[(index + 1) % options.length];
var nextValue = options[(index + 1) % options.length].value;
transition(NAVIGATE, {

@@ -786,5 +813,8 @@ value: nextValue

} else {
var index = options.indexOf(navigationValue);
var _index = options.findIndex(function (_ref8) {
var value = _ref8.value;
return value === navigationValue;
});
if (index === 0) {
if (_index === 0) {
if (autocompletePropRef.current) {

@@ -801,3 +831,3 @@ /*

// cycle through
var lastOption = options[options.length - 1];
var lastOption = options[options.length - 1].value;
transition(NAVIGATE, {

@@ -807,5 +837,5 @@ value: lastOption

}
} else if (index === -1) {
} else if (_index === -1) {
// displaying the user's value, so go select the last one
var value = options.length ? options[options.length - 1] : null;
var value = options.length ? options[options.length - 1].value : null;
transition(NAVIGATE, {

@@ -816,5 +846,5 @@ value: value

// normal case, select previous
var nextValue = options[(index - 1 + options.length) % options.length];
var _nextValue = options[(_index - 1 + options.length) % options.length].value;
transition(NAVIGATE, {
value: nextValue
value: _nextValue
});

@@ -852,8 +882,8 @@ }

function useBlur() {
var _a = React.useContext(ComboboxContext),
state = _a.state,
transition = _a.transition,
popoverRef = _a.popoverRef,
inputRef = _a.inputRef,
buttonRef = _a.buttonRef;
var _useContext10 = React.useContext(ComboboxContext),
state = _useContext10.state,
transition = _useContext10.transition,
popoverRef = _useContext10.popoverRef,
inputRef = _useContext10.inputRef,
buttonRef = _useContext10.buttonRef;

@@ -888,9 +918,9 @@ return function handleBlur() {

function useReducerMachine(chart, reducer, initialData) {
var _a = React.useState(chart.initial),
state = _a[0],
setState = _a[1];
var _useState = React.useState(chart.initial),
state = _useState[0],
setState = _useState[1];
var _b = React.useReducer(reducer, initialData),
data = _b[0],
dispatch = _b[1];
var _useReducer = React.useReducer(reducer, initialData),
data = _useReducer[0],
dispatch = _useReducer[1];

@@ -909,3 +939,3 @@ var transition = function transition(event, payload) {

dispatch(tslib.__assign({
dispatch(_extends({
type: event,

@@ -912,0 +942,0 @@ state: state,

2

dist/combobox.cjs.production.min.js

@@ -1,2 +0,2 @@

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var t=require("tslib"),n=require("react"),o=e(n);require("prop-types");var a,r,i,u,s,l=require("@reach/utils"),c=require("highlight-words-core"),E=e(require("escape-regexp")),v=require("@reach/auto-id"),f=require("@reach/popover"),p=e(f),C="IDLE",T={initial:C,states:(a={},a.IDLE={on:(r={},r.BLUR=C,r.CLEAR=C,r.CHANGE="SUGGESTING",r.FOCUS="SUGGESTING",r.NAVIGATE="NAVIGATING",r.OPEN_WITH_BUTTON="SUGGESTING",r)},a.SUGGESTING={on:(i={},i.CHANGE="SUGGESTING",i.FOCUS="SUGGESTING",i.NAVIGATE="NAVIGATING",i.CLEAR=C,i.ESCAPE=C,i.BLUR=C,i.SELECT_WITH_CLICK=C,i.INTERACT="INTERACTING",i.CLOSE_WITH_BUTTON=C,i)},a.NAVIGATING={on:(u={},u.CHANGE="SUGGESTING",u.FOCUS="SUGGESTING",u.CLEAR=C,u.BLUR=C,u.ESCAPE=C,u.NAVIGATE="NAVIGATING",u.SELECT_WITH_KEYBOARD=C,u.CLOSE_WITH_BUTTON=C,u.INTERACT="INTERACTING",u)},a.INTERACTING={on:(s={},s.CHANGE="SUGGESTING",s.FOCUS="SUGGESTING",s.BLUR=C,s.ESCAPE=C,s.NAVIGATE="NAVIGATING",s.CLOSE_WITH_BUTTON=C,s.SELECT_WITH_CLICK=C,s)},a)},_=function(e,n){var o=t.__assign(t.__assign({},e),{lastEventType:n.type});switch(n.type){case"CHANGE":return t.__assign(t.__assign({},o),{navigationValue:null,value:n.value});case"NAVIGATE":case"OPEN_WITH_BUTTON":return t.__assign(t.__assign({},o),{navigationValue:N(o,n)});case"CLEAR":return t.__assign(t.__assign({},o),{value:"",navigationValue:null});case"BLUR":case"ESCAPE":return t.__assign(t.__assign({},o),{navigationValue:null});case"SELECT_WITH_CLICK":return t.__assign(t.__assign({},o),{value:n.value,navigationValue:null});case"SELECT_WITH_KEYBOARD":return t.__assign(t.__assign({},o),{value:e.navigationValue,navigationValue:null});case"CLOSE_WITH_BUTTON":return t.__assign(t.__assign({},o),{navigationValue:null});case"INTERACT":return o;case"FOCUS":return t.__assign(t.__assign({},o),{navigationValue:N(o,n)});default:return o}},d=["SUGGESTING","NAVIGATING","INTERACTING"],I=function(e){return d.includes(e)};function N(e,t){return t.value?t.value:t.persistSelection?e.value:null}var A=l.createNamedContext("ComboboxContext",{}),G=l.createNamedContext("OptionContext",null),g=l.forwardRefWithAs((function(e,a){var r=e.onSelect,i=e.openOnFocus,u=void 0!==i&&i,s=e.children,c=e.as,E=void 0===c?"div":c,f=t.__rest(e,["onSelect","openOnFocus","children","as"]),p=n.useRef(null),C=n.useRef(),d=n.useRef(),N=n.useRef(),G=n.useRef(),g=n.useRef(),b=function(e,o,a){var r=n.useState(e.initial),i=r[0],u=r[1],s=n.useReducer(o,{value:"",navigationValue:null}),l=s[1];return[i,s[0],function(n,o){void 0===o&&(o={});var a=e.states[i],r=a&&a.on[n];if(!r)throw new Error('Unknown event "'+n+'" for state "'+i+'"');l(t.__assign({type:n,state:i,nextState:i},o)),u(r)}]}(T,_),S=b[0],h=b[1],m=b[2];!function(e,t){n.useLayoutEffect((function(){"NAVIGATE"!==e&&"ESCAPE"!==e&&"SELECT_WITH_CLICK"!==e&&"OPEN_WITH_BUTTON"!==e||t.current.focus()}),[e])}(h.lastEventType,C);var x=v.useId(f.id),R=x?l.makeId("listbox",x):"listbox",O={autocompletePropRef:G,buttonRef:N,data:h,inputRef:C,isVisible:I(S),listboxId:R,onSelect:r,openOnFocus:u,optionsRef:p,persistSelectionRef:g,popoverRef:d,state:S,transition:m};return n.useEffect((function(){return l.checkStyles("combobox")}),[]),o.createElement(A.Provider,{value:O},o.createElement(E,t.__assign({},f,{"data-reach-combobox":"",ref:a,role:"combobox","aria-haspopup":"listbox","aria-owns":R,"aria-expanded":O.isVisible}),s))}));g.displayName="Combobox";var b=l.forwardRefWithAs((function(e,a){var r=e.as,i=void 0===r?"input":r,u=e.selectOnClick,s=void 0!==u&&u,c=e.autocomplete,E=void 0===c||c,v=e.onClick,f=e.onChange,p=e.onKeyDown,C=e.onBlur,T=e.onFocus,_=e.value,d=t.__rest(e,["as","selectOnClick","autocomplete","onClick","onChange","onKeyDown","onBlur","onFocus","value"]),I=n.useContext(A),N=I.data,G=N.navigationValue,g=N.value,b=N.lastEventType,S=I.inputRef,h=I.state,m=I.transition,x=I.listboxId,R=I.autocompletePropRef,w=I.openOnFocus,U=l.useForkedRef(S,a),y=n.useRef(!1),B=O(),H=L(),W=null!=_;n.useLayoutEffect((function(){R.current=E}),[E]);var k=function(e){""===e.trim()?m("CLEAR"):m("CHANGE",{value:e})};return W&&_!==g&&k(_),o.createElement(i,t.__assign({},d,{"data-reach-combobox-input":"",ref:U,value:(!E||"NAVIGATING"!==h&&"INTERACTING"!==h?_||g:G||_||g)||"",onClick:l.wrapEvent(v,(function(){y.current&&(y.current=!1,S.current.select())})),onBlur:l.wrapEvent(C,H),onFocus:l.wrapEvent(T,(function(){s&&(y.current=!0),w&&"SELECT_WITH_CLICK"!==b&&m("FOCUS")})),onChange:l.wrapEvent(f,(function(e){W||k(e.target.value)})),onKeyDown:l.wrapEvent(p,B),id:x,"aria-autocomplete":"both","aria-activedescendant":G?String(V(G)):void 0}))}));b.displayName="ComboboxInput";var S=n.forwardRef((function(e,a){var r=e.children,i=e.portal,u=void 0===i||i,s=e.onKeyDown,c=e.onBlur,E=t.__rest(e,["children","portal","onKeyDown","onBlur"]),v=n.useContext(A),C=v.inputRef,T=v.isVisible,_=l.useForkedRef(v.popoverRef,a),d=O(),I=L(),N={"data-reach-combobox-popover":"",onKeyDown:l.wrapEvent(s,d),onBlur:l.wrapEvent(c,I),hidden:!T,tabIndex:-1,children:r};return u?o.createElement(p,t.__assign({},E,{ref:_,position:f.positionMatchWidth,targetRef:C},N)):o.createElement("div",t.__assign({ref:_},E,N))}));S.displayName="ComboboxPopover";var h=l.forwardRefWithAs((function(e,a){var r=e.persistSelection,i=void 0!==r&&r,u=e.as,s=void 0===u?"ul":u,l=t.__rest(e,["persistSelection","as"]),c=n.useContext(A),E=c.optionsRef;return i&&(c.persistSelectionRef.current=!0),n.useLayoutEffect((function(){return E.current=[],function(){E.current=[]}})),o.createElement(s,t.__assign({},l,{ref:a,"data-reach-combobox-list":"",role:"listbox"}))}));h.displayName="ComboboxList";var m=n.forwardRef((function(e,a){var r=e.children,i=e.value,u=e.onClick,s=t.__rest(e,["children","value","onClick"]),c=n.useContext(A),E=c.onSelect,v=c.data.navigationValue,f=c.transition,p=c.optionsRef;n.useEffect((function(){p.current.push(i)}));var C=v===i;return o.createElement(G.Provider,{value:i},o.createElement("li",t.__assign({},s,{"data-reach-combobox-option":"",ref:a,id:String(V(i)),role:"option","aria-selected":C,"data-highlighted":C?"":void 0,tabIndex:-1,onClick:l.wrapEvent(u,(function(){E&&E(i),f("SELECT_WITH_CLICK",{value:i})})),children:r||o.createElement(x,null)})))}));function x(){var e=n.useContext(G),t=n.useContext(A).data.value,a=n.useMemo((function(){return c.findAll({searchWords:E(t||"").split(/\s+/),textToHighlight:e})}),[t,e]);return o.createElement(o.Fragment,null,a.length?a.map((function(t,n){var a=e.slice(t.start,t.end);return o.createElement("span",{key:n,"data-user-value":!!t.highlight||void 0,"data-suggested-value":!t.highlight||void 0},a)})):e)}m.displayName="ComboboxOption",x.displayName="ComboboxOptionText";var R=l.forwardRefWithAs((function(e,a){var r=e.as,i=void 0===r?"button":r,u=e.onClick,s=e.onKeyDown,c=t.__rest(e,["as","onClick","onKeyDown"]),E=n.useContext(A),v=E.transition,f=E.state,p=E.listboxId,T=E.isVisible,_=l.useForkedRef(E.buttonRef,a),d=O();return o.createElement(i,t.__assign({"data-reach-combobox-button":"","aria-controls":p,"aria-haspopup":"listbox","aria-expanded":T,ref:_,onClick:l.wrapEvent(u,(function(){v(f===C?"OPEN_WITH_BUTTON":"CLOSE_WITH_BUTTON")})),onKeyDown:l.wrapEvent(s,d)},c))}));function O(){var e=n.useContext(A),t=e.data.navigationValue,o=e.onSelect,a=e.optionsRef,r=e.state,i=e.transition,u=e.autocompletePropRef,s=e.persistSelectionRef;return function(e){var n=a.current;switch(e.key){case"ArrowDown":if(e.preventDefault(),!n||0===n.length)return;r===C?i("NAVIGATE",{persistSelection:s.current}):(l=n.indexOf(t))===n.length-1?i("NAVIGATE",u.current?{value:null}:{value:n[0]}):i("NAVIGATE",{value:n[(l+1)%n.length]});break;case"ArrowUp":if(e.preventDefault(),!n||0===n.length)return;var l;r===C?i("NAVIGATE"):0===(l=n.indexOf(t))?i("NAVIGATE",u.current?{value:null}:{value:n[n.length-1]}):i("NAVIGATE",-1===l?{value:n.length?n[n.length-1]:null}:{value:n[(l-1+n.length)%n.length]});break;case"Escape":r!==C&&i("ESCAPE");break;case"Enter":"NAVIGATING"===r&&null!==t&&(e.preventDefault(),o&&o(t),i("SELECT_WITH_KEYBOARD"))}}}function L(){var e=n.useContext(A),t=e.state,o=e.transition,a=e.popoverRef,r=e.inputRef,i=e.buttonRef;return function(){requestAnimationFrame((function(){document.activeElement!==r.current&&document.activeElement!==i.current&&a.current&&(a.current.contains(document.activeElement)?"INTERACTING"!==t&&o("INTERACT"):o("BLUR"))}))}}R.displayName="ComboboxButton";var V=function(e){var t=0;if(0===e.length)return t;for(var n=0;n<e.length;n++)t=(t<<5)-t+e.charCodeAt(n),t&=t;return t};exports.Combobox=g,exports.ComboboxButton=R,exports.ComboboxInput=b,exports.ComboboxList=h,exports.ComboboxOption=m,exports.ComboboxOptionText=x,exports.ComboboxPopover=S;
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t);require("prop-types");var o,a,r,i,u,l=require("@reach/utils"),s=require("highlight-words-core"),c=e(require("escape-regexp")),v=require("@reach/auto-id"),E=require("@reach/popover"),f=e(E);function p(){return(p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function d(e,t){if(null==e)return{};var n,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)t.indexOf(n=r[o])>=0||(a[n]=e[n]);return a}var C="IDLE",T={initial:C,states:(u={},u.IDLE={on:(o={},o.BLUR=C,o.CLEAR=C,o.CHANGE="SUGGESTING",o.FOCUS="SUGGESTING",o.NAVIGATE="NAVIGATING",o.OPEN_WITH_BUTTON="SUGGESTING",o)},u.SUGGESTING={on:(a={},a.CHANGE="SUGGESTING",a.FOCUS="SUGGESTING",a.NAVIGATE="NAVIGATING",a.CLEAR=C,a.ESCAPE=C,a.BLUR=C,a.SELECT_WITH_CLICK=C,a.INTERACT="INTERACTING",a.CLOSE_WITH_BUTTON=C,a)},u.NAVIGATING={on:(r={},r.CHANGE="SUGGESTING",r.FOCUS="SUGGESTING",r.CLEAR=C,r.BLUR=C,r.ESCAPE=C,r.NAVIGATE="NAVIGATING",r.SELECT_WITH_KEYBOARD=C,r.CLOSE_WITH_BUTTON=C,r.INTERACT="INTERACTING",r)},u.INTERACTING={on:(i={},i.CHANGE="SUGGESTING",i.FOCUS="SUGGESTING",i.BLUR=C,i.ESCAPE=C,i.NAVIGATE="NAVIGATING",i.CLOSE_WITH_BUTTON=C,i.SELECT_WITH_CLICK=C,i)},u)},I=function(e,t){var n=p({},e,{lastEventType:t.type});switch(t.type){case"CHANGE":return p({},n,{navigationValue:null,value:t.value});case"NAVIGATE":case"OPEN_WITH_BUTTON":return p({},n,{navigationValue:A(n,t)});case"CLEAR":return p({},n,{value:"",navigationValue:null});case"BLUR":case"ESCAPE":return p({},n,{navigationValue:null});case"SELECT_WITH_CLICK":return p({},n,{value:t.value,navigationValue:null});case"SELECT_WITH_KEYBOARD":return p({},n,{value:e.navigationValue,navigationValue:null});case"CLOSE_WITH_BUTTON":return p({},n,{navigationValue:null});case"INTERACT":return n;case"FOCUS":return p({},n,{navigationValue:A(n,t)});default:return n}},b=["SUGGESTING","NAVIGATING","INTERACTING"],N=function(e){return b.includes(e)};function A(e,t){return t.value?t.value:t.persistSelection?e.value:null}var x=l.createDescendantContext("ComboboxDescendantContext"),G=l.createNamedContext("ComboboxContext",{}),m=l.createNamedContext("OptionContext",{}),h=l.forwardRefWithAs((function(e,o){var a=e.onSelect,r=e.openOnFocus,i=void 0!==r&&r,u=e.children,s=e.as,c=void 0===s?"div":s,E=d(e,["onSelect","openOnFocus","children","as"]),f=l.useDescendants(),C=f[0],b=f[1],A=t.useRef(),m=t.useRef(),h=t.useRef(),S=t.useRef(),R=t.useRef(),g=function(e,n,o){var a=t.useState(e.initial),r=a[0],i=a[1],u=t.useReducer(n,{value:"",navigationValue:null}),l=u[1];return[r,u[0],function(t,n){void 0===n&&(n={});var o=e.states[r],a=o&&o.on[t];if(!a)throw new Error('Unknown event "'+t+'" for state "'+r+'"');l(p({type:t,state:r,nextState:r},n)),i(a)}]}(T,I),O=g[0],_=g[1],L=g[2];!function(e,t){l.useIsomorphicLayoutEffect((function(){"NAVIGATE"!==e&&"ESCAPE"!==e&&"SELECT_WITH_CLICK"!==e&&"OPEN_WITH_BUTTON"!==e||t.current.focus()}),[t,e])}(_.lastEventType,A);var w=v.useId(E.id),V=w?l.makeId("listbox",w):"listbox",y={autocompletePropRef:S,buttonRef:h,data:_,inputRef:A,isVisible:N(O),listboxId:V,onSelect:a,openOnFocus:i,persistSelectionRef:R,popoverRef:m,state:O,transition:L};return t.useEffect((function(){return l.checkStyles("combobox")}),[]),n.createElement(l.DescendantProvider,{context:x,items:C,set:b},n.createElement(G.Provider,{value:y},n.createElement(c,Object.assign({},E,{"data-reach-combobox":"",ref:o,role:"combobox","aria-haspopup":"listbox","aria-owns":V,"aria-expanded":y.isVisible}),u)))}));h.displayName="Combobox";var S=l.forwardRefWithAs((function(e,o){var a=e.as,r=void 0===a?"input":a,i=e.selectOnClick,u=void 0!==i&&i,s=e.autocomplete,c=void 0===s||s,v=e.onClick,E=e.onChange,f=e.onKeyDown,p=e.onBlur,C=e.onFocus,T=e.value,I=d(e,["as","selectOnClick","autocomplete","onClick","onChange","onKeyDown","onBlur","onFocus","value"]),b=t.useContext(G),N=b.data,A=N.navigationValue,x=N.value,m=N.lastEventType,h=b.inputRef,S=b.state,R=b.transition,g=b.listboxId,O=b.autocompletePropRef,_=b.openOnFocus,L=l.useForkedRef(h,o),U=t.useRef(!1),B=w(),H=V(),k=null!=T;l.useIsomorphicLayoutEffect((function(){O.current=c}),[c,O]);var W=function(e){""===e.trim()?R("CLEAR"):R("CHANGE",{value:e})};return k&&T!==x&&W(T),n.createElement(r,Object.assign({},I,{"data-reach-combobox-input":"",ref:L,value:(!c||"NAVIGATING"!==S&&"INTERACTING"!==S?T||x:A||T||x)||"",onClick:l.wrapEvent(v,(function(){U.current&&(U.current=!1,h.current.select())})),onBlur:l.wrapEvent(p,H),onFocus:l.wrapEvent(C,(function(){u&&(U.current=!0),_&&"SELECT_WITH_CLICK"!==m&&R("FOCUS")})),onChange:l.wrapEvent(E,(function(e){k||W(e.target.value)})),onKeyDown:l.wrapEvent(f,B),id:g,"aria-autocomplete":"both","aria-activedescendant":A?String(y(A)):void 0}))}));S.displayName="ComboboxInput";var R=t.forwardRef((function(e,o){var a=e.children,r=e.portal,i=void 0===r||r,u=e.onKeyDown,s=e.onBlur,c=d(e,["children","portal","onKeyDown","onBlur"]),v=t.useContext(G),p=v.inputRef,C=v.isVisible,T=l.useForkedRef(v.popoverRef,o),I=w(),b=V(),N={"data-reach-combobox-popover":"",onKeyDown:l.wrapEvent(u,I),onBlur:l.wrapEvent(s,b),hidden:!C,tabIndex:-1,children:a};return i?n.createElement(f,Object.assign({},c,{ref:T,position:E.positionMatchWidth,targetRef:p},N)):n.createElement("div",Object.assign({ref:T},c,N))}));R.displayName="ComboboxPopover";var g=l.forwardRefWithAs((function(e,o){var a=e.persistSelection,r=void 0!==a&&a,i=e.as,u=void 0===i?"ul":i,l=d(e,["persistSelection","as"]),s=t.useContext(G);return r&&(s.persistSelectionRef.current=!0),n.createElement(u,Object.assign({},l,{ref:o,"data-reach-combobox-list":"",role:"listbox"}))}));g.displayName="ComboboxList";var O=t.forwardRef((function(e,o){var a=e.children,r=e.value,i=e.onClick,u=d(e,["children","value","onClick"]),s=t.useContext(G),c=s.onSelect,v=s.data.navigationValue,E=s.transition,f=t.useRef(null),p=l.useForkedRef(o,f),C=l.useDescendant({context:x,element:f.current,value:r}),T=v===r;return n.createElement(m.Provider,{value:{value:r,index:C}},n.createElement("li",Object.assign({},u,{"data-reach-combobox-option":"",ref:p,id:String(y(r)),role:"option","aria-selected":T,"data-highlighted":T?"":void 0,tabIndex:-1,onClick:l.wrapEvent(i,(function(){c&&c(r),E("SELECT_WITH_CLICK",{value:r})})),children:a||n.createElement(_,null)})))}));function _(){var e=t.useContext(m).value,o=t.useContext(G).data.value,a=t.useMemo((function(){return s.findAll({searchWords:c(o||"").split(/\s+/),textToHighlight:e})}),[o,e]);return n.createElement(n.Fragment,null,a.length?a.map((function(t,o){var a=e.slice(t.start,t.end);return n.createElement("span",{key:o,"data-user-value":!!t.highlight||void 0,"data-suggested-value":!t.highlight||void 0},a)})):e)}O.displayName="ComboboxOption",_.displayName="ComboboxOptionText";var L=l.forwardRefWithAs((function(e,o){var a=e.as,r=void 0===a?"button":a,i=e.onClick,u=e.onKeyDown,s=d(e,["as","onClick","onKeyDown"]),c=t.useContext(G),v=c.transition,E=c.state,f=c.listboxId,p=c.isVisible,T=l.useForkedRef(c.buttonRef,o),I=w();return n.createElement(r,Object.assign({"data-reach-combobox-button":"","aria-controls":f,"aria-haspopup":"listbox","aria-expanded":p,ref:T,onClick:l.wrapEvent(i,(function(){v(E===C?"OPEN_WITH_BUTTON":"CLOSE_WITH_BUTTON")})),onKeyDown:l.wrapEvent(u,I)},s))}));function w(){var e=t.useContext(G),n=e.data.navigationValue,o=e.onSelect,a=e.state,r=e.transition,i=e.autocompletePropRef,u=e.persistSelectionRef,l=t.useContext(x).descendants;return function(e){switch(e.key){case"ArrowDown":if(e.preventDefault(),!l||0===l.length)return;if(a===C)r("NAVIGATE",{persistSelection:u.current});else{var t=l.findIndex((function(e){return e.value===n}));r("NAVIGATE",t===l.length-1?i.current?{value:null}:{value:l[0].value}:{value:l[(t+1)%l.length].value})}break;case"ArrowUp":if(e.preventDefault(),!l||0===l.length)return;if(a===C)r("NAVIGATE");else{var s=l.findIndex((function(e){return e.value===n}));r("NAVIGATE",0===s?i.current?{value:null}:{value:l[l.length-1].value}:-1===s?{value:l.length?l[l.length-1].value:null}:{value:l[(s-1+l.length)%l.length].value})}break;case"Escape":a!==C&&r("ESCAPE");break;case"Enter":"NAVIGATING"===a&&null!==n&&(e.preventDefault(),o&&o(n),r("SELECT_WITH_KEYBOARD"))}}}function V(){var e=t.useContext(G),n=e.state,o=e.transition,a=e.popoverRef,r=e.inputRef,i=e.buttonRef;return function(){requestAnimationFrame((function(){document.activeElement!==r.current&&document.activeElement!==i.current&&a.current&&(a.current.contains(document.activeElement)?"INTERACTING"!==n&&o("INTERACT"):o("BLUR"))}))}}L.displayName="ComboboxButton";var y=function(e){var t=0;if(0===e.length)return t;for(var n=0;n<e.length;n++)t=(t<<5)-t+e.charCodeAt(n),t&=t;return t};exports.Combobox=h,exports.ComboboxButton=L,exports.ComboboxInput=S,exports.ComboboxList=g,exports.ComboboxOption=O,exports.ComboboxOptionText=_,exports.ComboboxPopover=R;
//# sourceMappingURL=combobox.cjs.production.min.js.map

468

dist/combobox.esm.js

@@ -1,5 +0,4 @@

import { __rest, __assign } from 'tslib';
import React, { useRef, useEffect, useContext, useLayoutEffect, forwardRef, useMemo, useState, useReducer } from 'react';
import React, { useRef, useEffect, useContext, forwardRef, useMemo, useState, useReducer } from 'react';
import PropTypes from 'prop-types';
import { forwardRefWithAs, makeId, checkStyles, useForkedRef, wrapEvent, createNamedContext } from '@reach/utils';
import { forwardRefWithAs, useDescendants, makeId, checkStyles, DescendantProvider, useForkedRef, useIsomorphicLayoutEffect, wrapEvent, useDescendant, createDescendantContext, createNamedContext } from '@reach/utils';
import { findAll } from 'highlight-words-core';

@@ -10,22 +9,36 @@ import escapeRegexp from 'escape-regexp';

/**
* Welcome to @reach/combobox!
*
* Accessible combobox (autocomplete or autosuggest) component for React.
*
* A combobox is the combination of an `<input type="text"/>` and a list. The
* list is designed to help the user arrive at a value, but the value does not
* necessarily have to come from that list. Don't think of it like a
* `<select/>`, but more of an `<input type="text"/>` with some suggestions. You
* can, however, validate that the value comes from the list, that's up to your
* app.
*
* ???: navigate w/ arrows, then hit backspace: should it delete the
* autocompleted text or the old value the user had typed?!
*
* @see Docs https://reacttraining.com/reach-ui/combobox
* @see Source https://github.com/reach/reach-ui/tree/master/packages/combobox
* @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
*/
var _a, _b, _c, _d, _e;
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
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;
}
var _on, _on2, _on3, _on4, _states;
// States

@@ -65,15 +78,15 @@ // Nothing going on, waiting for the user to type or use the arrow keys

initial: IDLE,
states: (_a = {}, _a[IDLE] = {
on: (_b = {}, _b[BLUR] = IDLE, _b[CLEAR] = IDLE, _b[CHANGE] = SUGGESTING, _b[FOCUS] = SUGGESTING, _b[NAVIGATE] = NAVIGATING, _b[OPEN_WITH_BUTTON] = SUGGESTING, _b)
}, _a[SUGGESTING] = {
on: (_c = {}, _c[CHANGE] = SUGGESTING, _c[FOCUS] = SUGGESTING, _c[NAVIGATE] = NAVIGATING, _c[CLEAR] = IDLE, _c[ESCAPE] = IDLE, _c[BLUR] = IDLE, _c[SELECT_WITH_CLICK] = IDLE, _c[INTERACT] = INTERACTING, _c[CLOSE_WITH_BUTTON] = IDLE, _c)
}, _a[NAVIGATING] = {
on: (_d = {}, _d[CHANGE] = SUGGESTING, _d[FOCUS] = SUGGESTING, _d[CLEAR] = IDLE, _d[BLUR] = IDLE, _d[ESCAPE] = IDLE, _d[NAVIGATE] = NAVIGATING, _d[SELECT_WITH_KEYBOARD] = IDLE, _d[CLOSE_WITH_BUTTON] = IDLE, _d[INTERACT] = INTERACTING, _d)
}, _a[INTERACTING] = {
on: (_e = {}, _e[CHANGE] = SUGGESTING, _e[FOCUS] = SUGGESTING, _e[BLUR] = IDLE, _e[ESCAPE] = IDLE, _e[NAVIGATE] = NAVIGATING, _e[CLOSE_WITH_BUTTON] = IDLE, _e[SELECT_WITH_CLICK] = IDLE, _e)
}, _a)
states: (_states = {}, _states[IDLE] = {
on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on)
}, _states[SUGGESTING] = {
on: (_on2 = {}, _on2[CHANGE] = SUGGESTING, _on2[FOCUS] = SUGGESTING, _on2[NAVIGATE] = NAVIGATING, _on2[CLEAR] = IDLE, _on2[ESCAPE] = IDLE, _on2[BLUR] = IDLE, _on2[SELECT_WITH_CLICK] = IDLE, _on2[INTERACT] = INTERACTING, _on2[CLOSE_WITH_BUTTON] = IDLE, _on2)
}, _states[NAVIGATING] = {
on: (_on3 = {}, _on3[CHANGE] = SUGGESTING, _on3[FOCUS] = SUGGESTING, _on3[CLEAR] = IDLE, _on3[BLUR] = IDLE, _on3[ESCAPE] = IDLE, _on3[NAVIGATE] = NAVIGATING, _on3[SELECT_WITH_KEYBOARD] = IDLE, _on3[CLOSE_WITH_BUTTON] = IDLE, _on3[INTERACT] = INTERACTING, _on3)
}, _states[INTERACTING] = {
on: (_on4 = {}, _on4[CHANGE] = SUGGESTING, _on4[FOCUS] = SUGGESTING, _on4[BLUR] = IDLE, _on4[ESCAPE] = IDLE, _on4[NAVIGATE] = NAVIGATING, _on4[CLOSE_WITH_BUTTON] = IDLE, _on4[SELECT_WITH_CLICK] = IDLE, _on4)
}, _states)
};
var reducer = function reducer(data, event) {
var nextState = __assign(__assign({}, data), {
var nextState = _extends({}, data, {
lastEventType: event.type

@@ -84,3 +97,3 @@ });

case CHANGE:
return __assign(__assign({}, nextState), {
return _extends({}, nextState, {
navigationValue: null,

@@ -92,3 +105,3 @@ value: event.value

case OPEN_WITH_BUTTON:
return __assign(__assign({}, nextState), {
return _extends({}, nextState, {
navigationValue: findNavigationValue(nextState, event)

@@ -98,3 +111,3 @@ });

case CLEAR:
return __assign(__assign({}, nextState), {
return _extends({}, nextState, {
value: "",

@@ -106,3 +119,3 @@ navigationValue: null

case ESCAPE:
return __assign(__assign({}, nextState), {
return _extends({}, nextState, {
navigationValue: null

@@ -112,3 +125,3 @@ });

case SELECT_WITH_CLICK:
return __assign(__assign({}, nextState), {
return _extends({}, nextState, {
value: event.value,

@@ -119,3 +132,3 @@ navigationValue: null

case SELECT_WITH_KEYBOARD:
return __assign(__assign({}, nextState), {
return _extends({}, nextState, {
value: data.navigationValue,

@@ -126,3 +139,3 @@ navigationValue: null

case CLOSE_WITH_BUTTON:
return __assign(__assign({}, nextState), {
return _extends({}, nextState, {
navigationValue: null

@@ -135,3 +148,3 @@ });

case FOCUS:
return __assign(__assign({}, nextState), {
return _extends({}, nextState, {
navigationValue: findNavigationValue(nextState, event)

@@ -168,2 +181,5 @@ });

var ComboboxDescendantContext =
/*#__PURE__*/
createDescendantContext("ComboboxDescendantContext");
var ComboboxContext =

@@ -180,3 +196,3 @@ /*#__PURE__*/

/*#__PURE__*/
createNamedContext("OptionContext", null); ////////////////////////////////////////////////////////////////////////////////
createNamedContext("OptionContext", {}); ////////////////////////////////////////////////////////////////////////////////

@@ -191,21 +207,15 @@ /**

/*#__PURE__*/
forwardRefWithAs(function Combobox(_a, forwardedRef) {
var onSelect = _a.onSelect,
_b = _a.openOnFocus,
openOnFocus = _b === void 0 ? false : _b,
children = _a.children,
_c = _a.as,
Comp = _c === void 0 ? "div" : _c,
rest = __rest(_a, ["onSelect", "openOnFocus", "children", "as"]);
/*
* We store the values of all the ComboboxOptions on this ref. This makes it
* possible to perform the keyboard navigation from the input on the list.
* We manipulate this array through context so that we don't have to enforce
* a parent/child relationship between ComboboxList and ComboboxOption with
* cloneElement or fall back to DOM traversal. It's a new trick for me and
* I'm pretty excited about it.
*/
forwardRefWithAs(function Combobox(_ref, forwardedRef) {
var onSelect = _ref.onSelect,
_ref$openOnFocus = _ref.openOnFocus,
openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
children = _ref.children,
_ref$as = _ref.as,
Comp = _ref$as === void 0 ? "div" : _ref$as,
rest = _objectWithoutPropertiesLoose(_ref, ["onSelect", "openOnFocus", "children", "as"]);
var _useDescendants = useDescendants(),
options = _useDescendants[0],
setOptions = _useDescendants[1]; // Need this to focus it
var optionsRef = useRef(null); // Need this to focus it

@@ -236,6 +246,6 @@ var inputRef = useRef();

var _d = useReducerMachine(stateChart, reducer, defaultData),
state = _d[0],
data = _d[1],
transition = _d[2];
var _useReducerMachine = useReducerMachine(stateChart, reducer, defaultData),
state = _useReducerMachine[0],
data = _useReducerMachine[1],
transition = _useReducerMachine[2];

@@ -254,3 +264,2 @@ useFocusManagement(data.lastEventType, inputRef);

openOnFocus: openOnFocus,
optionsRef: optionsRef,
persistSelectionRef: persistSelectionRef,

@@ -264,5 +273,9 @@ popoverRef: popoverRef,

}, []);
return React.createElement(ComboboxContext.Provider, {
return React.createElement(DescendantProvider, {
context: ComboboxDescendantContext,
items: options,
set: setOptions
}, React.createElement(ComboboxContext.Provider, {
value: context
}, React.createElement(Comp, __assign({}, rest, {
}, React.createElement(Comp, Object.assign({}, rest, {
"data-reach-combobox": "",

@@ -274,3 +287,3 @@ ref: forwardedRef,

"aria-expanded": context.isVisible
}), children));
}), children)));
});

@@ -298,31 +311,34 @@ Combobox.displayName = "Combobox";

/*#__PURE__*/
forwardRefWithAs(function ComboboxInput(_a, forwardedRef) {
var _b = _a.as,
Comp = _b === void 0 ? "input" : _b,
_c = _a.selectOnClick,
selectOnClick = _c === void 0 ? false : _c,
_d = _a.autocomplete,
autocomplete = _d === void 0 ? true : _d,
onClick = _a.onClick,
onChange = _a.onChange,
onKeyDown = _a.onKeyDown,
onBlur = _a.onBlur,
onFocus = _a.onFocus,
controlledValue = _a.value,
props = __rest(_a, ["as", "selectOnClick", "autocomplete", "onClick", "onChange", "onKeyDown", "onBlur", "onFocus", "value"]);
forwardRefWithAs(function ComboboxInput(_ref2, forwardedRef) {
var _ref2$as = _ref2.as,
Comp = _ref2$as === void 0 ? "input" : _ref2$as,
_ref2$selectOnClick = _ref2.selectOnClick,
selectOnClick = _ref2$selectOnClick === void 0 ? false : _ref2$selectOnClick,
_ref2$autocomplete = _ref2.autocomplete,
autocomplete = _ref2$autocomplete === void 0 ? true : _ref2$autocomplete,
onClick = _ref2.onClick,
onChange = _ref2.onChange,
onKeyDown = _ref2.onKeyDown,
onBlur = _ref2.onBlur,
onFocus = _ref2.onFocus,
controlledValue = _ref2.value,
props = _objectWithoutPropertiesLoose(_ref2, ["as", "selectOnClick", "autocomplete", "onClick", "onChange", "onKeyDown", "onBlur", "onFocus", "value"]);
var _e = useContext(ComboboxContext),
_f = _e.data,
navigationValue = _f.navigationValue,
value = _f.value,
lastEventType = _f.lastEventType,
inputRef = _e.inputRef,
state = _e.state,
transition = _e.transition,
listboxId = _e.listboxId,
autocompletePropRef = _e.autocompletePropRef,
openOnFocus = _e.openOnFocus;
var _useContext = useContext(ComboboxContext),
_useContext$data = _useContext.data,
navigationValue = _useContext$data.navigationValue,
value = _useContext$data.value,
lastEventType = _useContext$data.lastEventType,
inputRef = _useContext.inputRef,
state = _useContext.state,
transition = _useContext.transition,
listboxId = _useContext.listboxId,
autocompletePropRef = _useContext.autocompletePropRef,
openOnFocus = _useContext.openOnFocus;
var ref = useForkedRef(inputRef, forwardedRef); // Because we close the List on blur, we need to track if the blur is
// caused by clicking inside the list, and if so, don't close the List.
var ref = useForkedRef(inputRef, forwardedRef);
/*
* Because we close the List on blur, we need to track if the blur is
* caused by clicking inside the list, and if so, don't close the List.
*/

@@ -333,6 +349,12 @@ var selectOnClickRef = useRef(false);

var isControlled = controlledValue != null;
useLayoutEffect(function () {
autocompletePropRef.current = autocomplete; // eslint-disable-next-line react-hooks/exhaustive-deps
}, [autocomplete]);
/*
* Layout effect should be SSR-safe here because we don't actually do
* anything with this ref that involves rendering until after we've
* let the client hydrate in nested components.
*/
useIsomorphicLayoutEffect(function () {
autocompletePropRef.current = autocomplete;
}, [autocomplete, autocompletePropRef]);
var handleValueChange = function handleValueChange(value) {

@@ -346,5 +368,8 @@ if (value.trim() === "") {

}
}; // If they are controlling the value we still need to do our transitions, so
// we have this derived state to emulate onChange of the input as we receive
// new `value`s ...[*]
};
/*
* If they are controlling the value we still need to do our transitions, so
* we have this derived state to emulate onChange of the input as we receive
* new `value`s ...[*]
*/

@@ -354,5 +379,8 @@

handleValueChange(controlledValue);
} // [*]... and when controlled, we don't trigger handleValueChange as the user
// types, instead the developer controls it with the normal input onChange
// prop
}
/*
* [*]... and when controlled, we don't trigger handleValueChange as the user
* types, instead the developer controls it with the normal input onChange
* prop
*/

@@ -371,5 +399,8 @@

selectOnClickRef.current = true;
} // If we select an option with click, useFocusManagement will focus the
// input, in those cases we don't want to cause the menu to open back up,
// so we guard behind these states
}
/*
* If we select an option with click, useFocusManagement will focus the
* input, in those cases we don't want to cause the menu to open back up,
* so we guard behind these states.
*/

@@ -391,3 +422,3 @@

navigationValue || controlledValue || value : controlledValue || value;
return React.createElement(Comp, __assign({}, props, {
return React.createElement(Comp, Object.assign({}, props, {
"data-reach-combobox-input": "",

@@ -420,14 +451,14 @@ ref: ref,

/*#__PURE__*/
forwardRef(function ComboboxPopover(_a, forwardedRef) {
var children = _a.children,
_b = _a.portal,
portal = _b === void 0 ? true : _b,
onKeyDown = _a.onKeyDown,
onBlur = _a.onBlur,
props = __rest(_a, ["children", "portal", "onKeyDown", "onBlur"]);
forwardRef(function ComboboxPopover(_ref3, forwardedRef) {
var children = _ref3.children,
_ref3$portal = _ref3.portal,
portal = _ref3$portal === void 0 ? true : _ref3$portal,
onKeyDown = _ref3.onKeyDown,
onBlur = _ref3.onBlur,
props = _objectWithoutPropertiesLoose(_ref3, ["children", "portal", "onKeyDown", "onBlur"]);
var _c = useContext(ComboboxContext),
popoverRef = _c.popoverRef,
inputRef = _c.inputRef,
isVisible = _c.isVisible;
var _useContext2 = useContext(ComboboxContext),
popoverRef = _useContext2.popoverRef,
inputRef = _useContext2.inputRef,
isVisible = _useContext2.isVisible;

@@ -444,8 +475,6 @@ var ref = useForkedRef(popoverRef, forwardedRef);

* Instead of conditionally rendering the popover we use the `hidden` prop
* because we don't want to unmount on close (from escape or onSelect). If
* we unmounted, then we'd lose the optionsRef and the user wouldn't be able
* to use the arrow keys to pop the list back open. However, the developer
* can conditionally render the ComboboxPopover if they do want to cause
* mount/unmount based on the app's own data (like results.length or
* whatever).
* because we don't want to unmount on close (from escape or onSelect).
* However, the developer can conditionally render the ComboboxPopover if
* they do want to cause mount/unmount based on the app's own data (like
* results.length or whatever).
*/

@@ -456,3 +485,3 @@ hidden: !isVisible,

};
return portal ? React.createElement(Popover, __assign({}, props, {
return portal ? React.createElement(Popover, Object.assign({}, props, {
// @ts-ignore

@@ -462,3 +491,3 @@ ref: ref,

targetRef: inputRef
}, sharedProps)) : React.createElement("div", __assign({
}, sharedProps)) : React.createElement("div", Object.assign({
ref: ref

@@ -480,16 +509,11 @@ }, props, sharedProps));

/*#__PURE__*/
forwardRefWithAs(function ComboboxList(_a, forwardedRef) {
var // when true, and the list opens again, the option with a matching value will be
// automatically highleted.
_b = _a.persistSelection,
// when true, and the list opens again, the option with a matching value will be
// automatically highleted.
persistSelection = _b === void 0 ? false : _b,
_c = _a.as,
Comp = _c === void 0 ? "ul" : _c,
props = __rest(_a, ["persistSelection", "as"]);
forwardRefWithAs(function ComboboxList(_ref4, forwardedRef) {
var _ref4$persistSelectio = _ref4.persistSelection,
persistSelection = _ref4$persistSelectio === void 0 ? false : _ref4$persistSelectio,
_ref4$as = _ref4.as,
Comp = _ref4$as === void 0 ? "ul" : _ref4$as,
props = _objectWithoutPropertiesLoose(_ref4, ["persistSelection", "as"]);
var _d = useContext(ComboboxContext),
optionsRef = _d.optionsRef,
persistSelectionRef = _d.persistSelectionRef;
var _useContext3 = useContext(ComboboxContext),
persistSelectionRef = _useContext3.persistSelectionRef;

@@ -499,17 +523,4 @@ if (persistSelection) {

}
/*
* WEIRD? Reset the options ref every render so that they are always
* accurate and ready for keyboard navigation handlers. Using layout
* effect to schedule this effect before the ComboboxOptions push into
* the array
*/
useLayoutEffect(function () {
optionsRef.current = [];
return function () {
optionsRef.current = [];
};
});
return React.createElement(Comp, __assign({}, props, {
return React.createElement(Comp, Object.assign({}, props, {
ref: forwardedRef,

@@ -532,16 +543,19 @@ "data-reach-combobox-list": "",

/*#__PURE__*/
forwardRef(function ComboboxOption(_a, forwardedRef) {
var children = _a.children,
value = _a.value,
onClick = _a.onClick,
props = __rest(_a, ["children", "value", "onClick"]);
forwardRef(function ComboboxOption(_ref5, forwardedRef) {
var children = _ref5.children,
value = _ref5.value,
onClick = _ref5.onClick,
props = _objectWithoutPropertiesLoose(_ref5, ["children", "value", "onClick"]);
var _b = useContext(ComboboxContext),
onSelect = _b.onSelect,
navigationValue = _b.data.navigationValue,
transition = _b.transition,
optionsRef = _b.optionsRef;
var _useContext4 = useContext(ComboboxContext),
onSelect = _useContext4.onSelect,
navigationValue = _useContext4.data.navigationValue,
transition = _useContext4.transition;
useEffect(function () {
optionsRef.current.push(value);
var ownRef = useRef(null);
var ref = useForkedRef(forwardedRef, ownRef);
var index = useDescendant({
context: ComboboxDescendantContext,
element: ownRef.current,
value: value
});

@@ -558,6 +572,9 @@ var isActive = navigationValue === value;

return React.createElement(OptionContext.Provider, {
value: value
}, React.createElement("li", __assign({}, props, {
value: {
value: value,
index: index
}
}, React.createElement("li", Object.assign({}, props, {
"data-reach-combobox-option": "",
ref: forwardedRef,
ref: ref,
id: String(makeHash(value)),

@@ -599,4 +616,8 @@ role: "option",

function ComboboxOptionText() {
var value = useContext(OptionContext);
var contextValue = useContext(ComboboxContext).data.value;
var _useContext5 = useContext(OptionContext),
value = _useContext5.value;
var _useContext6 = useContext(ComboboxContext),
contextValue = _useContext6.data.value;
var results = useMemo(function () {

@@ -625,15 +646,15 @@ return findAll({

/*#__PURE__*/
forwardRefWithAs(function ComboboxButton(_a, forwardedRef) {
var _b = _a.as,
Comp = _b === void 0 ? "button" : _b,
onClick = _a.onClick,
onKeyDown = _a.onKeyDown,
props = __rest(_a, ["as", "onClick", "onKeyDown"]);
forwardRefWithAs(function ComboboxButton(_ref6, forwardedRef) {
var _ref6$as = _ref6.as,
Comp = _ref6$as === void 0 ? "button" : _ref6$as,
onClick = _ref6.onClick,
onKeyDown = _ref6.onKeyDown,
props = _objectWithoutPropertiesLoose(_ref6, ["as", "onClick", "onKeyDown"]);
var _c = useContext(ComboboxContext),
transition = _c.transition,
state = _c.state,
buttonRef = _c.buttonRef,
listboxId = _c.listboxId,
isVisible = _c.isVisible;
var _useContext7 = useContext(ComboboxContext),
transition = _useContext7.transition,
state = _useContext7.state,
buttonRef = _useContext7.buttonRef,
listboxId = _useContext7.listboxId,
isVisible = _useContext7.isVisible;

@@ -651,3 +672,3 @@ var ref = useForkedRef(buttonRef, forwardedRef);

return React.createElement(Comp, __assign({
return React.createElement(Comp, Object.assign({
"data-reach-combobox-button": "",

@@ -677,9 +698,10 @@ "aria-controls": listboxId,

* of awkwardly at the beginning, unclear to me why 🤷‍♂️
*
* Should be safe to use here since we're just focusing an input.
*/
useLayoutEffect(function () {
useIsomorphicLayoutEffect(function () {
if (lastEventType === NAVIGATE || lastEventType === ESCAPE || lastEventType === SELECT_WITH_CLICK || lastEventType === OPEN_WITH_BUTTON) {
inputRef.current.focus();
} // eslint-disable-next-line react-hooks/exhaustive-deps
}, [lastEventType]);
}
}, [inputRef, lastEventType]);
}

@@ -693,14 +715,14 @@ /**

function useKeyDown() {
var _a = useContext(ComboboxContext),
navigationValue = _a.data.navigationValue,
onSelect = _a.onSelect,
optionsRef = _a.optionsRef,
state = _a.state,
transition = _a.transition,
autocompletePropRef = _a.autocompletePropRef,
persistSelectionRef = _a.persistSelectionRef;
var _useContext8 = useContext(ComboboxContext),
navigationValue = _useContext8.data.navigationValue,
onSelect = _useContext8.onSelect,
state = _useContext8.state,
transition = _useContext8.transition,
autocompletePropRef = _useContext8.autocompletePropRef,
persistSelectionRef = _useContext8.persistSelectionRef;
var _useContext9 = useContext(ComboboxDescendantContext),
options = _useContext9.descendants;
return function handleKeyDown(event) {
var options = optionsRef.current;
switch (event.key) {

@@ -727,3 +749,6 @@ case "ArrowDown":

} else {
var index = options.indexOf(navigationValue);
var index = options.findIndex(function (_ref7) {
var value = _ref7.value;
return value === navigationValue;
});
var atBottom = index === options.length - 1;

@@ -743,3 +768,3 @@

// cycle through
var firstOption = options[0];
var firstOption = options[0].value;
transition(NAVIGATE, {

@@ -751,3 +776,3 @@ value: firstOption

// Go to the next item in the list
var nextValue = options[(index + 1) % options.length];
var nextValue = options[(index + 1) % options.length].value;
transition(NAVIGATE, {

@@ -780,5 +805,8 @@ value: nextValue

} else {
var index = options.indexOf(navigationValue);
var _index = options.findIndex(function (_ref8) {
var value = _ref8.value;
return value === navigationValue;
});
if (index === 0) {
if (_index === 0) {
if (autocompletePropRef.current) {

@@ -795,3 +823,3 @@ /*

// cycle through
var lastOption = options[options.length - 1];
var lastOption = options[options.length - 1].value;
transition(NAVIGATE, {

@@ -801,5 +829,5 @@ value: lastOption

}
} else if (index === -1) {
} else if (_index === -1) {
// displaying the user's value, so go select the last one
var value = options.length ? options[options.length - 1] : null;
var value = options.length ? options[options.length - 1].value : null;
transition(NAVIGATE, {

@@ -810,5 +838,5 @@ value: value

// normal case, select previous
var nextValue = options[(index - 1 + options.length) % options.length];
var _nextValue = options[(_index - 1 + options.length) % options.length].value;
transition(NAVIGATE, {
value: nextValue
value: _nextValue
});

@@ -846,8 +874,8 @@ }

function useBlur() {
var _a = useContext(ComboboxContext),
state = _a.state,
transition = _a.transition,
popoverRef = _a.popoverRef,
inputRef = _a.inputRef,
buttonRef = _a.buttonRef;
var _useContext10 = useContext(ComboboxContext),
state = _useContext10.state,
transition = _useContext10.transition,
popoverRef = _useContext10.popoverRef,
inputRef = _useContext10.inputRef,
buttonRef = _useContext10.buttonRef;

@@ -882,9 +910,9 @@ return function handleBlur() {

function useReducerMachine(chart, reducer, initialData) {
var _a = useState(chart.initial),
state = _a[0],
setState = _a[1];
var _useState = useState(chart.initial),
state = _useState[0],
setState = _useState[1];
var _b = useReducer(reducer, initialData),
data = _b[0],
dispatch = _b[1];
var _useReducer = useReducer(reducer, initialData),
data = _useReducer[0],
dispatch = _useReducer[1];

@@ -903,3 +931,3 @@ var transition = function transition(event, payload) {

dispatch(__assign({
dispatch(_extends({
type: event,

@@ -906,0 +934,0 @@ state: state,

2

dist/index.d.ts

@@ -57,3 +57,3 @@ /**

*/
export declare const ComboboxInput: import("@reach/utils").ComponentWithAs<"div", ComboboxInputProps>;
export declare const ComboboxInput: import("@reach/utils").ComponentWithAs<"input", ComboboxInputProps>;
/**

@@ -60,0 +60,0 @@ * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxinput-props

12

package.json
{
"name": "@reach/combobox",
"version": "0.7.3",
"version": "0.7.4",
"description": "Accessible React Combobox (Autocomplete).",

@@ -18,6 +18,6 @@ "author": "React Training <hello@reacttraining.com>",

"dependencies": {
"@reach/auto-id": "^0.7.3",
"@reach/popover": "^0.7.3",
"@reach/portal": "^0.7.3",
"@reach/utils": "^0.7.3",
"@reach/auto-id": "^0.7.4",
"@reach/popover": "^0.7.4",
"@reach/portal": "^0.7.4",
"@reach/utils": "^0.7.4",
"escape-regexp": "0.0.1",

@@ -39,3 +39,3 @@ "highlight-words-core": "1.2.2",

],
"gitHead": "fe739beb1d94cc58c4e72f88ab58efa58e0de8c8"
"gitHead": "f460709e283a60dd5ea62952b7feaf88546a50ff"
}
dist/combobox.cjs.development.js.map

Sorry, the diff of this file is not supported yet

dist/combobox.cjs.production.min.js.map

Sorry, the diff of this file is not supported yet

dist/combobox.esm.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc