@gravity-ui/markdown-editor 15.17.0 → 15.19.0

package/build/cjs/extensions/markdown/CodeBlock/handle-paste.js

@@ -1,6 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handlePaste = void 0;
+const tslib_1 = require("tslib");
+const ts_dedent_1 = tslib_1.__importDefault(require("ts-dedent"));
+const _core_1 = require("../../../core/index.js");
+const model_1 = require("../../../pm/model.js");
 const clipboard_1 = require("../../../utils/clipboard.js");
 const CodeBlockSpecs_1 = require("./CodeBlockSpecs/index.js");
 const const_1 = require("./const.js");
@@ -10,10 +14,22 @@ const handlePaste = (view, e) => {
     const code = getCodeData(e.clipboardData);
     if (!code)
         return false;
-    let tr = view.state.tr;
-    const { schema } = tr.doc.type;
-    const codeBlockNode = (0, const_1.codeBlockType)(schema).create({ [CodeBlockSpecs_1.CodeBlockNodeAttr.Lang]: code.mode }, schema.text(code.value));
-    tr = tr.replaceSelectionWith(codeBlockNode);
+    (0, _core_1.getLoggerFromState)(view.state).event({
+        domEvent: 'paste',
+        event: 'paste-from-code-editor',
+        editor: code.editor,
+        editorMode: code.mode,
+        empty: !code.value,
+        dataTypes: e.clipboardData.types,
+    });
+    const { tr, schema } = view.state;
+    if (code.value) {
+        const codeBlockNode = (0, const_1.codeBlockType)(schema).create({ [CodeBlockSpecs_1.CodeBlockNodeAttr.Lang]: code.mode }, schema.text(code.value));
+        tr.replaceSelectionWith(codeBlockNode);
+    }
+    else {
+        tr.replaceWith(tr.selection.from, tr.selection.to, model_1.Fragment.empty);
+    }
     view.dispatch(tr.scrollIntoView());
     return true;
 };
@@ -28,7 +44,7 @@ function getCodeData(data) {
         }
         else
             return null;
-        return { editor, mode, value: data.getData(clipboard_1.DataTransferType.Text) };
+        return { editor, mode, value: (0, ts_dedent_1.default)(data.getData(clipboard_1.DataTransferType.Text)) };
     }
     return null;
 }

package/build/cjs/extensions/markdown/CodeBlock/handle-paste.js.map

@@ -1 +1 @@
-{"version":3,"file":"handle-paste.js","sourceRoot":"../../../../../src","sources":["extensions/markdown/CodeBlock/handle-paste.ts"],"names":[],"mappings":";;;AAEA,2DAAwF;AAExF,8DAAmD;AACnD,sCAAsC;AAE/B,MAAM,WAAW,GAA4C,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;IAC5E,IAAI,CAAC,CAAC,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI;QAAE,OAAO,KAAK,CAAC;IACvF,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;IAC1C,IAAI,CAAC,IAAI;QAAE,OAAO,KAAK,CAAC;IACxB,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;IACvB,MAAM,EAAC,MAAM,EAAC,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC;IAC7B,MAAM,aAAa,GAAG,IAAA,qBAAa,EAAC,MAAM,CAAC,CAAC,MAAM,CAC9C,EAAC,CAAC,kCAAiB,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,EAAC,EACrC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAC1B,CAAC;IACF,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,aAAa,CAAC,CAAC;IAC5C,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC,CAAC;IACnC,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAbW,QAAA,WAAW,eAatB;AAEF,SAAS,WAAW,CAAC,IAAkB;IACnC,IAAI,IAAI,CAAC,OAAO,CAAC,4BAAgB,CAAC,IAAI,CAAC,EAAE,CAAC;QACtC,IAAI,MAAM,GAAG,SAAS,CAAC;QACvB,IAAI,IAAwB,CAAC;QAE7B,IAAI,IAAA,oBAAQ,EAAC,IAAI,CAAC,EAAE,CAAC;YACjB,MAAM,GAAG,QAAQ,CAAC;YAClB,IAAI,GAAG,IAAA,8BAAkB,EAAC,IAAI,CAAC,EAAE,IAAI,CAAC;QAC1C,CAAC;;YAAM,OAAO,IAAI,CAAC;QAEnB,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,4BAAgB,CAAC,IAAI,CAAC,EAAC,CAAC;IACtE,CAAC;IACD,OAAO,IAAI,CAAC;AAChB,CAAC","sourcesContent":["import type {EditorProps} from 'prosemirror-view';\n\nimport {DataTransferType, isVSCode, tryParseVSCodeData} from '../../../utils/clipboard';\n\nimport {CodeBlockNodeAttr} from './CodeBlockSpecs';\nimport {codeBlockType} from './const';\n\nexport const handlePaste: NonNullable<EditorProps['handlePaste']> = (view, e) => {\n    if (!e.clipboardData || view.state.selection.$from.parent.type.spec.code) return false;\n    const code = getCodeData(e.clipboardData);\n    if (!code) return false;\n    let tr = view.state.tr;\n    const {schema} = tr.doc.type;\n    const codeBlockNode = codeBlockType(schema).create(\n        {[CodeBlockNodeAttr.Lang]: code.mode},\n        schema.text(code.value),\n    );\n    tr = tr.replaceSelectionWith(codeBlockNode);\n    view.dispatch(tr.scrollIntoView());\n    return true;\n};\n\nfunction getCodeData(data: DataTransfer): null | {editor: string; mode?: string; value: string} {\n    if (data.getData(DataTransferType.Text)) {\n        let editor = 'unknown';\n        let mode: string | undefined;\n\n        if (isVSCode(data)) {\n            editor = 'vscode';\n            mode = tryParseVSCodeData(data)?.mode;\n        } else return null;\n\n        return {editor, mode, value: data.getData(DataTransferType.Text)};\n    }\n    return null;\n}\n"]}
+{"version":3,"file":"handle-paste.js","sourceRoot":"../../../../../src","sources":["extensions/markdown/CodeBlock/handle-paste.ts"],"names":[],"mappings":";;;;AAAA,kEAA2B;AAE3B,kDAAyC;AACzC,gDAAmC;AAEnC,2DAAmF;AAEnF,8DAAmD;AACnD,sCAAsC;AAE/B,MAAM,WAAW,GAA4C,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;IAC5E,IAAI,CAAC,CAAC,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI;QAAE,OAAO,KAAK,CAAC;IACvF,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;IAC1C,IAAI,CAAC,IAAI;QAAE,OAAO,KAAK,CAAC;IAExB,IAAA,0BAAkB,EAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACjC,QAAQ,EAAE,OAAO;QACjB,KAAK,EAAE,wBAAwB;QAC/B,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,UAAU,EAAE,IAAI,CAAC,IAAI;QACrB,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK;QAClB,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,KAAK;KACnC,CAAC,CAAC;IAEH,MAAM,EAAC,EAAE,EAAE,MAAM,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;IAChC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,MAAM,aAAa,GAAG,IAAA,qBAAa,EAAC,MAAM,CAAC,CAAC,MAAM,CAC9C,EAAC,CAAC,kCAAiB,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,EAAC,EACrC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAC1B,CAAC;QACF,EAAE,CAAC,oBAAoB,CAAC,aAAa,CAAC,CAAC;IAC3C,CAAC;SAAM,CAAC;QACJ,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,gBAAQ,CAAC,KAAK,CAAC,CAAC;IACvE,CAAC;IACD,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC,CAAC;IACnC,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AA1BW,QAAA,WAAW,eA0BtB;AAEF,SAAS,WAAW,CAAC,IAAkB;IACnC,IAAI,IAAI,CAAC,OAAO,CAAC,4BAAgB,CAAC,IAAI,CAAC,EAAE,CAAC;QACtC,IAAI,MAAM,GAAG,SAAS,CAAC;QACvB,IAAI,IAAwB,CAAC;QAE7B,IAAI,IAAA,oBAAQ,EAAC,IAAI,CAAC,EAAE,CAAC;YACjB,MAAM,GAAG,QAAQ,CAAC;YAClB,IAAI,GAAG,IAAA,8BAAkB,EAAC,IAAI,CAAC,EAAE,IAAI,CAAC;QAC1C,CAAC;;YAAM,OAAO,IAAI,CAAC;QAEnB,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAA,mBAAE,EAAC,IAAI,CAAC,OAAO,CAAC,4BAAgB,CAAC,IAAI,CAAC,CAAC,EAAC,CAAC;IAC1E,CAAC;IACD,OAAO,IAAI,CAAC;AAChB,CAAC","sourcesContent":["import dd from 'ts-dedent';\n\nimport {getLoggerFromState} from '#core';\nimport {Fragment} from '#pm/model';\nimport type {EditorProps} from '#pm/view';\nimport {DataTransferType, isVSCode, tryParseVSCodeData} from 'src/utils/clipboard';\n\nimport {CodeBlockNodeAttr} from './CodeBlockSpecs';\nimport {codeBlockType} from './const';\n\nexport const handlePaste: NonNullable<EditorProps['handlePaste']> = (view, e) => {\n    if (!e.clipboardData || view.state.selection.$from.parent.type.spec.code) return false;\n    const code = getCodeData(e.clipboardData);\n    if (!code) return false;\n\n    getLoggerFromState(view.state).event({\n        domEvent: 'paste',\n        event: 'paste-from-code-editor',\n        editor: code.editor,\n        editorMode: code.mode,\n        empty: !code.value,\n        dataTypes: e.clipboardData.types,\n    });\n\n    const {tr, schema} = view.state;\n    if (code.value) {\n        const codeBlockNode = codeBlockType(schema).create(\n            {[CodeBlockNodeAttr.Lang]: code.mode},\n            schema.text(code.value),\n        );\n        tr.replaceSelectionWith(codeBlockNode);\n    } else {\n        tr.replaceWith(tr.selection.from, tr.selection.to, Fragment.empty);\n    }\n    view.dispatch(tr.scrollIntoView());\n    return true;\n};\n\nfunction getCodeData(data: DataTransfer): null | {editor: string; mode?: string; value: string} {\n    if (data.getData(DataTransferType.Text)) {\n        let editor = 'unknown';\n        let mode: string | undefined;\n\n        if (isVSCode(data)) {\n            editor = 'vscode';\n            mode = tryParseVSCodeData(data)?.mode;\n        } else return null;\n\n        return {editor, mode, value: dd(data.getData(DataTransferType.Text))};\n    }\n    return null;\n}\n"]}

