@gravity-ui/markdown-editor 14.12.1 → 14.12.3

package/build/cjs/bundle/emoji.js

@@ -267,4 +267,3 @@ exports.emojiDefs = {
     radio_button: '🔘',
     checkered_flag: '🏁',
 };
-//# sourceMappingURL=emoji.js.map

package/build/cjs/bundle/index.d.ts

@@ -1,10 +1,10 @@
-export * from "./types.js";
-export { MarkdownEditorProvider, useMarkdownEditorContext } from "./context.js";
-export { useMarkdownEditor } from "./useMarkdownEditor.js";
-export type { UseMarkdownEditorProps } from "./useMarkdownEditor.js";
-export { MarkdownEditorView } from "./MarkdownEditorView.js";
-export type { MarkdownEditorViewProps } from "./MarkdownEditorView.js";
-import * as markupToolbarConfigs from "./config/markup.js";
-import * as wysiwygToolbarConfigs from "./config/wysiwyg.js";
+export * from './types';
+export { MarkdownEditorProvider, useMarkdownEditorContext } from './context';
+export { useMarkdownEditor } from './useMarkdownEditor';
+export type { UseMarkdownEditorProps } from './useMarkdownEditor';
+export { MarkdownEditorView } from './MarkdownEditorView';
+export type { MarkdownEditorViewProps } from './MarkdownEditorView';
+import * as markupToolbarConfigs from './config/markup';
+import * as wysiwygToolbarConfigs from './config/wysiwyg';
 export { markupToolbarConfigs, wysiwygToolbarConfigs };
-export * from "./config/index.js";
+export * from './config';

package/build/cjs/bundle/index.js

@@ -2,19 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.wysiwygToolbarConfigs = exports.markupToolbarConfigs = exports.MarkdownEditorView = exports.useMarkdownEditor = exports.useMarkdownEditorContext = exports.MarkdownEditorProvider = void 0;
 const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./types.js"), exports);
-var context_1 = require("./context.js");
+tslib_1.__exportStar(require("./types"), exports);
+var context_1 = require("./context");
 Object.defineProperty(exports, "MarkdownEditorProvider", { enumerable: true, get: function () { return context_1.MarkdownEditorProvider; } });
 Object.defineProperty(exports, "useMarkdownEditorContext", { enumerable: true, get: function () { return context_1.useMarkdownEditorContext; } });
-var useMarkdownEditor_1 = require("./useMarkdownEditor.js");
+var useMarkdownEditor_1 = require("./useMarkdownEditor");
 Object.defineProperty(exports, "useMarkdownEditor", { enumerable: true, get: function () { return useMarkdownEditor_1.useMarkdownEditor; } });
-var MarkdownEditorView_1 = require("./MarkdownEditorView.js");
+var MarkdownEditorView_1 = require("./MarkdownEditorView");
 Object.defineProperty(exports, "MarkdownEditorView", { enumerable: true, get: function () { return MarkdownEditorView_1.MarkdownEditorView; } });
 // For project that do not support star export (export * as something from '...')
-const markupToolbarConfigs = tslib_1.__importStar(require("./config/markup.js"));
+const markupToolbarConfigs = tslib_1.__importStar(require("./config/markup"));
 exports.markupToolbarConfigs = markupToolbarConfigs;
-const wysiwygToolbarConfigs = tslib_1.__importStar(require("./config/wysiwyg.js"));
+const wysiwygToolbarConfigs = tslib_1.__importStar(require("./config/wysiwyg"));
 exports.wysiwygToolbarConfigs = wysiwygToolbarConfigs;
-// MAJOR: remove in next major
-tslib_1.__exportStar(require("./config/index.js"), exports);
-//# sourceMappingURL=index.js.map
+// TODO: remove in next major
+tslib_1.__exportStar(require("./config"), exports);

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

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

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

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkdownHints = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
-const md_hints_1 = require("../../../i18n/md-hints/index.js");
-const classname_1 = require("../../../classname.js");
-require("./MarkdownHints.css");
+const md_hints_1 = require(".././../../i18n/md-hints");
+const classname_1 = require("../../../classname");
 const b = (0, classname_1.cn)('markdown-hints');
