@ariakit/react
Version:
Toolkit for building accessible web apps with React
504 lines (433 loc) • 18 kB
JavaScript
;Object.defineProperty(exports, "__esModule", {value: true});
var _WSDL6NSYcjs = require('./WSDL6NSY.cjs');
var _MPRQURFLcjs = require('./MPRQURFL.cjs');
var _HEDXFQCWcjs = require('./HEDXFQCW.cjs');
var _Y4UFQFATcjs = require('./Y4UFQFAT.cjs');
var _FHQLDZSWcjs = require('./FHQLDZSW.cjs');
var _SBAK37L7cjs = require('./SBAK37L7.cjs');
var _XM764FDRcjs = require('./XM764FDR.cjs');
var _ITEGEFBHcjs = require('./ITEGEFBH.cjs');
var _5FQZLBJ7cjs = require('./5FQZLBJ7.cjs');
var _MTBSKKM4cjs = require('./MTBSKKM4.cjs');
var _LZ6L3ECGcjs = require('./LZ6L3ECG.cjs');
// ../ariakit-react-components/dist/tab/tab-context.js
var ctx = _LZ6L3ECGcjs.createStoreContext.call(void 0, [_FHQLDZSWcjs.CompositeContextProvider], [_FHQLDZSWcjs.CompositeScopedContextProvider]);
var useTabContext = ctx.useContext;
var useTabScopedContext = ctx.useScopedContext;
var useTabProviderContext = ctx.useProviderContext;
var TabContextProvider = ctx.ContextProvider;
var TabScopedContextProvider = ctx.ScopedContextProvider;
// ../ariakit-react-components/dist/tab/tab.js
var _react = require('react');
var _jsxruntime = require('react/jsx-runtime');
var TagName = "button";
var useTab = _LZ6L3ECGcjs.createHook.call(void 0, function useTab2({ store, getItem: getItemProp, ...props }) {
var _a;
const context = useTabScopedContext();
store = store || context;
_LZ6L3ECGcjs.invariant.call(void 0, store, process.env.NODE_ENV !== "production" && "Tab must be wrapped in a TabList component.");
const defaultId = _LZ6L3ECGcjs.useId.call(void 0, );
const id = props.id || defaultId;
const dimmed = _LZ6L3ECGcjs.disabledFromProps.call(void 0, props);
const getItem = _react.useCallback.call(void 0, (item) => {
const nextItem = {
...item,
dimmed
};
if (getItemProp) return getItemProp(nextItem);
return nextItem;
}, [dimmed, getItemProp]);
const onClickProp = props.onClick;
const onClick = _LZ6L3ECGcjs.useEvent.call(void 0, (event) => {
onClickProp == null ? void 0 : onClickProp(event);
if (event.defaultPrevented) return;
store == null ? void 0 : store.setSelectedId(id);
});
const panelId = _5FQZLBJ7cjs.useStoreState.call(void 0, store.panels, () => {
var _a2;
return (_a2 = store.panel(id)) == null ? void 0 : _a2.id;
});
const shouldRegisterItem = defaultId ? props.shouldRegisterItem : false;
const isActive = _5FQZLBJ7cjs.useStoreState.call(void 0, store, (state) => !!id && state.activeId === id);
const selected = _5FQZLBJ7cjs.useStoreState.call(void 0, store, (state) => !!id && state.selectedId === id);
const hasActiveItem = _5FQZLBJ7cjs.useStoreState.call(void 0, store, (state) => !!store.item(state.activeId));
const canRegisterComposedItem = isActive || selected && !hasActiveItem;
const accessibleWhenDisabled = selected || ((_a = props.accessibleWhenDisabled) != null ? _a : true);
if (_5FQZLBJ7cjs.useStoreState.call(void 0, store.combobox || store.composite, "virtualFocus")) props = {
...props,
tabIndex: -1
};
props = {
role: "tab",
"aria-selected": selected,
"aria-controls": panelId || void 0,
...props,
id,
onClick
};
if (store.composite) {
const defaultProps = {
id,
accessibleWhenDisabled,
store: store.composite,
shouldRegisterItem: canRegisterComposedItem && shouldRegisterItem,
rowId: props.rowId,
render: props.render
};
props = {
...props,
render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Y4UFQFATcjs.CompositeItem, {
...defaultProps,
render: store.combobox && store.composite !== store.combobox ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Y4UFQFATcjs.CompositeItem, {
...defaultProps,
store: store.combobox
}) : defaultProps.render
})
};
}
props = _Y4UFQFATcjs.useCompositeItem.call(void 0, {
store,
...props,
accessibleWhenDisabled,
getItem,
shouldRegisterItem
});
return props;
});
var Tab = _LZ6L3ECGcjs.memo.call(void 0, _LZ6L3ECGcjs.forwardRef.call(void 0, function Tab2(props) {
return _LZ6L3ECGcjs.createElement.call(void 0, TagName, useTab(props));
}));
// ../ariakit-react-components/dist/tab/tab-list.js
var TagName2 = "div";
var useTabList = _LZ6L3ECGcjs.createHook.call(void 0, function useTabList2({ store, ...props }) {
const context = useTabProviderContext();
store = store || context;
_LZ6L3ECGcjs.invariant.call(void 0, store, process.env.NODE_ENV !== "production" && "TabList must receive a `store` prop or be wrapped in a TabProvider component.");
const orientation = _5FQZLBJ7cjs.useStoreState.call(void 0, store, (state) => state.orientation === "both" ? void 0 : state.orientation);
props = _LZ6L3ECGcjs.useWrapElement.call(void 0, props, (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabScopedContextProvider, {
value: store,
children: element
}), [store]);
if (store.composite) props = {
focusable: false,
...props
};
props = {
role: "tablist",
"aria-orientation": orientation,
...props
};
props = _HEDXFQCWcjs.useComposite.call(void 0, {
store,
...props
});
return props;
});
var TabList = _LZ6L3ECGcjs.forwardRef.call(void 0, function TabList2(props) {
return _LZ6L3ECGcjs.createElement.call(void 0, TagName2, useTabList(props));
});
// ../ariakit-react-components/dist/tab/tab-panel.js
var TagName3 = "div";
var useTabPanel = _LZ6L3ECGcjs.createHook.call(void 0, function useTabPanel2({ store, unmountOnHide, tabId: tabIdProp, getItem: getItemProp, scrollRestoration, scrollElement, ...props }) {
const context = useTabProviderContext();
store = store || context;
_LZ6L3ECGcjs.invariant.call(void 0, store, process.env.NODE_ENV !== "production" && "TabPanel must receive a `store` prop or be wrapped in a TabProvider component.");
const ref = _react.useRef.call(void 0, null);
const id = _LZ6L3ECGcjs.useId.call(void 0, props.id);
const tabId = _5FQZLBJ7cjs.useStoreState.call(void 0, store.panels, () => {
var _a;
return tabIdProp || ((_a = store == null ? void 0 : store.panels.item(id)) == null ? void 0 : _a.tabId);
});
const disclosure = _ITEGEFBHcjs.useDisclosureStore.call(void 0, { open: _5FQZLBJ7cjs.useStoreState.call(void 0, store, (state) => !!tabId && state.selectedId === tabId) });
const mounted = _5FQZLBJ7cjs.useStoreState.call(void 0, disclosure, "mounted");
const scrollPositionRef = _react.useRef.call(void 0, /* @__PURE__ */ new Map());
const getScrollElement = _LZ6L3ECGcjs.useEvent.call(void 0, () => {
const panelElement = ref.current;
if (!panelElement) return null;
if (!scrollElement) return panelElement;
if (typeof scrollElement === "function") return scrollElement(panelElement);
if ("current" in scrollElement) return scrollElement.current;
return scrollElement;
});
_react.useEffect.call(void 0, () => {
var _a, _b;
if (!scrollRestoration) return;
if (!mounted) return;
const element = getScrollElement();
if (!element) return;
if (scrollRestoration === "reset") {
element.scroll(0, 0);
return;
}
if (!tabId) return;
const position = scrollPositionRef.current.get(tabId);
element.scroll((_a = position == null ? void 0 : position.x) != null ? _a : 0, (_b = position == null ? void 0 : position.y) != null ? _b : 0);
const onScroll = () => {
scrollPositionRef.current.set(tabId, {
x: element.scrollLeft,
y: element.scrollTop
});
};
element.addEventListener("scroll", onScroll);
return () => {
element.removeEventListener("scroll", onScroll);
};
}, [
scrollRestoration,
mounted,
tabId,
getScrollElement
]);
const [hasTabbableChildren, setHasTabbableChildren] = _react.useState.call(void 0, false);
_LZ6L3ECGcjs.useSafeLayoutEffect.call(void 0, () => {
if (!mounted) return;
const element = ref.current;
if (!element) return;
setHasTabbableChildren(!!_LZ6L3ECGcjs.getFirstTabbableIn.call(void 0, element));
}, [mounted, tabId]);
const getItem = _react.useCallback.call(void 0, (item) => {
const nextItem = {
...item,
id: id || item.id,
tabId: tabIdProp
};
if (getItemProp) return getItemProp(nextItem);
return nextItem;
}, [
id,
tabIdProp,
getItemProp
]);
const onKeyDownProp = props.onKeyDown;
const onKeyDown = _LZ6L3ECGcjs.useEvent.call(void 0, (event) => {
onKeyDownProp == null ? void 0 : onKeyDownProp(event);
if (event.defaultPrevented) return;
if (!(store == null ? void 0 : store.composite)) return;
const action = {
ArrowLeft: store.previous,
ArrowRight: store.next,
Home: store.first,
End: store.last
}[event.key];
if (!action) return;
const { selectedId } = store.getState();
const nextId = action({ activeId: selectedId });
if (!nextId) return;
event.preventDefault();
store.move(nextId);
});
props = _LZ6L3ECGcjs.useWrapElement.call(void 0, props, (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabScopedContextProvider, {
value: store,
children: element
}), [store]);
props = {
role: "tabpanel",
"aria-labelledby": props["aria-label"] != null ? void 0 : tabId || void 0,
...props,
id,
children: unmountOnHide && !mounted ? null : props.children,
ref: _LZ6L3ECGcjs.useMergeRefs.call(void 0, ref, props.ref),
onKeyDown
};
props = _MTBSKKM4cjs.useFocusable.call(void 0, {
focusable: !store.composite && !hasTabbableChildren,
...props
});
props = _ITEGEFBHcjs.useDisclosureContent.call(void 0, {
store: disclosure,
...props
});
props = _SBAK37L7cjs.useCollectionItem.call(void 0, {
store: store.panels,
...props,
getItem
});
return props;
});
var TabPanel = _LZ6L3ECGcjs.forwardRef.call(void 0, function TabPanel2(props) {
return _LZ6L3ECGcjs.createElement.call(void 0, TagName3, useTabPanel(props));
});
// ../ariakit-react-components/dist/tab/tab-store.js
// ../ariakit-components/dist/tab/tab-store.js
function getFocusedTab(items) {
var _a, _b;
const activeElement = (_b = (_a = items[0]) == null ? void 0 : _a.element) == null ? void 0 : _b.ownerDocument.activeElement;
if (!activeElement) return;
return items.find((item) => item.element === activeElement);
}
function getTabById(items, id) {
if (id == null) return;
return items.find((item) => item.id === id);
}
function isEnabledTab(item) {
if (!item) return false;
if (item.disabled) return false;
if (item.dimmed) return false;
return true;
}
function createPanelsStore() {
const panels = _XM764FDRcjs.createCollectionStore.call(void 0, );
const panelsByTabId = /* @__PURE__ */ new Map();
_5FQZLBJ7cjs.sync.call(void 0, panels, ["items"], (state) => {
panelsByTabId.clear();
for (const panel of state.items) {
const { tabId } = panel;
if (tabId == null) continue;
if (panelsByTabId.has(tabId)) continue;
panelsByTabId.set(tabId, panel);
}
});
return {
panels,
panel: (tabId) => {
if (tabId == null) return null;
return panelsByTabId.get(tabId) || null;
}
};
}
function createTabStore({ composite: parentComposite, combobox, ...props } = {}) {
const independentKeys = [
"items",
"renderedItems",
"moves",
"orientation",
"virtualFocus",
"includesBaseElement",
"baseElement",
"focusLoop",
"focusShift",
"focusWrap"
];
const store = _5FQZLBJ7cjs.mergeStore.call(void 0, props.store, _5FQZLBJ7cjs.omit.call(void 0, parentComposite, independentKeys), _5FQZLBJ7cjs.omit.call(void 0, combobox, independentKeys));
const syncState = store == null ? void 0 : store.getState();
const composite = _FHQLDZSWcjs.createCompositeStore.call(void 0, {
...props,
store,
includesBaseElement: _LZ6L3ECGcjs.defaultValue.call(void 0, props.includesBaseElement, syncState == null ? void 0 : syncState.includesBaseElement, false),
orientation: _LZ6L3ECGcjs.defaultValue.call(void 0, props.orientation, syncState == null ? void 0 : syncState.orientation, "horizontal"),
focusLoop: _LZ6L3ECGcjs.defaultValue.call(void 0, props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true)
});
const { panels, panel } = createPanelsStore();
const tab = _5FQZLBJ7cjs.createStore.call(void 0, {
...composite.getState(),
selectedId: _LZ6L3ECGcjs.defaultValue.call(void 0, props.selectedId, syncState == null ? void 0 : syncState.selectedId, props.defaultSelectedId),
selectOnMove: _LZ6L3ECGcjs.defaultValue.call(void 0, props.selectOnMove, syncState == null ? void 0 : syncState.selectOnMove, true)
}, composite, store);
_5FQZLBJ7cjs.setup.call(void 0, tab, () => _5FQZLBJ7cjs.sync.call(void 0, tab, ["moves"], () => {
const { activeId, selectOnMove } = tab.getState();
if (!selectOnMove) return;
if (!activeId) return;
const tabItem = composite.item(activeId);
if (!isEnabledTab(tabItem)) return;
tab.setState("selectedId", tabItem.id);
}));
let pendingRestore = false;
let restoredSelectedId;
_5FQZLBJ7cjs.setup.call(void 0, tab, () => {
pendingRestore = false;
return _5FQZLBJ7cjs.batch.call(void 0, tab, ["selectedId"], (state, prev) => {
if (pendingRestore) {
pendingRestore = false;
if (state.selectedId === restoredSelectedId) return;
}
if (parentComposite && state.selectedId === prev.selectedId) return;
const { activeId, renderedItems } = tab.getState();
const focusedTab = getFocusedTab(renderedItems);
const selectedTab = getTabById(renderedItems, state.selectedId);
if (focusedTab && isEnabledTab(selectedTab) && activeId !== selectedTab.id) {
composite.move(selectedTab.id);
return;
}
tab.setState("activeId", state.selectedId);
});
});
_5FQZLBJ7cjs.setup.call(void 0, tab, () => _5FQZLBJ7cjs.sync.call(void 0, tab, ["selectedId", "renderedItems"], (state) => {
if (state.selectedId !== void 0) return;
const { activeId, renderedItems } = tab.getState();
const tabItem = composite.item(activeId);
if (isEnabledTab(tabItem)) tab.setState("selectedId", tabItem.id);
else {
const tabItem2 = renderedItems.find(isEnabledTab);
tab.setState("selectedId", tabItem2 == null ? void 0 : tabItem2.id);
}
}));
_5FQZLBJ7cjs.setup.call(void 0, tab, () => _5FQZLBJ7cjs.sync.call(void 0, tab, ["renderedItems"], (state) => {
const tabs = state.renderedItems;
if (!tabs.length) return;
return _5FQZLBJ7cjs.sync.call(void 0, panels, ["renderedItems"], (state2) => {
const items = state2.renderedItems;
if (!items.some((panel2) => !panel2.tabId)) return;
items.forEach((panel2, i) => {
if (panel2.tabId) return;
const tabItem = tabs[i];
if (!tabItem) return;
panels.renderItem({
...panel2,
tabId: tabItem.id
});
});
});
}));
let selectedIdFromSelectedValue = null;
_5FQZLBJ7cjs.setup.call(void 0, tab, () => {
const backupSelectedId = () => {
selectedIdFromSelectedValue = tab.getState().selectedId;
};
const restoreSelectedId = () => {
const { selectedId } = tab.getState();
if (selectedId === selectedIdFromSelectedValue) return;
pendingRestore = true;
restoredSelectedId = selectedIdFromSelectedValue;
tab.setState("selectedId", selectedIdFromSelectedValue);
};
if (parentComposite && "setSelectElement" in parentComposite) return _LZ6L3ECGcjs.chain.call(void 0, _5FQZLBJ7cjs.sync.call(void 0, parentComposite, ["value"], backupSelectedId), _5FQZLBJ7cjs.sync.call(void 0, parentComposite, ["mounted"], restoreSelectedId));
if (!combobox) return;
return _LZ6L3ECGcjs.chain.call(void 0, _5FQZLBJ7cjs.sync.call(void 0, combobox, ["selectedValue"], backupSelectedId), _5FQZLBJ7cjs.sync.call(void 0, combobox, ["mounted"], restoreSelectedId));
});
return {
...composite,
...tab,
panels,
panel,
setSelectedId: (id) => tab.setState("selectedId", id),
select: (id) => {
tab.setState("selectedId", id);
composite.move(id);
}
};
}
// ../ariakit-react-components/dist/tab/tab-store.js
function useTabStoreProps(store, update, props) {
_LZ6L3ECGcjs.useUpdateEffect.call(void 0, update, [props.composite, props.combobox]);
store = _HEDXFQCWcjs.useCompositeStoreProps.call(void 0, store, update, props);
_5FQZLBJ7cjs.useStoreProps.call(void 0, store, props, "selectedId", "setSelectedId");
_5FQZLBJ7cjs.useStoreProps.call(void 0, store, props, "selectOnMove");
const [panels, updatePanels] = _5FQZLBJ7cjs.useStore.call(void 0, () => store.panels, {});
_LZ6L3ECGcjs.useUpdateEffect.call(void 0, updatePanels, [store, updatePanels]);
return Object.assign(_react.useMemo.call(void 0, () => ({
...store,
panels
}), [store, panels]), {
composite: props.composite,
combobox: props.combobox
});
}
function useTabStore(props = {}) {
const combobox = _MPRQURFLcjs.useComboboxContext.call(void 0, );
const composite = _WSDL6NSYcjs.useSelectContext.call(void 0, ) || combobox;
props = {
...props,
composite: props.composite !== void 0 ? props.composite : composite,
combobox: props.combobox !== void 0 ? props.combobox : combobox
};
const [store, update] = _5FQZLBJ7cjs.useStore.call(void 0, createTabStore, props);
return useTabStoreProps(store, update, props);
}
// ../ariakit-react-components/dist/tab/tab-provider.js
function TabProvider(props = {}) {
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabContextProvider, {
value: useTabStore(props),
children: props.children
});
}
exports.useTabContext = useTabContext; exports.Tab = Tab; exports.TabList = TabList; exports.TabPanel = TabPanel; exports.useTabStore = useTabStore; exports.TabProvider = TabProvider;