@vkontakte/vkui 7.4.3 → 7.4.4

package/dist/components/OnboardingTooltip/OnboardingTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTooltip/OnboardingTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAGL,KAAK,sBAAsB,EAI5B,MAAM,oBAAoB,CAAC;AAG5B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGzE,OAAO,EAAkC,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAOnG,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,kBAAkB,GAClB,mBAAmB,GACnB,OAAO,GACP,UAAU,GACV,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,CACrB,CAAC;AAEF,KAAK,uBAAuB,GAAG,IAAI,CACjC,gBAAgB,EAChB,YAAY,GAAG,gBAAgB,GAAG,kBAAkB,CACrD,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B;;OAEG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAC3C;;OAEG;IACH,mBAAmB,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CAC5D,CAAC;AAEF,MAAM,WAAW,sBACf,SAAQ,6BAA6B,EACnC,uBAAuB,EACvB,yBAAyB,EACzB,IAAI,CAAC,iBAAiB,EAAE,cAAc,CAAC;IACzC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,wZAyB/B,sBAAsB,KAAG,KAAK,CAAC,SAyIjC,CAAC"}
+{"version":3,"file":"OnboardingTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTooltip/OnboardingTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAGL,KAAK,sBAAsB,EAI5B,MAAM,oBAAoB,CAAC;AAI5B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGzE,OAAO,EAAkC,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAMnG,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,kBAAkB,GAClB,mBAAmB,GACnB,OAAO,GACP,UAAU,GACV,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,CACrB,CAAC;AAEF,KAAK,uBAAuB,GAAG,IAAI,CACjC,gBAAgB,EAChB,YAAY,GAAG,gBAAgB,GAAG,kBAAkB,CACrD,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B;;OAEG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAC3C;;OAEG;IACH,mBAAmB,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CAC5D,CAAC;AAEF,MAAM,WAAW,sBACf,SAAQ,6BAA6B,EACnC,uBAAuB,EACvB,yBAAyB,EACzB,IAAI,CAAC,iBAAiB,EAAE,cAAc,CAAC;IACzC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,wZAyB/B,sBAAsB,KAAG,KAAK,CAAC,SAmIjC,CAAC"}

package/dist/components/OnboardingTooltip/OnboardingTooltip.js

@@ -10,13 +10,13 @@ import { useExternRef } from "../../hooks/useExternRef.js";
 import { usePatchChildren } from "../../hooks/usePatchChildren.js";
 import { createPortal } from "../../lib/createPortal.js";
 import { autoUpdateFloatingElement, convertFloatingDataToReactCSSProperties, useFloating, useFloatingMiddlewaresBootstrap, usePlacementChangeCallback } from "../../lib/floating/index.js";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 import { warnOnce } from "../../lib/warnOnce.js";
 import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from "../FloatingArrow/DefaultIcon.js";
 import { FocusTrap } from "../FocusTrap/FocusTrap.js";
 import { useNavTransition } from "../NavTransitionContext/NavTransitionContext.js";
 import { TOOLTIP_MAX_WIDTH, TooltipBase } from "../TooltipBase/TooltipBase.js";
 import { onboardingTooltipContainerAttr } from "./OnboardingTooltipContainer.js";
-import { useOnboardingTooltipContext } from "./OnboardingTooltipContext.js";
 const warn = warnOnce('OnboardingTooltip');
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
@@ -49,7 +49,6 @@ const warn = warnOnce('OnboardingTooltip');
     const generatedId = React.useId();
     const tooltipId = idProp || generatedId;
     const { entering } = useNavTransition();
-    const { containerRef: tooltipContainerRef } = useOnboardingTooltipContext();
     const [arrowRef, setArrowRef] = React.useState(null);
     const [tooltipContainer, setTooltipContainer] = React.useState(null);
     const [positionStrategy, setPositionStrategy] = React.useState('absolute');
@@ -118,22 +117,15 @@ const warn = warnOnce('OnboardingTooltip');
             ]
         }), tooltipContainer);
     }
