@gravity-ui/uikit
Version:
Gravity UI base styling and components
36 lines (35 loc) • 2.11 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useFocusWithin, useForkRef, useUniqId } from "../../hooks/index.js";
import { useDefaultProps } from "../theme/useDefaultProps.js";
import { TabMore } from "./TabMore.js";
import { TabContext } from "./contexts/TabContext.js";
import { useTabList } from "./hooks/useTabList.js";
import { useTabListCollapsedChildren } from "./hooks/useTabListCollapsedChildren.js";
import "./TabList.css";
export const TabList = React.forwardRef((rawProps, ref) => {
const props = useDefaultProps('TabList', rawProps);
const tabContext = React.useContext(TabContext);
const id = useUniqId();
const listRef = React.useRef(null);
const containerRef = useForkRef(ref, listRef);
const value = tabContext?.value ?? props.value;
const tabListProps = useTabList(props);
const collapseEnabled = props.contentOverflow === 'collapse';
const collapsedChildrenResults = useTabListCollapsedChildren(props.children, value, listRef, collapseEnabled);
const [isFocused, setIsFocused] = React.useState(false);
const { focusWithinProps } = useFocusWithin({
onFocusWithinChange: setIsFocused,
});
const innerContextValue = React.useMemo(() => ({
value: value,
onUpdate: tabContext?.onUpdate ?? props.onUpdate,
id: tabContext?.id ?? id,
isProvider: tabContext?.isProvider ?? false,
isFocused,
}), [tabContext, value, props.onUpdate, id, isFocused]);
return (_jsx(TabContext.Provider, { value: innerContextValue, children: _jsx("div", { ref: containerRef, ...tabListProps, ...focusWithinProps, children: collapseEnabled ? (_jsxs(React.Fragment, { children: [collapsedChildrenResults.shownChildren, _jsx(TabMore, { ref: collapsedChildrenResults.collapseItemRef, triggerChild: collapsedChildrenResults.triggerChild, moreLabel: props.moreLabel, size: props.size, children: collapsedChildrenResults.collapsedChildren })] })) : (props.children) }) }));
});
TabList.displayName = 'TabList';
//# sourceMappingURL=TabList.js.map