@cloud-ru/ds-markdown 1.0.20 → 1.0.21-preview-a42433ce.0

package/dist/cjs/components/Toolbar/Toolbar.js

@@ -8,7 +8,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const system_1 = require("@cloud-ru/ds-icons/interface/system");
 const list_1 = require("@cloud-ru/ds-list");
 const portal_context_1 = require("@cloud-ru/ds-portal-context");
-const tooltip_1 = require("@cloud-ru/ds-tooltip");
 const react_1 = require("react");
 const constants_1 = require("../../constants");
 const helperComponents_1 = require("../../helperComponents");
@@ -65,15 +64,20 @@ function Toolbar({ api, items }) {
                 } })),
             inactive: true,
         },
-        { type: 'group', content: '', divider: true },
         {
-            content: {
-                label: t('table.customize'),
-                className: styles_module_scss_1.default.tableCustomizeOption,
-            },
-            onClick: openCustomize,
-            afterContent: (0, jsx_runtime_1.jsx)(system_1.ChevronRightSVG, {}),
-            'data-test-id': constants_1.TEST_IDS.tableCustomize,
+            type: 'group',
+            divider: true,
+            items: [
+                {
+                    content: {
+                        label: t('table.customize'),
+                        className: styles_module_scss_1.default.tableCustomizeOption,
+                    },
+                    onClick: openCustomize,
+                    afterContent: (0, jsx_runtime_1.jsx)(system_1.ChevronRightSVG, {}),
+                    'data-test-id': constants_1.TEST_IDS.tableCustomize,
+                },
+            ],
         },
     ], [api, t, openCustomize]);
     const renderItem = (id) => {
@@ -169,5 +173,5 @@ function Toolbar({ api, items }) {
             },
         ];
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: styles_module_scss_1.default.root, children: [(0, jsx_runtime_1.jsxs)(helperComponents_1.Buttons, { children: [presentGroups.map((group, gi) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [gi > 0 && (0, jsx_runtime_1.jsx)(helperComponents_1.ButtonsDivider, {}), (0, jsx_runtime_1.jsx)(helperComponents_1.ButtonsGroup, { children: group.map(renderItem) })] }, `g-${gi}`))), overflowItems.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(helperComponents_1.ButtonsDivider, {}), (0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', container: portalContext, open: moreOpen, onOpenChange: setMoreOpen, placement: 'bottom-end', marker: false, items: moreItems, triggerElemRef: moreButtonRef, triggerClassName: styles_module_scss_1.default.tooltipTrigger, "data-test-id": constants_1.TEST_IDS.toolbarMoreList, children: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: t('toolbar.more'), triggerClassName: styles_module_scss_1.default.tooltipTrigger, children: (0, jsx_runtime_1.jsx)(helperComponents_1.PrivateButton, { icon: (0, jsx_runtime_1.jsx)(system_1.MoreSVG, {}), "data-test-id": constants_1.TEST_IDS.toolbarMore, "aria-label": t('toolbar.more'), "aria-haspopup": 'menu', "aria-expanded": moreOpen }) }) })] }))] }), (0, jsx_runtime_1.jsx)(helperComponents_1.CustomizeTableModal, { open: toolbarItemModal === 'table', onClose: closeToolbarItemModal, onSubmit: handleSubmitCustomizeTable }), (0, jsx_runtime_1.jsx)(helperComponents_1.LinkModal, { open: toolbarItemModal === 'link', initial: linkInitial, onClose: closeToolbarItemModal, onSubmit: handleLinkSubmit }), (0, jsx_runtime_1.jsx)(helperComponents_1.ImageModal, { open: toolbarItemModal === 'image', onClose: closeToolbarItemModal, onSubmit: handleImageSubmit })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: styles_module_scss_1.default.root, children: [(0, jsx_runtime_1.jsxs)(helperComponents_1.Buttons, { children: [presentGroups.map((group, gi) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [gi > 0 && (0, jsx_runtime_1.jsx)(helperComponents_1.ButtonsDivider, {}), (0, jsx_runtime_1.jsx)(helperComponents_1.ButtonsGroup, { children: group.map(renderItem) })] }, `g-${gi}`))), overflowItems.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(helperComponents_1.ButtonsDivider, {}), (0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', container: portalContext, open: moreOpen, onOpenChange: setMoreOpen, placement: 'bottom-end', marker: false, items: moreItems, triggerElemRef: moreButtonRef, triggerClassName: styles_module_scss_1.default.tooltipTrigger, "data-test-id": constants_1.TEST_IDS.toolbarMoreList, children: (0, jsx_runtime_1.jsx)(helperComponents_1.PrivateButton, { icon: (0, jsx_runtime_1.jsx)(system_1.MoreSVG, {}), tip: { title: t('toolbar.more') }, "data-test-id": constants_1.TEST_IDS.toolbarMore, "aria-label": t('toolbar.more'), "aria-haspopup": 'menu', "aria-expanded": moreOpen }) })] }))] }), (0, jsx_runtime_1.jsx)(helperComponents_1.CustomizeTableModal, { open: toolbarItemModal === 'table', onClose: closeToolbarItemModal, onSubmit: handleSubmitCustomizeTable }), (0, jsx_runtime_1.jsx)(helperComponents_1.LinkModal, { open: toolbarItemModal === 'link', initial: linkInitial, onClose: closeToolbarItemModal, onSubmit: handleLinkSubmit }), (0, jsx_runtime_1.jsx)(helperComponents_1.ImageModal, { open: toolbarItemModal === 'image', onClose: closeToolbarItemModal, onSubmit: handleImageSubmit })] }));
 }

