@gravity-ui/markdown-editor 14.11.2 → 14.12.1

package/build/esm/toolbar/Toolbar.js

@@ -1,13 +1,13 @@
-import React from 'react';
-import { cn } from '../classname';
-import { ToolbarButtonGroup } from './ToolbarGroup';
-import './Toolbar.css';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { cn } from "../classname.js";
+import { ToolbarButtonGroup } from "./ToolbarGroup.js";
+import "./Toolbar.css";
 const b = cn('toolbar');
 export function Toolbar({ editor, data, className, focus, onClick }) {
-    return (React.createElement("div", { className: b(null, [className]) }, data.map((group, index) => {
-        const isLastGroup = index === data.length - 1;
-        return (React.createElement(React.Fragment, { key: index },
-            React.createElement(ToolbarButtonGroup, { data: group, editor: editor, focus: focus, onClick: onClick, className: b('group') }),
-            isLastGroup || React.createElement("div", { className: b('group-separator') })));
-    })));
+    return (_jsx("div", { className: b(null, [className]), children: data.map((group, index) => {
+            const isLastGroup = index === data.length - 1;
+            return (_jsxs(Fragment, { children: [_jsx(ToolbarButtonGroup, { data: group, editor: editor, focus: focus, onClick: onClick, className: b('group') }), isLastGroup || _jsx("div", { className: b('group-separator') })] }, index));
+        }) }));
 }
+//# sourceMappingURL=Toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sourceRoot":"../../../src","sources":["toolbar/Toolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,EAAE,EAAC,wBAAqB;AAEhC,OAAO,EAAC,kBAAkB,EAAC,0BAAuB;AAGlD,uBAAwB;AAExB,MAAM,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;AAQxB,MAAM,UAAU,OAAO,CAAI,EAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAkB;IACjF,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,YAC/B,IAAI,CAAC,GAAG,CAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACxC,MAAM,WAAW,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;YAE9C,OAAO,CACH,MAAC,QAAQ,eACL,KAAC,kBAAkB,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,cAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,GAAI,KAR7C,KAAK,CAST,CACd,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC","sourcesContent":["import {Fragment} from 'react';\n\nimport {cn} from '../classname';\n\nimport {ToolbarButtonGroup} from './ToolbarGroup';\nimport type {ToolbarBaseProps, ToolbarData} from './types';\n\nimport './Toolbar.scss';\n\nconst b = cn('toolbar');\n\nexport type {ToolbarData};\n\nexport type ToolbarProps<E> = ToolbarBaseProps<E> & {\n    data: ToolbarData<E>;\n};\n\nexport function Toolbar<E>({editor, data, className, focus, onClick}: ToolbarProps<E>) {\n    return (\n        <div className={b(null, [className])}>\n            {data.map<React.ReactNode>((group, index) => {\n                const isLastGroup = index === data.length - 1;\n\n                return (\n                    <Fragment key={index}>\n                        <ToolbarButtonGroup\n                            data={group}\n                            editor={editor}\n                            focus={focus}\n                            onClick={onClick}\n                            className={b('group')}\n                        />\n                        {isLastGroup || <div className={b('group-separator')} />}\n                    </Fragment>\n                );\n            })}\n        </div>\n    );\n}\n"]}

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

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

package/build/esm/toolbar/ToolbarButton.js

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

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

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

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

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

package/build/esm/toolbar/ToolbarButtonPopup.js

