@gravity-ui/markdown-editor 14.12.1 → 14.12.3

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

@@ -1,11 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, memo } from 'react';
+import React from 'react';
 import { Link } from '@gravity-ui/uikit';
-import { i18n } from "../../../i18n/md-hints/index.js";
-import { cn } from "../../../classname.js";
-import "./MarkdownHints.css";
+import { i18n } from '.././../../i18n/md-hints';
+import { cn } from '../../../classname';
+import './MarkdownHints.css';
 const b = cn('markdown-hints');
-export const MarkdownHints = memo(function MarkdownHints() {
+export const MarkdownHints = React.memo(function MarkdownHints() {
     const hints = [
         { title: i18n('header_title'), hint: i18n('header_hint') },
         { title: i18n('italic_title'), hint: i18n('italic_hint') },
@@ -18,7 +17,10 @@ export const MarkdownHints = memo(function MarkdownHints() {
         { title: i18n('list_title'), hint: i18n('list_hint') },
         { title: i18n('numbered-list_title'), hint: i18n('numbered-list_hint') },
     ];
-    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') })] }));
+    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'))));
 });
 MarkdownHints.displayName = 'MarkdownHints';
-//# sourceMappingURL=MarkdownHints.js.map

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

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

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

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

package/build/esm/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/esm/bundle/settings/index.d.ts

@@ -1,12 +1,13 @@
-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';
+import './index.css';
+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/esm/bundle/settings/index.js

@@ -1,42 +1,62 @@
-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 { memo, useState } from 'react';
+import React from 'react';
+import { HelpPopover } from '@gravity-ui/components';
 import { Eye, Gear, LogoMarkdown } from '@gravity-ui/icons';
-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";
+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';
 const placement = ['bottom-end', 'top-end'];
 const bSettings = cn('editor-settings');
 const bContent = cn('settings-content');
-export const EditorSettings = memo(function EditorSettings(props) {
+export const EditorSettings = React.memo(function EditorSettings(props) {
     const { className, onShowPreviewChange, showPreview, renderPreviewButton, settingsVisible } = props;
-    const [chevronElement, setChevronElement] = useState(null);
+    const chevronRef = React.useRef(null);
     const [popupShown, , hidePopup, togglePopup] = useBooleanState(false);
-    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') }) })] }))] }));
+    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') })))))));
 });
 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 (_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 })] }));
+    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)));
 };
-//# sourceMappingURL=index.js.map

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

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

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

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

package/build/esm/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/esm/bundle/toolbar/ToolbarButtonWithPopupMenu.d.ts

@@ -1,8 +1,9 @@
-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';
+import './ToolbarButtonWithPopupMenu.css';
+export declare type MenuItem = {
     id: string;
     action: Action;
     icon: IconProps['data'];
@@ -12,7 +13,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/esm/bundle/toolbar/ToolbarButtonWithPopupMenu.js

@@ -1,22 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo } from 'react';
+import React from 'react';
 import { ChevronDown } from '@gravity-ui/icons';
 import { ActionTooltip, Button, Icon, Menu, Popup } from '@gravity-ui/uikit';
-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";
+import { cn } from '../../classname';
+import { groupBy, isFunction } from '../../lodash';
+import { useBooleanState } from '../../react-utils/hooks';
+import { ToolbarTooltipDelay } from '../../toolbar';
+import './ToolbarButtonWithPopupMenu.css';
 const b = cn('toolbar-button-with-popup-menu');
