UNPKG

@ariakit/react-core

Version:

Ariakit React core

140 lines (117 loc) 4.72 kB
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); var _RXYQNZSZcjs = require('../__chunks/RXYQNZSZ.cjs'); var _YTEJF6TYcjs = require('../__chunks/YTEJF6TY.cjs'); require('../__chunks/MIBORXQW.cjs'); require('../__chunks/IH6KF7WR.cjs'); require('../__chunks/D6FV6EYS.cjs'); require('../__chunks/DHAXJ5PA.cjs'); require('../__chunks/YUGKYIYY.cjs'); require('../__chunks/T3QB4FR3.cjs'); var _25BPIGZHcjs = require('../__chunks/25BPIGZH.cjs'); require('../__chunks/6HKL3JR2.cjs'); var _WULEED4Qcjs = require('../__chunks/WULEED4Q.cjs'); var _OZM4QA2Vcjs = require('../__chunks/OZM4QA2V.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 = _WULEED4Qcjs.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 = _RXYQNZSZcjs.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 = _OZM4QA2Vcjs.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 = _OZM4QA2Vcjs.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 = _25BPIGZHcjs.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, _YTEJF6TYcjs.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, _YTEJF6TYcjs.CompositeItem, _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, defaultProps), { store: store.combobox })) : defaultProps.render }) ) }); } props = _YTEJF6TYcjs.useCompositeItem.call(void 0, _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store }, props), { accessibleWhenDisabled, getItem, shouldRegisterItem })); return props; }); var Tab = _WULEED4Qcjs.memo.call(void 0, _WULEED4Qcjs.forwardRef.call(void 0, function Tab2(props) { const htmlProps = useTab(props); return _WULEED4Qcjs.createElement.call(void 0, TagName, htmlProps); }) ); exports.Tab = Tab; exports.useTab = useTab;