Удалена Lerna

- @advdominion/tooltip@7.1.1

.yarnrc.yml

@@ -4,8 +4,5 @@ packageExtensions:
   '@advdominion/stylelint-config@*':
     dependencies:
       stylelint: '*'
-  lerna@*:
-    dependencies:
-      ci-info: '*'
 
 yarnPath: .yarn/releases/yarn-4.18.0.cjs

README.md

@@ -8,8 +8,18 @@
 
 ## Публикация новых версий
 
+1. Вручную поднять `version` в `packages/<пакет>/package.json`
+2. Опубликовать пакет:
+
 ```bash
-yarn lerna publish
+yarn workspace @advdominion/<пакет> npm publish
+```
+
+3. Поставить git-тег:
+
+```bash
+git tag @advdominion/<пакет>@<версия>
+git push origin @advdominion/<пакет>@<версия>
 ```
 
 ## Обновление зависимостей

lerna.json

@@ -1,4 +0,0 @@
-{
-  "version": "independent",
-  "npmClient": "yarn"
-}

package.json

@@ -10,7 +10,6 @@
   },
   "devDependencies": {
     "husky": "^9.1.7",
-    "lerna": "^10.0.1",
     "lint-staged": "^17.5.1",
     "oxfmt": "^0.70.0",
     "oxlint": "^1.85.0"

packages/tooltip/CHANGELOG.md

@@ -1,13 +1,21 @@
+## v7.1.1
+
+- Позиция при прокрутке обновляется без принудительного reflow: все измерения геометрии выполняются до записи стилей
+- Массив middleware собирается один раз и переиспользуется между кадрами (сбрасывается при смене `offset`, `shiftPadding`, `arrow`)
+- Классы и стили, зависящие от стороны размещения, применяются только при её смене
+- `@floating-ui/dom` подгружается одним динамическим импортом вместо двух
+- В пример базовых стилей добавлен `will-change: transform` — выносит подсказку на отдельный слой и убирает рывки при прокрутке
+
 ## v7.1.0
 
 - Опция `arrow` теперь принимает объект: `active`, `centered`, `padding` (булево значение по-прежнему поддерживается)
 - Добавлено поле `arrow.centered` — фиксирует стрелку по центру всплывающей подсказки, чтобы она не смещалась при прокрутке
-- Рассчитываем `padding` стрелки автоматически, чтобы её повёрнутые углы не выходили за границы всплывающей подсказки
+- Автоматически рассчитываем `padding` стрелки, чтобы её повёрнутые углы не выходили за границы всплывающей подсказки
 - `arrow` теперь корректно применяется через `updateOptions` — и до первого показа, и с уже показанной подсказкой (включение/выключение стрелки на лету)
-- `updateOptions({ interactive })` больше не отключает скрытие подсказки по клику вне её
+- Исправлено: `updateOptions({ interactive })` больше не снимает обработчик скрытия по клику вне подсказки (раньше он попадал в общий список слушателей, который очищался при обновлении `interactive`)
 - Устранены гонки при вызове `show`/`hide` подряд: устаревшие асинхронные операции отменяются
-- `autoUpdate` теперь следит за виртуальным элементом (`virtualReference`)
-- `onCreate` вызывается после инициализации методов, поэтому `show`/`hide` доступны внутри него
+- `autoUpdate` теперь следит за тем же опорным элементом, что и позиционирование, поэтому при `virtualReference` подсказка продолжает обновляться при прокрутке
+- `onCreate` вызывается в самом конце инициализации — раньше внутри него ещё не были доступны `show()`/`hide()`, теперь их можно вызывать прямо в `onCreate`
 
 ## v7.0.1
 
@@ -20,12 +28,12 @@
 
 ## v6.0.0
 
-- Корректная работа сообытий mouseenter/mouseleave на тач-устройствах
-- Предовтращаем лишние показы всплывающей подсказки
+- Корректная работа с событиями mouseenter/mouseleave на тач-устройствах
+- Предотвращаем лишние показы всплывающей подсказки
 
 ## v5.0.0
 
-- Регистрируем сообытия mouseenter/mouseleave на тач-устройствах
+- Регистрируем события mouseenter/mouseleave на тач-устройствах
 
 ## v4.1.1
 
@@ -33,7 +41,7 @@
 
 ## v4.1.0
 
-- Отключаем события mouseenter/mouseleave для toch-устройств
+- Отключаем события mouseenter/mouseleave для touch-устройств
 
 ## v4.0.0
 
@@ -58,11 +66,11 @@
 ## v2.0.0
 
 - К `_tooltip.$tooltip` добавлено свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`
-- Для функций `show/hide` добавлен параметр `immediately` для мнгновенного открытия/закрытия всплывающей подсказки (`_tooltip.hide({ immediately: true })`)
+- Для функций `show/hide` добавлен параметр `immediately` для мгновенного открытия/закрытия всплывающей подсказки (`_tooltip.hide({ immediately: true })`)
 - Добавлена опция `shiftPadding` для добавления отступов от краёв области видимости по осям x/y
 - Добавлена опция `animation` для кастомизации анимации при открытии/закрытии всплывающей подсказки (для этого всё внутри `.tooltip` было обёрнуто в `.tooltip__root` и анимация применяется именно к этому блоку)
 - Опция `_tooltip._options` переименована в `_tooltip.options`
-- Оптимизция кода, исправление ошибок
+- Оптимизация кода, исправление ошибок
 - Доработки по README.md
 - Доработки по .npmignore
 

packages/tooltip/README.md

@@ -170,6 +170,7 @@ $b: '.tooltip';
     position: absolute;
     top: 0;
     width: max-content;
+    will-change: transform;
     z-index: 200;
 
     @media (min-width: 900px) {

packages/tooltip/index.js

@@ -145,6 +145,8 @@ export const createTooltip = ($el, initialContent, initialOptions) => {
         if (options.arrow.active && !$el._tooltip.$arrow && $el._tooltip.$tooltip) {
             $el._tooltip.$tooltip.querySelector('.tooltip__root').insertAdjacentHTML('afterbegin', templates.arrow());
             $el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
+            // Со стрелкой набор middleware другой
+            $el._tooltip._middleware = undefined;
         }
     };
 
@@ -152,6 +154,7 @@ export const createTooltip = ($el, initialContent, initialOptions) => {
     const unmountArrow = () => {
         $el._tooltip.$arrow?.remove();
         $el._tooltip.$arrow = undefined;
+        $el._tooltip._middleware = undefined;
     };
 
     $el._tooltip = {
@@ -161,6 +164,9 @@ export const createTooltip = ($el, initialContent, initialOptions) => {
         $container: undefined,
         $arrow: undefined,
         $interactive: undefined,
+        // Кэши позиционирования
+        _side: undefined,
+        _middleware: undefined,
         _showTimeout: undefined,
         _hideTimeout: undefined,
         _currentAnimation: undefined,
@@ -196,6 +202,21 @@ export const createTooltip = ($el, initialContent, initialOptions) => {
                 options[name] = value;
             }
 
+            if (
+                updatedOptions.offset !== undefined ||
+                updatedOptions.shiftPadding !== undefined ||
+                updatedOptions.arrow !== undefined
+            ) {
+                $el._tooltip._middleware = undefined;
+            }
+            if (
+                updatedOptions.placement !== undefined ||
+                updatedOptions.offset !== undefined ||
+                updatedOptions.interactive !== undefined
+            ) {
+                $el._tooltip._side = undefined;
+            }
+
             if (updatedOptions.arrow !== undefined) {
                 /*
                     Опция могла прийти булевым значением — приводим к единому виду.
@@ -287,13 +308,13 @@ export const createTooltip = ($el, initialContent, initialOptions) => {
         $el._tooltip._generation += 1;
         const generation = $el._tooltip._generation;
 
+        const { computePosition, autoUpdate, offset, flip, shift, arrow } = await import('@floating-ui/dom');
+
+        if (generation !== $el._tooltip._generation) {
+            return;
+        }
+
         if (!$el._tooltip.$tooltip) {
-            const { computePosition, offset, flip, shift, arrow } = await import('@floating-ui/dom');
-
-            if (generation !== $el._tooltip._generation) {
-                return;
-            }
-
             $el._tooltip.$tooltip = document.createElement('div');
             $el._tooltip.$tooltip._reference = $el;
             $el._tooltip.$tooltip.classList.add('tooltip', `tooltip_theme_${options.theme}`);
@@ -312,38 +333,50 @@ export const createTooltip = ($el, initialContent, initialOptions) => {
             $el._tooltip.setContent();
             mountArrow();
 
+            const buildMiddleware = () => {
+                const arrowSize = $el._tooltip.$arrow?.offsetWidth ?? 0;
+                return [
+                    offset({ mainAxis: options.offset[1], crossAxis: options.offset[0] }),
+                    flip(),
+                    shift({
+                        padding: {
+                            top: options.shiftPadding[1],
+                            right: options.shiftPadding[0],
+                            bottom: options.shiftPadding[1],
+                            left: options.shiftPadding[0],
+                        },
+                    }),
+                    arrow({
+                        element: $el._tooltip.$arrow,
+                        /*
+                            Отступ стрелки от краёв подсказки. По умолчанию считаем из размера стрелки:
+                            квадрат со стороной size, повёрнутый на 45°, выступает за свою рамку
+                            на (√2 − 1) / 2 · size — это не даёт его углам вылезать за границы.
+                            Можно задать вручную через arrow.padding
+                        */
+                        padding: options.arrow.padding ?? Math.ceil(((Math.SQRT2 - 1) / 2) * arrowSize),
+                    }),
+                ];
+            };
+
             $el._tooltip.updatePosition = () => {
                 cancelAnimationFrame(rafId);
                 rafId = requestAnimationFrame(async () => {
+                    /*
+                        Все чтения геометрии делаем до первой записи стилей, иначе браузер
+                        вынужден делать принудительный reflow на каждом кадре прокрутки
+                    */
+                    const tooltipWidth = $el._tooltip.$tooltip.offsetWidth;
+                    const tooltipHeight = $el._tooltip.$tooltip.offsetHeight;
+                    const arrowWidth = $el._tooltip.$arrow?.offsetWidth ?? 0;
+                    const arrowHeight = $el._tooltip.$arrow?.offsetHeight ?? 0;
+
                     const { x, y, placement, middlewareData } = await computePosition(
                         options.virtualReference ?? $el,
                         $el._tooltip.$tooltip,
                         {
                             placement: options.placement,
-                            middleware: [
-                                offset({ mainAxis: options.offset[1], crossAxis: options.offset[0] }),
-                                flip(),
-                                shift({
-                                    padding: {
-                                        top: options.shiftPadding[1],
-                                        right: options.shiftPadding[0],
-                                        bottom: options.shiftPadding[1],
-                                        left: options.shiftPadding[0],
-                                    },
-                                }),
-                                arrow({
-                                    element: $el._tooltip.$arrow,
-                                    /*
-                                        Отступ стрелки от краёв подсказки. По умолчанию считаем из размера стрелки:
-                                        квадрат со стороной size, повёрнутый на 45°, выступает за свою рамку
-                                        на (√2 − 1) / 2 · size — это не даёт его углам вылезать за границы.
-                                        Можно задать вручную через arrow.padding
-                                    */
-                                    padding:
-                                        options.arrow.padding ??
-                                        Math.ceil(((Math.SQRT2 - 1) / 2) * ($el._tooltip.$arrow?.offsetWidth ?? 0)),
-                                }),
-                            ],
+                            middleware: ($el._tooltip._middleware ??= buildMiddleware()),
                         },
                     );
 
@@ -354,20 +387,25 @@ export const createTooltip = ($el, initialContent, initialOptions) => {
                     const side = placement.split('-')[0];
                     const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[side];
 
-                    $el._tooltip.$tooltip.classList.remove(
-                        'tooltip_side_top',
-                        'tooltip_side_bottom',
-                        'tooltip_side_left',
-                        'tooltip_side_right',
-                    );
-                    $el._tooltip.$tooltip.classList.add(`tooltip_side_${side}`);
+                    // Стили стороны применяем только при её смене
+                    if (side !== $el._tooltip._side) {
+                        $el._tooltip._side = side;
 
-                    if ($el._tooltip.$interactive) {
-                        Object.assign($el._tooltip.$interactive.style, {
-                            width: side === 'left' || side === 'right' ? `${options.offset[1]}px` : '100%',
-                            height: side === 'top' || side === 'bottom' ? `${options.offset[1]}px` : '100%',
-                            [staticSide]: `-${options.offset[1]}px`,
-                        });
+                        $el._tooltip.$tooltip.classList.remove(
+                            'tooltip_side_top',
+                            'tooltip_side_bottom',
+                            'tooltip_side_left',
+                            'tooltip_side_right',
+                        );
+                        $el._tooltip.$tooltip.classList.add(`tooltip_side_${side}`);
+
+                        if ($el._tooltip.$interactive) {
+                            Object.assign($el._tooltip.$interactive.style, {
+                                width: side === 'left' || side === 'right' ? `${options.offset[1]}px` : '100%',
+                                height: side === 'top' || side === 'bottom' ? `${options.offset[1]}px` : '100%',
+                                [staticSide]: `-${options.offset[1]}px`,
+                            });
+                        }
                     }
 
                     if ($el._tooltip.$arrow && middlewareData.arrow) {
@@ -382,16 +420,16 @@ export const createTooltip = ($el, initialContent, initialOptions) => {
                         */
                         if (options.arrow.centered) {
                             if (side === 'left' || side === 'right') {
-                                y = ($el._tooltip.$tooltip.offsetHeight - $arrow.offsetHeight) / 2;
+                                y = (tooltipHeight - arrowHeight) / 2;
                             } else {
-                                x = ($el._tooltip.$tooltip.offsetWidth - $arrow.offsetWidth) / 2;
+                                x = (tooltipWidth - arrowWidth) / 2;
                             }
                         }
 
                         Object.assign($arrow.style, {
                             left: x === undefined ? '' : `${x}px`,
                             top: y === undefined ? '' : `${y}px`,
-                            [staticSide]: `-${$arrow.offsetWidth / 2}px`,
+                            [staticSide]: `-${arrowWidth / 2}px`,
                         });
                     }
                 });
@@ -402,12 +440,6 @@ export const createTooltip = ($el, initialContent, initialOptions) => {
             }
         }
 
-        const { autoUpdate } = await import('@floating-ui/dom');
-
-        if (generation !== $el._tooltip._generation) {
-            return;
-        }
-
         $el._tooltip._showTimeout = setTimeout(
             async () => {
                 if (generation !== $el._tooltip._generation) {

packages/tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@advdominion/tooltip",
-  "version": "7.1.0",
+  "version": "7.1.1",
   "type": "module",
   "main": "index.js",
   "repository": {