@gravity-ui/markdown-editor 15.22.1 → 15.22.2

package/build/cjs/bundle/ToolbarView.js

@@ -4,7 +4,6 @@ exports.ToolbarView = ToolbarView;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_use_1 = require("react-use");
-const layout_1 = require("../common/layout.js");
 const menubar_1 = require("../i18n/menubar/index.js");
 const useSticky_1 = require("../react-utils/useSticky.js");
 const toolbar_1 = require("../toolbar/index.js");
@@ -24,6 +23,6 @@ function ToolbarView({ editor, editorMode, toolbarEditor, toolbarFocus, toolbarC
             withSettings: settingsVisible,
             stickyActive: isStickyActive,
             isSticky: stickyToolbar,
-        }, [className]), "data-layout": layout_1.LAYOUT.STICKY_TOOLBAR, 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] }));
+        }, [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

package/build/cjs/bundle/ToolbarView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarView.js","sourceRoot":"../../../src","sources":["bundle/ToolbarView.tsx"],"names":[],"mappings":";;AA8BA,kCAwDC;;AAtFD,iCAA8C;AAG9C,yCAAoC;AAEpC,gDAAyC;AAGzC,sDAAqC;AACrC,2DAAmD;AACnD,iDAAoG;AAGpG,8CAAkC;AAiBlC,SAAgB,WAAW,CAAI,EAC3B,MAAM,EACN,UAAU,EACV,aAAa,EACb,YAAY,EACZ,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,EAAE,GACgB;IAClB,MAAM,QAAQ,GAAG,IAAA,qBAAS,GAAE,CAAC;IAC7B,IAAA,uBAAe,EAAC,GAAG,EAAE;QACjB,MAAM,CAAC,EAAE,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,GAAG,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;QAC7C,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,UAAU,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,cAAc,GAAG,IAAA,qBAAS,EAAC,UAAU,CAAC,IAAI,aAAa,CAAC;IAE9D,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;IAE7B,OAAO,CACH,4CACa,EAAE,EACX,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,iBAAQ,CAAC,OAAO,CACvB;YACI,YAAY,EAAE,eAAe;YAC7B,YAAY,EAAE,cAAc;YAC5B,QAAQ,EAAE,aAAa;SAC1B,EACD,CAAC,SAAS,CAAC,CACd,iBACY,eAAM,CAAC,cAAc,aAElC,uBAAC,qBAAW,IACR,IAAI,EAAE,aAAa,EACnB,aAAa,EAAE,mBAAmB,EAClC,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,IAAA,cAAI,EAAC,aAAa,CAAC,EAC9B,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAC,CAAC,EAC9E,OAAO,EAAE,cAAc,EACvB,cAAc,EAAE,MAAM,EACtB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,GACxB,EACD,QAAQ,IACP,CACT,CAAC;AACN,CAAC","sourcesContent":["import {useLayoutEffect, useRef} from 'react';\n\nimport type {QAProps} from '@gravity-ui/uikit';\nimport {useUpdate} from 'react-use';\n\nimport {LAYOUT} from 'src/common/layout';\n\nimport type {ClassNameProps} from '../classname';\nimport {i18n} from '../i18n/menubar';\nimport {useSticky} from '../react-utils/useSticky';\nimport {FlexToolbar, type ToolbarData, type ToolbarDisplay, type ToolbarItemData} from '../toolbar';\n\nimport type {EditorInt} from './Editor';\nimport {stickyCn} from './sticky';\nimport type {MarkdownEditorMode} from './types';\n\nexport type ToolbarViewProps<T> = ClassNameProps &\n    QAProps & {\n        editor: EditorInt;\n        editorMode: MarkdownEditorMode;\n        toolbarEditor: T;\n        toolbarFocus: () => void;\n        toolbarConfig: ToolbarData<T>;\n        settingsVisible?: boolean;\n        hiddenActionsConfig?: ToolbarItemData<T>[];\n        children?: React.ReactNode;\n        stickyToolbar: boolean;\n        toolbarDisplay?: ToolbarDisplay;\n    };\n\nexport function ToolbarView<T>({\n    editor,\n    editorMode,\n    toolbarEditor,\n    toolbarFocus,\n    toolbarConfig,\n    toolbarDisplay,\n    hiddenActionsConfig,\n    settingsVisible,\n    className,\n    children,\n    stickyToolbar,\n    qa,\n}: ToolbarViewProps<T>) {\n    const rerender = useUpdate();\n    useLayoutEffect(() => {\n        editor.on('rerender-toolbar', rerender);\n        return () => {\n            editor.off('rerender-toolbar', rerender);\n        };\n    }, [editor, rerender]);\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const isStickyActive = useSticky(wrapperRef) && stickyToolbar;\n\n    const mobile = editor.mobile;\n\n    return (\n        <div\n            data-qa={qa}\n            ref={wrapperRef}\n            className={stickyCn.toolbar(\n                {\n                    withSettings: settingsVisible,\n                    stickyActive: isStickyActive,\n                    isSticky: stickyToolbar,\n                },\n                [className],\n            )}\n            data-layout={LAYOUT.STICKY_TOOLBAR}\n        >\n            <FlexToolbar\n                data={toolbarConfig}\n                hiddenActions={hiddenActionsConfig}\n                editor={toolbarEditor}\n                focus={toolbarFocus}\n                dotsTitle={i18n('more_action')}\n                onClick={(id, attrs) => editor.emit('toolbar-action', {id, attrs, editorMode})}\n                display={toolbarDisplay}\n                disableTooltip={mobile}\n                disableHotkey={mobile}\n                disablePreview={mobile}\n            />\n            {children}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"ToolbarView.js","sourceRoot":"../../../src","sources":["bundle/ToolbarView.tsx"],"names":[],"mappings":";;AA4BA,kCAuDC;;AAnFD,iCAA8C;AAG9C,yCAAoC;AAGpC,sDAAqC;AACrC,2DAAmD;AACnD,iDAAoG;AAGpG,8CAAkC;AAiBlC,SAAgB,WAAW,CAAI,EAC3B,MAAM,EACN,UAAU,EACV,aAAa,EACb,YAAY,EACZ,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,EAAE,GACgB;IAClB,MAAM,QAAQ,GAAG,IAAA,qBAAS,GAAE,CAAC;IAC7B,IAAA,uBAAe,EAAC,GAAG,EAAE;QACjB,MAAM,CAAC,EAAE,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,GAAG,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;QAC7C,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,UAAU,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,cAAc,GAAG,IAAA,qBAAS,EAAC,UAAU,CAAC,IAAI,aAAa,CAAC;IAE9D,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;IAE7B,OAAO,CACH,4CACa,EAAE,EACX,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,iBAAQ,CAAC,OAAO,CACvB;YACI,YAAY,EAAE,eAAe;YAC7B,YAAY,EAAE,cAAc;YAC5B,QAAQ,EAAE,aAAa;SAC1B,EACD,CAAC,SAAS,CAAC,CACd,aAED,uBAAC,qBAAW,IACR,IAAI,EAAE,aAAa,EACnB,aAAa,EAAE,mBAAmB,EAClC,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,IAAA,cAAI,EAAC,aAAa,CAAC,EAC9B,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAC,CAAC,EAC9E,OAAO,EAAE,cAAc,EACvB,cAAc,EAAE,MAAM,EACtB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,GACxB,EACD,QAAQ,IACP,CACT,CAAC;AACN,CAAC","sourcesContent":["import {useLayoutEffect, useRef} from 'react';\n\nimport type {QAProps} from '@gravity-ui/uikit';\nimport {useUpdate} from 'react-use';\n\nimport type {ClassNameProps} from '../classname';\nimport {i18n} from '../i18n/menubar';\nimport {useSticky} from '../react-utils/useSticky';\nimport {FlexToolbar, type ToolbarData, type ToolbarDisplay, type ToolbarItemData} from '../toolbar';\n\nimport type {EditorInt} from './Editor';\nimport {stickyCn} from './sticky';\nimport type {MarkdownEditorMode} from './types';\n\nexport type ToolbarViewProps<T> = ClassNameProps &\n    QAProps & {\n        editor: EditorInt;\n        editorMode: MarkdownEditorMode;\n        toolbarEditor: T;\n        toolbarFocus: () => void;\n        toolbarConfig: ToolbarData<T>;\n        settingsVisible?: boolean;\n        hiddenActionsConfig?: ToolbarItemData<T>[];\n        children?: React.ReactNode;\n        stickyToolbar: boolean;\n        toolbarDisplay?: ToolbarDisplay;\n    };\n\nexport function ToolbarView<T>({\n    editor,\n    editorMode,\n    toolbarEditor,\n    toolbarFocus,\n    toolbarConfig,\n    toolbarDisplay,\n    hiddenActionsConfig,\n    settingsVisible,\n    className,\n    children,\n    stickyToolbar,\n    qa,\n}: ToolbarViewProps<T>) {\n    const rerender = useUpdate();\n    useLayoutEffect(() => {\n        editor.on('rerender-toolbar', rerender);\n        return () => {\n            editor.off('rerender-toolbar', rerender);\n        };\n    }, [editor, rerender]);\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const isStickyActive = useSticky(wrapperRef) && stickyToolbar;\n\n    const mobile = editor.mobile;\n\n    return (\n        <div\n            data-qa={qa}\n            ref={wrapperRef}\n            className={stickyCn.toolbar(\n                {\n                    withSettings: settingsVisible,\n                    stickyActive: isStickyActive,\n                    isSticky: stickyToolbar,\n                },\n                [className],\n            )}\n        >\n            <FlexToolbar\n                data={toolbarConfig}\n                hiddenActions={hiddenActionsConfig}\n                editor={toolbarEditor}\n                focus={toolbarFocus}\n                dotsTitle={i18n('more_action')}\n                onClick={(id, attrs) => editor.emit('toolbar-action', {id, attrs, editorMode})}\n                display={toolbarDisplay}\n                disableTooltip={mobile}\n                disableHotkey={mobile}\n                disablePreview={mobile}\n            />\n            {children}\n        </div>\n    );\n}\n"]}

package/build/cjs/bundle/settings/index.js

@@ -8,8 +8,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
-const layout_1 = require("../../common/layout.js");
-const get_target_z_index_1 = require("../../utils/get-target-z-index.js");
 const classname_1 = require("../../classname.js");
 const bundle_1 = require("../../i18n/bundle/index.js");
 const WysiwygMode_1 = tslib_1.__importDefault(require("../../icons/WysiwygMode.js"));
@@ -27,7 +25,7 @@ exports.EditorSettings = (0, react_1.memo)(function EditorSettings(props) {
     const [chevronElement, setChevronElement] = (0, react_1.useState)(null);
     const [popupShown, , hidePopup, togglePopup] = (0, hooks_1.useBooleanState)(false);
     const areSettingsVisible = settingsVisible === true || (Array.isArray(settingsVisible) && settingsVisible.length > 0);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: bSettings(null, [className]), children: [renderPreviewButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.ActionTooltip, { openDelay: toolbar_1.ToolbarTooltipDelay.Open, closeDelay: toolbar_1.ToolbarTooltipDelay.Close, title: (0, bundle_1.i18n)('preview_hint'), hotkey: "mod+shift+p", children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { qa: "g-md-markup-preview-button", size: "m", view: "flat", pin: "round-round", className: bSettings('preview-button'), onClick: () => onShowPreviewChange?.(!showPreview), selected: showPreview, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Eye }) }) }), settingsVisible && (0, jsx_runtime_1.jsx)("div", { className: bSettings('separator') })] })), areSettingsVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { size: "m", view: "flat", pin: "round-round", onClick: togglePopup, ref: setChevronElement, qa: "g-md-settings-button", className: bSettings('dropdown-button'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Gear }) }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: popupShown, anchorElement: chevronElement, placement: placement, onOpenChange: hidePopup, zIndex: (0, get_target_z_index_1.getTargetZIndex)(layout_1.LAYOUT.STICKY_TOOLBAR), children: (0, jsx_runtime_1.jsx)(SettingsContent, { ...props, qa: "g-md-settings-content", onClose: hidePopup, className: bSettings('content') }) })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: bSettings(null, [className]), children: [renderPreviewButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.ActionTooltip, { openDelay: toolbar_1.ToolbarTooltipDelay.Open, closeDelay: toolbar_1.ToolbarTooltipDelay.Close, title: (0, bundle_1.i18n)('preview_hint'), hotkey: "mod+shift+p", children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { qa: "g-md-markup-preview-button", size: "m", view: "flat", pin: "round-round", className: bSettings('preview-button'), onClick: () => onShowPreviewChange?.(!showPreview), selected: showPreview, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Eye }) }) }), settingsVisible && (0, jsx_runtime_1.jsx)("div", { className: bSettings('separator') })] })), areSettingsVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { size: "m", view: "flat", pin: "round-round", onClick: togglePopup, ref: setChevronElement, qa: "g-md-settings-button", className: bSettings('dropdown-button'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Gear }) }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: popupShown, anchorElement: chevronElement, placement: placement, onOpenChange: hidePopup, children: (0, jsx_runtime_1.jsx)(SettingsContent, { ...props, qa: "g-md-settings-content", onClose: hidePopup, className: bSettings('content') }) })] }))] }));
 });
 const mdHelpPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];
 const SettingsContent = function SettingsContent({ mode, onClose, onModeChange, toolbarVisibility, onToolbarVisibilityChange, onSplitModeChange, splitMode = false, splitModeEnabled, className, showPreview, settingsVisible, qa, disableMark, }) {
@@ -44,7 +42,6 @@ const SettingsContent = function SettingsContent({ mode, onClose, onModeChange,
                         }, iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.LogoMarkdown }), children: [(0, bundle_1.i18n)('settings_markup'), !disableMark && ((0, jsx_runtime_1.jsx)(uikit_1.HelpMark, { popoverProps: {
                                     placement: mdHelpPlacement,
                                     modal: false,
-                                    zIndex: (0, get_target_z_index_1.getTargetZIndex)(layout_1.LAYOUT.STICKY_TOOLBAR),
                                 }, className: bContent('mode-help'), children: (0, jsx_runtime_1.jsx)("div", { onClick: (e) => {
                                         // stop clicks propagation
                                         // because otherwise click in MarkdownHints handled as click on MenuItem

package/build/cjs/bundle/settings/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["bundle/settings/index.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport {memo, useState} from 'react';\n\nimport {Eye, Gear, LogoMarkdown} from '@gravity-ui/icons';\nimport {\n    ActionTooltip,\n    Button,\n    Checkbox,\n    HelpMark,\n    Icon,\n    Menu,\n    Popup,\n    type PopupPlacement,\n    type QAProps,\n} from '@gravity-ui/uikit';\n\nimport {LAYOUT} from 'src/common/layout';\nimport {getTargetZIndex} from 'src/utils/get-target-z-index';\n\nimport {type ClassNameProps, cn} from '../../classname';\nimport {i18n} from '../../i18n/bundle';\nimport WysiwygModeIcon from '../../icons/WysiwygMode';\nimport {noop} from '../../lodash';\nimport {useBooleanState} from '../../react-utils/hooks';\nimport {ToolbarTooltipDelay} from '../../toolbar';\nimport {VERSION} from '../../version';\nimport type {MarkdownEditorMode, MarkdownEditorSplitMode} from '../types';\n\nimport {MarkdownHints} from './MarkdownHints';\n\nimport './index.scss';\n\nconst placement: PopupPlacement = ['bottom-end', 'top-end'];\n\nconst bSettings = cn('editor-settings');\nconst bContent = cn('settings-content');\n\nexport type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {\n    renderPreviewButton?: boolean;\n    settingsVisible?: boolean | SettingItems[];\n};\n\nexport const EditorSettings = memo<EditorSettingsProps>(function EditorSettings(props) {\n    const {className, onShowPreviewChange, showPreview, renderPreviewButton, settingsVisible} =\n        props;\n    const [chevronElement, setChevronElement] = useState<HTMLButtonElement | null>(null);\n    const [popupShown, , hidePopup, togglePopup] = useBooleanState(false);\n\n    const areSettingsVisible =\n        settingsVisible === true || (Array.isArray(settingsVisible) && settingsVisible.length > 0);\n\n    return (\n        <div className={bSettings(null, [className])}>\n            {renderPreviewButton && (\n                <>\n                    <ActionTooltip\n                        openDelay={ToolbarTooltipDelay.Open}\n                        closeDelay={ToolbarTooltipDelay.Close}\n                        title={i18n('preview_hint')}\n                        hotkey=\"mod+shift+p\"\n                    >\n                        <Button\n                            qa=\"g-md-markup-preview-button\"\n                            size=\"m\"\n                            view=\"flat\"\n                            pin=\"round-round\"\n                            className={bSettings('preview-button')}\n                            onClick={() => onShowPreviewChange?.(!showPreview)}\n                            selected={showPreview}\n                        >\n                            <Icon data={Eye} />\n                        </Button>\n                    </ActionTooltip>\n                    {settingsVisible && <div className={bSettings('separator')} />}\n                </>\n            )}\n            {areSettingsVisible && (\n                <>\n                    <Button\n                        size=\"m\"\n                        view=\"flat\"\n                        pin=\"round-round\"\n                        onClick={togglePopup}\n                        ref={setChevronElement}\n                        qa=\"g-md-settings-button\"\n                        className={bSettings('dropdown-button')}\n                    >\n                        <Icon data={Gear} />\n                    </Button>\n                    <Popup\n                        open={popupShown}\n                        anchorElement={chevronElement}\n                        placement={placement}\n                        onOpenChange={hidePopup}\n                        zIndex={getTargetZIndex(LAYOUT.STICKY_TOOLBAR)}\n                    >\n                        <SettingsContent\n                            {...props}\n                            qa=\"g-md-settings-content\"\n                            onClose={hidePopup}\n                            className={bSettings('content')}\n                        />\n                    </Popup>\n                </>\n            )}\n        </div>\n    );\n});\n\nexport type SettingItems = 'mode' | 'toolbar' | 'split';\n\ntype SettingsContentProps = ClassNameProps &\n    QAProps & {\n        mode: MarkdownEditorMode;\n        onClose: () => void;\n        onModeChange: (mode: MarkdownEditorMode) => void;\n        onShowPreviewChange: (showPreview: boolean) => void;\n        showPreview: boolean;\n        toolbarVisibility: boolean;\n        settingsVisible?: SettingItems[] | boolean;\n        onToolbarVisibilityChange: (val: boolean) => void;\n        splitMode?: MarkdownEditorSplitMode;\n        splitModeEnabled?: boolean;\n        onSplitModeChange?: (splitModeEnabled: boolean) => void;\n        disableMark?: boolean;\n    };\n\nconst mdHelpPlacement: PopupPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];\n\nconst SettingsContent: React.FC<SettingsContentProps> = function SettingsContent({\n    mode,\n    onClose,\n    onModeChange,\n    toolbarVisibility,\n    onToolbarVisibilityChange,\n    onSplitModeChange,\n    splitMode = false,\n    splitModeEnabled,\n    className,\n    showPreview,\n    settingsVisible,\n    qa,\n    disableMark,\n}) {\n    const isSettingsArray = Array.isArray(settingsVisible);\n    const showModeSetting = isSettingsArray ? settingsVisible?.includes('mode') : true;\n    const showToolbarSetting = isSettingsArray ? settingsVisible?.includes('toolbar') : true;\n    const showSplitModeSetting = isSettingsArray ? settingsVisible?.includes('split') : true;\n\n    return (\n        <div className={bContent(null, [className])} data-qa={qa}>\n            {showModeSetting && (\n                <Menu size=\"l\" className={bContent('mode')}>\n                    <Menu.Item\n                        qa=\"g-md-settings-mode-wysiwyg\"\n                        active={mode === 'wysiwyg'}\n                        onClick={() => {\n                            onModeChange('wysiwyg');\n                            onClose();\n                        }}\n                        iconStart={<Icon data={WysiwygModeIcon} />}\n                    >\n                        {i18n('settings_wysiwyg')}\n                    </Menu.Item>\n                    <Menu.Item\n                        qa=\"g-md-settings-mode-markup\"\n                        active={mode === 'markup'}\n                        onClick={() => {\n                            onModeChange('markup');\n                            onClose();\n                        }}\n                        iconStart={<Icon data={LogoMarkdown} />}\n                    >\n                        {i18n('settings_markup')}\n                        {!disableMark && (\n                            <HelpMark\n                                popoverProps={{\n                                    placement: mdHelpPlacement,\n                                    modal: false,\n                                    zIndex: getTargetZIndex(LAYOUT.STICKY_TOOLBAR),\n                                }}\n                                className={bContent('mode-help')}\n                            >\n                                <div\n                                    onClick={(e) => {\n                                        // stop clicks propagation\n                                        // because otherwise click in MarkdownHints handled as click on MenuItem\n                                        e.stopPropagation();\n                                    }}\n                                >\n                                    <MarkdownHints />\n                                </div>\n                            </HelpMark>\n                        )}\n                    </Menu.Item>\n                </Menu>\n            )}\n            {showModeSetting && (showSplitModeSetting || showToolbarSetting) && (\n                <div className={bContent('separator')} />\n            )}\n            {showToolbarSetting && !showPreview && (\n                <div className={bContent('toolbar')}>\n                    <Checkbox\n                        size=\"m\"\n                        checked={toolbarVisibility}\n                        onUpdate={onToolbarVisibilityChange}\n                    >\n                        {i18n('settings_menubar')}\n                    </Checkbox>\n                    <div className={bContent('toolbar-hint')}>{i18n('settings_hint')}</div>\n                </div>\n            )}\n            {showSplitModeSetting && splitMode && (\n                <div className={bContent('split-mode')}>\n                    <Checkbox\n                        size=\"m\"\n                        disabled={mode !== 'markup'}\n                        checked={splitModeEnabled}\n                        onUpdate={onSplitModeChange ?? noop}\n                    >\n                        {i18n('settings_split-mode')}\n                    </Checkbox>\n                    <div className={bContent('toolbar-hint')}>\n                        {i18n('settings_split-mode-hint')}\n                    </div>\n                </div>\n            )}\n            <span className={bContent('version')}>{VERSION}</span>\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["bundle/settings/index.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport {memo, useState} from 'react';\n\nimport {Eye, Gear, LogoMarkdown} from '@gravity-ui/icons';\nimport {\n    ActionTooltip,\n    Button,\n    Checkbox,\n    HelpMark,\n    Icon,\n    Menu,\n    Popup,\n    type PopupPlacement,\n    type QAProps,\n} from '@gravity-ui/uikit';\n\nimport {type ClassNameProps, cn} from '../../classname';\nimport {i18n} from '../../i18n/bundle';\nimport WysiwygModeIcon from '../../icons/WysiwygMode';\nimport {noop} from '../../lodash';\nimport {useBooleanState} from '../../react-utils/hooks';\nimport {ToolbarTooltipDelay} from '../../toolbar';\nimport {VERSION} from '../../version';\nimport type {MarkdownEditorMode, MarkdownEditorSplitMode} from '../types';\n\nimport {MarkdownHints} from './MarkdownHints';\n\nimport './index.scss';\n\nconst placement: PopupPlacement = ['bottom-end', 'top-end'];\n\nconst bSettings = cn('editor-settings');\nconst bContent = cn('settings-content');\n\nexport type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {\n    renderPreviewButton?: boolean;\n    settingsVisible?: boolean | SettingItems[];\n};\n\nexport const EditorSettings = memo<EditorSettingsProps>(function EditorSettings(props) {\n    const {className, onShowPreviewChange, showPreview, renderPreviewButton, settingsVisible} =\n        props;\n    const [chevronElement, setChevronElement] = useState<HTMLButtonElement | null>(null);\n    const [popupShown, , hidePopup, togglePopup] = useBooleanState(false);\n\n    const areSettingsVisible =\n        settingsVisible === true || (Array.isArray(settingsVisible) && settingsVisible.length > 0);\n\n    return (\n        <div className={bSettings(null, [className])}>\n            {renderPreviewButton && (\n                <>\n                    <ActionTooltip\n                        openDelay={ToolbarTooltipDelay.Open}\n                        closeDelay={ToolbarTooltipDelay.Close}\n                        title={i18n('preview_hint')}\n                        hotkey=\"mod+shift+p\"\n                    >\n                        <Button\n                            qa=\"g-md-markup-preview-button\"\n                            size=\"m\"\n                            view=\"flat\"\n                            pin=\"round-round\"\n                            className={bSettings('preview-button')}\n                            onClick={() => onShowPreviewChange?.(!showPreview)}\n                            selected={showPreview}\n                        >\n                            <Icon data={Eye} />\n                        </Button>\n                    </ActionTooltip>\n                    {settingsVisible && <div className={bSettings('separator')} />}\n                </>\n            )}\n            {areSettingsVisible && (\n                <>\n                    <Button\n                        size=\"m\"\n                        view=\"flat\"\n                        pin=\"round-round\"\n                        onClick={togglePopup}\n                        ref={setChevronElement}\n                        qa=\"g-md-settings-button\"\n                        className={bSettings('dropdown-button')}\n                    >\n                        <Icon data={Gear} />\n                    </Button>\n                    <Popup\n                        open={popupShown}\n                        anchorElement={chevronElement}\n                        placement={placement}\n                        onOpenChange={hidePopup}\n                    >\n                        <SettingsContent\n                            {...props}\n                            qa=\"g-md-settings-content\"\n                            onClose={hidePopup}\n                            className={bSettings('content')}\n                        />\n                    </Popup>\n                </>\n            )}\n        </div>\n    );\n});\n\nexport type SettingItems = 'mode' | 'toolbar' | 'split';\n\ntype SettingsContentProps = ClassNameProps &\n    QAProps & {\n        mode: MarkdownEditorMode;\n        onClose: () => void;\n        onModeChange: (mode: MarkdownEditorMode) => void;\n        onShowPreviewChange: (showPreview: boolean) => void;\n        showPreview: boolean;\n        toolbarVisibility: boolean;\n        settingsVisible?: SettingItems[] | boolean;\n        onToolbarVisibilityChange: (val: boolean) => void;\n        splitMode?: MarkdownEditorSplitMode;\n        splitModeEnabled?: boolean;\n        onSplitModeChange?: (splitModeEnabled: boolean) => void;\n        disableMark?: boolean;\n    };\n\nconst mdHelpPlacement: PopupPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];\n\nconst SettingsContent: React.FC<SettingsContentProps> = function SettingsContent({\n    mode,\n    onClose,\n    onModeChange,\n    toolbarVisibility,\n    onToolbarVisibilityChange,\n    onSplitModeChange,\n    splitMode = false,\n    splitModeEnabled,\n    className,\n    showPreview,\n    settingsVisible,\n    qa,\n    disableMark,\n}) {\n    const isSettingsArray = Array.isArray(settingsVisible);\n    const showModeSetting = isSettingsArray ? settingsVisible?.includes('mode') : true;\n    const showToolbarSetting = isSettingsArray ? settingsVisible?.includes('toolbar') : true;\n    const showSplitModeSetting = isSettingsArray ? settingsVisible?.includes('split') : true;\n\n    return (\n        <div className={bContent(null, [className])} data-qa={qa}>\n            {showModeSetting && (\n                <Menu size=\"l\" className={bContent('mode')}>\n                    <Menu.Item\n                        qa=\"g-md-settings-mode-wysiwyg\"\n                        active={mode === 'wysiwyg'}\n                        onClick={() => {\n                            onModeChange('wysiwyg');\n                            onClose();\n                        }}\n                        iconStart={<Icon data={WysiwygModeIcon} />}\n                    >\n                        {i18n('settings_wysiwyg')}\n                    </Menu.Item>\n                    <Menu.Item\n                        qa=\"g-md-settings-mode-markup\"\n                        active={mode === 'markup'}\n                        onClick={() => {\n                            onModeChange('markup');\n                            onClose();\n                        }}\n                        iconStart={<Icon data={LogoMarkdown} />}\n                    >\n                        {i18n('settings_markup')}\n                        {!disableMark && (\n                            <HelpMark\n                                popoverProps={{\n                                    placement: mdHelpPlacement,\n                                    modal: false,\n                                }}\n                                className={bContent('mode-help')}\n                            >\n                                <div\n                                    onClick={(e) => {\n                                        // stop clicks propagation\n                                        // because otherwise click in MarkdownHints handled as click on MenuItem\n                                        e.stopPropagation();\n                                    }}\n                                >\n                                    <MarkdownHints />\n                                </div>\n                            </HelpMark>\n                        )}\n                    </Menu.Item>\n                </Menu>\n            )}\n            {showModeSetting && (showSplitModeSetting || showToolbarSetting) && (\n                <div className={bContent('separator')} />\n            )}\n            {showToolbarSetting && !showPreview && (\n                <div className={bContent('toolbar')}>\n                    <Checkbox\n                        size=\"m\"\n                        checked={toolbarVisibility}\n                        onUpdate={onToolbarVisibilityChange}\n                    >\n                        {i18n('settings_menubar')}\n                    </Checkbox>\n                    <div className={bContent('toolbar-hint')}>{i18n('settings_hint')}</div>\n                </div>\n            )}\n            {showSplitModeSetting && splitMode && (\n                <div className={bContent('split-mode')}>\n                    <Checkbox\n                        size=\"m\"\n                        disabled={mode !== 'markup'}\n                        checked={splitModeEnabled}\n                        onUpdate={onSplitModeChange ?? noop}\n                    >\n                        {i18n('settings_split-mode')}\n                    </Checkbox>\n                    <div className={bContent('toolbar-hint')}>\n                        {i18n('settings_split-mode-hint')}\n                    </div>\n                </div>\n            )}\n            <span className={bContent('version')}>{VERSION}</span>\n        </div>\n    );\n};\n"]}

package/build/cjs/bundle/toolbar/ToolbarButtonWithPopupMenu.js

@@ -5,8 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
-const layout_1 = require("../../common/layout.js");
-const get_target_z_index_1 = require("../../utils/get-target-z-index.js");
 const classname_1 = require("../../classname.js");
 const lodash_1 = require("../../lodash.js");
 const hooks_1 = require("../../react-utils/hooks.js");
@@ -36,7 +34,7 @@ const ToolbarButtonWithPopupMenu = ({ disablePortal, className, focus, onClick,
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.ActionTooltip, { disabled: popupOpen, openDelay: toolbar_1.ToolbarTooltipDelay.Open, closeDelay: toolbar_1.ToolbarTooltipDelay.Close, title: textTitle, children: (0, jsx_runtime_1.jsxs)(uikit_1.Button, { size: "m", ref: setAnchorElement, view: btnView, selected: btnSelected, disabled: everyDisabled, className: b(null, [className]), onClick: toggleOpen, "aria-label": textTitle, qa: qa, ...props, children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icon.data, size: icon.size, className: iconClassName }), '', (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ChevronDown, className: chevronIconClassName })] }) }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: popupOpen, disablePortal: disablePortal, anchorElement: anchorElement, onOpenChange: (open) => {
                     if (!open)
                         hide();
-                }, zIndex: (0, get_target_z_index_1.getTargetZIndex)(layout_1.LAYOUT.STICKY_TOOLBAR), children: (0, jsx_runtime_1.jsx)(uikit_1.Menu, { size: "l", qa: qaMenu, "data-toolbar-menu-for": textTitle, children: Object.entries(groups).map(([label, items], key) => {
+                }, children: (0, jsx_runtime_1.jsx)(uikit_1.Menu, { size: "l", qa: qaMenu, "data-toolbar-menu-for": textTitle, children: Object.entries(groups).map(([label, items], key) => {
                         return ((0, jsx_runtime_1.jsx)(uikit_1.Menu.Group, { label: label, className: b('menu-group'), children: items.map(({ id, icon, iconSize = 16, action, text, iconClassname }) => ((0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icon, size: iconSize, className: iconClassname }), active: action.isActive(), disabled: !action.isEnable(), onClick: () => {
                                     hide();
                                     focus();

package/build/cjs/bundle/toolbar/ToolbarButtonWithPopupMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButtonWithPopupMenu.js","sourceRoot":"../../../../src","sources":["bundle/toolbar/ToolbarButtonWithPopupMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useEffect, useMemo} from 'react';\n\nimport {ChevronDown} from '@gravity-ui/icons';\nimport {\n    ActionTooltip,\n    Button,\n    Icon,\n    type IconProps,\n    Menu,\n    Popup,\n    type PopupProps,\n} from '@gravity-ui/uikit';\n\nimport {LAYOUT} from 'src/common/layout';\nimport {getTargetZIndex} from 'src/utils/get-target-z-index';\n\nimport {cn} from '../../classname';\nimport type {Action} from '../../core';\nimport {groupBy, isFunction} from '../../lodash';\nimport {useBooleanState, useElementState} from '../../react-utils/hooks';\nimport {type ToolbarBaseProps, type ToolbarIconData, ToolbarTooltipDelay} from '../../toolbar';\n\nimport './ToolbarButtonWithPopupMenu.scss';\nconst b = cn('toolbar-button-with-popup-menu');\n\nexport type MenuItem = {\n    id: string;\n    action: Action;\n    icon: IconProps['data'];\n    text: string;\n    iconSize?: IconProps['size'];\n    iconClassname?: string;\n    group?: string;\n    ignoreActive?: boolean;\n};\n\nexport type ToolbarButtonWithPopupMenuProps = Pick<\n    ToolbarBaseProps<never>,\n    'className' | 'focus' | 'onClick' | 'qa'\n> &\n    Pick<PopupProps, 'disablePortal'> & {\n        icon: ToolbarIconData;\n        iconClassName?: string;\n        chevronIconClassName?: string;\n        title: string | (() => string);\n        menuItems: MenuItem[];\n        /** @default 'classic' */\n        _selectionType?: 'classic' | 'light';\n        qaMenu?: string;\n    };\n\nexport const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProps> = ({\n    disablePortal,\n    className,\n    focus,\n    onClick,\n    icon,\n    iconClassName,\n    chevronIconClassName,\n    title,\n    menuItems,\n    _selectionType,\n    qa,\n    qaMenu,\n    ...props\n}) => {\n    const [anchorElement, setAnchorElement] = useElementState();\n    const [open, , hide, toggleOpen] = useBooleanState(false);\n    const groups = useMemo(\n        () =>\n            groupBy(\n                menuItems.map((i) => ({...i, group: i.group || ''})),\n                'group',\n            ),\n        [menuItems],\n    );\n\n    const someActive = menuItems.some(\n        (item) => !item.ignoreActive && item.action.isActive() === true,\n    );\n    const everyDisabled = menuItems.every((item) => item.action.isEnable() === false);\n\n    const popupOpen = everyDisabled ? false : open;\n    const shouldForceHide = open && !popupOpen;\n    useEffect(() => {\n        if (shouldForceHide) {\n            hide();\n        }\n    }, [hide, shouldForceHide]);\n\n    const [btnView, btnSelected] =\n        _selectionType === 'light'\n            ? ([\n                  popupOpen ? 'normal' : someActive ? 'flat-action' : 'flat',\n                  popupOpen && someActive,\n              ] as const)\n            : ([someActive || popupOpen ? 'normal' : 'flat', someActive] as const);\n\n    const textTitle = isFunction(title) ? title() : title;\n\n    return (\n        <>\n            <ActionTooltip\n                disabled={popupOpen}\n                openDelay={ToolbarTooltipDelay.Open}\n                closeDelay={ToolbarTooltipDelay.Close}\n                title={textTitle}\n            >\n                <Button\n                    size=\"m\"\n                    ref={setAnchorElement}\n                    view={btnView}\n                    selected={btnSelected}\n                    disabled={everyDisabled}\n                    className={b(null, [className])}\n                    onClick={toggleOpen}\n                    aria-label={textTitle}\n                    qa={qa}\n                    {...props}\n                >\n                    <Icon data={icon.data} size={icon.size} className={iconClassName} />\n                    {''}\n                    <Icon data={ChevronDown} className={chevronIconClassName} />\n                </Button>\n            </ActionTooltip>\n            <Popup\n                open={popupOpen}\n                disablePortal={disablePortal}\n                anchorElement={anchorElement}\n                onOpenChange={(open) => {\n                    if (!open) hide();\n                }}\n                zIndex={getTargetZIndex(LAYOUT.STICKY_TOOLBAR)}\n            >\n                <Menu size=\"l\" qa={qaMenu} data-toolbar-menu-for={textTitle}>\n                    {Object.entries(groups).map(([label, items], key) => {\n                        return (\n                            <Menu.Group label={label} key={key} className={b('menu-group')}>\n                                {items.map(\n                                    ({id, icon, iconSize = 16, action, text, iconClassname}) => (\n                                        <Menu.Item\n                                            key={id}\n                                            iconStart={\n                                                <Icon\n                                                    data={icon}\n                                                    size={iconSize}\n                                                    className={iconClassname}\n                                                />\n                                            }\n                                            active={action.isActive()}\n                                            disabled={!action.isEnable()}\n                                            onClick={() => {\n                                                hide();\n                                                focus();\n                                                action.run();\n                                                onClick?.(id);\n                                            }}\n                                            extraProps={{'aria-label': text}}\n                                        >\n                                            {text}\n                                        </Menu.Item>\n                                    ),\n                                )}\n                            </Menu.Group>\n                        );\n                    })}\n                </Menu>\n            </Popup>\n        </>\n    );\n};\n"]}
+{"version":3,"file":"ToolbarButtonWithPopupMenu.js","sourceRoot":"../../../../src","sources":["bundle/toolbar/ToolbarButtonWithPopupMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useEffect, useMemo} from 'react';\n\nimport {ChevronDown} from '@gravity-ui/icons';\nimport {\n    ActionTooltip,\n    Button,\n    Icon,\n    type IconProps,\n    Menu,\n    Popup,\n    type PopupProps,\n} from '@gravity-ui/uikit';\n\nimport {cn} from '../../classname';\nimport type {Action} from '../../core';\nimport {groupBy, isFunction} from '../../lodash';\nimport {useBooleanState, useElementState} from '../../react-utils/hooks';\nimport {type ToolbarBaseProps, type ToolbarIconData, ToolbarTooltipDelay} from '../../toolbar';\n\nimport './ToolbarButtonWithPopupMenu.scss';\nconst b = cn('toolbar-button-with-popup-menu');\n\nexport type MenuItem = {\n    id: string;\n    action: Action;\n    icon: IconProps['data'];\n    text: string;\n    iconSize?: IconProps['size'];\n    iconClassname?: string;\n    group?: string;\n    ignoreActive?: boolean;\n};\n\nexport type ToolbarButtonWithPopupMenuProps = Pick<\n    ToolbarBaseProps<never>,\n    'className' | 'focus' | 'onClick' | 'qa'\n> &\n    Pick<PopupProps, 'disablePortal'> & {\n        icon: ToolbarIconData;\n        iconClassName?: string;\n        chevronIconClassName?: string;\n        title: string | (() => string);\n        menuItems: MenuItem[];\n        /** @default 'classic' */\n        _selectionType?: 'classic' | 'light';\n        qaMenu?: string;\n    };\n\nexport const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProps> = ({\n    disablePortal,\n    className,\n    focus,\n    onClick,\n    icon,\n    iconClassName,\n    chevronIconClassName,\n    title,\n    menuItems,\n    _selectionType,\n    qa,\n    qaMenu,\n    ...props\n}) => {\n    const [anchorElement, setAnchorElement] = useElementState();\n    const [open, , hide, toggleOpen] = useBooleanState(false);\n    const groups = useMemo(\n        () =>\n            groupBy(\n                menuItems.map((i) => ({...i, group: i.group || ''})),\n                'group',\n            ),\n        [menuItems],\n    );\n\n    const someActive = menuItems.some(\n        (item) => !item.ignoreActive && item.action.isActive() === true,\n    );\n    const everyDisabled = menuItems.every((item) => item.action.isEnable() === false);\n\n    const popupOpen = everyDisabled ? false : open;\n    const shouldForceHide = open && !popupOpen;\n    useEffect(() => {\n        if (shouldForceHide) {\n            hide();\n        }\n    }, [hide, shouldForceHide]);\n\n    const [btnView, btnSelected] =\n        _selectionType === 'light'\n            ? ([\n                  popupOpen ? 'normal' : someActive ? 'flat-action' : 'flat',\n                  popupOpen && someActive,\n              ] as const)\n            : ([someActive || popupOpen ? 'normal' : 'flat', someActive] as const);\n\n    const textTitle = isFunction(title) ? title() : title;\n\n    return (\n        <>\n            <ActionTooltip\n                disabled={popupOpen}\n                openDelay={ToolbarTooltipDelay.Open}\n                closeDelay={ToolbarTooltipDelay.Close}\n                title={textTitle}\n            >\n                <Button\n                    size=\"m\"\n                    ref={setAnchorElement}\n                    view={btnView}\n                    selected={btnSelected}\n                    disabled={everyDisabled}\n                    className={b(null, [className])}\n                    onClick={toggleOpen}\n                    aria-label={textTitle}\n                    qa={qa}\n                    {...props}\n                >\n                    <Icon data={icon.data} size={icon.size} className={iconClassName} />\n                    {''}\n                    <Icon data={ChevronDown} className={chevronIconClassName} />\n                </Button>\n            </ActionTooltip>\n            <Popup\n                open={popupOpen}\n                disablePortal={disablePortal}\n                anchorElement={anchorElement}\n                onOpenChange={(open) => {\n                    if (!open) hide();\n                }}\n            >\n                <Menu size=\"l\" qa={qaMenu} data-toolbar-menu-for={textTitle}>\n                    {Object.entries(groups).map(([label, items], key) => {\n                        return (\n                            <Menu.Group label={label} key={key} className={b('menu-group')}>\n                                {items.map(\n                                    ({id, icon, iconSize = 16, action, text, iconClassname}) => (\n                                        <Menu.Item\n                                            key={id}\n                                            iconStart={\n                                                <Icon\n                                                    data={icon}\n                                                    size={iconSize}\n                                                    className={iconClassname}\n                                                />\n                                            }\n                                            active={action.isActive()}\n                                            disabled={!action.isEnable()}\n                                            onClick={() => {\n                                                hide();\n                                                focus();\n                                                action.run();\n                                                onClick?.(id);\n                                            }}\n                                            extraProps={{'aria-label': text}}\n                                        >\n                                            {text}\n                                        </Menu.Item>\n                                    ),\n                                )}\n                            </Menu.Group>\n                        );\n                    })}\n                </Menu>\n            </Popup>\n        </>\n    );\n};\n"]}

package/build/cjs/toolbar/ToolbarListButton.js

@@ -5,8 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
-const layout_1 = require("../common/layout.js");
-const get_target_z_index_1 = require("../utils/get-target-z-index.js");
 const classname_1 = require("../classname.js");
 const common_1 = require("../i18n/common/index.js");
 const lodash_1 = require("../lodash.js");
@@ -45,7 +43,7 @@ function ToolbarListButton({ className, editor, focus, onClick, icon, title, wit
                         setPopupItem(undefined);
                     else
                         toggleOpen();
-                }, disableTooltip: disableTooltip || popupOpen, children: buttonContent }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { anchorElement: anchorElement, open: popupOpen, onOpenChange: hide, zIndex: (0, get_target_z_index_1.getTargetZIndex)(layout_1.LAYOUT.STICKY_TOOLBAR), children: (0, jsx_runtime_1.jsx)(uikit_1.Menu, { size: "l", className: b('menu'), qa: qaMenu, "data-toolbar-menu-for": titleText, children: data
+                }, disableTooltip: disableTooltip || popupOpen, children: buttonContent }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { anchorElement: anchorElement, open: popupOpen, onOpenChange: hide, children: (0, jsx_runtime_1.jsx)(uikit_1.Menu, { size: "l", className: b('menu'), qa: qaMenu, "data-toolbar-menu-for": titleText, children: data
                         .map((data) => {
                         const { id, title, icon, hotkey, isActive, isEnable, exec, hint, hintWhenDisabled, preview, } = data;
                         const titleText = (0, lodash_1.isFunction)(title) ? title() : title;

package/build/cjs/toolbar/ToolbarListButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarListButton.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarListButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Fragment, useEffect, useState} from 'react';\n\nimport {ChevronDown} from '@gravity-ui/icons';\nimport {HelpMark, Hotkey, Icon, Menu, Popover, Popup} from '@gravity-ui/uikit';\n\nimport {LAYOUT} from 'src/common/layout';\nimport {getTargetZIndex} from 'src/utils/get-target-z-index';\n\nimport {cn} from '../classname';\nimport {i18n} from '../i18n/common';\nimport {isFunction} from '../lodash';\nimport {useBooleanState, useElementState} from '../react-utils/hooks';\n\nimport {PreviewTooltip} from './PreviewTooltip';\nimport {ToolbarButtonView} from './ToolbarButton';\nimport type {\n    ToolbarBaseProps,\n    ToolbarButtonPopupData,\n    ToolbarItemData,\n    ToolbarListButtonData,\n} from './types';\n\nimport './ToolbarListButton.scss';\n\nconst b = cn('toolbar-list-button');\n\nexport type {ToolbarListButtonData};\n\nexport type ToolbarListButtonProps<E> = ToolbarBaseProps<E> &\n    ToolbarListButtonData<E> & {\n        qaMenu?: string;\n        qaActionDisabledPopover?: string;\n    };\n\nexport function ToolbarListButton<E>({\n    className,\n    editor,\n    focus,\n    onClick,\n    icon,\n    title,\n    withArrow,\n    data,\n    alwaysActive,\n    replaceActiveIcon,\n    qa,\n    qaMenu,\n    qaActionDisabledPopover = 'g-md-toolbar-action-disabled-hint',\n    disableHotkey,\n    disablePreview,\n    disableTooltip,\n}: ToolbarListButtonProps<E>) {\n    const [anchorElement, setAnchorElement] = useElementState();\n    const [open, , hide, toggleOpen] = useBooleanState(false);\n    const [popupItem, setPopupItem] = useState<ToolbarButtonPopupData<E>>();\n\n    const everyDisabled = alwaysActive ? false : data.every((item) => !item.isEnable(editor));\n    const popupOpen = everyDisabled ? false : open;\n    const shouldForceHide = open && !popupOpen;\n\n    useEffect(() => {\n        if (shouldForceHide) {\n            hide();\n        }\n    }, [hide, shouldForceHide]);\n\n    if (data.length === 0) return null;\n\n    const activeItem = data.find((item) => item.isActive(editor) && !item.doNotActivateList);\n    const someActive = alwaysActive ? false : Boolean(activeItem);\n\n    if (replaceActiveIcon && someActive && activeItem) {\n        icon = activeItem.icon;\n    }\n\n    const buttonContent = [<Icon key={1} data={icon.data} size={icon.size ?? 16} />];\n    if (withArrow) {\n        buttonContent.push(<Fragment key={2}>{''}</Fragment>);\n        buttonContent.push(<Icon key={3} data={ChevronDown} size={16} />);\n    }\n    const titleText: string = isFunction(title) ? title() : title;\n\n    return (\n        <>\n            <ToolbarButtonView\n                qa={qa}\n                ref={setAnchorElement}\n                active={someActive}\n                enabled={!everyDisabled}\n                title={title}\n                className={b({arrow: withArrow}, [className])}\n                onClick={() => {\n                    if (popupItem) setPopupItem(undefined);\n                    else toggleOpen();\n                }}\n                disableTooltip={disableTooltip || popupOpen}\n            >\n                {buttonContent}\n            </ToolbarButtonView>\n            <Popup\n                anchorElement={anchorElement}\n                open={popupOpen}\n                onOpenChange={hide}\n                zIndex={getTargetZIndex(LAYOUT.STICKY_TOOLBAR)}\n            >\n                <Menu size=\"l\" className={b('menu')} qa={qaMenu} data-toolbar-menu-for={titleText}>\n                    {data\n                        .map((data) => {\n                            const {\n                                id,\n                                title,\n                                icon,\n                                hotkey,\n                                isActive,\n                                isEnable,\n                                exec,\n                                hint,\n                                hintWhenDisabled,\n                                preview,\n                            } = data;\n\n                            const titleText = isFunction(title) ? title() : title;\n                            const hintText = isFunction(hint) ? hint() : hint;\n\n                            const disabled = !isEnable(editor);\n\n                            const hideHintWhenDisabled = hintWhenDisabled === false || !disabled;\n                            const hintWhenDisabledText =\n                                typeof hintWhenDisabled === 'string'\n                                    ? hintWhenDisabled\n                                    : typeof hintWhenDisabled === 'function'\n                                      ? hintWhenDisabled()\n                                      : i18n('toolbar_action_disabled');\n\n                            const handleClick = () => {\n                                hide();\n\n                                if (isPopupItem(data)) {\n                                    setPopupItem(data);\n                                } else {\n                                    setPopupItem(undefined);\n                                    focus();\n                                    exec(editor);\n                                    onClick?.(id);\n                                }\n                            };\n\n                            return (\n                                <Popover\n                                    className={b('action-disabled-popover')}\n                                    content={\n                                        <div className={b('action-disabled-tooltip')}>\n                                            {hintWhenDisabledText}\n                                        </div>\n                                    }\n                                    placement=\"left\"\n                                    modal={false}\n                                    disabled={hideHintWhenDisabled}\n                                    qa={qaActionDisabledPopover}\n                                    key={id}\n                                >\n                                    {(props, ref) => (\n                                        <PreviewTooltip preview={preview} disabled={disablePreview}>\n                                            <Menu.Item\n                                                key={id}\n                                                ref={ref}\n                                                active={isActive(editor)}\n                                                disabled={!isEnable(editor)}\n                                                onClick={handleClick}\n                                                iconStart={\n                                                    <Icon data={icon.data} size={icon.size ?? 16} />\n                                                }\n                                                extraProps={{\n                                                    ...props,\n                                                    'aria-label': titleText,\n                                                }}\n                                            >\n                                                <div className={b('item')}>\n                                                    {titleText}\n                                                    {!disableHotkey && (\n                                                        <div className={b('extra')}>\n                                                            {hotkey && <Hotkey value={hotkey} />}\n                                                            {hintText && (\n                                                                <HelpMark\n                                                                    className={b('hint')}\n                                                                    popoverProps={{modal: false}}\n                                                                >\n                                                                    {hintText}\n                                                                </HelpMark>\n                                                            )}\n                                                        </div>\n                                                    )}\n                                                </div>\n                                            </Menu.Item>\n                                        </PreviewTooltip>\n                                    )}\n                                </Popover>\n                            );\n                        })\n                        .filter(Boolean)}\n                </Menu>\n            </Popup>\n            {popupItem\n                ? popupItem.renderPopup({\n                      ...popupItem,\n                      editor,\n                      focus,\n                      onClick,\n                      anchorElement,\n                      hide: () => setPopupItem(undefined),\n                  })\n                : null}\n        </>\n    );\n}\n\nfunction isPopupItem<E>(item: ToolbarItemData<E>): item is ToolbarButtonPopupData<E> {\n    return Boolean((item as ToolbarButtonPopupData<E>).renderPopup);\n}\n"]}
+{"version":3,"file":"ToolbarListButton.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarListButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Fragment, useEffect, useState} from 'react';\n\nimport {ChevronDown} from '@gravity-ui/icons';\nimport {HelpMark, Hotkey, Icon, Menu, Popover, Popup} from '@gravity-ui/uikit';\n\nimport {cn} from '../classname';\nimport {i18n} from '../i18n/common';\nimport {isFunction} from '../lodash';\nimport {useBooleanState, useElementState} from '../react-utils/hooks';\n\nimport {PreviewTooltip} from './PreviewTooltip';\nimport {ToolbarButtonView} from './ToolbarButton';\nimport type {\n    ToolbarBaseProps,\n    ToolbarButtonPopupData,\n    ToolbarItemData,\n    ToolbarListButtonData,\n} from './types';\n\nimport './ToolbarListButton.scss';\n\nconst b = cn('toolbar-list-button');\n\nexport type {ToolbarListButtonData};\n\nexport type ToolbarListButtonProps<E> = ToolbarBaseProps<E> &\n    ToolbarListButtonData<E> & {\n        qaMenu?: string;\n        qaActionDisabledPopover?: string;\n    };\n\nexport function ToolbarListButton<E>({\n    className,\n    editor,\n    focus,\n    onClick,\n    icon,\n    title,\n    withArrow,\n    data,\n    alwaysActive,\n    replaceActiveIcon,\n    qa,\n    qaMenu,\n    qaActionDisabledPopover = 'g-md-toolbar-action-disabled-hint',\n    disableHotkey,\n    disablePreview,\n    disableTooltip,\n}: ToolbarListButtonProps<E>) {\n    const [anchorElement, setAnchorElement] = useElementState();\n    const [open, , hide, toggleOpen] = useBooleanState(false);\n    const [popupItem, setPopupItem] = useState<ToolbarButtonPopupData<E>>();\n\n    const everyDisabled = alwaysActive ? false : data.every((item) => !item.isEnable(editor));\n    const popupOpen = everyDisabled ? false : open;\n    const shouldForceHide = open && !popupOpen;\n\n    useEffect(() => {\n        if (shouldForceHide) {\n            hide();\n        }\n    }, [hide, shouldForceHide]);\n\n    if (data.length === 0) return null;\n\n    const activeItem = data.find((item) => item.isActive(editor) && !item.doNotActivateList);\n    const someActive = alwaysActive ? false : Boolean(activeItem);\n\n    if (replaceActiveIcon && someActive && activeItem) {\n        icon = activeItem.icon;\n    }\n\n    const buttonContent = [<Icon key={1} data={icon.data} size={icon.size ?? 16} />];\n    if (withArrow) {\n        buttonContent.push(<Fragment key={2}>{''}</Fragment>);\n        buttonContent.push(<Icon key={3} data={ChevronDown} size={16} />);\n    }\n    const titleText: string = isFunction(title) ? title() : title;\n\n    return (\n        <>\n            <ToolbarButtonView\n                qa={qa}\n                ref={setAnchorElement}\n                active={someActive}\n                enabled={!everyDisabled}\n                title={title}\n                className={b({arrow: withArrow}, [className])}\n                onClick={() => {\n                    if (popupItem) setPopupItem(undefined);\n                    else toggleOpen();\n                }}\n                disableTooltip={disableTooltip || popupOpen}\n            >\n                {buttonContent}\n            </ToolbarButtonView>\n            <Popup anchorElement={anchorElement} open={popupOpen} onOpenChange={hide}>\n                <Menu size=\"l\" className={b('menu')} qa={qaMenu} data-toolbar-menu-for={titleText}>\n                    {data\n                        .map((data) => {\n                            const {\n                                id,\n                                title,\n                                icon,\n                                hotkey,\n                                isActive,\n                                isEnable,\n                                exec,\n                                hint,\n                                hintWhenDisabled,\n                                preview,\n                            } = data;\n\n                            const titleText = isFunction(title) ? title() : title;\n                            const hintText = isFunction(hint) ? hint() : hint;\n\n                            const disabled = !isEnable(editor);\n\n                            const hideHintWhenDisabled = hintWhenDisabled === false || !disabled;\n                            const hintWhenDisabledText =\n                                typeof hintWhenDisabled === 'string'\n                                    ? hintWhenDisabled\n                                    : typeof hintWhenDisabled === 'function'\n                                      ? hintWhenDisabled()\n                                      : i18n('toolbar_action_disabled');\n\n                            const handleClick = () => {\n                                hide();\n\n                                if (isPopupItem(data)) {\n                                    setPopupItem(data);\n                                } else {\n                                    setPopupItem(undefined);\n                                    focus();\n                                    exec(editor);\n                                    onClick?.(id);\n                                }\n                            };\n\n                            return (\n                                <Popover\n                                    className={b('action-disabled-popover')}\n                                    content={\n                                        <div className={b('action-disabled-tooltip')}>\n                                            {hintWhenDisabledText}\n                                        </div>\n                                    }\n                                    placement=\"left\"\n                                    modal={false}\n                                    disabled={hideHintWhenDisabled}\n                                    qa={qaActionDisabledPopover}\n                                    key={id}\n                                >\n                                    {(props, ref) => (\n                                        <PreviewTooltip preview={preview} disabled={disablePreview}>\n                                            <Menu.Item\n                                                key={id}\n                                                ref={ref}\n                                                active={isActive(editor)}\n                                                disabled={!isEnable(editor)}\n                                                onClick={handleClick}\n                                                iconStart={\n                                                    <Icon data={icon.data} size={icon.size ?? 16} />\n                                                }\n                                                extraProps={{\n                                                    ...props,\n                                                    'aria-label': titleText,\n                                                }}\n                                            >\n                                                <div className={b('item')}>\n                                                    {titleText}\n                                                    {!disableHotkey && (\n                                                        <div className={b('extra')}>\n                                                            {hotkey && <Hotkey value={hotkey} />}\n                                                            {hintText && (\n                                                                <HelpMark\n                                                                    className={b('hint')}\n                                                                    popoverProps={{modal: false}}\n                                                                >\n                                                                    {hintText}\n                                                                </HelpMark>\n                                                            )}\n                                                        </div>\n                                                    )}\n                                                </div>\n                                            </Menu.Item>\n                                        </PreviewTooltip>\n                                    )}\n                                </Popover>\n                            );\n                        })\n                        .filter(Boolean)}\n                </Menu>\n            </Popup>\n            {popupItem\n                ? popupItem.renderPopup({\n                      ...popupItem,\n                      editor,\n                      focus,\n                      onClick,\n                      anchorElement,\n                      hide: () => setPopupItem(undefined),\n                  })\n                : null}\n        </>\n    );\n}\n\nfunction isPopupItem<E>(item: ToolbarItemData<E>): item is ToolbarButtonPopupData<E> {\n    return Boolean((item as ToolbarButtonPopupData<E>).renderPopup);\n}\n"]}

package/build/cjs/version.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 /** During build process, the current version will be injected here */
-exports.VERSION = typeof '15.22.1' !== 'undefined' ? '15.22.1' : 'unknown';
+exports.VERSION = typeof '15.22.2' !== 'undefined' ? '15.22.2' : 'unknown';
 //# sourceMappingURL=version.js.map

package/build/cjs/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"../../src","sources":["version.ts"],"names":[],"mappings":";;;AAAA,sEAAsE;AACzD,QAAA,OAAO,GAAG,OAAO,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC","sourcesContent":["/** During build process, the current version will be injected here */\nexport const VERSION = typeof '15.22.1' !== 'undefined' ? '15.22.1' : 'unknown';\n"]}
+{"version":3,"file":"version.js","sourceRoot":"../../src","sources":["version.ts"],"names":[],"mappings":";;;AAAA,sEAAsE;AACzD,QAAA,OAAO,GAAG,OAAO,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC","sourcesContent":["/** During build process, the current version will be injected here */\nexport const VERSION = typeof '15.22.2' !== 'undefined' ? '15.22.2' : 'unknown';\n"]}

package/build/esm/bundle/ToolbarView.js

@@ -1,7 +1,6 @@
 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";
@@ -21,6 +20,6 @@ export function ToolbarView({ editor, editorMode, toolbarEditor, toolbarFocus, t
             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] }));
+        }, [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 }), display: toolbarDisplay, disableTooltip: mobile, disableHotkey: mobile, disablePreview: mobile }), children] }));
 }
 //# sourceMappingURL=ToolbarView.js.map

package/build/esm/bundle/ToolbarView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarView.js","sourceRoot":"../../../src","sources":["bundle/ToolbarView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAC,MAAM,EAAC,4BAA0B;AAGzC,OAAO,EAAC,IAAI,EAAC,iCAAwB;AACrC,OAAO,EAAC,SAAS,EAAC,oCAAiC;AACnD,OAAO,EAAC,WAAW,EAA8D,4BAAmB;AAGpG,OAAO,EAAC,QAAQ,EAAC,0BAAiB;AAiBlC,MAAM,UAAU,WAAW,CAAI,EAC3B,MAAM,EACN,UAAU,EACV,aAAa,EACb,YAAY,EACZ,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,EAAE,GACgB;IAClB,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,eAAe,CAAC,GAAG,EAAE;QACjB,MAAM,CAAC,EAAE,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,GAAG,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;QAC7C,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,cAAc,GAAG,SAAS,CAAC,UAAU,CAAC,IAAI,aAAa,CAAC;IAE9D,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;IAE7B,OAAO,CACH,0BACa,EAAE,EACX,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,QAAQ,CAAC,OAAO,CACvB;YACI,YAAY,EAAE,eAAe;YAC7B,YAAY,EAAE,cAAc;YAC5B,QAAQ,EAAE,aAAa;SAC1B,EACD,CAAC,SAAS,CAAC,CACd,iBACY,MAAM,CAAC,cAAc,aAElC,KAAC,WAAW,IACR,IAAI,EAAE,aAAa,EACnB,aAAa,EAAE,mBAAmB,EAClC,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,EAC9B,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAC,CAAC,EAC9E,OAAO,EAAE,cAAc,EACvB,cAAc,EAAE,MAAM,EACtB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,GACxB,EACD,QAAQ,IACP,CACT,CAAC;AACN,CAAC","sourcesContent":["import {useLayoutEffect, useRef} from 'react';\n\nimport type {QAProps} from '@gravity-ui/uikit';\nimport {useUpdate} from 'react-use';\n\nimport {LAYOUT} from 'src/common/layout';\n\nimport type {ClassNameProps} from '../classname';\nimport {i18n} from '../i18n/menubar';\nimport {useSticky} from '../react-utils/useSticky';\nimport {FlexToolbar, type ToolbarData, type ToolbarDisplay, type ToolbarItemData} from '../toolbar';\n\nimport type {EditorInt} from './Editor';\nimport {stickyCn} from './sticky';\nimport type {MarkdownEditorMode} from './types';\n\nexport type ToolbarViewProps<T> = ClassNameProps &\n    QAProps & {\n        editor: EditorInt;\n        editorMode: MarkdownEditorMode;\n        toolbarEditor: T;\n        toolbarFocus: () => void;\n        toolbarConfig: ToolbarData<T>;\n        settingsVisible?: boolean;\n        hiddenActionsConfig?: ToolbarItemData<T>[];\n        children?: React.ReactNode;\n        stickyToolbar: boolean;\n        toolbarDisplay?: ToolbarDisplay;\n    };\n\nexport function ToolbarView<T>({\n    editor,\n    editorMode,\n    toolbarEditor,\n    toolbarFocus,\n    toolbarConfig,\n    toolbarDisplay,\n    hiddenActionsConfig,\n    settingsVisible,\n    className,\n    children,\n    stickyToolbar,\n    qa,\n}: ToolbarViewProps<T>) {\n    const rerender = useUpdate();\n    useLayoutEffect(() => {\n        editor.on('rerender-toolbar', rerender);\n        return () => {\n            editor.off('rerender-toolbar', rerender);\n        };\n    }, [editor, rerender]);\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const isStickyActive = useSticky(wrapperRef) && stickyToolbar;\n\n    const mobile = editor.mobile;\n\n    return (\n        <div\n            data-qa={qa}\n            ref={wrapperRef}\n            className={stickyCn.toolbar(\n                {\n                    withSettings: settingsVisible,\n                    stickyActive: isStickyActive,\n                    isSticky: stickyToolbar,\n                },\n                [className],\n            )}\n            data-layout={LAYOUT.STICKY_TOOLBAR}\n        >\n            <FlexToolbar\n                data={toolbarConfig}\n                hiddenActions={hiddenActionsConfig}\n                editor={toolbarEditor}\n                focus={toolbarFocus}\n                dotsTitle={i18n('more_action')}\n                onClick={(id, attrs) => editor.emit('toolbar-action', {id, attrs, editorMode})}\n                display={toolbarDisplay}\n                disableTooltip={mobile}\n                disableHotkey={mobile}\n                disablePreview={mobile}\n            />\n            {children}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"ToolbarView.js","sourceRoot":"../../../src","sources":["bundle/ToolbarView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AAGpC,OAAO,EAAC,IAAI,EAAC,iCAAwB;AACrC,OAAO,EAAC,SAAS,EAAC,oCAAiC;AACnD,OAAO,EAAC,WAAW,EAA8D,4BAAmB;AAGpG,OAAO,EAAC,QAAQ,EAAC,0BAAiB;AAiBlC,MAAM,UAAU,WAAW,CAAI,EAC3B,MAAM,EACN,UAAU,EACV,aAAa,EACb,YAAY,EACZ,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,EAAE,GACgB;IAClB,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,eAAe,CAAC,GAAG,EAAE;QACjB,MAAM,CAAC,EAAE,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,GAAG,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;QAC7C,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,cAAc,GAAG,SAAS,CAAC,UAAU,CAAC,IAAI,aAAa,CAAC;IAE9D,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;IAE7B,OAAO,CACH,0BACa,EAAE,EACX,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,QAAQ,CAAC,OAAO,CACvB;YACI,YAAY,EAAE,eAAe;YAC7B,YAAY,EAAE,cAAc;YAC5B,QAAQ,EAAE,aAAa;SAC1B,EACD,CAAC,SAAS,CAAC,CACd,aAED,KAAC,WAAW,IACR,IAAI,EAAE,aAAa,EACnB,aAAa,EAAE,mBAAmB,EAClC,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,EAC9B,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAC,CAAC,EAC9E,OAAO,EAAE,cAAc,EACvB,cAAc,EAAE,MAAM,EACtB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,GACxB,EACD,QAAQ,IACP,CACT,CAAC;AACN,CAAC","sourcesContent":["import {useLayoutEffect, useRef} from 'react';\n\nimport type {QAProps} from '@gravity-ui/uikit';\nimport {useUpdate} from 'react-use';\n\nimport type {ClassNameProps} from '../classname';\nimport {i18n} from '../i18n/menubar';\nimport {useSticky} from '../react-utils/useSticky';\nimport {FlexToolbar, type ToolbarData, type ToolbarDisplay, type ToolbarItemData} from '../toolbar';\n\nimport type {EditorInt} from './Editor';\nimport {stickyCn} from './sticky';\nimport type {MarkdownEditorMode} from './types';\n\nexport type ToolbarViewProps<T> = ClassNameProps &\n    QAProps & {\n        editor: EditorInt;\n        editorMode: MarkdownEditorMode;\n        toolbarEditor: T;\n        toolbarFocus: () => void;\n        toolbarConfig: ToolbarData<T>;\n        settingsVisible?: boolean;\n        hiddenActionsConfig?: ToolbarItemData<T>[];\n        children?: React.ReactNode;\n        stickyToolbar: boolean;\n        toolbarDisplay?: ToolbarDisplay;\n    };\n\nexport function ToolbarView<T>({\n    editor,\n    editorMode,\n    toolbarEditor,\n    toolbarFocus,\n    toolbarConfig,\n    toolbarDisplay,\n    hiddenActionsConfig,\n    settingsVisible,\n    className,\n    children,\n    stickyToolbar,\n    qa,\n}: ToolbarViewProps<T>) {\n    const rerender = useUpdate();\n    useLayoutEffect(() => {\n        editor.on('rerender-toolbar', rerender);\n        return () => {\n            editor.off('rerender-toolbar', rerender);\n        };\n    }, [editor, rerender]);\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const isStickyActive = useSticky(wrapperRef) && stickyToolbar;\n\n    const mobile = editor.mobile;\n\n    return (\n        <div\n            data-qa={qa}\n            ref={wrapperRef}\n            className={stickyCn.toolbar(\n                {\n                    withSettings: settingsVisible,\n                    stickyActive: isStickyActive,\n                    isSticky: stickyToolbar,\n                },\n                [className],\n            )}\n        >\n            <FlexToolbar\n                data={toolbarConfig}\n                hiddenActions={hiddenActionsConfig}\n                editor={toolbarEditor}\n                focus={toolbarFocus}\n                dotsTitle={i18n('more_action')}\n                onClick={(id, attrs) => editor.emit('toolbar-action', {id, attrs, editorMode})}\n                display={toolbarDisplay}\n                disableTooltip={mobile}\n                disableHotkey={mobile}\n                disablePreview={mobile}\n            />\n            {children}\n        </div>\n    );\n}\n"]}

package/build/esm/bundle/settings/index.js

@@ -4,8 +4,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { memo, useState } from 'react';
 import { Eye, Gear, LogoMarkdown } from '@gravity-ui/icons';
 import { ActionTooltip, Button, Checkbox, HelpMark, Icon, Menu, Popup, } from '@gravity-ui/uikit';
-import { LAYOUT } from "../../common/layout.js";
-import { getTargetZIndex } from "../../utils/get-target-z-index.js";
 import { cn } from "../../classname.js";
 import { i18n } from "../../i18n/bundle/index.js";
 import WysiwygModeIcon from "../../icons/WysiwygMode.js";
@@ -23,7 +21,7 @@ export const EditorSettings = memo(function EditorSettings(props) {
     const [chevronElement, setChevronElement] = useState(null);
     const [popupShown, , hidePopup, togglePopup] = useBooleanState(false);
     const areSettingsVisible = settingsVisible === true || (Array.isArray(settingsVisible) && settingsVisible.length > 0);
-    return (_jsxs("div", { className: bSettings(null, [className]), children: [renderPreviewButton && (_jsxs(_Fragment, { children: [_jsx(ActionTooltip, { openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, title: i18n('preview_hint'), hotkey: "mod+shift+p", children: _jsx(Button, { qa: "g-md-markup-preview-button", size: "m", view: "flat", pin: "round-round", className: bSettings('preview-button'), onClick: () => onShowPreviewChange?.(!showPreview), selected: showPreview, children: _jsx(Icon, { data: Eye }) }) }), settingsVisible && _jsx("div", { className: bSettings('separator') })] })), areSettingsVisible && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "m", view: "flat", pin: "round-round", onClick: togglePopup, ref: setChevronElement, qa: "g-md-settings-button", className: bSettings('dropdown-button'), children: _jsx(Icon, { data: Gear }) }), _jsx(Popup, { open: popupShown, anchorElement: chevronElement, placement: placement, onOpenChange: hidePopup, zIndex: getTargetZIndex(LAYOUT.STICKY_TOOLBAR), children: _jsx(SettingsContent, { ...props, qa: "g-md-settings-content", onClose: hidePopup, className: bSettings('content') }) })] }))] }));
+    return (_jsxs("div", { className: bSettings(null, [className]), children: [renderPreviewButton && (_jsxs(_Fragment, { children: [_jsx(ActionTooltip, { openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, title: i18n('preview_hint'), hotkey: "mod+shift+p", children: _jsx(Button, { qa: "g-md-markup-preview-button", size: "m", view: "flat", pin: "round-round", className: bSettings('preview-button'), onClick: () => onShowPreviewChange?.(!showPreview), selected: showPreview, children: _jsx(Icon, { data: Eye }) }) }), settingsVisible && _jsx("div", { className: bSettings('separator') })] })), areSettingsVisible && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "m", view: "flat", pin: "round-round", onClick: togglePopup, ref: setChevronElement, qa: "g-md-settings-button", className: bSettings('dropdown-button'), children: _jsx(Icon, { data: Gear }) }), _jsx(Popup, { open: popupShown, anchorElement: chevronElement, placement: placement, onOpenChange: hidePopup, children: _jsx(SettingsContent, { ...props, qa: "g-md-settings-content", onClose: hidePopup, className: bSettings('content') }) })] }))] }));
 });
 const mdHelpPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];
 const SettingsContent = function SettingsContent({ mode, onClose, onModeChange, toolbarVisibility, onToolbarVisibilityChange, onSplitModeChange, splitMode = false, splitModeEnabled, className, showPreview, settingsVisible, qa, disableMark, }) {
@@ -40,7 +38,6 @@ const SettingsContent = function SettingsContent({ mode, onClose, onModeChange,
                         }, iconStart: _jsx(Icon, { data: LogoMarkdown }), children: [i18n('settings_markup'), !disableMark && (_jsx(HelpMark, { popoverProps: {
                                     placement: mdHelpPlacement,
                                     modal: false,
-                                    zIndex: getTargetZIndex(LAYOUT.STICKY_TOOLBAR),
                                 }, className: bContent('mode-help'), children: _jsx("div", { onClick: (e) => {
                                         // stop clicks propagation
                                         // because otherwise click in MarkdownHints handled as click on MenuItem

package/build/esm/bundle/settings/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["bundle/settings/index.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport {memo, useState} from 'react';\n\nimport {Eye, Gear, LogoMarkdown} from '@gravity-ui/icons';\nimport {\n    ActionTooltip,\n    Button,\n    Checkbox,\n    HelpMark,\n    Icon,\n    Menu,\n    Popup,\n    type PopupPlacement,\n    type QAProps,\n} from '@gravity-ui/uikit';\n\nimport {LAYOUT} from 'src/common/layout';\nimport {getTargetZIndex} from 'src/utils/get-target-z-index';\n\nimport {type ClassNameProps, cn} from '../../classname';\nimport {i18n} from '../../i18n/bundle';\nimport WysiwygModeIcon from '../../icons/WysiwygMode';\nimport {noop} from '../../lodash';\nimport {useBooleanState} from '../../react-utils/hooks';\nimport {ToolbarTooltipDelay} from '../../toolbar';\nimport {VERSION} from '../../version';\nimport type {MarkdownEditorMode, MarkdownEditorSplitMode} from '../types';\n\nimport {MarkdownHints} from './MarkdownHints';\n\nimport './index.scss';\n\nconst placement: PopupPlacement = ['bottom-end', 'top-end'];\n\nconst bSettings = cn('editor-settings');\nconst bContent = cn('settings-content');\n\nexport type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {\n    renderPreviewButton?: boolean;\n    settingsVisible?: boolean | SettingItems[];\n};\n\nexport const EditorSettings = memo<EditorSettingsProps>(function EditorSettings(props) {\n    const {className, onShowPreviewChange, showPreview, renderPreviewButton, settingsVisible} =\n        props;\n    const [chevronElement, setChevronElement] = useState<HTMLButtonElement | null>(null);\n    const [popupShown, , hidePopup, togglePopup] = useBooleanState(false);\n\n    const areSettingsVisible =\n        settingsVisible === true || (Array.isArray(settingsVisible) && settingsVisible.length > 0);\n\n    return (\n        <div className={bSettings(null, [className])}>\n            {renderPreviewButton && (\n                <>\n                    <ActionTooltip\n                        openDelay={ToolbarTooltipDelay.Open}\n                        closeDelay={ToolbarTooltipDelay.Close}\n                        title={i18n('preview_hint')}\n                        hotkey=\"mod+shift+p\"\n                    >\n                        <Button\n                            qa=\"g-md-markup-preview-button\"\n                            size=\"m\"\n                            view=\"flat\"\n                            pin=\"round-round\"\n                            className={bSettings('preview-button')}\n                            onClick={() => onShowPreviewChange?.(!showPreview)}\n                            selected={showPreview}\n                        >\n                            <Icon data={Eye} />\n                        </Button>\n                    </ActionTooltip>\n                    {settingsVisible && <div className={bSettings('separator')} />}\n                </>\n            )}\n            {areSettingsVisible && (\n                <>\n                    <Button\n                        size=\"m\"\n                        view=\"flat\"\n                        pin=\"round-round\"\n                        onClick={togglePopup}\n                        ref={setChevronElement}\n                        qa=\"g-md-settings-button\"\n                        className={bSettings('dropdown-button')}\n                    >\n                        <Icon data={Gear} />\n                    </Button>\n                    <Popup\n                        open={popupShown}\n                        anchorElement={chevronElement}\n                        placement={placement}\n                        onOpenChange={hidePopup}\n                        zIndex={getTargetZIndex(LAYOUT.STICKY_TOOLBAR)}\n                    >\n                        <SettingsContent\n                            {...props}\n                            qa=\"g-md-settings-content\"\n                            onClose={hidePopup}\n                            className={bSettings('content')}\n                        />\n                    </Popup>\n                </>\n            )}\n        </div>\n    );\n});\n\nexport type SettingItems = 'mode' | 'toolbar' | 'split';\n\ntype SettingsContentProps = ClassNameProps &\n    QAProps & {\n        mode: MarkdownEditorMode;\n        onClose: () => void;\n        onModeChange: (mode: MarkdownEditorMode) => void;\n        onShowPreviewChange: (showPreview: boolean) => void;\n        showPreview: boolean;\n        toolbarVisibility: boolean;\n        settingsVisible?: SettingItems[] | boolean;\n        onToolbarVisibilityChange: (val: boolean) => void;\n        splitMode?: MarkdownEditorSplitMode;\n        splitModeEnabled?: boolean;\n        onSplitModeChange?: (splitModeEnabled: boolean) => void;\n        disableMark?: boolean;\n    };\n\nconst mdHelpPlacement: PopupPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];\n\nconst SettingsContent: React.FC<SettingsContentProps> = function SettingsContent({\n    mode,\n    onClose,\n    onModeChange,\n    toolbarVisibility,\n    onToolbarVisibilityChange,\n    onSplitModeChange,\n    splitMode = false,\n    splitModeEnabled,\n    className,\n    showPreview,\n    settingsVisible,\n    qa,\n    disableMark,\n}) {\n    const isSettingsArray = Array.isArray(settingsVisible);\n    const showModeSetting = isSettingsArray ? settingsVisible?.includes('mode') : true;\n    const showToolbarSetting = isSettingsArray ? settingsVisible?.includes('toolbar') : true;\n    const showSplitModeSetting = isSettingsArray ? settingsVisible?.includes('split') : true;\n\n    return (\n        <div className={bContent(null, [className])} data-qa={qa}>\n            {showModeSetting && (\n                <Menu size=\"l\" className={bContent('mode')}>\n                    <Menu.Item\n                        qa=\"g-md-settings-mode-wysiwyg\"\n                        active={mode === 'wysiwyg'}\n                        onClick={() => {\n                            onModeChange('wysiwyg');\n                            onClose();\n                        }}\n                        iconStart={<Icon data={WysiwygModeIcon} />}\n                    >\n                        {i18n('settings_wysiwyg')}\n                    </Menu.Item>\n                    <Menu.Item\n                        qa=\"g-md-settings-mode-markup\"\n                        active={mode === 'markup'}\n                        onClick={() => {\n                            onModeChange('markup');\n                            onClose();\n                        }}\n                        iconStart={<Icon data={LogoMarkdown} />}\n                    >\n                        {i18n('settings_markup')}\n                        {!disableMark && (\n                            <HelpMark\n                                popoverProps={{\n                                    placement: mdHelpPlacement,\n                                    modal: false,\n                                    zIndex: getTargetZIndex(LAYOUT.STICKY_TOOLBAR),\n                                }}\n                                className={bContent('mode-help')}\n                            >\n                                <div\n                                    onClick={(e) => {\n                                        // stop clicks propagation\n                                        // because otherwise click in MarkdownHints handled as click on MenuItem\n                                        e.stopPropagation();\n                                    }}\n                                >\n                                    <MarkdownHints />\n                                </div>\n                            </HelpMark>\n                        )}\n                    </Menu.Item>\n                </Menu>\n            )}\n            {showModeSetting && (showSplitModeSetting || showToolbarSetting) && (\n                <div className={bContent('separator')} />\n            )}\n            {showToolbarSetting && !showPreview && (\n                <div className={bContent('toolbar')}>\n                    <Checkbox\n                        size=\"m\"\n                        checked={toolbarVisibility}\n                        onUpdate={onToolbarVisibilityChange}\n                    >\n                        {i18n('settings_menubar')}\n                    </Checkbox>\n                    <div className={bContent('toolbar-hint')}>{i18n('settings_hint')}</div>\n                </div>\n            )}\n            {showSplitModeSetting && splitMode && (\n                <div className={bContent('split-mode')}>\n                    <Checkbox\n                        size=\"m\"\n                        disabled={mode !== 'markup'}\n                        checked={splitModeEnabled}\n                        onUpdate={onSplitModeChange ?? noop}\n                    >\n                        {i18n('settings_split-mode')}\n                    </Checkbox>\n                    <div className={bContent('toolbar-hint')}>\n                        {i18n('settings_split-mode-hint')}\n                    </div>\n                </div>\n            )}\n            <span className={bContent('version')}>{VERSION}</span>\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["bundle/settings/index.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport {memo, useState} from 'react';\n\nimport {Eye, Gear, LogoMarkdown} from '@gravity-ui/icons';\nimport {\n    ActionTooltip,\n    Button,\n    Checkbox,\n    HelpMark,\n    Icon,\n    Menu,\n    Popup,\n    type PopupPlacement,\n    type QAProps,\n} from '@gravity-ui/uikit';\n\nimport {type ClassNameProps, cn} from '../../classname';\nimport {i18n} from '../../i18n/bundle';\nimport WysiwygModeIcon from '../../icons/WysiwygMode';\nimport {noop} from '../../lodash';\nimport {useBooleanState} from '../../react-utils/hooks';\nimport {ToolbarTooltipDelay} from '../../toolbar';\nimport {VERSION} from '../../version';\nimport type {MarkdownEditorMode, MarkdownEditorSplitMode} from '../types';\n\nimport {MarkdownHints} from './MarkdownHints';\n\nimport './index.scss';\n\nconst placement: PopupPlacement = ['bottom-end', 'top-end'];\n\nconst bSettings = cn('editor-settings');\nconst bContent = cn('settings-content');\n\nexport type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {\n    renderPreviewButton?: boolean;\n    settingsVisible?: boolean | SettingItems[];\n};\n\nexport const EditorSettings = memo<EditorSettingsProps>(function EditorSettings(props) {\n    const {className, onShowPreviewChange, showPreview, renderPreviewButton, settingsVisible} =\n        props;\n    const [chevronElement, setChevronElement] = useState<HTMLButtonElement | null>(null);\n    const [popupShown, , hidePopup, togglePopup] = useBooleanState(false);\n\n    const areSettingsVisible =\n        settingsVisible === true || (Array.isArray(settingsVisible) && settingsVisible.length > 0);\n\n    return (\n        <div className={bSettings(null, [className])}>\n            {renderPreviewButton && (\n                <>\n                    <ActionTooltip\n                        openDelay={ToolbarTooltipDelay.Open}\n                        closeDelay={ToolbarTooltipDelay.Close}\n                        title={i18n('preview_hint')}\n                        hotkey=\"mod+shift+p\"\n                    >\n                        <Button\n                            qa=\"g-md-markup-preview-button\"\n                            size=\"m\"\n                            view=\"flat\"\n                            pin=\"round-round\"\n                            className={bSettings('preview-button')}\n                            onClick={() => onShowPreviewChange?.(!showPreview)}\n                            selected={showPreview}\n                        >\n                            <Icon data={Eye} />\n                        </Button>\n                    </ActionTooltip>\n                    {settingsVisible && <div className={bSettings('separator')} />}\n                </>\n            )}\n            {areSettingsVisible && (\n                <>\n                    <Button\n                        size=\"m\"\n                        view=\"flat\"\n                        pin=\"round-round\"\n                        onClick={togglePopup}\n                        ref={setChevronElement}\n                        qa=\"g-md-settings-button\"\n                        className={bSettings('dropdown-button')}\n                    >\n                        <Icon data={Gear} />\n                    </Button>\n                    <Popup\n                        open={popupShown}\n                        anchorElement={chevronElement}\n                        placement={placement}\n                        onOpenChange={hidePopup}\n                    >\n                        <SettingsContent\n                            {...props}\n                            qa=\"g-md-settings-content\"\n                            onClose={hidePopup}\n                            className={bSettings('content')}\n                        />\n                    </Popup>\n                </>\n            )}\n        </div>\n    );\n});\n\nexport type SettingItems = 'mode' | 'toolbar' | 'split';\n\ntype SettingsContentProps = ClassNameProps &\n    QAProps & {\n        mode: MarkdownEditorMode;\n        onClose: () => void;\n        onModeChange: (mode: MarkdownEditorMode) => void;\n        onShowPreviewChange: (showPreview: boolean) => void;\n        showPreview: boolean;\n        toolbarVisibility: boolean;\n        settingsVisible?: SettingItems[] | boolean;\n        onToolbarVisibilityChange: (val: boolean) => void;\n        splitMode?: MarkdownEditorSplitMode;\n        splitModeEnabled?: boolean;\n        onSplitModeChange?: (splitModeEnabled: boolean) => void;\n        disableMark?: boolean;\n    };\n\nconst mdHelpPlacement: PopupPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];\n\nconst SettingsContent: React.FC<SettingsContentProps> = function SettingsContent({\n    mode,\n    onClose,\n    onModeChange,\n    toolbarVisibility,\n    onToolbarVisibilityChange,\n    onSplitModeChange,\n    splitMode = false,\n    splitModeEnabled,\n    className,\n    showPreview,\n    settingsVisible,\n    qa,\n    disableMark,\n}) {\n    const isSettingsArray = Array.isArray(settingsVisible);\n    const showModeSetting = isSettingsArray ? settingsVisible?.includes('mode') : true;\n    const showToolbarSetting = isSettingsArray ? settingsVisible?.includes('toolbar') : true;\n    const showSplitModeSetting = isSettingsArray ? settingsVisible?.includes('split') : true;\n\n    return (\n        <div className={bContent(null, [className])} data-qa={qa}>\n            {showModeSetting && (\n                <Menu size=\"l\" className={bContent('mode')}>\n                    <Menu.Item\n                        qa=\"g-md-settings-mode-wysiwyg\"\n                        active={mode === 'wysiwyg'}\n                        onClick={() => {\n                            onModeChange('wysiwyg');\n                            onClose();\n                        }}\n                        iconStart={<Icon data={WysiwygModeIcon} />}\n                    >\n                        {i18n('settings_wysiwyg')}\n                    </Menu.Item>\n                    <Menu.Item\n                        qa=\"g-md-settings-mode-markup\"\n                        active={mode === 'markup'}\n                        onClick={() => {\n                            onModeChange('markup');\n                            onClose();\n                        }}\n                        iconStart={<Icon data={LogoMarkdown} />}\n                    >\n                        {i18n('settings_markup')}\n                        {!disableMark && (\n                            <HelpMark\n                                popoverProps={{\n                                    placement: mdHelpPlacement,\n                                    modal: false,\n                                }}\n                                className={bContent('mode-help')}\n                            >\n                                <div\n                                    onClick={(e) => {\n                                        // stop clicks propagation\n                                        // because otherwise click in MarkdownHints handled as click on MenuItem\n                                        e.stopPropagation();\n                                    }}\n                                >\n                                    <MarkdownHints />\n                                </div>\n                            </HelpMark>\n                        )}\n                    </Menu.Item>\n                </Menu>\n            )}\n            {showModeSetting && (showSplitModeSetting || showToolbarSetting) && (\n                <div className={bContent('separator')} />\n            )}\n            {showToolbarSetting && !showPreview && (\n                <div className={bContent('toolbar')}>\n                    <Checkbox\n                        size=\"m\"\n                        checked={toolbarVisibility}\n                        onUpdate={onToolbarVisibilityChange}\n                    >\n                        {i18n('settings_menubar')}\n                    </Checkbox>\n                    <div className={bContent('toolbar-hint')}>{i18n('settings_hint')}</div>\n                </div>\n            )}\n            {showSplitModeSetting && splitMode && (\n                <div className={bContent('split-mode')}>\n                    <Checkbox\n                        size=\"m\"\n                        disabled={mode !== 'markup'}\n                        checked={splitModeEnabled}\n                        onUpdate={onSplitModeChange ?? noop}\n                    >\n                        {i18n('settings_split-mode')}\n                    </Checkbox>\n                    <div className={bContent('toolbar-hint')}>\n                        {i18n('settings_split-mode-hint')}\n                    </div>\n                </div>\n            )}\n            <span className={bContent('version')}>{VERSION}</span>\n        </div>\n    );\n};\n"]}

package/build/esm/bundle/toolbar/ToolbarButtonWithPopupMenu.js

@@ -2,8 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useMemo } from 'react';
 import { ChevronDown } from '@gravity-ui/icons';
 import { ActionTooltip, Button, Icon, Menu, Popup, } from '@gravity-ui/uikit';
-import { LAYOUT } from "../../common/layout.js";
-import { getTargetZIndex } from "../../utils/get-target-z-index.js";
 import { cn } from "../../classname.js";
 import { groupBy, isFunction } from "../../lodash.js";
 import { useBooleanState, useElementState } from "../../react-utils/hooks.js";
@@ -33,7 +31,7 @@ export const ToolbarButtonWithPopupMenu = ({ disablePortal, className, focus, on
     return (_jsxs(_Fragment, { children: [_jsx(ActionTooltip, { disabled: popupOpen, openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, title: textTitle, children: _jsxs(Button, { size: "m", ref: setAnchorElement, view: btnView, selected: btnSelected, disabled: everyDisabled, className: b(null, [className]), onClick: toggleOpen, "aria-label": textTitle, qa: qa, ...props, children: [_jsx(Icon, { data: icon.data, size: icon.size, className: iconClassName }), '', _jsx(Icon, { data: ChevronDown, className: chevronIconClassName })] }) }), _jsx(Popup, { open: popupOpen, disablePortal: disablePortal, anchorElement: anchorElement, onOpenChange: (open) => {
                     if (!open)
                         hide();
-                }, zIndex: getTargetZIndex(LAYOUT.STICKY_TOOLBAR), children: _jsx(Menu, { size: "l", qa: qaMenu, "data-toolbar-menu-for": textTitle, children: Object.entries(groups).map(([label, items], key) => {
+                }, children: _jsx(Menu, { size: "l", qa: qaMenu, "data-toolbar-menu-for": textTitle, children: Object.entries(groups).map(([label, items], key) => {
                         return (_jsx(Menu.Group, { label: label, className: b('menu-group'), children: items.map(({ id, icon, iconSize = 16, action, text, iconClassname }) => (_jsx(Menu.Item, { iconStart: _jsx(Icon, { data: icon, size: iconSize, className: iconClassname }), active: action.isActive(), disabled: !action.isEnable(), onClick: () => {
                                     hide();
                                     focus();

package/build/esm/bundle/toolbar/ToolbarButtonWithPopupMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButtonWithPopupMenu.js","sourceRoot":"../../../../src","sources":["bundle/toolbar/ToolbarButtonWithPopupMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useEffect, useMemo} from 'react';\n\nimport {ChevronDown} from '@gravity-ui/icons';\nimport {\n    ActionTooltip,\n    Button,\n    Icon,\n    type IconProps,\n    Menu,\n    Popup,\n    type PopupProps,\n} from '@gravity-ui/uikit';\n\nimport {LAYOUT} from 'src/common/layout';\nimport {getTargetZIndex} from 'src/utils/get-target-z-index';\n\nimport {cn} from '../../classname';\nimport type {Action} from '../../core';\nimport {groupBy, isFunction} from '../../lodash';\nimport {useBooleanState, useElementState} from '../../react-utils/hooks';\nimport {type ToolbarBaseProps, type ToolbarIconData, ToolbarTooltipDelay} from '../../toolbar';\n\nimport './ToolbarButtonWithPopupMenu.scss';\nconst b = cn('toolbar-button-with-popup-menu');\n\nexport type MenuItem = {\n    id: string;\n    action: Action;\n    icon: IconProps['data'];\n    text: string;\n    iconSize?: IconProps['size'];\n    iconClassname?: string;\n    group?: string;\n    ignoreActive?: boolean;\n};\n\nexport type ToolbarButtonWithPopupMenuProps = Pick<\n    ToolbarBaseProps<never>,\n    'className' | 'focus' | 'onClick' | 'qa'\n> &\n    Pick<PopupProps, 'disablePortal'> & {\n        icon: ToolbarIconData;\n        iconClassName?: string;\n        chevronIconClassName?: string;\n        title: string | (() => string);\n        menuItems: MenuItem[];\n        /** @default 'classic' */\n        _selectionType?: 'classic' | 'light';\n        qaMenu?: string;\n    };\n\nexport const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProps> = ({\n    disablePortal,\n    className,\n    focus,\n    onClick,\n    icon,\n    iconClassName,\n    chevronIconClassName,\n    title,\n    menuItems,\n    _selectionType,\n    qa,\n    qaMenu,\n    ...props\n}) => {\n    const [anchorElement, setAnchorElement] = useElementState();\n    const [open, , hide, toggleOpen] = useBooleanState(false);\n    const groups = useMemo(\n        () =>\n            groupBy(\n                menuItems.map((i) => ({...i, group: i.group || ''})),\n                'group',\n            ),\n        [menuItems],\n    );\n\n    const someActive = menuItems.some(\n        (item) => !item.ignoreActive && item.action.isActive() === true,\n    );\n    const everyDisabled = menuItems.every((item) => item.action.isEnable() === false);\n\n    const popupOpen = everyDisabled ? false : open;\n    const shouldForceHide = open && !popupOpen;\n    useEffect(() => {\n        if (shouldForceHide) {\n            hide();\n        }\n    }, [hide, shouldForceHide]);\n\n    const [btnView, btnSelected] =\n        _selectionType === 'light'\n            ? ([\n                  popupOpen ? 'normal' : someActive ? 'flat-action' : 'flat',\n                  popupOpen && someActive,\n              ] as const)\n            : ([someActive || popupOpen ? 'normal' : 'flat', someActive] as const);\n\n    const textTitle = isFunction(title) ? title() : title;\n\n    return (\n        <>\n            <ActionTooltip\n                disabled={popupOpen}\n                openDelay={ToolbarTooltipDelay.Open}\n                closeDelay={ToolbarTooltipDelay.Close}\n                title={textTitle}\n            >\n                <Button\n                    size=\"m\"\n                    ref={setAnchorElement}\n                    view={btnView}\n                    selected={btnSelected}\n                    disabled={everyDisabled}\n                    className={b(null, [className])}\n                    onClick={toggleOpen}\n                    aria-label={textTitle}\n                    qa={qa}\n                    {...props}\n                >\n                    <Icon data={icon.data} size={icon.size} className={iconClassName} />\n                    {''}\n                    <Icon data={ChevronDown} className={chevronIconClassName} />\n                </Button>\n            </ActionTooltip>\n            <Popup\n                open={popupOpen}\n                disablePortal={disablePortal}\n                anchorElement={anchorElement}\n                onOpenChange={(open) => {\n                    if (!open) hide();\n                }}\n                zIndex={getTargetZIndex(LAYOUT.STICKY_TOOLBAR)}\n            >\n                <Menu size=\"l\" qa={qaMenu} data-toolbar-menu-for={textTitle}>\n                    {Object.entries(groups).map(([label, items], key) => {\n                        return (\n                            <Menu.Group label={label} key={key} className={b('menu-group')}>\n                                {items.map(\n                                    ({id, icon, iconSize = 16, action, text, iconClassname}) => (\n                                        <Menu.Item\n                                            key={id}\n                                            iconStart={\n                                                <Icon\n                                                    data={icon}\n                                                    size={iconSize}\n                                                    className={iconClassname}\n                                                />\n                                            }\n                                            active={action.isActive()}\n                                            disabled={!action.isEnable()}\n                                            onClick={() => {\n                                                hide();\n                                                focus();\n                                                action.run();\n                                                onClick?.(id);\n                                            }}\n                                            extraProps={{'aria-label': text}}\n                                        >\n                                            {text}\n                                        </Menu.Item>\n                                    ),\n                                )}\n                            </Menu.Group>\n                        );\n                    })}\n                </Menu>\n            </Popup>\n        </>\n    );\n};\n"]}
+{"version":3,"file":"ToolbarButtonWithPopupMenu.js","sourceRoot":"../../../../src","sources":["bundle/toolbar/ToolbarButtonWithPopupMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useEffect, useMemo} from 'react';\n\nimport {ChevronDown} from '@gravity-ui/icons';\nimport {\n    ActionTooltip,\n    Button,\n    Icon,\n    type IconProps,\n    Menu,\n    Popup,\n    type PopupProps,\n} from '@gravity-ui/uikit';\n\nimport {cn} from '../../classname';\nimport type {Action} from '../../core';\nimport {groupBy, isFunction} from '../../lodash';\nimport {useBooleanState, useElementState} from '../../react-utils/hooks';\nimport {type ToolbarBaseProps, type ToolbarIconData, ToolbarTooltipDelay} from '../../toolbar';\n\nimport './ToolbarButtonWithPopupMenu.scss';\nconst b = cn('toolbar-button-with-popup-menu');\n\nexport type MenuItem = {\n    id: string;\n    action: Action;\n    icon: IconProps['data'];\n    text: string;\n    iconSize?: IconProps['size'];\n    iconClassname?: string;\n    group?: string;\n    ignoreActive?: boolean;\n};\n\nexport type ToolbarButtonWithPopupMenuProps = Pick<\n    ToolbarBaseProps<never>,\n    'className' | 'focus' | 'onClick' | 'qa'\n> &\n    Pick<PopupProps, 'disablePortal'> & {\n        icon: ToolbarIconData;\n        iconClassName?: string;\n        chevronIconClassName?: string;\n        title: string | (() => string);\n        menuItems: MenuItem[];\n        /** @default 'classic' */\n        _selectionType?: 'classic' | 'light';\n        qaMenu?: string;\n    };\n\nexport const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProps> = ({\n    disablePortal,\n    className,\n    focus,\n    onClick,\n    icon,\n    iconClassName,\n    chevronIconClassName,\n    title,\n    menuItems,\n    _selectionType,\n    qa,\n    qaMenu,\n    ...props\n}) => {\n    const [anchorElement, setAnchorElement] = useElementState();\n    const [open, , hide, toggleOpen] = useBooleanState(false);\n    const groups = useMemo(\n        () =>\n            groupBy(\n                menuItems.map((i) => ({...i, group: i.group || ''})),\n                'group',\n            ),\n        [menuItems],\n    );\n\n    const someActive = menuItems.some(\n        (item) => !item.ignoreActive && item.action.isActive() === true,\n    );\n    const everyDisabled = menuItems.every((item) => item.action.isEnable() === false);\n\n    const popupOpen = everyDisabled ? false : open;\n    const shouldForceHide = open && !popupOpen;\n    useEffect(() => {\n        if (shouldForceHide) {\n            hide();\n        }\n    }, [hide, shouldForceHide]);\n\n    const [btnView, btnSelected] =\n        _selectionType === 'light'\n            ? ([\n                  popupOpen ? 'normal' : someActive ? 'flat-action' : 'flat',\n                  popupOpen && someActive,\n              ] as const)\n            : ([someActive || popupOpen ? 'normal' : 'flat', someActive] as const);\n\n    const textTitle = isFunction(title) ? title() : title;\n\n    return (\n        <>\n            <ActionTooltip\n                disabled={popupOpen}\n                openDelay={ToolbarTooltipDelay.Open}\n                closeDelay={ToolbarTooltipDelay.Close}\n                title={textTitle}\n            >\n                <Button\n                    size=\"m\"\n                    ref={setAnchorElement}\n                    view={btnView}\n                    selected={btnSelected}\n                    disabled={everyDisabled}\n                    className={b(null, [className])}\n                    onClick={toggleOpen}\n                    aria-label={textTitle}\n                    qa={qa}\n                    {...props}\n                >\n                    <Icon data={icon.data} size={icon.size} className={iconClassName} />\n                    {''}\n                    <Icon data={ChevronDown} className={chevronIconClassName} />\n                </Button>\n            </ActionTooltip>\n            <Popup\n                open={popupOpen}\n                disablePortal={disablePortal}\n                anchorElement={anchorElement}\n                onOpenChange={(open) => {\n                    if (!open) hide();\n                }}\n            >\n                <Menu size=\"l\" qa={qaMenu} data-toolbar-menu-for={textTitle}>\n                    {Object.entries(groups).map(([label, items], key) => {\n                        return (\n                            <Menu.Group label={label} key={key} className={b('menu-group')}>\n                                {items.map(\n                                    ({id, icon, iconSize = 16, action, text, iconClassname}) => (\n                                        <Menu.Item\n                                            key={id}\n                                            iconStart={\n                                                <Icon\n                                                    data={icon}\n                                                    size={iconSize}\n                                                    className={iconClassname}\n                                                />\n                                            }\n                                            active={action.isActive()}\n                                            disabled={!action.isEnable()}\n                                            onClick={() => {\n                                                hide();\n                                                focus();\n                                                action.run();\n                                                onClick?.(id);\n                                            }}\n                                            extraProps={{'aria-label': text}}\n                                        >\n                                            {text}\n                                        </Menu.Item>\n                                    ),\n                                )}\n                            </Menu.Group>\n                        );\n                    })}\n                </Menu>\n            </Popup>\n        </>\n    );\n};\n"]}

package/build/esm/toolbar/ToolbarListButton.js

@@ -2,8 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Fragment, useEffect, useState } from 'react';
 import { ChevronDown } from '@gravity-ui/icons';
 import { HelpMark, Hotkey, Icon, Menu, Popover, Popup } from '@gravity-ui/uikit';
-import { LAYOUT } from "../common/layout.js";
-import { getTargetZIndex } from "../utils/get-target-z-index.js";
 import { cn } from "../classname.js";
 import { i18n } from "../i18n/common/index.js";
 import { isFunction } from "../lodash.js";
@@ -42,7 +40,7 @@ export function ToolbarListButton({ className, editor, focus, onClick, icon, tit
                         setPopupItem(undefined);
                     else
                         toggleOpen();
-                }, disableTooltip: disableTooltip || popupOpen, children: buttonContent }), _jsx(Popup, { anchorElement: anchorElement, open: popupOpen, onOpenChange: hide, zIndex: getTargetZIndex(LAYOUT.STICKY_TOOLBAR), children: _jsx(Menu, { size: "l", className: b('menu'), qa: qaMenu, "data-toolbar-menu-for": titleText, children: data
+                }, disableTooltip: disableTooltip || popupOpen, children: buttonContent }), _jsx(Popup, { anchorElement: anchorElement, open: popupOpen, onOpenChange: hide, children: _jsx(Menu, { size: "l", className: b('menu'), qa: qaMenu, "data-toolbar-menu-for": titleText, children: data
                         .map((data) => {
                         const { id, title, icon, hotkey, isActive, isEnable, exec, hint, hintWhenDisabled, preview, } = data;
                         const titleText = isFunction(title) ? title() : title;

package/build/esm/toolbar/ToolbarListButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarListButton.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarListButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Fragment, useEffect, useState} from 'react';\n\nimport {ChevronDown} from '@gravity-ui/icons';\nimport {HelpMark, Hotkey, Icon, Menu, Popover, Popup} from '@gravity-ui/uikit';\n\nimport {LAYOUT} from 'src/common/layout';\nimport {getTargetZIndex} from 'src/utils/get-target-z-index';\n\nimport {cn} from '../classname';\nimport {i18n} from '../i18n/common';\nimport {isFunction} from '../lodash';\nimport {useBooleanState, useElementState} from '../react-utils/hooks';\n\nimport {PreviewTooltip} from './PreviewTooltip';\nimport {ToolbarButtonView} from './ToolbarButton';\nimport type {\n    ToolbarBaseProps,\n    ToolbarButtonPopupData,\n    ToolbarItemData,\n    ToolbarListButtonData,\n} from './types';\n\nimport './ToolbarListButton.scss';\n\nconst b = cn('toolbar-list-button');\n\nexport type {ToolbarListButtonData};\n\nexport type ToolbarListButtonProps<E> = ToolbarBaseProps<E> &\n    ToolbarListButtonData<E> & {\n        qaMenu?: string;\n        qaActionDisabledPopover?: string;\n    };\n\nexport function ToolbarListButton<E>({\n    className,\n    editor,\n    focus,\n    onClick,\n    icon,\n    title,\n    withArrow,\n    data,\n    alwaysActive,\n    replaceActiveIcon,\n    qa,\n    qaMenu,\n    qaActionDisabledPopover = 'g-md-toolbar-action-disabled-hint',\n    disableHotkey,\n    disablePreview,\n    disableTooltip,\n}: ToolbarListButtonProps<E>) {\n    const [anchorElement, setAnchorElement] = useElementState();\n    const [open, , hide, toggleOpen] = useBooleanState(false);\n    const [popupItem, setPopupItem] = useState<ToolbarButtonPopupData<E>>();\n\n    const everyDisabled = alwaysActive ? false : data.every((item) => !item.isEnable(editor));\n    const popupOpen = everyDisabled ? false : open;\n    const shouldForceHide = open && !popupOpen;\n\n    useEffect(() => {\n        if (shouldForceHide) {\n            hide();\n        }\n    }, [hide, shouldForceHide]);\n\n    if (data.length === 0) return null;\n\n    const activeItem = data.find((item) => item.isActive(editor) && !item.doNotActivateList);\n    const someActive = alwaysActive ? false : Boolean(activeItem);\n\n    if (replaceActiveIcon && someActive && activeItem) {\n        icon = activeItem.icon;\n    }\n\n    const buttonContent = [<Icon key={1} data={icon.data} size={icon.size ?? 16} />];\n    if (withArrow) {\n        buttonContent.push(<Fragment key={2}>{''}</Fragment>);\n        buttonContent.push(<Icon key={3} data={ChevronDown} size={16} />);\n    }\n    const titleText: string = isFunction(title) ? title() : title;\n\n    return (\n        <>\n            <ToolbarButtonView\n                qa={qa}\n                ref={setAnchorElement}\n                active={someActive}\n                enabled={!everyDisabled}\n                title={title}\n                className={b({arrow: withArrow}, [className])}\n                onClick={() => {\n                    if (popupItem) setPopupItem(undefined);\n                    else toggleOpen();\n                }}\n                disableTooltip={disableTooltip || popupOpen}\n            >\n                {buttonContent}\n            </ToolbarButtonView>\n            <Popup\n                anchorElement={anchorElement}\n                open={popupOpen}\n                onOpenChange={hide}\n                zIndex={getTargetZIndex(LAYOUT.STICKY_TOOLBAR)}\n            >\n                <Menu size=\"l\" className={b('menu')} qa={qaMenu} data-toolbar-menu-for={titleText}>\n                    {data\n                        .map((data) => {\n                            const {\n                                id,\n                                title,\n                                icon,\n                                hotkey,\n                                isActive,\n                                isEnable,\n                                exec,\n                                hint,\n                                hintWhenDisabled,\n                                preview,\n                            } = data;\n\n                            const titleText = isFunction(title) ? title() : title;\n                            const hintText = isFunction(hint) ? hint() : hint;\n\n                            const disabled = !isEnable(editor);\n\n                            const hideHintWhenDisabled = hintWhenDisabled === false || !disabled;\n                            const hintWhenDisabledText =\n                                typeof hintWhenDisabled === 'string'\n                                    ? hintWhenDisabled\n                                    : typeof hintWhenDisabled === 'function'\n                                      ? hintWhenDisabled()\n                                      : i18n('toolbar_action_disabled');\n\n                            const handleClick = () => {\n                                hide();\n\n                                if (isPopupItem(data)) {\n                                    setPopupItem(data);\n                                } else {\n                                    setPopupItem(undefined);\n                                    focus();\n                                    exec(editor);\n                                    onClick?.(id);\n                                }\n                            };\n\n                            return (\n                                <Popover\n                                    className={b('action-disabled-popover')}\n                                    content={\n                                        <div className={b('action-disabled-tooltip')}>\n                                            {hintWhenDisabledText}\n                                        </div>\n                                    }\n                                    placement=\"left\"\n                                    modal={false}\n                                    disabled={hideHintWhenDisabled}\n                                    qa={qaActionDisabledPopover}\n                                    key={id}\n                                >\n                                    {(props, ref) => (\n                                        <PreviewTooltip preview={preview} disabled={disablePreview}>\n                                            <Menu.Item\n                                                key={id}\n                                                ref={ref}\n                                                active={isActive(editor)}\n                                                disabled={!isEnable(editor)}\n                                                onClick={handleClick}\n                                                iconStart={\n                                                    <Icon data={icon.data} size={icon.size ?? 16} />\n                                                }\n                                                extraProps={{\n                                                    ...props,\n                                                    'aria-label': titleText,\n                                                }}\n                                            >\n                                                <div className={b('item')}>\n                                                    {titleText}\n                                                    {!disableHotkey && (\n                                                        <div className={b('extra')}>\n                                                            {hotkey && <Hotkey value={hotkey} />}\n                                                            {hintText && (\n                                                                <HelpMark\n                                                                    className={b('hint')}\n                                                                    popoverProps={{modal: false}}\n                                                                >\n                                                                    {hintText}\n                                                                </HelpMark>\n                                                            )}\n                                                        </div>\n                                                    )}\n                                                </div>\n                                            </Menu.Item>\n                                        </PreviewTooltip>\n                                    )}\n                                </Popover>\n                            );\n                        })\n                        .filter(Boolean)}\n                </Menu>\n            </Popup>\n            {popupItem\n                ? popupItem.renderPopup({\n                      ...popupItem,\n                      editor,\n                      focus,\n                      onClick,\n                      anchorElement,\n                      hide: () => setPopupItem(undefined),\n                  })\n                : null}\n        </>\n    );\n}\n\nfunction isPopupItem<E>(item: ToolbarItemData<E>): item is ToolbarButtonPopupData<E> {\n    return Boolean((item as ToolbarButtonPopupData<E>).renderPopup);\n}\n"]}
+{"version":3,"file":"ToolbarListButton.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarListButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Fragment, useEffect, useState} from 'react';\n\nimport {ChevronDown} from '@gravity-ui/icons';\nimport {HelpMark, Hotkey, Icon, Menu, Popover, Popup} from '@gravity-ui/uikit';\n\nimport {cn} from '../classname';\nimport {i18n} from '../i18n/common';\nimport {isFunction} from '../lodash';\nimport {useBooleanState, useElementState} from '../react-utils/hooks';\n\nimport {PreviewTooltip} from './PreviewTooltip';\nimport {ToolbarButtonView} from './ToolbarButton';\nimport type {\n    ToolbarBaseProps,\n    ToolbarButtonPopupData,\n    ToolbarItemData,\n    ToolbarListButtonData,\n} from './types';\n\nimport './ToolbarListButton.scss';\n\nconst b = cn('toolbar-list-button');\n\nexport type {ToolbarListButtonData};\n\nexport type ToolbarListButtonProps<E> = ToolbarBaseProps<E> &\n    ToolbarListButtonData<E> & {\n        qaMenu?: string;\n        qaActionDisabledPopover?: string;\n    };\n\nexport function ToolbarListButton<E>({\n    className,\n    editor,\n    focus,\n    onClick,\n    icon,\n    title,\n    withArrow,\n    data,\n    alwaysActive,\n    replaceActiveIcon,\n    qa,\n    qaMenu,\n    qaActionDisabledPopover = 'g-md-toolbar-action-disabled-hint',\n    disableHotkey,\n    disablePreview,\n    disableTooltip,\n}: ToolbarListButtonProps<E>) {\n    const [anchorElement, setAnchorElement] = useElementState();\n    const [open, , hide, toggleOpen] = useBooleanState(false);\n    const [popupItem, setPopupItem] = useState<ToolbarButtonPopupData<E>>();\n\n    const everyDisabled = alwaysActive ? false : data.every((item) => !item.isEnable(editor));\n    const popupOpen = everyDisabled ? false : open;\n    const shouldForceHide = open && !popupOpen;\n\n    useEffect(() => {\n        if (shouldForceHide) {\n            hide();\n        }\n    }, [hide, shouldForceHide]);\n\n    if (data.length === 0) return null;\n\n    const activeItem = data.find((item) => item.isActive(editor) && !item.doNotActivateList);\n    const someActive = alwaysActive ? false : Boolean(activeItem);\n\n    if (replaceActiveIcon && someActive && activeItem) {\n        icon = activeItem.icon;\n    }\n\n    const buttonContent = [<Icon key={1} data={icon.data} size={icon.size ?? 16} />];\n    if (withArrow) {\n        buttonContent.push(<Fragment key={2}>{''}</Fragment>);\n        buttonContent.push(<Icon key={3} data={ChevronDown} size={16} />);\n    }\n    const titleText: string = isFunction(title) ? title() : title;\n\n    return (\n        <>\n            <ToolbarButtonView\n                qa={qa}\n                ref={setAnchorElement}\n                active={someActive}\n                enabled={!everyDisabled}\n                title={title}\n                className={b({arrow: withArrow}, [className])}\n                onClick={() => {\n                    if (popupItem) setPopupItem(undefined);\n                    else toggleOpen();\n                }}\n                disableTooltip={disableTooltip || popupOpen}\n            >\n                {buttonContent}\n            </ToolbarButtonView>\n            <Popup anchorElement={anchorElement} open={popupOpen} onOpenChange={hide}>\n                <Menu size=\"l\" className={b('menu')} qa={qaMenu} data-toolbar-menu-for={titleText}>\n                    {data\n                        .map((data) => {\n                            const {\n                                id,\n                                title,\n                                icon,\n                                hotkey,\n                                isActive,\n                                isEnable,\n                                exec,\n                                hint,\n                                hintWhenDisabled,\n                                preview,\n                            } = data;\n\n                            const titleText = isFunction(title) ? title() : title;\n                            const hintText = isFunction(hint) ? hint() : hint;\n\n                            const disabled = !isEnable(editor);\n\n                            const hideHintWhenDisabled = hintWhenDisabled === false || !disabled;\n                            const hintWhenDisabledText =\n                                typeof hintWhenDisabled === 'string'\n                                    ? hintWhenDisabled\n                                    : typeof hintWhenDisabled === 'function'\n                                      ? hintWhenDisabled()\n                                      : i18n('toolbar_action_disabled');\n\n                            const handleClick = () => {\n                                hide();\n\n                                if (isPopupItem(data)) {\n                                    setPopupItem(data);\n                                } else {\n                                    setPopupItem(undefined);\n                                    focus();\n                                    exec(editor);\n                                    onClick?.(id);\n                                }\n                            };\n\n                            return (\n                                <Popover\n                                    className={b('action-disabled-popover')}\n                                    content={\n                                        <div className={b('action-disabled-tooltip')}>\n                                            {hintWhenDisabledText}\n                                        </div>\n                                    }\n                                    placement=\"left\"\n                                    modal={false}\n                                    disabled={hideHintWhenDisabled}\n                                    qa={qaActionDisabledPopover}\n                                    key={id}\n                                >\n                                    {(props, ref) => (\n                                        <PreviewTooltip preview={preview} disabled={disablePreview}>\n                                            <Menu.Item\n                                                key={id}\n                                                ref={ref}\n                                                active={isActive(editor)}\n                                                disabled={!isEnable(editor)}\n                                                onClick={handleClick}\n                                                iconStart={\n                                                    <Icon data={icon.data} size={icon.size ?? 16} />\n                                                }\n                                                extraProps={{\n                                                    ...props,\n                                                    'aria-label': titleText,\n                                                }}\n                                            >\n                                                <div className={b('item')}>\n                                                    {titleText}\n                                                    {!disableHotkey && (\n                                                        <div className={b('extra')}>\n                                                            {hotkey && <Hotkey value={hotkey} />}\n                                                            {hintText && (\n                                                                <HelpMark\n                                                                    className={b('hint')}\n                                                                    popoverProps={{modal: false}}\n                                                                >\n                                                                    {hintText}\n                                                                </HelpMark>\n                                                            )}\n                                                        </div>\n                                                    )}\n                                                </div>\n                                            </Menu.Item>\n                                        </PreviewTooltip>\n                                    )}\n                                </Popover>\n                            );\n                        })\n                        .filter(Boolean)}\n                </Menu>\n            </Popup>\n            {popupItem\n                ? popupItem.renderPopup({\n                      ...popupItem,\n                      editor,\n                      focus,\n                      onClick,\n                      anchorElement,\n                      hide: () => setPopupItem(undefined),\n                  })\n                : null}\n        </>\n    );\n}\n\nfunction isPopupItem<E>(item: ToolbarItemData<E>): item is ToolbarButtonPopupData<E> {\n    return Boolean((item as ToolbarButtonPopupData<E>).renderPopup);\n}\n"]}

package/build/esm/version.js

@@ -1,3 +1,3 @@
 /** During build process, the current version will be injected here */
-export const VERSION = typeof '15.22.1' !== 'undefined' ? '15.22.1' : 'unknown';
+export const VERSION = typeof '15.22.2' !== 'undefined' ? '15.22.2' : 'unknown';
 //# sourceMappingURL=version.js.map

package/build/esm/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"../../src","sources":["version.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC","sourcesContent":["/** During build process, the current version will be injected here */\nexport const VERSION = typeof '15.22.1' !== 'undefined' ? '15.22.1' : 'unknown';\n"]}
+{"version":3,"file":"version.js","sourceRoot":"../../src","sources":["version.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC","sourcesContent":["/** During build process, the current version will be injected here */\nexport const VERSION = typeof '15.22.2' !== 'undefined' ? '15.22.2' : 'unknown';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "15.22.1",
+  "version": "15.22.2",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {

package/build/cjs/common/layout.d.ts

@@ -1,3 +0,0 @@
-export declare const LAYOUT: {
-    STICKY_TOOLBAR: string;
-};

package/build/cjs/common/layout.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LAYOUT = void 0;
-exports.LAYOUT = {
-    STICKY_TOOLBAR: 'sticky-toolbar',
-};
-//# sourceMappingURL=layout.js.map

package/build/cjs/common/layout.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"layout.js","sourceRoot":"../../../src","sources":["common/layout.ts"],"names":[],"mappings":";;;AAAa,QAAA,MAAM,GAAG;IAClB,cAAc,EAAE,gBAAgB;CACnC,CAAC","sourcesContent":["export const LAYOUT = {\n    STICKY_TOOLBAR: 'sticky-toolbar',\n};\n"]}

package/build/cjs/utils/get-target-z-index.d.ts

@@ -1 +0,0 @@
-export declare function getTargetZIndex(dataLayoutSelector: string, offset?: number): number;

package/build/cjs/utils/get-target-z-index.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTargetZIndex = getTargetZIndex;
-function getTargetZIndex(dataLayoutSelector, offset = 10) {
-    const targetLayerElement = document.querySelector(`[data-layout="${dataLayoutSelector}"]`);
-    if (!targetLayerElement) {
-        return offset;
-    }
-    const computedStyle = window.getComputedStyle(targetLayerElement);
-    const targetZIndex = parseInt(computedStyle.zIndex, 10);
-    return Number.isFinite(targetZIndex) ? targetZIndex + offset : offset;
-}
-//# sourceMappingURL=get-target-z-index.js.map

package/build/cjs/utils/get-target-z-index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-target-z-index.js","sourceRoot":"../../../src","sources":["utils/get-target-z-index.ts"],"names":[],"mappings":";;AAAA,0CAWC;AAXD,SAAgB,eAAe,CAAC,kBAA0B,EAAE,MAAM,GAAG,EAAE;IACnE,MAAM,kBAAkB,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,kBAAkB,IAAI,CAAC,CAAC;IAE3F,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACtB,OAAO,MAAM,CAAC;IAClB,CAAC;IAED,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;IAClE,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IAExD,OAAO,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;AAC1E,CAAC","sourcesContent":["export function getTargetZIndex(dataLayoutSelector: string, offset = 10) {\n    const targetLayerElement = document.querySelector(`[data-layout=\"${dataLayoutSelector}\"]`);\n\n    if (!targetLayerElement) {\n        return offset;\n    }\n\n    const computedStyle = window.getComputedStyle(targetLayerElement);\n    const targetZIndex = parseInt(computedStyle.zIndex, 10);\n\n    return Number.isFinite(targetZIndex) ? targetZIndex + offset : offset;\n}\n"]}

package/build/esm/common/layout.d.ts

@@ -1,3 +0,0 @@
-export declare const LAYOUT: {
-    STICKY_TOOLBAR: string;
-};

package/build/esm/common/layout.js

@@ -1,4 +0,0 @@
-export const LAYOUT = {
-    STICKY_TOOLBAR: 'sticky-toolbar',
-};
-//# sourceMappingURL=layout.js.map

package/build/esm/common/layout.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"layout.js","sourceRoot":"../../../src","sources":["common/layout.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,cAAc,EAAE,gBAAgB;CACnC,CAAC","sourcesContent":["export const LAYOUT = {\n    STICKY_TOOLBAR: 'sticky-toolbar',\n};\n"]}

package/build/esm/utils/get-target-z-index.d.ts

@@ -1 +0,0 @@
-export declare function getTargetZIndex(dataLayoutSelector: string, offset?: number): number;

package/build/esm/utils/get-target-z-index.js

@@ -1,10 +0,0 @@
-export function getTargetZIndex(dataLayoutSelector, offset = 10) {
-    const targetLayerElement = document.querySelector(`[data-layout="${dataLayoutSelector}"]`);
-    if (!targetLayerElement) {
-        return offset;
-    }
-    const computedStyle = window.getComputedStyle(targetLayerElement);
-    const targetZIndex = parseInt(computedStyle.zIndex, 10);
-    return Number.isFinite(targetZIndex) ? targetZIndex + offset : offset;
-}
-//# sourceMappingURL=get-target-z-index.js.map

package/build/esm/utils/get-target-z-index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-target-z-index.js","sourceRoot":"../../../src","sources":["utils/get-target-z-index.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,eAAe,CAAC,kBAA0B,EAAE,MAAM,GAAG,EAAE;IACnE,MAAM,kBAAkB,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,kBAAkB,IAAI,CAAC,CAAC;IAE3F,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACtB,OAAO,MAAM,CAAC;IAClB,CAAC;IAED,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;IAClE,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IAExD,OAAO,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;AAC1E,CAAC","sourcesContent":["export function getTargetZIndex(dataLayoutSelector: string, offset = 10) {\n    const targetLayerElement = document.querySelector(`[data-layout=\"${dataLayoutSelector}\"]`);\n\n    if (!targetLayerElement) {\n        return offset;\n    }\n\n    const computedStyle = window.getComputedStyle(targetLayerElement);\n    const targetZIndex = parseInt(computedStyle.zIndex, 10);\n\n    return Number.isFinite(targetZIndex) ? targetZIndex + offset : offset;\n}\n"]}