-    React.useEffect(function initialize() {
+    useIsomorphicLayoutEffect(function initialize() {
         const referenceEl = childRef.current;
-        if (!referenceEl) {
-            return;
-        }
-        const tooltipContainer = tooltipContainerRef.current || // eslint-disable-next-line no-restricted-properties
-        referenceEl.closest(`[${onboardingTooltipContainerAttr}]`);
-        if (tooltipContainer) {
-            setTooltipContainer(tooltipContainer);
+        if (referenceEl) {
+            setTooltipContainer(referenceEl.closest(`[${onboardingTooltipContainerAttr}]`));
             setPositionStrategy(referenceEl.style.position === 'fixed' ? 'fixed' : 'absolute');
             refs.setReference(referenceEl);
         }
     }, [
-        childRef,
-        refs,
-        tooltipContainerRef
+        childRef
     ]);
     if (process.env.NODE_ENV === 'development') {
         const multiChildren = React.Children.count(children) > 1;

package/dist/components/OnboardingTooltip/OnboardingTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/OnboardingTooltip/OnboardingTooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { createPortal } from '../../lib/createPortal';\nimport {\n  autoUpdateFloatingElement,\n  convertFloatingDataToReactCSSProperties,\n  type FloatingComponentProps,\n  useFloating,\n  useFloatingMiddlewaresBootstrap,\n  usePlacementChangeCallback,\n} from '../../lib/floating';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from '../FloatingArrow/DefaultIcon';\nimport type { FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\nimport { TOOLTIP_MAX_WIDTH, TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { onboardingTooltipContainerAttr } from './OnboardingTooltipContainer';\nimport { useOnboardingTooltipContext } from './OnboardingTooltipContext';\nimport styles from './OnboardingTooltip.module.css';\n\nconst warn = warnOnce('OnboardingTooltip');\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'arrowRef'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'shown'\n  | 'children'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n  | 'disableFocusTrap'\n>;\n\ntype AllowedTooltipBaseProps = Omit<\n  TooltipBaseProps,\n  'arrowProps' | 'closeIconLabel' | 'onCloseIconClick'\n>;\n\ntype AllowedFloatingArrowProps = {\n  /**\n   * Сдвиг стрелки относительно текущих координат.\n   */\n  arrowOffset?: FloatingArrowProps['offset'];\n  /**\n   * Включает абсолютное смещение по `arrowOffset`.\n   */\n  isStaticArrowOffset?: FloatingArrowProps['isStaticOffset'];\n};\n\nexport interface OnboardingTooltipProps\n  extends AllowedFloatingComponentProps,\n    AllowedTooltipBaseProps,\n    AllowedFloatingArrowProps,\n    Pick<UseFocusTrapProps, 'restoreFocus'> {\n  /**\n   * Скрывает стрелку, указывающую на якорный элемент.\n   */\n  disableArrow?: boolean;\n  /**\n   * Обработчик, который вызывается при нажатии по любому месту в пределах экрана.\n   */\n  onClose?: (this: void) => void;\n  /**\n   * [a11y] Метка для подложки-кнопки, для описания того, что произойдёт при нажатии.\n   */\n  overlayLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const OnboardingTooltip = ({\n  'id': idProp,\n  children,\n  'shown': shownProp = true,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  offsetByMainAxis = 0,\n  offsetByCrossAxis = 0,\n  arrowOffset = 0,\n  isStaticArrowOffset = false,\n  onClose,\n  'placement': placementProp = 'bottom-start',\n  maxWidth = TOOLTIP_MAX_WIDTH,\n  'style': styleProp,\n  getRootRef,\n  disableArrow = false,\n  onPlacementChange,\n  disableFlipMiddleware = false,\n  overlayLabel = 'Закрыть',\n  title,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  restoreFocus,\n  disableFocusTrap,\n  ...restProps\n}: OnboardingTooltipProps): React.ReactNode => {\n  const generatedId = React.useId();\n  const tooltipId = idProp || generatedId;\n  const { entering } = useNavTransition();\n  const { containerRef: tooltipContainerRef } = useOnboardingTooltipContext();\n\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const [tooltipContainer, setTooltipContainer] = React.useState<HTMLElement | null>(null);\n  const [positionStrategy, setPositionStrategy] = React.useState<'fixed' | 'absolute'>('absolute');\n  const shown = shownProp && tooltipContainer && !entering;\n\n  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    arrowRef,\n    arrow: !disableArrow,\n    arrowHeight,\n    arrowPadding,\n    disableFlipMiddleware,\n  });\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    refs,\n    placement: resolvedPlacement,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    strategy: positionStrategy,\n    placement: strictPlacement,\n    middleware: middlewares,\n    whileElementsMounted: autoUpdateFloatingElement,\n  });\n  const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);\n  const [childRef, child] = usePatchChildren(children, {\n    'aria-describedby': shown ? tooltipId : undefined,\n  });\n\n  usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n  const titleId = React.useId();\n  if (process.env.NODE_ENV === 'development' && !title && !ariaLabel && !ariaLabelledBy) {\n    warn(\n      'Если \"title\" не используется, то необходимо задать либо \"aria-label\", либо \"aria-labelledby\" (см. правило axe aria-dialog-name)',\n    );\n  }\n\n  let tooltip: React.ReactPortal | null = null;\n  if (shown) {\n    const floatingStyle = convertFloatingDataToReactCSSProperties({\n      strategy: positionStrategy,\n      x: floatingDataX,\n      y: floatingDataY,\n    });\n\n    tooltip = createPortal(\n      <FocusTrap\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={ariaLabel}\n        aria-labelledby={title ? titleId : ariaLabel ? undefined : ariaLabelledBy}\n        onClose={onClose}\n        disabled={disableFocusTrap}\n        restoreFocus={restoreFocus}\n      >\n        <button aria-label={overlayLabel} className={styles.overlay} onClickCapture={onClose} />\n        <TooltipBase\n          {...restProps}\n          id={tooltipId}\n          title={title}\n          titleId={title ? titleId : undefined}\n          getRootRef={tooltipRef}\n          style={mergeStyle(floatingStyle, styleProp)}\n          maxWidth={maxWidth}\n          arrowProps={\n            disableArrow\n              ? undefined\n              : {\n                  offset: arrowOffset,\n                  isStaticOffset: isStaticArrowOffset,\n                  coords: arrowCoords,\n                  placement: resolvedPlacement,\n                  getRootRef: setArrowRef,\n                }\n          }\n        />\n      </FocusTrap>,\n      tooltipContainer,\n    );\n  }\n\n  React.useEffect(\n    function initialize() {\n      const referenceEl = childRef.current;\n      if (!referenceEl) {\n        return;\n      }\n      const tooltipContainer =\n        tooltipContainerRef.current ||\n        // eslint-disable-next-line no-restricted-properties\n        referenceEl.closest<HTMLDivElement>(`[${onboardingTooltipContainerAttr}]`);\n      if (tooltipContainer) {\n        setTooltipContainer(tooltipContainer);\n        setPositionStrategy(referenceEl.style.position === 'fixed' ? 'fixed' : 'absolute');\n        refs.setReference(referenceEl);\n      }\n    },\n    [childRef, refs, tooltipContainerRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild = hasReactNode(children) && typeof children !== 'object';\n    (multiChildren || primitiveChild) &&\n      warn(\n        [\n          'children должен быть одним React элементом, получено',\n          multiChildren && 'несколько',\n          primitiveChild && JSON.stringify(children),\n        ]\n          .filter(Boolean)\n          .join(' '),\n        'error',\n      );\n\n    if (refs.reference.current && !tooltipContainer) {\n      throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');\n    }\n  }\n\n  return (\n    <React.Fragment>\n      {child}\n      {tooltip}\n    </React.Fragment>\n  );\n};\n"],"names":["React","hasReactNode","mergeStyle","useExternRef","usePatchChildren","createPortal","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","warnOnce","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","FocusTrap","useNavTransition","TOOLTIP_MAX_WIDTH","TooltipBase","onboardingTooltipContainerAttr","useOnboardingTooltipContext","warn","OnboardingTooltip","idProp","children","shownProp","arrowPadding","arrowHeight","offsetByMainAxis","offsetByCrossAxis","arrowOffset","isStaticArrowOffset","onClose","placementProp","maxWidth","styleProp","getRootRef","disableArrow","onPlacementChange","disableFlipMiddleware","overlayLabel","title","ariaLabel","ariaLabelledBy","restoreFocus","disableFocusTrap","restProps","generatedId","useId","tooltipId","entering","containerRef","tooltipContainerRef","arrowRef","setArrowRef","useState","tooltipContainer","setTooltipContainer","positionStrategy","setPositionStrategy","shown","middlewares","strictPlacement","placement","arrow","x","floatingDataX","y","floatingDataY","refs","resolvedPlacement","middlewareData","arrowCoords","strategy","middleware","whileElementsMounted","tooltipRef","setFloating","childRef","child","undefined","titleId","process","env","NODE_ENV","tooltip","floatingStyle","role","aria-modal","aria-label","aria-labelledby","disabled","button","className","onClickCapture","id","style","arrowProps","offset","isStaticOffset","coords","useEffect","initialize","referenceEl","current","closest","position","setReference","multiChildren","Children","count","primitiveChild","JSON","stringify","filter","Boolean","join","reference","Error","Fragment"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/OnboardingTooltip/OnboardingTooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { createPortal } from '../../lib/createPortal';\nimport {\n  autoUpdateFloatingElement,\n  convertFloatingDataToReactCSSProperties,\n  type FloatingComponentProps,\n  useFloating,\n  useFloatingMiddlewaresBootstrap,\n  usePlacementChangeCallback,\n} from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from '../FloatingArrow/DefaultIcon';\nimport type { FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\nimport { TOOLTIP_MAX_WIDTH, TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { onboardingTooltipContainerAttr } from './OnboardingTooltipContainer';\nimport styles from './OnboardingTooltip.module.css';\n\nconst warn = warnOnce('OnboardingTooltip');\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'arrowRef'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'shown'\n  | 'children'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n  | 'disableFocusTrap'\n>;\n\ntype AllowedTooltipBaseProps = Omit<\n  TooltipBaseProps,\n  'arrowProps' | 'closeIconLabel' | 'onCloseIconClick'\n>;\n\ntype AllowedFloatingArrowProps = {\n  /**\n   * Сдвиг стрелки относительно текущих координат.\n   */\n  arrowOffset?: FloatingArrowProps['offset'];\n  /**\n   * Включает абсолютное смещение по `arrowOffset`.\n   */\n  isStaticArrowOffset?: FloatingArrowProps['isStaticOffset'];\n};\n\nexport interface OnboardingTooltipProps\n  extends AllowedFloatingComponentProps,\n    AllowedTooltipBaseProps,\n    AllowedFloatingArrowProps,\n    Pick<UseFocusTrapProps, 'restoreFocus'> {\n  /**\n   * Скрывает стрелку, указывающую на якорный элемент.\n   */\n  disableArrow?: boolean;\n  /**\n   * Обработчик, который вызывается при нажатии по любому месту в пределах экрана.\n   */\n  onClose?: (this: void) => void;\n  /**\n   * [a11y] Метка для подложки-кнопки, для описания того, что произойдёт при нажатии.\n   */\n  overlayLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const OnboardingTooltip = ({\n  'id': idProp,\n  children,\n  'shown': shownProp = true,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  offsetByMainAxis = 0,\n  offsetByCrossAxis = 0,\n  arrowOffset = 0,\n  isStaticArrowOffset = false,\n  onClose,\n  'placement': placementProp = 'bottom-start',\n  maxWidth = TOOLTIP_MAX_WIDTH,\n  'style': styleProp,\n  getRootRef,\n  disableArrow = false,\n  onPlacementChange,\n  disableFlipMiddleware = false,\n  overlayLabel = 'Закрыть',\n  title,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  restoreFocus,\n  disableFocusTrap,\n  ...restProps\n}: OnboardingTooltipProps): React.ReactNode => {\n  const generatedId = React.useId();\n  const tooltipId = idProp || generatedId;\n  const { entering } = useNavTransition();\n\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const [tooltipContainer, setTooltipContainer] = React.useState<HTMLElement | null>(null);\n  const [positionStrategy, setPositionStrategy] = React.useState<'fixed' | 'absolute'>('absolute');\n  const shown = shownProp && tooltipContainer && !entering;\n\n  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    arrowRef,\n    arrow: !disableArrow,\n    arrowHeight,\n    arrowPadding,\n    disableFlipMiddleware,\n  });\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    refs,\n    placement: resolvedPlacement,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    strategy: positionStrategy,\n    placement: strictPlacement,\n    middleware: middlewares,\n    whileElementsMounted: autoUpdateFloatingElement,\n  });\n  const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);\n  const [childRef, child] = usePatchChildren(children, {\n    'aria-describedby': shown ? tooltipId : undefined,\n  });\n\n  usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n  const titleId = React.useId();\n  if (process.env.NODE_ENV === 'development' && !title && !ariaLabel && !ariaLabelledBy) {\n    warn(\n      'Если \"title\" не используется, то необходимо задать либо \"aria-label\", либо \"aria-labelledby\" (см. правило axe aria-dialog-name)',\n    );\n  }\n\n  let tooltip: React.ReactPortal | null = null;\n  if (shown) {\n    const floatingStyle = convertFloatingDataToReactCSSProperties({\n      strategy: positionStrategy,\n      x: floatingDataX,\n      y: floatingDataY,\n    });\n\n    tooltip = createPortal(\n      <FocusTrap\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={ariaLabel}\n        aria-labelledby={title ? titleId : ariaLabel ? undefined : ariaLabelledBy}\n        onClose={onClose}\n        disabled={disableFocusTrap}\n        restoreFocus={restoreFocus}\n      >\n        <button aria-label={overlayLabel} className={styles.overlay} onClickCapture={onClose} />\n        <TooltipBase\n          {...restProps}\n          id={tooltipId}\n          title={title}\n          titleId={title ? titleId : undefined}\n          getRootRef={tooltipRef}\n          style={mergeStyle(floatingStyle, styleProp)}\n          maxWidth={maxWidth}\n          arrowProps={\n            disableArrow\n              ? undefined\n              : {\n                  offset: arrowOffset,\n                  isStaticOffset: isStaticArrowOffset,\n                  coords: arrowCoords,\n                  placement: resolvedPlacement,\n                  getRootRef: setArrowRef,\n                }\n          }\n        />\n      </FocusTrap>,\n      tooltipContainer,\n    );\n  }\n\n  useIsomorphicLayoutEffect(\n    function initialize() {\n      const referenceEl = childRef.current;\n      if (referenceEl) {\n        setTooltipContainer(\n          referenceEl.closest<HTMLDivElement>(`[${onboardingTooltipContainerAttr}]`), // eslint-disable-line no-restricted-properties\n        );\n        setPositionStrategy(referenceEl.style.position === 'fixed' ? 'fixed' : 'absolute');\n        refs.setReference(referenceEl);\n      }\n    },\n    [childRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild = hasReactNode(children) && typeof children !== 'object';\n    (multiChildren || primitiveChild) &&\n      warn(\n        [\n          'children должен быть одним React элементом, получено',\n          multiChildren && 'несколько',\n          primitiveChild && JSON.stringify(children),\n        ]\n          .filter(Boolean)\n          .join(' '),\n        'error',\n      );\n\n    if (refs.reference.current && !tooltipContainer) {\n      throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');\n    }\n  }\n\n  return (\n    <React.Fragment>\n      {child}\n      {tooltip}\n    </React.Fragment>\n  );\n};\n"],"names":["React","hasReactNode","mergeStyle","useExternRef","usePatchChildren","createPortal","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","useIsomorphicLayoutEffect","warnOnce","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","FocusTrap","useNavTransition","TOOLTIP_MAX_WIDTH","TooltipBase","onboardingTooltipContainerAttr","warn","OnboardingTooltip","idProp","children","shownProp","arrowPadding","arrowHeight","offsetByMainAxis","offsetByCrossAxis","arrowOffset","isStaticArrowOffset","onClose","placementProp","maxWidth","styleProp","getRootRef","disableArrow","onPlacementChange","disableFlipMiddleware","overlayLabel","title","ariaLabel","ariaLabelledBy","restoreFocus","disableFocusTrap","restProps","generatedId","useId","tooltipId","entering","arrowRef","setArrowRef","useState","tooltipContainer","setTooltipContainer","positionStrategy","setPositionStrategy","shown","middlewares","strictPlacement","placement","arrow","x","floatingDataX","y","floatingDataY","refs","resolvedPlacement","middlewareData","arrowCoords","strategy","middleware","whileElementsMounted","tooltipRef","setFloating","childRef","child","undefined","titleId","process","env","NODE_ENV","tooltip","floatingStyle","role","aria-modal","aria-label","aria-labelledby","disabled","button","className","onClickCapture","id","style","arrowProps","offset","isStaticOffset","coords","initialize","referenceEl","current","closest","position","setReference","multiChildren","Children","count","primitiveChild","JSON","stringify","filter","Boolean","join","reference","Error","Fragment"],"mappings":"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"}

package/dist/components/OnboardingTooltip/OnboardingTooltipContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingTooltipContainer.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTooltip/OnboardingTooltipContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGlE,eAAO,MAAM,8BAA8B,sCAAsC,CAAC;AAElF,KAAK,+BAA+B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GACzE,YAAY,GACZ,gBAAgB,GAAG;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,yBAAyB,CACtE,KAAK,CAAC,eAAe,CAAC,+BAA+B,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAe7F,CAAC"}
+{"version":3,"file":"OnboardingTooltipContainer.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTooltip/OnboardingTooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAElE,eAAO,MAAM,8BAA8B,sCAAsC,CAAC;AAElF,KAAK,+BAA+B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GACzE,YAAY,GACZ,gBAAgB,GAAG;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,yBAAyB,CACtE,KAAK,CAAC,eAAe,CAAC,+BAA+B,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAU7F,CAAC"}

package/dist/components/OnboardingTooltip/OnboardingTooltipContainer.js

@@ -1,30 +1,21 @@
-'use client';
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { useExternRef } from "../../hooks/useExternRef.js";
 import { defineComponentDisplayNames } from "../../lib/react/defineComponentDisplayNames.js";
-import { OnboardingTooltipContext } from "./OnboardingTooltipContext.js";
 export const onboardingTooltipContainerAttr = 'data-onboarding-tooltip-container';
 export const OnboardingTooltipContainer = /*#__PURE__*/ React.forwardRef((_param, ref)=>{
     var { fixed = false, Component = 'div' } = _param, props = _object_without_properties(_param, [
         "fixed",
         "Component"
     ]);
-    const containerRef = useExternRef(ref);
     const dataProps = {
         [onboardingTooltipContainerAttr]: fixed ? 'fixed' : 'true'
     };
-    return /*#__PURE__*/ _jsx(OnboardingTooltipContext.Provider, {
-        value: {
-            containerRef
-        },
-        children: /*#__PURE__*/ _jsx(Component, _object_spread_props(_object_spread({}, dataProps, props), {
-            ref: containerRef
-        }))
-    });
+    return /*#__PURE__*/ _jsx(Component, _object_spread_props(_object_spread({}, dataProps, props), {
+        ref: ref
+    }));
 });
 if (process.env.NODE_ENV !== 'production') {
     defineComponentDisplayNames(OnboardingTooltipContainer, 'OnboardingTooltipContainer');

package/dist/components/OnboardingTooltip/OnboardingTooltipContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/OnboardingTooltip/OnboardingTooltipContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport type { HasComponent, HasDataAttribute } from '../../types';\nimport { OnboardingTooltipContext } from './OnboardingTooltipContext';\n\nexport const onboardingTooltipContainerAttr = 'data-onboarding-tooltip-container';\n\ntype OnboardingTooltipContainerProps = React.HTMLAttributes<HTMLDivElement> &\n  HasComponent &\n  HasDataAttribute & {\n    /**\n     * Фиксированное отображение тултипа.\n     */\n    fixed?: boolean;\n  };\n\nexport const OnboardingTooltipContainer: React.ForwardRefExoticComponent<\n  React.PropsWithoutRef<OnboardingTooltipContainerProps> & React.RefAttributes<HTMLDivElement>\n  // eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames\n> = React.forwardRef<HTMLDivElement, OnboardingTooltipContainerProps>(\n  ({ fixed = false, Component = 'div', ...props }, ref) => {\n    const containerRef = useExternRef(ref);\n    const dataProps = {\n      [onboardingTooltipContainerAttr]: fixed ? 'fixed' : 'true',\n    };\n\n    return (\n      <OnboardingTooltipContext.Provider value={{ containerRef }}>\n        <Component {...dataProps} {...props} ref={containerRef} />\n      </OnboardingTooltipContext.Provider>\n    );\n  },\n);\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(OnboardingTooltipContainer, 'OnboardingTooltipContainer');\n}\n"],"names":["React","useExternRef","defineComponentDisplayNames","OnboardingTooltipContext","onboardingTooltipContainerAttr","OnboardingTooltipContainer","forwardRef","ref","fixed","Component","props","containerRef","dataProps","Provider","value","process","env","NODE_ENV"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,2BAA2B,QAAQ,iDAA8C;AAE1F,SAASC,wBAAwB,QAAQ,gCAA6B;AAEtE,OAAO,MAAMC,iCAAiC,oCAAoC;AAWlF,OAAO,MAAMC,2CAGTL,MAAMM,UAAU,CAClB,SAAiDC;QAAhD,EAAEC,QAAQ,KAAK,EAAEC,YAAY,KAAK,EAAY,WAAPC;QAArCF;QAAeC;;IAChB,MAAME,eAAeV,aAAaM;IAClC,MAAMK,YAAY;QAChB,CAACR,+BAA+B,EAAEI,QAAQ,UAAU;IACtD;IAEA,qBACE,KAACL,yBAAyBU,QAAQ;QAACC,OAAO;YAAEH;QAAa;kBACvD,cAAA,KAACF,mDAAcG,WAAeF;YAAOH,KAAKI;;;AAGhD,GACA;AAEF,IAAII,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzCf,4BAA4BG,4BAA4B;AAC1D"}
+{"version":3,"sources":["../../../src/components/OnboardingTooltip/OnboardingTooltipContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport type { HasComponent, HasDataAttribute } from '../../types';\n\nexport const onboardingTooltipContainerAttr = 'data-onboarding-tooltip-container';\n\ntype OnboardingTooltipContainerProps = React.HTMLAttributes<HTMLDivElement> &\n  HasComponent &\n  HasDataAttribute & {\n    /**\n     * Фиксированное отображение тултипа.\n     */\n    fixed?: boolean;\n  };\n\nexport const OnboardingTooltipContainer: React.ForwardRefExoticComponent<\n  React.PropsWithoutRef<OnboardingTooltipContainerProps> & React.RefAttributes<HTMLDivElement>\n  // eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames\n> = React.forwardRef<HTMLDivElement, OnboardingTooltipContainerProps>(\n  ({ fixed = false, Component = 'div', ...props }, ref) => {\n    const dataProps = {\n      [onboardingTooltipContainerAttr]: fixed ? 'fixed' : 'true',\n    };\n\n    return <Component {...dataProps} {...props} ref={ref} />;\n  },\n);\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(OnboardingTooltipContainer, 'OnboardingTooltipContainer');\n}\n"],"names":["React","defineComponentDisplayNames","onboardingTooltipContainerAttr","OnboardingTooltipContainer","forwardRef","ref","fixed","Component","props","dataProps","process","env","NODE_ENV"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,iDAA8C;AAG1F,OAAO,MAAMC,iCAAiC,oCAAoC;AAWlF,OAAO,MAAMC,2CAGTH,MAAMI,UAAU,CAClB,SAAiDC;QAAhD,EAAEC,QAAQ,KAAK,EAAEC,YAAY,KAAK,EAAY,WAAPC;QAArCF;QAAeC;;IAChB,MAAME,YAAY;QAChB,CAACP,+BAA+B,EAAEI,QAAQ,UAAU;IACtD;IAEA,qBAAO,KAACC,mDAAcE,WAAeD;QAAOH,KAAKA;;AACnD,GACA;AAEF,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzCX,4BAA4BE,4BAA4B;AAC1D"}

package/dist/cssm/components/OnboardingTooltip/OnboardingTooltip.js

@@ -7,13 +7,13 @@ import { useExternRef } from "../../hooks/useExternRef.js";
 import { usePatchChildren } from "../../hooks/usePatchChildren.js";
 import { createPortal } from "../../lib/createPortal.js";
 import { autoUpdateFloatingElement, convertFloatingDataToReactCSSProperties, useFloating, useFloatingMiddlewaresBootstrap, usePlacementChangeCallback } from "../../lib/floating/index.js";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 import { warnOnce } from "../../lib/warnOnce.js";
 import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from "../FloatingArrow/DefaultIcon.js";
 import { FocusTrap } from "../FocusTrap/FocusTrap.js";
 import { useNavTransition } from "../NavTransitionContext/NavTransitionContext.js";
 import { TOOLTIP_MAX_WIDTH, TooltipBase } from "../TooltipBase/TooltipBase.js";
 import { onboardingTooltipContainerAttr } from "./OnboardingTooltipContainer.js";
-import { useOnboardingTooltipContext } from "./OnboardingTooltipContext.js";
 import styles from "./OnboardingTooltip.module.css";
 const warn = warnOnce('OnboardingTooltip');
 /**
@@ -22,7 +22,6 @@ const warn = warnOnce('OnboardingTooltip');
     const generatedId = React.useId();
     const tooltipId = idProp || generatedId;
     const { entering } = useNavTransition();
-    const { containerRef: tooltipContainerRef } = useOnboardingTooltipContext();
     const [arrowRef, setArrowRef] = React.useState(null);
     const [tooltipContainer, setTooltipContainer] = React.useState(null);
     const [positionStrategy, setPositionStrategy] = React.useState('absolute');
@@ -92,22 +91,15 @@ const warn = warnOnce('OnboardingTooltip');
             ]
         }), tooltipContainer);
     }
-    React.useEffect(function initialize() {
+    useIsomorphicLayoutEffect(function initialize() {
         const referenceEl = childRef.current;
-        if (!referenceEl) {
-            return;
-        }
-        const tooltipContainer = tooltipContainerRef.current || // eslint-disable-next-line no-restricted-properties
-        referenceEl.closest(`[${onboardingTooltipContainerAttr}]`);
-        if (tooltipContainer) {
-            setTooltipContainer(tooltipContainer);
+        if (referenceEl) {
+            setTooltipContainer(referenceEl.closest(`[${onboardingTooltipContainerAttr}]`));
             setPositionStrategy(referenceEl.style.position === 'fixed' ? 'fixed' : 'absolute');
             refs.setReference(referenceEl);
         }
     }, [
-        childRef,
-        refs,
-        tooltipContainerRef
+        childRef
     ]);
     if (process.env.NODE_ENV === 'development') {
         const multiChildren = React.Children.count(children) > 1;

package/dist/cssm/components/OnboardingTooltip/OnboardingTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/OnboardingTooltip/OnboardingTooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { createPortal } from '../../lib/createPortal';\nimport {\n  autoUpdateFloatingElement,\n  convertFloatingDataToReactCSSProperties,\n  type FloatingComponentProps,\n  useFloating,\n  useFloatingMiddlewaresBootstrap,\n  usePlacementChangeCallback,\n} from '../../lib/floating';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from '../FloatingArrow/DefaultIcon';\nimport type { FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\nimport { TOOLTIP_MAX_WIDTH, TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { onboardingTooltipContainerAttr } from './OnboardingTooltipContainer';\nimport { useOnboardingTooltipContext } from './OnboardingTooltipContext';\nimport styles from './OnboardingTooltip.module.css';\n\nconst warn = warnOnce('OnboardingTooltip');\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'arrowRef'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'shown'\n  | 'children'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n  | 'disableFocusTrap'\n>;\n\ntype AllowedTooltipBaseProps = Omit<\n  TooltipBaseProps,\n  'arrowProps' | 'closeIconLabel' | 'onCloseIconClick'\n>;\n\ntype AllowedFloatingArrowProps = {\n  /**\n   * Сдвиг стрелки относительно текущих координат.\n   */\n  arrowOffset?: FloatingArrowProps['offset'];\n  /**\n   * Включает абсолютное смещение по `arrowOffset`.\n   */\n  isStaticArrowOffset?: FloatingArrowProps['isStaticOffset'];\n};\n\nexport interface OnboardingTooltipProps\n  extends AllowedFloatingComponentProps,\n    AllowedTooltipBaseProps,\n    AllowedFloatingArrowProps,\n    Pick<UseFocusTrapProps, 'restoreFocus'> {\n  /**\n   * Скрывает стрелку, указывающую на якорный элемент.\n   */\n  disableArrow?: boolean;\n  /**\n   * Обработчик, который вызывается при нажатии по любому месту в пределах экрана.\n   */\n  onClose?: (this: void) => void;\n  /**\n   * [a11y] Метка для подложки-кнопки, для описания того, что произойдёт при нажатии.\n   */\n  overlayLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const OnboardingTooltip = ({\n  'id': idProp,\n  children,\n  'shown': shownProp = true,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  offsetByMainAxis = 0,\n  offsetByCrossAxis = 0,\n  arrowOffset = 0,\n  isStaticArrowOffset = false,\n  onClose,\n  'placement': placementProp = 'bottom-start',\n  maxWidth = TOOLTIP_MAX_WIDTH,\n  'style': styleProp,\n  getRootRef,\n  disableArrow = false,\n  onPlacementChange,\n  disableFlipMiddleware = false,\n  overlayLabel = 'Закрыть',\n  title,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  restoreFocus,\n  disableFocusTrap,\n  ...restProps\n}: OnboardingTooltipProps): React.ReactNode => {\n  const generatedId = React.useId();\n  const tooltipId = idProp || generatedId;\n  const { entering } = useNavTransition();\n  const { containerRef: tooltipContainerRef } = useOnboardingTooltipContext();\n\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const [tooltipContainer, setTooltipContainer] = React.useState<HTMLElement | null>(null);\n  const [positionStrategy, setPositionStrategy] = React.useState<'fixed' | 'absolute'>('absolute');\n  const shown = shownProp && tooltipContainer && !entering;\n\n  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    arrowRef,\n    arrow: !disableArrow,\n    arrowHeight,\n    arrowPadding,\n    disableFlipMiddleware,\n  });\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    refs,\n    placement: resolvedPlacement,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    strategy: positionStrategy,\n    placement: strictPlacement,\n    middleware: middlewares,\n    whileElementsMounted: autoUpdateFloatingElement,\n  });\n  const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);\n  const [childRef, child] = usePatchChildren(children, {\n    'aria-describedby': shown ? tooltipId : undefined,\n  });\n\n  usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n  const titleId = React.useId();\n  if (process.env.NODE_ENV === 'development' && !title && !ariaLabel && !ariaLabelledBy) {\n    warn(\n      'Если \"title\" не используется, то необходимо задать либо \"aria-label\", либо \"aria-labelledby\" (см. правило axe aria-dialog-name)',\n    );\n  }\n\n  let tooltip: React.ReactPortal | null = null;\n  if (shown) {\n    const floatingStyle = convertFloatingDataToReactCSSProperties({\n      strategy: positionStrategy,\n      x: floatingDataX,\n      y: floatingDataY,\n    });\n\n    tooltip = createPortal(\n      <FocusTrap\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={ariaLabel}\n        aria-labelledby={title ? titleId : ariaLabel ? undefined : ariaLabelledBy}\n        onClose={onClose}\n        disabled={disableFocusTrap}\n        restoreFocus={restoreFocus}\n      >\n        <button aria-label={overlayLabel} className={styles.overlay} onClickCapture={onClose} />\n        <TooltipBase\n          {...restProps}\n          id={tooltipId}\n          title={title}\n          titleId={title ? titleId : undefined}\n          getRootRef={tooltipRef}\n          style={mergeStyle(floatingStyle, styleProp)}\n          maxWidth={maxWidth}\n          arrowProps={\n            disableArrow\n              ? undefined\n              : {\n                  offset: arrowOffset,\n                  isStaticOffset: isStaticArrowOffset,\n                  coords: arrowCoords,\n                  placement: resolvedPlacement,\n                  getRootRef: setArrowRef,\n                }\n          }\n        />\n      </FocusTrap>,\n      tooltipContainer,\n    );\n  }\n\n  React.useEffect(\n    function initialize() {\n      const referenceEl = childRef.current;\n      if (!referenceEl) {\n        return;\n      }\n      const tooltipContainer =\n        tooltipContainerRef.current ||\n        // eslint-disable-next-line no-restricted-properties\n        referenceEl.closest<HTMLDivElement>(`[${onboardingTooltipContainerAttr}]`);\n      if (tooltipContainer) {\n        setTooltipContainer(tooltipContainer);\n        setPositionStrategy(referenceEl.style.position === 'fixed' ? 'fixed' : 'absolute');\n        refs.setReference(referenceEl);\n      }\n    },\n    [childRef, refs, tooltipContainerRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild = hasReactNode(children) && typeof children !== 'object';\n    (multiChildren || primitiveChild) &&\n      warn(\n        [\n          'children должен быть одним React элементом, получено',\n          multiChildren && 'несколько',\n          primitiveChild && JSON.stringify(children),\n        ]\n          .filter(Boolean)\n          .join(' '),\n        'error',\n      );\n\n    if (refs.reference.current && !tooltipContainer) {\n      throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');\n    }\n  }\n\n  return (\n    <React.Fragment>\n      {child}\n      {tooltip}\n    </React.Fragment>\n  );\n};\n"],"names":["React","hasReactNode","mergeStyle","useExternRef","usePatchChildren","createPortal","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","warnOnce","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","FocusTrap","useNavTransition","TOOLTIP_MAX_WIDTH","TooltipBase","onboardingTooltipContainerAttr","useOnboardingTooltipContext","styles","warn","OnboardingTooltip","idProp","children","shownProp","arrowPadding","arrowHeight","offsetByMainAxis","offsetByCrossAxis","arrowOffset","isStaticArrowOffset","onClose","placementProp","maxWidth","styleProp","getRootRef","disableArrow","onPlacementChange","disableFlipMiddleware","overlayLabel","title","ariaLabel","ariaLabelledBy","restoreFocus","disableFocusTrap","restProps","generatedId","useId","tooltipId","entering","containerRef","tooltipContainerRef","arrowRef","setArrowRef","useState","tooltipContainer","setTooltipContainer","positionStrategy","setPositionStrategy","shown","middlewares","strictPlacement","placement","arrow","x","floatingDataX","y","floatingDataY","refs","resolvedPlacement","middlewareData","arrowCoords","strategy","middleware","whileElementsMounted","tooltipRef","setFloating","childRef","child","undefined","titleId","process","env","NODE_ENV","tooltip","floatingStyle","role","aria-modal","aria-label","aria-labelledby","disabled","button","className","overlay","onClickCapture","id","style","arrowProps","offset","isStaticOffset","coords","useEffect","initialize","referenceEl","current","closest","position","setReference","multiChildren","Children","count","primitiveChild","JSON","stringify","filter","Boolean","join","reference","Error","Fragment"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/OnboardingTooltip/OnboardingTooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { createPortal } from '../../lib/createPortal';\nimport {\n  autoUpdateFloatingElement,\n  convertFloatingDataToReactCSSProperties,\n  type FloatingComponentProps,\n  useFloating,\n  useFloatingMiddlewaresBootstrap,\n  usePlacementChangeCallback,\n} from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from '../FloatingArrow/DefaultIcon';\nimport type { FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\nimport { TOOLTIP_MAX_WIDTH, TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { onboardingTooltipContainerAttr } from './OnboardingTooltipContainer';\nimport styles from './OnboardingTooltip.module.css';\n\nconst warn = warnOnce('OnboardingTooltip');\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'arrowRef'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'shown'\n  | 'children'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n  | 'disableFocusTrap'\n>;\n\ntype AllowedTooltipBaseProps = Omit<\n  TooltipBaseProps,\n  'arrowProps' | 'closeIconLabel' | 'onCloseIconClick'\n>;\n\ntype AllowedFloatingArrowProps = {\n  /**\n   * Сдвиг стрелки относительно текущих координат.\n   */\n  arrowOffset?: FloatingArrowProps['offset'];\n  /**\n   * Включает абсолютное смещение по `arrowOffset`.\n   */\n  isStaticArrowOffset?: FloatingArrowProps['isStaticOffset'];\n};\n\nexport interface OnboardingTooltipProps\n  extends AllowedFloatingComponentProps,\n    AllowedTooltipBaseProps,\n    AllowedFloatingArrowProps,\n    Pick<UseFocusTrapProps, 'restoreFocus'> {\n  /**\n   * Скрывает стрелку, указывающую на якорный элемент.\n   */\n  disableArrow?: boolean;\n  /**\n   * Обработчик, который вызывается при нажатии по любому месту в пределах экрана.\n   */\n  onClose?: (this: void) => void;\n  /**\n   * [a11y] Метка для подложки-кнопки, для описания того, что произойдёт при нажатии.\n   */\n  overlayLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const OnboardingTooltip = ({\n  'id': idProp,\n  children,\n  'shown': shownProp = true,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  offsetByMainAxis = 0,\n  offsetByCrossAxis = 0,\n  arrowOffset = 0,\n  isStaticArrowOffset = false,\n  onClose,\n  'placement': placementProp = 'bottom-start',\n  maxWidth = TOOLTIP_MAX_WIDTH,\n  'style': styleProp,\n  getRootRef,\n  disableArrow = false,\n  onPlacementChange,\n  disableFlipMiddleware = false,\n  overlayLabel = 'Закрыть',\n  title,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  restoreFocus,\n  disableFocusTrap,\n  ...restProps\n}: OnboardingTooltipProps): React.ReactNode => {\n  const generatedId = React.useId();\n  const tooltipId = idProp || generatedId;\n  const { entering } = useNavTransition();\n\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const [tooltipContainer, setTooltipContainer] = React.useState<HTMLElement | null>(null);\n  const [positionStrategy, setPositionStrategy] = React.useState<'fixed' | 'absolute'>('absolute');\n  const shown = shownProp && tooltipContainer && !entering;\n\n  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    arrowRef,\n    arrow: !disableArrow,\n    arrowHeight,\n    arrowPadding,\n    disableFlipMiddleware,\n  });\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    refs,\n    placement: resolvedPlacement,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    strategy: positionStrategy,\n    placement: strictPlacement,\n    middleware: middlewares,\n    whileElementsMounted: autoUpdateFloatingElement,\n  });\n  const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);\n  const [childRef, child] = usePatchChildren(children, {\n    'aria-describedby': shown ? tooltipId : undefined,\n  });\n\n  usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n  const titleId = React.useId();\n  if (process.env.NODE_ENV === 'development' && !title && !ariaLabel && !ariaLabelledBy) {\n    warn(\n      'Если \"title\" не используется, то необходимо задать либо \"aria-label\", либо \"aria-labelledby\" (см. правило axe aria-dialog-name)',\n    );\n  }\n\n  let tooltip: React.ReactPortal | null = null;\n  if (shown) {\n    const floatingStyle = convertFloatingDataToReactCSSProperties({\n      strategy: positionStrategy,\n      x: floatingDataX,\n      y: floatingDataY,\n    });\n\n    tooltip = createPortal(\n      <FocusTrap\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={ariaLabel}\n        aria-labelledby={title ? titleId : ariaLabel ? undefined : ariaLabelledBy}\n        onClose={onClose}\n        disabled={disableFocusTrap}\n        restoreFocus={restoreFocus}\n      >\n        <button aria-label={overlayLabel} className={styles.overlay} onClickCapture={onClose} />\n        <TooltipBase\n          {...restProps}\n          id={tooltipId}\n          title={title}\n          titleId={title ? titleId : undefined}\n          getRootRef={tooltipRef}\n          style={mergeStyle(floatingStyle, styleProp)}\n          maxWidth={maxWidth}\n          arrowProps={\n            disableArrow\n              ? undefined\n              : {\n                  offset: arrowOffset,\n                  isStaticOffset: isStaticArrowOffset,\n                  coords: arrowCoords,\n                  placement: resolvedPlacement,\n                  getRootRef: setArrowRef,\n                }\n          }\n        />\n      </FocusTrap>,\n      tooltipContainer,\n    );\n  }\n\n  useIsomorphicLayoutEffect(\n    function initialize() {\n      const referenceEl = childRef.current;\n      if (referenceEl) {\n        setTooltipContainer(\n          referenceEl.closest<HTMLDivElement>(`[${onboardingTooltipContainerAttr}]`), // eslint-disable-line no-restricted-properties\n        );\n        setPositionStrategy(referenceEl.style.position === 'fixed' ? 'fixed' : 'absolute');\n        refs.setReference(referenceEl);\n      }\n    },\n    [childRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild = hasReactNode(children) && typeof children !== 'object';\n    (multiChildren || primitiveChild) &&\n      warn(\n        [\n          'children должен быть одним React элементом, получено',\n          multiChildren && 'несколько',\n          primitiveChild && JSON.stringify(children),\n        ]\n          .filter(Boolean)\n          .join(' '),\n        'error',\n      );\n\n    if (refs.reference.current && !tooltipContainer) {\n      throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');\n    }\n  }\n\n  return (\n    <React.Fragment>\n      {child}\n      {tooltip}\n    </React.Fragment>\n  );\n};\n"],"names":["React","hasReactNode","mergeStyle","useExternRef","usePatchChildren","createPortal","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","useIsomorphicLayoutEffect","warnOnce","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","FocusTrap","useNavTransition","TOOLTIP_MAX_WIDTH","TooltipBase","onboardingTooltipContainerAttr","styles","warn","OnboardingTooltip","idProp","children","shownProp","arrowPadding","arrowHeight","offsetByMainAxis","offsetByCrossAxis","arrowOffset","isStaticArrowOffset","onClose","placementProp","maxWidth","styleProp","getRootRef","disableArrow","onPlacementChange","disableFlipMiddleware","overlayLabel","title","ariaLabel","ariaLabelledBy","restoreFocus","disableFocusTrap","restProps","generatedId","useId","tooltipId","entering","arrowRef","setArrowRef","useState","tooltipContainer","setTooltipContainer","positionStrategy","setPositionStrategy","shown","middlewares","strictPlacement","placement","arrow","x","floatingDataX","y","floatingDataY","refs","resolvedPlacement","middlewareData","arrowCoords","strategy","middleware","whileElementsMounted","tooltipRef","setFloating","childRef","child","undefined","titleId","process","env","NODE_ENV","tooltip","floatingStyle","role","aria-modal","aria-label","aria-labelledby","disabled","button","className","overlay","onClickCapture","id","style","arrowProps","offset","isStaticOffset","coords","initialize","referenceEl","current","closest","position","setReference","multiChildren","Children","count","primitiveChild","JSON","stringify","filter","Boolean","join","reference","Error","Fragment"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,YAAY,QAAQ,8BAA2B;AAExD,SAASC,gBAAgB,QAAQ,kCAA+B;AAChE,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SACEC,yBAAyB,EACzBC,uCAAuC,EAEvCC,WAAW,EACXC,+BAA+B,EAC/BC,0BAA0B,QACrB,8BAAqB;AAC5B,SAASC,yBAAyB,QAAQ,yCAAsC;AAChF,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,oBAAoB,EAAEC,qBAAqB,QAAQ,kCAA+B;AAE3F,SAASC,SAAS,QAAQ,4BAAyB;AACnD,SAASC,gBAAgB,QAAQ,kDAA+C;AAChF,SAASC,iBAAiB,EAAEC,WAAW,QAA+B,gCAA6B;AACnG,SAASC,8BAA8B,QAAQ,kCAA+B;AAC9E,OAAOC,YAAY,iCAAiC;AAEpD,MAAMC,OAAOT,SAAS;AAoDtB;;CAEC,GACD,OAAO,MAAMU,oBAAoB,CAAC,EAChC,MAAMC,MAAM,EACZC,QAAQ,EACR,SAASC,YAAY,IAAI,EACzBC,eAAeZ,qBAAqB,EACpCa,cAAcd,oBAAoB,EAClCe,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,cAAc,CAAC,EACfC,sBAAsB,KAAK,EAC3BC,OAAO,EACP,aAAaC,gBAAgB,cAAc,EAC3CC,WAAWjB,iBAAiB,EAC5B,SAASkB,SAAS,EAClBC,UAAU,EACVC,eAAe,KAAK,EACpBC,iBAAiB,EACjBC,wBAAwB,KAAK,EAC7BC,eAAe,SAAS,EACxBC,KAAK,EACL,cAAcC,SAAS,EACvB,mBAAmBC,cAAc,EACjCC,YAAY,EACZC,gBAAgB,EAChB,GAAGC,WACoB;IACvB,MAAMC,cAAc/C,MAAMgD,KAAK;IAC/B,MAAMC,YAAY1B,UAAUwB;IAC5B,MAAM,EAAEG,QAAQ,EAAE,GAAGlC;IAErB,MAAM,CAACmC,UAAUC,YAAY,GAAGpD,MAAMqD,QAAQ,CAAwB;IACtE,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGvD,MAAMqD,QAAQ,CAAqB;IACnF,MAAM,CAACG,kBAAkBC,oBAAoB,GAAGzD,MAAMqD,QAAQ,CAAuB;IACrF,MAAMK,QAAQjC,aAAa6B,oBAAoB,CAACJ;IAEhD,MAAM,EAAES,WAAW,EAAEC,eAAe,EAAE,GAAGnD,gCAAgC;QACvEoD,WAAW5B;QACXL;QACAC;QACAsB;QACAW,OAAO,CAACzB;QACRV;QACAD;QACAa;IACF;IACA,MAAM,EACJwB,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,IAAI,EACJN,WAAWO,iBAAiB,EAC5BC,gBAAgB,EAAEP,OAAOQ,WAAW,EAAE,EACvC,GAAG9D,YAAY;QACd+D,UAAUf;QACVK,WAAWD;QACXY,YAAYb;QACZc,sBAAsBnE;IACxB;IACA,MAAMoE,aAAavE,aAA6BiC,YAAY+B,KAAKQ,WAAW;IAC5E,MAAM,CAACC,UAAUC,MAAM,GAAGzE,iBAAiBoB,UAAU;QACnD,oBAAoBkC,QAAQT,YAAY6B;IAC1C;IAEApE,2BAA2BuB,eAAemC,mBAAmB9B;IAE7D,MAAMyC,UAAU/E,MAAMgD,KAAK;IAC3B,IAAIgC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiB,CAACzC,SAAS,CAACC,aAAa,CAACC,gBAAgB;QACrFtB,KACE;IAEJ;IAEA,IAAI8D,UAAoC;IACxC,IAAIzB,OAAO;QACT,MAAM0B,gBAAgB7E,wCAAwC;YAC5DgE,UAAUf;YACVO,GAAGC;YACHC,GAAGC;QACL;QAEAiB,UAAU9E,2BACR,MAACU;YACCsE,MAAK;YACLC,cAAW;YACXC,cAAY7C;YACZ8C,mBAAiB/C,QAAQsC,UAAUrC,YAAYoC,YAAYnC;YAC3DX,SAASA;YACTyD,UAAU5C;YACVD,cAAcA;;8BAEd,KAAC8C;oBAAOH,cAAY/C;oBAAcmD,WAAWvE,OAAOwE,OAAO;oBAAEC,gBAAgB7D;;8BAC7E,KAACd;oBACE,GAAG4B,SAAS;oBACbgD,IAAI7C;oBACJR,OAAOA;oBACPsC,SAAStC,QAAQsC,UAAUD;oBAC3B1C,YAAYsC;oBACZqB,OAAO7F,WAAWkF,eAAejD;oBACjCD,UAAUA;oBACV8D,YACE3D,eACIyC,YACA;wBACEmB,QAAQnE;wBACRoE,gBAAgBnE;wBAChBoE,QAAQ7B;wBACRT,WAAWO;wBACXhC,YAAYgB;oBACd;;;YAIVE;IAEJ;IAEA3C,0BACE,SAASyF;QACP,MAAMC,cAAczB,SAAS0B,OAAO;QACpC,IAAID,aAAa;YACf9C,oBACE8C,YAAYE,OAAO,CAAiB,CAAC,CAAC,EAAEpF,+BAA+B,CAAC,CAAC;YAE3EsC,oBAAoB4C,YAAYN,KAAK,CAACS,QAAQ,KAAK,UAAU,UAAU;YACvErC,KAAKsC,YAAY,CAACJ;QACpB;IACF,GACA;QAACzB;KAAS;IAGZ,IAAII,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMwB,gBAAgB1G,MAAM2G,QAAQ,CAACC,KAAK,CAACpF,YAAY;QACvD,2BAA2B;QAC3B,MAAMqF,iBAAiB5G,aAAauB,aAAa,OAAOA,aAAa;QACpEkF,CAAAA,iBAAiBG,cAAa,KAC7BxF,KACE;YACE;YACAqF,iBAAiB;YACjBG,kBAAkBC,KAAKC,SAAS,CAACvF;SAClC,CACEwF,MAAM,CAACC,SACPC,IAAI,CAAC,MACR;QAGJ,IAAI/C,KAAKgD,SAAS,CAACb,OAAO,IAAI,CAAChD,kBAAkB;YAC/C,MAAM,IAAI8D,MAAM;QAClB;IACF;IAEA,qBACE,MAACpH,MAAMqH,QAAQ;;YACZxC;YACAM;;;AAGP,EAAE"}

package/dist/cssm/components/OnboardingTooltip/OnboardingTooltipContainer.js

@@ -1,24 +1,15 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { useExternRef } from "../../hooks/useExternRef.js";
 import { defineComponentDisplayNames } from "../../lib/react/defineComponentDisplayNames.js";
-import { OnboardingTooltipContext } from "./OnboardingTooltipContext.js";
 export const onboardingTooltipContainerAttr = 'data-onboarding-tooltip-container';
 export const OnboardingTooltipContainer = /*#__PURE__*/ React.forwardRef(({ fixed = false, Component = 'div', ...props }, ref)=>{
-    const containerRef = useExternRef(ref);
     const dataProps = {
         [onboardingTooltipContainerAttr]: fixed ? 'fixed' : 'true'
     };
-    return /*#__PURE__*/ _jsx(OnboardingTooltipContext.Provider, {
-        value: {
-            containerRef
-        },
-        children: /*#__PURE__*/ _jsx(Component, {
-            ...dataProps,
-            ...props,
-            ref: containerRef
-        })
+    return /*#__PURE__*/ _jsx(Component, {
+        ...dataProps,
+        ...props,
+        ref: ref
     });
 });
 if (process.env.NODE_ENV !== 'production') {

package/dist/cssm/components/OnboardingTooltip/OnboardingTooltipContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/OnboardingTooltip/OnboardingTooltipContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport type { HasComponent, HasDataAttribute } from '../../types';\nimport { OnboardingTooltipContext } from './OnboardingTooltipContext';\n\nexport const onboardingTooltipContainerAttr = 'data-onboarding-tooltip-container';\n\ntype OnboardingTooltipContainerProps = React.HTMLAttributes<HTMLDivElement> &\n  HasComponent &\n  HasDataAttribute & {\n    /**\n     * Фиксированное отображение тултипа.\n     */\n    fixed?: boolean;\n  };\n\nexport const OnboardingTooltipContainer: React.ForwardRefExoticComponent<\n  React.PropsWithoutRef<OnboardingTooltipContainerProps> & React.RefAttributes<HTMLDivElement>\n  // eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames\n> = React.forwardRef<HTMLDivElement, OnboardingTooltipContainerProps>(\n  ({ fixed = false, Component = 'div', ...props }, ref) => {\n    const containerRef = useExternRef(ref);\n    const dataProps = {\n      [onboardingTooltipContainerAttr]: fixed ? 'fixed' : 'true',\n    };\n\n    return (\n      <OnboardingTooltipContext.Provider value={{ containerRef }}>\n        <Component {...dataProps} {...props} ref={containerRef} />\n      </OnboardingTooltipContext.Provider>\n    );\n  },\n);\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(OnboardingTooltipContainer, 'OnboardingTooltipContainer');\n}\n"],"names":["React","useExternRef","defineComponentDisplayNames","OnboardingTooltipContext","onboardingTooltipContainerAttr","OnboardingTooltipContainer","forwardRef","fixed","Component","props","ref","containerRef","dataProps","Provider","value","process","env","NODE_ENV"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,2BAA2B,QAAQ,iDAA8C;AAE1F,SAASC,wBAAwB,QAAQ,gCAA6B;AAEtE,OAAO,MAAMC,iCAAiC,oCAAoC;AAWlF,OAAO,MAAMC,2CAGTL,MAAMM,UAAU,CAClB,CAAC,EAAEC,QAAQ,KAAK,EAAEC,YAAY,KAAK,EAAE,GAAGC,OAAO,EAAEC;IAC/C,MAAMC,eAAeV,aAAaS;IAClC,MAAME,YAAY;QAChB,CAACR,+BAA+B,EAAEG,QAAQ,UAAU;IACtD;IAEA,qBACE,KAACJ,yBAAyBU,QAAQ;QAACC,OAAO;YAAEH;QAAa;kBACvD,cAAA,KAACH;YAAW,GAAGI,SAAS;YAAG,GAAGH,KAAK;YAAEC,KAAKC;;;AAGhD,GACA;AAEF,IAAII,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzCf,4BAA4BG,4BAA4B;AAC1D"}
+{"version":3,"sources":["../../../../src/components/OnboardingTooltip/OnboardingTooltipContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport type { HasComponent, HasDataAttribute } from '../../types';\n\nexport const onboardingTooltipContainerAttr = 'data-onboarding-tooltip-container';\n\ntype OnboardingTooltipContainerProps = React.HTMLAttributes<HTMLDivElement> &\n  HasComponent &\n  HasDataAttribute & {\n    /**\n     * Фиксированное отображение тултипа.\n     */\n    fixed?: boolean;\n  };\n\nexport const OnboardingTooltipContainer: React.ForwardRefExoticComponent<\n  React.PropsWithoutRef<OnboardingTooltipContainerProps> & React.RefAttributes<HTMLDivElement>\n  // eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames\n> = React.forwardRef<HTMLDivElement, OnboardingTooltipContainerProps>(\n  ({ fixed = false, Component = 'div', ...props }, ref) => {\n    const dataProps = {\n      [onboardingTooltipContainerAttr]: fixed ? 'fixed' : 'true',\n    };\n\n    return <Component {...dataProps} {...props} ref={ref} />;\n  },\n);\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(OnboardingTooltipContainer, 'OnboardingTooltipContainer');\n}\n"],"names":["React","defineComponentDisplayNames","onboardingTooltipContainerAttr","OnboardingTooltipContainer","forwardRef","fixed","Component","props","ref","dataProps","process","env","NODE_ENV"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,iDAA8C;AAG1F,OAAO,MAAMC,iCAAiC,oCAAoC;AAWlF,OAAO,MAAMC,2CAGTH,MAAMI,UAAU,CAClB,CAAC,EAAEC,QAAQ,KAAK,EAAEC,YAAY,KAAK,EAAE,GAAGC,OAAO,EAAEC;IAC/C,MAAMC,YAAY;QAChB,CAACP,+BAA+B,EAAEG,QAAQ,UAAU;IACtD;IAEA,qBAAO,KAACC;QAAW,GAAGG,SAAS;QAAG,GAAGF,KAAK;QAAEC,KAAKA;;AACnD,GACA;AAEF,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzCX,4BAA4BE,4BAA4B;AAC1D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.4.3",
+  "version": "7.4.4",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",

package/src/components/OnboardingTooltip/OnboardingTooltip.tsx

@@ -15,6 +15,7 @@ import {
   useFloatingMiddlewaresBootstrap,
   usePlacementChangeCallback,
 } from '../../lib/floating';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
 import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from '../FloatingArrow/DefaultIcon';
 import type { FloatingArrowProps } from '../FloatingArrow/FloatingArrow';
@@ -22,7 +23,6 @@ import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { useNavTransition } from '../NavTransitionContext/NavTransitionContext';
 import { TOOLTIP_MAX_WIDTH, TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';
 import { onboardingTooltipContainerAttr } from './OnboardingTooltipContainer';
-import { useOnboardingTooltipContext } from './OnboardingTooltipContext';
 import styles from './OnboardingTooltip.module.css';
 
 const warn = warnOnce('OnboardingTooltip');
@@ -109,7 +109,6 @@ export const OnboardingTooltip = ({
   const generatedId = React.useId();
   const tooltipId = idProp || generatedId;
   const { entering } = useNavTransition();
-  const { containerRef: tooltipContainerRef } = useOnboardingTooltipContext();
 
   const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);
   const [tooltipContainer, setTooltipContainer] = React.useState<HTMLElement | null>(null);
@@ -196,23 +195,18 @@ export const OnboardingTooltip = ({
     );
   }
 
-  React.useEffect(
+  useIsomorphicLayoutEffect(
     function initialize() {
       const referenceEl = childRef.current;
-      if (!referenceEl) {
-        return;
-      }
-      const tooltipContainer =
-        tooltipContainerRef.current ||
-        // eslint-disable-next-line no-restricted-properties
-        referenceEl.closest<HTMLDivElement>(`[${onboardingTooltipContainerAttr}]`);
-      if (tooltipContainer) {
-        setTooltipContainer(tooltipContainer);
+      if (referenceEl) {
+        setTooltipContainer(
+          referenceEl.closest<HTMLDivElement>(`[${onboardingTooltipContainerAttr}]`), // eslint-disable-line no-restricted-properties
+        );
         setPositionStrategy(referenceEl.style.position === 'fixed' ? 'fixed' : 'absolute');
         refs.setReference(referenceEl);
       }
     },
-    [childRef, refs, tooltipContainerRef],
+    [childRef],
   );
 
   if (process.env.NODE_ENV === 'development') {

package/src/components/OnboardingTooltip/OnboardingTooltipContainer.tsx

@@ -1,10 +1,6 @@
-'use client';
-
 import * as React from 'react';
-import { useExternRef } from '../../hooks/useExternRef';
 import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
 import type { HasComponent, HasDataAttribute } from '../../types';
-import { OnboardingTooltipContext } from './OnboardingTooltipContext';
 
 export const onboardingTooltipContainerAttr = 'data-onboarding-tooltip-container';
 
@@ -22,16 +18,11 @@ export const OnboardingTooltipContainer: React.ForwardRefExoticComponent<
   // eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames
 > = React.forwardRef<HTMLDivElement, OnboardingTooltipContainerProps>(
   ({ fixed = false, Component = 'div', ...props }, ref) => {
-    const containerRef = useExternRef(ref);
     const dataProps = {
       [onboardingTooltipContainerAttr]: fixed ? 'fixed' : 'true',
     };
 
-    return (
-      <OnboardingTooltipContext.Provider value={{ containerRef }}>
-        <Component {...dataProps} {...props} ref={containerRef} />
-      </OnboardingTooltipContext.Provider>
-    );
+    return <Component {...dataProps} {...props} ref={ref} />;
   },
 );
 

package/dist/components/OnboardingTooltip/OnboardingTooltipContext.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface OnboardingTooltipContextValue {
-    containerRef: React.RefObject<HTMLElement | null>;
-}
-export declare const OnboardingTooltipContext: React.Context<OnboardingTooltipContextValue>;
-export declare const useOnboardingTooltipContext: () => OnboardingTooltipContextValue;
-//# sourceMappingURL=OnboardingTooltipContext.d.ts.map

package/dist/components/OnboardingTooltip/OnboardingTooltipContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OnboardingTooltipContext.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTooltip/OnboardingTooltipContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,6BAA6B;IAC5C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,wBAAwB,8CAEnC,CAAC;AAEH,eAAO,MAAM,2BAA2B,qCAAmD,CAAC"}

package/dist/components/OnboardingTooltip/OnboardingTooltipContext.js

@@ -1,9 +0,0 @@
-/* eslint-disable jsdoc/require-jsdoc */ import * as React from "react";
-export const OnboardingTooltipContext = /*#__PURE__*/ React.createContext({
-    containerRef: {
-        current: null
-    }
-});
-export const useOnboardingTooltipContext = ()=>React.useContext(OnboardingTooltipContext);
-
-//# sourceMappingURL=OnboardingTooltipContext.js.map

package/dist/components/OnboardingTooltip/OnboardingTooltipContext.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/OnboardingTooltip/OnboardingTooltipContext.tsx"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\n\nexport interface OnboardingTooltipContextValue {\n  containerRef: React.RefObject<HTMLElement | null>;\n}\n\nexport const OnboardingTooltipContext = React.createContext<OnboardingTooltipContextValue>({\n  containerRef: { current: null },\n});\n\nexport const useOnboardingTooltipContext = () => React.useContext(OnboardingTooltipContext);\n"],"names":["React","OnboardingTooltipContext","createContext","containerRef","current","useOnboardingTooltipContext","useContext"],"mappings":"AAAA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAM/B,OAAO,MAAMC,yCAA2BD,MAAME,aAAa,CAAgC;IACzFC,cAAc;QAAEC,SAAS;IAAK;AAChC,GAAG;AAEH,OAAO,MAAMC,8BAA8B,IAAML,MAAMM,UAAU,CAACL,0BAA0B"}

package/dist/cssm/components/OnboardingTooltip/OnboardingTooltipContext.js

@@ -1,9 +0,0 @@
-/* eslint-disable jsdoc/require-jsdoc */ import * as React from "react";
-export const OnboardingTooltipContext = /*#__PURE__*/ React.createContext({
-    containerRef: {
-        current: null
-    }
-});
-export const useOnboardingTooltipContext = ()=>React.useContext(OnboardingTooltipContext);
-
-//# sourceMappingURL=OnboardingTooltipContext.js.map

package/dist/cssm/components/OnboardingTooltip/OnboardingTooltipContext.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/OnboardingTooltip/OnboardingTooltipContext.tsx"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\n\nexport interface OnboardingTooltipContextValue {\n  containerRef: React.RefObject<HTMLElement | null>;\n}\n\nexport const OnboardingTooltipContext = React.createContext<OnboardingTooltipContextValue>({\n  containerRef: { current: null },\n});\n\nexport const useOnboardingTooltipContext = () => React.useContext(OnboardingTooltipContext);\n"],"names":["React","OnboardingTooltipContext","createContext","containerRef","current","useOnboardingTooltipContext","useContext"],"mappings":"AAAA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAM/B,OAAO,MAAMC,yCAA2BD,MAAME,aAAa,CAAgC;IACzFC,cAAc;QAAEC,SAAS;IAAK;AAChC,GAAG;AAEH,OAAO,MAAMC,8BAA8B,IAAML,MAAMM,UAAU,CAACL,0BAA0B"}

package/src/components/OnboardingTooltip/OnboardingTooltipContext.tsx

@@ -1,13 +0,0 @@
-/* eslint-disable jsdoc/require-jsdoc */
-
-import * as React from 'react';
-
-export interface OnboardingTooltipContextValue {
-  containerRef: React.RefObject<HTMLElement | null>;
-}
-
-export const OnboardingTooltipContext = React.createContext<OnboardingTooltipContextValue>({
-  containerRef: { current: null },
-});
-
-export const useOnboardingTooltipContext = () => React.useContext(OnboardingTooltipContext);