@@ -1,15 +1,17 @@
-import { __rest } from "tslib";
-import React, { useRef } from 'react';
-import { useBoolean } from 'react-use';
-import { ToolbarButtonView } from './ToolbarButton';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useBooleanState, useElementState } from "../react-utils/hooks.js";
+import { ToolbarButtonView } from "./ToolbarButton.js";
 export function ToolbarButtonPopup(props) {
-    const { className, editor, isActive, isEnable, renderPopup } = props, buttonProps = __rest(props, ["className", "editor", "isActive", "isEnable", "renderPopup"]);
-    const buttonRef = useRef(null);
-    const [open, setOpen] = useBoolean(false);
+    const { className, editor, isActive, isEnable, renderPopup, ...buttonProps } = props;
+    const [anchorElement, setAnchorElement] = useElementState();
+    const [isOpen, , close, toggle] = useBooleanState(false);
     const active = isActive(editor);
     const enabled = isEnable(editor);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(ToolbarButtonView, Object.assign({}, buttonProps, { ref: buttonRef, active: active, enabled: enabled, className: className, onClick: () => setOpen() })),
-        open &&
-            renderPopup(Object.assign(Object.assign({}, props), { anchorRef: buttonRef, hide: () => setOpen(false) }))));
+    return (_jsxs(_Fragment, { children: [_jsx(ToolbarButtonView, { ...buttonProps, ref: setAnchorElement, active: active, enabled: enabled, className: className, onClick: toggle }), isOpen &&
+                renderPopup({
+                    ...props,
+                    anchorElement,
+                    hide: close,
+                })] }));
 }
+//# sourceMappingURL=ToolbarButtonPopup.js.map

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

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

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

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

package/build/esm/toolbar/ToolbarGroup.js

@@ -1,32 +1,35 @@
-import React from 'react';
-import { cn } from '../classname';
-import { ToolbarButton } from './ToolbarButton';
-import { ToolbarButtonPopup } from './ToolbarButtonPopup';
-import { ToolbarListButton } from './ToolbarListButton';
-import { ToolbarDataType } from './types';
-import './ToolbarGroup.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { Fragment } from 'react';
+import { cn } from "../classname.js";
+import { ToolbarButton } from "./ToolbarButton.js";
+import { ToolbarButtonPopup } from "./ToolbarButtonPopup.js";
+import { ToolbarListButton } from "./ToolbarListButton.js";
+import { ToolbarDataType } from "./types.js";
+import "./ToolbarGroup.css";
 const b = cn('toolbar-group');
 export function ToolbarButtonGroup({ className, editor, data, focus, onClick, }) {
-    return (React.createElement("div", { className: b(null, [className]) }, data.map((item) => {
-        if (item.type === ToolbarDataType.SingleButton) {
-            return (React.createElement(ToolbarButton, Object.assign({}, item, { key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, [item.className]) })));
-        }
-        if (item.type === ToolbarDataType.ButtonPopup) {
-            return (React.createElement(ToolbarButtonPopup, Object.assign({}, item, { key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, item.className) })));
-        }
-        if (item.type === ToolbarDataType.ListButton) {
-            return (React.createElement(ToolbarListButton, Object.assign({}, item, { key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, [item.className]) })));
-        }
-        if (item.type === ToolbarDataType.ReactComponent) {
-            const Component = item.component;
-            return (React.createElement(Component, { key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, [item.className]) }));
-        }
-        if (item.type === ToolbarDataType.ReactNode) {
-            return React.createElement(React.Fragment, { key: item.id }, item.content);
-        }
-        if (item.type === ToolbarDataType.ReactNodeFn) {
-            return React.createElement(React.Fragment, { key: item.id }, item.content(editor));
-        }
-        return null;
-    })));
+    return (_jsx("div", { className: b(null, [className]), children: data.map((item) => {
+            if (item.type === ToolbarDataType.SingleButton) {
+                return (_createElement(ToolbarButton, { ...item, key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, [item.className]) }));
+            }
+            if (item.type === ToolbarDataType.ButtonPopup) {
+                return (_createElement(ToolbarButtonPopup, { ...item, key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, item.className) }));
+            }
+            if (item.type === ToolbarDataType.ListButton) {
+                return (_createElement(ToolbarListButton, { ...item, key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, [item.className]) }));
+            }
+            if (item.type === ToolbarDataType.ReactComponent) {
+                const Component = item.component;
+                return (_createElement(Component, { ...item.props, key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, [item.className]) }));
+            }
+            if (item.type === ToolbarDataType.ReactNode) {
+                return _jsx(Fragment, { children: item.content }, item.id);
+            }
+            if (item.type === ToolbarDataType.ReactNodeFn) {
+                return _jsx(Fragment, { children: item.content(editor) }, item.id);
+            }
+            return null;
+        }) }));
 }
