var nextItems = items.filter(function (item) {
}); // The item isn't registered, so do nothing
if (nextItems.length === items.length) {
} // Filters out the item that is being removed from the pastIds list
var nextPastIds = pastIds.filter(function (pastId) {
var _nextState = Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
}); // If the current item is the item that is being removed, focus pastId
if (currentId && currentId === _id2) {
var nextId = includesBaseElement ? null : Object(getCurrentId_5aa9849e["b" /* g */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, _nextState), {}, {
currentId: nextPastIds[0]
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, _nextState), {}, {
var _id3 = action.id; // move() does nothing
if (_id3 === undefined) {
} // Removes the current item and the item that is receiving focus from the
var filteredPastIds = pastIds.filter(function (pastId) {
return pastId !== currentId && pastId !== _id3;
}); // If there's a currentId, add it to the pastIds list so it can be focused
// if the new item gets removed or disabled
var _nextPastIds = currentId ? [currentId].concat(filteredPastIds) : filteredPastIds;
var _nextState2 = Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
}); // move(null) will focus the composite element itself, not an item
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, _nextState2), {}, {
unstable_moves: moves + 1,
currentId: Object(getCurrentId_5aa9849e["b" /* g */])(_nextState2, _id3)
var _item2 = findEnabledItemById(items, _id3);
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, _nextState2), {}, {
unstable_moves: _item2 ? moves + 1 : moves,
currentId: Object(getCurrentId_5aa9849e["b" /* g */])(_nextState2, _item2 === null || _item2 === void 0 ? void 0 : _item2.id)
// If there's no item focused, we just move the first one
return CompositeState_reducer(state, Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, action), {}, {
} // RTL doesn't make sense on vertical navigation
var isHorizontal = orientation !== "vertical";
var isRTL = rtl && isHorizontal;
var allItems = isRTL ? reverse(items) : items;
var currentItem = allItems.find(function (item) {
return item.id === currentId;
}); // If there's no item focused, we just move the first one
return CompositeState_reducer(state, Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, action), {}, {
var isGrid = !!currentItem.groupId;
var currentIndex = allItems.indexOf(currentItem);
var _nextItems = allItems.slice(currentIndex + 1);
var nextItemsInGroup = getItemsInGroup(_nextItems, currentItem.groupId); // Home, End
// We reverse so we can get the last enabled item in the group. If it's
// RTL, nextItems and nextItemsInGroup are already reversed and don't
// have the items before the current one anymore. So we have to get
// items in group again with allItems.
var _nextItem2 = Object(getCurrentId_5aa9849e["a" /* f */])(isRTL ? getItemsInGroup(allItems, currentItem.groupId) : reverse(nextItemsInGroup));
return CompositeState_reducer(state, Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, action), {}, {
id: _nextItem2 === null || _nextItem2 === void 0 ? void 0 : _nextItem2.id
var oppositeOrientation = getOppositeOrientation( // If it's a grid and orientation is not set, it's a next/previous
// call, which is inherently horizontal. up/down will call next with
// orientation set to vertical by default (see below on up/down cases).
isGrid ? orientation || "horizontal" : orientation);
var canLoop = loop && loop !== oppositeOrientation;
var canWrap = isGrid && wrap && wrap !== oppositeOrientation;
var hasNullItem = // `previous` and `up` will set action.hasNullItem, but when calling
// next directly, hasNullItem will only be true if it's not a grid and
// loop is set to true, which means that pressing right or down keys on
// grids will never focus the composite element. On one-dimensional
// composites that don't loop, pressing right or down keys also doesn't
// focus the composite element.
action.hasNullItem || !isGrid && canLoop && includesBaseElement;
var loopItems = canWrap && !hasNullItem ? allItems : getItemsInGroup(allItems, currentItem.groupId); // Turns [0, 1, current, 3, 4] into [3, 4, 0, 1]
var sortedItems = placeItemsAfter(loopItems, currentId, hasNullItem);
var _nextItem3 = Object(getCurrentId_5aa9849e["a" /* f */])(sortedItems, currentId);
return CompositeState_reducer(state, Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, action), {}, {
id: _nextItem3 === null || _nextItem3 === void 0 ? void 0 : _nextItem3.id
var _nextItem4 = Object(getCurrentId_5aa9849e["a" /* f */])( // We can use nextItems, which contains all the next items, including
// items from other groups, to wrap between groups. However, if there
// is a null item (the composite element), we'll only use the next
// items in the group. So moving next from the last item will focus
// the composite element (null). On grid composites, horizontal
// navigation never focuses the composite element, only vertical.
hasNullItem ? nextItemsInGroup : _nextItems, currentId);
var _nextId = hasNullItem ? (_nextItem4 === null || _nextItem4 === void 0 ? void 0 : _nextItem4.id) || null : _nextItem4 === null || _nextItem4 === void 0 ? void 0 : _nextItem4.id;
return CompositeState_reducer(state, Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, action), {}, {
var _nextItem = Object(getCurrentId_5aa9849e["a" /* f */])(nextItemsInGroup, currentId);
if (!_nextItem && hasNullItem) {
return CompositeState_reducer(state, Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, action), {}, {
return CompositeState_reducer(state, Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, action), {}, {
id: _nextItem === null || _nextItem === void 0 ? void 0 : _nextItem.id
// If currentId is initially set to null, the composite element will be
// focusable while navigating with arrow keys. But, if it's a grid, we
// don't want to focus the composite element with horizontal navigation.
var _isGrid = !!groups.length;
var _hasNullItem = !_isGrid && includesBaseElement;
var _nextState3 = CompositeState_reducer(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
}), Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, action), {}, {
hasNullItem: _hasNullItem
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, _nextState3), {}, {
var shouldShift = shift && !action.allTheWay; // First, we make sure groups have the same number of items by filling it
// with disabled fake items. Then, we reorganize the items list so
// [1-1, 1-2, 2-1, 2-2] becomes [1-1, 2-1, 1-2, 2-2].
var verticalItems = verticalizeItems(flatten(fillGroups(groupItems(items), currentId, shouldShift)));
var _canLoop = loop && loop !== "horizontal"; // Pressing down arrow key will only focus the composite element if loop
var _hasNullItem2 = _canLoop && includesBaseElement;
var _nextState4 = CompositeState_reducer(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
}), Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, action), {}, {
hasNullItem: _hasNullItem2
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, _nextState4), {}, {
orientation: orientation,
var _shouldShift = shift && !action.allTheWay;
var _verticalItems = verticalizeItems(reverse(flatten(fillGroups(groupItems(items), currentId, _shouldShift)))); // If currentId is initially set to null, we'll always focus the
// composite element when the up arrow key is pressed in the first row.
var _hasNullItem3 = includesBaseElement;
var _nextState5 = CompositeState_reducer(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
}), Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, action), {}, {
hasNullItem: _hasNullItem3
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, _nextState5), {}, {
orientation: orientation,
var firstItem = Object(getCurrentId_5aa9849e["a" /* f */])(items);
return CompositeState_reducer(state, Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, action), {}, {
id: firstItem === null || firstItem === void 0 ? void 0 : firstItem.id
var _nextState6 = CompositeState_reducer(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
}), Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, action), {}, {
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, _nextState6), {}, {
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
items: sortBasedOnDOMPosition(items),
groups: sortBasedOnDOMPosition(groups)
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
unstable_virtual: applyState(action.virtual, virtual)
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
rtl: applyState(action.rtl, rtl)
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
orientation: applyState(action.orientation, orientation)
var nextCurrentId = Object(getCurrentId_5aa9849e["b" /* g */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
currentId: applyState(action.currentId, currentId)
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
currentId: nextCurrentId,
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
loop: applyState(action.loop, loop)
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
wrap: applyState(action.wrap, wrap)
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
shift: applyState(action.shift, shift)
case "setIncludesBaseElement":
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
unstable_includesBaseElement: applyState(action.includesBaseElement, includesBaseElement)
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
unstable_virtual: initialVirtual,
orientation: initialOrientation,
currentId: Object(getCurrentId_5aa9849e["b" /* g */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
currentId: initialCurrentId
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, state), {}, {
return Object(external_React_["useCallback"])(fn, []);
function useIsUnmountedRef() {
var isUnmountedRef = Object(external_React_["useRef"])(false);
Object(useIsomorphicEffect["a" /* useIsomorphicEffect */])(function () {
isUnmountedRef.current = true;
function useCompositeState(initialState) {
if (initialState === void 0) {
var _useSealedState = useSealedState(initialState),
_useSealedState$unsta = _useSealedState.unstable_virtual,
virtual = _useSealedState$unsta === void 0 ? false : _useSealedState$unsta,
_useSealedState$rtl = _useSealedState.rtl,
rtl = _useSealedState$rtl === void 0 ? false : _useSealedState$rtl,
orientation = _useSealedState.orientation,
currentId = _useSealedState.currentId,
_useSealedState$loop = _useSealedState.loop,
loop = _useSealedState$loop === void 0 ? false : _useSealedState$loop,
_useSealedState$wrap = _useSealedState.wrap,
wrap = _useSealedState$wrap === void 0 ? false : _useSealedState$wrap,
_useSealedState$shift = _useSealedState.shift,
shift = _useSealedState$shift === void 0 ? false : _useSealedState$shift,
unstable_includesBaseElement = _useSealedState.unstable_includesBaseElement,
sealed = Object(_rollupPluginBabelHelpers_1f0bf8c2["a" /* _ */])(_useSealedState, ["unstable_virtual", "rtl", "orientation", "currentId", "loop", "wrap", "shift", "unstable_includesBaseElement"]);
var idState = unstable_useIdState(sealed);
var _React$useReducer = Object(external_React_["useReducer"])(CompositeState_reducer, {
unstable_virtual: virtual,
orientation: orientation,
unstable_includesBaseElement: unstable_includesBaseElement != null ? unstable_includesBaseElement : currentId === null,
initialOrientation: orientation,
initialCurrentId: currentId,
_React$useReducer$ = _React$useReducer[0],
pastIds = _React$useReducer$.pastIds,
initialVirtual = _React$useReducer$.initialVirtual,
initialRTL = _React$useReducer$.initialRTL,
initialOrientation = _React$useReducer$.initialOrientation,
initialCurrentId = _React$useReducer$.initialCurrentId,
initialLoop = _React$useReducer$.initialLoop,
initialWrap = _React$useReducer$.initialWrap,
initialShift = _React$useReducer$.initialShift,
hasSetCurrentId = _React$useReducer$.hasSetCurrentId,
state = Object(_rollupPluginBabelHelpers_1f0bf8c2["a" /* _ */])(_React$useReducer$, ["pastIds", "initialVirtual", "initialRTL", "initialOrientation", "initialCurrentId", "initialLoop", "initialWrap", "initialShift", "hasSetCurrentId"]),
dispatch = _React$useReducer[1];
var _React$useState = Object(external_React_["useState"])(false),
hasActiveWidget = _React$useState[0],
setHasActiveWidget = _React$useState[1]; // register/unregister may be called when this component is unmounted. We
// store the unmounted state here so we don't update the state if it's true.
// This only happens in a very specific situation.
// See https://github.com/reakit/reakit/issues/650
var isUnmountedRef = useIsUnmountedRef();
var setItems = Object(external_React_["useCallback"])(function (items) {
useSortBasedOnDOMPosition(state.items, setItems);
return Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])(Object(_rollupPluginBabelHelpers_1f0bf8c2["b" /* a */])({}, idState), state), {}, {
unstable_hasActiveWidget: hasActiveWidget,
unstable_setHasActiveWidget: setHasActiveWidget,
registerItem: useAction(function (item) {
if (isUnmountedRef.current) return;
unregisterItem: useAction(function (id) {
if (isUnmountedRef.current) return;
registerGroup: useAction(function (group) {
if (isUnmountedRef.current) return;
unregisterGroup: useAction(function (id) {
if (isUnmountedRef.current) return;
move: useAction(function (id) {
next: useAction(function (allTheWay) {
previous: useAction(function (allTheWay) {
up: useAction(function (allTheWay) {
down: useAction(function (allTheWay) {