@gravity-ui/markdown-editor 14.12.0 → 14.12.1

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

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+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;
 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");
-const const_1 = require("./const");
+const selection_1 = require("../utils/selection.js");
+const const_1 = require("./const.js");
 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;
@@ -35,7 +36,7 @@ exports.findChildTableBody = findChildTableBody;
 const getTableDimensions = (node) => {
     let rows = 0, cols = 0;
     const tbody = node.firstChild;
-    tbody === null || tbody === void 0 ? void 0 : tbody.forEach((trow, _1, trowIndex) => {
+    tbody?.forEach((trow, _1, trowIndex) => {
         rows++;
         if (trowIndex === 0) {
             trow.forEach((tcell, _2) => {
@@ -68,4 +69,4 @@ function atEndOfCell(view, dir) {
     }
     return null;
 }
-exports.atEndOfCell = atEndOfCell;
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"../../../src","sources":["table-utils/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import isNumber from 'is-number';\nimport {Node as PmNode, ResolvedPos} from 'prosemirror-model';\nimport {\n    Predicate,\n    findChildren,\n    findParentNode,\n    findParentNodeClosestToPos,\n    // @ts-ignore // TODO: fix cjs build\n} from 'prosemirror-utils';\nimport type {EditorView} from 'prosemirror-view';\n\nimport {isTextSelection} from '../utils/selection';\n\nimport {TableRole} from './const';\n\nexport const isTableNode: Predicate = (node: PmNode) =>\n    node.type.spec.tableRole === TableRole.Table;\nexport const isTableBodyNode: Predicate = (node: PmNode) =>\n    node.type.spec.tableRole === TableRole.Body;\nexport const isTableRowNode: Predicate = (node: PmNode) =>\n    node.type.spec.tableRole === TableRole.Row;\nexport const isTableCellNode: Predicate = (node: PmNode) =>\n    node.type.spec.tableRole === TableRole.Cell;\n\nexport const findParentTable = findParentNode(isTableNode);\nexport const findParentTableBody = findParentNode(isTableBodyNode);\nexport const findParentTableRow = findParentNode(isTableRowNode);\nexport const findParentTableCell = findParentNode(isTableCellNode);\n\nexport const findParentTableFromPos = ($pos: ResolvedPos) =>\n    findParentNodeClosestToPos($pos, isTableNode);\nexport const findParentTableBodyFromPos = ($pos: ResolvedPos) =>\n    findParentNodeClosestToPos($pos, isTableBodyNode);\nexport const findParentTableRowFromPos = ($pos: ResolvedPos) =>\n    findParentNodeClosestToPos($pos, isTableRowNode);\nexport const findParentTableCellFromPos = ($pos: ResolvedPos) =>\n    findParentNodeClosestToPos($pos, isTableCellNode);\n\nexport const findChildTableRows = (node: PmNode) => findChildren(node, isTableRowNode);\nexport const findChildTableCells = (node: PmNode) => findChildren(node, isTableCellNode);\nexport const findChildTableBody = (node: PmNode) => findChildren(node, isTableBodyNode);\n\nexport const getTableDimensions = (node: PmNode) => {\n    let rows = 0,\n        cols = 0;\n\n    const tbody = node.firstChild;\n    tbody?.forEach((trow, _1, trowIndex) => {\n        rows++;\n\n        if (trowIndex === 0) {\n            trow.forEach((tcell, _2) => {\n                const cellAttrs = tcell.attrs;\n\n                if (isNumber(cellAttrs['colspan'])) {\n                    cols += parseInt(cellAttrs['colspan'], 10);\n                } else {\n                    cols++;\n                }\n            });\n        }\n    });\n\n    return {rows, cols};\n};\n\nexport function atEndOfCell(view: EditorView, dir: number) {\n    if (!isTextSelection(view.state.selection)) return null;\n    const {$head} = view.state.selection;\n    for (let d = $head.depth - 1; d >= 0; d--) {\n        const parent = $head.node(d),\n            index = dir < 0 ? $head.index(d) : $head.indexAfter(d);\n        if (index !== (dir < 0 ? 0 : parent.childCount)) return null;\n        if (parent.type.spec.tableRole === TableRole.Cell) {\n            const cellPos = $head.before(d);\n            const dirStr = dir > 0 ? 'down' : 'up';\n            return view.endOfTextblock(dirStr) ? cellPos : null;\n        }\n    }\n    return null;\n}\n"]}

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

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

package/build/cjs/toolbar/FlexToolbar.js

@@ -1,17 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlexToolbar = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+exports.FlexToolbar = FlexToolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const icons_1 = require("@gravity-ui/icons");
 const react_use_1 = require("react-use");
-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 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 b = (0, classname_1.cn)('flex-toolbar');
 function FlexToolbar(props) {
     (0, hooks_1.useRenderTime)((time) => {
@@ -23,7 +24,7 @@ function FlexToolbar(props) {
     });
     const { data, className, hiddenActions } = props;
     const [ref, { width }] = (0, react_use_1.useMeasure)();
-    const { data: items, dots } = react_1.default.useMemo(() => {
+    const { data: items, dots } = (0, react_1.useMemo)(() => {
         const toolbarButtonIds = data.reduce((a, toolbarGroup) => {
             return [
                 ...a,
@@ -38,16 +39,13 @@ function FlexToolbar(props) {
             ];
         }, []);
         // Finding only actions tha are not present in the main toolbar config
-        const filteredHiddenAction = hiddenActions === null || hiddenActions === void 0 ? void 0 : hiddenActions.filter((a) => !toolbarButtonIds.includes(a.id));
+        const filteredHiddenAction = hiddenActions?.filter((a) => !toolbarButtonIds.includes(a.id));
         return (0, flexible_1.shrinkToolbarData)({
             data,
             availableWidth: width,
             hiddenActions: filteredHiddenAction,
         });
     }, [data, width, hiddenActions]);
-    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 })))));
+    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 }))] }) }));
 }
