import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useLayoutEffect, useRef } from 'react';
import { useUpdate } from 'react-use';
import { LAYOUT } from "../common/layout.js";
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, toolbarDisplay, hiddenActionsConfig, settingsVisible, className, children, stickyToolbar, qa, }) {
    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;
    const mobile = editor.mobile;
    return (_jsxs("div", { "data-qa": qa, ref: wrapperRef, className: stickyCn.toolbar({
            withSettings: settingsVisible,
            stickyActive: isStickyActive,
            isSticky: stickyToolbar,
        }, [className]), "data-layout": LAYOUT.STICKY_TOOLBAR, 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 }), display: toolbarDisplay, disableTooltip: mobile, disableHotkey: mobile, disablePreview: mobile }), children] }));
}
//# sourceMappingURL=ToolbarView.js.map
