@ariakit/react-core
Version:
Ariakit React core
140 lines (117 loc) • 4.72 kB
JavaScript
;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;