import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useLayoutEffect, useRef } from 'react';
import { useUpdate } from 'react-use';
import { i18n } from "../i18n/menubar/index.js";
import { useSticky } from "../react-utils/useSticky.js";
import { FlexToolbar } from "../toolbar/index.js";
import { stickyCn } from "./sticky/index.js";
export function ToolbarView({ editor, editorMode, toolbarEditor, toolbarFocus, toolbarConfig, hiddenActionsConfig, settingsVisible, className, children, stickyToolbar, }) {
    const rerender = useUpdate();
    useLayoutEffect(() => {
        editor.on('rerender-toolbar', rerender);
        return () => {
            editor.off('rerender-toolbar', rerender);
        };
    }, [editor, rerender]);
    const wrapperRef = useRef(null);
    const isStickyActive = useSticky(wrapperRef) && stickyToolbar;
    return (_jsxs("div", { ref: wrapperRef, className: stickyCn.toolbar({
            withSettings: settingsVisible,
            stickyActive: isStickyActive,
            isSticky: stickyToolbar,
        }, [className]), children: [_jsx(FlexToolbar, { data: toolbarConfig, hiddenActions: hiddenActionsConfig, editor: toolbarEditor, focus: toolbarFocus, dotsTitle: i18n('more_action'), onClick: (id, attrs) => editor.emit('toolbar-action', { id, attrs, editorMode }) }), children] }));
}
//# sourceMappingURL=ToolbarView.js.map
