@ariakit/react-core
Version:
Ariakit React core
194 lines (164 loc) • 6.71 kB
JavaScript
;Object.defineProperty(exports, "__esModule", {value: true});
var _RXYQNZSZcjs = require('../__chunks/RXYQNZSZ.cjs');
var _VIIJ4PIKcjs = require('../__chunks/VIIJ4PIK.cjs');
var _6PUNKVPOcjs = require('../__chunks/6PUNKVPO.cjs');
var _IH6KF7WRcjs = require('../__chunks/IH6KF7WR.cjs');
require('../__chunks/YDPERDKF.cjs');
require('../__chunks/KVXNVDJK.cjs');
require('../__chunks/D6FV6EYS.cjs');
var _YUGKYIYYcjs = 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-panel.tsx
var _focus = require('@ariakit/core/utils/focus');
var _misc = require('@ariakit/core/utils/misc');
var _react = require('react');
var _jsxruntime = require('react/jsx-runtime');
var TagName = "div";
var useTabPanel = _WULEED4Qcjs.createHook.call(void 0,
function useTabPanel2(_a) {
var _b = _a, {
store,
unmountOnHide,
tabId: tabIdProp,
getItem: getItemProp,
scrollRestoration,
scrollElement
} = _b, props = _7EQBAZ46cjs.__objRest.call(void 0, _b, [
"store",
"unmountOnHide",
"tabId",
"getItem",
"scrollRestoration",
"scrollElement"
]);
const context = _RXYQNZSZcjs.useTabProviderContext.call(void 0, );
store = store || context;
_misc.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 = _OZM4QA2Vcjs.useId.call(void 0, props.id);
const tabId = _25BPIGZHcjs.useStoreState.call(void 0,
store.panels,
() => {
var _a2;
return tabIdProp || ((_a2 = store == null ? void 0 : store.panels.item(id)) == null ? void 0 : _a2.tabId);
}
);
const open = _25BPIGZHcjs.useStoreState.call(void 0,
store,
(state) => !!tabId && state.selectedId === tabId
);
const disclosure = _6PUNKVPOcjs.useDisclosureStore.call(void 0, { open });
const mounted = _25BPIGZHcjs.useStoreState.call(void 0, disclosure, "mounted");
const scrollPositionRef = _react.useRef.call(void 0,
/* @__PURE__ */ new Map()
);
const getScrollElement = _OZM4QA2Vcjs.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 _a2, _b2;
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((_a2 = position == null ? void 0 : position.x) != null ? _a2 : 0, (_b2 = position == null ? void 0 : position.y) != null ? _b2 : 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, store]);
const [hasTabbableChildren, setHasTabbableChildren] = _react.useState.call(void 0, false);
_react.useEffect.call(void 0, () => {
const element = ref.current;
if (!element) return;
const tabbable = _focus.getAllTabbableIn.call(void 0, element);
setHasTabbableChildren(!!tabbable.length);
}, []);
const getItem = _react.useCallback.call(void 0,
(item) => {
const nextItem = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, item), { id: id || item.id, tabId: tabIdProp });
if (getItemProp) {
return getItemProp(nextItem);
}
return nextItem;
},
[id, tabIdProp, getItemProp]
);
const onKeyDownProp = props.onKeyDown;
const onKeyDown = _OZM4QA2Vcjs.useEvent.call(void 0, (event) => {
onKeyDownProp == null ? void 0 : onKeyDownProp(event);
if (event.defaultPrevented) return;
if (!(store == null ? void 0 : store.composite)) return;
const keyMap = {
ArrowLeft: store.previous,
ArrowRight: store.next,
Home: store.first,
End: store.last
};
const action = keyMap[event.key];
if (!action) return;
const { selectedId } = store.getState();
const nextId = action({ activeId: selectedId });
if (!nextId) return;
event.preventDefault();
store.move(nextId);
});
props = _OZM4QA2Vcjs.useWrapElement.call(void 0,
props,
(element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RXYQNZSZcjs.TabScopedContextProvider, { value: store, children: element }),
[store]
);
props = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {
id,
role: "tabpanel",
"aria-labelledby": tabId || void 0
}, props), {
children: unmountOnHide && !mounted ? null : props.children,
ref: _OZM4QA2Vcjs.useMergeRefs.call(void 0, ref, props.ref),
onKeyDown
});
props = _YUGKYIYYcjs.useFocusable.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {
// If the tab panel is rendered as part of another composite widget such
// as combobox, it should not be focusable.
focusable: !store.composite && !hasTabbableChildren
}, props));
props = _VIIJ4PIKcjs.useDisclosureContent.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store: disclosure }, props));
props = _IH6KF7WRcjs.useCollectionItem.call(void 0, _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store: store.panels }, props), { getItem }));
return props;
}
);
var TabPanel = _WULEED4Qcjs.forwardRef.call(void 0, function TabPanel2(props) {
const htmlProps = useTabPanel(props);
return _WULEED4Qcjs.createElement.call(void 0, TagName, htmlProps);
});
exports.TabPanel = TabPanel; exports.useTabPanel = useTabPanel;