-exports.FlexToolbar = FlexToolbar;
+//# sourceMappingURL=FlexToolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlexToolbar.js","sourceRoot":"../../../src","sources":["toolbar/FlexToolbar.tsx"],"names":[],"mappings":";;AAuBA,kCAuDC;;AA9ED,iCAA8B;AAE9B,6CAA2C;AAC3C,yCAAqC;AAErC,+CAAgC;AAChC,yCAAiC;AACjC,mDAAmD;AAEnD,0CAAqD;AACrD,8DAAsD;AACtD,4CAA6C;AAC7C,sCAA8D;AAE9D,6BAA4B;AAE5B,MAAM,CAAC,GAAG,IAAA,cAAE,EAAC,cAAc,CAAC,CAAC;AAO7B,SAAgB,WAAW,CAAI,KAA0B;IACrD,IAAA,qBAAa,EAAC,CAAC,IAAI,EAAE,EAAE;QACnB,eAAM,CAAC,OAAO,CAAC;YACX,SAAS,EAAE,SAAS;YACpB,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,MAAM,EAAC,IAAI,EAAE,SAAS,EAAE,aAAa,EAAC,GAAG,KAAK,CAAC;IAE/C,MAAM,CAAC,GAAG,EAAE,EAAC,KAAK,EAAC,CAAC,GAAG,IAAA,sBAAU,GAAkB,CAAC;IACpD,MAAM,EAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAC,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACrC,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAW,EAAE,YAAY,EAAE,EAAE;YAC/D,OAAO;gBACH,GAAG,CAAC;gBACJ,GAAG,YAAY;qBACV,GAAG,CAAC,CAAC,aAAa,EAAE,EAAE;oBACnB,IAAI,aAAa,CAAC,IAAI,KAAK,uBAAe,CAAC,UAAU,EAAE,CAAC;wBACpD,OAAO,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;oBAC/C,CAAC;oBACD,OAAO,aAAa,CAAC,EAAE,CAAC;gBAC5B,CAAC,CAAC;qBACD,IAAI,EAAE;aACd,CAAC;QACN,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,sEAAsE;QACtE,MAAM,oBAAoB,GAAG,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAC5F,OAAO,IAAA,4BAAiB,EAAC;YACrB,IAAI;YACJ,cAAc,EAAE,KAAK;YACrB,aAAa,EAAE,oBAAoB;SACtC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAEjC,OAAO,CACH,gCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,YAC1C,iCAAK,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,aAC1B,uBAAC,iBAAO,OAAK,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,GAAI,EACvD,IAAI,EAAE,MAAM,IAAI,CACb,uBAAC,qCAAiB,IACd,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,EAAC,IAAI,EAAE,gBAAQ,EAAC,EACtB,KAAK,EAAE,KAAK,CAAC,SAAS,EACtB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,YAAY,EAAE,IAAI,GACpB,CACL,IACC,GACJ,CACT,CAAC;AACN,CAAC","sourcesContent":["import {useMemo} from 'react';\n\nimport {Ellipsis} from '@gravity-ui/icons';\nimport {useMeasure} from 'react-use';\n\nimport {cn} from '../classname';\nimport {logger} from '../logger';\nimport {useRenderTime} from '../react-utils/hooks';\n\nimport {Toolbar, type ToolbarProps} from './Toolbar';\nimport {ToolbarListButton} from './ToolbarListButton';\nimport {shrinkToolbarData} from './flexible';\nimport {ToolbarDataType, type ToolbarItemData} from './types';\n\nimport './FlexToolbar.scss';\n\nconst b = cn('flex-toolbar');\n\nexport type FlexToolbarProps<E> = ToolbarProps<E> & {\n    dotsTitle: string | (() => string);\n    hiddenActions?: ToolbarItemData<E>[];\n};\n\nexport function FlexToolbar<E>(props: FlexToolbarProps<E>) {\n    useRenderTime((time) => {\n        logger.metrics({\n            component: 'toolbar',\n            event: 'render',\n            duration: time,\n        });\n    });\n\n    const {data, className, hiddenActions} = props;\n\n    const [ref, {width}] = useMeasure<HTMLDivElement>();\n    const {data: items, dots} = useMemo(() => {\n        const toolbarButtonIds = data.reduce((a: string[], toolbarGroup) => {\n            return [\n                ...a,\n                ...toolbarGroup\n                    .map((toolbarButton) => {\n                        if (toolbarButton.type === ToolbarDataType.ListButton) {\n                            return toolbarButton.data.map((v) => v.id);\n                        }\n                        return toolbarButton.id;\n                    })\n                    .flat(),\n            ];\n        }, []);\n\n        // Finding only actions tha are not present in the main toolbar config\n        const filteredHiddenAction = hiddenActions?.filter((a) => !toolbarButtonIds.includes(a.id));\n        return shrinkToolbarData({\n            data,\n            availableWidth: width,\n            hiddenActions: filteredHiddenAction,\n        });\n    }, [data, width, hiddenActions]);\n\n    return (\n        <div ref={ref} className={b(null, [className])}>\n            <div className={b('container')}>\n                <Toolbar {...props} data={items} className={b('bar')} />\n                {dots?.length && (\n                    <ToolbarListButton\n                        data={dots}\n                        icon={{data: Ellipsis}}\n                        title={props.dotsTitle}\n                        editor={props.editor}\n                        focus={props.focus}\n                        onClick={props.onClick}\n                        className={b('dots')}\n                        alwaysActive={true}\n                    />\n                )}\n            </div>\n        </div>\n    );\n}\n"]}

