import React, { useLayoutEffect, useRef, useState } from "react";
import { Flex } from "@netdata/netdata-ui";
import { DashboardThemeProvider } from "../../../../theme-provider";
import { DashboardMenuProvider } from "../../../charts";
import CSSVariables from "./cssVariables";
export const ContentWrapper = props => (React.createElement(Flex, Object.assign({ column: true, height: "100%", padding: [2, 0, 2, 6], overflow: { horizontal: "hidden" }, className: "node-view__container" }, props)));
const Provider = ({ dashboardAttributes, onAttributesChange, getChartAttributes, getChart, chartIds, theme, hasKubernetes, children, }) => {
    const ref = useRef();
    const [element, setElement] = useState();
    useLayoutEffect(() => {
        setElement(ref.current);
    }, []);
    return (React.createElement(Flex, { flex: true, ref: ref, height: "100%", overflow: "auto" }, element && (React.createElement(CSSVariables, null,
        React.createElement(DashboardThemeProvider, { theme: theme },
            React.createElement(DashboardMenuProvider, { container: element, chartIds: chartIds, getChart: getChart, getChartAttributes: getChartAttributes, onAttributesChange: onAttributesChange, dashboardAttributes: dashboardAttributes, hasKubernetes: hasKubernetes }, children))))));
};
export default Provider;
//# sourceMappingURL=provider.js.map