@gravity-ui/markdown-editor 14.11.2 → 14.12.1

package/build/esm/bundle/index.js

@@ -1,10 +1,11 @@
-export * from './types';
-export { MarkdownEditorProvider, useMarkdownEditorContext } from './context';
-export { useMarkdownEditor } from './useMarkdownEditor';
-export { MarkdownEditorView } from './MarkdownEditorView';
+export * from "./types.js";
+export { MarkdownEditorProvider, useMarkdownEditorContext } from "./context.js";
+export { useMarkdownEditor } from "./useMarkdownEditor.js";
+export { MarkdownEditorView } from "./MarkdownEditorView.js";
 // For project that do not support star export (export * as something from '...')
-import * as markupToolbarConfigs from './config/markup';
-import * as wysiwygToolbarConfigs from './config/wysiwyg';
+import * as markupToolbarConfigs from "./config/markup.js";
+import * as wysiwygToolbarConfigs from "./config/wysiwyg.js";
 export { markupToolbarConfigs, wysiwygToolbarConfigs };
-// TODO: remove in next major
-export * from './config';
+// MAJOR: remove in next major
+export * from "./config/index.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../src","sources":["bundle/index.ts"],"names":[],"mappings":"AAAA,2BAAwB;AACxB,OAAO,EAAC,sBAAsB,EAAE,wBAAwB,EAAC,qBAAkB;AAC3E,OAAO,EAAC,iBAAiB,EAAC,+BAA4B;AAEtD,OAAO,EAAC,kBAAkB,EAAC,gCAA6B;AAGxD,iFAAiF;AACjF,OAAO,KAAK,oBAAoB,2BAAwB;AACxD,OAAO,KAAK,qBAAqB,4BAAyB;AAC1D,OAAO,EAAC,oBAAoB,EAAE,qBAAqB,EAAC,CAAC;AAErD,8BAA8B;AAC9B,kCAAyB","sourcesContent":["export * from './types';\nexport {MarkdownEditorProvider, useMarkdownEditorContext} from './context';\nexport {useMarkdownEditor} from './useMarkdownEditor';\nexport type {UseMarkdownEditorProps} from './useMarkdownEditor';\nexport {MarkdownEditorView} from './MarkdownEditorView';\nexport type {MarkdownEditorViewProps} from './MarkdownEditorView';\n\n// For project that do not support star export (export * as something from '...')\nimport * as markupToolbarConfigs from './config/markup';\nimport * as wysiwygToolbarConfigs from './config/wysiwyg';\nexport {markupToolbarConfigs, wysiwygToolbarConfigs};\n\n// MAJOR: remove in next major\nexport * from './config';\n"]}

package/build/esm/bundle/settings/MarkdownHints/MarkdownHints.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-import './MarkdownHints.css';
-export declare const MarkdownHints: React.NamedExoticComponent<object>;
+import "./MarkdownHints.css";
+export declare const MarkdownHints: import("react").NamedExoticComponent<object>;

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

@@ -1,10 +1,11 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, memo } from 'react';
 import { Link } from '@gravity-ui/uikit';
-import { i18n } from '.././../../i18n/md-hints';
-import { cn } from '../../../classname';
-import './MarkdownHints.css';
+import { i18n } from "../../../i18n/md-hints/index.js";
+import { cn } from "../../../classname.js";
+import "./MarkdownHints.css";
 const b = cn('markdown-hints');
