first: useAction(function () {
last: useAction(function () {
sort: useAction(function () {
unstable_setVirtual: useAction(function (value) {
setRTL: useAction(function (value) {
setOrientation: useAction(function (value) {
setCurrentId: useAction(function (value) {
setLoop: useAction(function (value) {
setWrap: useAction(function (value) {
setShift: useAction(function (value) {
unstable_setIncludesBaseElement: useAction(function (value) {
type: "setIncludesBaseElement",
includesBaseElement: value
reset: useAction(function () {
// EXTERNAL MODULE: ./node_modules/reakit/node_modules/reakit-system/es/createComponent.js + 3 modules
var createComponent = __webpack_require__("dQ10");
// EXTERNAL MODULE: ./node_modules/reakit/node_modules/reakit-system/es/createHook.js + 4 modules
var createHook = __webpack_require__("1k9I");
// EXTERNAL MODULE: ./node_modules/reakit/node_modules/reakit-utils/es/useForkRef.js
var useForkRef = __webpack_require__("mFP7");
// EXTERNAL MODULE: ./node_modules/reakit/node_modules/reakit-warning/es/index.js + 1 modules
var es = __webpack_require__("FyLM");
// EXTERNAL MODULE: ./node_modules/reakit/node_modules/reakit-utils/es/useLiveRef.js
var useLiveRef = __webpack_require__("+LFj");
// EXTERNAL MODULE: ./node_modules/reakit/node_modules/reakit-utils/es/isSelfTarget.js
var isSelfTarget = __webpack_require__("eXCq");
// EXTERNAL MODULE: ./node_modules/reakit/es/Role/Role.js
var Role = __webpack_require__("zGFp");
// EXTERNAL MODULE: ./node_modules/reakit/es/Tabbable/Tabbable.js
var Tabbable = __webpack_require__("G3V0");
// EXTERNAL MODULE: ./node_modules/reakit/node_modules/reakit-system/es/useCreateElement.js
var useCreateElement = __webpack_require__("sej1");
// EXTERNAL MODULE: ./node_modules/reakit/node_modules/reakit-utils/es/_rollupPluginBabelHelpers-1f0bf8c2.js
var es_rollupPluginBabelHelpers_1f0bf8c2 = __webpack_require__("vk5B");
// EXTERNAL MODULE: ./node_modules/reakit/node_modules/reakit-utils/es/createEvent.js
var createEvent = __webpack_require__("roOW");
// CONCATENATED MODULE: ./node_modules/reakit/node_modules/reakit-utils/es/fireBlurEvent.js
function createFocusEvent(element, type, eventInit) {
if (eventInit === void 0) {
if (typeof FocusEvent === "function") {
return new FocusEvent(type, eventInit);
return Object(createEvent["a" /* createEvent */])(element, type, eventInit);
* Creates and dispatches a blur event in a way that also works on IE 11.
* import { fireBlurEvent } from "reakit-utils";
* fireBlurEvent(document.getElementById("id"));
function fireBlurEvent(element, eventInit) {
var event = createFocusEvent(element, "blur", eventInit);
var defaultAllowed = element.dispatchEvent(event);
var bubbleInit = Object(es_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(es_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, eventInit), {}, {
element.dispatchEvent(createFocusEvent(element, "focusout", bubbleInit));
// EXTERNAL MODULE: ./node_modules/reakit/node_modules/reakit-utils/es/getWindow.js
var getWindow = __webpack_require__("OQof");
// CONCATENATED MODULE: ./node_modules/reakit/node_modules/reakit-utils/es/fireKeyboardEvent.js
function createKeyboardEvent(element, type, eventInit) {
if (eventInit === void 0) {
if (typeof KeyboardEvent === "function") {
return new KeyboardEvent(type, eventInit);
} // IE 11 doesn't support Event constructors
var event = Object(getDocument["a" /* getDocument */])(element).createEvent("KeyboardEvent");
event.initKeyboardEvent(type, eventInit.bubbles, eventInit.cancelable, Object(getWindow["a" /* getWindow */])(element), eventInit.key, eventInit.location, eventInit.ctrlKey, eventInit.altKey, eventInit.shiftKey, eventInit.metaKey);
* Creates and dispatches `KeyboardEvent` in a way that also works on IE 11.
* import { fireKeyboardEvent } from "reakit-utils";
* fireKeyboardEvent(document.getElementById("id"), "keydown", {
function fireKeyboardEvent(element, type, eventInit) {
return element.dispatchEvent(createKeyboardEvent(element, type, eventInit));
// EXTERNAL MODULE: ./node_modules/reakit/node_modules/reakit-utils/es/canUseDOM.js
var canUseDOM = __webpack_require__("PcbF");
// EXTERNAL MODULE: ./node_modules/reakit/node_modules/reakit-utils/es/getActiveElement.js
var getActiveElement = __webpack_require__("z222");
// CONCATENATED MODULE: ./node_modules/reakit/node_modules/reakit-utils/es/getNextActiveElementOnBlur.js
var isIE11 = canUseDOM["a" /* canUseDOM */] && "msCrypto" in window;
* Cross-browser method that returns the next active element (the element that
* is receiving focus) after a blur event is dispatched. It receives the blur
* event object as the argument.
* import { getNextActiveElementOnBlur } from "reakit-utils";
* const element = document.getElementById("id");
* element.addEventListener("blur", (event) => {
* const nextActiveElement = getNextActiveElementOnBlur(event);
function getNextActiveElementOnBlur(event) {
// IE 11 doesn't support event.relatedTarget on blur.
// document.activeElement points the the next active element.
// On modern browsers, document.activeElement points to the current target.
var activeElement = Object(getActiveElement["a" /* getActiveElement */])(event.currentTarget);
return event.relatedTarget;
// EXTERNAL MODULE: ./node_modules/reakit/es/__keys-6742f591.js
var _keys_6742f591 = __webpack_require__("TFuP");
// EXTERNAL MODULE: ./node_modules/reakit/es/userFocus-e16425e3.js
var userFocus_e16425e3 = __webpack_require__("Mih7");
// CONCATENATED MODULE: ./node_modules/reakit/es/Composite/Composite.js
var Composite_isIE11 = canUseDOM["a" /* canUseDOM */] && "msCrypto" in window;
function canProxyKeyboardEvent(event) {
if (!Object(isSelfTarget["a" /* isSelfTarget */])(event)) return false;
if (event.metaKey) return false;
if (event.key === "Tab") return false;
function useKeyboardEventProxy(virtual, currentItem, htmlEventHandler) {
var eventHandlerRef = Object(useLiveRef["a" /* useLiveRef */])(htmlEventHandler);
return Object(external_React_["useCallback"])(function (event) {
var _eventHandlerRef$curr;
(_eventHandlerRef$curr = eventHandlerRef.current) === null || _eventHandlerRef$curr === void 0 ? void 0 : _eventHandlerRef$curr.call(eventHandlerRef, event);
if (event.defaultPrevented) return;
if (virtual && canProxyKeyboardEvent(event)) {
var currentElement = currentItem === null || currentItem === void 0 ? void 0 : currentItem.ref.current;
if (!fireKeyboardEvent(currentElement, event.type, event)) {
} // The event will be triggered on the composite item and then
// propagated up to this composite element again, so we can pretend
// that it wasn't called on this component in the first place.
if (event.currentTarget.contains(currentElement)) {
}, [virtual, currentItem]);
} // istanbul ignore next
function useActiveElementRef(elementRef) {
var activeElementRef = Object(external_React_["useRef"])(null);
Object(external_React_["useEffect"])(function () {
var document = Object(getDocument["a" /* getDocument */])(elementRef.current);
var onFocus = function onFocus(event) {
var target = event.target;
activeElementRef.current = target;
document.addEventListener("focus", onFocus, true);
document.removeEventListener("focus", onFocus, true);
function findFirstEnabledItemInTheLastRow(items) {
return Object(getCurrentId_5aa9849e["a" /* f */])(flatten(reverse(groupItems(items))));
function isItem(items, element) {
return items === null || items === void 0 ? void 0 : items.some(function (item) {
return !!element && item.ref.current === element;
function useScheduleUserFocus(currentItem) {
var currentItemRef = Object(useLiveRef["a" /* useLiveRef */])(currentItem);
var _React$useReducer = Object(external_React_["useReducer"])(function (n) {
scheduled = _React$useReducer[0],
schedule = _React$useReducer[1];
Object(external_React_["useEffect"])(function () {
var _currentItemRef$curre;
var currentElement = (_currentItemRef$curre = currentItemRef.current) === null || _currentItemRef$curre === void 0 ? void 0 : _currentItemRef$curre.ref.current;
if (scheduled && currentElement) {
Object(userFocus_e16425e3["c" /* u */])(currentElement);
var useComposite = Object(createHook["a" /* createHook */])({
compose: [Tabbable["a" /* useTabbable */]],
keys: _keys_6742f591["a" /* C */],
useOptions: function useOptions(options) {
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, options), {}, {
currentId: Object(getCurrentId_5aa9849e["b" /* g */])(options)
useProps: function useProps(options, _ref) {
htmlOnFocusCapture = _ref.onFocusCapture,
htmlOnFocus = _ref.onFocus,
htmlOnBlurCapture = _ref.onBlurCapture,
htmlOnKeyDown = _ref.onKeyDown,
htmlOnKeyDownCapture = _ref.onKeyDownCapture,
htmlOnKeyUpCapture = _ref.onKeyUpCapture,
htmlProps = Object(_rollupPluginBabelHelpers_1f0bf8c2["a" /* _ */])(_ref, ["ref", "onFocusCapture", "onFocus", "onBlurCapture", "onKeyDown", "onKeyDownCapture", "onKeyUpCapture"]);
var ref = Object(external_React_["useRef"])(null);
var currentItem = findEnabledItemById(options.items, options.currentId);
var previousElementRef = Object(external_React_["useRef"])(null);
var onFocusCaptureRef = Object(useLiveRef["a" /* useLiveRef */])(htmlOnFocusCapture);
var onFocusRef = Object(useLiveRef["a" /* useLiveRef */])(htmlOnFocus);
var onBlurCaptureRef = Object(useLiveRef["a" /* useLiveRef */])(htmlOnBlurCapture);
var onKeyDownRef = Object(useLiveRef["a" /* useLiveRef */])(htmlOnKeyDown);
var scheduleUserFocus = useScheduleUserFocus(currentItem); // IE 11 doesn't support event.relatedTarget, so we use the active element
var activeElementRef = Composite_isIE11 ? useActiveElementRef(ref) : undefined;
Object(external_React_["useEffect"])(function () {
var element = ref.current;
if (options.unstable_moves && !currentItem) {
false ? undefined : void 0; // If composite.move(null) has been called, the composite container
element === null || element === void 0 ? void 0 : element.focus();
}, [options.unstable_moves, currentItem]);
var onKeyDownCapture = useKeyboardEventProxy(options.unstable_virtual, currentItem, htmlOnKeyDownCapture);
var onKeyUpCapture = useKeyboardEventProxy(options.unstable_virtual, currentItem, htmlOnKeyUpCapture);
var onFocusCapture = Object(external_React_["useCallback"])(function (event) {
var _onFocusCaptureRef$cu;
(_onFocusCaptureRef$cu = onFocusCaptureRef.current) === null || _onFocusCaptureRef$cu === void 0 ? void 0 : _onFocusCaptureRef$cu.call(onFocusCaptureRef, event);
if (event.defaultPrevented) return;
if (!options.unstable_virtual) return; // IE11 doesn't support event.relatedTarget, so we use the active
var previousActiveElement = (activeElementRef === null || activeElementRef === void 0 ? void 0 : activeElementRef.current) || event.relatedTarget;
var previousActiveElementWasItem = isItem(options.items, previousActiveElement);
if (Object(isSelfTarget["a" /* isSelfTarget */])(event) && previousActiveElementWasItem) {
// Composite has been focused as a result of an item receiving focus.
// The composite item will move focus back to the composite
// container. In this case, we don't want to propagate this
// additional event nor call the onFocus handler passed to
// <Composite onFocus={...} />.
event.stopPropagation(); // We keep track of the previous active item element so we can
// manually fire a blur event on it later when the focus is moved to
// another item on the onBlurCapture event below.
previousElementRef.current = previousActiveElement;
}, [options.unstable_virtual, options.items]);
var onFocus = Object(external_React_["useCallback"])(function (event) {
(_onFocusRef$current = onFocusRef.current) === null || _onFocusRef$current === void 0 ? void 0 : _onFocusRef$current.call(onFocusRef, event);
if (event.defaultPrevented) return;
if (options.unstable_virtual) {
if (Object(isSelfTarget["a" /* isSelfTarget */])(event)) {
// This means that the composite element has been focused while the
// composite item has not. For example, by clicking on the
// composite element without touching any item, or by tabbing into
// the composite element. In this case, we want to trigger focus on
// the item, just like it would happen with roving tabindex.
// When it receives focus, the composite item will put focus back
// on the composite element, in which case hasItemWithFocus will be
} else if (Object(isSelfTarget["a" /* isSelfTarget */])(event)) {
var _options$setCurrentId;
// When the roving tabindex composite gets intentionally focused (for
// example, by clicking directly on it, and not on an item), we make
// sure to set the current id to null (which means the composite
(_options$setCurrentId = options.setCurrentId) === null || _options$setCurrentId === void 0 ? void 0 : _options$setCurrentId.call(options, null);
}, [options.unstable_virtual, options.setCurrentId]);
var onBlurCapture = Object(external_React_["useCallback"])(function (event) {
var _onBlurCaptureRef$cur;
(_onBlurCaptureRef$cur = onBlurCaptureRef.current) === null || _onBlurCaptureRef$cur === void 0 ? void 0 : _onBlurCaptureRef$cur.call(onBlurCaptureRef, event);
if (event.defaultPrevented) return;
if (!options.unstable_virtual) return; // When virtual is set to true, we move focus from the composite
// container (this component) to the composite item that is being
// selected. Then we move focus back to the composite container. This
// is so we can provide the same API as the roving tabindex method,
// which means people can attach onFocus/onBlur handlers on the
// CompositeItem component regardless of whether it's virtual or not.
// This sequence of blurring and focusing items and composite may be
// confusing, so we ignore intermediate focus and blurs by stopping its
// propagation and not calling the passed onBlur handler (htmlOnBlur).
var currentElement = (currentItem === null || currentItem === void 0 ? void 0 : currentItem.ref.current) || null;
var nextActiveElement = getNextActiveElementOnBlur(event);
var nextActiveElementIsItem = isItem(options.items, nextActiveElement);
if (Object(isSelfTarget["a" /* isSelfTarget */])(event) && nextActiveElementIsItem) {
// This is an intermediate blur event: blurring the composite
// container to focus an item (nextActiveElement).
if (nextActiveElement === currentElement) {
// The next active element will be the same as the current item in
// the state in two scenarios:
// - Moving focus with keyboard: the state is updated before the
// blur event is triggered, so here the current item is already
// pointing to the next active element.
// - Clicking on the current active item with a pointer: this
// will trigger blur on the composite element and then the next
// active element will be the same as the current item. Clicking on
// an item other than the current one doesn't end up here as the
// currentItem state will be updated only after it.
if (previousElementRef.current && previousElementRef.current !== nextActiveElement) {
// If there's a previous active item and it's not a click action,
// then we fire a blur event on it so it will work just like if
// it had DOM focus before (like when using roving tabindex).
fireBlurEvent(previousElementRef.current, event);
} else if (currentElement) {
// This will be true when the next active element is not the
// current element, but there's a current item. This will only
// happen when clicking with a pointer on a different item, when
// there's already an item selected, in which case currentElement
// is the item that is getting blurred, and nextActiveElement is
// the item that is being clicked.
fireBlurEvent(currentElement, event);
} // We want to ignore intermediate blur events, so we stop its
// propagation and return early so onFocus will not be called.