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

Gravity UI base styling and components

import * as React from 'react';
import { useLayoutEffect } from "../../../hooks/useLayoutEffect/index.js";
import { useResizeObserver } from "../../../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
 */
export 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]);
    useLayoutEffect(() => {
        if (enabled) {
            calculateGap();
        }
        else {
            setGap(0);
        }
    }, [childrenHash, enabled, calculateGap]);
    useResizeObserver({
        ref: containerRef,
        onResize: calculateGap,
    });
    return gap;
}
//# sourceMappingURL=useTabListGapFromContainer.js.map