+//# sourceMappingURL=ToolbarGroup.js.map

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

@@ -0,0 +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                            key={item.id}\n                            editor={editor}\n                            focus={focus}\n                            onClick={onClick}\n                            className={b(item.type, {id: item.id}, [item.className])}\n                        />\n                    );\n                }\n\n                if (item.type === ToolbarDataType.ReactComponent) {\n                    const Component = item.component;\n                    return (\n                        <Component\n                            {...item.props}\n                            key={item.id}\n                            editor={editor}\n                            focus={focus}\n                            onClick={onClick}\n                            className={b(item.type, {id: item.id}, [item.className])}\n                        />\n                    );\n                }\n\n                if (item.type === ToolbarDataType.ReactNode) {\n                    return <Fragment key={item.id}>{item.content}</Fragment>;\n                }\n\n                if (item.type === ToolbarDataType.ReactNodeFn) {\n                    return <Fragment key={item.id}>{item.content(editor)}</Fragment>;\n                }\n\n                return null;\n            })}\n        </div>\n    );\n}\n"]}

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

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

package/build/esm/toolbar/ToolbarListButton.js

@@ -1,17 +1,17 @@
-import React, { useState } from 'react';
-import { HelpPopover } from '@gravity-ui/components';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useEffect, useState } from 'react';
 import { ChevronDown } from '@gravity-ui/icons';