-exports.MarkdownHints = (0, react_1.memo)(function MarkdownHints() {
+exports.MarkdownHints = react_1.default.memo(function MarkdownHints() {
     const hints = [
         { title: (0, md_hints_1.i18n)('header_title'), hint: (0, md_hints_1.i18n)('header_hint') },
         { title: (0, md_hints_1.i18n)('italic_title'), hint: (0, md_hints_1.i18n)('italic_hint') },
@@ -21,7 +20,10 @@ exports.MarkdownHints = (0, react_1.memo)(function MarkdownHints() {
         { title: (0, md_hints_1.i18n)('list_title'), hint: (0, md_hints_1.i18n)('list_hint') },
         { title: (0, md_hints_1.i18n)('numbered-list_title'), hint: (0, md_hints_1.i18n)('numbered-list_hint') },
     ];
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b(), children: [(0, jsx_runtime_1.jsx)("div", { className: b('grid'), children: hints.map((hint, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: b('title'), children: hint.title }), (0, jsx_runtime_1.jsx)("span", { className: b('hint'), children: hint.hint })] }, `md-hint-${index}`))) }), (0, jsx_runtime_1.jsx)(uikit_1.Link, { href: (0, md_hints_1.i18n)('documentation_link'), target: "_blank", className: b('docs-link'), children: (0, md_hints_1.i18n)('documentation') })] }));
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", { className: b('grid') }, hints.map((hint, index) => (react_1.default.createElement(react_1.default.Fragment, { key: `md-hint-${index}` },
+            react_1.default.createElement("span", { className: b('title') }, hint.title),
+            react_1.default.createElement("span", { className: b('hint') }, hint.hint))))),
+        react_1.default.createElement(uikit_1.Link, { href: (0, md_hints_1.i18n)('documentation_link'), target: "_blank", className: b('docs-link') }, (0, md_hints_1.i18n)('documentation'))));
 });
 exports.MarkdownHints.displayName = 'MarkdownHints';
-//# sourceMappingURL=MarkdownHints.js.map

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

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

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

@@ -1,5 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./MarkdownHints.js"), exports);
-//# sourceMappingURL=index.js.map
+tslib_1.__exportStar(require("./MarkdownHints"), exports);

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