package/build/cjs/toolbar/PreviewTooltip.css

@@ -3,6 +3,7 @@
   border-radius: var(--g-border-radius-s);
   background-color: var(--g-color-base-float-heavy);
 }
-.g-md-preview-tooltip .g-popup__content:first-child {
+.g-md-preview-tooltip__content {
   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 React from 'react';
-declare type PreviewTooltipProps = {
+import "./PreviewTooltip.css";
+type PreviewTooltipProps = {
     preview?: React.ReactNode;
     children: React.ReactElement;
 };

package/build/cjs/toolbar/PreviewTooltip.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewTooltip.js","sourceRoot":"../../../src","sources":["toolbar/PreviewTooltip.tsx"],"names":[],"mappings":";;;;AAAA,6CAA0C;AAE1C,+CAAgC;AAEhC,sCAA4C;AAE5C,gCAA+B;AAE/B,MAAM,CAAC,GAAG,IAAA,cAAE,EAAC,iBAAiB,CAAC,CAAC;AAOzB,MAAM,cAAc,GAAkC,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAC,EAAE,EAAE;IACjF,OAAO,CACH,uBAAC,eAAO,IACJ,SAAS,EAAC,OAAO,EACjB,SAAS,EAAE,CAAC,EAAE,EACd,QAAQ,EAAE,CAAC,OAAO,EAClB,SAAS,EAAE,2BAAmB,CAAC,IAAI,EACnC,UAAU,EAAE,2BAAmB,CAAC,KAAK,EACrC,OAAO,EAAE,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YAAG,OAAO,GAAO,YAErD,QAAQ,GACH,CACb,CAAC;AACN,CAAC,CAAC;AAbW,QAAA,cAAc,kBAazB","sourcesContent":["import {Tooltip} from '@gravity-ui/uikit';\n\nimport {cn} from '../classname';\n\nimport {ToolbarTooltipDelay} from './const';\n\nimport './PreviewTooltip.scss';\n\nconst b = cn('preview-tooltip');\n\ntype PreviewTooltipProps = {\n    preview?: React.ReactNode;\n    children: React.ReactElement;\n};\n\nexport const PreviewTooltip: React.FC<PreviewTooltipProps> = ({preview, children}) => {\n    return (\n        <Tooltip\n            placement=\"right\"\n            className={b()}\n            disabled={!preview}\n            openDelay={ToolbarTooltipDelay.Open}\n            closeDelay={ToolbarTooltipDelay.Close}\n            content={<div className={b('content')}>{preview}</div>}\n        >\n            {children}\n        </Tooltip>\n    );\n};\n"]}

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import type { ToolbarBaseProps, ToolbarData } from './types';
+import type { ToolbarBaseProps, ToolbarData } from "./types.js";
+import "./Toolbar.css";
 export type { ToolbarData };
-export declare type ToolbarProps<E> = ToolbarBaseProps<E> & {
+export 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,17 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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");
+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");
 const b = (0, classname_1.cn)('toolbar');
 function Toolbar({ editor, data, className, focus, onClick }) {
-    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') })));
-    })));
+    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));
+        }) }));
 }
