@gravity-ui/uikit/build/cjs/components/tabs/TabList.js

Gravity UI base styling and components

'use client';
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabList = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const hooks_1 = require("../../hooks/index.js");
const useDefaultProps_1 = require("../theme/useDefaultProps.js");
const TabMore_1 = require("./TabMore.js");
const TabContext_1 = require("./contexts/TabContext.js");
const useTabList_1 = require("./hooks/useTabList.js");
const useTabListCollapsedChildren_1 = require("./hooks/useTabListCollapsedChildren.js");
require("./TabList.css");
exports.TabList = React.forwardRef((rawProps, ref) => {
    const props = (0, useDefaultProps_1.useDefaultProps)('TabList', rawProps);
    const tabContext = React.useContext(TabContext_1.TabContext);
    const id = (0, hooks_1.useUniqId)();
    const listRef = React.useRef(null);
    const containerRef = (0, hooks_1.useForkRef)(ref, listRef);
    const value = tabContext?.value ?? props.value;
    const tabListProps = (0, useTabList_1.useTabList)(props);
    const collapseEnabled = props.contentOverflow === 'collapse';
    const collapsedChildrenResults = (0, useTabListCollapsedChildren_1.useTabListCollapsedChildren)(props.children, value, listRef, collapseEnabled);
    const [isFocused, setIsFocused] = React.useState(false);
    const { focusWithinProps } = (0, hooks_1.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 ((0, jsx_runtime_1.jsx)(TabContext_1.TabContext.Provider, { value: innerContextValue, children: (0, jsx_runtime_1.jsx)("div", { ref: containerRef, ...tabListProps, ...focusWithinProps, children: collapseEnabled ? ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [collapsedChildrenResults.shownChildren, (0, jsx_runtime_1.jsx)(TabMore_1.TabMore, { ref: collapsedChildrenResults.collapseItemRef, triggerChild: collapsedChildrenResults.triggerChild, moreLabel: props.moreLabel, size: props.size, children: collapsedChildrenResults.collapsedChildren })] })) : (props.children) }) }));
});
exports.TabList.displayName = 'TabList';
//# sourceMappingURL=TabList.js.map