package/dist/cjs/helperComponents/TableSelectItem/TableSelectItem.d.ts

@@ -1,11 +1,12 @@
+import { PointerEvent } from 'react';
 export type TableSelectItemProps = {
-    /** Hover-состояние (управляется родителем по mouseEnter). */
+    /** Hover-состояние (управляется родителем по pointerEnter). */
     hovered?: boolean;
     /** Будет ли ячейка попадать в выбранный диапазон. */
     checked?: boolean;
-    onMouseEnter?(): void;
+    onPointerEnter?(event: PointerEvent<HTMLButtonElement>): void;
     onClick?(): void;
     'aria-label'?: string;
     'data-test-id'?: string;
 };
-export declare function TableSelectItem({ hovered, checked, onMouseEnter, onClick, 'aria-label': ariaLabel, 'data-test-id': dataTestId, }: TableSelectItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableSelectItem({ hovered, checked, onPointerEnter, onClick, 'aria-label': ariaLabel, 'data-test-id': dataTestId, }: TableSelectItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/TableSelectItem/TableSelectItem.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableSelectItem = TableSelectItem;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function TableSelectItem({ hovered = false, checked = false, onMouseEnter, onClick, 'aria-label': ariaLabel, 'data-test-id': dataTestId, }) {
+function TableSelectItem({ hovered = false, checked = false, onPointerEnter, onClick, 'aria-label': ariaLabel, 'data-test-id': dataTestId, }) {
     const state = hovered ? 'hovered' : 'default';
-    return ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: styles_module_scss_1.default.root, "data-state": state, "data-checked": checked || undefined, onMouseEnter: onMouseEnter, onClick: onClick, "aria-label": ariaLabel, "data-test-id": dataTestId, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "data-state": checked ? 'activatedOnBackground' : 'emptyNeutralOnBackground', "aria-hidden": true }) }));
+    return ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: styles_module_scss_1.default.root, "data-state": state, "data-checked": checked || undefined, onPointerEnter: onPointerEnter, onClick: onClick, "aria-label": ariaLabel, "data-test-id": dataTestId, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "data-state": checked ? 'activatedOnBackground' : 'emptyNeutralOnBackground', "aria-hidden": true }) }));
 }

package/dist/cjs/helperComponents/TableSelectSettingsGrid/TableSelectSettingsGrid.js

@@ -14,14 +14,19 @@ const MAX = 8;
 function TableSelectSettingsGrid({ onPick }) {
     const { t } = locale_1.markdownLocale.useTranslations();
     const [hover, setHover] = (0, react_1.useState)(null);
+    const handleCellPointerEnter = (event, cell) => {
+        // iOS Safari не отправляет click по тапу, если hover меняет разметку.
+        if (event.pointerType === 'mouse')
+            setHover(cell);
+    };
     const cells = [];
     for (let r = 1; r <= MAX; r += 1) {
         for (let c = 1; c <= MAX; c += 1) {
             cells.push({ r, c });
         }
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.TEST_IDS.tableGridPicker, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.grid, onMouseLeave: () => setHover(null), children: cells.map(({ r, c }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.TEST_IDS.tableGridPicker, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.grid, onPointerLeave: () => setHover(null), children: cells.map(({ r, c }) => {
                         const checked = hover !== null && r <= hover.r && c <= hover.c;
-                        return ((0, jsx_runtime_1.jsx)(TableSelectItem_1.TableSelectItem, { hovered: hover?.r === r && hover?.c === c, checked: checked, onMouseEnter: () => setHover({ r, c }), onClick: () => onPick(r, c), "aria-label": t('table.insert', { rows: r, cols: c }), "data-test-id": (0, constants_1.tableCellTestId)(r, c) }, `${r}-${c}`));
+                        return ((0, jsx_runtime_1.jsx)(TableSelectItem_1.TableSelectItem, { hovered: hover?.r === r && hover?.c === c, checked: checked, onPointerEnter: event => handleCellPointerEnter(event, { r, c }), onClick: () => onPick(r, c), "aria-label": t('table.insert', { rows: r, cols: c }), "data-test-id": (0, constants_1.tableCellTestId)(r, c) }, `${r}-${c}`));
                     }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.label, children: hover ? `${hover.r} × ${hover.c}` : t('table.pickSize') })] }) }));
 }