-exports.Toolbar = Toolbar;
+//# sourceMappingURL=Toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sourceRoot":"../../../src","sources":["toolbar/Toolbar.tsx"],"names":[],"mappings":";;AAiBA,0BAqBC;;AAtCD,iCAA+B;AAE/B,+CAAgC;AAEhC,oDAAkD;AAGlD,yBAAwB;AAExB,MAAM,CAAC,GAAG,IAAA,cAAE,EAAC,SAAS,CAAC,CAAC;AAQxB,SAAgB,OAAO,CAAI,EAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAkB;IACjF,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,YAC/B,IAAI,CAAC,GAAG,CAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACxC,MAAM,WAAW,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;YAE9C,OAAO,CACH,wBAAC,gBAAQ,eACL,uBAAC,iCAAkB,IACf,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,GACvB,EACD,WAAW,IAAI,gCAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,GAAI,KAR7C,KAAK,CAST,CACd,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC","sourcesContent":["import {Fragment} from 'react';\n\nimport {cn} from '../classname';\n\nimport {ToolbarButtonGroup} from './ToolbarGroup';\nimport type {ToolbarBaseProps, ToolbarData} from './types';\n\nimport './Toolbar.scss';\n\nconst b = cn('toolbar');\n\nexport type {ToolbarData};\n\nexport type ToolbarProps<E> = ToolbarBaseProps<E> & {\n    data: ToolbarData<E>;\n};\n\nexport function Toolbar<E>({editor, data, className, focus, onClick}: ToolbarProps<E>) {\n    return (\n        <div className={b(null, [className])}>\n            {data.map<React.ReactNode>((group, index) => {\n                const isLastGroup = index === data.length - 1;\n\n                return (\n                    <Fragment key={index}>\n                        <ToolbarButtonGroup\n                            data={group}\n                            editor={editor}\n                            focus={focus}\n                            onClick={onClick}\n                            className={b('group')}\n                        />\n                        {isLastGroup || <div className={b('group-separator')} />}\n                    </Fragment>\n                );\n            })}\n        </div>\n    );\n}\n"]}

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

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

