@cloud-ru/ds-markdown 1.0.21 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-markdown",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "Просмотр и редактирование markdown — рендер GFM и WYSIWYG-редактор на TipTap.",
   "repository": {
     "type": "git",
@@ -62,20 +62,20 @@
     "rehype-highlight": "^7.0.2",
     "remark-gfm": "^4.0.1",
     "unified": "^11.0.5",
-    "@cloud-ru/ds-button": "^1.0.2",
     "@cloud-ru/ds-divider": "^1.0.1",
-    "@cloud-ru/ds-fields": "^2.2.3",
+    "@cloud-ru/ds-fields": "^2.2.4",
     "@cloud-ru/ds-icons": "^1.1.0",
-    "@cloud-ru/ds-list": "^2.1.3",
-    "@cloud-ru/ds-locale": "^1.0.0",
-    "@cloud-ru/ds-materials": "^1.0.1",
+    "@cloud-ru/ds-button": "^1.0.2",
     "@cloud-ru/ds-modal": "^1.1.1",
+    "@cloud-ru/ds-list": "^2.1.4",
+    "@cloud-ru/ds-materials": "^1.0.1",
+    "@cloud-ru/ds-scroll": "^1.0.2",
     "@cloud-ru/ds-portal-context": "^1.0.1",
+    "@cloud-ru/ds-locale": "^1.0.0",
     "@cloud-ru/ds-toggles": "^1.1.3",
-    "@cloud-ru/ds-scroll": "^1.0.2",
+    "@cloud-ru/ds-typography": "^1.0.0",
     "@cloud-ru/ds-tooltip": "^1.0.4",
-    "@cloud-ru/ds-utils": "^1.1.0",
-    "@cloud-ru/ds-typography": "^1.0.0"
+    "@cloud-ru/ds-utils": "^1.1.0"
   },
   "devDependencies": {
     "sass": "1.102.0",

package/src/components/Toolbar/Toolbar.tsx

@@ -1,7 +1,6 @@
 import { ChevronRightSVG, MoreSVG } from '@cloud-ru/ds-icons/interface/system';
 import { Droplist, DroplistProps, ItemProps } 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';
@@ -96,15 +95,20 @@ export function Toolbar({ api, items }: ToolbarProps) {
         ),
         inactive: true,
       },
-      { type: 'group', content: '', divider: true },
       {
-        content: {
-          label: t('table.customize'),
-          className: styles.tableCustomizeOption,
-        },
-        onClick: openCustomize,
-        afterContent: <ChevronRightSVG />,
-        'data-test-id': TEST_IDS.tableCustomize,
+        type: 'group',
+        divider: true,
+        items: [
+          {
+            content: {
+              label: t('table.customize'),
+              className: styles.tableCustomizeOption,
+            },
+            onClick: openCustomize,
+            afterContent: <ChevronRightSVG />,
+            'data-test-id': TEST_IDS.tableCustomize,
+          },
+        ],
       },
     ],
     [api, t, openCustomize],
@@ -259,15 +263,14 @@ export function Toolbar({ api, items }: ToolbarProps) {
               triggerClassName={styles.tooltipTrigger}
               data-test-id={TEST_IDS.toolbarMoreList}
             >
-              <Tooltip tip={t('toolbar.more')} triggerClassName={styles.tooltipTrigger}>
-                <PrivateButton
-                  icon={<MoreSVG />}
-                  data-test-id={TEST_IDS.toolbarMore}
-                  aria-label={t('toolbar.more')}
-                  aria-haspopup='menu'
-                  aria-expanded={moreOpen}
-                />
-              </Tooltip>
+              <PrivateButton
+                icon={<MoreSVG />}
+                tip={{ title: t('toolbar.more') }}
+                data-test-id={TEST_IDS.toolbarMore}
+                aria-label={t('toolbar.more')}
+                aria-haspopup='menu'
+                aria-expanded={moreOpen}
+              />
             </Droplist>
           </>
         )}

package/src/helperComponents/TableSelectItem/TableSelectItem.tsx

@@ -1,12 +1,14 @@
+import { PointerEvent } from 'react';
+
 import styles from './styles.module.scss';
 
 // Одна ячейка из grid-picker'а.
 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;
@@ -15,7 +17,7 @@ export type TableSelectItemProps = {
 export function TableSelectItem({
   hovered = false,
   checked = false,
-  onMouseEnter,
+  onPointerEnter,
   onClick,
   'aria-label': ariaLabel,
   'data-test-id': dataTestId,
@@ -28,7 +30,7 @@ export function TableSelectItem({
       className={styles.root}
       data-state={state}
       data-checked={checked || undefined}
-      onMouseEnter={onMouseEnter}
+      onPointerEnter={onPointerEnter}
       onClick={onClick}
       aria-label={ariaLabel}
       data-test-id={dataTestId}

package/src/helperComponents/TableSelectSettingsGrid/TableSelectSettingsGrid.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { PointerEvent, useState } from 'react';
 
 import { tableCellTestId, TEST_IDS } from '../../constants';
 import { markdownLocale } from '../../locale';
@@ -11,11 +11,18 @@ export type TableSelectSettingsGridProps = {
 
 const MAX = 8;
 
+type Cell = { r: number; c: number };
+
 export function TableSelectSettingsGrid({ onPick }: TableSelectSettingsGridProps) {
   const { t } = markdownLocale.useTranslations();
-  const [hover, setHover] = useState<{ r: number; c: number } | null>(null);
+  const [hover, setHover] = useState<Cell | null>(null);
+
+  const handleCellPointerEnter = (event: PointerEvent<HTMLButtonElement>, cell: Cell) => {
+    // iOS Safari не отправляет click по тапу, если hover меняет разметку.
+    if (event.pointerType === 'mouse') setHover(cell);
+  };
 
-  const cells: { r: number; c: number }[] = [];
+  const cells: Cell[] = [];
   for (let r = 1; r <= MAX; r += 1) {
     for (let c = 1; c <= MAX; c += 1) {
       cells.push({ r, c });
@@ -25,7 +32,7 @@ export function TableSelectSettingsGrid({ onPick }: TableSelectSettingsGridProps
   return (
     <div className={styles.root} data-test-id={TEST_IDS.tableGridPicker}>
       <div className={styles.container}>
-        <div className={styles.grid} onMouseLeave={() => setHover(null)}>
+        <div className={styles.grid} onPointerLeave={() => setHover(null)}>
           {cells.map(({ r, c }) => {
             const checked = hover !== null && r <= hover.r && c <= hover.c;
             return (
@@ -33,7 +40,7 @@ export function TableSelectSettingsGrid({ onPick }: TableSelectSettingsGridProps
                 key={`${r}-${c}`}
                 hovered={hover?.r === r && hover?.c === c}
                 checked={checked}
-                onMouseEnter={() => setHover({ r, c })}
+                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)}