-import { ActionTooltip, Button, Hotkey, Icon, Menu, Popover, Popup } from '@gravity-ui/uikit';
-import { cn } from '../classname';
-import { i18n } from '../i18n/common';
-import { isFunction } from '../lodash';
-import { useBooleanState } from '../react-utils/hooks';
-import { ToolbarTooltipDelay } from './const';
-import './ToolbarListButton.css';
+import { ActionTooltip, Button, HelpMark, Hotkey, Icon, Menu, Popover, Popup, } from '@gravity-ui/uikit';
+import { cn } from "../classname.js";
+import { i18n } from "../i18n/common/index.js";
+import { isFunction } from "../lodash.js";
+import { useBooleanState, useElementState } from "../react-utils/hooks.js";
+import { PreviewTooltip } from "./PreviewTooltip.js";
+import { ToolbarTooltipDelay } from "./const.js";
+import "./ToolbarListButton.css";
 const b = cn('toolbar-list-button');
 export function ToolbarListButton({ className, editor, focus, onClick, icon, title, withArrow, data, alwaysActive, }) {
-    var _a;
-    const buttonRef = React.useRef(null);
+    const [anchorElement, setAnchorElement] = useElementState();
     const [open, , hide, toggleOpen] = useBooleanState(false);
     const [popupItem, setPopupItem] = useState();
     const someActive = alwaysActive
@@ -20,44 +20,37 @@ export function ToolbarListButton({ className, editor, focus, onClick, icon, tit
     const everyDisabled = alwaysActive ? false : data.every((item) => !item.isEnable(editor));
     const popupOpen = everyDisabled ? false : open;
     const shouldForceHide = open && !popupOpen;
-    React.useEffect(() => {
+    useEffect(() => {
         if (shouldForceHide) {
             hide();
         }
     }, [hide, shouldForceHide]);
     if (data.length === 0)
         return null;
-    const buttonContent = [React.createElement(Icon, { key: 1, data: icon.data, size: (_a = icon.size) !== null && _a !== void 0 ? _a : 16 })];
+    const buttonContent = [_jsx(Icon, { data: icon.data, size: icon.size ?? 16 }, 1)];
     if (withArrow) {
-        buttonContent.push(React.createElement(React.Fragment, { key: 2 }, ''));
-        buttonContent.push(React.createElement(Icon, { key: 3, data: ChevronDown, size: 16 }));
+        buttonContent.push(_jsx(Fragment, { children: '' }, 2));
+        buttonContent.push(_jsx(Icon, { data: ChevronDown, size: 16 }, 3));
     }
     const titleText = isFunction(title) ? title() : title;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Popover, { className: b('action-disabled-popover'), tooltipContentClassName: b('action-disabled-tooltip'), content: i18n('toolbar_action_disabled'), placement: 'bottom', disabled: !everyDisabled },
-            React.createElement(ActionTooltip, { title: titleText, disabled: Boolean(popupItem) || popupOpen, openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close },
-                React.createElement(Button, { size: "m", ref: buttonRef, view: someActive || popupOpen ? 'normal' : 'flat', selected: someActive, disabled: everyDisabled, className: b({ arrow: withArrow }, [className]), onClick: () => {
-                        if (popupItem)
-                            setPopupItem(undefined);
-                        else
-                            toggleOpen();
-                    } }, buttonContent))),
-        React.createElement(Popup, { anchorRef: buttonRef, open: popupOpen, onClose: hide },
-            React.createElement(Menu, { size: "l", className: b('menu') }, data
-                .map((data) => {
-                var _a;
-                const { id, title, icon, hotkey, isActive, isEnable, exec, hint, hintWhenDisabled, disabledPopoverVisible = true, } = data;
-                const titleText = isFunction(title) ? title() : title;
-                const hintText = isFunction(hint) ? hint() : hint;
-                const disabled = !isEnable(editor);
-                const hideHintWhenDisabled = hintWhenDisabled === false || !disabledPopoverVisible || !disabled;
-                const hintWhenDisabledText = typeof hintWhenDisabled === 'string'
-                    ? hintWhenDisabled
-                    : typeof hintWhenDisabled === 'function'
-                        ? hintWhenDisabled()
-                        : i18n('toolbar_action_disabled');
-                return (React.createElement(Popover, { className: b('action-disabled-popover'), tooltipContentClassName: b('action-disabled-tooltip'), content: hintWhenDisabledText, placement: 'left', disabled: hideHintWhenDisabled, key: id },
-                    React.createElement(Menu.Item, { key: id, active: isActive(editor), disabled: !isEnable(editor), onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(Popover, { className: b('action-disabled-popover'), content: _jsx("div", { className: b('action-disabled-tooltip'), children: i18n('toolbar_action_disabled') }), placement: 'bottom', disabled: !everyDisabled, children: _jsx(ActionTooltip, { title: titleText, disabled: Boolean(popupItem) || popupOpen, openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, children: _jsx(Button, { size: "m", ref: setAnchorElement, view: someActive || popupOpen ? 'normal' : 'flat', selected: someActive, disabled: everyDisabled, className: b({ arrow: withArrow }, [className]), onClick: () => {
+                            if (popupItem)
+                                setPopupItem(undefined);
+                            else
+                                toggleOpen();
+                        }, children: buttonContent }) }) }), _jsx(Popup, { anchorElement: anchorElement, open: popupOpen, onOpenChange: hide, children: _jsx(Menu, { size: "l", className: b('menu'), children: data
+                        .map((data) => {
+                        const { id, title, icon, hotkey, isActive, isEnable, exec, hint, hintWhenDisabled, preview, } = data;
+                        const titleText = isFunction(title) ? title() : title;
+                        const hintText = isFunction(hint) ? hint() : hint;
+                        const disabled = !isEnable(editor);
+                        const hideHintWhenDisabled = hintWhenDisabled === false || !disabled;
+                        const hintWhenDisabledText = typeof hintWhenDisabled === 'string'
+                            ? hintWhenDisabled
+                            : typeof hintWhenDisabled === 'function'
+                                ? hintWhenDisabled()
+                                : i18n('toolbar_action_disabled');
+                        const handleClick = () => {
                             hide();
                             if (isPopupItem(data)) {
                                 setPopupItem(data);
@@ -66,22 +59,26 @@ export function ToolbarListButton({ className, editor, focus, onClick, icon, tit
                                 setPopupItem(undefined);
                                 focus();
                                 exec(editor);
-                                onClick === null || onClick === void 0 ? void 0 : onClick(id);
+                                onClick?.(id);
                             }
-                        }, icon: React.createElement(Icon, { data: icon.data, size: (_a = icon.size) !== null && _a !== void 0 ? _a : 16 }), extraProps: { 'aria-label': titleText } },
-                        React.createElement("div", { className: b('item') },
-                            titleText,
-                            React.createElement("div", { className: b('extra') },
-                                hotkey && React.createElement(Hotkey, { value: hotkey }),
-                                hintText && (React.createElement(HelpPopover, { className: b('hint'), content: hintText })))))));
-            })
-                .filter(Boolean))),
-        popupItem
-            ? popupItem.renderPopup(Object.assign(Object.assign({}, popupItem), { editor,
-                focus,
-                onClick, anchorRef: buttonRef, hide: () => setPopupItem(undefined) }))
-            : null));
+                        };
+                        return (_jsx(Popover, { className: b('action-disabled-popover'), content: _jsx("div", { className: b('action-disabled-tooltip'), children: hintWhenDisabledText }), placement: "left", modal: false, disabled: hideHintWhenDisabled, children: (props, ref) => (_jsx(PreviewTooltip, { preview: preview, children: _jsx(Menu.Item, { ref: ref, active: isActive(editor), disabled: !isEnable(editor), onClick: handleClick, iconStart: _jsx(Icon, { data: icon.data, size: icon.size ?? 16 }), extraProps: {
+                                        ...props,
+                                        'aria-label': titleText,
+                                    }, children: _jsxs("div", { className: b('item'), children: [titleText, _jsxs("div", { className: b('extra'), children: [hotkey && _jsx(Hotkey, { value: hotkey }), hintText && (_jsx(HelpMark, { className: b('hint'), popoverProps: { modal: false }, children: hintText }))] })] }) }, id) })) }, id));
+                    })
+                        .filter(Boolean) }) }), popupItem
+                ? popupItem.renderPopup({
+                    ...popupItem,
+                    editor,
+                    focus,
+                    onClick,
+                    anchorElement,
+                    hide: () => setPopupItem(undefined),
+                })
+                : null] }));
 }
 function isPopupItem(item) {
     return Boolean(item.renderPopup);
 }