-export const ToolbarButtonWithPopupMenu = ({ disablePortal, className, focus, onClick, icon, iconClassName, chevronIconClassName, title, menuItems, _selectionType, }) => {
-    const [anchorElement, setAnchorElement] = useElementState();
+export const ToolbarButtonWithPopupMenu = ({ className, focus, onClick, icon, iconClassName, chevronIconClassName, title, menuItems, _selectionType, }) => {
+    const buttonRef = React.useRef(null);
     const [open, , hide, toggleOpen] = useBooleanState(false);
-    const groups = useMemo(() => groupBy(menuItems.map((i) => ({ ...i, group: i.group || '' })), 'group'), [menuItems]);
+    const groups = React.useMemo(() => 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;
-    useEffect(() => {
+    React.useEffect(() => {
         if (shouldForceHide) {
             hide();
         }
@@ -27,16 +26,19 @@ export const ToolbarButtonWithPopupMenu = ({ disablePortal, className, focus, on
             popupOpen && someActive,
         ]
         : [someActive || popupOpen ? 'normal' : 'flat', someActive];
-    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)
+    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: () => {
                         hide();
-                }, 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));
-                    }) }) })] }));
+                        focus();
+                        action.run();
+                        onClick === null || onClick === void 0 ? void 0 : onClick(id);
+                    }, extraProps: { 'aria-label': text } }, text)))));
+            })))));
 };
-//# sourceMappingURL=ToolbarButtonWithPopupMenu.js.map

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

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

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

@@ -1,23 +1,37 @@
-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";
+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 { PreviewTooltip } from '../../toolbar/PreviewTooltip';
+import './ToolbarSelect.css';
 const b = cn('toolbar-select');
-export const ToolbarSelect = ({ disablePortal, className, editor, focus, onClick, items, }) => {
+export const ToolbarSelect = ({ className, editor, focus, onClick, items, }) => {
     const activeItem = items.find((item) => item.isActive(editor));
-    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) => ({
+    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) => ({
                 data: item,
                 value: item.id,
                 text: 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 = isFunction(hint) ? hint() : 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 }))] })] })] }));
+                return (React.createElement(PreviewTooltip, { preview: preview },
+                    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') })))))));
             }, 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();
-            } }) }));
+            } })));
 };
-//# sourceMappingURL=ToolbarSelect.js.map

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

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

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

@@ -1,20 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../../classname.js";
-import { Colors } from "../../../extensions/index.js";
-import { i18n } from "../../../i18n/menubar/index.js";
-import { icons } from "../../config/icons.js";
-import { ToolbarButtonWithPopupMenu, } from "../ToolbarButtonWithPopupMenu.js";
-import "./ToolbarColors.css";
+import React from 'react';
+import { cn } from '../../../classname';
+import { Colors } from '../../../extensions';
+import { i18n } from '../../../i18n/menubar';
+import { icons } from '../../config/icons';
+import { ToolbarButtonWithPopupMenu } from '../ToolbarButtonWithPopupMenu';
+import './ToolbarColors.css';
 const b = cn('toolbar-colors');
 const textColorIcon = icons.textColor;
 export 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 = [
         Colors.Gray,
@@ -24,25 +25,28 @@ export const ToolbarColors = (props) => {
         Colors.Green,
         Colors.Blue,
         Colors.Violet,
-    ].map((color) => ({
-        id: color,
-        icon: textColorIcon.data,
-        iconSize: textColorIcon.size ?? 16,
-        text: i18n(`colorify__color_${color}`),
-        iconClassname: b('item-icon', { color }),
-        action: {
-            run: onItemClick(color),
-            isEnable: () => Boolean(enable),
-            isActive: () => color === currentColor,
-            meta() { },
-        },
-        group: 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: i18n(`colorify__color_${color}`),
+            iconClassname: b('item-icon', { color }),
+            action: {
+                run: onItemClick(color),
+                isEnable: () => Boolean(enable),
+                isActive: () => color === currentColor,
+                meta() { },
+            },
+            group: 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: i18n(`colorify__color_default`),
             iconClassname: b('item-icon', { color: 'default' }),
             group: i18n(`colorify__group_text`),
@@ -55,6 +59,5 @@ export const ToolbarColors = (props) => {
             },
         });
     }
-    return (_jsx(ToolbarButtonWithPopupMenu, { ...props, title: i18n('colorify'), menuItems: items, icon: textColorIcon, _selectionType: "light", iconClassName: b('menu-icon', { color: currentColor }), chevronIconClassName: b('chevron-icon', { color: currentColor }) }));
+    return (React.createElement(ToolbarButtonWithPopupMenu, Object.assign({}, props, { title: i18n('colorify'), menuItems: items, icon: textColorIcon, _selectionType: "light", iconClassName: b('menu-icon', { color: currentColor }), chevronIconClassName: b('chevron-icon', { color: currentColor }) })));
 };
