import * as React from "react";
import { ErrorBoundary } from "../common/ErrorBoundary";
const { useState, useEffect, createRef } = React;
/**
 * A container element for defining sections in a toolbar.
 * This component exists because css flex-box does provide "hideBelowWidth" functionality.
 * @param {number} [hideBelowWidth] - Below this width the component will hide itself
 * @param {string} [className] - The className for a customized look of the toolbar section
 * @param {string} [style] - The CSS style for a customized look of the toolbar section
 */
export const ToolbarSection = ({ children, hideBelowWidth, className, style = {} }) => {
    const [shouldRender, setShouldRender] = useState(true);
    // We will use this to access the section element.
    const wrapperRef = createRef();
    /**
     * This is called by ResizerObserver whenever the size of
     * the section changes due to toolbar shrinkage.
     */
    const onResize = (entries) => {
        if (entries.length) {
            // Get the calculated width
            const { offsetWidth } = entries[0].target;
            // If the developer specified a minimum width (hideBelowWidth)
            // and the section width is greater than the minimum
            // we should render all children by setting shouldRender to true.
            if (offsetWidth && hideBelowWidth) {
                setShouldRender(offsetWidth > hideBelowWidth);
            }
        }
    };
    useEffect(() => {
        if (wrapperRef.current) {
            new ResizeObserver(onResize).observe(wrapperRef.current);
        }
        return () => { };
    }, []);
    return (React.createElement("div", { ref: wrapperRef, className: `finsemble-toolbar-section ${className}`, style: style },
        React.createElement(ErrorBoundary, null, 
        // Render children if shouldRender is true
        shouldRender && children)));
};
//# sourceMappingURL=ToolbarSection.js.map