import React__default from 'react';
import { useInView } from '@jobber/hooks';
import classnames from 'classnames';

const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";

var styles = {"fadeContainer":"a-KvXvaVQks-","overflowItems":"faGQ-G8kLN8-","overflowGrid":"TBUIm7AHO68-","overflowTrigger":"FMXUosxE5aQ-","overflowLeft":"kxQNzyS1RsY-","overflowRight":"AXW-X8-zsI8-","spinning":"bPN5dkeOZKI-"};

function DataListOverflowFade({ children }) {
    const [leftRef, isLeftVisible] = useInView();
    const [rightRef, isRightVisible] = useInView();
    return (React__default.createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames(styles.fadeContainer, {
            [styles.overflowLeft]: !isLeftVisible,
            [styles.overflowRight]: !isRightVisible,
        }) },
        React__default.createElement("div", { className: styles.overflowGrid },
            React__default.createElement("span", { ref: leftRef, className: styles.overflowTrigger }),
            React__default.createElement("div", { className: styles.overflowItems }, children),
            React__default.createElement("span", { ref: rightRef, className: styles.overflowTrigger }))));
}

export { CONTAINER_TEST_ID as C, DataListOverflowFade as D };