package/build/cjs/i18n/gallery/en.json

@@ -0,0 +1,5 @@
+{
+  "link_copied": "The link copied",
+  "link_copy": "Copy link",
+  "file_download": "Download"
+}

package/build/cjs/i18n/gallery/index.d.ts

@@ -0,0 +1,7 @@
+export declare const i18n: <G extends "link_copied" | "link_copy" | "file_download", S extends string>(key: G | (string extends S ? S : never), params?: {
+    [key: string]: any;
+}) => S extends G ? {
+    link_copied: string;
+    link_copy: string;
+    file_download: string;
+}[G] : string;

package/build/cjs/i18n/gallery/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+const tslib_1 = require("tslib");
+const i18n_1 = require("../i18n.js");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const KEYSET = 'gallery';
+exports.i18n = (0, i18n_1.registerKeyset)(KEYSET, { en: en_json_1.default, ru: ru_json_1.default });
+//# sourceMappingURL=index.js.map

package/build/cjs/i18n/gallery/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["i18n/gallery/index.ts"],"names":[],"mappings":";;;;AAAA,qCAAuC;AAEvC,gEAA2B;AAC3B,gEAA2B;AAE3B,MAAM,MAAM,GAAG,SAAS,CAAC;AAEZ,QAAA,IAAI,GAAG,IAAA,qBAAc,EAAC,MAAM,EAAE,EAAC,EAAE,EAAF,iBAAE,EAAE,EAAE,EAAF,iBAAE,EAAC,CAAC,CAAC","sourcesContent":["import {registerKeyset} from '../i18n';\n\nimport en from './en.json';\nimport ru from './ru.json';\n\nconst KEYSET = 'gallery';\n\nexport const i18n = registerKeyset(KEYSET, {en, ru});\n"]}

package/build/cjs/i18n/gallery/ru.json

@@ -0,0 +1,5 @@
+{
+  "link_copied": "Ссылка скопирована",
+  "link_copy": "Скопировать ссылку",
+  "file_download": "Скачать"
+}

package/build/cjs/i18n/placeholder/en.json

@@ -1,5 +1,6 @@
 {
   "doc_empty": "Enter your text or type '/' to open the list of commands",
+  "doc_empty_mobile": "Enter your text",
   "checkbox": "Add a description of the task or check point",
   "codeblock": "Add code or text to the block",
   "deflist_term": "Definition term",

package/build/cjs/i18n/placeholder/index.d.ts

@@ -1,7 +1,8 @@
-export declare const i18n: <G extends "block" | "checkbox" | "heading" | "codeblock" | "doc_empty" | "deflist_term" | "deflist_desc" | "cut_title" | "cut_content" | "note_title" | "note_content" | "layout_cell" | "table_cell" | "select_filter", S extends string>(key: G | (string extends S ? S : never), params?: {
+export declare const i18n: <G extends "block" | "checkbox" | "heading" | "codeblock" | "doc_empty" | "doc_empty_mobile" | "deflist_term" | "deflist_desc" | "cut_title" | "cut_content" | "note_title" | "note_content" | "layout_cell" | "table_cell" | "select_filter", S extends string>(key: G | (string extends S ? S : never), params?: {
     [key: string]: any;
 }) => S extends G ? {
     doc_empty: string;
+    doc_empty_mobile: string;
     checkbox: string;
     codeblock: string;
     deflist_term: string;

package/build/cjs/i18n/placeholder/ru.json

@@ -1,5 +1,6 @@
 {
   "doc_empty": "Начните писать текст или введите \"/\", чтобы открыть список команд",
+  "doc_empty_mobile": "Начните писать текст",
   "checkbox": "Добавьте описание задачи или пункт проверки",
   "codeblock": "Добавьте в блок код или текст",
   "deflist_term": "Термин",

package/build/cjs/toolbar/FlexToolbar.js

@@ -22,7 +22,7 @@ function FlexToolbar(props) {
             duration: time,
         });
     });
-    const { data, className, hiddenActions } = props;
+    const { data, className, hiddenActions, disableTooltip, disablePreview, disableHotkey, display = 'shrink', } = props;
     const [ref, { width }] = (0, react_use_1.useMeasure)();
     const { data: items, dots } = (0, react_1.useMemo)(() => {
         const toolbarButtonIds = data.reduce((a, toolbarGroup) => {
@@ -40,12 +40,18 @@ function FlexToolbar(props) {
         }, []);
         // Finding only actions tha are not present in the main toolbar config
         const filteredHiddenAction = hiddenActions?.filter((a) => !toolbarButtonIds.includes(a.id));
+        if (display === 'scroll') {
+            return {
+                data,
+                dots: filteredHiddenAction?.length ? filteredHiddenAction : undefined,
+            };
+        }
         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, { qa: "g-md-toolbar-more-action", qaMenu: "g-md-toolbar-additional", data: dots, icon: { data: icons_1.Ellipsis }, title: props.dotsTitle, editor: props.editor, focus: props.focus, onClick: props.onClick, className: b('dots'), alwaysActive: true }))] }) }));
+    }, [data, display, hiddenActions, width]);
+    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, { qa: "g-md-toolbar-more-action", qaMenu: "g-md-toolbar-additional", data: dots, icon: { data: icons_1.Ellipsis }, title: props.dotsTitle, editor: props.editor, focus: props.focus, onClick: props.onClick, className: b('dots'), alwaysActive: true, disableTooltip: disableTooltip, disableHotkey: disablePreview, disablePreview: disableHotkey }))] }) }));
 }
 //# sourceMappingURL=FlexToolbar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FlexToolbar.js","sourceRoot":"../../../src","sources":["toolbar/FlexToolbar.tsx"],"names":[],"mappings":";;AAuBA,kCAyDC;;AAhFD,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,EAAE,EAAC,0BAA0B,EAC7B,MAAM,EAAC,yBAAyB,EAChC,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                        qa=\"g-md-toolbar-more-action\"\n                        qaMenu=\"g-md-toolbar-additional\"\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"]}