package/dist/esm/components/Toolbar/Toolbar.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ChevronRightSVG, MoreSVG } from '@cloud-ru/ds-icons/interface/system';
 import { Droplist } from '@cloud-ru/ds-list';
 import { usePortalContext } from '@cloud-ru/ds-portal-context';
-import { Tooltip } from '@cloud-ru/ds-tooltip';
 import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { TEST_IDS, TOOLBAR_ITEM, toolbarButtonTestId } from '../../constants.js';
 import { ButtonHeading, Buttons, ButtonsDivider, ButtonsGroup, CustomizeTableModal, ImageModal, LinkModal, PrivateButton, TableSelectSettingsGrid, } from '../../helperComponents/index.js';
@@ -59,15 +58,20 @@ export function Toolbar({ api, items }) {
                 } })),
             inactive: true,
         },
-        { type: 'group', content: '', divider: true },
         {
-            content: {
-                label: t('table.customize'),
-                className: styles.tableCustomizeOption,
-            },
-            onClick: openCustomize,
-            afterContent: _jsx(ChevronRightSVG, {}),
-            'data-test-id': TEST_IDS.tableCustomize,
+            type: 'group',
+            divider: true,
+            items: [
+                {
+                    content: {
+                        label: t('table.customize'),
+                        className: styles.tableCustomizeOption,
+                    },
+                    onClick: openCustomize,
+                    afterContent: _jsx(ChevronRightSVG, {}),
+                    'data-test-id': TEST_IDS.tableCustomize,
+                },
+            ],
         },
     ], [api, t, openCustomize]);
     const renderItem = (id) => {
@@ -163,5 +167,5 @@ export function Toolbar({ api, items }) {
             },
         ];
     });
-    return (_jsxs("div", { ref: rootRef, className: styles.root, children: [_jsxs(Buttons, { children: [presentGroups.map((group, gi) => (_jsxs(Fragment, { children: [gi > 0 && _jsx(ButtonsDivider, {}), _jsx(ButtonsGroup, { children: group.map(renderItem) })] }, `g-${gi}`))), overflowItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(ButtonsDivider, {}), _jsx(Droplist, { size: 'm', container: portalContext, open: moreOpen, onOpenChange: setMoreOpen, placement: 'bottom-end', marker: false, items: moreItems, triggerElemRef: moreButtonRef, triggerClassName: styles.tooltipTrigger, "data-test-id": TEST_IDS.toolbarMoreList, children: _jsx(Tooltip, { tip: t('toolbar.more'), triggerClassName: styles.tooltipTrigger, children: _jsx(PrivateButton, { icon: _jsx(MoreSVG, {}), "data-test-id": TEST_IDS.toolbarMore, "aria-label": t('toolbar.more'), "aria-haspopup": 'menu', "aria-expanded": moreOpen }) }) })] }))] }), _jsx(CustomizeTableModal, { open: toolbarItemModal === 'table', onClose: closeToolbarItemModal, onSubmit: handleSubmitCustomizeTable }), _jsx(LinkModal, { open: toolbarItemModal === 'link', initial: linkInitial, onClose: closeToolbarItemModal, onSubmit: handleLinkSubmit }), _jsx(ImageModal, { open: toolbarItemModal === 'image', onClose: closeToolbarItemModal, onSubmit: handleImageSubmit })] }));
+    return (_jsxs("div", { ref: rootRef, className: styles.root, children: [_jsxs(Buttons, { children: [presentGroups.map((group, gi) => (_jsxs(Fragment, { children: [gi > 0 && _jsx(ButtonsDivider, {}), _jsx(ButtonsGroup, { children: group.map(renderItem) })] }, `g-${gi}`))), overflowItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(ButtonsDivider, {}), _jsx(Droplist, { size: 'm', container: portalContext, open: moreOpen, onOpenChange: setMoreOpen, placement: 'bottom-end', marker: false, items: moreItems, triggerElemRef: moreButtonRef, triggerClassName: styles.tooltipTrigger, "data-test-id": TEST_IDS.toolbarMoreList, children: _jsx(PrivateButton, { icon: _jsx(MoreSVG, {}), tip: { title: t('toolbar.more') }, "data-test-id": TEST_IDS.toolbarMore, "aria-label": t('toolbar.more'), "aria-haspopup": 'menu', "aria-expanded": moreOpen }) })] }))] }), _jsx(CustomizeTableModal, { open: toolbarItemModal === 'table', onClose: closeToolbarItemModal, onSubmit: handleSubmitCustomizeTable }), _jsx(LinkModal, { open: toolbarItemModal === 'link', initial: linkInitial, onClose: closeToolbarItemModal, onSubmit: handleLinkSubmit }), _jsx(ImageModal, { open: toolbarItemModal === 'image', onClose: closeToolbarItemModal, onSubmit: handleImageSubmit })] }));
 }