+//# sourceMappingURL=ToolbarListButton.js.map

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

@@ -0,0 +1 @@
+{"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 {\n    ActionTooltip,\n    Button,\n    HelpMark,\n    Hotkey,\n    Icon,\n    Menu,\n    Popover,\n    Popup,\n} 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 {ToolbarTooltipDelay} from './const';\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> & ToolbarListButtonData<E>;\n\nexport function ToolbarListButton<E>({\n    className,\n    editor,\n    focus,\n    onClick,\n    icon,\n    title,\n    withArrow,\n    data,\n    alwaysActive,\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 someActive = alwaysActive\n        ? false\n        : data.some((item) => item.isActive(editor) && !item.doNotActivateList);\n    const everyDisabled = alwaysActive ? false : data.every((item) => !item.isEnable(editor));\n\n    const popupOpen = everyDisabled ? false : open;\n    const shouldForceHide = open && !popupOpen;\n    useEffect(() => {\n        if (shouldForceHide) {\n            hide();\n        }\n    }, [hide, shouldForceHide]);\n\n    if (data.length === 0) return null;\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\n    const titleText: string = isFunction(title) ? title() : title;\n\n    return (\n        <>\n            <Popover\n                className={b('action-disabled-popover')}\n                content={\n                    <div className={b('action-disabled-tooltip')}>\n                        {i18n('toolbar_action_disabled')}\n                    </div>\n                }\n                placement={'bottom'}\n                disabled={!everyDisabled}\n            >\n                <ActionTooltip\n                    title={titleText}\n                    disabled={Boolean(popupItem) || popupOpen}\n                    openDelay={ToolbarTooltipDelay.Open}\n                    closeDelay={ToolbarTooltipDelay.Close}\n                >\n                    <Button\n                        size=\"m\"\n                        ref={setAnchorElement}\n                        view={someActive || popupOpen ? 'normal' : 'flat'}\n                        selected={someActive}\n                        disabled={everyDisabled}\n                        className={b({arrow: withArrow}, [className])}\n                        onClick={() => {\n                            if (popupItem) setPopupItem(undefined);\n                            else toggleOpen();\n                        }}\n                    >\n                        {buttonContent}\n                    </Button>\n                </ActionTooltip>\n            </Popover>\n            <Popup anchorElement={anchorElement} open={popupOpen} onOpenChange={hide}>\n                <Menu size=\"l\" className={b('menu')}>\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                                    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"]}