+{"version":3,"file":"FlexToolbar.js","sourceRoot":"../../../src","sources":["toolbar/FlexToolbar.tsx"],"names":[],"mappings":"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","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 {\n        data,\n        className,\n        hiddenActions,\n        disableTooltip,\n        disablePreview,\n        disableHotkey,\n        display = 'shrink',\n    } = 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\n        if (display === 'scroll') {\n            return {\n                data,\n                dots: filteredHiddenAction?.length ? filteredHiddenAction : undefined,\n            };\n        }\n\n        return shrinkToolbarData({\n            data,\n            availableWidth: width,\n            hiddenActions: filteredHiddenAction,\n        });\n    }, [data, display, hiddenActions, width]);\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                        qa=\"g-md-toolbar-more-action\"\n                        qaMenu=\"g-md-toolbar-additional\"\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                        disableTooltip={disableTooltip}\n                        disableHotkey={disablePreview}\n                        disablePreview={disableHotkey}\n                    />\n                )}\n            </div>\n        </div>\n    );\n}\n"]}

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

@@ -2,6 +2,7 @@ import "./PreviewTooltip.css";
 type PreviewTooltipProps = {
     preview?: React.ReactNode;
     children: React.ReactElement;
+    disabled?: boolean;
 };
 export declare const PreviewTooltip: React.FC<PreviewTooltipProps>;
 export {};

package/build/cjs/toolbar/PreviewTooltip.js

@@ -7,10 +7,10 @@ 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 }) => {
-    if (!preview)
+const PreviewTooltip = ({ preview, children, disabled }) => {
+    if (!preview || disabled)
         return children;
-    return ((0, jsx_runtime_1.jsx)(uikit_1.Tooltip, { placement: ['right', 'left'], 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 }));
+    return ((0, jsx_runtime_1.jsx)(uikit_1.Tooltip, { placement: ['right', 'left'], className: b(), 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

@@ -1 +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,IAAI,CAAC,OAAO;QAAE,OAAO,QAAQ,CAAC;IAE9B,OAAO,CACH,uBAAC,eAAO,IACJ,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAC5B,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;AAfW,QAAA,cAAc,kBAezB","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    if (!preview) return children;\n\n    return (\n        <Tooltip\n            placement={['right', 'left']}\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"]}
+{"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;AAQzB,MAAM,cAAc,GAAkC,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAC,EAAE,EAAE;IAC3F,IAAI,CAAC,OAAO,IAAI,QAAQ;QAAE,OAAO,QAAQ,CAAC;IAE1C,OAAO,CACH,uBAAC,eAAO,IACJ,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAC5B,SAAS,EAAE,CAAC,EAAE,EACd,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;AAdW,QAAA,cAAc,kBAczB","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    disabled?: boolean;\n};\n\nexport const PreviewTooltip: React.FC<PreviewTooltipProps> = ({preview, children, disabled}) => {\n    if (!preview || disabled) return children;\n\n    return (\n        <Tooltip\n            placement={['right', 'left']}\n            className={b()}\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.css

@@ -4,4 +4,7 @@
 .g-md-toolbar__group-separator {
   margin: 6px 8px;
   border-left: 1px solid var(--g-color-line-generic);
+}
+.g-md-toolbar_display_scroll {
+  overflow: auto;
 }

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

@@ -4,4 +4,4 @@ export type { ToolbarData };
 export type ToolbarProps<E> = ToolbarBaseProps<E> & {
     data: ToolbarData<E>;
 };
-export declare function Toolbar<E>({ editor, data, className, focus, onClick, qa }: ToolbarProps<E>): JSX.Element;
+export declare function Toolbar<E>({ editor, data, className, focus, onClick, display, qa, disableHotkey, disablePreview, disableTooltip, }: ToolbarProps<E>): JSX.Element;

package/build/cjs/toolbar/Toolbar.js

@@ -7,10 +7,10 @@ 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, qa }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: b(null, [className]), "data-qa": qa, children: data.map((group, index) => {
+function Toolbar({ editor, data, className, focus, onClick, display, qa, disableHotkey, disablePreview, disableTooltip, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: b({ display }, [className]), "data-qa": qa, 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 ((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'), disableHotkey: disableHotkey, disablePreview: disablePreview, disableTooltip: disableTooltip }), isLastGroup || (0, jsx_runtime_1.jsx)("div", { className: b('group-separator') })] }, index));
         }) }));
 }
 //# sourceMappingURL=Toolbar.js.map

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

@@ -1 +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,EAAE,EAAE,EAAkB;IACrF,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,aAAW,EAAE,YAC5C,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, qa}: ToolbarProps<E>) {\n    return (\n        <div className={b(null, [className])} data-qa={qa}>\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"]}
+{"version":3,"file":"Toolbar.js","sourceRoot":"../../../src","sources":["toolbar/Toolbar.tsx"],"names":[],"mappings":";;AAiBA,0BAmCC;;AApDD,iCAA+B;AAE/B,+CAAgC;AAEhC,oDAAkD;AAGlD,yBAAwB;AAExB,MAAM,CAAC,GAAG,IAAA,cAAE,EAAC,SAAS,CAAC,CAAC;AAQxB,SAAgB,OAAO,CAAI,EACvB,MAAM,EACN,IAAI,EACJ,SAAS,EACT,KAAK,EACL,OAAO,EACP,OAAO,EACP,EAAE,EACF,aAAa,EACb,cAAc,EACd,cAAc,GACA;IACd,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAC,EAAE,CAAC,SAAS,CAAC,CAAC,aAAW,EAAE,YACjD,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,EACrB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,GAChC,EACD,WAAW,IAAI,gCAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,GAAI,KAX7C,KAAK,CAYT,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>({\n    editor,\n    data,\n    className,\n    focus,\n    onClick,\n    display,\n    qa,\n    disableHotkey,\n    disablePreview,\n    disableTooltip,\n}: ToolbarProps<E>) {\n    return (\n        <div className={b({display}, [className])} data-qa={qa}>\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                            disableHotkey={disableHotkey}\n                            disablePreview={disablePreview}\n                            disableTooltip={disableTooltip}\n                        />\n                        {isLastGroup || <div className={b('group-separator')} />}\n                    </Fragment>\n                );\n            })}\n        </div>\n    );\n}\n"]}

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

@@ -10,6 +10,6 @@ export type ToolbarButtonViewProps = Pick<ToolbarItemData<unknown>, 'title' | 'h
     className?: string;
 } & (Pick<ToolbarItemData<unknown>, 'icon'> | {
     children: ReactNode;
-});
+}) & Pick<ToolbarBaseProps<unknown>, 'disableTooltip'>;
 export declare const ToolbarButtonView: import("react").ForwardRefExoticComponent<ToolbarButtonViewProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare function ToolbarButton<E>(props: ToolbarButtonProps<E>): JSX.Element;

package/build/cjs/toolbar/ToolbarButton.js

@@ -12,7 +12,7 @@ const const_1 = require("./const.js");
 require("./ToolbarButton.css");
 const b = (0, classname_1.cn)('toolbar-button');
 const DEFAULT_ICON_SIZE = 16;
-exports.ToolbarButtonView = (0, react_1.forwardRef)(function ToolbarButtonView({ title, hint, hotkey, hintWhenDisabled, active, enabled, onClick, className, qa, id, ...props }, ref) {
+exports.ToolbarButtonView = (0, react_1.forwardRef)(function ToolbarButtonView({ title, hint, hotkey, hintWhenDisabled, active, enabled, onClick, className, qa, id, disableTooltip, ...props }, ref) {
     const disabled = !active && !enabled;
     const titleText = (0, lodash_1.isFunction)(title) ? title() : title;
     const hintText = (0, lodash_1.isFunction)(hint) ? hint() : hint;
@@ -22,7 +22,7 @@ exports.ToolbarButtonView = (0, react_1.forwardRef)(function ToolbarButtonView({
         : 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, { qa: qa, size: "m", ref: (elem) => {
+    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, disabled: disableTooltip, children: (__, refForTooltip) => ((0, jsx_runtime_1.jsx)(uikit_1.Button, { qa: qa, size: "m", ref: (elem) => {
                     (0, uikit_1.setRef)(ref, elem);
                     (0, uikit_1.setRef)(refForPopover, elem);
                     (0, uikit_1.setRef)(refForTooltip, elem);

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButton.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {type ReactNode, 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    'title' | 'hint' | 'hotkey' | 'hintWhenDisabled' | 'qa'\n> & {\n    active: boolean;\n    enabled: boolean;\n    onClick: () => void;\n    id?: string;\n    className?: string;\n} & (Pick<ToolbarItemData<unknown>, 'icon'> | {children: ReactNode});\n\nconst DEFAULT_ICON_SIZE = 16;\n\nexport const ToolbarButtonView = forwardRef<HTMLButtonElement, ToolbarButtonViewProps>(\n    function ToolbarButtonView(\n        {\n            title,\n            hint,\n            hotkey,\n            hintWhenDisabled,\n            active,\n            enabled,\n            onClick,\n            className,\n            qa,\n            id,\n            ...props\n        },\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                                qa={qa}\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                                data-toolbar-item={id}\n                            >\n                                {'icon' in props ? (\n                                    <Icon\n                                        data={props.icon.data}\n                                        size={props.icon.size ?? DEFAULT_ICON_SIZE}\n                                    />\n                                ) : (\n                                    props.children\n                                )}\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    const handleClick = () => {\n        focus();\n        exec(editor);\n        onClick?.(id);\n    };\n\n    return <ToolbarButtonView {...props} active={active} enabled={enabled} onClick={handleClick} />;\n}\n"]}
+{"version":3,"file":"ToolbarButton.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {type ReactNode, 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    'title' | 'hint' | 'hotkey' | 'hintWhenDisabled' | 'qa'\n> & {\n    active: boolean;\n    enabled: boolean;\n    onClick: () => void;\n    id?: string;\n    className?: string;\n} & (Pick<ToolbarItemData<unknown>, 'icon'> | {children: ReactNode}) &\n    Pick<ToolbarBaseProps<unknown>, 'disableTooltip'>;\n\nconst DEFAULT_ICON_SIZE = 16;\n\nexport const ToolbarButtonView = forwardRef<HTMLButtonElement, ToolbarButtonViewProps>(\n    function ToolbarButtonView(\n        {\n            title,\n            hint,\n            hotkey,\n            hintWhenDisabled,\n            active,\n            enabled,\n            onClick,\n            className,\n            qa,\n            id,\n            disableTooltip,\n            ...props\n        },\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                        disabled={disableTooltip}\n                    >\n                        {(__, refForTooltip) => (\n                            <Button\n                                qa={qa}\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                                data-toolbar-item={id}\n                            >\n                                {'icon' in props ? (\n                                    <Icon\n                                        data={props.icon.data}\n                                        size={props.icon.size ?? DEFAULT_ICON_SIZE}\n                                    />\n                                ) : (\n                                    props.children\n                                )}\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    const handleClick = () => {\n        focus();\n        exec(editor);\n        onClick?.(id);\n    };\n\n    return <ToolbarButtonView {...props} active={active} enabled={enabled} onClick={handleClick} />;\n}\n"]}

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

@@ -4,4 +4,4 @@ export type { ToolbarGroupData };
 export type ToolbarGroupProps<E> = ToolbarBaseProps<E> & {
     data: ToolbarGroupData<E>;
 };
-export declare function ToolbarButtonGroup<E>({ className, editor, data, focus, onClick, }: ToolbarGroupProps<E>): JSX.Element;
+export declare function ToolbarButtonGroup<E>({ className, editor, data, focus, onClick, disableTooltip, disablePreview, disableHotkey, }: ToolbarGroupProps<E>): JSX.Element;

package/build/cjs/toolbar/ToolbarGroup.js

@@ -11,16 +11,16 @@ 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, }) {
+function ToolbarButtonGroup({ className, editor, data, focus, onClick, disableTooltip, disablePreview, disableHotkey, }) {
     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]) }));
+                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]), disableTooltip: disableTooltip }));
             }
             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) }));
+                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), disableTooltip: disableTooltip }));
             }
             if (item.type === types_1.ToolbarDataType.ListButton) {
-                return ((0, react_1.createElement)(ToolbarListButton_1.ToolbarListButton, { ...item, qaMenu: "g-md-toolbar-menu", key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, [item.className]) }));
+                return ((0, react_1.createElement)(ToolbarListButton_1.ToolbarListButton, { ...item, qaMenu: "g-md-toolbar-menu", key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, [item.className]), disablePreview: disablePreview, disableHotkey: disableHotkey, disableTooltip: disableTooltip }));
             }
             if (item.type === types_1.ToolbarDataType.ReactComponent) {
                 const Component = item.component;

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarGroup.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarGroup.tsx"],"names":[],"mappings":"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","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                            qaMenu=\"g-md-toolbar-menu\"\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"]}
+{"version":3,"file":"ToolbarGroup.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarGroup.tsx"],"names":[],"mappings":"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","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    disableTooltip,\n    disablePreview,\n    disableHotkey,\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                            disableTooltip={disableTooltip}\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                            disableTooltip={disableTooltip}\n                        />\n                    );\n                }\n\n                if (item.type === ToolbarDataType.ListButton) {\n                    return (\n                        <ToolbarListButton\n                            {...item}\n                            qaMenu=\"g-md-toolbar-menu\"\n                            key={item.id}\n                            editor={editor}\n                            focus={focus}\n                            onClick={onClick}\n                            className={b(item.type, {id: item.id}, [item.className])}\n                            disablePreview={disablePreview}\n                            disableHotkey={disableHotkey}\n                            disableTooltip={disableTooltip}\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

