UNPKG

@ariakit/react-core

Version:

Ariakit React core

140 lines (117 loc) 4.72 kB
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); var _TOESUYYHcjs = require('../__chunks/TOESUYYH.cjs'); var _ZVWIHFYJcjs = require('../__chunks/ZVWIHFYJ.cjs'); require('../__chunks/MIBORXQW.cjs'); require('../__chunks/DQ3AW7HU.cjs'); require('../__chunks/CWQU4R75.cjs'); require('../__chunks/H5ZMZIC6.cjs'); require('../__chunks/PDQXLIRF.cjs'); require('../__chunks/T3QB4FR3.cjs'); var _76LCMKUIcjs = require('../__chunks/76LCMKUI.cjs'); require('../__chunks/FVVTEJ4K.cjs'); var _6TI3NXX6cjs = require('../__chunks/6TI3NXX6.cjs'); var _L5A2ID7Scjs = require('../__chunks/L5A2ID7S.cjs'); require('../__chunks/FDRJDQ5Y.cjs'); var _7EQBAZ46cjs = require('../__chunks/7EQBAZ46.cjs'); // src/tab/tab.tsx var _misc = require('@ariakit/core/utils/misc'); var _react = require('react'); var _jsxruntime = require('react/jsx-runtime'); var TagName = "button"; var useTab = _6TI3NXX6cjs.createHook.call(void 0, function useTab2(_a) { var _b = _a, { store, getItem: getItemProp } = _b, props = _7EQBAZ46cjs.__objRest.call(void 0, _b, [ "store", "getItem" ]); var _a2; const context = _TOESUYYHcjs.useTabScopedContext.call(void 0, ); store = store || context; _misc.invariant.call(void 0, store, process.env.NODE_ENV !== "production" && "Tab must be wrapped in a TabList component." ); const defaultId = _L5A2ID7Scjs.useId.call(void 0, ); const id = props.id || defaultId; const dimmed = _misc.disabledFromProps.call(void 0, props); const getItem = _react.useCallback.call(void 0, (item) => { const nextItem = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, item), { dimmed }); if (getItemProp) { return getItemProp(nextItem); } return nextItem; }, [dimmed, getItemProp] ); const onClickProp = props.onClick; const onClick = _L5A2ID7Scjs.useEvent.call(void 0, (event) => { onClickProp == null ? void 0 : onClickProp(event); if (event.defaultPrevented) return; store == null ? void 0 : store.setSelectedId(id); }); const panelId = store.panels.useState( (state) => { var _a3; return (_a3 = state.items.find((item) => item.tabId === id)) == null ? void 0 : _a3.id; } ); const shouldRegisterItem = defaultId ? props.shouldRegisterItem : false; const isActive = store.useState((state) => !!id && state.activeId === id); const selected = store.useState((state) => !!id && state.selectedId === id); const hasActiveItem = store.useState((state) => !!store.item(state.activeId)); const canRegisterComposedItem = isActive || selected && !hasActiveItem; const accessibleWhenDisabled = selected || ((_a2 = props.accessibleWhenDisabled) != null ? _a2 : true); const isWithinVirtualFocusComposite = _76LCMKUIcjs.useStoreState.call(void 0, store.combobox || store.composite, "virtualFocus" ); if (isWithinVirtualFocusComposite) { props = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, props), { tabIndex: -1 }); } props = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { id, role: "tab", "aria-selected": selected, "aria-controls": panelId || void 0 }, props), { onClick }); if (store.composite) { const defaultProps = { id, accessibleWhenDisabled, store: store.composite, shouldRegisterItem: canRegisterComposedItem && shouldRegisterItem, rowId: props.rowId, render: props.render }; props = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, props), { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ZVWIHFYJcjs.CompositeItem, _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, defaultProps), { render: store.combobox && store.composite !== store.combobox ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ZVWIHFYJcjs.CompositeItem, _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, defaultProps), { store: store.combobox })) : defaultProps.render }) ) }); } props = _ZVWIHFYJcjs.useCompositeItem.call(void 0, _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store }, props), { accessibleWhenDisabled, getItem, shouldRegisterItem })); return props; }); var Tab = _6TI3NXX6cjs.memo.call(void 0, _6TI3NXX6cjs.forwardRef.call(void 0, function Tab2(props) { const htmlProps = useTab(props); return _6TI3NXX6cjs.createElement.call(void 0, TagName, htmlProps); }) ); exports.Tab = Tab; exports.useTab = useTab;