package/build/esm/toolbar/const.js

@@ -3,3 +3,4 @@ export var ToolbarTooltipDelay;
     ToolbarTooltipDelay[ToolbarTooltipDelay["Open"] = 250] = "Open";
     ToolbarTooltipDelay[ToolbarTooltipDelay["Close"] = 150] = "Close";
 })(ToolbarTooltipDelay || (ToolbarTooltipDelay = {}));
+//# sourceMappingURL=const.js.map

package/build/esm/toolbar/const.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"const.js","sourceRoot":"../../../src","sources":["toolbar/const.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;IAC3B,+DAAU,CAAA;IACV,iEAAW,CAAA;AACf,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B","sourcesContent":["export enum ToolbarTooltipDelay {\n    Open = 250,\n    Close = 150,\n}\n"]}

package/build/esm/toolbar/flexible.d.ts

@@ -1,5 +1,5 @@
-import type { ToolbarData, ToolbarItemData } from './types';
-export declare type ShrinkToolbarDataParams<E> = {
+import type { ToolbarData, ToolbarItemData } from "./types.js";
+export type ShrinkToolbarDataParams<E> = {
     data: ToolbarData<E>;
     availableWidth: number;
     hiddenActions?: ToolbarItemData<E>[];

package/build/esm/toolbar/flexible.js

@@ -1,4 +1,4 @@
-import { ToolbarDataType } from './types';
+import { ToolbarDataType } from "./types.js";
 /** horizontal gap between item groups in toolbar, px */
 const H_GAP = 17;
 /** single button width, px */
@@ -64,3 +64,4 @@ function getItemWidth(item, i, j, rowLength) {
     else
         return (item.width || 0) + additionalWidth;
 }
+//# sourceMappingURL=flexible.js.map

package/build/esm/toolbar/flexible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flexible.js","sourceRoot":"../../../src","sources":["toolbar/flexible.tsx"],"names":[],"mappings":"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","sourcesContent":["import type {ToolbarData, ToolbarGroupData, ToolbarGroupItemData, ToolbarItemData} from './types';\nimport {ToolbarDataType} from './types';\n\n/** horizontal gap between item groups in toolbar, px */\nconst H_GAP = 17;\n/** single button width, px */\nconst B_WIDTH = 28;\n/** single button width with 2 icons – item's icon and arrow icon, px */\nconst B_WITH_ARROW_WIDTH = 42;\n/** horizontal gap between buttons in button group, px */\nconst BG_H_GAP = 2;\n/** dots button width, px */\nconst B_DOTS_WIDTH = B_WIDTH;\n/** dots button left margin, px */\nconst B_DOTS_LEFT_GAP = 8;\n\nconst dotsWidth = B_DOTS_LEFT_GAP + B_DOTS_WIDTH;\n\nexport type ShrinkToolbarDataParams<E> = {\n    data: ToolbarData<E>;\n    availableWidth: number;\n    hiddenActions?: ToolbarItemData<E>[];\n};\n\nexport function shrinkToolbarData<E>({\n    availableWidth,\n    data,\n    hiddenActions = [],\n}: ShrinkToolbarDataParams<E>): {\n    data: ToolbarData<E>;\n    dots?: ToolbarItemData<E>[];\n} {\n    const fittingData: ToolbarData<E> = [];\n    const dotsData: ToolbarItemData<E>[] = [];\n    let currentWidth = 0;\n\n    const lastGroupIndex = data.length - 1;\n    const isLastElement = (i: number, j: number) =>\n        i === lastGroupIndex && j === data[lastGroupIndex].length - 1;\n\n    let hideAllNext = false;\n\n    data.forEach((group, i) => {\n        const newGroup: ToolbarGroupData<E> = [];\n        group.forEach((item, j) => {\n            currentWidth += getItemWidth(item, i, j, group.length);\n\n            if (\n                hideAllNext ||\n                (!hiddenActions.length && isLastElement(i, j)\n                    ? // Hide last element only if it doesn't fit\n                      currentWidth > availableWidth\n                    : // Hide other elements if they don't fit counting dots button width\n                      currentWidth + dotsWidth > availableWidth)\n            ) {\n                // We found first button that doesn't fit. It means that everything after it doesn't fit too.\n                hideAllNext = true;\n                if (\n                    item.type === ToolbarDataType.SingleButton ||\n                    item.type === ToolbarDataType.ButtonPopup\n                ) {\n                    dotsData.push(item);\n                } else if (item.type === ToolbarDataType.ListButton) {\n                    dotsData.push(...item.data);\n                }\n            } else {\n                newGroup.push(group[j]);\n            }\n        });\n\n        if (newGroup.length) fittingData.push(newGroup);\n    });\n\n    dotsData.push(...hiddenActions);\n\n    return {data: fittingData, dots: dotsData.length ? dotsData : undefined};\n}\n\nfunction getItemWidth<E>(\n    item: ToolbarGroupItemData<E>,\n    i: number,\n    j: number,\n    rowLength: number,\n): number {\n    let additionalWidth = 0;\n\n    // Add horizontal gap between groups to the first item of all groups except first\n    if (i > 0 && j === 0) additionalWidth += H_GAP;\n\n    // Add horizontal gapbetween buttons to all items except first\n    if (j > 0 && j < rowLength) additionalWidth += BG_H_GAP;\n\n    if (item.type === ToolbarDataType.SingleButton || item.type === ToolbarDataType.ButtonPopup)\n        return B_WIDTH + additionalWidth;\n    else if (item.type === ToolbarDataType.ListButton) return B_WITH_ARROW_WIDTH + additionalWidth;\n    else return (item.width || 0) + additionalWidth;\n}\n"]}

package/build/esm/toolbar/index.d.ts

@@ -1,7 +1,7 @@
-export * from './const';
-export * from './types';
-export * from './Toolbar';
-export * from './ToolbarButton';
-export * from './ToolbarGroup';
-export * from './ToolbarListButton';
-export * from './FlexToolbar';
+export * from "./const.js";
+export * from "./types.js";
+export * from "./Toolbar.js";
+export * from "./ToolbarButton.js";
+export * from "./ToolbarGroup.js";
+export * from "./ToolbarListButton.js";
+export * from "./FlexToolbar.js";

package/build/esm/toolbar/index.js

@@ -1,7 +1,8 @@
-export * from './const';
-export * from './types';
-export * from './Toolbar';
-export * from './ToolbarButton';
-export * from './ToolbarGroup';
-export * from './ToolbarListButton';
-export * from './FlexToolbar';
+export * from "./const.js";
+export * from "./types.js";
+export * from "./Toolbar.js";
+export * from "./ToolbarButton.js";
+export * from "./ToolbarGroup.js";
+export * from "./ToolbarListButton.js";
+export * from "./FlexToolbar.js";
+//# sourceMappingURL=index.js.map

package/build/esm/toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../src","sources":["toolbar/index.ts"],"names":[],"mappings":"AAAA,2BAAwB;AACxB,2BAAwB;AACxB,6BAA0B;AAC1B,mCAAgC;AAChC,kCAA+B;AAC/B,uCAAoC;AACpC,iCAA8B","sourcesContent":["export * from './const';\nexport * from './types';\nexport * from './Toolbar';\nexport * from './ToolbarButton';\nexport * from './ToolbarGroup';\nexport * from './ToolbarListButton';\nexport * from './FlexToolbar';\n"]}