'use strict';

var React = require('react');
var DataListItems = require('./DataListItems-cjs.js');
var DataListContext = require('./DataListContext-cjs.js');
var useActiveLayout = require('./useActiveLayout-cjs.js');

function DataListLayout({ children, size = "xs", }) {
    const { registerLayout, loadingState } = DataListContext.useDataListContext();
    const { activeBreakpoint } = useActiveLayout.useActiveLayout();
    React.useEffect(() => {
        registerLayout(size, children);
    }, [size, children]);
    const shouldRenderList = size === activeBreakpoint;
    if (loadingState !== "initial" && shouldRenderList) {
        return React.createElement(DataListItems.DataListItems, { size: size });
    }
    return null;
}

exports.DataListLayout = DataListLayout;