@@ -5,4 +5,4 @@ export type ToolbarListButtonProps<E> = ToolbarBaseProps<E> & ToolbarListButtonD
     qaMenu?: string;
     qaActionDisabledPopover?: string;
 };
-export declare function ToolbarListButton<E>({ className, editor, focus, onClick, icon, title, withArrow, data, alwaysActive, replaceActiveIcon, qa, qaMenu, qaActionDisabledPopover, }: ToolbarListButtonProps<E>): JSX.Element | null;
+export declare function ToolbarListButton<E>({ className, editor, focus, onClick, icon, title, withArrow, data, alwaysActive, replaceActiveIcon, qa, qaMenu, qaActionDisabledPopover, disableHotkey, disablePreview, disableTooltip, }: ToolbarListButtonProps<E>): JSX.Element | null;

package/build/cjs/toolbar/ToolbarListButton.js

@@ -13,7 +13,7 @@ const PreviewTooltip_1 = require("./PreviewTooltip.js");
 const ToolbarButton_1 = require("./ToolbarButton.js");
 require("./ToolbarListButton.css");
 const b = (0, classname_1.cn)('toolbar-list-button');
-function ToolbarListButton({ className, editor, focus, onClick, icon, title, withArrow, data, alwaysActive, replaceActiveIcon, qa, qaMenu, qaActionDisabledPopover = 'g-md-toolbar-action-disabled-hint', }) {
+function ToolbarListButton({ className, editor, focus, onClick, icon, title, withArrow, data, alwaysActive, replaceActiveIcon, qa, qaMenu, qaActionDisabledPopover = 'g-md-toolbar-action-disabled-hint', disableHotkey, disablePreview, disableTooltip, }) {
     const [anchorElement, setAnchorElement] = (0, hooks_1.useElementState)();
     const [open, , hide, toggleOpen] = (0, hooks_1.useBooleanState)(false);
     const [popupItem, setPopupItem] = (0, react_1.useState)();
@@ -43,7 +43,7 @@ function ToolbarListButton({ className, editor, focus, onClick, icon, title, wit
                         setPopupItem(undefined);
                     else
                         toggleOpen();
-                }, children: buttonContent }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { anchorElement: anchorElement, open: popupOpen, onOpenChange: hide, children: (0, jsx_runtime_1.jsx)(uikit_1.Menu, { size: "l", className: b('menu'), qa: qaMenu, "data-toolbar-menu-for": titleText, children: data
+                }, disableTooltip: disableTooltip, children: buttonContent }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { anchorElement: anchorElement, open: popupOpen, onOpenChange: hide, children: (0, jsx_runtime_1.jsx)(uikit_1.Menu, { size: "l", className: b('menu'), qa: qaMenu, "data-toolbar-menu-for": titleText, children: data
                         .map((data) => {
                         const { id, title, icon, hotkey, isActive, isEnable, exec, hint, hintWhenDisabled, preview, } = data;
                         const titleText = (0, lodash_1.isFunction)(title) ? title() : title;
@@ -67,10 +67,10 @@ function ToolbarListButton({ className, editor, focus, onClick, icon, title, wit
                                 onClick?.(id);
                             }
                         };
-                        return ((0, jsx_runtime_1.jsx)(uikit_1.Popover, { className: b('action-disabled-popover'), content: (0, jsx_runtime_1.jsx)("div", { className: b('action-disabled-tooltip'), children: hintWhenDisabledText }), placement: "left", modal: false, disabled: hideHintWhenDisabled, qa: qaActionDisabledPopover, children: (props, ref) => ((0, jsx_runtime_1.jsx)(PreviewTooltip_1.PreviewTooltip, { preview: preview, children: (0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { ref: ref, active: isActive(editor), disabled: !isEnable(editor), onClick: handleClick, iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icon.data, size: icon.size ?? 16 }), extraProps: {
+                        return ((0, jsx_runtime_1.jsx)(uikit_1.Popover, { className: b('action-disabled-popover'), content: (0, jsx_runtime_1.jsx)("div", { className: b('action-disabled-tooltip'), children: hintWhenDisabledText }), placement: "left", modal: false, disabled: hideHintWhenDisabled, qa: qaActionDisabledPopover, children: (props, ref) => ((0, jsx_runtime_1.jsx)(PreviewTooltip_1.PreviewTooltip, { preview: preview, disabled: disablePreview, children: (0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { ref: ref, active: isActive(editor), disabled: !isEnable(editor), onClick: handleClick, iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icon.data, size: icon.size ?? 16 }), extraProps: {
                                         ...props,
                                         'aria-label': titleText,
-                                    }, children: (0, jsx_runtime_1.jsxs)("div", { className: b('item'), children: [titleText, (0, jsx_runtime_1.jsxs)("div", { className: b('extra'), children: [hotkey && (0, jsx_runtime_1.jsx)(uikit_1.Hotkey, { value: hotkey }), hintText && ((0, jsx_runtime_1.jsx)(uikit_1.HelpMark, { className: b('hint'), popoverProps: { modal: false }, children: hintText }))] })] }) }, id) })) }, id));
+                                    }, children: (0, jsx_runtime_1.jsxs)("div", { className: b('item'), children: [titleText, !disableHotkey && ((0, jsx_runtime_1.jsxs)("div", { className: b('extra'), children: [hotkey && (0, jsx_runtime_1.jsx)(uikit_1.Hotkey, { value: hotkey }), hintText && ((0, jsx_runtime_1.jsx)(uikit_1.HelpMark, { className: b('hint'), popoverProps: { modal: false }, children: hintText }))] }))] }) }, id) })) }, id));
                     })
                         .filter(Boolean) }) }), popupItem
                 ? popupItem.renderPopup({

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarListButton.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarListButton.tsx"],"names":[],"mappings":";;AA+BA,8CAyKC;;AAxMD,iCAAoD;AAEpD,6CAA8C;AAC9C,6CAA+E;AAE/E,+CAAgC;AAChC,oDAAoC;AACpC,yCAAqC;AACrC,mDAAsE;AAEtE,wDAAgD;AAChD,sDAAkD;AAQlD,mCAAkC;AAElC,MAAM,CAAC,GAAG,IAAA,cAAE,EAAC,qBAAqB,CAAC,CAAC;AAUpC,SAAgB,iBAAiB,CAAI,EACjC,SAAS,EACT,MAAM,EACN,KAAK,EACL,OAAO,EACP,IAAI,EACJ,KAAK,EACL,SAAS,EACT,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,EAAE,EACF,MAAM,EACN,uBAAuB,GAAG,mCAAmC,GACrC;IACxB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,uBAAe,GAAE,CAAC;IAC5D,MAAM,CAAC,IAAI,EAAE,AAAD,EAAG,IAAI,EAAE,UAAU,CAAC,GAAG,IAAA,uBAAe,EAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,GAA6B,CAAC;IAExE,MAAM,aAAa,GAAG,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;IAC1F,MAAM,SAAS,GAAG,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC/C,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC;IAE3C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,eAAe,EAAE,CAAC;YAClB,IAAI,EAAE,CAAC;QACX,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC;IAE5B,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEnC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IACzF,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAE9D,IAAI,iBAAiB,IAAI,UAAU,IAAI,UAAU,EAAE,CAAC;QAChD,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC;IAC3B,CAAC;IAED,MAAM,aAAa,GAAG,CAAC,uBAAC,YAAI,IAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,EAAE,IAAzC,CAAC,CAA4C,CAAC,CAAC;IACjF,IAAI,SAAS,EAAE,CAAC;QACZ,aAAa,CAAC,IAAI,CAAC,uBAAC,gBAAQ,cAAU,EAAE,IAAN,CAAC,CAAiB,CAAC,CAAC;QACtD,aAAa,CAAC,IAAI,CAAC,uBAAC,YAAI,IAAS,IAAI,EAAE,mBAAW,EAAE,IAAI,EAAE,EAAE,IAA9B,CAAC,CAAiC,CAAC,CAAC;IACtE,CAAC;IACD,MAAM,SAAS,GAAW,IAAA,mBAAU,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;IAE9D,OAAO,CACH,6DACI,uBAAC,iCAAiB,IACd,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,gBAAgB,EACrB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,CAAC,aAAa,EACvB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,SAAS,EAAC,EAAE,CAAC,SAAS,CAAC,CAAC,EAC7C,OAAO,EAAE,GAAG,EAAE;oBACV,IAAI,SAAS;wBAAE,YAAY,CAAC,SAAS,CAAC,CAAC;;wBAClC,UAAU,EAAE,CAAC;gBACtB,CAAC,YAEA,aAAa,GACE,EACpB,uBAAC,aAAK,IAAC,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,YACpE,uBAAC,YAAI,IAAC,IAAI,EAAC,GAAG,EAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,MAAM,2BAAyB,SAAS,YAC5E,IAAI;yBACA,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;wBACV,MAAM,EACF,EAAE,EACF,KAAK,EACL,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,gBAAgB,EAChB,OAAO,GACV,GAAG,IAAI,CAAC;wBAET,MAAM,SAAS,GAAG,IAAA,mBAAU,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;wBACtD,MAAM,QAAQ,GAAG,IAAA,mBAAU,EAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;wBAElD,MAAM,QAAQ,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;wBAEnC,MAAM,oBAAoB,GAAG,gBAAgB,KAAK,KAAK,IAAI,CAAC,QAAQ,CAAC;wBACrE,MAAM,oBAAoB,GACtB,OAAO,gBAAgB,KAAK,QAAQ;4BAChC,CAAC,CAAC,gBAAgB;4BAClB,CAAC,CAAC,OAAO,gBAAgB,KAAK,UAAU;gCACtC,CAAC,CAAC,gBAAgB,EAAE;gCACpB,CAAC,CAAC,IAAA,aAAI,EAAC,yBAAyB,CAAC,CAAC;wBAE5C,MAAM,WAAW,GAAG,GAAG,EAAE;4BACrB,IAAI,EAAE,CAAC;4BAEP,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;gCACpB,YAAY,CAAC,IAAI,CAAC,CAAC;4BACvB,CAAC;iCAAM,CAAC;gCACJ,YAAY,CAAC,SAAS,CAAC,CAAC;gCACxB,KAAK,EAAE,CAAC;gCACR,IAAI,CAAC,MAAM,CAAC,CAAC;gCACb,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;4BAClB,CAAC;wBACL,CAAC,CAAC;wBAEF,OAAO,CACH,uBAAC,eAAO,IACJ,SAAS,EAAE,CAAC,CAAC,yBAAyB,CAAC,EACvC,OAAO,EACH,gCAAK,SAAS,EAAE,CAAC,CAAC,yBAAyB,CAAC,YACvC,oBAAoB,GACnB,EAEV,SAAS,EAAC,MAAM,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,oBAAoB,EAC9B,EAAE,EAAE,uBAAuB,YAG1B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CACb,uBAAC,+BAAc,IAAC,OAAO,EAAE,OAAO,YAC5B,uBAAC,YAAI,CAAC,IAAI,IAEN,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,EACxB,QAAQ,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAC3B,OAAO,EAAE,WAAW,EACpB,SAAS,EACL,uBAAC,YAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,EAAE,GAAI,EAEpD,UAAU,EAAE;wCACR,GAAG,KAAK;wCACR,YAAY,EAAE,SAAS;qCAC1B,YAED,iCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,aACpB,SAAS,EACV,iCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,aACrB,MAAM,IAAI,uBAAC,cAAM,IAAC,KAAK,EAAE,MAAM,GAAI,EACnC,QAAQ,IAAI,CACT,uBAAC,gBAAQ,IACL,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,YAAY,EAAE,EAAC,KAAK,EAAE,KAAK,EAAC,YAE3B,QAAQ,GACF,CACd,IACC,IACJ,IA1BD,EAAE,CA2BC,GACC,CACpB,IAlCI,EAAE,CAmCD,CACb,CAAC;oBACN,CAAC,CAAC;yBACD,MAAM,CAAC,OAAO,CAAC,GACjB,GACH,EACP,SAAS;gBACN,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC;oBAClB,GAAG,SAAS;oBACZ,MAAM;oBACN,KAAK;oBACL,OAAO;oBACP,aAAa;oBACb,IAAI,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC;iBACtC,CAAC;gBACJ,CAAC,CAAC,IAAI,IACX,CACN,CAAC;AACN,CAAC;AAED,SAAS,WAAW,CAAI,IAAwB;IAC5C,OAAO,OAAO,CAAE,IAAkC,CAAC,WAAW,CAAC,CAAC;AACpE,CAAC","sourcesContent":["import {Fragment, useEffect, useState} from 'react';\n\nimport {ChevronDown} from '@gravity-ui/icons';\nimport {HelpMark, Hotkey, Icon, Menu, Popover, Popup} from '@gravity-ui/uikit';\n\nimport {cn} from '../classname';\nimport {i18n} from '../i18n/common';\nimport {isFunction} from '../lodash';\nimport {useBooleanState, useElementState} from '../react-utils/hooks';\n\nimport {PreviewTooltip} from './PreviewTooltip';\nimport {ToolbarButtonView} from './ToolbarButton';\nimport type {\n    ToolbarBaseProps,\n    ToolbarButtonPopupData,\n    ToolbarItemData,\n    ToolbarListButtonData,\n} from './types';\n\nimport './ToolbarListButton.scss';\n\nconst b = cn('toolbar-list-button');\n\nexport type {ToolbarListButtonData};\n\nexport type ToolbarListButtonProps<E> = ToolbarBaseProps<E> &\n    ToolbarListButtonData<E> & {\n        qaMenu?: string;\n        qaActionDisabledPopover?: string;\n    };\n\nexport function ToolbarListButton<E>({\n    className,\n    editor,\n    focus,\n    onClick,\n    icon,\n    title,\n    withArrow,\n    data,\n    alwaysActive,\n    replaceActiveIcon,\n    qa,\n    qaMenu,\n    qaActionDisabledPopover = 'g-md-toolbar-action-disabled-hint',\n}: ToolbarListButtonProps<E>) {\n    const [anchorElement, setAnchorElement] = useElementState();\n    const [open, , hide, toggleOpen] = useBooleanState(false);\n    const [popupItem, setPopupItem] = useState<ToolbarButtonPopupData<E>>();\n\n    const everyDisabled = alwaysActive ? false : data.every((item) => !item.isEnable(editor));\n    const popupOpen = everyDisabled ? false : open;\n    const shouldForceHide = open && !popupOpen;\n\n    useEffect(() => {\n        if (shouldForceHide) {\n            hide();\n        }\n    }, [hide, shouldForceHide]);\n\n    if (data.length === 0) return null;\n\n    const activeItem = data.find((item) => item.isActive(editor) && !item.doNotActivateList);\n    const someActive = alwaysActive ? false : Boolean(activeItem);\n\n    if (replaceActiveIcon && someActive && activeItem) {\n        icon = activeItem.icon;\n    }\n\n    const buttonContent = [<Icon key={1} data={icon.data} size={icon.size ?? 16} />];\n    if (withArrow) {\n        buttonContent.push(<Fragment key={2}>{''}</Fragment>);\n        buttonContent.push(<Icon key={3} data={ChevronDown} size={16} />);\n    }\n    const titleText: string = isFunction(title) ? title() : title;\n\n    return (\n        <>\n            <ToolbarButtonView\n                qa={qa}\n                ref={setAnchorElement}\n                active={someActive}\n                enabled={!everyDisabled}\n                title={title}\n                className={b({arrow: withArrow}, [className])}\n                onClick={() => {\n                    if (popupItem) setPopupItem(undefined);\n                    else toggleOpen();\n                }}\n            >\n                {buttonContent}\n            </ToolbarButtonView>\n            <Popup anchorElement={anchorElement} open={popupOpen} onOpenChange={hide}>\n                <Menu size=\"l\" className={b('menu')} qa={qaMenu} data-toolbar-menu-for={titleText}>\n                    {data\n                        .map((data) => {\n                            const {\n                                id,\n                                title,\n                                icon,\n                                hotkey,\n                                isActive,\n                                isEnable,\n                                exec,\n                                hint,\n                                hintWhenDisabled,\n                                preview,\n                            } = data;\n\n                            const titleText = isFunction(title) ? title() : title;\n                            const hintText = isFunction(hint) ? hint() : hint;\n\n                            const disabled = !isEnable(editor);\n\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                            const handleClick = () => {\n                                hide();\n\n                                if (isPopupItem(data)) {\n                                    setPopupItem(data);\n                                } else {\n                                    setPopupItem(undefined);\n                                    focus();\n                                    exec(editor);\n                                    onClick?.(id);\n                                }\n                            };\n\n                            return (\n                                <Popover\n                                    className={b('action-disabled-popover')}\n                                    content={\n                                        <div className={b('action-disabled-tooltip')}>\n                                            {hintWhenDisabledText}\n                                        </div>\n                                    }\n                                    placement=\"left\"\n                                    modal={false}\n                                    disabled={hideHintWhenDisabled}\n                                    qa={qaActionDisabledPopover}\n                                    key={id}\n                                >\n                                    {(props, ref) => (\n                                        <PreviewTooltip preview={preview}>\n                                            <Menu.Item\n                                                key={id}\n                                                ref={ref}\n                                                active={isActive(editor)}\n                                                disabled={!isEnable(editor)}\n                                                onClick={handleClick}\n                                                iconStart={\n                                                    <Icon data={icon.data} size={icon.size ?? 16} />\n                                                }\n                                                extraProps={{\n                                                    ...props,\n                                                    'aria-label': titleText,\n                                                }}\n                                            >\n                                                <div className={b('item')}>\n                                                    {titleText}\n                                                    <div className={b('extra')}>\n                                                        {hotkey && <Hotkey value={hotkey} />}\n                                                        {hintText && (\n                                                            <HelpMark\n                                                                className={b('hint')}\n                                                                popoverProps={{modal: false}}\n                                                            >\n                                                                {hintText}\n                                                            </HelpMark>\n                                                        )}\n                                                    </div>\n                                                </div>\n                                            </Menu.Item>\n                                        </PreviewTooltip>\n                                    )}\n                                </Popover>\n                            );\n                        })\n                        .filter(Boolean)}\n                </Menu>\n            </Popup>\n            {popupItem\n                ? popupItem.renderPopup({\n                      ...popupItem,\n                      editor,\n                      focus,\n                      onClick,\n                      anchorElement,\n                      hide: () => setPopupItem(undefined),\n                  })\n                : null}\n        </>\n    );\n}\n\nfunction isPopupItem<E>(item: ToolbarItemData<E>): item is ToolbarButtonPopupData<E> {\n    return Boolean((item as ToolbarButtonPopupData<E>).renderPopup);\n}\n"]}
+{"version":3,"file":"ToolbarListButton.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarListButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Fragment, useEffect, useState} from 'react';\n\nimport {ChevronDown} from '@gravity-ui/icons';\nimport {HelpMark, Hotkey, Icon, Menu, Popover, Popup} from '@gravity-ui/uikit';\n\nimport {cn} from '../classname';\nimport {i18n} from '../i18n/common';\nimport {isFunction} from '../lodash';\nimport {useBooleanState, useElementState} from '../react-utils/hooks';\n\nimport {PreviewTooltip} from './PreviewTooltip';\nimport {ToolbarButtonView} from './ToolbarButton';\nimport type {\n    ToolbarBaseProps,\n    ToolbarButtonPopupData,\n    ToolbarItemData,\n    ToolbarListButtonData,\n} from './types';\n\nimport './ToolbarListButton.scss';\n\nconst b = cn('toolbar-list-button');\n\nexport type {ToolbarListButtonData};\n\nexport type ToolbarListButtonProps<E> = ToolbarBaseProps<E> &\n    ToolbarListButtonData<E> & {\n        qaMenu?: string;\n        qaActionDisabledPopover?: string;\n    };\n\nexport function ToolbarListButton<E>({\n    className,\n    editor,\n    focus,\n    onClick,\n    icon,\n    title,\n    withArrow,\n    data,\n    alwaysActive,\n    replaceActiveIcon,\n    qa,\n    qaMenu,\n    qaActionDisabledPopover = 'g-md-toolbar-action-disabled-hint',\n    disableHotkey,\n    disablePreview,\n    disableTooltip,\n}: ToolbarListButtonProps<E>) {\n    const [anchorElement, setAnchorElement] = useElementState();\n    const [open, , hide, toggleOpen] = useBooleanState(false);\n    const [popupItem, setPopupItem] = useState<ToolbarButtonPopupData<E>>();\n\n    const everyDisabled = alwaysActive ? false : data.every((item) => !item.isEnable(editor));\n    const popupOpen = everyDisabled ? false : open;\n    const shouldForceHide = open && !popupOpen;\n\n    useEffect(() => {\n        if (shouldForceHide) {\n            hide();\n        }\n    }, [hide, shouldForceHide]);\n\n    if (data.length === 0) return null;\n\n    const activeItem = data.find((item) => item.isActive(editor) && !item.doNotActivateList);\n    const someActive = alwaysActive ? false : Boolean(activeItem);\n\n    if (replaceActiveIcon && someActive && activeItem) {\n        icon = activeItem.icon;\n    }\n\n    const buttonContent = [<Icon key={1} data={icon.data} size={icon.size ?? 16} />];\n    if (withArrow) {\n        buttonContent.push(<Fragment key={2}>{''}</Fragment>);\n        buttonContent.push(<Icon key={3} data={ChevronDown} size={16} />);\n    }\n    const titleText: string = isFunction(title) ? title() : title;\n\n    return (\n        <>\n            <ToolbarButtonView\n                qa={qa}\n                ref={setAnchorElement}\n                active={someActive}\n                enabled={!everyDisabled}\n                title={title}\n                className={b({arrow: withArrow}, [className])}\n                onClick={() => {\n                    if (popupItem) setPopupItem(undefined);\n                    else toggleOpen();\n                }}\n                disableTooltip={disableTooltip}\n            >\n                {buttonContent}\n            </ToolbarButtonView>\n            <Popup anchorElement={anchorElement} open={popupOpen} onOpenChange={hide}>\n                <Menu size=\"l\" className={b('menu')} qa={qaMenu} data-toolbar-menu-for={titleText}>\n                    {data\n                        .map((data) => {\n                            const {\n                                id,\n                                title,\n                                icon,\n                                hotkey,\n                                isActive,\n                                isEnable,\n                                exec,\n                                hint,\n                                hintWhenDisabled,\n                                preview,\n                            } = data;\n\n                            const titleText = isFunction(title) ? title() : title;\n                            const hintText = isFunction(hint) ? hint() : hint;\n\n                            const disabled = !isEnable(editor);\n\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                            const handleClick = () => {\n                                hide();\n\n                                if (isPopupItem(data)) {\n                                    setPopupItem(data);\n                                } else {\n                                    setPopupItem(undefined);\n                                    focus();\n                                    exec(editor);\n                                    onClick?.(id);\n                                }\n                            };\n\n                            return (\n                                <Popover\n                                    className={b('action-disabled-popover')}\n                                    content={\n                                        <div className={b('action-disabled-tooltip')}>\n                                            {hintWhenDisabledText}\n                                        </div>\n                                    }\n                                    placement=\"left\"\n                                    modal={false}\n                                    disabled={hideHintWhenDisabled}\n                                    qa={qaActionDisabledPopover}\n                                    key={id}\n                                >\n                                    {(props, ref) => (\n                                        <PreviewTooltip preview={preview} disabled={disablePreview}>\n                                            <Menu.Item\n                                                key={id}\n                                                ref={ref}\n                                                active={isActive(editor)}\n                                                disabled={!isEnable(editor)}\n                                                onClick={handleClick}\n                                                iconStart={\n                                                    <Icon data={icon.data} size={icon.size ?? 16} />\n                                                }\n                                                extraProps={{\n                                                    ...props,\n                                                    'aria-label': titleText,\n                                                }}\n                                            >\n                                                <div className={b('item')}>\n                                                    {titleText}\n                                                    {!disableHotkey && (\n                                                        <div className={b('extra')}>\n                                                            {hotkey && <Hotkey value={hotkey} />}\n                                                            {hintText && (\n                                                                <HelpMark\n                                                                    className={b('hint')}\n                                                                    popoverProps={{modal: false}}\n                                                                >\n                                                                    {hintText}\n                                                                </HelpMark>\n                                                            )}\n                                                        </div>\n                                                    )}\n                                                </div>\n                                            </Menu.Item>\n                                        </PreviewTooltip>\n                                    )}\n                                </Popover>\n                            );\n                        })\n                        .filter(Boolean)}\n                </Menu>\n            </Popup>\n            {popupItem\n                ? popupItem.renderPopup({\n                      ...popupItem,\n                      editor,\n                      focus,\n                      onClick,\n                      anchorElement,\n                      hide: () => setPopupItem(undefined),\n                  })\n                : null}\n        </>\n    );\n}\n\nfunction isPopupItem<E>(item: ToolbarItemData<E>): item is ToolbarButtonPopupData<E> {\n    return Boolean((item as ToolbarButtonPopupData<E>).renderPopup);\n}\n"]}

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

@@ -6,10 +6,15 @@ export type ToolbarBaseProps<E> = ClassNameProps & QAProps & {
     onClick?(id: string, attrs?: {
         [key: string]: any;
     }): void;
+    display?: ToolbarDisplay;
+    disableTooltip?: boolean;
+    disablePreview?: boolean;
+    disableHotkey?: boolean;
 };
 export type ToolbarIconData = Pick<IconProps, 'data' | 'size'>;
 export type ToolbarGroupData<E> = Array<ToolbarGroupItemData<E>>;
 export type ToolbarData<E> = ToolbarGroupData<E>[];
+export type ToolbarDisplay = 'shrink' | 'scroll';
 export type ToolbarItemData<E> = QAProps & {
     id: string;
     icon: ToolbarIconData;

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"../../../src","sources":["toolbar/types.ts"],"names":[],"mappings":";;;AA2CA,IAAY,eASX;AATD,WAAY,eAAe;IACvB,4CAAyB,CAAA;IACzB,wCAAqB,CAAA;IACrB,0CAAuB,CAAA;IACvB,kDAAkD;IAClD,uCAAoB,CAAA;IACpB,kDAAkD;IAClD,4CAAyB,CAAA;IACzB,iDAA8B,CAAA;AAClC,CAAC,EATW,eAAe,+BAAf,eAAe,QAS1B","sourcesContent":["import type {HotkeyProps, IconProps, QAProps} from '@gravity-ui/uikit';\n\nimport type {ClassNameProps} from '../classname';\n\nexport type ToolbarBaseProps<E> = ClassNameProps &\n    QAProps & {\n        editor: E;\n        focus(): void;\n        onClick?(id: string, attrs?: {[key: string]: any}): void;\n    };\n\nexport type ToolbarIconData = Pick<IconProps, 'data' | 'size'>;\nexport type ToolbarGroupData<E> = Array<ToolbarGroupItemData<E>>;\nexport type ToolbarData<E> = ToolbarGroupData<E>[];\n\nexport type ToolbarItemData<E> = QAProps & {\n    id: string;\n    icon: ToolbarIconData;\n    title: string | (() => string);\n    hint?: string | (() => string);\n    hotkey?: HotkeyProps['value'];\n    preview?: React.ReactNode;\n    /**\n     * Alternative IDs that can be used to find this command\n     */\n    aliases?: string[];\n    /**\n     * Show hint when _isEnable()_ returns false\n     *\n     * `false` – don't show hint;\n     *\n     * `true` – show default hint;\n     *\n     * `string` or `() => string` – show hint with custom message.\n     *\n     * @default true\n     */\n    hintWhenDisabled?: boolean | string | (() => string);\n    exec(editor: E): void;\n    isActive(editor: E): boolean;\n    isEnable(editor: E): boolean;\n};\n\nexport enum ToolbarDataType {\n    SingleButton = 's-button',\n    ListButton = 'list-b',\n    ButtonPopup = 'b-popup',\n    /** @deprecated Use ReactComponent type instead */\n    ReactNode = 'r-node',\n    /** @deprecated Use ReactComponent type instead */\n    ReactNodeFn = 'r-node-fn',\n    ReactComponent = 'r-component',\n}\n\nexport type ToolbarGroupItemData<E> =\n    | ToolbarSingleItemData<E>\n    | ToolbarButtonPopupData<E>\n    | ToolbarListItemData<E>\n    | ToolbarReactNodeData\n    | ToolbarReactNodeFnData<E>\n    | ToolbarReactComponentData<E>;\n\nexport type ToolbarSingleItemData<E> = ToolbarItemData<E> & {\n    id: string;\n    type: ToolbarDataType.SingleButton;\n    className?: string;\n};\n\nexport type ToolbarListItemData<E> = ToolbarListButtonData<E> & {\n    id: string;\n    type: ToolbarDataType.ListButton;\n    className?: string;\n};\n\nexport type ToolbarReactComponentData<E> = {\n    id: string;\n    type: ToolbarDataType.ReactComponent;\n    width: number;\n    className?: string;\n    component: React.ComponentType<ToolbarBaseProps<E>>;\n    props?: object;\n};\n\nexport type ToolbarButtonPopupData<E> = ToolbarItemData<E> & {\n    /** not used, may be an empty function */\n    exec: ToolbarItemData<E>['exec'];\n    type: ToolbarDataType.ButtonPopup;\n    renderPopup: (\n        props: ToolbarBaseProps<E> & {hide: () => void; anchorElement: HTMLElement | null},\n    ) => React.ReactNode;\n    className?: string;\n};\n\nexport type ToolbarListButtonItemData<E> = ToolbarItemData<E> & {\n    doNotActivateList?: boolean;\n};\n\nexport type ToolbarListButtonData<E> = {\n    icon: ToolbarIconData;\n    title: string | (() => string);\n    withArrow?: boolean;\n    data: ToolbarListButtonItemData<E>[];\n    alwaysActive?: boolean;\n    hideDisabled?: boolean;\n    /** When state changes to active, replace default icon with icon of first active item */\n    replaceActiveIcon?: boolean;\n};\n\n/**\n * @deprecated Use ReactComponent type instead\n * */\nexport type ToolbarReactNodeData = {\n    id: string;\n    type: ToolbarDataType.ReactNode;\n    width: number;\n    content: React.ReactNode;\n};\n\n/**\n * @deprecated Use ReactComponent type instead\n * */\nexport type ToolbarReactNodeFnData<E> = {\n    id: string;\n    type: ToolbarDataType.ReactNodeFn;\n    width: number;\n    content: (e: E) => React.ReactNode;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"../../../src","sources":["toolbar/types.ts"],"names":[],"mappings":";;;AAgDA,IAAY,eASX;AATD,WAAY,eAAe;IACvB,4CAAyB,CAAA;IACzB,wCAAqB,CAAA;IACrB,0CAAuB,CAAA;IACvB,kDAAkD;IAClD,uCAAoB,CAAA;IACpB,kDAAkD;IAClD,4CAAyB,CAAA;IACzB,iDAA8B,CAAA;AAClC,CAAC,EATW,eAAe,+BAAf,eAAe,QAS1B","sourcesContent":["import type {HotkeyProps, IconProps, QAProps} from '@gravity-ui/uikit';\n\nimport type {ClassNameProps} from '../classname';\n\nexport type ToolbarBaseProps<E> = ClassNameProps &\n    QAProps & {\n        editor: E;\n        focus(): void;\n        onClick?(id: string, attrs?: {[key: string]: any}): void;\n        display?: ToolbarDisplay;\n        disableTooltip?: boolean;\n        disablePreview?: boolean;\n        disableHotkey?: boolean;\n    };\n\nexport type ToolbarIconData = Pick<IconProps, 'data' | 'size'>;\nexport type ToolbarGroupData<E> = Array<ToolbarGroupItemData<E>>;\nexport type ToolbarData<E> = ToolbarGroupData<E>[];\nexport type ToolbarDisplay = 'shrink' | 'scroll';\n\nexport type ToolbarItemData<E> = QAProps & {\n    id: string;\n    icon: ToolbarIconData;\n    title: string | (() => string);\n    hint?: string | (() => string);\n    hotkey?: HotkeyProps['value'];\n    preview?: React.ReactNode;\n    /**\n     * Alternative IDs that can be used to find this command\n     */\n    aliases?: string[];\n    /**\n     * Show hint when _isEnable()_ returns false\n     *\n     * `false` – don't show hint;\n     *\n     * `true` – show default hint;\n     *\n     * `string` or `() => string` – show hint with custom message.\n     *\n     * @default true\n     */\n    hintWhenDisabled?: boolean | string | (() => string);\n    exec(editor: E): void;\n    isActive(editor: E): boolean;\n    isEnable(editor: E): boolean;\n};\n\nexport enum ToolbarDataType {\n    SingleButton = 's-button',\n    ListButton = 'list-b',\n    ButtonPopup = 'b-popup',\n    /** @deprecated Use ReactComponent type instead */\n    ReactNode = 'r-node',\n    /** @deprecated Use ReactComponent type instead */\n    ReactNodeFn = 'r-node-fn',\n    ReactComponent = 'r-component',\n}\n\nexport type ToolbarGroupItemData<E> =\n    | ToolbarSingleItemData<E>\n    | ToolbarButtonPopupData<E>\n    | ToolbarListItemData<E>\n    | ToolbarReactNodeData\n    | ToolbarReactNodeFnData<E>\n    | ToolbarReactComponentData<E>;\n\nexport type ToolbarSingleItemData<E> = ToolbarItemData<E> & {\n    id: string;\n    type: ToolbarDataType.SingleButton;\n    className?: string;\n};\n\nexport type ToolbarListItemData<E> = ToolbarListButtonData<E> & {\n    id: string;\n    type: ToolbarDataType.ListButton;\n    className?: string;\n};\n\nexport type ToolbarReactComponentData<E> = {\n    id: string;\n    type: ToolbarDataType.ReactComponent;\n    width: number;\n    className?: string;\n    component: React.ComponentType<ToolbarBaseProps<E>>;\n    props?: object;\n};\n\nexport type ToolbarButtonPopupData<E> = ToolbarItemData<E> & {\n    /** not used, may be an empty function */\n    exec: ToolbarItemData<E>['exec'];\n    type: ToolbarDataType.ButtonPopup;\n    renderPopup: (\n        props: ToolbarBaseProps<E> & {hide: () => void; anchorElement: HTMLElement | null},\n    ) => React.ReactNode;\n    className?: string;\n};\n\nexport type ToolbarListButtonItemData<E> = ToolbarItemData<E> & {\n    doNotActivateList?: boolean;\n};\n\nexport type ToolbarListButtonData<E> = {\n    icon: ToolbarIconData;\n    title: string | (() => string);\n    withArrow?: boolean;\n    data: ToolbarListButtonItemData<E>[];\n    alwaysActive?: boolean;\n    hideDisabled?: boolean;\n    /** When state changes to active, replace default icon with icon of first active item */\n    replaceActiveIcon?: boolean;\n};\n\n/**\n * @deprecated Use ReactComponent type instead\n * */\nexport type ToolbarReactNodeData = {\n    id: string;\n    type: ToolbarDataType.ReactNode;\n    width: number;\n    content: React.ReactNode;\n};\n\n/**\n * @deprecated Use ReactComponent type instead\n * */\nexport type ToolbarReactNodeFnData<E> = {\n    id: string;\n    type: ToolbarDataType.ReactNodeFn;\n    width: number;\n    content: (e: E) => React.ReactNode;\n};\n"]}

package/build/cjs/version.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 /** During build process, the current version will be injected here */
-exports.VERSION = typeof '15.17.0' !== 'undefined' ? '15.17.0' : 'unknown';
+exports.VERSION = typeof '15.19.0' !== 'undefined' ? '15.19.0' : 'unknown';
 //# sourceMappingURL=version.js.map

package/build/cjs/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"../../src","sources":["version.ts"],"names":[],"mappings":";;;AAAA,sEAAsE;AACzD,QAAA,OAAO,GAAG,OAAO,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC","sourcesContent":["/** During build process, the current version will be injected here */\nexport const VERSION = typeof '15.17.0' !== 'undefined' ? '15.17.0' : 'unknown';\n"]}
+{"version":3,"file":"version.js","sourceRoot":"../../src","sources":["version.ts"],"names":[],"mappings":";;;AAAA,sEAAsE;AACzD,QAAA,OAAO,GAAG,OAAO,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC","sourcesContent":["/** During build process, the current version will be injected here */\nexport const VERSION = typeof '15.19.0' !== 'undefined' ? '15.19.0' : 'unknown';\n"]}