-//# sourceMappingURL=ToolbarColors.js.map

package/build/esm/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'>;

package/build/esm/bundle/toolbar/custom/ToolbarFilePopup.js

@@ -1,25 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { Popup, useToaster } from '@gravity-ui/uikit';
-import { FileForm } from "../../../forms/FileForm.js";
-import { i18n } from "../../../i18n/forms/index.js";
-import { useBooleanState } from "../../../react-utils/hooks.js";
-import { batchUploadFiles } from "../../../utils/upload.js";
+import React, { useCallback } from 'react';
+import { Popup } from '@gravity-ui/uikit';
+import { FileForm } from '../../../forms/FileForm';
+import { i18n } from '../../../i18n/forms';
+import { useBooleanState } from '../../../react-utils/hooks';
+import { useToaster } from '../../../react-utils/toaster';
+import { batchUploadFiles } from '../../../utils/upload';
 const placement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
-export const ToolbarFilePopup = ({ className, hide, anchorElement, onSubmit, focus, onClick, uploadHandler, onSuccessUpload, }) => {
+export const ToolbarFilePopup = ({ className, hide, anchorRef, onSubmit, focus, onClick, uploadHandler, onSuccessUpload, }) => {
     const toaster = useToaster();
     const [loading, showLoading, hideLoading] = useBooleanState(false);
     const handleCancel = useCallback(() => {
         hide();
         focus();
     }, [focus, hide]);
-    return (_jsx(Popup, { open: true, modal: true, onOpenChange: handleCancel, anchorElement: anchorElement, placement: placement, className: className, children: _jsx(FileForm, { autoFocus: true, onAttach: uploadHandler &&
+    return (React.createElement(Popup, { open: true, onClose: handleCancel, anchorRef: anchorRef, placement: placement, className: className },
+        React.createElement(FileForm, { autoFocus: true, onAttach: uploadHandler &&
                 ((files) => {
                     showLoading();
                     batchUploadFiles(files, uploadHandler).then((res) => {
                         hideLoading();
                         hide();
-                        onSuccessUpload?.(res);
+                        onSuccessUpload === null || onSuccessUpload === void 0 ? void 0 : onSuccessUpload(res);
                     }, (error) => {
                         hideLoading();
                         toaster.add({
@@ -33,7 +34,6 @@ export const ToolbarFilePopup = ({ className, hide, anchorElement, onSubmit, foc
                 hide();
                 focus();
                 onSubmit(data);
-                onClick?.('addFile');
-            }, loading: loading }) }));
+                onClick === null || onClick === void 0 ? void 0 : onClick('addFile');
+            }, loading: loading })));
 };
-//# sourceMappingURL=ToolbarFilePopup.js.map

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

@@ -1,10 +1,11 @@
-import { type ImageFormProps } from "../../../forms/ImageForm.js";
-import type { ToolbarBaseProps } from "../../../toolbar/index.js";
-import { type BatchUploadResult, type FileUploadHandler } from "../../../utils/upload.js";
-export type ToolbarImagePopuProps = Omit<ToolbarBaseProps<never>, 'editor'> & {
+import React, { RefObject } from 'react';
+import { ImageFormProps } from '../../../forms/ImageForm';
+import type { ToolbarBaseProps } from '../../../toolbar';
+import { BatchUploadResult, FileUploadHandler } from '../../../utils/upload';
+export declare type ToolbarImagePopuProps = Omit<ToolbarBaseProps<never>, 'editor'> & {
     uploadImages?: FileUploadHandler;
     onSuccessUpload?: (res: BatchUploadResult) => void;
     hide: () => void;
-    anchorElement: HTMLElement | null;
+    anchorRef: RefObject<HTMLElement>;
 } & Pick<ImageFormProps, 'onSubmit'>;
 export declare const ToolbarImagePopup: React.FC<ToolbarImagePopuProps>;