@ariakit/react
Version:
Toolkit for building accessible web apps with React
281 lines (245 loc) • 12.8 kB
JavaScript
;Object.defineProperty(exports, "__esModule", {value: true});
var _XM764FDRcjs = require('./XM764FDR.cjs');
var _5FQZLBJ7cjs = require('./5FQZLBJ7.cjs');
var _LZ6L3ECGcjs = require('./LZ6L3ECG.cjs');
// ../ariakit-react-components/dist/composite/composite-context.js
var _react = require('react');
var ctx = _LZ6L3ECGcjs.createStoreContext.call(void 0, [_XM764FDRcjs.CollectionContextProvider], [_XM764FDRcjs.CollectionScopedContextProvider]);
var useCompositeContext = ctx.useContext;
var useCompositeScopedContext = ctx.useScopedContext;
var useCompositeProviderContext = ctx.useProviderContext;
var CompositeContextProvider = ctx.ContextProvider;
var CompositeScopedContextProvider = ctx.ScopedContextProvider;
var CompositeItemContext = _react.createContext.call(void 0, void 0);
var CompositeRowContext = _react.createContext.call(void 0, void 0);
// ../ariakit-components/dist/composite/composite-store.js
var NULL_ITEM = { id: null };
function findFirstEnabledItem(items, excludeId) {
return items.find((item) => {
if (excludeId) return !item.disabled && item.id !== excludeId;
return !item.disabled;
});
}
function getEnabledItems(items, excludeId) {
return items.filter((item) => {
if (excludeId) return !item.disabled && item.id !== excludeId;
return !item.disabled;
});
}
function getItemsInRow(items, rowId) {
return items.filter((item) => item.rowId === rowId);
}
function findEnabledItemId({ items, fromIndex, step, rowId, excludeId }) {
for (let i = fromIndex; i >= 0 && i < items.length; i += step) {
const item = items[i];
if (!item) continue;
if (item.rowId !== rowId) continue;
if (item.disabled) continue;
if (excludeId != null && item.id === excludeId) continue;
return item.id;
}
}
function flipItems(items, activeId, shouldInsertNullItem = false) {
const index = items.findIndex((item) => item.id === activeId);
return [
...items.slice(index + 1),
...shouldInsertNullItem ? [NULL_ITEM] : [],
...items.slice(0, index)
];
}
function groupItemsByRows(items) {
const rows = [];
for (const item of items) {
const row = rows.find((currentRow) => {
var _a;
return ((_a = currentRow[0]) == null ? void 0 : _a.rowId) === item.rowId;
});
if (row) row.push(item);
else rows.push([item]);
}
return rows;
}
function getMaxRowLength(array) {
let maxLength = 0;
for (const { length } of array) if (length > maxLength) maxLength = length;
return maxLength;
}
function createEmptyItem(rowId) {
return {
id: "__EMPTY_ITEM__",
disabled: true,
rowId
};
}
function normalizeRows(rows, activeId, focusShift) {
const maxLength = getMaxRowLength(rows);
for (const row of rows) for (let i = 0; i < maxLength; i += 1) {
const item = row[i];
if (!item || focusShift && item.disabled) {
const previousItem = i === 0 && focusShift ? findFirstEnabledItem(row) : row[i - 1];
row[i] = previousItem && activeId !== previousItem.id && focusShift ? previousItem : createEmptyItem(previousItem == null ? void 0 : previousItem.rowId);
}
}
return rows;
}
function verticalizeItems(items) {
const rows = groupItemsByRows(items);
const maxLength = getMaxRowLength(rows);
const verticalized = [];
for (let i = 0; i < maxLength; i += 1) for (const row of rows) {
const item = row[i];
if (item) verticalized.push({
...item,
rowId: item.rowId ? `${i}` : void 0
});
}
return verticalized;
}
function createCompositeStore(props = {}) {
var _a, _b;
const syncState = (_a = props.store) == null ? void 0 : _a.getState();
const collection = _XM764FDRcjs.createCollectionStore.call(void 0, props);
const activeId = _LZ6L3ECGcjs.defaultValue.call(void 0, props.activeId, syncState == null ? void 0 : syncState.activeId, props.defaultActiveId);
const composite = _5FQZLBJ7cjs.createStore.call(void 0, {
...collection.getState(),
id: (_b = _LZ6L3ECGcjs.defaultValue.call(void 0, props.id, syncState == null ? void 0 : syncState.id)) != null ? _b : `id-${Math.random().toString(36).slice(2, 8)}`,
activeId,
baseElement: _LZ6L3ECGcjs.defaultValue.call(void 0, syncState == null ? void 0 : syncState.baseElement, null),
includesBaseElement: _LZ6L3ECGcjs.defaultValue.call(void 0, props.includesBaseElement, syncState == null ? void 0 : syncState.includesBaseElement, activeId === null),
moves: _LZ6L3ECGcjs.defaultValue.call(void 0, syncState == null ? void 0 : syncState.moves, 0),
orientation: _LZ6L3ECGcjs.defaultValue.call(void 0, props.orientation, syncState == null ? void 0 : syncState.orientation, "both"),
rtl: _LZ6L3ECGcjs.defaultValue.call(void 0, props.rtl, syncState == null ? void 0 : syncState.rtl, false),
virtualFocus: _LZ6L3ECGcjs.defaultValue.call(void 0, props.virtualFocus, syncState == null ? void 0 : syncState.virtualFocus, false),
focusLoop: _LZ6L3ECGcjs.defaultValue.call(void 0, props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, false),
focusWrap: _LZ6L3ECGcjs.defaultValue.call(void 0, props.focusWrap, syncState == null ? void 0 : syncState.focusWrap, false),
focusShift: _LZ6L3ECGcjs.defaultValue.call(void 0, props.focusShift, syncState == null ? void 0 : syncState.focusShift, false)
}, collection, props.store);
_5FQZLBJ7cjs.setup.call(void 0, composite, () => _5FQZLBJ7cjs.sync.call(void 0, composite, ["renderedItems", "activeId"], (state) => {
composite.setState("activeId", (activeId2) => {
var _a2;
if (activeId2 !== void 0) return activeId2;
return (_a2 = findFirstEnabledItem(state.renderedItems)) == null ? void 0 : _a2.id;
});
}));
const getNextId = (direction = "next", options = {}) => {
var _a2, _b2, _c, _d;
const defaultState = composite.getState();
const { skip = 0, activeId: activeId2 = defaultState.activeId, focusShift = defaultState.focusShift, focusLoop = defaultState.focusLoop, focusWrap = defaultState.focusWrap, includesBaseElement = defaultState.includesBaseElement, renderedItems = defaultState.renderedItems, rtl = defaultState.rtl } = options;
const isVerticalDirection = direction === "up" || direction === "down";
const isNextDirection = direction === "next" || direction === "down";
const canReverse = isNextDirection ? rtl && !isVerticalDirection : !rtl || isVerticalDirection;
const canShift = focusShift && !skip;
if (!skip && !focusWrap && !includesBaseElement && activeId2 != null) {
if (!isVerticalDirection ? true : !canShift && !renderedItems.some((item) => item.rowId != null)) {
const activeIndex2 = renderedItems.findIndex((item) => item.id === activeId2);
const activeItem2 = renderedItems[activeIndex2];
if (activeItem2) {
const step = canReverse ? -1 : 1;
const nextId = findEnabledItemId({
items: renderedItems,
fromIndex: activeIndex2 + step,
step,
rowId: activeItem2.rowId,
excludeId: activeId2
});
if (nextId !== void 0) return nextId;
if (!(focusLoop && (isVerticalDirection ? focusLoop !== "horizontal" : focusLoop !== "vertical"))) return void 0;
return findEnabledItemId({
items: renderedItems,
fromIndex: step === 1 ? 0 : renderedItems.length - 1,
step,
rowId: activeItem2.rowId,
excludeId: activeId2
});
}
}
}
let items = !isVerticalDirection ? renderedItems : _LZ6L3ECGcjs.flatten2DArray.call(void 0, normalizeRows(groupItemsByRows(renderedItems), activeId2, canShift));
items = canReverse ? _LZ6L3ECGcjs.reverseArray.call(void 0, items) : items;
items = isVerticalDirection ? verticalizeItems(items) : items;
if (activeId2 == null) return (_a2 = findFirstEnabledItem(items)) == null ? void 0 : _a2.id;
const activeItem = items.find((item) => item.id === activeId2);
if (!activeItem) return (_b2 = findFirstEnabledItem(items)) == null ? void 0 : _b2.id;
const isGrid = items.some((item) => item.rowId);
const activeIndex = items.indexOf(activeItem);
const nextItems = items.slice(activeIndex + 1);
const nextItemsInRow = getItemsInRow(nextItems, activeItem.rowId);
if (skip) {
const nextEnabledItemsInRow = getEnabledItems(nextItemsInRow, activeId2);
return (_c = nextEnabledItemsInRow.slice(skip)[0] || nextEnabledItemsInRow[nextEnabledItemsInRow.length - 1]) == null ? void 0 : _c.id;
}
const canLoop = focusLoop && (isVerticalDirection ? focusLoop !== "horizontal" : focusLoop !== "vertical");
const canWrap = isGrid && focusWrap && (isVerticalDirection ? focusWrap !== "horizontal" : focusWrap !== "vertical");
const hasNullItem = isNextDirection ? (!isGrid || isVerticalDirection) && canLoop && includesBaseElement : isVerticalDirection ? includesBaseElement : false;
if (canLoop) return (_d = findFirstEnabledItem(flipItems(canWrap && !hasNullItem ? items : getItemsInRow(items, activeItem.rowId), activeId2, hasNullItem), activeId2)) == null ? void 0 : _d.id;
if (canWrap) {
const nextItem2 = findFirstEnabledItem(hasNullItem ? nextItemsInRow : nextItems, activeId2);
return hasNullItem ? (nextItem2 == null ? void 0 : nextItem2.id) || null : nextItem2 == null ? void 0 : nextItem2.id;
}
const nextItem = findFirstEnabledItem(nextItemsInRow, activeId2);
if (!nextItem && hasNullItem) return null;
return nextItem == null ? void 0 : nextItem.id;
};
const getNextIdFromOptions = (direction, options) => {
if (typeof options === "number") return getNextId(direction, { skip: options });
return getNextId(direction, options);
};
return {
...collection,
...composite,
setBaseElement: (element) => composite.setState("baseElement", element),
setActiveId: (id) => composite.setState("activeId", id),
move: (id) => {
if (id === void 0) return;
composite.setState("activeId", id);
composite.setState("moves", (moves) => moves + 1);
},
first: () => {
var _a2;
return (_a2 = findFirstEnabledItem(composite.getState().renderedItems)) == null ? void 0 : _a2.id;
},
last: () => {
var _a2;
return (_a2 = findFirstEnabledItem(_LZ6L3ECGcjs.reverseArray.call(void 0, composite.getState().renderedItems))) == null ? void 0 : _a2.id;
},
next: (options) => getNextIdFromOptions("next", options),
previous: (options) => getNextIdFromOptions("previous", options),
down: (options) => getNextIdFromOptions("down", options),
up: (options) => getNextIdFromOptions("up", options)
};
}
// ../ariakit-react-components/dist/composite/utils.js
var flipItems2 = flipItems;
var findFirstEnabledItem2 = findFirstEnabledItem;
var groupItemsByRows2 = groupItemsByRows;
function getEnabledItem(store, id) {
if (!id) return null;
return store.item(id) || null;
}
function selectTextField(element, collapseToEnd = false) {
if (_LZ6L3ECGcjs.isTextField.call(void 0, element)) element.setSelectionRange(collapseToEnd ? element.value.length : 0, element.value.length);
else if (element.isContentEditable) {
const selection = _LZ6L3ECGcjs.getDocument.call(void 0, element).getSelection();
selection == null ? void 0 : selection.selectAllChildren(element);
if (collapseToEnd) selection == null ? void 0 : selection.collapseToEnd();
}
}
var FOCUS_SILENTLY = /* @__PURE__ */ Symbol("FOCUS_SILENTLY");
function focusSilently(element) {
element[FOCUS_SILENTLY] = true;
element.focus({ preventScroll: true });
}
function silentlyFocused(element) {
const isSilentlyFocused = element[FOCUS_SILENTLY];
delete element[FOCUS_SILENTLY];
return isSilentlyFocused;
}
function isItem(store, element, exclude) {
if (!element) return false;
if (element === exclude) return false;
const item = store.item(element.id);
if (!item) return false;
if (exclude && item.element === exclude) return false;
return true;
}
exports.useCompositeContext = useCompositeContext; exports.useCompositeScopedContext = useCompositeScopedContext; exports.useCompositeProviderContext = useCompositeProviderContext; exports.CompositeContextProvider = CompositeContextProvider; exports.CompositeScopedContextProvider = CompositeScopedContextProvider; exports.CompositeItemContext = CompositeItemContext; exports.CompositeRowContext = CompositeRowContext; exports.createCompositeStore = createCompositeStore; exports.flipItems = flipItems2; exports.findFirstEnabledItem = findFirstEnabledItem2; exports.groupItemsByRows = groupItemsByRows2; exports.getEnabledItem = getEnabledItem; exports.selectTextField = selectTextField; exports.focusSilently = focusSilently; exports.silentlyFocused = silentlyFocused; exports.isItem = isItem;