package/build/cjs/toolbar/ToolbarButton.js

@@ -1,38 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarButton = exports.ToolbarButtonView = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+exports.ToolbarButtonView = void 0;
+exports.ToolbarButton = ToolbarButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const uikit_1 = require("@gravity-ui/uikit");
-const classname_1 = require("../classname");
-const common_1 = require("../i18n/common");
-const lodash_1 = require("../lodash");
-const const_1 = require("./const");
+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 b = (0, classname_1.cn)('toolbar-button');
-exports.ToolbarButtonView = react_1.default.forwardRef(function ToolbarButtonView({ icon, title, hint, hotkey, disabledPopoverVisible = true, hintWhenDisabled, active, enabled, onClick, className, }, ref) {
-    var _a;
+exports.ToolbarButtonView = (0, react_1.forwardRef)(function ToolbarButtonView({ icon, title, hint, hotkey, hintWhenDisabled, active, enabled, onClick, className }, ref) {
     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 || !disabledPopoverVisible || !disabled;
+    const hideHintWhenDisabled = hintWhenDisabled === false || !disabled;
     const hintWhenDisabledText = typeof hintWhenDisabled === 'string'
         ? hintWhenDisabled
         : typeof hintWhenDisabled === 'function'
             ? hintWhenDisabled()
             : (0, common_1.i18n)('toolbar_action_disabled');
-    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 })))));
+    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 }) })) })) }));
 });
 function ToolbarButton(props) {
     const { id, editor, focus, isActive, isEnable, exec, onClick } = props;
     const active = isActive(editor);
     const enabled = isEnable(editor);
-    return (react_1.default.createElement(exports.ToolbarButtonView, Object.assign({}, props, { active: active, enabled: enabled, onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(exports.ToolbarButtonView, { ...props, active: active, enabled: enabled, onClick: () => {
             focus();
             exec(editor);
-            onClick === null || onClick === void 0 ? void 0 : onClick(id);
-        } })));
+            onClick?.(id);
+        } }));
 }
