'use strict';

var classnames = require('classnames');
var React = require('react');
var DataList_const = require('./DataList.const-cjs.js');

var styles = {"header":"u5YTRL-PlTI-","stuck":"rylbmDbzCts-","spinning":"_2VUVOWcGjbc-"};

function DataListStickyHeader({ children }) {
    const [isStuck, setIsStuck] = React.useState(false);
    const ref = React.useRef(null);
    const handleObserver = React.useCallback(([e]) => setIsStuck(e.intersectionRatio < 1), [setIsStuck]);
    React.useEffect(() => {
        if (!window.IntersectionObserver)
            return;
        const observer = new IntersectionObserver(handleObserver, { threshold: 1 });
        ref.current && observer.observe(ref.current);
        return () => {
            ref.current && observer.unobserve(ref.current);
        };
    }, [handleObserver, ref.current]);
    return (React.createElement("div", { "data-testid": DataList_const.DATA_LIST_STICKY_HEADER_TEST_ID, ref: ref, className: classnames(styles.header, { [styles.stuck]: isStuck }) }, children));
}

exports.DataListStickyHeader = DataListStickyHeader;