@@ -18,8 +18,6 @@
   width: 300px;
 }
 .g-md-settings-content__mode-help {
-  position: relative;
-  top: 8px;
   float: right;
 }
 .g-md-settings-content__separator {
@@ -39,8 +37,8 @@
   left: 50%;
   opacity: 0.03;
   transform: translateX(-50%);
-  font-family: var(--g-text-code-font-family);
-  font-weight: var(--g-text-code-font-weight);
+  font-family: var(--g-font-family-monospace);
   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/cjs/bundle/settings/index.d.ts

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

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

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

package/build/cjs/bundle/sticky/index.d.ts

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

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

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stickyCn = void 0;
-const classname_1 = require("../../classname.js");
-require("./sticky.css");
+const classname_1 = require("../../classname");
 const b = (0, classname_1.cn)('editor-sticky');
 exports.stickyCn = {
     toolbar: ({ withSettings, stickyActive, isSticky }, mix) => {
@@ -23,4 +22,3 @@ exports.stickyCn = {
         return b(mods, mix);
     },
 };
-//# sourceMappingURL=index.js.map

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

@@ -5,8 +5,7 @@
 }
 .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/cjs/bundle/toolbar/ToolbarButtonWithPopupMenu.d.ts

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

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

@@ -1,25 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarButtonWithPopupMenu = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
-const classname_1 = require("../../classname.js");
-const lodash_1 = require("../../lodash.js");
-const hooks_1 = require("../../react-utils/hooks.js");
-const toolbar_1 = require("../../toolbar/index.js");
-require("./ToolbarButtonWithPopupMenu.css");
+const classname_1 = require("../../classname");
+const lodash_1 = require("../../lodash");
+const hooks_1 = require("../../react-utils/hooks");
+const toolbar_1 = require("../../toolbar");
 const b = (0, classname_1.cn)('toolbar-button-with-popup-menu');
-const ToolbarButtonWithPopupMenu = ({ disablePortal, className, focus, onClick, icon, iconClassName, chevronIconClassName, title, menuItems, _selectionType, }) => {
-    const [anchorElement, setAnchorElement] = (0, hooks_1.useElementState)();
+const ToolbarButtonWithPopupMenu = ({ className, focus, onClick, icon, iconClassName, chevronIconClassName, title, menuItems, _selectionType, }) => {
+    const buttonRef = react_1.default.useRef(null);
     const [open, , hide, toggleOpen] = (0, hooks_1.useBooleanState)(false);
-    const groups = (0, react_1.useMemo)(() => (0, lodash_1.groupBy)(menuItems.map((i) => ({ ...i, group: i.group || '' })), 'group'), [menuItems]);
+    const groups = react_1.default.useMemo(() => (0, lodash_1.groupBy)(menuItems.map((i) => (Object.assign(Object.assign({}, 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;
-    (0, react_1.useEffect)(() => {
+    react_1.default.useEffect(() => {
         if (shouldForceHide) {
             hide();
         }
@@ -30,17 +29,20 @@ const ToolbarButtonWithPopupMenu = ({ disablePortal, className, focus, onClick,
             popupOpen && someActive,
         ]
         : [someActive || popupOpen ? 'normal' : 'flat', someActive];
-    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: (0, lodash_1.isFunction)(title) ? title() : title, 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, 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)
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(uikit_1.ActionTooltip, { disabled: popupOpen, openDelay: toolbar_1.ToolbarTooltipDelay.Open, closeDelay: toolbar_1.ToolbarTooltipDelay.Close, title: (0, lodash_1.isFunction)(title) ? title() : title },
+            react_1.default.createElement(uikit_1.Button, { size: "m", ref: buttonRef, view: btnView, selected: btnSelected, disabled: everyDisabled, className: b(null, [className]), onClick: toggleOpen },
+                react_1.default.createElement(uikit_1.Icon, { data: icon.data, size: icon.size, className: iconClassName }),
+                '',
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronDown, className: chevronIconClassName }))),
+        react_1.default.createElement(uikit_1.Popup, { anchorRef: buttonRef, open: popupOpen, onClose: hide },
+            react_1.default.createElement(uikit_1.Menu, { size: "l" }, Object.entries(groups).map(([label, items], key) => {
+                return (react_1.default.createElement(uikit_1.Menu.Group, { label: label, key: key, className: b('menu-group') }, items.map(({ id, icon, iconSize = 16, action, text, iconClassname }) => (react_1.default.createElement(uikit_1.Menu.Item, { key: id, icon: react_1.default.createElement(uikit_1.Icon, { data: icon, size: iconSize, className: iconClassname }), active: action.isActive(), disabled: !action.isEnable(), onClick: () => {
                         hide();
-                }, children: (0, jsx_runtime_1.jsx)(uikit_1.Menu, { size: "l", 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();
-                                    action.run();
-                                    onClick?.(id);
-                                }, extraProps: { 'aria-label': text }, children: text }, id))) }, key));
-                    }) }) })] }));
+                        focus();
+                        action.run();
+                        onClick === null || onClick === void 0 ? void 0 : onClick(id);
+                    }, extraProps: { 'aria-label': text } }, text)))));
+            })))));
 };
 exports.ToolbarButtonWithPopupMenu = ToolbarButtonWithPopupMenu;
-//# sourceMappingURL=ToolbarButtonWithPopupMenu.js.map

package/build/cjs/bundle/toolbar/ToolbarSelect.d.ts

@@ -1,8 +1,7 @@
-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'> & {
+import React from 'react';
+import type { ActionStorage } from '../../core';
+import type { ToolbarBaseProps, WToolbarItemData } from './types';
+export declare type ToolbarSelectProps = ToolbarBaseProps<ActionStorage> & {
     items: WToolbarItemData[];
 };
 export declare const ToolbarSelect: React.FC<ToolbarSelectProps>;

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

@@ -1,27 +1,41 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarSelect = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("@gravity-ui/components");
 const uikit_1 = require("@gravity-ui/uikit");
-const classname_1 = require("../../classname.js");
-const lodash_1 = require("../../lodash.js");
-require("./ToolbarSelect.css");
+const classname_1 = require("../../classname");
+const lodash_1 = require("../../lodash");
+const PreviewTooltip_1 = require("../../toolbar/PreviewTooltip");
 const b = (0, classname_1.cn)('toolbar-select');