-exports.ToolbarButton = ToolbarButton;
+//# sourceMappingURL=ToolbarButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButton.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {forwardRef} from 'react';\n\nimport {ActionTooltip, Button, Icon, Popover, setRef} from '@gravity-ui/uikit';\n\nimport {cn} from '../classname';\nimport {i18n} from '../i18n/common';\nimport {isFunction} from '../lodash';\n\nimport {ToolbarTooltipDelay} from './const';\nimport type {ToolbarBaseProps, ToolbarItemData} from './types';\n\nimport './ToolbarButton.scss';\n\nconst b = cn('toolbar-button');\n\nexport type ToolbarButtonProps<E> = ToolbarBaseProps<E> & ToolbarItemData<E>;\n\nexport type ToolbarButtonViewProps = Pick<\n    ToolbarItemData<unknown>,\n    'icon' | 'title' | 'hint' | 'hotkey' | 'hintWhenDisabled'\n> & {\n    active: boolean;\n    enabled: boolean;\n    onClick: () => void;\n    className?: string;\n};\n\nexport const ToolbarButtonView = forwardRef<HTMLButtonElement, ToolbarButtonViewProps>(\n    function ToolbarButtonView(\n        {icon, title, hint, hotkey, hintWhenDisabled, active, enabled, onClick, className},\n        ref,\n    ) {\n        const disabled = !active && !enabled;\n        const titleText: string = isFunction(title) ? title() : title;\n        const hintText: string | undefined = isFunction(hint) ? hint() : hint;\n        const hideHintWhenDisabled = hintWhenDisabled === false || !disabled;\n        const hintWhenDisabledText =\n            typeof hintWhenDisabled === 'string'\n                ? hintWhenDisabled\n                : typeof hintWhenDisabled === 'function'\n                  ? hintWhenDisabled()\n                  : i18n('toolbar_action_disabled');\n\n        return (\n            <Popover\n                content={<div className={b('action-disabled-tooltip')}>{hintWhenDisabledText}</div>}\n                disabled={hideHintWhenDisabled}\n                placement={['bottom']}\n            >\n                {(_, refForPopover) => (\n                    <ActionTooltip\n                        openDelay={ToolbarTooltipDelay.Open}\n                        closeDelay={ToolbarTooltipDelay.Close}\n                        description={hintText}\n                        title={titleText}\n                        hotkey={hotkey}\n                    >\n                        {(_, refForTooltip) => (\n                            <Button\n                                size=\"m\"\n                                ref={(elem: HTMLButtonElement) => {\n                                    setRef(ref, elem);\n                                    setRef(refForPopover, elem);\n                                    setRef(refForTooltip, elem);\n                                }}\n                                selected={active}\n                                disabled={disabled}\n                                view={active ? 'normal' : 'flat'}\n                                onClick={onClick}\n                                className={b(null, [className])}\n                                aria-label={titleText}\n                            >\n                                <Icon data={icon.data} size={icon.size ?? 16} />\n                            </Button>\n                        )}\n                    </ActionTooltip>\n                )}\n            </Popover>\n        );\n    },\n);\n\nexport function ToolbarButton<E>(props: ToolbarButtonProps<E>) {\n    const {id, editor, focus, isActive, isEnable, exec, onClick} = props;\n\n    const active = isActive(editor);\n    const enabled = isEnable(editor);\n\n    return (\n        <ToolbarButtonView\n            {...props}\n            active={active}\n            enabled={enabled}\n            onClick={() => {\n                focus();\n                exec(editor);\n                onClick?.(id);\n            }}\n        />\n    );\n}\n"]}

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

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

package/build/cjs/toolbar/ToolbarButtonPopup.js

@@ -1,19 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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");
+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");
 function ToolbarButtonPopup(props) {
-    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 { className, editor, isActive, isEnable, renderPopup, ...buttonProps } = props;
+    const [anchorElement, setAnchorElement] = (0, hooks_1.useElementState)();
+    const [isOpen, , close, toggle] = (0, hooks_1.useBooleanState)(false);
     const active = isActive(editor);
     const enabled = isEnable(editor);
-    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) }))));
+    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,
+                })] }));
 }