-export const MarkdownHints = React.memo(function MarkdownHints() {
+export const MarkdownHints = memo(function MarkdownHints() {
     const hints = [
         { title: i18n('header_title'), hint: i18n('header_hint') },
         { title: i18n('italic_title'), hint: i18n('italic_hint') },
@@ -17,10 +18,7 @@ export const MarkdownHints = React.memo(function MarkdownHints() {
         { title: i18n('list_title'), hint: i18n('list_hint') },
         { title: i18n('numbered-list_title'), hint: i18n('numbered-list_hint') },
     ];
-    return (React.createElement("div", { className: b() },
-        React.createElement("div", { className: b('grid') }, hints.map((hint, index) => (React.createElement(React.Fragment, { key: `md-hint-${index}` },
-            React.createElement("span", { className: b('title') }, hint.title),
-            React.createElement("span", { className: b('hint') }, hint.hint))))),
-        React.createElement(Link, { href: i18n('documentation_link'), target: "_blank", className: b('docs-link') }, i18n('documentation'))));
+    return (_jsxs("div", { className: b(), children: [_jsx("div", { className: b('grid'), children: hints.map((hint, index) => (_jsxs(Fragment, { children: [_jsx("span", { className: b('title'), children: hint.title }), _jsx("span", { className: b('hint'), children: hint.hint })] }, `md-hint-${index}`))) }), _jsx(Link, { href: i18n('documentation_link'), target: "_blank", className: b('docs-link'), children: i18n('documentation') })] }));
 });
 MarkdownHints.displayName = 'MarkdownHints';
+//# sourceMappingURL=MarkdownHints.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownHints.js","sourceRoot":"../../../../../src","sources":["bundle/settings/MarkdownHints/MarkdownHints.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,QAAQ,EAAE,IAAI,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,EAAC,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAC,IAAI,EAAC,wCAAiC;AAC9C,OAAO,EAAC,EAAE,EAAC,8BAA2B;AAEtC,6BAA8B;AAE9B,MAAM,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC;AAE/B,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,aAAa;IACpD,MAAM,KAAK,GAAG;QACV,EAAC,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,EAAC;QACxD,EAAC,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,EAAC;QACxD,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,EAAC;QACpD,EAAC,KAAK,EAAE,IAAI,CAAC,qBAAqB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,oBAAoB,CAAC,EAAC;QACtE,EAAC,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,EAAC;QAChE,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,EAAC;QACpD,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,EAAC;QACpD,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,EAAC;QACtD,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,EAAC;QACpD,EAAC,KAAK,EAAE,IAAI,CAAC,qBAAqB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,oBAAoB,CAAC,EAAC;KACzE,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,EAAE,aACf,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACpB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,MAAC,QAAQ,eACL,eAAM,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YAAG,IAAI,CAAC,KAAK,GAAQ,EAChD,eAAM,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,IAAI,CAAC,IAAI,GAAQ,KAFnC,WAAW,KAAK,EAAE,CAGtB,CACd,CAAC,GACA,EAEN,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,oBAAoB,CAAC,EAAE,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,YAC5E,IAAI,CAAC,eAAe,CAAC,GACnB,IACL,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import {Fragment, memo} from 'react';\n\nimport {Link} from '@gravity-ui/uikit';\n\nimport {i18n} from '.././../../i18n/md-hints';\nimport {cn} from '../../../classname';\n\nimport './MarkdownHints.scss';\n\nconst b = cn('markdown-hints');\n\nexport const MarkdownHints = memo(function MarkdownHints() {\n    const hints = [\n        {title: i18n('header_title'), hint: i18n('header_hint')},\n        {title: i18n('italic_title'), hint: i18n('italic_hint')},\n        {title: i18n('bold_title'), hint: i18n('bold_hint')},\n        {title: i18n('strikethrough_title'), hint: i18n('strikethrough_hint')},\n        {title: i18n('blockquote_title'), hint: i18n('blockquote_hint')},\n        {title: i18n('code_title'), hint: i18n('code_hint')},\n        {title: i18n('link_title'), hint: i18n('link_hint')},\n        {title: i18n('image_title'), hint: i18n('image_hint')},\n        {title: i18n('list_title'), hint: i18n('list_hint')},\n        {title: i18n('numbered-list_title'), hint: i18n('numbered-list_hint')},\n    ];\n\n    return (\n        <div className={b()}>\n            <div className={b('grid')}>\n                {hints.map((hint, index) => (\n                    <Fragment key={`md-hint-${index}`}>\n                        <span className={b('title')}>{hint.title}</span>\n                        <span className={b('hint')}>{hint.hint}</span>\n                    </Fragment>\n                ))}\n            </div>\n\n            <Link href={i18n('documentation_link')} target=\"_blank\" className={b('docs-link')}>\n                {i18n('documentation')}\n            </Link>\n        </div>\n    );\n});\n\nMarkdownHints.displayName = 'MarkdownHints';\n"]}

package/build/esm/bundle/settings/MarkdownHints/index.d.ts

@@ -1 +1 @@
-export * from './MarkdownHints';
+export * from "./MarkdownHints.js";

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

@@ -1 +1,2 @@
-export * from './MarkdownHints';
+export * from "./MarkdownHints.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["bundle/settings/MarkdownHints/index.ts"],"names":[],"mappings":"AAAA,mCAAgC","sourcesContent":["export * from './MarkdownHints';\n"]}

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

@@ -18,6 +18,8 @@
   width: 300px;
 }
 .g-md-settings-content__mode-help {
+  position: relative;
+  top: 8px;
   float: right;
 }
 .g-md-settings-content__separator {
@@ -37,8 +39,8 @@
   left: 50%;
   opacity: 0.03;
   transform: translateX(-50%);
-  font-family: var(--g-font-family-monospace);
+  font-family: var(--g-text-code-font-family);
+  font-weight: var(--g-text-code-font-weight);
   font-size: var(--g-text-code-inline-1-font-size);
   line-height: var(--g-text-code-inline-1-line-height);
-  font-weight: var(--g-text-code-font-weight);
 }

package/build/esm/bundle/settings/index.d.ts

@@ -1,13 +1,12 @@
-import React from 'react';
-import { ClassNameProps } from '../../classname';
-import type { MarkdownEditorMode, MarkdownEditorSplitMode } from '../types';
-import './index.css';
-export declare type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {
+import { type ClassNameProps } from "../../classname.js";
+import type { MarkdownEditorMode, MarkdownEditorSplitMode } from "../types.js";
+import "./index.css";
+export type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {
     renderPreviewButton?: boolean;
     settingsVisible?: boolean;
 };
-export declare const EditorSettings: React.NamedExoticComponent<EditorSettingsProps>;
-declare type SettingsContentProps = ClassNameProps & {
+export declare const EditorSettings: import("react").NamedExoticComponent<EditorSettingsProps>;
+type SettingsContentProps = ClassNameProps & {
     mode: MarkdownEditorMode;
     onClose: () => void;
     onModeChange: (mode: MarkdownEditorMode) => void;

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

@@ -1,62 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React from 'react';
-import { HelpPopover } from '@gravity-ui/components';
+import { memo, useState } from 'react';
 import { Eye, Gear, LogoMarkdown } from '@gravity-ui/icons';
-import { ActionTooltip, Button, Checkbox, Icon, Menu, Popup, } from '@gravity-ui/uikit';
-import { cn } from '../../classname';
-import { i18n } from '../../i18n/bundle';
-import WysiwygModeIcon from '../../icons/WysiwygMode';
-import { noop } from '../../lodash';
-import { useBooleanState } from '../../react-utils/hooks';
-import { ToolbarTooltipDelay } from '../../toolbar';
-import { VERSION } from '../../version';
-import { MarkdownHints } from './MarkdownHints';
-import './index.css';
+import { ActionTooltip, Button, Checkbox, HelpMark, Icon, Menu, Popup, } from '@gravity-ui/uikit';
+import { cn } from "../../classname.js";
+import { i18n } from "../../i18n/bundle/index.js";
+import WysiwygModeIcon from "../../icons/WysiwygMode.js";
+import { noop } from "../../lodash.js";
+import { useBooleanState } from "../../react-utils/hooks.js";
+import { ToolbarTooltipDelay } from "../../toolbar/index.js";
+import { VERSION } from "../../version.js";
+import { MarkdownHints } from "./MarkdownHints/index.js";
+import "./index.css";
 const placement = ['bottom-end', 'top-end'];
 const bSettings = cn('editor-settings');
 const bContent = cn('settings-content');
-export const EditorSettings = React.memo(function EditorSettings(props) {
+export const EditorSettings = memo(function EditorSettings(props) {
     const { className, onShowPreviewChange, showPreview, renderPreviewButton, settingsVisible } = props;
-    const chevronRef = React.useRef(null);
+    const [chevronElement, setChevronElement] = useState(null);
     const [popupShown, , hidePopup, togglePopup] = useBooleanState(false);
-    return (React.createElement("div", { className: bSettings(null, [className]) },
-        renderPreviewButton && (React.createElement(React.Fragment, null,
-            React.createElement(ActionTooltip, { openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, title: i18n('preview_hint'), hotkey: "mod+shift+p" },
-                React.createElement(Button, { size: "m", view: "flat", pin: "round-round", className: bSettings('preview-button'), onClick: () => onShowPreviewChange === null || onShowPreviewChange === void 0 ? void 0 : onShowPreviewChange(!showPreview), selected: showPreview },
-                    React.createElement(Icon, { data: Eye }))),
-            settingsVisible && React.createElement("div", { className: bSettings('separator') }))),
-        settingsVisible && (React.createElement(React.Fragment, null,
-            React.createElement(Button, { size: "m", view: "flat", ref: chevronRef, pin: "round-round", onClick: togglePopup, className: bSettings('dropdown-button') },
-                React.createElement(Icon, { data: Gear })),
-            React.createElement(Popup, { open: popupShown, anchorRef: chevronRef, placement: placement, onClose: hidePopup },
-                React.createElement(SettingsContent, Object.assign({}, props, { 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, { 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') })] })), settingsVisible && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "m", view: "flat", pin: "round-round", onClick: togglePopup, ref: setChevronElement, className: bSettings('dropdown-button'), children: _jsx(Icon, { data: Gear }) }), _jsx(Popup, { open: popupShown, anchorElement: chevronElement, placement: placement, onOpenChange: hidePopup, children: _jsx(SettingsContent, { ...props, 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, }) {
-    return (React.createElement("div", { className: bContent(null, [className]) },
-        React.createElement(Menu, { size: "l", className: bContent('mode') },
-            React.createElement(Menu.Item, { active: mode === 'wysiwyg', onClick: () => {
-                    onModeChange('wysiwyg');
-                    onClose();
-                }, icon: React.createElement(Icon, { data: WysiwygModeIcon }) }, i18n('settings_wysiwyg')),
-            React.createElement(Menu.Item, { active: mode === 'markup', onClick: () => {
-                    onModeChange('markup');
-                    onClose();
-                }, icon: React.createElement(Icon, { data: LogoMarkdown }) },
-                i18n('settings_markup'),
-                React.createElement(HelpPopover, { content: React.createElement("div", { onClick: (e) => {
-                            // stop clicks propagation
-                            // because otherwise click in MarkdownHints handled as click on MenuItem
-                            e.stopPropagation();
-                        } },
-                        React.createElement(MarkdownHints, null)), placement: mdHelpPlacement, className: bContent('mode-help') }))),
-        React.createElement("div", { className: bContent('separator') }),
-        !showPreview && (React.createElement("div", { className: bContent('toolbar') },
-            React.createElement(Checkbox, { size: "m", checked: toolbarVisibility, onUpdate: onToolbarVisibilityChange }, i18n('settings_menubar')),
-            React.createElement("div", { className: bContent('toolbar-hint') }, i18n('settings_hint')))),
-        splitMode && (React.createElement("div", { className: bContent('split-mode') },
-            React.createElement(Checkbox, { size: "m", disabled: mode !== 'markup', checked: splitModeEnabled, onUpdate: onSplitModeChange !== null && onSplitModeChange !== void 0 ? onSplitModeChange : noop }, i18n('settings_split-mode')),
-            React.createElement("div", { className: bContent('toolbar-hint') }, i18n('settings_split-mode-hint')))),
-        React.createElement("span", { className: bContent('version') }, VERSION)));
+    return (_jsxs("div", { className: bContent(null, [className]), children: [_jsxs(Menu, { size: "l", className: bContent('mode'), children: [_jsx(Menu.Item, { active: mode === 'wysiwyg', onClick: () => {
+                            onModeChange('wysiwyg');
+                            onClose();
+                        }, iconStart: _jsx(Icon, { data: WysiwygModeIcon }), children: i18n('settings_wysiwyg') }), _jsxs(Menu.Item, { active: mode === 'markup', onClick: () => {
+                            onModeChange('markup');
+                            onClose();
+                        }, iconStart: _jsx(Icon, { data: LogoMarkdown }), children: [i18n('settings_markup'), _jsx(HelpMark, { popoverProps: {
+                                    placement: mdHelpPlacement,
+                                    modal: false,
+                                }, className: bContent('mode-help'), children: _jsx("div", { onClick: (e) => {
+                                        // stop clicks propagation
+                                        // because otherwise click in MarkdownHints handled as click on MenuItem
+                                        e.stopPropagation();
+                                    }, children: _jsx(MarkdownHints, {}) }) })] })] }), _jsx("div", { className: bContent('separator') }), !showPreview && (_jsxs("div", { className: bContent('toolbar'), children: [_jsx(Checkbox, { size: "m", checked: toolbarVisibility, onUpdate: onToolbarVisibilityChange, children: i18n('settings_menubar') }), _jsx("div", { className: bContent('toolbar-hint'), children: i18n('settings_hint') })] })), splitMode && (_jsxs("div", { className: bContent('split-mode'), children: [_jsx(Checkbox, { size: "m", disabled: mode !== 'markup', checked: splitModeEnabled, onUpdate: onSplitModeChange ?? noop, children: i18n('settings_split-mode') }), _jsx("div", { className: bContent('toolbar-hint'), children: i18n('settings_split-mode-hint') })] })), _jsx("span", { className: bContent('version'), children: VERSION })] }));
 };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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} 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;\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    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                            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            {settingsVisible && (\n                <>\n                    <Button\n                        size=\"m\"\n                        view=\"flat\"\n                        pin=\"round-round\"\n                        onClick={togglePopup}\n                        ref={setChevronElement}\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                            onClose={hidePopup}\n                            className={bSettings('content')}\n                        />\n                    </Popup>\n                </>\n            )}\n        </div>\n    );\n});\n\ntype SettingsContentProps = ClassNameProps & {\n    mode: MarkdownEditorMode;\n    onClose: () => void;\n    onModeChange: (mode: MarkdownEditorMode) => void;\n    onShowPreviewChange: (showPreview: boolean) => void;\n    showPreview: boolean;\n    toolbarVisibility: boolean;\n    onToolbarVisibilityChange: (val: boolean) => void;\n    splitMode?: MarkdownEditorSplitMode;\n    splitModeEnabled?: boolean;\n    onSplitModeChange?: (splitModeEnabled: boolean) => void;\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}) {\n    return (\n        <div className={bContent(null, [className])}>\n            <Menu size=\"l\" className={bContent('mode')}>\n                <Menu.Item\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                    active={mode === 'markup'}\n                    onClick={() => {\n                        onModeChange('markup');\n                        onClose();\n                    }}\n                    iconStart={<Icon data={LogoMarkdown} />}\n                >\n                    {i18n('settings_markup')}\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                </Menu.Item>\n            </Menu>\n            <div className={bContent('separator')} />\n            {!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            {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/sticky/index.d.ts

@@ -1,11 +1,11 @@
 import type { ClassNameList } from '@bem-react/classname';
-import './sticky.css';
-declare type StickyToolbarParams = {
+import "./sticky.css";
+type StickyToolbarParams = {
     withSettings?: boolean;
     stickyActive?: boolean;
     isSticky?: boolean;
 };
-declare type StickySettingsParams = {
+type StickySettingsParams = {
     withToolbar?: boolean;
     stickyActive?: boolean;
 };

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

@@ -1,5 +1,5 @@
-import { cn } from '../../classname';
-import './sticky.css';
+import { cn } from "../../classname.js";
+import "./sticky.css";
 const b = cn('editor-sticky');
 export const stickyCn = {
     toolbar: ({ withSettings, stickyActive, isSticky }, mix) => {
@@ -20,3 +20,4 @@ export const stickyCn = {
         return b(mods, mix);
     },
 };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["bundle/sticky/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,EAAE,EAAC,2BAAwB;AAEnC,sBAAuB;AAEvB,MAAM,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC;AAY9B,MAAM,CAAC,MAAM,QAAQ,GAAG;IACpB,OAAO,EAAE,CAAC,EAAC,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAsB,EAAE,GAAmB,EAAE,EAAE;QAC1F,MAAM,IAAI,GAAe;YACrB,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK;YACnC,eAAe,EAAE,YAAY;YAC7B,MAAM,EAAE,QAAQ;SACnB,CAAC;QACF,OAAO,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IACxB,CAAC;IACD,QAAQ,EAAE,CAAC,EAAC,WAAW,EAAE,YAAY,EAAuB,EAAE,GAAmB,EAAE,EAAE;QACjF,MAAM,IAAI,GAAe;YACrB,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;YACnC,eAAe,EAAE,YAAY;YAC7B,KAAK,EAAE,CAAC,WAAW;YACnB,MAAM,EAAE,IAAI;SACf,CAAC;QACF,OAAO,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IACxB,CAAC;CACJ,CAAC","sourcesContent":["import type {ClassNameList} from '@bem-react/classname';\n\nimport {cn} from '../../classname';\n\nimport './sticky.scss';\n\nconst b = cn('editor-sticky');\n\ntype StickyToolbarParams = {withSettings?: boolean; stickyActive?: boolean; isSticky?: boolean};\ntype StickySettingsParams = {withToolbar?: boolean; stickyActive?: boolean};\n\ntype StickyMods = {\n    'sticky-active'?: boolean | undefined;\n    sticky?: boolean | undefined;\n    clear?: boolean | undefined;\n    part?: 'left' | 'right' | false | undefined;\n};\n\nexport const stickyCn = {\n    toolbar: ({withSettings, stickyActive, isSticky}: StickyToolbarParams, mix?: ClassNameList) => {\n        const mods: StickyMods = {\n            part: withSettings ? 'left' : false,\n            'sticky-active': stickyActive,\n            sticky: isSticky,\n        };\n        return b(mods, mix);\n    },\n    settings: ({withToolbar, stickyActive}: StickySettingsParams, mix?: ClassNameList) => {\n        const mods: StickyMods = {\n            part: withToolbar ? 'right' : false,\n            'sticky-active': stickyActive,\n            clear: !withToolbar,\n            sticky: true,\n        };\n        return b(mods, mix);\n    },\n};\n"]}

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

@@ -5,7 +5,8 @@
 }
 .g-md-toolbar-button-with-popup-menu__menu-group .g-menu__group-label {
   color: var(--g-color-text-hint);
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
   font-size: var(--g-text-body-1-font-size);
   line-height: var(--g-text-body-1-line-height);
-  font-weight: var(--g-text-body-font-weight);
 }

package/build/esm/bundle/toolbar/ToolbarButtonWithPopupMenu.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
-import { IconProps } from '@gravity-ui/uikit';
-import { Action, ActionStorage } from '../../core';
-import { ToolbarBaseProps, ToolbarIconData } from '../../toolbar';
-import './ToolbarButtonWithPopupMenu.css';
-export declare type MenuItem = {
+import { IconProps, PopupProps } from '@gravity-ui/uikit';
+import { Action, ActionStorage } from "../../core/index.js";
+import { ToolbarBaseProps, ToolbarIconData } from "../../toolbar/index.js";
+import "./ToolbarButtonWithPopupMenu.css";
+export type MenuItem = {
     id: string;
     action: Action;
     icon: IconProps['data'];
@@ -13,7 +12,7 @@ export declare type MenuItem = {
     group?: string;
     ignoreActive?: boolean;
 };
-export declare type ToolbarButtonWithPopupMenuProps = Omit<ToolbarBaseProps<ActionStorage> & {
+export type ToolbarButtonWithPopupMenuProps = Omit<ToolbarBaseProps<ActionStorage> & Pick<PopupProps, 'disablePortal'> & {
     icon: ToolbarIconData;
     iconClassName?: string;
     chevronIconClassName?: string;

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

@@ -1,21 +1,22 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
 import { ChevronDown } from '@gravity-ui/icons';
 import { ActionTooltip, Button, Icon, Menu, Popup } from '@gravity-ui/uikit';
-import { cn } from '../../classname';
-import { groupBy, isFunction } from '../../lodash';
-import { useBooleanState } from '../../react-utils/hooks';
-import { ToolbarTooltipDelay } from '../../toolbar';
-import './ToolbarButtonWithPopupMenu.css';
+import { cn } from "../../classname.js";
+import { groupBy, isFunction } from "../../lodash.js";
+import { useBooleanState, useElementState } from "../../react-utils/hooks.js";
+import { ToolbarTooltipDelay } from "../../toolbar/index.js";
+import "./ToolbarButtonWithPopupMenu.css";
 const b = cn('toolbar-button-with-popup-menu');
-export const ToolbarButtonWithPopupMenu = ({ className, focus, onClick, icon, iconClassName, chevronIconClassName, title, menuItems, _selectionType, }) => {
-    const buttonRef = React.useRef(null);
+export const ToolbarButtonWithPopupMenu = ({ disablePortal, className, focus, onClick, icon, iconClassName, chevronIconClassName, title, menuItems, _selectionType, }) => {
+    const [anchorElement, setAnchorElement] = useElementState();
     const [open, , hide, toggleOpen] = useBooleanState(false);
-    const groups = React.useMemo(() => groupBy(menuItems.map((i) => (Object.assign(Object.assign({}, i), { group: i.group || '' }))), 'group'), [menuItems]);
+    const groups = useMemo(() => groupBy(menuItems.map((i) => ({ ...i, group: i.group || '' })), 'group'), [menuItems]);
     const someActive = menuItems.some((item) => !item.ignoreActive && item.action.isActive() === true);
     const everyDisabled = menuItems.every((item) => item.action.isEnable() === false);
     const popupOpen = everyDisabled ? false : open;
     const shouldForceHide = open && !popupOpen;
-    React.useEffect(() => {
+    useEffect(() => {
         if (shouldForceHide) {
             hide();
         }
@@ -26,19 +27,16 @@ export const ToolbarButtonWithPopupMenu = ({ className, focus, onClick, icon, ic
             popupOpen && someActive,
         ]
         : [someActive || popupOpen ? 'normal' : 'flat', someActive];
-    return (React.createElement(React.Fragment, null,
-        React.createElement(ActionTooltip, { disabled: popupOpen, openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, title: isFunction(title) ? title() : title },
-            React.createElement(Button, { size: "m", ref: buttonRef, view: btnView, selected: btnSelected, disabled: everyDisabled, className: b(null, [className]), onClick: toggleOpen },
-                React.createElement(Icon, { data: icon.data, size: icon.size, className: iconClassName }),
-                '',
-                React.createElement(Icon, { data: ChevronDown, className: chevronIconClassName }))),
-        React.createElement(Popup, { anchorRef: buttonRef, open: popupOpen, onClose: hide },
-            React.createElement(Menu, { size: "l" }, Object.entries(groups).map(([label, items], key) => {
-                return (React.createElement(Menu.Group, { label: label, key: key, className: b('menu-group') }, items.map(({ id, icon, iconSize = 16, action, text, iconClassname }) => (React.createElement(Menu.Item, { key: id, icon: React.createElement(Icon, { data: icon, size: iconSize, className: iconClassname }), active: action.isActive(), disabled: !action.isEnable(), onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(ActionTooltip, { disabled: popupOpen, openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, title: isFunction(title) ? title() : title, children: _jsxs(Button, { size: "m", ref: setAnchorElement, view: btnView, selected: btnSelected, disabled: everyDisabled, className: b(null, [className]), onClick: toggleOpen, 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();
-                        focus();
-                        action.run();
-                        onClick === null || onClick === void 0 ? void 0 : onClick(id);
-                    }, extraProps: { 'aria-label': text } }, text)))));
-            })))));
+                }, children: _jsx(Menu, { size: "l", 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();
+                                    action.run();
+                                    onClick?.(id);
+                                }, extraProps: { 'aria-label': text }, children: text }, id))) }, key));
+                    }) }) })] }));
 };
+//# sourceMappingURL=ToolbarButtonWithPopupMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButtonWithPopupMenu.js","sourceRoot":"../../../../src","sources":["bundle/toolbar/ToolbarButtonWithPopupMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,MAAM,EAAE,IAAI,EAAa,IAAI,EAAE,KAAK,EAAa,MAAM,mBAAmB,CAAC;AAElG,OAAO,EAAC,EAAE,EAAC,2BAAwB;AAEnC,OAAO,EAAC,OAAO,EAAE,UAAU,EAAC,wBAAqB;AACjD,OAAO,EAAC,eAAe,EAAE,eAAe,EAAC,mCAAgC;AACzE,OAAO,EAAoC,mBAAmB,EAAC,+BAAsB;AAErF,0CAA2C;AAC3C,MAAM,CAAC,GAAG,EAAE,CAAC,gCAAgC,CAAC,CAAC;AA2B/C,MAAM,CAAC,MAAM,0BAA0B,GAA8C,CAAC,EAClF,aAAa,EACb,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,EACJ,aAAa,EACb,oBAAoB,EACpB,KAAK,EACL,SAAS,EACT,cAAc,GACjB,EAAE,EAAE;IACD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,eAAe,EAAE,CAAC;IAC5D,MAAM,CAAC,IAAI,EAAE,AAAD,EAAG,IAAI,EAAE,UAAU,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,MAAM,GAAG,OAAO,CAClB,GAAG,EAAE,CACD,OAAO,CACH,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,IAAI,EAAE,EAAC,CAAC,CAAC,EACpD,OAAO,CACV,EACL,CAAC,SAAS,CAAC,CACd,CAAC;IAEF,MAAM,UAAU,GAAG,SAAS,CAAC,IAAI,CAC7B,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,IAAI,CAClE,CAAC;IACF,MAAM,aAAa,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,KAAK,CAAC,CAAC;IAElF,MAAM,SAAS,GAAG,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC/C,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC;IAC3C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,eAAe,EAAE,CAAC;YAClB,IAAI,EAAE,CAAC;QACX,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC;IAE5B,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,GACxB,cAAc,KAAK,OAAO;QACtB,CAAC,CAAE;YACG,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM;YAC1D,SAAS,IAAI,UAAU;SAChB;QACb,CAAC,CAAE,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,UAAU,CAAW,CAAC;IAE/E,OAAO,CACH,8BACI,KAAC,aAAa,IACV,QAAQ,EAAE,SAAS,EACnB,SAAS,EAAE,mBAAmB,CAAC,IAAI,EACnC,UAAU,EAAE,mBAAmB,CAAC,KAAK,EACrC,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,YAE1C,MAAC,MAAM,IACH,IAAI,EAAC,GAAG,EACR,GAAG,EAAE,gBAAgB,EACrB,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,aAAa,EACvB,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,EAC/B,OAAO,EAAE,UAAU,aAEnB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,aAAa,GAAI,EACnE,EAAE,EACH,KAAC,IAAI,IAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,oBAAoB,GAAI,IACvD,GACG,EAChB,KAAC,KAAK,IACF,IAAI,EAAE,SAAS,EACf,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;oBACnB,IAAI,CAAC,IAAI;wBAAE,IAAI,EAAE,CAAC;gBACtB,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,GAAG,YACT,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,EAAE;wBAChD,OAAO,CACH,KAAC,IAAI,CAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAY,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,YACzD,KAAK,CAAC,GAAG,CACN,CAAC,EAAC,EAAE,EAAE,IAAI,EAAE,QAAQ,GAAG,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,EAAC,EAAE,EAAE,CAAC,CACxD,KAAC,IAAI,CAAC,IAAI,IAEN,SAAS,EACL,KAAC,IAAI,IACD,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,aAAa,GAC1B,EAEN,MAAM,EAAE,MAAM,CAAC,QAAQ,EAAE,EACzB,QAAQ,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,EAC5B,OAAO,EAAE,GAAG,EAAE;oCACV,IAAI,EAAE,CAAC;oCACP,KAAK,EAAE,CAAC;oCACR,MAAM,CAAC,GAAG,EAAE,CAAC;oCACb,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;gCAClB,CAAC,EACD,UAAU,EAAE,EAAC,YAAY,EAAE,IAAI,EAAC,YAE/B,IAAI,IAlBA,EAAE,CAmBC,CACf,CACJ,IAzB0B,GAAG,CA0BrB,CAChB,CAAC;oBACN,CAAC,CAAC,GACC,GACH,IACT,CACN,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {useEffect, useMemo} from 'react';\n\nimport {ChevronDown} from '@gravity-ui/icons';\nimport {ActionTooltip, Button, Icon, IconProps, Menu, Popup, PopupProps} from '@gravity-ui/uikit';\n\nimport {cn} from '../../classname';\nimport {Action, ActionStorage} from '../../core';\nimport {groupBy, isFunction} from '../../lodash';\nimport {useBooleanState, useElementState} from '../../react-utils/hooks';\nimport {ToolbarBaseProps, 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 = Omit<\n    ToolbarBaseProps<ActionStorage> &\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        },\n    'editor'\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}) => {\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    return (\n        <>\n            <ActionTooltip\n                disabled={popupOpen}\n                openDelay={ToolbarTooltipDelay.Open}\n                closeDelay={ToolbarTooltipDelay.Close}\n                title={isFunction(title) ? title() : title}\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                >\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\">\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/bundle/toolbar/ToolbarSelect.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import type { ActionStorage } from '../../core';
-import type { ToolbarBaseProps, WToolbarItemData } from './types';
-import './ToolbarSelect.css';
-export declare type ToolbarSelectProps = ToolbarBaseProps<ActionStorage> & {
+import { type SelectProps } from '@gravity-ui/uikit';
+import type { ActionStorage } from "../../core/index.js";
+import type { ToolbarBaseProps, WToolbarItemData } from "./types.js";
+import "./ToolbarSelect.css";
+export type ToolbarSelectProps = ToolbarBaseProps<ActionStorage> & Pick<SelectProps, 'disablePortal'> & {
     items: WToolbarItemData[];
 };
 export declare const ToolbarSelect: React.FC<ToolbarSelectProps>;

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

@@ -1,35 +1,23 @@
-import React from 'react';
-import { HelpPopover } from '@gravity-ui/components';
-import { Hotkey, Icon, Select } from '@gravity-ui/uikit';
-import { cn } from '../../classname';
-import { isFunction } from '../../lodash';
-import './ToolbarSelect.css';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { HelpMark, Hotkey, Icon, Select, } from '@gravity-ui/uikit';
+import { cn } from "../../classname.js";
+import { isFunction } from "../../lodash.js";
+import "./ToolbarSelect.css";
 const b = cn('toolbar-select');
-export const ToolbarSelect = ({ className, editor, focus, onClick, items, }) => {
+export const ToolbarSelect = ({ disablePortal, className, editor, focus, onClick, items, }) => {
     const activeItem = items.find((item) => item.isActive(editor));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Select, { size: "m", view: "clear", className: className, onOpenChange: () => {
-                focus();
-            }, value: activeItem ? [activeItem.id] : undefined, options: items.map((item) => ({
+    return (_jsx(_Fragment, { children: _jsx(Select, { size: "m", view: "clear", className: className, disablePortal: disablePortal, onOpenChange: focus, value: activeItem ? [activeItem.id] : undefined, options: items.map((item) => ({
                 data: item,
                 value: item.id,
                 text: isFunction(item.title) ? item.title() : item.title,
             })), renderOption: ({ text, data }) => {
-                var _a;
                 const { icon, hotkey, hint } = data;
                 const hintText = isFunction(hint) ? hint() : hint;
-                return (React.createElement("div", { "aria-label": text, className: b('item') },
-                    React.createElement("div", { className: b('item-icon') },
-                        React.createElement(Icon, { data: icon.data, size: Number((_a = icon.size) !== null && _a !== void 0 ? _a : 16) + 2 })),
-                    React.createElement("div", { className: b('item-content') },
-                        text,
-                        React.createElement("div", { className: b('item-extra') },
-                            hotkey && React.createElement(Hotkey, { value: hotkey }),
-                            hintText && (React.createElement(HelpPopover, { content: hintText, className: b('item-hint') }))))));
+                return (_jsxs("div", { "aria-label": text, className: b('item'), children: [_jsx("div", { className: b('item-icon'), children: _jsx(Icon, { data: icon.data, size: Number(icon.size ?? 16) + 2 }) }), _jsxs("div", { className: b('item-content'), children: [text, _jsxs("div", { className: b('item-extra'), children: [hotkey && _jsx(Hotkey, { value: hotkey }), hintText && (_jsx(HelpMark, { popoverProps: { modal: false }, className: b('item-hint'), children: hintText }))] })] })] }));
             }, onUpdate: ([id]) => {
-                var _a;
-                (_a = items.find((item) => item.id === id)) === null || _a === void 0 ? void 0 : _a.exec(editor);
-                onClick === null || onClick === void 0 ? void 0 : onClick(id);
+                items.find((item) => item.id === id)?.exec(editor);
+                onClick?.(id);
                 focus();
-            } })));
+            } }) }));
 };
+//# sourceMappingURL=ToolbarSelect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSelect.js","sourceRoot":"../../../../src","sources":["bundle/toolbar/ToolbarSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EACH,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,MAAM,GAGT,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAC,EAAE,EAAC,2BAAwB;AAEnC,OAAO,EAAC,UAAU,EAAC,wBAAqB;AAIxC,6BAA8B;AAE9B,MAAM,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC;AAO/B,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EACxD,aAAa,EACb,SAAS,EACT,MAAM,EACN,KAAK,EACL,OAAO,EACP,KAAK,GACR,EAAE,EAAE;IACD,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;IAE/D,OAAO,CACH,4BACI,KAAC,MAAM,IACH,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,KAAK,EACnB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,EAC/C,OAAO,EAAE,KAAK,CAAC,GAAG,CAAe,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;gBACxC,IAAI,EAAE,IAAI;gBACV,KAAK,EAAE,IAAI,CAAC,EAAE;gBACd,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;aAC3D,CAAC,CAAC,EACH,YAAY,EAAE,CAAC,EAAC,IAAI,EAAE,IAAI,EAAC,EAAE,EAAE;gBAC3B,MAAM,EAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,GAAG,IAAwB,CAAC;gBACtD,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;gBAClD,OAAO,CACH,6BAAiB,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,aACvC,cAAK,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,YAC1B,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,GAAG,CAAC,GAAI,GAC1D,EACN,eAAK,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,aAC5B,IAAI,EACL,eAAK,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,aAC1B,MAAM,IAAI,KAAC,MAAM,IAAC,KAAK,EAAE,MAAM,GAAI,EACnC,QAAQ,IAAI,CACT,KAAC,QAAQ,IACL,YAAY,EAAE,EAAC,KAAK,EAAE,KAAK,EAAC,EAC5B,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,YAExB,QAAQ,GACF,CACd,IACC,IACJ,IACJ,CACT,CAAC;YACN,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBACf,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;gBACnD,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;gBACd,KAAK,EAAE,CAAC;YACZ,CAAC,GACH,GACH,CACN,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {\n    HelpMark,\n    Hotkey,\n    Icon,\n    Select,\n    type SelectOption,\n    type SelectProps,\n} from '@gravity-ui/uikit';\n\nimport {cn} from '../../classname';\nimport type {ActionStorage} from '../../core';\nimport {isFunction} from '../../lodash';\n\nimport type {ToolbarBaseProps, WToolbarItemData} from './types';\n\nimport './ToolbarSelect.scss';\n\nconst b = cn('toolbar-select');\n\nexport type ToolbarSelectProps = ToolbarBaseProps<ActionStorage> &\n    Pick<SelectProps, 'disablePortal'> & {\n        items: WToolbarItemData[];\n    };\n\nexport const ToolbarSelect: React.FC<ToolbarSelectProps> = ({\n    disablePortal,\n    className,\n    editor,\n    focus,\n    onClick,\n    items,\n}) => {\n    const activeItem = items.find((item) => item.isActive(editor));\n\n    return (\n        <>\n            <Select\n                size=\"m\"\n                view=\"clear\"\n                className={className}\n                disablePortal={disablePortal}\n                onOpenChange={focus}\n                value={activeItem ? [activeItem.id] : undefined}\n                options={items.map<SelectOption>((item) => ({\n                    data: item,\n                    value: item.id,\n                    text: isFunction(item.title) ? item.title() : item.title,\n                }))}\n                renderOption={({text, data}) => {\n                    const {icon, hotkey, hint} = data as WToolbarItemData;\n                    const hintText = isFunction(hint) ? hint() : hint;\n                    return (\n                        <div aria-label={text} className={b('item')}>\n                            <div className={b('item-icon')}>\n                                <Icon data={icon.data} size={Number(icon.size ?? 16) + 2} />\n                            </div>\n                            <div className={b('item-content')}>\n                                {text}\n                                <div className={b('item-extra')}>\n                                    {hotkey && <Hotkey value={hotkey} />}\n                                    {hintText && (\n                                        <HelpMark\n                                            popoverProps={{modal: false}}\n                                            className={b('item-hint')}\n                                        >\n                                            {hintText}\n                                        </HelpMark>\n                                    )}\n                                </div>\n                            </div>\n                        </div>\n                    );\n                }}\n                onUpdate={([id]) => {\n                    items.find((item) => item.id === id)?.exec(editor);\n                    onClick?.(id);\n                    focus();\n                }}\n            />\n        </>\n    );\n};\n"]}

package/build/esm/bundle/toolbar/custom/ToolbarColors.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { ToolbarBaseProps } from '../../../toolbar';
-import './ToolbarColors.css';
-export declare type ToolbarColorsProps = Omit<ToolbarBaseProps<never>, 'editor'> & {
+import { ToolbarBaseProps } from "../../../toolbar/index.js";
+import { type ToolbarButtonWithPopupMenuProps } from "../ToolbarButtonWithPopupMenu.js";
+import "./ToolbarColors.css";
+export type ToolbarColorsProps = Omit<ToolbarBaseProps<never>, 'editor'> & Pick<ToolbarButtonWithPopupMenuProps, 'disablePortal'> & {
     active?: boolean;
     enable?: boolean;
     currentColor?: string;