"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolbarView = ToolbarView;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_use_1 = require("react-use");
const menubar_1 = require("../i18n/menubar/index.js");
const useSticky_1 = require("../react-utils/useSticky.js");
const toolbar_1 = require("../toolbar/index.js");
const sticky_1 = require("./sticky/index.js");
function ToolbarView({ editor, editorMode, toolbarEditor, toolbarFocus, toolbarConfig, toolbarDisplay, hiddenActionsConfig, settingsVisible, className, children, stickyToolbar, qa, }) {
    const rerender = (0, react_use_1.useUpdate)();
    (0, react_1.useLayoutEffect)(() => {
        editor.on('rerender-toolbar', rerender);
        return () => {
            editor.off('rerender-toolbar', rerender);
        };
    }, [editor, rerender]);
    const wrapperRef = (0, react_1.useRef)(null);
    const isStickyActive = (0, useSticky_1.useSticky)(wrapperRef) && stickyToolbar;
    const mobile = editor.mobile;
    return ((0, jsx_runtime_1.jsxs)("div", { "data-qa": qa, ref: wrapperRef, className: sticky_1.stickyCn.toolbar({
            withSettings: settingsVisible,
            stickyActive: isStickyActive,
            isSticky: stickyToolbar,
        }, [className]), children: [(0, jsx_runtime_1.jsx)(toolbar_1.FlexToolbar, { data: toolbarConfig, hiddenActions: hiddenActionsConfig, editor: toolbarEditor, focus: toolbarFocus, dotsTitle: (0, menubar_1.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