-exports.ToolbarButtonPopup = ToolbarButtonPopup;
+//# sourceMappingURL=ToolbarButtonPopup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButtonPopup.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarButtonPopup.tsx"],"names":[],"mappings":";;AAOA,gDA2BC;;AAlCD,mDAAsE;AAEtE,sDAAkD;AAKlD,SAAgB,kBAAkB,CAAI,KAAiC;IACnE,MAAM,EAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,WAAW,EAAC,GAAG,KAAK,CAAC;IAEnF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,uBAAe,GAAE,CAAC;IAC5D,MAAM,CAAC,MAAM,EAAE,AAAD,EAAG,KAAK,EAAE,MAAM,CAAC,GAAG,IAAA,uBAAe,EAAC,KAAK,CAAC,CAAC;IAEzD,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IAChC,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IAEjC,OAAO,CACH,6DACI,uBAAC,iCAAiB,OACV,WAAW,EACf,GAAG,EAAE,gBAAgB,EACrB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,GACjB,EACD,MAAM;gBACH,WAAW,CAAC;oBACR,GAAG,KAAK;oBACR,aAAa;oBACb,IAAI,EAAE,KAAK;iBACd,CAAC,IACP,CACN,CAAC;AACN,CAAC","sourcesContent":["import {useBooleanState, useElementState} from '../react-utils/hooks';\n\nimport {ToolbarButtonView} from './ToolbarButton';\nimport {ToolbarBaseProps, ToolbarButtonPopupData} from './types';\n\nexport type ToolbarButtonPopupProps<E> = ToolbarBaseProps<E> & ToolbarButtonPopupData<E>;\n\nexport function ToolbarButtonPopup<E>(props: ToolbarButtonPopupProps<E>) {\n    const {className, editor, isActive, isEnable, renderPopup, ...buttonProps} = props;\n\n    const [anchorElement, setAnchorElement] = useElementState();\n    const [isOpen, , close, toggle] = useBooleanState(false);\n\n    const active = isActive(editor);\n    const enabled = isEnable(editor);\n\n    return (\n        <>\n            <ToolbarButtonView\n                {...buttonProps}\n                ref={setAnchorElement}\n                active={active}\n                enabled={enabled}\n                className={className}\n                onClick={toggle}\n            />\n            {isOpen &&\n                renderPopup({\n                    ...props,\n                    anchorElement,\n                    hide: close,\n                })}\n        </>\n    );\n}\n"]}

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { type ToolbarBaseProps, type ToolbarGroupData } from './types';
+import { type ToolbarBaseProps, type ToolbarGroupData } from "./types.js";
+import "./ToolbarGroup.css";
 export type { ToolbarGroupData };
-export declare type ToolbarGroupProps<E> = ToolbarBaseProps<E> & {
+export 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,36 +1,38 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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");
+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");
 const b = (0, classname_1.cn)('toolbar-group');
 function ToolbarButtonGroup({ className, editor, data, focus, onClick, }) {
-    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;
-    })));
+    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;
+        }) }));
 }
