@advdominion/lightbox-gallery@5.1.0

- @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/lightbox-gallery/index.js

@@ -2,22 +2,38 @@
 
 import { getScrollbarWidth } from '@advdominion/get-scrollbar-width';
 
+const ESCAPE_MAP = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+};
+
+/*
+    Экранирует HTML в значениях (сейчас — подписи), которые попадают в разметку через insertAdjacentHTML.
+    Без этого подпись с тегами выполнится как разметка. Готового санитайзера с нужной поддержкой браузеров нет.
+*/
+const escapeHtml = (value) => String(value).replaceAll(/[&<>"']/g, (char) => ESCAPE_MAP[char]);
+
 const getYTPlayer = () => {
     const script = document.createElement('script');
     script.src = 'https://www.youtube.com/player_api';
     script.async = true;
     document.body.append(script);
-    },
-    getVKPlayer = () => {
+};
+
+const getVKPlayer = () => {
     const script = document.createElement('script');
     script.src = 'https://vk.com/js/api/videoplayer.js';
     script.async = true;
     document.body.append(script);
-    },
-    playVideo = (slide) => {
-        const youtube = slide.querySelector('.advdominion-lg__video_youtube'),
-            vk = slide.querySelector('.advdominion-lg__video_vk'),
-            rt = slide.querySelector('.advdominion-lg__video_rt');
+};
+
+const playVideo = (slide) => {
+    const youtube = slide.querySelector('.advdominion-lg__video_youtube');
+    const vk = slide.querySelector('.advdominion-lg__video_vk');
+    const rt = slide.querySelector('.advdominion-lg__video_rt');
 
     if (youtube) {
         if (slide.YTPlayer) {
@@ -54,7 +70,7 @@ const getYTPlayer = () => {
             }
         } else if (window.VK?.VideoPlayer) {
             if (GalleryVKPlayer.state) {
-                    slide.VKPlayer = VK.VideoPlayer(vk);
+                slide.VKPlayer = VK.VideoPlayer(vk); // eslint-disable-line new-cap
                 slide.VKPlayer.on('inited', () => {
                     if (slide.classList.contains('swiper-slide-active')) {
                         slide.VKPlayer.play();
@@ -72,8 +88,13 @@ const getYTPlayer = () => {
             });
         }
     } else if (rt) {
-            const videoId = /embed\/(\w+)/.exec(rt.getAttribute('src'))?.[1],
-                checkInterval = setInterval(() => {
+        /*
+            RuTube не отдаёт объект плеера вроде YT.Player или VK.VideoPlayer — о готовности он сообщает
+            через postMessage, а id готовых видео копятся в window.GalleryRTPlayer (см. слушатель ниже).
+            Поэтому ждём появления своего id в этом наборе и только тогда отправляем команду.
+        */
+        const videoId = /embed\/(\w+)/.exec(rt.getAttribute('src'))?.[1];
+        const checkInterval = setInterval(() => {
             if (window.GalleryRTPlayer) {
                 if (window.GalleryRTPlayer.has(videoId)) {
                     clearInterval(checkInterval);
@@ -93,11 +114,12 @@ const getYTPlayer = () => {
         }, 100);
         slide.checkInterval = checkInterval;
     }
-    },
-    pauseVideo = (slide) => {
-        const youtube = slide.querySelector('.advdominion-lg__video_youtube'),
-            vk = slide.querySelector('.advdominion-lg__video_vk'),
-            rt = slide.querySelector('.advdominion-lg__video_rt');
+};
+
+const pauseVideo = (slide) => {
+    const youtube = slide.querySelector('.advdominion-lg__video_youtube');
+    const vk = slide.querySelector('.advdominion-lg__video_vk');
+    const rt = slide.querySelector('.advdominion-lg__video_rt');
 
     if (youtube && slide.YTPlayer) {
         slide.YTPlayer.pauseVideo();
@@ -112,24 +134,9 @@ const getYTPlayer = () => {
             '*',
         );
     }
-    },
-    setVideoSize = (gallery) => {
-        const items = gallery.querySelectorAll('.advdominion-lg__video-wrapper');
-        items[0].style.cssText = '';
-        let height = (items[0].getBoundingClientRect().width * 9) / 16,
-            width = '';
-        if (height > items[0].getBoundingClientRect().height) {
-            height = items[0].getBoundingClientRect().height;
-            width = `${(height * 16) / 9}px`;
-        }
-        for (const item of items) {
-            item.style.cssText = `
-            height: ${height}px;
-            width: ${width};
-        `;
-        }
-    },
-    hide = async (duration = 500, easing = 'linear') => {
+};
+
+const hide = async (duration = 500, easing = 'linear') => {
     const gallery = document.body.querySelector('.advdominion-lg');
 
     await gallery.animate([{ opacity: 1 }, { opacity: 0 }], {
@@ -145,41 +152,47 @@ const getYTPlayer = () => {
     }
 
     gallery.remove();
+    // Сбрасываем накопленные id готовых RuTube-плееров, чтобы следующее открытие начинало с чистого состояния.
     delete window.GalleryRTPlayer;
 
-        document.body.style.cssText = `
-        overflow: '';
-        margin-right: '';
-    `;
-    },
-    show = async (duration = 500, easing = 'linear') => {
+    document.body.style.overflow = '';
+    document.body.style.marginRight = '';
+};
+
+const show = async (duration = 500, easing = 'linear') => {
     const gallery = document.body.querySelector('.advdominion-lg');
 
-        document.body.style.cssText = `
-        overflow: hidden;
-        margin-right: ${getScrollbarWidth()}px
-    `;
+    document.body.style.overflow = 'hidden';
+    document.body.style.marginRight = `${getScrollbarWidth()}px`;
 
     await gallery.animate([{ opacity: 0 }, { opacity: 1 }], {
         duration,
         easing,
     }).finished;
-    },
-    init = async (items = [], options = {}, index = 0) => {
+};
+
+const init = async (items = [], options = {}, index = 0) => {
+    // Вторая галерея поверх первой сломала бы закрытие: show/hide ищут только первый элемент .advdominion-lg.
+    if (document.body.querySelector('.advdominion-lg')) {
+        return;
+    }
+    // Один отменяемый контроллер на время жизни галереи: при закрытии снимает все её слушатели.
+    const controller = new AbortController();
     const [{ default: Swiper }, { Navigation, Pagination }] = await Promise.all([
         import('swiper'),
         import('swiper/modules'),
-            ]),
-            isVideoInGallery = {
+    ]);
+    const isVideoInGallery = {
         yt: false,
         vk: false,
         rt: false,
     };
-        items = items.map(({ url: item, caption }) => {
+    const slides = items.map(({ url: item, caption }) => {
         if (/youtube\.com\/watch\?v=/.test(item)) {
             isVideoInGallery.yt = true;
             return `
                 <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
+                    <div class="advdominion-lg__video-area">
                         <div class="advdominion-lg__video-wrapper">
                             <div
                                 class="advdominion-lg__video advdominion-lg__video_youtube"
@@ -187,7 +200,8 @@ const getYTPlayer = () => {
                                 Загрузка YouTube-плеера...
                             </div>
                         </div>
-                    ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
+                    </div>
+                    ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
                 </div>
             `;
         } else if (/(?:vkvideo\.ru|vk\.com)\/video/.test(item)) {
@@ -196,17 +210,20 @@ const getYTPlayer = () => {
             if (videoId === null) {
                 return `
                     <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
+                        <div class="advdominion-lg__video-area">
                             <div class="advdominion-lg__video-wrapper">
                                 <div class="advdominion-lg__video advdominion-lg__video_vk">
                                     Ошибка при загрузке VK-плеера
                                 </div>
                             </div>
-                        ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
+                        </div>
+                        ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
                     </div>
                 `;
             }
             return `
                 <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
+                    <div class="advdominion-lg__video-area">
                         <div class="advdominion-lg__video-wrapper">
                             <iframe
                                 class="advdominion-lg__video advdominion-lg__video_vk"
@@ -214,7 +231,8 @@ const getYTPlayer = () => {
                                 allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;">
                             </iframe>
                         </div>
-                    ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
+                    </div>
+                    ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
                 </div>
             `;
         } else if (/rutube\.ru/.test(item)) {
@@ -223,17 +241,20 @@ const getYTPlayer = () => {
             if (videoId === null) {
                 return `
                     <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
+                        <div class="advdominion-lg__video-area">
                             <div class="advdominion-lg__video-wrapper">
                                 <div class="advdominion-lg__video advdominion-lg__video_rt">
                                     Ошибка при загрузке RuTube-плеера
                                 </div>
                             </div>
-                        ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
+                        </div>
+                        ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
                     </div>
                 `;
             }
             return `
                 <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
+                    <div class="advdominion-lg__video-area">
                         <div class="advdominion-lg__video-wrapper">
                             <iframe
                                 class="advdominion-lg__video advdominion-lg__video_rt"
@@ -241,18 +262,24 @@ const getYTPlayer = () => {
                                 allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;">
                             </iframe>
                         </div>
-                    ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
+                    </div>
+                    ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
                 </div>
             `;
         }
         return `
             <div class="advdominion-lg__item swiper-slide">
                 <img class="advdominion-lg__image" src="${item}" alt="" loading="lazy">
-                ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
+                ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
             </div>
         `;
     });
 
+    /*
+        GalleryYTPlayer и GalleryVKPlayer — простые накопители колбэков до готовности внешнего API.
+        Пока плеер не загружен, playVideo регистрирует себя через addListener и будет вызван снова,
+        когда init станет true.
+    */
     if (isVideoInGallery.yt && !window.GalleryYTPlayer) {
         window.GalleryYTPlayer = {
             state: false,
@@ -271,10 +298,21 @@ const getYTPlayer = () => {
             },
         };
 
+        /*
+            YouTube вызывает onYouTubeIframeAPIReady только один раз, поэтому нельзя просто перезаписать его:
+            если API уже загружен или колбэк занят другим кодом, он больше не сработает. Поэтому сохраняем
+            прежний обработчик и явно отмечаем готовность, когда API уже присутствует.
+        */
+        if (window.YT?.Player) {
+            window.GalleryYTPlayer.init = true;
+        } else {
+            const prevOnYouTubeIframeAPIReady = window.onYouTubeIframeAPIReady;
             window.onYouTubeIframeAPIReady = () => {
+                prevOnYouTubeIframeAPIReady?.();
                 window.GalleryYTPlayer.init = true;
             };
         }
+    }
 
     if (isVideoInGallery.vk && !window.GalleryVKPlayer) {
         window.GalleryVKPlayer = {
@@ -294,6 +332,7 @@ const getYTPlayer = () => {
             },
         };
 
+        // У VK нет события готовности API, поэтому проверяем его появление опросом.
         const checkInterval = setInterval(() => {
             if (window.VK?.VideoPlayer) {
                 clearInterval(checkInterval);
@@ -304,14 +343,18 @@ const getYTPlayer = () => {
 
     if (isVideoInGallery.rt) {
         window.GalleryRTPlayer = new Set();
-            window.addEventListener('message', (event) => {
+        window.addEventListener(
+            'message',
+            (event) => {
                 if (event.origin.includes('rutube.ru') && typeof event.data === 'string') {
                     const message = JSON.parse(event.data);
                     if (message.type === 'player:ready') {
                         window.GalleryRTPlayer.add(message.data.videoId);
                     }
                 }
-            });
+            },
+            { signal: controller.signal },
+        );
     }
 
     document.body.insertAdjacentHTML(
@@ -323,7 +366,7 @@ const getYTPlayer = () => {
                 </button>
                 <div class="advdominion-lg__container swiper">
                     <div class="advdominion-lg__wrapper swiper-wrapper">
-                        ${items.join('')}
+                        ${slides.join('')}
                     </div>
                     ${options.pagination || ''}
                     ${options.navigation || ''}
@@ -355,10 +398,6 @@ const getYTPlayer = () => {
         if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
             playVideo(this.slides[this.activeIndex]);
         }
-
-            if (isVideoInGallery.yt || isVideoInGallery.vk || isVideoInGallery.rt) {
-                setVideoSize(gallery);
-            }
     });
 
     swiper.on('slideChange', function init() {
@@ -375,30 +414,28 @@ const getYTPlayer = () => {
         }, 0);
     });
 
-        swiper.on('resize', () => {
-            if (isVideoInGallery.yt || isVideoInGallery.vk || isVideoInGallery.rt) {
-                setVideoSize(gallery);
-            }
-        });
-
     swiper.init();
 
     const closeHandler = () => {
         hide(options?.animation?.hide?.duration, options?.animation?.hide?.easing);
-            },
-            keydownHandler = (e) => {
+        controller.abort();
+    };
+    const keydownHandler = (e) => {
         if (e.key === 'Escape') {
             closeHandler();
-                    document.body.removeEventListener('keydown', keydownHandler);
         }
     };
 
     gallery.querySelector('.advdominion-lg__close').addEventListener('click', closeHandler);
-        document.body.addEventListener('keydown', keydownHandler);
+    document.body.addEventListener('keydown', keydownHandler, { signal: controller.signal });
 };
 
 export const gallery = (container, options) => {
     const items = [];
+    /*
+        Подпись берётся из элемента, на который указывает data-gallery-caption у ссылки,
+        поэтому одна и та же подпись не дублируется в разметке галереи.
+    */
     if (options.single) {
         const element = container.children[0];
         items.push({

packages/lightbox-gallery/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@advdominion/lightbox-gallery",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "type": "module",
   "main": "index.js",
   "repository": {

packages/lightbox-gallery/styles.css

@@ -39,15 +39,31 @@
 .advdominion-lg__item_video.swiper-slide {
 }
 
+/*
+    Обёртка вокруг видео внутри слайда. Слайд — это колонка из видео и подписи, поэтому обёртка
+    забирает всю высоту, оставшуюся после подписи и отступа, и центрирует в себе видео.
+    container-type: size нужен, чтобы cqw/cqh в .advdominion-lg__video-wrapper считались от этой
+    области, а не от всего слайда: иначе 16:9-блок вырастет на высоту подписи и наедет на неё.
+*/
+.advdominion-lg__video-area {
+    align-items: center;
+    container-type: size;
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+    min-height: 0;
+    width: 100%;
+}
+
 .advdominion-lg__image {
     max-height: 100%;
     max-width: 100%;
 }
 
 .advdominion-lg__video-wrapper {
-    height: 100%;
+    aspect-ratio: 16 / 9;
     position: relative;
-    width: 100%;
+    width: min(100cqw, calc(100cqh * 16 / 9));
 }
 
 .advdominion-lg__video {

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;
 
-        if (!$el._tooltip.$tooltip) {
-            const { computePosition, offset, flip, shift, arrow } = await import('@floating-ui/dom');
+        const { computePosition, autoUpdate, offset, flip, shift, arrow } = await import('@floating-ui/dom');
 
         if (generation !== $el._tooltip._generation) {
             return;
         }
 
+        if (!$el._tooltip.$tooltip) {
             $el._tooltip.$tooltip = document.createElement('div');
             $el._tooltip.$tooltip._reference = $el;
             $el._tooltip.$tooltip.classList.add('tooltip', `tooltip_theme_${options.theme}`);
@@ -312,15 +333,9 @@ export const createTooltip = ($el, initialContent, initialOptions) => {
             $el._tooltip.setContent();
             mountArrow();
 
-            $el._tooltip.updatePosition = () => {
-                cancelAnimationFrame(rafId);
-                rafId = requestAnimationFrame(async () => {
-                    const { x, y, placement, middlewareData } = await computePosition(
-                        options.virtualReference ?? $el,
-                        $el._tooltip.$tooltip,
-                        {
-                            placement: options.placement,
-                            middleware: [
+            const buildMiddleware = () => {
+                const arrowSize = $el._tooltip.$arrow?.offsetWidth ?? 0;
+                return [
                     offset({ mainAxis: options.offset[1], crossAxis: options.offset[0] }),
                     flip(),
                     shift({
@@ -339,11 +354,29 @@ export const createTooltip = ($el, initialContent, initialOptions) => {
                             на (√2 − 1) / 2 · size — это не даёт его углам вылезать за границы.
                             Можно задать вручную через arrow.padding
                         */
-                                    padding:
-                                        options.arrow.padding ??
-                                        Math.ceil(((Math.SQRT2 - 1) / 2) * ($el._tooltip.$arrow?.offsetWidth ?? 0)),
+                        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: ($el._tooltip._middleware ??= buildMiddleware()),
                         },
                     );
 
@@ -354,6 +387,10 @@ export const createTooltip = ($el, initialContent, initialOptions) => {
                     const side = placement.split('-')[0];
                     const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[side];
 
+                    // Стили стороны применяем только при её смене
+                    if (side !== $el._tooltip._side) {
+                        $el._tooltip._side = side;
+
                         $el._tooltip.$tooltip.classList.remove(
                             'tooltip_side_top',
                             'tooltip_side_bottom',
@@ -369,6 +406,7 @@ export const createTooltip = ($el, initialContent, initialOptions) => {
                                 [staticSide]: `-${options.offset[1]}px`,
                             });
                         }
+                    }
 
                     if ($el._tooltip.$arrow && middlewareData.arrow) {
                         const { $arrow } = $el._tooltip;
@@ -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": {