package/dist/esm/helperComponents/TableSelectItem/TableSelectItem.d.ts

@@ -1,11 +1,12 @@
+import { PointerEvent } from 'react';
 export type TableSelectItemProps = {
-    /** Hover-состояние (управляется родителем по mouseEnter). */
+    /** Hover-состояние (управляется родителем по pointerEnter). */
     hovered?: boolean;
     /** Будет ли ячейка попадать в выбранный диапазон. */
     checked?: boolean;
-    onMouseEnter?(): void;
+    onPointerEnter?(event: PointerEvent<HTMLButtonElement>): void;
     onClick?(): void;
     'aria-label'?: string;
     'data-test-id'?: string;
 };
-export declare function TableSelectItem({ hovered, checked, onMouseEnter, onClick, 'aria-label': ariaLabel, 'data-test-id': dataTestId, }: TableSelectItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableSelectItem({ hovered, checked, onPointerEnter, onClick, 'aria-label': ariaLabel, 'data-test-id': dataTestId, }: TableSelectItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/TableSelectItem/TableSelectItem.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from './styles.module.css';
-export function TableSelectItem({ hovered = false, checked = false, onMouseEnter, onClick, 'aria-label': ariaLabel, 'data-test-id': dataTestId, }) {
+export function TableSelectItem({ hovered = false, checked = false, onPointerEnter, onClick, 'aria-label': ariaLabel, 'data-test-id': dataTestId, }) {
     const state = hovered ? 'hovered' : 'default';
-    return (_jsx("button", { type: 'button', className: styles.root, "data-state": state, "data-checked": checked || undefined, onMouseEnter: onMouseEnter, onClick: onClick, "aria-label": ariaLabel, "data-test-id": dataTestId, children: _jsx("span", { className: styles.stateLayer, "data-state": checked ? 'activatedOnBackground' : 'emptyNeutralOnBackground', "aria-hidden": true }) }));
+    return (_jsx("button", { type: 'button', className: styles.root, "data-state": state, "data-checked": checked || undefined, onPointerEnter: onPointerEnter, onClick: onClick, "aria-label": ariaLabel, "data-test-id": dataTestId, children: _jsx("span", { className: styles.stateLayer, "data-state": checked ? 'activatedOnBackground' : 'emptyNeutralOnBackground', "aria-hidden": true }) }));
 }

package/dist/esm/helperComponents/TableSelectSettingsGrid/TableSelectSettingsGrid.js

@@ -8,14 +8,19 @@ const MAX = 8;
 export function TableSelectSettingsGrid({ onPick }) {
     const { t } = markdownLocale.useTranslations();
     const [hover, setHover] = useState(null);
+    const handleCellPointerEnter = (event, cell) => {
+        // iOS Safari не отправляет click по тапу, если hover меняет разметку.
+        if (event.pointerType === 'mouse')
+            setHover(cell);
+    };
     const cells = [];
     for (let r = 1; r <= MAX; r += 1) {
         for (let c = 1; c <= MAX; c += 1) {
             cells.push({ r, c });
         }
     }
-    return (_jsx("div", { className: styles.root, "data-test-id": TEST_IDS.tableGridPicker, children: _jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.grid, onMouseLeave: () => setHover(null), children: cells.map(({ r, c }) => {
+    return (_jsx("div", { className: styles.root, "data-test-id": TEST_IDS.tableGridPicker, children: _jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.grid, onPointerLeave: () => setHover(null), children: cells.map(({ r, c }) => {
                         const checked = hover !== null && r <= hover.r && c <= hover.c;
-                        return (_jsx(TableSelectItem, { hovered: hover?.r === r && hover?.c === c, checked: checked, onMouseEnter: () => setHover({ r, c }), onClick: () => onPick(r, c), "aria-label": t('table.insert', { rows: r, cols: c }), "data-test-id": tableCellTestId(r, c) }, `${r}-${c}`));
+                        return (_jsx(TableSelectItem, { hovered: hover?.r === r && hover?.c === c, checked: checked, onPointerEnter: event => handleCellPointerEnter(event, { r, c }), onClick: () => onPick(r, c), "aria-label": t('table.insert', { rows: r, cols: c }), "data-test-id": tableCellTestId(r, c) }, `${r}-${c}`));
                     }) }), _jsx("div", { className: styles.label, children: hover ? `${hover.r} × ${hover.c}` : t('table.pickSize') })] }) }));
 }