-exports.ToolbarButtonGroup = ToolbarButtonGroup;
+//# sourceMappingURL=ToolbarGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarGroup.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarGroup.tsx"],"names":[],"mappings":";;AAmBA,gDA2EC;;;AA9FD,iCAA+B;AAE/B,+CAAgC;AAEhC,sDAA8C;AAC9C,gEAAwD;AACxD,8DAAsD;AACtD,sCAAsF;AAEtF,8BAA6B;AAE7B,MAAM,CAAC,GAAG,IAAA,cAAE,EAAC,eAAe,CAAC,CAAC;AAQ9B,SAAgB,kBAAkB,CAAI,EAClC,SAAS,EACT,MAAM,EACN,IAAI,EACJ,KAAK,EACL,OAAO,GACY;IACnB,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,YAC/B,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACf,IAAI,IAAI,CAAC,IAAI,KAAK,uBAAe,CAAC,YAAY,EAAE,CAAC;gBAC7C,OAAO,CACH,2BAAC,6BAAa,OACN,IAAI,EACR,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,EAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAC1D,CACL,CAAC;YACN,CAAC;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,uBAAe,CAAC,WAAW,EAAE,CAAC;gBAC5C,OAAO,CACH,2BAAC,uCAAkB,OACX,IAAI,EACR,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,EAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAC,EAAE,IAAI,CAAC,SAAS,CAAC,GACxD,CACL,CAAC;YACN,CAAC;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,uBAAe,CAAC,UAAU,EAAE,CAAC;gBAC3C,OAAO,CACH,2BAAC,qCAAiB,OACV,IAAI,EACR,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,EAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAC1D,CACL,CAAC;YACN,CAAC;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,uBAAe,CAAC,cAAc,EAAE,CAAC;gBAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;gBACjC,OAAO,CACH,2BAAC,SAAS,OACF,IAAI,CAAC,KAAK,EACd,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,EAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAC1D,CACL,CAAC;YACN,CAAC;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,uBAAe,CAAC,SAAS,EAAE,CAAC;gBAC1C,OAAO,uBAAC,gBAAQ,cAAgB,IAAI,CAAC,OAAO,IAAtB,IAAI,CAAC,EAAE,CAA2B,CAAC;YAC7D,CAAC;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,uBAAe,CAAC,WAAW,EAAE,CAAC;gBAC5C,OAAO,uBAAC,gBAAQ,cAAgB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAA9B,IAAI,CAAC,EAAE,CAAmC,CAAC;YACrE,CAAC;YAED,OAAO,IAAI,CAAC;QAChB,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC","sourcesContent":["import {Fragment} from 'react';\n\nimport {cn} from '../classname';\n\nimport {ToolbarButton} from './ToolbarButton';\nimport {ToolbarButtonPopup} from './ToolbarButtonPopup';\nimport {ToolbarListButton} from './ToolbarListButton';\nimport {type ToolbarBaseProps, ToolbarDataType, type ToolbarGroupData} from './types';\n\nimport './ToolbarGroup.scss';\n\nconst b = cn('toolbar-group');\n\nexport type {ToolbarGroupData};\n\nexport type ToolbarGroupProps<E> = ToolbarBaseProps<E> & {\n    data: ToolbarGroupData<E>;\n};\n\nexport function ToolbarButtonGroup<E>({\n    className,\n    editor,\n    data,\n    focus,\n    onClick,\n}: ToolbarGroupProps<E>) {\n    return (\n        <div className={b(null, [className])}>\n            {data.map((item) => {\n                if (item.type === ToolbarDataType.SingleButton) {\n                    return (\n                        <ToolbarButton\n                            {...item}\n                            key={item.id}\n                            editor={editor}\n                            focus={focus}\n                            onClick={onClick}\n                            className={b(item.type, {id: item.id}, [item.className])}\n                        />\n                    );\n                }\n\n                if (item.type === ToolbarDataType.ButtonPopup) {\n                    return (\n                        <ToolbarButtonPopup\n                            {...item}\n                            key={item.id}\n                            editor={editor}\n                            focus={focus}\n                            onClick={onClick}\n                            className={b(item.type, {id: item.id}, item.className)}\n                        />\n                    );\n                }\n\n                if (item.type === ToolbarDataType.ListButton) {\n                    return (\n                        <ToolbarListButton\n                            {...item}\n                            key={item.id}\n                            editor={editor}\n                            focus={focus}\n                            onClick={onClick}\n                            className={b(item.type, {id: item.id}, [item.className])}\n                        />\n                    );\n                }\n\n                if (item.type === ToolbarDataType.ReactComponent) {\n                    const Component = item.component;\n                    return (\n                        <Component\n                            {...item.props}\n                            key={item.id}\n                            editor={editor}\n                            focus={focus}\n                            onClick={onClick}\n                            className={b(item.type, {id: item.id}, [item.className])}\n                        />\n                    );\n                }\n\n                if (item.type === ToolbarDataType.ReactNode) {\n                    return <Fragment key={item.id}>{item.content}</Fragment>;\n                }\n\n                if (item.type === ToolbarDataType.ReactNodeFn) {\n                    return <Fragment key={item.id}>{item.content(editor)}</Fragment>;\n                }\n\n                return null;\n            })}\n        </div>\n    );\n}\n"]}

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import type { ToolbarBaseProps, ToolbarListButtonData } from './types';
+import type { ToolbarBaseProps, ToolbarListButtonData } from "./types.js";
+import "./ToolbarListButton.css";
 export type { ToolbarListButtonData };
-export declare type ToolbarListButtonProps<E> = ToolbarBaseProps<E> & ToolbarListButtonData<E>;
+export 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;