@astral/ui 4.103.1 → 4.104.0

package/components/Accordion/Accordion.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Collapse } from '../Collapse';
-import { Chevron, ChevronWrapper, ContentWrapper, Header, SubtitleWrapper, Summary, Wrapper, } from './styles';
+import { Chevron, ChevronWrapper, ContentWrapper, Header, SubtitleWrapper, Summary, } from './styles';
 import { useLogic } from './useLogic';
 export const Accordion = forwardRef(({ summary, startAdornment, isExpanded, onChange, children, summaryVariant = 'h6', subtitle, }, forwardedRef) => {
     const { actualIsExpanded, hasStartAdornment, handleClick, handleKeyDown, hasSubtitle, } = useLogic({ startAdornment, isExpanded, onChange, subtitle });
-    return (_jsxs(Wrapper, { ref: forwardedRef, tabIndex: 0, onKeyDown: handleKeyDown, children: [_jsxs(Header, { role: "button", onClick: handleClick, "$withStartAdornment": hasStartAdornment, "$hasSubtitle": hasSubtitle, children: [startAdornment, typeof summary === 'string' ? (_jsx(Summary, { variant: summaryVariant, children: summary })) : (summary), _jsx(ChevronWrapper, { children: _jsx(Chevron, { "$isActive": actualIsExpanded }) }), hasSubtitle && (_jsx(SubtitleWrapper, { "$withStartAdornment": hasStartAdornment, children: subtitle }))] }), _jsx(Collapse, { in: actualIsExpanded, unmountOnExit: true, children: _jsx(ContentWrapper, { "$withStartAdornment": hasStartAdornment, "$hasSubtitle": hasSubtitle, children: children }) })] }));
+    return (_jsxs("div", { ref: forwardedRef, children: [_jsxs(Header, { role: "button", tabIndex: 0, onClick: handleClick, onKeyDown: handleKeyDown, "$withStartAdornment": hasStartAdornment, "$hasSubtitle": hasSubtitle, children: [startAdornment, typeof summary === 'string' ? (_jsx(Summary, { variant: summaryVariant, children: summary })) : (summary), _jsx(ChevronWrapper, { children: _jsx(Chevron, { "$isActive": actualIsExpanded }) }), hasSubtitle && (_jsx(SubtitleWrapper, { "$withStartAdornment": hasStartAdornment, children: subtitle }))] }), _jsx(Collapse, { in: actualIsExpanded, unmountOnExit: true, children: _jsx(ContentWrapper, { "$withStartAdornment": hasStartAdornment, "$hasSubtitle": hasSubtitle, children: children }) })] }));
 });

package/components/Accordion/styles.d.ts

@@ -34,10 +34,6 @@ export declare const ChevronWrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Wrapper: import("../styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Chevron: import("../styled").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;

package/components/Accordion/styles.js

@@ -11,6 +11,8 @@ export const Header = styled.header `
   grid-template-columns: ${({ $withStartAdornment }) => $withStartAdornment ? '20px 1fr 20px' : ' 1fr 20px'};
   grid-template-rows: ${({ $hasSubtitle }) => $hasSubtitle ? '20px 1fr' : '1fr'};
 
+  border-radius: ${({ theme }) => theme.shape.medium};
+
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     grid-row-gap: ${({ theme }) => theme.spacing(1)};
     grid-template-rows: ${({ $hasSubtitle }) => $hasSubtitle ? '24px 1fr' : '1fr'};
@@ -18,6 +20,10 @@ export const Header = styled.header `
     /* Убирает highlight на мобильных устройствах */
     -webkit-tap-highlight-color: transparent;
   }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.palette.components.focused};