-const ToolbarSelect = ({ disablePortal, className, editor, focus, onClick, items, }) => {
+const ToolbarSelect = ({ className, editor, focus, onClick, items, }) => {
     const activeItem = items.find((item) => item.isActive(editor));
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(uikit_1.Select, { size: "m", view: "clear", className: className, disablePortal: disablePortal, onOpenChange: focus, value: activeItem ? [activeItem.id] : undefined, options: items.map((item) => ({
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(uikit_1.Select, { size: "m", view: "clear", className: className, onOpenChange: () => {
+                focus();
+            }, value: activeItem ? [activeItem.id] : undefined, options: items.map((item) => ({
                 data: item,
                 value: item.id,
                 text: (0, lodash_1.isFunction)(item.title) ? item.title() : item.title,
             })), renderOption: ({ text, data }) => {
-                const { icon, hotkey, hint } = data;
+                var _a;
+                const { icon, hotkey, hint, preview } = data;
                 const hintText = (0, lodash_1.isFunction)(hint) ? hint() : hint;
-                return ((0, jsx_runtime_1.jsxs)("div", { "aria-label": text, className: b('item'), children: [(0, jsx_runtime_1.jsx)("div", { className: b('item-icon'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icon.data, size: Number(icon.size ?? 16) + 2 }) }), (0, jsx_runtime_1.jsxs)("div", { className: b('item-content'), children: [text, (0, jsx_runtime_1.jsxs)("div", { className: b('item-extra'), children: [hotkey && (0, jsx_runtime_1.jsx)(uikit_1.Hotkey, { value: hotkey }), hintText && ((0, jsx_runtime_1.jsx)(uikit_1.HelpMark, { popoverProps: { modal: false }, className: b('item-hint'), children: hintText }))] })] })] }));
+                return (react_1.default.createElement(PreviewTooltip_1.PreviewTooltip, { preview: preview },
+                    react_1.default.createElement("div", { "aria-label": text, className: b('item') },
+                        react_1.default.createElement("div", { className: b('item-icon') },
+                            react_1.default.createElement(uikit_1.Icon, { data: icon.data, size: Number((_a = icon.size) !== null && _a !== void 0 ? _a : 16) + 2 })),
+                        react_1.default.createElement("div", { className: b('item-content') },
+                            text,
+                            react_1.default.createElement("div", { className: b('item-extra') },
+                                hotkey && react_1.default.createElement(uikit_1.Hotkey, { value: hotkey }),
+                                hintText && (react_1.default.createElement(components_1.HelpPopover, { content: hintText, className: b('item-hint') })))))));
             }, onUpdate: ([id]) => {
-                items.find((item) => item.id === id)?.exec(editor);
-                onClick?.(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);
                 focus();
-            } }) }));
+            } })));
 };
 exports.ToolbarSelect = ToolbarSelect;
-//# sourceMappingURL=ToolbarSelect.js.map

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

