'use strict';

var React = require('react');
var jobberHooks = require('@jobber/hooks');
var classnames = require('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] = jobberHooks.useInView();
    const [rightRef, isRightVisible] = jobberHooks.useInView();
    return (React.createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames(styles.fadeContainer, {
            [styles.overflowLeft]: !isLeftVisible,
            [styles.overflowRight]: !isRightVisible,
        }) },
        React.createElement("div", { className: styles.overflowGrid },
            React.createElement("span", { ref: leftRef, className: styles.overflowTrigger }),
            React.createElement("div", { className: styles.overflowItems }, children),
            React.createElement("span", { ref: rightRef, className: styles.overflowTrigger }))));
}

exports.CONTAINER_TEST_ID = CONTAINER_TEST_ID;
exports.DataListOverflowFade = DataListOverflowFade;