+  }
   
   & .${svgIconClassnames.root} {
     font-size: 20px;
@@ -54,13 +60,6 @@ export const ChevronWrapper = styled.div `
     height: 24px;
   }
 `;
-export const Wrapper = styled.div `
-  border-radius: ${({ theme }) => theme.shape.medium};
-
-  &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.palette.components.focused};
-  }
-`;
 export const Chevron = styled(DownOutlineMd, {
     shouldForwardProp: (prop) => !['$isActive'].includes(prop),
 }) `

package/components/Accordion/useLogic/useLogic.d.ts

@@ -3,7 +3,7 @@ import { type AccordionProps } from '../types';
 type UseLogicParams = Pick<AccordionProps, 'startAdornment' | 'isExpanded' | 'onChange' | 'subtitle'>;
 export declare const useLogic: ({ startAdornment, isExpanded, onChange, subtitle, }: UseLogicParams) => {
     handleClick: (event: SyntheticEvent<HTMLElement>) => void;
-    handleKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+    handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
     actualIsExpanded: boolean;
     isUncontrolledExpanded: boolean;
     hasStartAdornment: boolean;

package/components/Onboarding/ui/Overlay/Overlay.d.ts

@@ -14,10 +14,6 @@ export type OverlayProps = {
      * @default true
      */
     isVisible?: boolean;
-    /**
-     * Идёт переезд hole на новую цель.
-     */
-    isHoleMoving?: boolean;
     /**
      * Клик по overlay.
      */
@@ -26,4 +22,4 @@ export type OverlayProps = {
 /**
  * SVG-overlay с hole и порталом в document.body.
  */
-export declare const Overlay: ({ hole, isInteractive, isVisible, isHoleMoving, onClose, }: OverlayProps) => import("react").ReactPortal;
+export declare const Overlay: ({ hole, isInteractive, isVisible, onClose, }: OverlayProps) => import("react").ReactPortal;

package/components/Onboarding/ui/Overlay/Overlay.js

@@ -10,15 +10,12 @@ const rootCva = cva(overlayClassnames.root, {
         isHidden: {
             true: overlayClassnames.hidden,
         },
-        isHoleMoving: {
-            true: overlayClassnames.holeMoving,
-        },
     },
 });
 /**
  * SVG-overlay с hole и порталом в document.body.
  */
-export const Overlay = ({ hole, isInteractive, isVisible = true, isHoleMoving = false, onClose, }) => {
+export const Overlay = ({ hole, isInteractive, isVisible = true, onClose, }) => {
     const { viewport, clampedHole, path } = useLogic(hole);
-    return createPortal(_jsxs(OverlayRoot, { viewBox: `0 0 ${viewport.width} ${viewport.height}`, preserveAspectRatio: "none", className: rootCva({ isHidden: !isVisible, isHoleMoving }), children: [_jsx(Backdrop, { d: path, fillRule: "evenodd", onClick: onClose, className: overlayClassnames.backdrop }), !isInteractive && clampedHole && (_jsx(HoleBlocker, { x: clampedHole.x, y: clampedHole.y, width: clampedHole.width, height: clampedHole.height, rx: DEFAULT_HIGHLIGHT_RADIUS, className: overlayClassnames.holeBlocker }))] }), document.body);
+    return createPortal(_jsxs(OverlayRoot, { viewBox: `0 0 ${viewport.width} ${viewport.height}`, preserveAspectRatio: "none", className: rootCva({ isHidden: !isVisible }), children: [_jsx(Backdrop, { d: path, fillRule: "evenodd", onClick: onClose, className: overlayClassnames.backdrop }), !isInteractive && clampedHole && (_jsx(HoleBlocker, { x: clampedHole.x, y: clampedHole.y, width: clampedHole.width, height: clampedHole.height, rx: DEFAULT_HIGHLIGHT_RADIUS, className: overlayClassnames.holeBlocker }))] }), document.body);
 };

package/components/Onboarding/ui/Overlay/constants.d.ts

@@ -1,7 +1,6 @@
 export declare const overlayClassnames: {
     root: string;
     hidden: string;
-    holeMoving: string;
     backdrop: string;
     holeBlocker: string;
 };

package/components/Onboarding/ui/Overlay/constants.js

@@ -2,7 +2,6 @@ import { createUIKitClassname } from '../../../utils/createUIKitClassname';
 export const overlayClassnames = {
     root: createUIKitClassname('onboarding-overlay'),
     hidden: createUIKitClassname('onboarding-overlay_hidden'),
-    holeMoving: createUIKitClassname('onboarding-overlay_hole-moving'),
     backdrop: createUIKitClassname('onboarding-overlay__backdrop'),
     holeBlocker: createUIKitClassname('onboarding-overlay__hole-blocker'),
 };

package/components/Onboarding/ui/Overlay/styles.js

@@ -35,11 +35,6 @@ export const Backdrop = styled.path `
   cursor: pointer;
 
   fill: ${({ theme }) => theme.palette.background.modalShadow};
-
-  .${overlayClassnames.holeMoving} & {
-    transition: d ${({ theme }) => theme.transitions.duration.standard}ms
-      ${({ theme }) => theme.transitions.easing.easeInOut};
-  }
 `;
 /**
  * Блокатор кликов для неинтерактивных шагов.
@@ -48,10 +43,4 @@ export const HoleBlocker = styled.rect `
   pointer-events: auto;
 
   fill: transparent;
-
-  .${overlayClassnames.holeMoving} & {
-    transition-timing-function: ${({ theme }) => theme.transitions.easing.easeInOut};
-    transition-duration: ${({ theme }) => theme.transitions.duration.standard}ms;
-    transition-property: x, y, width, height, rx;
-  }
 `;

package/components/Onboarding/ui/StepStrategy/StepStrategy.js

@@ -11,7 +11,7 @@ const STEP_VIEWS = {
  * Стратегия отрисовки по типу шага, единый overlay для всего тура.
  */
 export const StepStrategy = ({ activeStep, isClosing }) => {
-    const { geometry, shouldShowOverlay, isVisible, isHoleMoving, onOverlayClose, } = useLogic(activeStep, isClosing);
+    const { geometry, shouldShowOverlay, isVisible, onOverlayClose } = useLogic(activeStep, isClosing);
     const StepView = STEP_VIEWS[activeStep.step.type];
-    return (_jsxs(_Fragment, { children: [shouldShowOverlay && (_jsx(Overlay, { hole: geometry.hole, isInteractive: activeStep.isInteractive, isVisible: isVisible, isHoleMoving: isHoleMoving, onClose: onOverlayClose })), _jsx(StepView, { activeStep: activeStep, isClosing: isClosing, geometry: geometry })] }));
+    return (_jsxs(_Fragment, { children: [shouldShowOverlay && (_jsx(Overlay, { hole: geometry.hole, isInteractive: activeStep.isInteractive, isVisible: isVisible, onClose: onOverlayClose })), _jsx(StepView, { activeStep: activeStep, isClosing: isClosing, geometry: geometry })] }));
 };

package/components/Onboarding/ui/StepStrategy/useLogic/useLogic.d.ts

@@ -32,10 +32,6 @@ export type UseLogicResult = {
      * Overlay виден.
      */
     isVisible: boolean;
-    /**
-     * Hole анимируется.
-     */
-    isHoleMoving: boolean;
     /**
      * Клик по overlay — запрос выхода.
      */

package/components/Onboarding/ui/StepStrategy/useLogic/useLogic.js

@@ -2,6 +2,7 @@ import { useCallback, useMemo, useRef } from 'react';
 import { useTheme } from '../../../../theme/hooks/useTheme';
 import { createVirtualAnchor, } from '../../../utils/createVirtualAnchor';
 import { inflateRect, parseOffset } from '../../../utils/geometry';
+import { useAnimatedRect } from '../../hooks/useAnimatedRect';
 import { useStepTransition } from '../../hooks/useStepTransition';
 import { useTargetAnchor } from '../../hooks/useTargetAnchor';
 /**
@@ -19,12 +20,21 @@ export const useLogic = (activeStep, isClosing) => {
         timeout: step.waitForTimeout,
     });
     const padding = parseOffset(step.highlightOffset);
-    const hole = useMemo(() => (rect ? inflateRect(rect, padding) : null), [rect, padding]);
+    // Отступ учитываем до переезда: иначе он подставляется сразу от нового шага,
+    // и область скачком меняет размер вместо плавного.
+    const targetHole = useMemo(() => (rect ? inflateRect(rect, padding) : null), [rect, padding]);
+    // Переезд hole между шагами: цель шага может ехать сама (шторка, прокрутка),
+    // поэтому область анимируется здесь, а не css-переходом.
+    const hole = useAnimatedRect(targetHole, {
+        stepKey: step.name,
+        durationMs: theme.transitions.duration.short,
+        // Шаг без hole: область гаснет сразу, а не едет к отсутствующей цели.
+        hasHole: isHighlight,
+    });
     const anchorEl = useMemo(() => (hole ? createVirtualAnchor(hole) : null), [hole]);
-    const { isPopoverHidden, isHoleMoving } = useStepTransition(step.name, {
-        // Popover скрыт пока hole движется.
+    const isPopoverHidden = useStepTransition(step.name, {
+        // Popover скрыт пока hole едет к новой цели.
         popoverHiddenMs: theme.transitions.duration.short,
-        holeMovingMs: theme.transitions.duration.short,
         hasHole: isHighlight,
     });
     const onOverlayClose = useCallback(() => {
@@ -45,7 +55,6 @@ export const useLogic = (activeStep, isClosing) => {
         },
         shouldShowOverlay: hasShownOverlayRef.current,
         isVisible: !isClosing,
-        isHoleMoving,
         onOverlayClose,
     };
 };

package/components/Onboarding/ui/hooks/useAnimatedRect/index.d.ts

@@ -0,0 +1 @@
+export { useAnimatedRect } from './useAnimatedRect';

package/components/Onboarding/ui/hooks/useAnimatedRect/index.js

@@ -0,0 +1 @@
+export { useAnimatedRect } from './useAnimatedRect';

package/components/Onboarding/ui/hooks/useAnimatedRect/useAnimatedRect.d.ts

@@ -0,0 +1,21 @@
+import { type Rect } from '../../../utils/geometry';
+export type AnimatedRectOptions = {
+    /**
+     * Ключ шага: его смена запускает переезд hole на новую цель.
+     */
+    stepKey: string;
+    /**
+     * Длительность переезда (мс).
+     */
+    durationMs: number;
+    /**
+     * Есть ли hole в текущем шаге (highlight). У шага без hole область гаснет
+     * сразу: ехать некуда.
+     * @default true
+     */
+    hasHole?: boolean;
+};
+/**
+ * Плавный переход области hole от цели прошлого шага к цели нового.
+ */
+export declare const useAnimatedRect: (target: Rect | null, { stepKey, durationMs, hasHole }: AnimatedRectOptions) => Rect | null;

package/components/Onboarding/ui/hooks/useAnimatedRect/useAnimatedRect.js

@@ -0,0 +1,66 @@
+import { useEffect, useRef, useState } from 'react';
+import { interpolateRect } from '../../../utils/geometry';
+/**
+ * Сглаживание переезда, аналог css-функции `ease-in-out`.
+ */
+const easeInOut = (progress) => progress < 0.5 ? 4 * progress ** 3 : 1 - (-2 * progress + 2) ** 3 / 2;
+/**
+ * Плавный переход области hole от цели прошлого шага к цели нового.
+ */
+export const useAnimatedRect = (target, { stepKey, durationMs, hasHole = true }) => {
+    const [travelRect, setTravelRect] = useState(null);
+    const fromRect = useRef(null);
+    const targetRect = useRef(target);
+    const shownRect = useRef(target);
+    const prevStepKey = useRef(stepKey);
+    const [travelId, setTravelId] = useState(0);
+    targetRect.current = target;
+    // Стартуем синхронно во время render, иначе виден кадр с hole на новой цели.
+    if (prevStepKey.current !== stepKey) {
+        prevStepKey.current = stepKey;
+        if (!hasHole) {
+            // Шаг без hole (standalone): гасим область и отменяем начатый переезд.
+            fromRect.current = null;
+            setTravelRect(null);
+            setTravelId((id) => id + 1);
+        }
+        else if (shownRect.current) {
+            // Область уже показана — едем от неё; иначе (первый hole в туре) цель
+            // показывается сразу, без переезда.
+            fromRect.current = shownRect.current;
+            setTravelRect(shownRect.current);
+            setTravelId((id) => id + 1);
+        }
+    }
+    useEffect(() => {
+        // Первый render (mount) — переезд не запускаем.
+        if (travelId === 0) {
+            return;
+        }
+        const from = fromRect.current;
+        if (!from) {
+            return;
+        }
+        let frame = 0;
+        let startTime = 0;
+        const travel = (time) => {
+            startTime = startTime || time;
+            const progress = Math.min((time - startTime) / durationMs, 1);
+            const to = targetRect.current;
+            // Цель ещё не готова (элемент не смонтирован, идёт прокрутка) — держим
+            // прежнюю область, чтобы hole не гас на время ожидания.
+            setTravelRect(to ? interpolateRect(from, to, easeInOut(progress)) : from);
+            if (progress < 1) {
+                frame = requestAnimationFrame(travel);
+                return;
+            }
+            // Переезд закончен, дальше область ведёт трекинг цели.
+            setTravelRect(null);
+        };
+        frame = requestAnimationFrame(travel);
+        return () => cancelAnimationFrame(frame);
+    }, [travelId, durationMs]);
+    const rect = hasHole ? (travelRect ?? target) : null;
+    shownRect.current = rect;
+    return rect;
+};

package/components/Onboarding/ui/hooks/useStepTransition/useStepTransition.d.ts

@@ -1,12 +1,8 @@
 export type StepTransitionDurations = {
     /**
-     * Время скрытия popover при смене шага (не меньше `holeMovingMs`).
+     * Время скрытия popover при смене шага.
      */
     popoverHiddenMs: number;
-    /**
-     * Время движения hole к новому элементу.
-     */
-    holeMovingMs: number;
     /**
      * Есть ли hole в текущем шаге (highlight). Скрытие popover нужно только для
      * переезда hole (highlight → highlight).
@@ -14,17 +10,7 @@ export type StepTransitionDurations = {
      */
     hasHole?: boolean;
 };
-export type StepTransitionPhase = {
-    /**
-     * Popover скрыт, пока hole движется.
-     */
-    isPopoverHidden: boolean;
-    /**
-     * Идёт анимированный переезд hole.
-     */
-    isHoleMoving: boolean;
-};
 /**
- * Координирует скрытие popover и движение hole при переходе между highlight-шагами.
+ * Прячет popover на время переезда hole между highlight-шагами.
  */
-export declare const useStepTransition: (stepKey: string, { popoverHiddenMs, holeMovingMs, hasHole }: StepTransitionDurations) => StepTransitionPhase;
+export declare const useStepTransition: (stepKey: string, { popoverHiddenMs, hasHole }: StepTransitionDurations) => boolean;

package/components/Onboarding/ui/hooks/useStepTransition/useStepTransition.js

@@ -1,17 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
-const IDLE_PHASE = {
-    isPopoverHidden: false,
-    isHoleMoving: false,
-};
-const HIDDEN_PHASE = {
-    isPopoverHidden: true,
-    isHoleMoving: true,
-};
 /**
- * Координирует скрытие popover и движение hole при переходе между highlight-шагами.
+ * Прячет popover на время переезда hole между highlight-шагами.
  */
-export const useStepTransition = (stepKey, { popoverHiddenMs, holeMovingMs, hasHole = true }) => {
-    const [phase, setPhase] = useState(IDLE_PHASE);
+export const useStepTransition = (stepKey, { popoverHiddenMs, hasHole = true }) => {
+    const [isPopoverHidden, setIsPopoverHidden] = useState(false);
     const prevKey = useRef(stepKey);
     const prevHadHole = useRef(hasHole);
     // Триггер для эффекта: `prevKey` мутируется во время render, поэтому в эффекте не сравнить.
@@ -22,25 +14,18 @@ export const useStepTransition = (stepKey, { popoverHiddenMs, holeMovingMs, hasH
         const isHoleTravel = prevHadHole.current && hasHole;
         prevKey.current = stepKey;
         prevHadHole.current = hasHole;
+        setIsPopoverHidden(isHoleTravel);
         if (isHoleTravel) {
-            setPhase(HIDDEN_PHASE);
             setTransitionId((id) => id + 1);
         }
-        else {
-            setPhase(IDLE_PHASE);
-        }
     }
     useEffect(() => {
         // Первый render (mount) — переход не запускаем.
         if (transitionId === 0) {
             return;
         }
-        const popoverTimer = setTimeout(() => setPhase((prev) => ({ ...prev, isPopoverHidden: false })), popoverHiddenMs);
-        const holeTimer = setTimeout(() => setPhase((prev) => ({ ...prev, isHoleMoving: false })), holeMovingMs);
-        return () => {
-            clearTimeout(popoverTimer);
-            clearTimeout(holeTimer);
-        };
-    }, [transitionId, popoverHiddenMs, holeMovingMs]);
-    return phase;
+        const popoverTimer = setTimeout(() => setIsPopoverHidden(false), popoverHiddenMs);
+        return () => clearTimeout(popoverTimer);
+    }, [transitionId, popoverHiddenMs]);
+    return isPopoverHidden;
 };

package/components/Onboarding/ui/hooks/useTargetAnchor/useTargetAnchor.js

@@ -21,17 +21,14 @@ export const useTargetAnchor = (targetName, { onError, shouldTrack = true, scrol
             // Устанавливаем найденный элемент сразу, без задержки.
             setElement(getTargetElement(targetName));
             waitForElement(targetName, { timeout })
-                .then(async (target) => {
+                .then((target) => {
                 if (isCancelled) {
                     return;
                 }
+                setElement(target);
                 if (scrollOnEnter) {
-                    await scrollIntoView(target);
+                    scrollIntoView(target);
                 }
-                if (isCancelled) {
-                    return;
-                }
-                setElement(target);
                 stopRemovalWatch = observeRemoval(target, () => {
                     if (!isCancelled) {
                         setElement(null);

package/components/Onboarding/utils/geometry/rect/index.d.ts

@@ -1,2 +1,2 @@
-export { clampToScrollParents, clampToViewport, inflateRect, isSameRect, rectFromDomRect, } from './rect';
+export { clampToScrollParents, clampToViewport, inflateRect, interpolateRect, isSameRect, rectFromDomRect, } from './rect';
 export type { Rect } from './rect';

package/components/Onboarding/utils/geometry/rect/index.js

@@ -1 +1 @@
-export { clampToScrollParents, clampToViewport, inflateRect, isSameRect, rectFromDomRect, } from './rect';
+export { clampToScrollParents, clampToViewport, inflateRect, interpolateRect, isSameRect, rectFromDomRect, } from './rect';

package/components/Onboarding/utils/geometry/rect/rect.d.ts

@@ -20,6 +20,10 @@ export declare const isSameRect: (a: Rect | null, b: Rect) => boolean;
  * Расширяет область на padding во все стороны.
  */
 export declare const inflateRect: (rect: Rect, padding: number) => Rect;
+/**
+ * Область между `from` и `to` по доле переезда `progress` (0..1).
+ */
+export declare const interpolateRect: (from: Rect, to: Rect, progress: number) => Rect;
 /**
  * Обрезает область hole по границам viewport.
  */

package/components/Onboarding/utils/geometry/rect/rect.js

@@ -24,6 +24,15 @@ export const inflateRect = (rect, padding) => ({
     width: rect.width + padding * 2,
     height: rect.height + padding * 2,
 });
+/**
+ * Область между `from` и `to` по доле переезда `progress` (0..1).
+ */
+export const interpolateRect = (from, to, progress) => ({
+    x: from.x + (to.x - from.x) * progress,
+    y: from.y + (to.y - from.y) * progress,
+    width: from.width + (to.width - from.width) * progress,
+    height: from.height + (to.height - from.height) * progress,
+});
 /**
  * Пересечение двух областей. Не пересекаются — ширина/высота 0.
  */

package/components/Onboarding/utils/scrollIntoView/scrollIntoView.d.ts

@@ -1,13 +1,12 @@
 /**
- * Доводит элемент highlight-шага до центра viewport и ждёт, пока прокрутка
- * реально доедет.
+ * Доводит элемент highlight-шага до центра viewport.
  *
  * Зачем: цель может быть за пределами экрана или внутри прокрученного
  * контейнера — её надо показать, прежде чем подсвечивать. Нативный
  * `scrollIntoView` сам прокручивает всю цепочку вложенных scroll-контейнеров.
  *
- * Почему ждём: прокрутка плавная (анимированная), позиция элемента меняется
- * кадр за кадром. Дожидаемся её стабилизации, чтобы hole overlay и popover встали
- * по финальной позиции, а не по промежуточной «едущей».
+ * Окончания прокрутки не ждём: hole и popover привязаны к элементу, а
+ * `useTrackedRect` ведёт их за ним покадрово — к финальной позиции они приедут
+ * вместе с ним.
  */
-export declare const scrollIntoView: (element: HTMLElement, behavior?: ScrollBehavior) => Promise<void>;
+export declare const scrollIntoView: (element: HTMLElement, behavior?: ScrollBehavior) => void;

package/components/Onboarding/utils/scrollIntoView/scrollIntoView.js

@@ -2,51 +2,23 @@ import { SCROLL_BEHAVIOR } from '../../constants';
 import { getViewport } from '../geometry';
 import { getScrollParents } from '../getScrollParents';
 /**
- * Сколько кадров подряд позиция не меняется, чтобы счесть прокрутку стабилизировавшейся.
+ * Позиционирование, при котором элемент не двигается прокруткой страницы.
  */
-const STABLE_FRAMES = 3;
+const PINNED_POSITIONS = ['fixed', 'sticky'];
 /**
- * Предохранитель: если позиция так и не стабилизировалась (постоянные
- * layout-сдвиги), делаем resolve по тайм-ауту, чтобы Promise не завис и тур не застрял.
+ * Элемент закреплён на экране: лежит внутри шторки, модалки или липкой шапки.
+ * Прокрутка такой элемент не подвинет, звать её незачем.
  */
-const SETTLE_TIMEOUT_MS = 1000;
-/**
- * Дожидается окончания плавной прокрутки.
- *
- * У браузера нет надёжного сигнала «плавная прокрутка доехала».
- * Поэтому отслеживаем позицию элемента покадрово и считаем прокрутку
- * законченной, когда `top` перестаёт меняться 3 кадра
- * подряд — либо когда срабатывает предохранитель 1000мс.
- */
-const waitForScrollSettle = (element) => new Promise((resolve) => {
-    let raf = 0;
-    let stableFrames = 0;
-    let prevTop = Number.NaN;
-    const timer = setTimeout(() => {
-        cancelAnimationFrame(raf);
-        resolve();
-    }, SETTLE_TIMEOUT_MS);
-    const tick = () => {
-        const { top } = element.getBoundingClientRect();
-        // Позиция не изменилась за кадр — копим «стабильные» кадры; дёрнулась —
-        // сбрасываем счётчик и запоминаем новую позицию.
-        if (top === prevTop) {
-            stableFrames += 1;
-        }
-        else {
-            stableFrames = 0;
-            prevTop = top;
+const checkIsPinned = (element) => {
+    let node = element;
+    while (node) {
+        if (PINNED_POSITIONS.includes(getComputedStyle(node).position)) {
+            return true;
         }
-        // Достаточно кадров без движения → анимация закончилась.
-        if (stableFrames >= STABLE_FRAMES) {
-            clearTimeout(timer);
-            resolve();
-            return;
-        }
-        raf = requestAnimationFrame(tick);
-    };
-    raf = requestAnimationFrame(tick);
-});
+        node = node.parentElement;
+    }
+    return false;
+};
 /**
  * Элемент целиком видим: помещается и во viewport, и в рамки каждого своего
  * scroll-предка.
@@ -65,21 +37,19 @@ const isFullyVisible = (element) => {
         rect.right <= frame.right);
 };
 /**
- * Доводит элемент highlight-шага до центра viewport и ждёт, пока прокрутка
- * реально доедет.
+ * Доводит элемент highlight-шага до центра viewport.
  *
  * Зачем: цель может быть за пределами экрана или внутри прокрученного
  * контейнера — её надо показать, прежде чем подсвечивать. Нативный
  * `scrollIntoView` сам прокручивает всю цепочку вложенных scroll-контейнеров.
  *
- * Почему ждём: прокрутка плавная (анимированная), позиция элемента меняется
- * кадр за кадром. Дожидаемся её стабилизации, чтобы hole overlay и popover встали
- * по финальной позиции, а не по промежуточной «едущей».
+ * Окончания прокрутки не ждём: hole и popover привязаны к элементу, а
+ * `useTrackedRect` ведёт их за ним покадрово — к финальной позиции они приедут
+ * вместе с ним.
  */
-export const scrollIntoView = async (element, behavior = SCROLL_BEHAVIOR) => {
-    if (isFullyVisible(element)) {
+export const scrollIntoView = (element, behavior = SCROLL_BEHAVIOR) => {
+    if (checkIsPinned(element) || isFullyVisible(element)) {
         return;
     }
     element.scrollIntoView({ behavior, block: 'center', inline: 'center' });
-    await waitForScrollSettle(element);
 };

package/node/components/Accordion/Accordion.js

@@ -8,5 +8,5 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 exports.Accordion = (0, react_1.forwardRef)(({ summary, startAdornment, isExpanded, onChange, children, summaryVariant = 'h6', subtitle, }, forwardedRef) => {
     const { actualIsExpanded, hasStartAdornment, handleClick, handleKeyDown, hasSubtitle, } = (0, useLogic_1.useLogic)({ startAdornment, isExpanded, onChange, subtitle });
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { ref: forwardedRef, tabIndex: 0, onKeyDown: handleKeyDown, children: [(0, jsx_runtime_1.jsxs)(styles_1.Header, { role: "button", onClick: handleClick, "$withStartAdornment": hasStartAdornment, "$hasSubtitle": hasSubtitle, children: [startAdornment, typeof summary === 'string' ? ((0, jsx_runtime_1.jsx)(styles_1.Summary, { variant: summaryVariant, children: summary })) : (summary), (0, jsx_runtime_1.jsx)(styles_1.ChevronWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.Chevron, { "$isActive": actualIsExpanded }) }), hasSubtitle && ((0, jsx_runtime_1.jsx)(styles_1.SubtitleWrapper, { "$withStartAdornment": hasStartAdornment, children: subtitle }))] }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: actualIsExpanded, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { "$withStartAdornment": hasStartAdornment, "$hasSubtitle": hasSubtitle, children: children }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: forwardedRef, children: [(0, jsx_runtime_1.jsxs)(styles_1.Header, { role: "button", tabIndex: 0, onClick: handleClick, onKeyDown: handleKeyDown, "$withStartAdornment": hasStartAdornment, "$hasSubtitle": hasSubtitle, children: [startAdornment, typeof summary === 'string' ? ((0, jsx_runtime_1.jsx)(styles_1.Summary, { variant: summaryVariant, children: summary })) : (summary), (0, jsx_runtime_1.jsx)(styles_1.ChevronWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.Chevron, { "$isActive": actualIsExpanded }) }), hasSubtitle && ((0, jsx_runtime_1.jsx)(styles_1.SubtitleWrapper, { "$withStartAdornment": hasStartAdornment, children: subtitle }))] }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: actualIsExpanded, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { "$withStartAdornment": hasStartAdornment, "$hasSubtitle": hasSubtitle, children: children }) })] }));
 });

package/node/components/Accordion/styles.d.ts

@@ -34,10 +34,6 @@ export declare const ChevronWrapper: import("@emotion/styled/dist/declarations/s
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Chevron: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;