@@ -1,7 +1,6 @@
-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'> & {
+import React from 'react';
+import { ToolbarBaseProps } from '../../../toolbar';
+export declare type ToolbarColorsProps = Omit<ToolbarBaseProps<never>, 'editor'> & {
     active?: boolean;
     enable?: boolean;
     currentColor?: string;

package/build/cjs/bundle/toolbar/custom/ToolbarColors.js

@@ -1,23 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarColors = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classname_1 = require("../../../classname.js");
-const extensions_1 = require("../../../extensions/index.js");
-const menubar_1 = require("../../../i18n/menubar/index.js");
-const icons_1 = require("../../config/icons.js");
-const ToolbarButtonWithPopupMenu_1 = require("../ToolbarButtonWithPopupMenu.js");
-require("./ToolbarColors.css");
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classname_1 = require("../../../classname");
+const extensions_1 = require("../../../extensions");
+const menubar_1 = require("../../../i18n/menubar");
+const icons_1 = require("../../config/icons");
+const ToolbarButtonWithPopupMenu_1 = require("../ToolbarButtonWithPopupMenu");
 const b = (0, classname_1.cn)('toolbar-colors');
 const textColorIcon = icons_1.icons.textColor;
 const ToolbarColors = (props) => {
+    var _a;
     const { exec, onClick, enable, currentColor, withDefault } = props;
     const isDefault = currentColor === undefined;
     const onItemClick = (color) => () => {
         // do not exec when current color is default and clicked to default item
         if (!(isDefault && color === ''))
             exec(color);
-        onClick?.('colorify', { color: color === '' ? 'default' : color });
+        onClick === null || onClick === void 0 ? void 0 : onClick('colorify', { color: color === '' ? 'default' : color });
     };
     const items = [
         extensions_1.Colors.Gray,
@@ -27,25 +28,28 @@ const ToolbarColors = (props) => {
         extensions_1.Colors.Green,
         extensions_1.Colors.Blue,
         extensions_1.Colors.Violet,
-    ].map((color) => ({
-        id: color,
-        icon: textColorIcon.data,
-        iconSize: textColorIcon.size ?? 16,
-        text: (0, menubar_1.i18n)(`colorify__color_${color}`),
-        iconClassname: b('item-icon', { color }),
-        action: {
-            run: onItemClick(color),
-            isEnable: () => Boolean(enable),
-            isActive: () => color === currentColor,
-            meta() { },
-        },
-        group: (0, menubar_1.i18n)(`colorify__group_text`),
-    }));
+    ].map((color) => {
+        var _a;
+        return ({
+            id: color,
+            icon: textColorIcon.data,
+            iconSize: (_a = textColorIcon.size) !== null && _a !== void 0 ? _a : 16,
+            text: (0, menubar_1.i18n)(`colorify__color_${color}`),
+            iconClassname: b('item-icon', { color }),
+            action: {
+                run: onItemClick(color),
+                isEnable: () => Boolean(enable),
+                isActive: () => color === currentColor,
+                meta() { },
+            },
+            group: (0, menubar_1.i18n)(`colorify__group_text`),
+        });
+    });
     if (withDefault) {
         items.unshift({
             id: 'default',
             icon: textColorIcon.data,
-            iconSize: textColorIcon.size ?? 16,
+            iconSize: (_a = textColorIcon.size) !== null && _a !== void 0 ? _a : 16,
             text: (0, menubar_1.i18n)(`colorify__color_default`),
             iconClassname: b('item-icon', { color: 'default' }),
             group: (0, menubar_1.i18n)(`colorify__group_text`),
@@ -58,7 +62,6 @@ const ToolbarColors = (props) => {
             },
         });
     }
-    return ((0, jsx_runtime_1.jsx)(ToolbarButtonWithPopupMenu_1.ToolbarButtonWithPopupMenu, { ...props, title: (0, menubar_1.i18n)('colorify'), menuItems: items, icon: textColorIcon, _selectionType: "light", iconClassName: b('menu-icon', { color: currentColor }), chevronIconClassName: b('chevron-icon', { color: currentColor }) }));
+    return (react_1.default.createElement(ToolbarButtonWithPopupMenu_1.ToolbarButtonWithPopupMenu, Object.assign({}, props, { title: (0, menubar_1.i18n)('colorify'), menuItems: items, icon: textColorIcon, _selectionType: "light", iconClassName: b('menu-icon', { color: currentColor }), chevronIconClassName: b('chevron-icon', { color: currentColor }) })));
 };
 exports.ToolbarColors = ToolbarColors;
-//# sourceMappingURL=ToolbarColors.js.map

package/build/cjs/bundle/toolbar/custom/ToolbarFilePopup.d.ts

@@ -1,9 +1,10 @@
-import { FileFormProps } from "../../../forms/FileForm.js";
-import type { ToolbarBaseProps } from "../../../toolbar/index.js";
-import { BatchUploadResult, FileUploadHandler } from "../../../utils/upload.js";
-export type ToolbarFilePopupProps = Omit<ToolbarBaseProps<never>, 'editor'> & {
+import React, { RefObject } from 'react';
+import { FileFormProps } from '../../../forms/FileForm';
+import type { ToolbarBaseProps } from '../../../toolbar';
+import { BatchUploadResult, FileUploadHandler } from '../../../utils/upload';
+export declare type ToolbarFilePopupProps = Omit<ToolbarBaseProps<never>, 'editor'> & {
     hide: () => void;
-    anchorElement: HTMLElement | null;
+    anchorRef: RefObject<HTMLElement>;
     uploadHandler?: FileUploadHandler;
     onSuccessUpload?: (result: BatchUploadResult) => void;
 } & Pick<FileFormProps, 'onSubmit'>;