@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
191 lines (187 loc) • 6.46 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_context = require('../../utils/context.cjs');
const require_dom = require('../../utils/dom.cjs');
const require_effect = require('../../utils/effect.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
const require_hooks_use_descendants_index = require('../../hooks/use-descendants/index.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
//#region src/components/tabs/use-tabs.ts
const { DescendantsContext: TabDescendantsContext, useDescendant: useTabDescendant, useDescendants: useTabDescendants } = require_hooks_use_descendants_index.createDescendants();
const { DescendantsContext: TabPanelDescendantsContext, useDescendant: useTabPanelDescendant, useDescendants: useTabPanelDescendants } = require_hooks_use_descendants_index.createDescendants();
const [TabsContext, useTabsContext] = require_context.createContext({ name: "TabsContext" });
const useTabs = ({ id, defaultIndex = 0, index: indexProp, manual = false, orientation = "horizontal", onChange,...rest } = {}) => {
const uuid = (0, react.useId)();
const tabDescendants = useTabDescendants();
const tabPanelDescendants = useTabPanelDescendants();
const [index, setIndex] = require_hooks_use_controllable_state_index.useControllableState({
defaultValue: defaultIndex,
value: indexProp,
onChange
});
const [focusedIndex, setFocusedIndex] = (0, react.useState)(index);
const horizontal = orientation === "horizontal";
id ??= uuid;
const onFocusFirstTab = (0, react.useCallback)(() => {
const first = tabDescendants.enabledFirstValue();
if (first) first.node.focus();
}, [tabDescendants]);
const onFocusLastTab = (0, react.useCallback)(() => {
const last = tabDescendants.enabledLastValue();
if (last) last.node.focus();
}, [tabDescendants]);
const onFocusNextTab = (0, react.useCallback)(() => {
const next = tabDescendants.enabledNextValue(focusedIndex);
if (next) next.node.focus();
}, [tabDescendants, focusedIndex]);
const onFocusPrevTab = (0, react.useCallback)(() => {
const prev = tabDescendants.enabledPrevValue(focusedIndex);
if (prev) prev.node.focus();
}, [tabDescendants, focusedIndex]);
const onKeyDown = (0, react.useCallback)((ev) => {
require_dom.runKeyAction(ev, {
ArrowDown: !horizontal ? onFocusNextTab : void 0,
ArrowLeft: horizontal ? onFocusPrevTab : void 0,
ArrowRight: horizontal ? onFocusNextTab : void 0,
ArrowUp: !horizontal ? onFocusPrevTab : void 0,
End: onFocusLastTab,
Home: onFocusFirstTab
});
}, [
horizontal,
onFocusNextTab,
onFocusPrevTab,
onFocusLastTab,
onFocusFirstTab
]);
require_effect.useUpdateEffect(() => {
if ((0, require_utils_index.utils_exports.isUndefined)(indexProp)) return;
setIndex(indexProp);
setFocusedIndex(indexProp);
}, [indexProp]);
const getRootProps = (0, react.useCallback)(({ ref,...props } = {}) => ({
"data-orientation": orientation,
...rest,
...props,
ref: require_ref.mergeRefs(ref, rest.ref)
}), [orientation, rest]);
const getListProps = (0, react.useCallback)((props = {}) => ({
"aria-orientation": orientation,
role: "tablist",
...props,
onKeyDown: (0, require_utils_index.utils_exports.handlerAll)(props.onKeyDown, onKeyDown)
}), [orientation, onKeyDown]);
return {
id,
focusedIndex,
index,
manual,
orientation,
setFocusedIndex,
setIndex,
tabDescendants,
tabPanelDescendants,
getListProps,
getRootProps
};
};
const useTab = ({ id, disabled, index,...rest }) => {
const { id: rootId, index: selectedIndex, manual, orientation, setFocusedIndex, setIndex } = useTabsContext();
const { register } = useTabDescendant({ disabled });
const tabPanelId = `${rootId}-panel-${index}`;
const selected = index === selectedIndex;
id ??= `${rootId}-tab-${index}`;
const onClick = (0, react.useCallback)(() => {
if (!disabled) setIndex(index);
}, [
index,
setIndex,
disabled
]);
const onFocus = (0, react.useCallback)(() => {
if (disabled) return;
setFocusedIndex(index);
if (!manual) setIndex(index);
}, [
setFocusedIndex,
index,
manual,
disabled,
setIndex
]);
return {
index,
selected,
getRootProps: (0, react.useCallback)(({ ref,...props } = {}) => ({
id,
type: "button",
"aria-controls": tabPanelId,
"aria-selected": selected,
"data-orientation": orientation,
disabled,
role: "tab",
tabIndex: selected ? 0 : -1,
...rest,
...props,
ref: require_ref.mergeRefs(ref, register),
onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, rest.onClick, onClick),
onFocus: (0, require_utils_index.utils_exports.handlerAll)(props.onFocus, rest.onFocus, onFocus)
}), [
disabled,
id,
onClick,
onFocus,
orientation,
register,
rest,
selected,
tabPanelId
])
};
};
const useTabPanel = ({ id, "aria-labelledby": ariaLabelledbyProp, index,...rest }) => {
const { id: rootId, index: selectedIndex, orientation } = useTabsContext();
const { register } = useTabPanelDescendant();
const tabId = `${rootId}-tab-${index}`;
const selected = index === selectedIndex;
id ??= `${rootId}-panel-${index}`;
return {
index,
selected,
getRootProps: (0, react.useCallback)(({ ref, "aria-labelledby": ariaLabelledby,...props } = {}) => ({
id,
"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledbyProp, ariaLabelledby, tabId),
"data-orientation": orientation,
hidden: !selected,
role: "tabpanel",
tabIndex: selected ? 0 : -1,
...rest,
...props,
ref: require_ref.mergeRefs(ref, register)
}), [
id,
ariaLabelledbyProp,
orientation,
register,
rest,
selected,
tabId
])
};
};
//#endregion
exports.TabDescendantsContext = TabDescendantsContext;
exports.TabPanelDescendantsContext = TabPanelDescendantsContext;
exports.TabsContext = TabsContext;
exports.useTab = useTab;
exports.useTabDescendant = useTabDescendant;
exports.useTabDescendants = useTabDescendants;
exports.useTabPanel = useTabPanel;
exports.useTabPanelDescendant = useTabPanelDescendant;
exports.useTabPanelDescendants = useTabPanelDescendants;
exports.useTabs = useTabs;
exports.useTabsContext = useTabsContext;
//# sourceMappingURL=use-tabs.cjs.map