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

Gravity UI base styling and components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTabListGapFromContainer = useTabListGapFromContainer;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const useLayoutEffect_1 = require("../../../hooks/useLayoutEffect/index.js");
const useResizeObserver_1 = require("../../../hooks/useResizeObserver/index.js");
function getTabListGapFromContainer(container, childSelector) {
    const directChildren = Array.from(container.querySelectorAll(`:scope > :where(${childSelector})`));
    if (directChildren.length > 1) {
        return parseFloat(getComputedStyle(container).columnGap) || 0;
    }
    return null;
}
/**
 * Resolves the horizontal gap between tabs
 */
function useTabListGapFromContainer(containerRef, { enabled, childrenHash, childSelector, }) {
    const [gap, setGap] = React.useState(0);
    const calculateGap = React.useCallback(() => {
        const el = containerRef.current;
        if (!el) {
            return;
        }
        setGap((prev) => {
            const next = getTabListGapFromContainer(el, childSelector);
            return next === null ? prev : next;
        });
    }, [containerRef, childSelector]);
    (0, useLayoutEffect_1.useLayoutEffect)(() => {
        if (enabled) {
            calculateGap();
        }
        else {
            setGap(0);
        }
    }, [childrenHash, enabled, calculateGap]);
    (0, useResizeObserver_1.useResizeObserver)({
        ref: containerRef,
        onResize: calculateGap,
    });
    return gap;
}
//# sourceMappingURL=useTabListGapFromContainer.js.map