@vkontakte/vkui 7.1.3 → 7.2.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ModalOutsideButtons/ModalOutsideButtons.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { Flex, type FlexProps } from '../Flex/Flex';\nimport styles from './ModalOutsideButtons.module.css';\n\n/**\n * @private\n */\nexport const ModalOutsideButtons = ({ className, children, ...restProps }: FlexProps) => {\n  return (\n    <Flex direction=\"column\" className={classNames(styles.host, className)} {...restProps}>\n      {children}\n    </Flex>\n  );\n};\n"],"names":["classNames","Flex","styles","ModalOutsideButtons","className","children","restProps","direction","host"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,IAAI,QAAwB,kBAAe;AACpD,OAAOC,YAAY,mCAAmC;AAEtD;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAsB;IAClF,qBACE,KAACL;QAAKM,WAAU;QAASH,WAAWJ,WAAWE,OAAOM,IAAI,EAAEJ;QAAa,GAAGE,SAAS;kBAClFD;;AAGP,EAAE"}

package/dist/cssm/components/ModalOutsideButtons/ModalOutsideButtons.module.css

@@ -0,0 +1,6 @@
+.host {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 100%;
+  box-sizing: border-box;
+}

package/dist/cssm/components/ModalOverlay/ModalOverlay.module.css

@@ -1,12 +1,12 @@
 .host {
   inset: 0;
-  background-color: rgba(0, 0, 0, 0.4);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  -webkit-tap-highlight-color: transparent;
+  background-color: rgba(0, 0, 0, 0.4);
   transition: opacity 0.3s linear;
   will-change: opacity;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .nonInteractive {

package/dist/cssm/components/ModalPage/ModalPage.module.css

@@ -12,11 +12,11 @@
   --vkui_internal_ModalPage--userHeight: 100%;
 
   position: absolute;
-  inset-inline: 0;
   inset-block-end: 0;
+  inset-inline: 0;
+  box-sizing: border-box;
   max-inline-size: var(--vkui--size_popup_small--regular);
   pointer-events: none;
-  box-sizing: border-box;
 }
 
 .hostMobileSafeAreaInsetTop {
@@ -38,12 +38,12 @@
   --vkui_internal_ModalPage--userHeight: auto;
 
   position: relative;
-  margin-block: auto;
-  padding-inline: var(--vkui--spacing_size_xl);
-  padding-block: var(--vkui_internal_ModalPage--desktopSafeInsetBlock);
+  box-sizing: content-box;
   max-inline-size: var(--vkui_internal_ModalPage--desktopMaxWidth);
   max-block-size: var(--vkui_internal_ModalPage--desktopMaxHeight);
-  box-sizing: content-box;
+  padding-block: var(--vkui_internal_ModalPage--desktopSafeInsetBlock);
+  padding-inline: var(--vkui--spacing_size_xl);
+  margin-block: auto;
 }
 
 /* Неизвестный брейкпоинт */
@@ -69,7 +69,6 @@
 }
 
 .document {
-  inline-size: 100%;
   box-sizing: border-box;
 
   /*
@@ -78,6 +77,7 @@
   display: flex;
   flex-shrink: 1;
   flex-direction: column;
+  inline-size: 100%;
 }
 
 /* Mobile */
@@ -89,8 +89,8 @@
   );
 
   position: absolute;
-  inset-inline-start: 0;
   inset-block-end: 0;
+  inset-inline-start: 0;
   block-size: var(--vkui_internal_ModalPageDocument--snapPoint);
   max-block-size: 100%;
   -webkit-padding-after: var(--vkui_internal_ModalPageDocument--safeAreaInsetBottom);
@@ -145,13 +145,6 @@
 }
 
 .children {
-  inline-size: 100%;
-  block-size: 100%;
-  border-start-start-radius: var(--vkui--size_border_radius_paper--regular);
-  border-start-end-radius: var(--vkui--size_border_radius_paper--regular);
-  background-color: var(--vkui--color_background_modal);
-  overflow: hidden;
-
   /*
    * Удерживает высоту в пределах 100% родителя при переполнении контента.
    *
@@ -162,12 +155,18 @@
   display: flex;
   flex-shrink: 1;
   flex-direction: column;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: hidden;
+  background-color: var(--vkui--color_background_modal);
+  border-start-start-radius: var(--vkui--size_border_radius_paper--regular);
+  border-start-end-radius: var(--vkui--size_border_radius_paper--regular);
 }
 
 /* Desktop */
 
 .childrenDesktop {
-  border-end-end-radius: var(--vkui--size_border_radius_paper--regular);
   border-end-start-radius: var(--vkui--size_border_radius_paper--regular);
+  border-end-end-radius: var(--vkui--size_border_radius_paper--regular);
   box-shadow: var(--vkui--elevation3);
 }

package/dist/cssm/components/ModalPage/ModalPageBase.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon20Cancel } from "@vkontakte/icons";
+import { classNames, hasReactNode, noop } from "@vkontakte/vkjs";
+import { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE } from "../../lib/sheet/index.js";
+import { ModalOutsideButton } from "../ModalOutsideButton/ModalOutsideButton.js";
+import { ModalOutsideButtons } from "../ModalOutsideButtons/ModalOutsideButtons.js";
+import { ModalPageContent } from "../ModalPageContent/ModalPageContent.js";
+import { RootComponent } from "../RootComponent/RootComponent.js";
+import styles from "./ModalPage.module.css";
+export const ModalPageBase = ({ isDesktop, getRef, disableContentPanningGesture, header, children, footer, outsideButtons, modalContentTestId, modalDismissButtonTestId, modalDismissButtonLabel, hideCloseButton, closable, onClose = noop, ...restProps })=>{
+    const disableContentPanningGestureProp = disableContentPanningGesture ? BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE : undefined;
+    const closeButton = hideCloseButton || !isDesktop ? null : /*#__PURE__*/ _jsx(ModalOutsideButton, {
+        "data-testid": modalDismissButtonTestId,
+        onClick: closable ? function handleDismissButtonClick(event) {
+            onClose('click-close-button', event);
+        } : undefined,
+        "aria-label": modalDismissButtonLabel,
+        children: /*#__PURE__*/ _jsx(Icon20Cancel, {})
+    });
+    return /*#__PURE__*/ _jsxs(RootComponent, {
+        role: "document",
+        baseClassName: styles.document,
+        ...restProps,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: classNames(styles.children, isDesktop && styles.childrenDesktop),
+                children: [
+                    hasReactNode(header) && header,
+                    /*#__PURE__*/ _jsx(ModalPageContent, {
+                        getRootRef: getRef,
+                        "data-testid": modalContentTestId,
+                        ...disableContentPanningGestureProp,
+                        children: children
+                    }),
+                    hasReactNode(footer) && footer
+                ]
+            }),
+            isDesktop && (closeButton || outsideButtons) && /*#__PURE__*/ _jsxs(ModalOutsideButtons, {
+                children: [
+                    closeButton,
+                    outsideButtons
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=ModalPageBase.js.map

package/dist/cssm/components/ModalPage/ModalPageBase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ModalPage/ModalPageBase.tsx"],"sourcesContent":["'use client';\n\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE } from '../../lib/sheet';\nimport { type HasRef, type HTMLAttributesWithRootRef } from '../../types';\nimport { ModalOutsideButton } from '../ModalOutsideButton/ModalOutsideButton';\nimport { ModalOutsideButtons } from '../ModalOutsideButtons/ModalOutsideButtons';\nimport { ModalPageContent } from '../ModalPageContent/ModalPageContent';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { type ModalPageInternalProps } from './ModalPageInternal';\nimport styles from './ModalPage.module.css';\n\nexport interface ModalPageBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'title'>,\n    HasRef<HTMLDivElement>,\n    Pick<\n      ModalPageInternalProps,\n      | 'disableContentPanningGesture'\n      | 'header'\n      | 'children'\n      | 'footer'\n      | 'outsideButtons'\n      | 'modalContentTestId'\n      | 'modalDismissButtonTestId'\n      | 'modalDismissButtonLabel'\n      | 'hideCloseButton'\n      | 'onClose'\n    > {\n  isDesktop?: boolean;\n  closable?: boolean;\n}\n\nexport const ModalPageBase: React.FC<ModalPageBaseProps> = ({\n  isDesktop,\n  getRef,\n  disableContentPanningGesture,\n  header,\n  children,\n  footer,\n  outsideButtons,\n  modalContentTestId,\n  modalDismissButtonTestId,\n  modalDismissButtonLabel,\n  hideCloseButton,\n  closable,\n  onClose = noop,\n  ...restProps\n}) => {\n  const disableContentPanningGestureProp = disableContentPanningGesture\n    ? BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE\n    : undefined;\n\n  const closeButton =\n    hideCloseButton || !isDesktop ? null : (\n      <ModalOutsideButton\n        data-testid={modalDismissButtonTestId}\n        onClick={\n          closable\n            ? function handleDismissButtonClick(event) {\n                onClose('click-close-button', event);\n              }\n            : undefined\n        }\n        aria-label={modalDismissButtonLabel}\n      >\n        <Icon20Cancel />\n      </ModalOutsideButton>\n    );\n\n  return (\n    <RootComponent role=\"document\" baseClassName={styles.document} {...restProps}>\n      <div className={classNames(styles.children, isDesktop && styles.childrenDesktop)}>\n        {hasReactNode(header) && header}\n        <ModalPageContent\n          getRootRef={getRef}\n          data-testid={modalContentTestId}\n          {...disableContentPanningGestureProp}\n        >\n          {children}\n        </ModalPageContent>\n        {hasReactNode(footer) && footer}\n      </div>\n      {isDesktop && (closeButton || outsideButtons) && (\n        <ModalOutsideButtons>\n          {closeButton}\n          {outsideButtons}\n        </ModalOutsideButtons>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["Icon20Cancel","classNames","hasReactNode","noop","BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE","ModalOutsideButton","ModalOutsideButtons","ModalPageContent","RootComponent","styles","ModalPageBase","isDesktop","getRef","disableContentPanningGesture","header","children","footer","outsideButtons","modalContentTestId","modalDismissButtonTestId","modalDismissButtonLabel","hideCloseButton","closable","onClose","restProps","disableContentPanningGestureProp","undefined","closeButton","data-testid","onClick","handleDismissButtonClick","event","aria-label","role","baseClassName","document","div","className","childrenDesktop","getRootRef"],"mappings":"AAAA;;AAEA,SAASA,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,mCAAmC,QAAQ,2BAAkB;AAEtE,SAASC,kBAAkB,QAAQ,8CAA2C;AAC9E,SAASC,mBAAmB,QAAQ,gDAA6C;AACjF,SAASC,gBAAgB,QAAQ,0CAAuC;AACxE,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,OAAOC,YAAY,yBAAyB;AAsB5C,OAAO,MAAMC,gBAA8C,CAAC,EAC1DC,SAAS,EACTC,MAAM,EACNC,4BAA4B,EAC5BC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNC,cAAc,EACdC,kBAAkB,EAClBC,wBAAwB,EACxBC,uBAAuB,EACvBC,eAAe,EACfC,QAAQ,EACRC,UAAUpB,IAAI,EACd,GAAGqB,WACJ;IACC,MAAMC,mCAAmCZ,+BACrCT,sCACAsB;IAEJ,MAAMC,cACJN,mBAAmB,CAACV,YAAY,qBAC9B,KAACN;QACCuB,eAAaT;QACbU,SACEP,WACI,SAASQ,yBAAyBC,KAAK;YACrCR,QAAQ,sBAAsBQ;QAChC,IACAL;QAENM,cAAYZ;kBAEZ,cAAA,KAACpB;;IAIP,qBACE,MAACQ;QAAcyB,MAAK;QAAWC,eAAezB,OAAO0B,QAAQ;QAAG,GAAGX,SAAS;;0BAC1E,MAACY;gBAAIC,WAAWpC,WAAWQ,OAAOM,QAAQ,EAAEJ,aAAaF,OAAO6B,eAAe;;oBAC5EpC,aAAaY,WAAWA;kCACzB,KAACP;wBACCgC,YAAY3B;wBACZgB,eAAaV;wBACZ,GAAGO,gCAAgC;kCAEnCV;;oBAEFb,aAAac,WAAWA;;;YAE1BL,aAAcgB,CAAAA,eAAeV,cAAa,mBACzC,MAACX;;oBACEqB;oBACAV;;;;;AAKX,EAAE"}

package/dist/cssm/components/ModalPage/ModalPageInternal.js

@@ -1,21 +1,20 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { classNames, hasReactNode, noop } from "@vkontakte/vkjs";
+import { classNames, noop } from "@vkontakte/vkjs";
 import { mergeStyle } from "../../helpers/mergeStyle.js";
 import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { useVirtualKeyboardState } from "../../hooks/useVirtualKeyboardState.js";
 import { Keys, pressedKey } from "../../lib/accessibility.js";
 import { useCSSTransition } from "../../lib/animation/index.js";
-import { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE, useBottomSheet } from "../../lib/sheet/index.js";
+import { useBottomSheet } from "../../lib/sheet/index.js";
 import { useScrollLock } from "../AppRoot/ScrollContext.js";
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
 import { FocusTrap } from "../FocusTrap/FocusTrap.js";
-import { ModalDismissButton } from "../ModalDismissButton/ModalDismissButton.js";
 import { ModalOutlet } from "../ModalOutlet/ModalOutlet.js";
 import { ModalOverlay as ModalOverlayDefault } from "../ModalOverlay/ModalOverlay.js";
-import { ModalPageContent } from "../ModalPageContent/ModalPageContent.js";
+import { ModalPageBase } from "./ModalPageBase.js";
 import styles from "./ModalPage.module.css";
 const transitionStateClassNames = {
     appear: styles['documentStateEnter'],
@@ -29,7 +28,7 @@ const transitionStateClassNames = {
  * В компоненте заложена вся логика модального окна.
  *
  * @private
- */ export const ModalPageInternal = ({ open, header, footer, size: desktopMaxWidth, height, children, className, style, snapPoint, onSnapPointChange, getModalContentRef, ModalOverlay = ModalOverlayDefault, modalOverlayTestId, modalContentTestId, modalDismissButtonTestId, noFocusToDialog, hideCloseButton, preventClose, disableContentPanningGesture, onOpen, onOpened, onClose = noop, onClosed, disableFocusTrap, ...restProps })=>{
+ */ export const ModalPageInternal = ({ open, header, footer, size: desktopMaxWidth, height, children, className, style, snapPoint, onSnapPointChange, getModalContentRef, ModalOverlay = ModalOverlayDefault, modalOverlayTestId, modalContentTestId, modalDismissButtonTestId, modalDismissButtonLabel = 'Закрыть', outsideButtons, noFocusToDialog, hideCloseButton, preventClose, disableContentPanningGesture, restoreFocus, onOpen, onOpened, onClose = noop, onClosed, disableFocusTrap, ...restProps })=>{
     const { hasCustomPanelHeaderAfter } = useConfigProvider();
     const [transitionState, { ref, onTransitionEnd }] = useCSSTransition(open, {
         enableAppear: true,
@@ -65,7 +64,6 @@ const transitionStateClassNames = {
     } : initialStyle;
     const handleSheetRef = useExternRef(setSheetEl, ref);
     const handleSheetScrollRef = useExternRef(setSheetScrollEl, getModalContentRef);
-    const disableContentPanningGestureProp = disableContentPanningGesture ? BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE : undefined;
     const [desktopMaxWidthClassName, desktopMaxWidthStyle] = resolveDesktopMaxWidth(isDesktop ? desktopMaxWidth : 's');
     const modalOverlay = /*#__PURE__*/ _jsx(ModalOverlay, {
         getRootRef: setBackdropEl,
@@ -75,12 +73,6 @@ const transitionStateClassNames = {
             onClose('click-overlay', event);
         } : undefined
     });
-    const closeButton = hideCloseButton || !isDesktop ? null : /*#__PURE__*/ _jsx(ModalDismissButton, {
-        "data-testid": modalDismissButtonTestId,
-        onClick: closable ? function handleDismissButtonClick(event) {
-            onClose('click-close-button', event);
-        } : undefined
-    });
     const handleEscKeyDown = useCallback((event)=>{
         if (closable && pressedKey(event) === Keys.ESCAPE) {
             onClose('escape-key');
@@ -99,34 +91,31 @@ const transitionStateClassNames = {
             /*#__PURE__*/ _jsx(FocusTrap, {
                 ...restProps,
                 autoFocus: !noFocusToDialog,
+                restoreFocus: restoreFocus,
                 role: "dialog",
                 "aria-modal": "true",
                 disabled: !opened || hidden || disableFocusTrap,
                 className: classNames(className, styles.host, isDesktop ? styles.hostDesktop : styles.hostMobile, !isDesktop && (hasCustomPanelHeaderAfter ? styles.hostMobileSafeAreaInsetTopWithCustomOffset : styles.hostMobileSafeAreaInsetTop), desktopMaxWidthClassName, sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular'),
                 style: mergeStyle(mergeStyle(desktopMaxWidthStyle, getHeightCSSVariable(height)), style),
-                children: /*#__PURE__*/ _jsxs("div", {
+                children: /*#__PURE__*/ _jsx(ModalPageBase, {
                     ...bottomSheetEventHandlers,
-                    ref: handleSheetRef,
-                    role: "document",
+                    getRootRef: handleSheetRef,
+                    getRef: handleSheetScrollRef,
                     style: documentStyle,
-                    className: classNames(styles.document, isDesktop ? styles.documentDesktop : styles.documentMobile, transitionStateClassNames[transitionState]),
+                    className: classNames(isDesktop ? styles.documentDesktop : styles.documentMobile, transitionStateClassNames[transitionState]),
                     onTransitionEnd: onTransitionEnd,
-                    children: [
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: classNames(styles.children, isDesktop && styles.childrenDesktop),
-                            children: [
-                                hasReactNode(header) && header,
-                                /*#__PURE__*/ _jsx(ModalPageContent, {
-                                    getRootRef: handleSheetScrollRef,
-                                    "data-testid": modalContentTestId,
-                                    ...disableContentPanningGestureProp,
-                                    children: children
-                                }),
-                                hasReactNode(footer) && footer
-                            ]
-                        }),
-                        closeButton
-                    ]
+                    isDesktop: isDesktop,
+                    disableContentPanningGesture: disableContentPanningGesture,
+                    header: header,
+                    footer: footer,
+                    outsideButtons: outsideButtons,
+                    modalContentTestId: modalContentTestId,
+                    modalDismissButtonTestId: modalDismissButtonTestId,
+                    modalDismissButtonLabel: modalDismissButtonLabel,
+                    hideCloseButton: hideCloseButton,
+                    closable: closable,
+                    onClose: onClose,
+                    children: children
                 })
             })
         ]

package/dist/cssm/components/ModalPage/ModalPageInternal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalPage/ModalPageInternal.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentType, type KeyboardEvent, useCallback } from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';\nimport {\n  BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE,\n  type SnapPoint,\n  type SnapPointChange,\n  useBottomSheet,\n} from '../../lib/sheet';\nimport type { CSSCustomProperties } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { ModalOutlet } from '../ModalOutlet/ModalOutlet';\nimport {\n  ModalOverlay as ModalOverlayDefault,\n  type ModalOverlayProps,\n} from '../ModalOverlay/ModalOverlay';\nimport { ModalPageContent } from '../ModalPageContent/ModalPageContent';\nimport type { ModalPageProps } from './types';\nimport styles from './ModalPage.module.css';\n\nconst transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {\n  appear: styles['documentStateEnter'],\n  appearing: styles['documentStateEntering'],\n\n  enter: styles['documentStateEnter'],\n  entering: styles['documentStateEntering'],\n\n  exiting: styles['documentStateExiting'],\n  exited: styles['documentStateExited'],\n};\n\nexport interface ModalPageInternalProps\n  extends Omit<ModalPageProps, 'nav' | 'keepMounted' | 'settlingHeight' | 'dynamicContentHeight'> {\n  snapPoint: SnapPoint;\n  ModalOverlay?: ComponentType<ModalOverlayProps>;\n  onSnapPointChange?: SnapPointChange;\n}\n\n/**\n * В компоненте заложена вся логика модального окна.\n *\n * @private\n */\nexport const ModalPageInternal = ({\n  open,\n  header,\n  footer,\n  size: desktopMaxWidth,\n  height,\n  children,\n  className,\n  style,\n  snapPoint,\n  onSnapPointChange,\n  getModalContentRef,\n  ModalOverlay = ModalOverlayDefault,\n  modalOverlayTestId,\n  modalContentTestId,\n  modalDismissButtonTestId,\n  noFocusToDialog,\n  hideCloseButton,\n  preventClose,\n  disableContentPanningGesture,\n  onOpen,\n  onOpened,\n  onClose = noop,\n  onClosed,\n  disableFocusTrap,\n  ...restProps\n}: ModalPageInternalProps) => {\n  const { hasCustomPanelHeaderAfter } = useConfigProvider();\n  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(open, {\n    enableAppear: true,\n    onEnter() {\n      onOpen?.();\n    },\n    onEntered() {\n      onOpened?.();\n    },\n    onExited() {\n      onClosed?.();\n    },\n  });\n  const opened = transitionState === 'appeared' || transitionState === 'entered';\n  const hidden = transitionState === 'exited';\n  const closable = !preventClose && opened;\n\n  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n  const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';\n  const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);\n\n  const [{ initialStyle, setSheetEl, setSheetScrollEl, setBackdropEl }, bottomSheetEventHandlers] =\n    useBottomSheet(bottomSheetEnabled, {\n      blocked: keyboardOpened,\n      snapPoint,\n      sheetCSSProperty: '--vkui_internal_ModalPageDocument--snapPoint',\n      backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',\n      onSnapPointChange,\n      onDismiss() {\n        onClose('swipe-down');\n      },\n    });\n  const documentStyle = keyboardOpened\n    ? {\n        '--vkui_internal_ModalPageDocument--safeAreaInsetBottom': '0px',\n        ...initialStyle,\n      }\n    : initialStyle;\n  const handleSheetRef = useExternRef<HTMLDivElement>(setSheetEl, ref);\n  const handleSheetScrollRef = useExternRef<HTMLDivElement>(setSheetScrollEl, getModalContentRef);\n\n  const disableContentPanningGestureProp = disableContentPanningGesture\n    ? BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE\n    : undefined;\n  const [desktopMaxWidthClassName, desktopMaxWidthStyle] = resolveDesktopMaxWidth(\n    isDesktop ? desktopMaxWidth : 's',\n  );\n\n  const modalOverlay = (\n    <ModalOverlay\n      getRootRef={setBackdropEl}\n      data-testid={modalOverlayTestId}\n      visible={open}\n      onClick={\n        closable\n          ? function handleBackdropClick(event) {\n              onClose('click-overlay', event);\n            }\n          : undefined\n      }\n    />\n  );\n  const closeButton =\n    hideCloseButton || !isDesktop ? null : (\n      <ModalDismissButton\n        data-testid={modalDismissButtonTestId}\n        onClick={\n          closable\n            ? function handleDismissButtonClick(event) {\n                onClose('click-close-button', event);\n              }\n            : undefined\n        }\n      />\n    );\n  const handleEscKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (closable && pressedKey(event) === Keys.ESCAPE) {\n        onClose('escape-key');\n      }\n    },\n    [closable, onClose],\n  );\n\n  useScrollLock(!hidden);\n\n  return (\n    <ModalOutlet hidden={hidden} isDesktop={isDesktop} onKeyDown={handleEscKeyDown}>\n      {modalOverlay}\n      <FocusTrap\n        {...restProps}\n        autoFocus={!noFocusToDialog}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        disabled={!opened || hidden || disableFocusTrap}\n        className={classNames(\n          className,\n          styles.host,\n          isDesktop ? styles.hostDesktop : styles.hostMobile,\n          !isDesktop &&\n            (hasCustomPanelHeaderAfter\n              ? styles.hostMobileSafeAreaInsetTopWithCustomOffset\n              : styles.hostMobileSafeAreaInsetTop),\n          desktopMaxWidthClassName,\n          sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular',\n        )}\n        style={mergeStyle(mergeStyle(desktopMaxWidthStyle, getHeightCSSVariable(height)), style)}\n      >\n        <div\n          {...bottomSheetEventHandlers}\n          ref={handleSheetRef}\n          role=\"document\"\n          style={documentStyle}\n          className={classNames(\n            styles.document,\n            isDesktop ? styles.documentDesktop : styles.documentMobile,\n            transitionStateClassNames[transitionState],\n          )}\n          onTransitionEnd={onTransitionEnd}\n        >\n          <div className={classNames(styles.children, isDesktop && styles.childrenDesktop)}>\n            {hasReactNode(header) && header}\n            <ModalPageContent\n              getRootRef={handleSheetScrollRef}\n              data-testid={modalContentTestId}\n              {...disableContentPanningGestureProp}\n            >\n              {children}\n            </ModalPageContent>\n            {hasReactNode(footer) && footer}\n          </div>\n          {closeButton}\n        </div>\n      </FocusTrap>\n    </ModalOutlet>\n  );\n};\n\nconst desktopMaxWidthClassNames = {\n  s: styles['hostDesktopMaxWidthS'],\n  m: styles['hostDesktopMaxWidthM'],\n  l: styles['hostDesktopMaxWidthL'],\n};\n\nfunction resolveDesktopMaxWidth(\n  desktopMaxWidth: ModalPageInternalProps['size'] = 's',\n): [string | undefined, CSSCustomProperties | undefined] {\n  if (typeof desktopMaxWidth === 'string') {\n    return [desktopMaxWidthClassNames[desktopMaxWidth], undefined];\n  }\n\n  return [\n    undefined,\n    typeof desktopMaxWidth === 'number'\n      ? { '--vkui_internal_ModalPage--desktopMaxWidth': `${desktopMaxWidth}px` }\n      : undefined,\n  ];\n}\n\nfunction getHeightCSSVariable(height?: number | string): CSSCustomProperties | undefined {\n  return height !== undefined\n    ? {\n        '--vkui_internal_ModalPage--userHeight':\n          typeof height === 'number' ? `${height}px` : height,\n      }\n    : undefined;\n}\n"],"names":["useCallback","classNames","hasReactNode","noop","mergeStyle","useAdaptivityWithJSMediaQueries","useExternRef","useVirtualKeyboardState","Keys","pressedKey","useCSSTransition","BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE","useBottomSheet","useScrollLock","useConfigProvider","FocusTrap","ModalDismissButton","ModalOutlet","ModalOverlay","ModalOverlayDefault","ModalPageContent","styles","transitionStateClassNames","appear","appearing","enter","entering","exiting","exited","ModalPageInternal","open","header","footer","size","desktopMaxWidth","height","children","className","style","snapPoint","onSnapPointChange","getModalContentRef","modalOverlayTestId","modalContentTestId","modalDismissButtonTestId","noFocusToDialog","hideCloseButton","preventClose","disableContentPanningGesture","onOpen","onOpened","onClose","onClosed","disableFocusTrap","restProps","hasCustomPanelHeaderAfter","transitionState","ref","onTransitionEnd","enableAppear","onEnter","onEntered","onExited","opened","hidden","closable","sizeX","isDesktop","bottomSheetEnabled","keyboardOpened","initialStyle","setSheetEl","setSheetScrollEl","setBackdropEl","bottomSheetEventHandlers","blocked","sheetCSSProperty","backdropCSSProperty","onDismiss","documentStyle","handleSheetRef","handleSheetScrollRef","disableContentPanningGestureProp","undefined","desktopMaxWidthClassName","desktopMaxWidthStyle","resolveDesktopMaxWidth","modalOverlay","getRootRef","data-testid","visible","onClick","handleBackdropClick","event","closeButton","handleDismissButtonClick","handleEscKeyDown","ESCAPE","onKeyDown","autoFocus","role","aria-modal","disabled","host","hostDesktop","hostMobile","hostMobileSafeAreaInsetTopWithCustomOffset","hostMobileSafeAreaInsetTop","getHeightCSSVariable","div","document","documentDesktop","documentMobile","childrenDesktop","desktopMaxWidthClassNames","s","m","l"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ModalPage/ModalPageInternal.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentType, type KeyboardEvent, useCallback } from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';\nimport { type SnapPoint, type SnapPointChange, useBottomSheet } from '../../lib/sheet';\nimport type { CSSCustomProperties } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalOutlet } from '../ModalOutlet/ModalOutlet';\nimport {\n  ModalOverlay as ModalOverlayDefault,\n  type ModalOverlayProps,\n} from '../ModalOverlay/ModalOverlay';\nimport { ModalPageBase } from './ModalPageBase';\nimport type { ModalPageProps } from './types';\nimport styles from './ModalPage.module.css';\n\nconst transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {\n  appear: styles['documentStateEnter'],\n  appearing: styles['documentStateEntering'],\n\n  enter: styles['documentStateEnter'],\n  entering: styles['documentStateEntering'],\n\n  exiting: styles['documentStateExiting'],\n  exited: styles['documentStateExited'],\n};\n\nexport interface ModalPageInternalProps\n  extends Omit<ModalPageProps, 'nav' | 'keepMounted' | 'settlingHeight' | 'dynamicContentHeight'> {\n  snapPoint: SnapPoint;\n  ModalOverlay?: ComponentType<ModalOverlayProps>;\n  onSnapPointChange?: SnapPointChange;\n}\n\n/**\n * В компоненте заложена вся логика модального окна.\n *\n * @private\n */\nexport const ModalPageInternal = ({\n  open,\n  header,\n  footer,\n  size: desktopMaxWidth,\n  height,\n  children,\n  className,\n  style,\n  snapPoint,\n  onSnapPointChange,\n  getModalContentRef,\n  ModalOverlay = ModalOverlayDefault,\n  modalOverlayTestId,\n  modalContentTestId,\n  modalDismissButtonTestId,\n  modalDismissButtonLabel = 'Закрыть',\n  outsideButtons,\n  noFocusToDialog,\n  hideCloseButton,\n  preventClose,\n  disableContentPanningGesture,\n  restoreFocus,\n  onOpen,\n  onOpened,\n  onClose = noop,\n  onClosed,\n  disableFocusTrap,\n  ...restProps\n}: ModalPageInternalProps) => {\n  const { hasCustomPanelHeaderAfter } = useConfigProvider();\n  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(open, {\n    enableAppear: true,\n    onEnter() {\n      onOpen?.();\n    },\n    onEntered() {\n      onOpened?.();\n    },\n    onExited() {\n      onClosed?.();\n    },\n  });\n  const opened = transitionState === 'appeared' || transitionState === 'entered';\n  const hidden = transitionState === 'exited';\n  const closable = !preventClose && opened;\n\n  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n  const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';\n  const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);\n\n  const [{ initialStyle, setSheetEl, setSheetScrollEl, setBackdropEl }, bottomSheetEventHandlers] =\n    useBottomSheet(bottomSheetEnabled, {\n      blocked: keyboardOpened,\n      snapPoint,\n      sheetCSSProperty: '--vkui_internal_ModalPageDocument--snapPoint',\n      backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',\n      onSnapPointChange,\n      onDismiss() {\n        onClose('swipe-down');\n      },\n    });\n  const documentStyle = keyboardOpened\n    ? {\n        '--vkui_internal_ModalPageDocument--safeAreaInsetBottom': '0px',\n        ...initialStyle,\n      }\n    : initialStyle;\n  const handleSheetRef = useExternRef<HTMLDivElement>(setSheetEl, ref);\n  const handleSheetScrollRef = useExternRef<HTMLDivElement>(setSheetScrollEl, getModalContentRef);\n\n  const [desktopMaxWidthClassName, desktopMaxWidthStyle] = resolveDesktopMaxWidth(\n    isDesktop ? desktopMaxWidth : 's',\n  );\n\n  const modalOverlay = (\n    <ModalOverlay\n      getRootRef={setBackdropEl}\n      data-testid={modalOverlayTestId}\n      visible={open}\n      onClick={\n        closable\n          ? function handleBackdropClick(event) {\n              onClose('click-overlay', event);\n            }\n          : undefined\n      }\n    />\n  );\n  const handleEscKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (closable && pressedKey(event) === Keys.ESCAPE) {\n        onClose('escape-key');\n      }\n    },\n    [closable, onClose],\n  );\n\n  useScrollLock(!hidden);\n\n  return (\n    <ModalOutlet hidden={hidden} isDesktop={isDesktop} onKeyDown={handleEscKeyDown}>\n      {modalOverlay}\n      <FocusTrap\n        {...restProps}\n        autoFocus={!noFocusToDialog}\n        restoreFocus={restoreFocus}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        disabled={!opened || hidden || disableFocusTrap}\n        className={classNames(\n          className,\n          styles.host,\n          isDesktop ? styles.hostDesktop : styles.hostMobile,\n          !isDesktop &&\n            (hasCustomPanelHeaderAfter\n              ? styles.hostMobileSafeAreaInsetTopWithCustomOffset\n              : styles.hostMobileSafeAreaInsetTop),\n          desktopMaxWidthClassName,\n          sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular',\n        )}\n        style={mergeStyle(mergeStyle(desktopMaxWidthStyle, getHeightCSSVariable(height)), style)}\n      >\n        <ModalPageBase\n          {...bottomSheetEventHandlers}\n          getRootRef={handleSheetRef}\n          getRef={handleSheetScrollRef}\n          style={documentStyle}\n          className={classNames(\n            isDesktop ? styles.documentDesktop : styles.documentMobile,\n            transitionStateClassNames[transitionState],\n          )}\n          onTransitionEnd={onTransitionEnd}\n          isDesktop={isDesktop}\n          disableContentPanningGesture={disableContentPanningGesture}\n          header={header}\n          footer={footer}\n          outsideButtons={outsideButtons}\n          modalContentTestId={modalContentTestId}\n          modalDismissButtonTestId={modalDismissButtonTestId}\n          modalDismissButtonLabel={modalDismissButtonLabel}\n          hideCloseButton={hideCloseButton}\n          closable={closable}\n          onClose={onClose}\n        >\n          {children}\n        </ModalPageBase>\n      </FocusTrap>\n    </ModalOutlet>\n  );\n};\n\nconst desktopMaxWidthClassNames = {\n  s: styles['hostDesktopMaxWidthS'],\n  m: styles['hostDesktopMaxWidthM'],\n  l: styles['hostDesktopMaxWidthL'],\n};\n\nfunction resolveDesktopMaxWidth(\n  desktopMaxWidth: ModalPageInternalProps['size'] = 's',\n): [string | undefined, CSSCustomProperties | undefined] {\n  if (typeof desktopMaxWidth === 'string') {\n    return [desktopMaxWidthClassNames[desktopMaxWidth], undefined];\n  }\n\n  return [\n    undefined,\n    typeof desktopMaxWidth === 'number'\n      ? { '--vkui_internal_ModalPage--desktopMaxWidth': `${desktopMaxWidth}px` }\n      : undefined,\n  ];\n}\n\nfunction getHeightCSSVariable(height?: number | string): CSSCustomProperties | undefined {\n  return height !== undefined\n    ? {\n        '--vkui_internal_ModalPage--userHeight':\n          typeof height === 'number' ? `${height}px` : height,\n      }\n    : undefined;\n}\n"],"names":["useCallback","classNames","noop","mergeStyle","useAdaptivityWithJSMediaQueries","useExternRef","useVirtualKeyboardState","Keys","pressedKey","useCSSTransition","useBottomSheet","useScrollLock","useConfigProvider","FocusTrap","ModalOutlet","ModalOverlay","ModalOverlayDefault","ModalPageBase","styles","transitionStateClassNames","appear","appearing","enter","entering","exiting","exited","ModalPageInternal","open","header","footer","size","desktopMaxWidth","height","children","className","style","snapPoint","onSnapPointChange","getModalContentRef","modalOverlayTestId","modalContentTestId","modalDismissButtonTestId","modalDismissButtonLabel","outsideButtons","noFocusToDialog","hideCloseButton","preventClose","disableContentPanningGesture","restoreFocus","onOpen","onOpened","onClose","onClosed","disableFocusTrap","restProps","hasCustomPanelHeaderAfter","transitionState","ref","onTransitionEnd","enableAppear","onEnter","onEntered","onExited","opened","hidden","closable","sizeX","isDesktop","bottomSheetEnabled","keyboardOpened","initialStyle","setSheetEl","setSheetScrollEl","setBackdropEl","bottomSheetEventHandlers","blocked","sheetCSSProperty","backdropCSSProperty","onDismiss","documentStyle","handleSheetRef","handleSheetScrollRef","desktopMaxWidthClassName","desktopMaxWidthStyle","resolveDesktopMaxWidth","modalOverlay","getRootRef","data-testid","visible","onClick","handleBackdropClick","event","undefined","handleEscKeyDown","ESCAPE","onKeyDown","autoFocus","role","aria-modal","disabled","host","hostDesktop","hostMobile","hostMobileSafeAreaInsetTopWithCustomOffset","hostMobileSafeAreaInsetTop","getHeightCSSVariable","getRef","documentDesktop","documentMobile","desktopMaxWidthClassNames","s","m","l"],"mappings":"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"}

package/dist/cssm/components/ModalPage/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalPage/types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref, UIEvent } from 'react';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport type { NavIdProps } from '../../lib/getNavId';\nimport type { HTMLAttributesWithRootRef } from '../../types';\n\nexport type ModalPageCloseReason =\n  | 'click-overlay'\n  | 'click-close-button'\n  | 'escape-key'\n  | 'swipe-down';\n\ntype OmittedStyleAttribute = {\n  style?: Omit<CSSProperties, 'height' | 'maxWidth' | 'maxHeight'>;\n};\n\nexport interface ModalPageProps\n  extends NavIdProps,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'id' | 'style'>,\n    OmittedStyleAttribute {\n  /**\n   * Состояние видимости.\n   *\n   * @default false\n   */\n  open?: boolean;\n  /**\n   * Сохранять ли компонент в DOM при `open={false}`.\n   *\n   * @default false\n   */\n  keepMounted?: boolean;\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: ReactNode;\n  /**\n   * Подвал модальной страницы, `<ModalPageFooter />`\n   */\n  footer?: ReactNode;\n  /**\n   * Задаёт контенту максимальную ширину на десктопе.\n   */\n  size?: 's' | 'm' | 'l' | number;\n  /**\n   * Задаёт модальному окну фиксированную высоту.\n   * Можно передать числовое значение в пикселях, а можно строкой, в том числе и в процентах \"50%\".\n   * В мобильной версии 'settlingHeight' будет считаться относительно заданного height.\n   */\n  height?: string | number;\n  /**\n   * Процент, на который изначально будет открыта модальная страница.\n   *\n   * > ⚠️ Следует использовать следующие значения: `25`, `50`, `75`, `100`.\n   * > При передаче `< 25` значение приведётся к `25`, при передаче `> 75` значение приведётся к `75`.\n   *\n   * Игнорируется при включении `dynamicContentHeight`.\n   */\n  settlingHeight?: number;\n  /**\n   * Если высота контента в модальной странице может поменяться, нужно установить это свойство.\n   */\n  dynamicContentHeight?: boolean;\n  /**\n   * Отключает фокус на интерактивный элемент после открытия модалки.\n   */\n  noFocusToDialog?: boolean;\n  /**\n   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)\n   */\n  hideCloseButton?: boolean;\n  /**\n   * `data-testid` для содержимого модального окна.\n   */\n  modalContentTestId?: string;\n  /**\n   * Возвращает DOM-элемент содержимого модального окна.\n   */\n  getModalContentRef?: Ref<HTMLDivElement>;\n  /**\n   * `data-testid` для оверлея.\n   */\n  modalOverlayTestId?: string;\n  /**\n   * `data-testid` для кнопки закрытия.\n   */\n  modalDismissButtonTestId?: string;\n  /**\n   * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)\n   *\n   * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте\n   */\n  preventClose?: boolean;\n  /**\n   * Отключает раскрытие и закрытие панели в мобильном виде.\n   */\n  disableContentPanningGesture?: boolean;\n  /**\n   * Будет вызвано при начале открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: (reason: ModalPageCloseReason, event?: UIEvent<HTMLElement>) => void;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n  /**\n   * Позволяет отключить захват фокуса.\n   *\n   * Нужно использовать, когда поверх одной модалки открывается другая, чтобы два `FocusTrap` не конфликтовали\n   */\n  disableFocusTrap?: UseFocusTrapProps['disabled'];\n}\n"],"names":[],"mappings":"AAeA,WAuGC"}
+{"version":3,"sources":["../../../../src/components/ModalPage/types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref, UIEvent } from 'react';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport type { NavIdProps } from '../../lib/getNavId';\nimport type { HTMLAttributesWithRootRef } from '../../types';\n\nexport type ModalPageCloseReason =\n  | 'click-overlay'\n  | 'click-close-button'\n  | 'escape-key'\n  | 'swipe-down';\n\ntype OmittedStyleAttribute = {\n  style?: Omit<CSSProperties, 'height' | 'maxWidth' | 'maxHeight'>;\n};\n\nexport interface ModalPageProps\n  extends NavIdProps,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'id' | 'style'>,\n    Pick<UseFocusTrapProps, 'restoreFocus'>,\n    OmittedStyleAttribute {\n  /**\n   * Состояние видимости.\n   *\n   * @default false\n   */\n  open?: boolean;\n  /**\n   * Сохранять ли компонент в DOM при `open={false}`.\n   *\n   * @default false\n   */\n  keepMounted?: boolean;\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: ReactNode;\n  /**\n   * Подвал модальной страницы, `<ModalPageFooter />`\n   */\n  footer?: ReactNode;\n  /**\n   * Задаёт контенту максимальную ширину на десктопе.\n   */\n  size?: 's' | 'm' | 'l' | number;\n  /**\n   * Задаёт модальному окну фиксированную высоту.\n   * Можно передать числовое значение в пикселях, а можно строкой, в том числе и в процентах \"50%\".\n   * В мобильной версии 'settlingHeight' будет считаться относительно заданного height.\n   */\n  height?: string | number;\n  /**\n   * Процент, на который изначально будет открыта модальная страница.\n   *\n   * > ⚠️ Следует использовать следующие значения: `25`, `50`, `75`, `100`.\n   * > При передаче `< 25` значение приведётся к `25`, при передаче `> 75` значение приведётся к `75`.\n   *\n   * Игнорируется при включении `dynamicContentHeight`.\n   */\n  settlingHeight?: number;\n  /**\n   * Если высота контента в модальной странице может поменяться, нужно установить это свойство.\n   */\n  dynamicContentHeight?: boolean;\n  /**\n   * Отключает фокус на интерактивный элемент после открытия модалки.\n   */\n  noFocusToDialog?: boolean;\n  /**\n   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)\n   */\n  hideCloseButton?: boolean;\n  /**\n   * `data-testid` для содержимого модального окна.\n   */\n  modalContentTestId?: string;\n  /**\n   * Возвращает DOM-элемент содержимого модального окна.\n   */\n  getModalContentRef?: Ref<HTMLDivElement>;\n  /**\n   * `data-testid` для оверлея.\n   */\n  modalOverlayTestId?: string;\n  /**\n   * `data-testid` для кнопки закрытия.\n   */\n  modalDismissButtonTestId?: string;\n  /**\n   * Текст для скринридера\n   */\n  modalDismissButtonLabel?: string;\n  /**\n   * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)\n   *\n   * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте\n   */\n  preventClose?: boolean;\n  /**\n   * Отключает раскрытие и закрытие панели в мобильном виде.\n   */\n  disableContentPanningGesture?: boolean;\n  /**\n   * Будет вызвано при начале открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: (reason: ModalPageCloseReason, event?: UIEvent<HTMLElement>) => void;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n  /**\n   * Управляющие элементы под кнопкой закрытия.\n   *\n   * Доступно только в `compact`-режиме. Рекомендуется размещать иконки размера 20, обернутые в ModalOutsideButton\n   *\n   */\n  outsideButtons?: React.ReactNode;\n  /**\n   * Позволяет отключить захват фокуса.\n   *\n   * Нужно использовать, когда поверх одной модалки открывается другая, чтобы два `FocusTrap` не конфликтовали\n   */\n  disableFocusTrap?: UseFocusTrapProps['disabled'];\n}\n"],"names":[],"mappings":"AAeA,WAmHC"}

package/dist/cssm/components/ModalPageFooter/ModalPageFooter.module.css

@@ -1,13 +1,13 @@
 .host {
   position: relative;
-  inline-size: 100%;
-  border-end-start-radius: inherit;
-  border-end-end-radius: inherit;
-  background-color: var(--vkui--color_background_modal);
   box-sizing: border-box;
 
   /* см. `.children {}` в `ModalPage` */
   flex: 0 0 auto;
+  inline-size: 100%;
+  background-color: var(--vkui--color_background_modal);
+  border-end-start-radius: inherit;
+  border-end-end-radius: inherit;
 }
 
 .Separator {

package/dist/cssm/components/ModalPageHeader/ModalPageHeader.module.css

@@ -1,11 +1,10 @@
 .host {
   --vkui_internal--safe_area_inset_top: 0;
 
-  border-start-start-radius: inherit;
-  border-start-end-radius: inherit;
-
   /* см. `.children {}` в `ModalPage` */
   flex: 0 0 auto;
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
 }
 
 .hostWithGaps {

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

@@ -7,21 +7,22 @@ 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');
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
- */ export const OnboardingTooltip = ({ 'id': idProp, children, 'shown': shownProp = true, arrowPadding = DEFAULT_ARROW_PADDING, arrowHeight = DEFAULT_ARROW_HEIGHT, offsetByMainAxis = 0, offsetByCrossAxis = 0, arrowOffset = 0, isStaticArrowOffset = false, onClose, 'placement': placementProp = 'bottom-start', maxWidth = TOOLTIP_MAX_WIDTH, 'style': styleProp, getRootRef, disableArrow = false, onPlacementChange, disableFlipMiddleware = false, overlayLabel = 'Закрыть', title, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, restoreFocus, ...restProps })=>{
+ */ export const OnboardingTooltip = ({ 'id': idProp, children, 'shown': shownProp = true, arrowPadding = DEFAULT_ARROW_PADDING, arrowHeight = DEFAULT_ARROW_HEIGHT, offsetByMainAxis = 0, offsetByCrossAxis = 0, arrowOffset = 0, isStaticArrowOffset = false, onClose, 'placement': placementProp = 'bottom-start', maxWidth = TOOLTIP_MAX_WIDTH, 'style': styleProp, getRootRef, disableArrow = false, onPlacementChange, disableFlipMiddleware = false, overlayLabel = 'Закрыть', title, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, restoreFocus, disableFocusTrap, ...restProps })=>{
     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');
@@ -53,13 +54,18 @@ const warn = warnOnce('OnboardingTooltip');
     }
     let tooltip = null;
     if (shown) {
-        const floatingStyle = convertFloatingDataToReactCSSProperties(positionStrategy, floatingDataX, floatingDataY);
+        const floatingStyle = convertFloatingDataToReactCSSProperties({
+            strategy: positionStrategy,
+            x: floatingDataX,
+            y: floatingDataY
+        });
         tooltip = createPortal(/*#__PURE__*/ _jsxs(FocusTrap, {
             role: "dialog",
             "aria-modal": "true",
             "aria-label": ariaLabel,
             "aria-labelledby": title ? titleId : ariaLabel ? undefined : ariaLabelledBy,
             onClose: onClose,
+            disabled: disableFocusTrap,
             restoreFocus: restoreFocus,
             children: [
                 /*#__PURE__*/ _jsx("button", {
@@ -86,15 +92,22 @@ const warn = warnOnce('OnboardingTooltip');
             ]
         }), tooltipContainer);
     }
-    useIsomorphicLayoutEffect(function initialize() {
+    React.useEffect(function initialize() {
         const referenceEl = childRef.current;
-        if (referenceEl) {
-            setTooltipContainer(referenceEl.closest(`[${onboardingTooltipContainerAttr}]`));
+        if (!referenceEl) {
+            return;
+        }
+        const tooltipContainer = tooltipContainerRef.current || // eslint-disable-next-line no-restricted-properties
+        referenceEl.closest(`[${onboardingTooltipContainerAttr}]`);
+        if (tooltipContainer) {
+            setTooltipContainer(tooltipContainer);
             setPositionStrategy(referenceEl.style.position === 'fixed' ? 'fixed' : 'absolute');
             refs.setReference(referenceEl);
         }
     }, [
-        childRef
+        childRef,
+        refs,
+        tooltipContainerRef
     ]);
     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 { 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>;\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   * Callback, который вызывается при клике по любому месту в пределах экрана.\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  ...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      positionStrategy,\n      floatingDataX,\n      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        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","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","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":"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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 { 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   * Callback, который вызывается при клике по любому месту в пределах экрана.\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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"}

package/dist/cssm/components/OnboardingTooltip/OnboardingTooltip.module.css

@@ -1,7 +1,7 @@
 .overlay {
   position: fixed;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   inline-size: 100%;
   block-size: 100%;
   padding: 0;

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

@@ -1,14 +1,23 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { useExternRef } from "../../hooks/useExternRef.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(Component, {
-        ...dataProps,
-        ...props,
-        ref: ref
+    return /*#__PURE__*/ _jsx(OnboardingTooltipContext.Provider, {
+        value: {
+            containerRef
+        },
+        children: /*#__PURE__*/ _jsx(Component, {
+            ...dataProps,
+            ...props,
+            ref: containerRef
+        })
     });
 });
 OnboardingTooltipContainer.displayName = 'OnboardingTooltipContainer';