@gravity-ui/markdown-editor 14.12.1 → 14.12.3

package/build/cjs/table-utils/table-desc.js

@@ -3,13 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableDesc = void 0;
 const tslib_1 = require("tslib");
 const is_number_1 = tslib_1.__importDefault(require("is-number"));
-const utils_1 = require("./utils.js");
+const utils_1 = require("./utils");
 class TableDesc {
-    rows;
-    cols;
-    rowsDesc;
-    baseOffset;
-    static __cache = new WeakMap();
+    constructor(
+    /* eslint-disable @typescript-eslint/parameter-properties */
+    rows, cols, rowsDesc, baseOffset) {
+        this.rows = rows;
+        this.cols = cols;
+        this.rowsDesc = rowsDesc;
+        this.baseOffset = baseOffset;
+    }
     static create(table) {
         if (this.__cache.has(table))
             return this.__cache.get(table);
@@ -26,6 +29,7 @@ class TableDesc {
         });
         tbody.forEach((trow, _1, trowIndex) => {
             trow.forEach((tcell, offset, tcellRealIndex) => {
+                var _a;
                 const rowDesc = rows[trowIndex];
                 let tcellIndex = tcellRealIndex;
                 while (rowDesc.cells[tcellIndex]) {
@@ -51,7 +55,7 @@ class TableDesc {
                     rowDesc.rowspan = true;
                     const rowspan = (cellDesc.rowspan = parseInt(tcell.attrs['rowspan'], 10));
                     for (let i = 1; i < rowspan; i++) {
-                        const colspan = cellDesc.colspan ?? 1;
+                        const colspan = (_a = cellDesc.colspan) !== null && _a !== void 0 ? _a : 1;
                         for (let j = 0; j < colspan; j++)
                             rows[trowIndex + i].cells[tcellIndex + j] = {
                                 type: 'virtual',
@@ -65,41 +69,38 @@ class TableDesc {
         this.__cache.set(table, desc);
         return desc;
     }
-    constructor(
-    /* eslint-disable @typescript-eslint/parameter-properties */
-    rows, cols, rowsDesc, baseOffset) {
-        this.rows = rows;
-        this.cols = cols;
-        this.rowsDesc = rowsDesc;
-        this.baseOffset = baseOffset;
-    }
     rowHasVirtualCells(rowIndex) {
-        return this.rowsDesc[rowIndex]?.cells.some((cell) => cell.type === 'virtual');
+        var _a;
+        return (_a = this.rowsDesc[rowIndex]) === null || _a === void 0 ? void 0 : _a.cells.some((cell) => cell.type === 'virtual');
     }
     columnHasVirtualCells(columnIndex) {
-        return this.rowsDesc.some((row) => row.cells[columnIndex]?.type === 'virtual');
+        return this.rowsDesc.some((row) => { var _a; return ((_a = row.cells[columnIndex]) === null || _a === void 0 ? void 0 : _a.type) === 'virtual'; });
     }
     isSafeColumn(columnIndex) {
         return this.rowsDesc.every((row) => {
+            var _a;
             const cell = row.cells[columnIndex];
             if (cell.type === 'real' && (!cell.colspan || cell.colspan === 1))
                 return true;
-            if (cell.type === 'virtual' && cell.rowspan?.[1] === columnIndex)
+            if (cell.type === 'virtual' && ((_a = cell.rowspan) === null || _a === void 0 ? void 0 : _a[1]) === columnIndex)
                 return true;
             return false;
         });
     }
     isSafeRow(rowIndex) {
-        return this.rowsDesc[rowIndex]?.cells.every((cell) => {
+        var _a;
+        return (_a = this.rowsDesc[rowIndex]) === null || _a === void 0 ? void 0 : _a.cells.every((cell) => {
+            var _a;
             if (cell.type === 'real' && (!cell.rowspan || cell.rowspan === 1))
                 return true;
-            if (cell.type === 'virtual' && cell.colspan?.[0] === rowIndex)
+            if (cell.type === 'virtual' && ((_a = cell.colspan) === null || _a === void 0 ? void 0 : _a[0]) === rowIndex)
                 return true;
             return false;
         });
     }
     getOffsetForRow(rowIndex) {
-        return this.baseOffset + this.rowsDesc[rowIndex]?.offset;
+        var _a;
+        return this.baseOffset + ((_a = this.rowsDesc[rowIndex]) === null || _a === void 0 ? void 0 : _a.offset);
     }
     getRelativePosForRow(rowIndex) {
         const from = this.getOffsetForRow(rowIndex);
@@ -107,15 +108,16 @@ class TableDesc {
         return { from, to };
     }
     getRelativePosForCell(rowIndex, columnIndex) {
-        const cell = this.rowsDesc[rowIndex]?.cells[columnIndex];
+        var _a;
+        const cell = (_a = this.rowsDesc[rowIndex]) === null || _a === void 0 ? void 0 : _a.cells[columnIndex];
         const rowOffset = this.getOffsetForRow(rowIndex);
-        if (cell?.type === 'real') {
+        if ((cell === null || cell === void 0 ? void 0 : cell.type) === 'real') {
             // 1 – open boundary for row node
             const from = rowOffset + 1 + cell.offset;
             const to = from + cell.node.nodeSize;
             return { type: 'real', from, to };
         }
-        if (cell?.type === 'virtual') {
+        if ((cell === null || cell === void 0 ? void 0 : cell.type) === 'virtual') {
             let index = columnIndex;
             while (--index >= 0) {
                 const cell = this.rowsDesc[rowIndex].cells[index];
@@ -144,4 +146,4 @@ class TableDesc {
     }
 }
 exports.TableDesc = TableDesc;
-//# sourceMappingURL=table-desc.js.map
+TableDesc.__cache = new WeakMap();

package/build/cjs/table-utils/utils.d.ts

@@ -5,17 +5,26 @@ export declare const isTableNode: Predicate;
 export declare const isTableBodyNode: Predicate;
 export declare const isTableRowNode: Predicate;
 export declare const isTableCellNode: Predicate;
-export declare const findParentTable: any;
-export declare const findParentTableBody: any;
-export declare const findParentTableRow: any;
-export declare const findParentTableCell: any;
-export declare const findParentTableFromPos: ($pos: ResolvedPos) => any;
-export declare const findParentTableBodyFromPos: ($pos: ResolvedPos) => any;
-export declare const findParentTableRowFromPos: ($pos: ResolvedPos) => any;
-export declare const findParentTableCellFromPos: ($pos: ResolvedPos) => any;
-export declare const findChildTableRows: (node: PmNode) => any;
-export declare const findChildTableCells: (node: PmNode) => any;
-export declare const findChildTableBody: (node: PmNode) => any;
+export declare const findParentTable: ({ $from, $to }: import("prosemirror-state").Selection, validateSameParent?: boolean | undefined) => import("prosemirror-utils/dist/types").FindResult;
+export declare const findParentTableBody: ({ $from, $to }: import("prosemirror-state").Selection, validateSameParent?: boolean | undefined) => import("prosemirror-utils/dist/types").FindResult;
+export declare const findParentTableRow: ({ $from, $to }: import("prosemirror-state").Selection, validateSameParent?: boolean | undefined) => import("prosemirror-utils/dist/types").FindResult;
+export declare const findParentTableCell: ({ $from, $to }: import("prosemirror-state").Selection, validateSameParent?: boolean | undefined) => import("prosemirror-utils/dist/types").FindResult;
+export declare const findParentTableFromPos: ($pos: ResolvedPos) => import("prosemirror-utils/dist/types").FindResult;
+export declare const findParentTableBodyFromPos: ($pos: ResolvedPos) => import("prosemirror-utils/dist/types").FindResult;
+export declare const findParentTableRowFromPos: ($pos: ResolvedPos) => import("prosemirror-utils/dist/types").FindResult;
+export declare const findParentTableCellFromPos: ($pos: ResolvedPos) => import("prosemirror-utils/dist/types").FindResult;
+export declare const findChildTableRows: (node: PmNode) => {
+    node: PmNode;
+    pos: number;
+}[];
+export declare const findChildTableCells: (node: PmNode) => {
+    node: PmNode;
+    pos: number;
+}[];
+export declare const findChildTableBody: (node: PmNode) => {
+    node: PmNode;
+    pos: number;
+}[];
 export declare const getTableDimensions: (node: PmNode) => {
     rows: number;
     cols: number;

package/build/cjs/table-utils/utils.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTableDimensions = exports.findChildTableBody = exports.findChildTableCells = exports.findChildTableRows = exports.findParentTableCellFromPos = exports.findParentTableRowFromPos = exports.findParentTableBodyFromPos = exports.findParentTableFromPos = exports.findParentTableCell = exports.findParentTableRow = exports.findParentTableBody = exports.findParentTable = exports.isTableCellNode = exports.isTableRowNode = exports.isTableBodyNode = exports.isTableNode = void 0;
-exports.atEndOfCell = atEndOfCell;
+exports.atEndOfCell = exports.getTableDimensions = exports.findChildTableBody = exports.findChildTableCells = exports.findChildTableRows = exports.findParentTableCellFromPos = exports.findParentTableRowFromPos = exports.findParentTableBodyFromPos = exports.findParentTableFromPos = exports.findParentTableCell = exports.findParentTableRow = exports.findParentTableBody = exports.findParentTable = exports.isTableCellNode = exports.isTableRowNode = exports.isTableBodyNode = exports.isTableNode = void 0;
 const tslib_1 = require("tslib");
 const is_number_1 = tslib_1.__importDefault(require("is-number"));
 const prosemirror_utils_1 = require("prosemirror-utils");
-const selection_1 = require("../utils/selection.js");
-const const_1 = require("./const.js");
+const selection_1 = require("../utils/selection");
+const const_1 = require("./const");
 const isTableNode = (node) => node.type.spec.tableRole === const_1.TableRole.Table;
 exports.isTableNode = isTableNode;
 const isTableBodyNode = (node) => node.type.spec.tableRole === const_1.TableRole.Body;
@@ -36,7 +35,7 @@ exports.findChildTableBody = findChildTableBody;
 const getTableDimensions = (node) => {
     let rows = 0, cols = 0;
     const tbody = node.firstChild;
-    tbody?.forEach((trow, _1, trowIndex) => {
+    tbody === null || tbody === void 0 ? void 0 : tbody.forEach((trow, _1, trowIndex) => {
         rows++;
         if (trowIndex === 0) {
             trow.forEach((tcell, _2) => {
@@ -69,4 +68,4 @@ function atEndOfCell(view, dir) {
     }
     return null;
 }
-//# sourceMappingURL=utils.js.map
+exports.atEndOfCell = atEndOfCell;

package/build/cjs/toolbar/FlexToolbar.d.ts

@@ -1,7 +1,7 @@
-import { type ToolbarProps } from "./Toolbar.js";
-import { type ToolbarItemData } from "./types.js";
-import "./FlexToolbar.css";
-export type FlexToolbarProps<E> = ToolbarProps<E> & {
+/// <reference types="react" />
+import { type ToolbarProps } from './Toolbar';
+import { type ToolbarItemData } from './types';
+export declare type FlexToolbarProps<E> = ToolbarProps<E> & {
     dotsTitle: string | (() => string);
     hiddenActions?: ToolbarItemData<E>[];
 };

package/build/cjs/toolbar/FlexToolbar.js

@@ -1,18 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlexToolbar = FlexToolbar;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+exports.FlexToolbar = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const react_use_1 = require("react-use");
-const classname_1 = require("../classname.js");
-const logger_1 = require("../logger.js");
-const hooks_1 = require("../react-utils/hooks.js");
-const Toolbar_1 = require("./Toolbar.js");
-const ToolbarListButton_1 = require("./ToolbarListButton.js");
-const flexible_1 = require("./flexible.js");
-const types_1 = require("./types.js");
-require("./FlexToolbar.css");
+const classname_1 = require("../classname");
+const logger_1 = require("../logger");
+const hooks_1 = require("../react-utils/hooks");
+const Toolbar_1 = require("./Toolbar");
+const ToolbarListButton_1 = require("./ToolbarListButton");
+const flexible_1 = require("./flexible");
+const types_1 = require("./types");
 const b = (0, classname_1.cn)('flex-toolbar');
 function FlexToolbar(props) {
     (0, hooks_1.useRenderTime)((time) => {
@@ -24,7 +23,7 @@ function FlexToolbar(props) {
     });
     const { data, className, hiddenActions } = props;
     const [ref, { width }] = (0, react_use_1.useMeasure)();
-    const { data: items, dots } = (0, react_1.useMemo)(() => {
+    const { data: items, dots } = react_1.default.useMemo(() => {
         const toolbarButtonIds = data.reduce((a, toolbarGroup) => {
             return [
                 ...a,
@@ -39,13 +38,16 @@ function FlexToolbar(props) {
             ];
         }, []);
         // Finding only actions tha are not present in the main toolbar config
-        const filteredHiddenAction = hiddenActions?.filter((a) => !toolbarButtonIds.includes(a.id));
+        const filteredHiddenAction = hiddenActions === null || hiddenActions === void 0 ? void 0 : hiddenActions.filter((a) => !toolbarButtonIds.includes(a.id));
         return (0, flexible_1.shrinkToolbarData)({
             data,
             availableWidth: width,
             hiddenActions: filteredHiddenAction,
         });
     }, [data, width, hiddenActions]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: b(null, [className]), children: (0, jsx_runtime_1.jsxs)("div", { className: b('container'), children: [(0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar, { ...props, data: items, className: b('bar') }), dots?.length && ((0, jsx_runtime_1.jsx)(ToolbarListButton_1.ToolbarListButton, { data: dots, icon: { data: icons_1.Ellipsis }, title: props.dotsTitle, editor: props.editor, focus: props.focus, onClick: props.onClick, className: b('dots'), alwaysActive: true }))] }) }));
+    return (react_1.default.createElement("div", { ref: ref, className: b(null, [className]) },
+        react_1.default.createElement("div", { className: b('container') },
+            react_1.default.createElement(Toolbar_1.Toolbar, Object.assign({}, props, { data: items, className: b('bar') })),
+            (dots === null || dots === void 0 ? void 0 : dots.length) && (react_1.default.createElement(ToolbarListButton_1.ToolbarListButton, { data: dots, icon: { data: icons_1.Ellipsis }, title: props.dotsTitle, editor: props.editor, focus: props.focus, onClick: props.onClick, className: b('dots'), alwaysActive: true })))));
 }
-//# sourceMappingURL=FlexToolbar.js.map
+exports.FlexToolbar = FlexToolbar;

package/build/cjs/toolbar/PreviewTooltip.css

@@ -3,7 +3,6 @@
   border-radius: var(--g-border-radius-s);
   background-color: var(--g-color-base-float-heavy);
 }
-.g-md-preview-tooltip__content {
+.g-md-preview-tooltip .g-popup__content:first-child {
   padding: 0 0 0 var(--g-spacing-2);
-  background-color: var(--g-color-base-float);
 }

package/build/cjs/toolbar/PreviewTooltip.d.ts

@@ -1,5 +1,5 @@
-import "./PreviewTooltip.css";
-type PreviewTooltipProps = {
+import React from 'react';
+declare type PreviewTooltipProps = {
     preview?: React.ReactNode;
     children: React.ReactElement;
 };

package/build/cjs/toolbar/PreviewTooltip.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PreviewTooltip = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
-const classname_1 = require("../classname.js");
-const const_1 = require("./const.js");
-require("./PreviewTooltip.css");
+const classname_1 = require("../classname");
+const const_1 = require("./const");
 const b = (0, classname_1.cn)('preview-tooltip');
 const PreviewTooltip = ({ preview, children }) => {
-    return ((0, jsx_runtime_1.jsx)(uikit_1.Tooltip, { placement: "right", className: b(), disabled: !preview, openDelay: const_1.ToolbarTooltipDelay.Open, closeDelay: const_1.ToolbarTooltipDelay.Close, content: (0, jsx_runtime_1.jsx)("div", { className: b('content'), children: preview }), children: children }));
+    if (!preview)
+        return children;
+    return (react_1.default.createElement(uikit_1.Tooltip, { placement: ['right', 'left'], className: b(), contentClassName: b('content'), disabled: !preview, openDelay: const_1.ToolbarTooltipDelay.Open, closeDelay: const_1.ToolbarTooltipDelay.Close, content: preview }, children));
 };
 exports.PreviewTooltip = PreviewTooltip;
-//# sourceMappingURL=PreviewTooltip.js.map

package/build/cjs/toolbar/Toolbar.d.ts

@@ -1,7 +1,7 @@
-import type { ToolbarBaseProps, ToolbarData } from "./types.js";
-import "./Toolbar.css";
+/// <reference types="react" />
+import type { ToolbarBaseProps, ToolbarData } from './types';
 export type { ToolbarData };
-export type ToolbarProps<E> = ToolbarBaseProps<E> & {
+export declare type ToolbarProps<E> = ToolbarBaseProps<E> & {
     data: ToolbarData<E>;
 };
 export declare function Toolbar<E>({ editor, data, className, focus, onClick }: ToolbarProps<E>): JSX.Element;

package/build/cjs/toolbar/Toolbar.js

@@ -1,16 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toolbar = Toolbar;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classname_1 = require("../classname.js");
-const ToolbarGroup_1 = require("./ToolbarGroup.js");
-require("./Toolbar.css");
+exports.Toolbar = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classname_1 = require("../classname");
+const ToolbarGroup_1 = require("./ToolbarGroup");
 const b = (0, classname_1.cn)('toolbar');
 function Toolbar({ editor, data, className, focus, onClick }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: b(null, [className]), children: data.map((group, index) => {
-            const isLastGroup = index === data.length - 1;
-            return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolbarGroup_1.ToolbarButtonGroup, { data: group, editor: editor, focus: focus, onClick: onClick, className: b('group') }), isLastGroup || (0, jsx_runtime_1.jsx)("div", { className: b('group-separator') })] }, index));
-        }) }));
+    return (react_1.default.createElement("div", { className: b(null, [className]) }, data.map((group, index) => {
+        const isLastGroup = index === data.length - 1;
+        return (react_1.default.createElement(react_1.default.Fragment, { key: index },
+            react_1.default.createElement(ToolbarGroup_1.ToolbarButtonGroup, { data: group, editor: editor, focus: focus, onClick: onClick, className: b('group') }),
+            isLastGroup || react_1.default.createElement("div", { className: b('group-separator') })));
+    })));
 }
-//# sourceMappingURL=Toolbar.js.map
+exports.Toolbar = Toolbar;

package/build/cjs/toolbar/ToolbarButton.d.ts

@@ -1,16 +1,16 @@
-import type { ToolbarBaseProps, ToolbarItemData } from "./types.js";
-import "./ToolbarButton.css";
-export type ToolbarButtonProps<E> = ToolbarBaseProps<E> & ToolbarItemData<E>;
-export type ToolbarButtonViewProps = Pick<ToolbarItemData<unknown>, 'icon' | 'title' | 'hint' | 'hotkey' | 'hintWhenDisabled'> & {
+import React from 'react';
+import type { ToolbarBaseProps, ToolbarItemData } from './types';
+export declare type ToolbarButtonProps<E> = ToolbarBaseProps<E> & ToolbarItemData<E>;
+export declare type ToolbarButtonViewProps = Pick<ToolbarItemData<unknown>, 'icon' | 'title' | 'hint' | 'hotkey' | 'disabledPopoverVisible' | 'hintWhenDisabled'> & {
     active: boolean;
     enabled: boolean;
     onClick: () => void;
     className?: string;
 };
-export declare const ToolbarButtonView: import("react").ForwardRefExoticComponent<Pick<ToolbarItemData<unknown>, "title" | "icon" | "hint" | "hotkey" | "hintWhenDisabled"> & {
+export declare const ToolbarButtonView: React.ForwardRefExoticComponent<Pick<ToolbarItemData<unknown>, "title" | "icon" | "hint" | "hotkey" | "disabledPopoverVisible" | "hintWhenDisabled"> & {
     active: boolean;
     enabled: boolean;
     onClick: () => void;
-    className?: string;
-} & import("react").RefAttributes<HTMLButtonElement>>;
+    className?: string | undefined;
+} & React.RefAttributes<HTMLElement>>;
 export declare function ToolbarButton<E>(props: ToolbarButtonProps<E>): JSX.Element;

package/build/cjs/toolbar/ToolbarButton.js

@@ -1,40 +1,38 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarButtonView = void 0;
-exports.ToolbarButton = ToolbarButton;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+exports.ToolbarButton = exports.ToolbarButtonView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
-const classname_1 = require("../classname.js");
-const common_1 = require("../i18n/common/index.js");
-const lodash_1 = require("../lodash.js");
-const const_1 = require("./const.js");
-require("./ToolbarButton.css");
+const classname_1 = require("../classname");
+const common_1 = require("../i18n/common");
+const lodash_1 = require("../lodash");
+const const_1 = require("./const");
 const b = (0, classname_1.cn)('toolbar-button');
-exports.ToolbarButtonView = (0, react_1.forwardRef)(function ToolbarButtonView({ icon, title, hint, hotkey, hintWhenDisabled, active, enabled, onClick, className }, ref) {
+exports.ToolbarButtonView = react_1.default.forwardRef(function ToolbarButtonView({ icon, title, hint, hotkey, disabledPopoverVisible = true, hintWhenDisabled, active, enabled, onClick, className, }, ref) {
+    var _a;
     const disabled = !active && !enabled;
     const titleText = (0, lodash_1.isFunction)(title) ? title() : title;
     const hintText = (0, lodash_1.isFunction)(hint) ? hint() : hint;
-    const hideHintWhenDisabled = hintWhenDisabled === false || !disabled;
+    const hideHintWhenDisabled = hintWhenDisabled === false || !disabledPopoverVisible || !disabled;
     const hintWhenDisabledText = typeof hintWhenDisabled === 'string'
         ? hintWhenDisabled
         : typeof hintWhenDisabled === 'function'
             ? hintWhenDisabled()
             : (0, common_1.i18n)('toolbar_action_disabled');
-    return ((0, jsx_runtime_1.jsx)(uikit_1.Popover, { content: (0, jsx_runtime_1.jsx)("div", { className: b('action-disabled-tooltip'), children: hintWhenDisabledText }), disabled: hideHintWhenDisabled, placement: ['bottom'], children: (_, refForPopover) => ((0, jsx_runtime_1.jsx)(uikit_1.ActionTooltip, { openDelay: const_1.ToolbarTooltipDelay.Open, closeDelay: const_1.ToolbarTooltipDelay.Close, description: hintText, title: titleText, hotkey: hotkey, children: (_, refForTooltip) => ((0, jsx_runtime_1.jsx)(uikit_1.Button, { size: "m", ref: (elem) => {
-                    (0, uikit_1.setRef)(ref, elem);
-                    (0, uikit_1.setRef)(refForPopover, elem);
-                    (0, uikit_1.setRef)(refForTooltip, elem);
-                }, selected: active, disabled: disabled, view: active ? 'normal' : 'flat', onClick: onClick, className: b(null, [className]), "aria-label": titleText, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icon.data, size: icon.size ?? 16 }) })) })) }));
+    return (react_1.default.createElement(uikit_1.Popover, { content: hintWhenDisabledText, disabled: hideHintWhenDisabled, tooltipContentClassName: b('action-disabled-tooltip'), placement: ['bottom'] },
+        react_1.default.createElement(uikit_1.ActionTooltip, { openDelay: const_1.ToolbarTooltipDelay.Open, closeDelay: const_1.ToolbarTooltipDelay.Close, description: hintText, title: titleText, hotkey: hotkey },
+            react_1.default.createElement(uikit_1.Button, { size: "m", ref: ref, selected: active, disabled: disabled, view: active ? 'normal' : 'flat', onClick: onClick, className: b(null, [className]), extraProps: { 'aria-label': titleText } },
+                react_1.default.createElement(uikit_1.Icon, { data: icon.data, size: (_a = icon.size) !== null && _a !== void 0 ? _a : 16 })))));
 });
 function ToolbarButton(props) {
     const { id, editor, focus, isActive, isEnable, exec, onClick } = props;
     const active = isActive(editor);
     const enabled = isEnable(editor);
-    return ((0, jsx_runtime_1.jsx)(exports.ToolbarButtonView, { ...props, active: active, enabled: enabled, onClick: () => {
+    return (react_1.default.createElement(exports.ToolbarButtonView, Object.assign({}, props, { active: active, enabled: enabled, onClick: () => {
             focus();
             exec(editor);
-            onClick?.(id);
-        } }));
+            onClick === null || onClick === void 0 ? void 0 : onClick(id);
+        } })));
 }
-//# sourceMappingURL=ToolbarButton.js.map
+exports.ToolbarButton = ToolbarButton;

package/build/cjs/toolbar/ToolbarButtonPopup.d.ts

@@ -1,3 +1,4 @@
-import { ToolbarBaseProps, ToolbarButtonPopupData } from "./types.js";
-export type ToolbarButtonPopupProps<E> = ToolbarBaseProps<E> & ToolbarButtonPopupData<E>;
+/// <reference types="react" />
+import { ToolbarBaseProps, ToolbarButtonPopupData } from './types';
+export declare type ToolbarButtonPopupProps<E> = ToolbarBaseProps<E> & ToolbarButtonPopupData<E>;
 export declare function ToolbarButtonPopup<E>(props: ToolbarButtonPopupProps<E>): JSX.Element;

package/build/cjs/toolbar/ToolbarButtonPopup.js

@@ -1,20 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarButtonPopup = ToolbarButtonPopup;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const hooks_1 = require("../react-utils/hooks.js");
-const ToolbarButton_1 = require("./ToolbarButton.js");
+exports.ToolbarButtonPopup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_use_1 = require("react-use");
+const ToolbarButton_1 = require("./ToolbarButton");
 function ToolbarButtonPopup(props) {
-    const { className, editor, isActive, isEnable, renderPopup, ...buttonProps } = props;
-    const [anchorElement, setAnchorElement] = (0, hooks_1.useElementState)();
-    const [isOpen, , close, toggle] = (0, hooks_1.useBooleanState)(false);
+    const { className, editor, isActive, isEnable, renderPopup } = props, buttonProps = tslib_1.__rest(props, ["className", "editor", "isActive", "isEnable", "renderPopup"]);
+    const buttonRef = (0, react_1.useRef)(null);
+    const [open, setOpen] = (0, react_use_1.useBoolean)(false);
     const active = isActive(editor);
     const enabled = isEnable(editor);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolbarButton_1.ToolbarButtonView, { ...buttonProps, ref: setAnchorElement, active: active, enabled: enabled, className: className, onClick: toggle }), isOpen &&
-                renderPopup({
-                    ...props,
-                    anchorElement,
-                    hide: close,
-                })] }));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ToolbarButton_1.ToolbarButtonView, Object.assign({}, buttonProps, { ref: buttonRef, active: active, enabled: enabled, className: className, onClick: () => setOpen() })),
+        open &&
+            renderPopup(Object.assign(Object.assign({}, props), { anchorRef: buttonRef, hide: () => setOpen(false) }))));
 }
-//# sourceMappingURL=ToolbarButtonPopup.js.map
+exports.ToolbarButtonPopup = ToolbarButtonPopup;

package/build/cjs/toolbar/ToolbarGroup.d.ts

@@ -1,7 +1,7 @@
-import { type ToolbarBaseProps, type ToolbarGroupData } from "./types.js";
-import "./ToolbarGroup.css";
+/// <reference types="react" />
+import { type ToolbarBaseProps, type ToolbarGroupData } from './types';
 export type { ToolbarGroupData };
-export type ToolbarGroupProps<E> = ToolbarBaseProps<E> & {
+export declare type ToolbarGroupProps<E> = ToolbarBaseProps<E> & {
     data: ToolbarGroupData<E>;
 };
 export declare function ToolbarButtonGroup<E>({ className, editor, data, focus, onClick, }: ToolbarGroupProps<E>): JSX.Element;

package/build/cjs/toolbar/ToolbarGroup.js

@@ -1,38 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarButtonGroup = ToolbarButtonGroup;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("react");
-const classname_1 = require("../classname.js");
-const ToolbarButton_1 = require("./ToolbarButton.js");
-const ToolbarButtonPopup_1 = require("./ToolbarButtonPopup.js");
-const ToolbarListButton_1 = require("./ToolbarListButton.js");
-const types_1 = require("./types.js");
-require("./ToolbarGroup.css");
+exports.ToolbarButtonGroup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classname_1 = require("../classname");
+const ToolbarButton_1 = require("./ToolbarButton");
+const ToolbarButtonPopup_1 = require("./ToolbarButtonPopup");
+const ToolbarListButton_1 = require("./ToolbarListButton");
+const types_1 = require("./types");
 const b = (0, classname_1.cn)('toolbar-group');
 function ToolbarButtonGroup({ className, editor, data, focus, onClick, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: b(null, [className]), children: data.map((item) => {
-            if (item.type === types_1.ToolbarDataType.SingleButton) {
-                return ((0, react_1.createElement)(ToolbarButton_1.ToolbarButton, { ...item, key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, [item.className]) }));
-            }
-            if (item.type === types_1.ToolbarDataType.ButtonPopup) {
-                return ((0, react_1.createElement)(ToolbarButtonPopup_1.ToolbarButtonPopup, { ...item, key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, item.className) }));
-            }
-            if (item.type === types_1.ToolbarDataType.ListButton) {
-                return ((0, react_1.createElement)(ToolbarListButton_1.ToolbarListButton, { ...item, key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, [item.className]) }));
-            }
-            if (item.type === types_1.ToolbarDataType.ReactComponent) {
-                const Component = item.component;
-                return ((0, react_1.createElement)(Component, { ...item.props, key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, [item.className]) }));
-            }
-            if (item.type === types_1.ToolbarDataType.ReactNode) {
-                return (0, jsx_runtime_1.jsx)(react_2.Fragment, { children: item.content }, item.id);
-            }
-            if (item.type === types_1.ToolbarDataType.ReactNodeFn) {
-                return (0, jsx_runtime_1.jsx)(react_2.Fragment, { children: item.content(editor) }, item.id);
-            }
-            return null;
-        }) }));
+    return (react_1.default.createElement("div", { className: b(null, [className]) }, data.map((item) => {
+        if (item.type === types_1.ToolbarDataType.SingleButton) {
+            return (react_1.default.createElement(ToolbarButton_1.ToolbarButton, Object.assign({}, item, { key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, [item.className]) })));
+        }
+        if (item.type === types_1.ToolbarDataType.ButtonPopup) {
+            return (react_1.default.createElement(ToolbarButtonPopup_1.ToolbarButtonPopup, Object.assign({}, item, { key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, item.className) })));
+        }
+        if (item.type === types_1.ToolbarDataType.ListButton) {
+            return (react_1.default.createElement(ToolbarListButton_1.ToolbarListButton, Object.assign({}, item, { key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, [item.className]) })));
+        }
+        if (item.type === types_1.ToolbarDataType.ReactComponent) {
+            const Component = item.component;
+            return (react_1.default.createElement(Component, { key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, [item.className]) }));
+        }
+        if (item.type === types_1.ToolbarDataType.ReactNode) {
+            return react_1.default.createElement(react_1.default.Fragment, { key: item.id }, item.content);
+        }
+        if (item.type === types_1.ToolbarDataType.ReactNodeFn) {
+            return react_1.default.createElement(react_1.default.Fragment, { key: item.id }, item.content(editor));
+        }
+        return null;
+    })));
 }
-//# sourceMappingURL=ToolbarGroup.js.map
+exports.ToolbarButtonGroup = ToolbarButtonGroup;

package/build/cjs/toolbar/ToolbarListButton.d.ts

@@ -1,5 +1,5 @@
-import type { ToolbarBaseProps, ToolbarListButtonData } from "./types.js";
-import "./ToolbarListButton.css";
+/// <reference types="react" />
+import type { ToolbarBaseProps, ToolbarListButtonData } from './types';
 export type { ToolbarListButtonData };
-export type ToolbarListButtonProps<E> = ToolbarBaseProps<E> & ToolbarListButtonData<E>;
+export declare type ToolbarListButtonProps<E> = ToolbarBaseProps<E> & ToolbarListButtonData<E>;
 export declare function ToolbarListButton<E>({ className, editor, focus, onClick, icon, title, withArrow, data, alwaysActive, }: ToolbarListButtonProps<E>): JSX.Element | null;