@vkontakte/vkui 7.7.2 → 7.8.0

package/dist/cssm/components/ModalCard/ModalCardInternal.js

@@ -32,10 +32,12 @@ const transitionStateClassNames = {
  * В компоненте заложена вся логика модального окна.
  *
  * @private
- */ export const ModalCardInternal = ({ icon, title, titleComponent, description, descriptionComponent, children, actions, size, open, style: styleProp, className, preventClose, ModalOverlay = ModalOverlayDefault, modalOverlayTestId, modalDismissButtonTestId, getRootRef, dismissButtonMode, dismissLabel, noFocusToDialog, restoreFocus, onOpen, onOpened, onClose = noop, onClosed, disableFocusTrap, disableModalOverlay, ...restProps })=>{
+ */ export const ModalCardInternal = ({ icon, title, titleComponent, description, descriptionComponent, children, actions, size, open, style: styleProp, className, preventClose, ModalOverlay = ModalOverlayDefault, modalOverlayTestId, modalDismissButtonTestId, getRootRef, dismissButtonMode, dismissLabel, noFocusToDialog, restoreFocus, onOpen, onOpened, onClose = noop, onClosed, disableFocusTrap, disableModalOverlay, disableOpenAnimation, disableCloseAnimation, ...restProps })=>{
     const platform = usePlatform();
     const [transitionState, { ref, onTransitionEnd }] = useCSSTransition(open, {
-        enableAppear: true,
+        enableAppear: !disableOpenAnimation,
+        enableEnter: !disableOpenAnimation,
+        enableExit: !disableCloseAnimation,
         onEnter () {
             onOpen?.();
         },
@@ -70,6 +72,8 @@ const transitionStateClassNames = {
         getRootRef: setBackdropEl,
         "data-testid": modalOverlayTestId,
         visible: open,
+        disableOpenAnimation: disableOpenAnimation,
+        disableCloseAnimation: disableCloseAnimation,
         onClick: closable ? function handleBackdropClick(event) {
             onClose('click-overlay', event);
         } : undefined

package/dist/cssm/components/ModalCard/ModalCardInternal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalCard/ModalCardInternal.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc */\n\nimport { type ComponentType, type KeyboardEvent, type ReactNode, useCallback } from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusTrap } from '../../hooks/useFocusTrap';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';\nimport { useBottomSheet } from '../../lib/sheet';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { ModalCardBase } from '../ModalCardBase/ModalCardBase';\nimport { ModalOutlet } from '../ModalOutlet/ModalOutlet';\nimport {\n  ModalOverlay as ModalOverlayDefault,\n  type ModalOverlayProps,\n} from '../ModalOverlay/ModalOverlay';\nimport type { ModalCardProps } from './types';\nimport styles from './ModalCard.module.css';\n\nconst sizeByPlatformClassNames = {\n  vkcom: styles['hostMaxWidthS'],\n  ios: styles['hostMaxWidthM'],\n  android: styles['hostMaxWidthL'],\n};\n\nconst transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {\n  appear: styles['hostStateEnter'],\n  appearing: styles['hostStateEntering'],\n\n  enter: styles['hostStateEnter'],\n  entering: styles['hostStateEntering'],\n\n  exiting: styles['hostStateExiting'],\n  exited: styles['hostStateExited'],\n};\n\nexport interface ModalCardInternalProps extends Omit<ModalCardProps, 'nav' | 'keepMounted'> {\n  ModalOverlay?: ComponentType<ModalOverlayProps>;\n}\n\n/**\n * В компоненте заложена вся логика модального окна.\n *\n * @private\n */\nexport const ModalCardInternal = ({\n  icon,\n  title,\n  titleComponent,\n  description,\n  descriptionComponent,\n  children,\n  actions,\n  size,\n  open,\n  style: styleProp,\n  className,\n  preventClose,\n  ModalOverlay = ModalOverlayDefault,\n  modalOverlayTestId,\n  modalDismissButtonTestId,\n  getRootRef,\n  dismissButtonMode,\n  dismissLabel,\n  noFocusToDialog,\n  restoreFocus,\n  onOpen,\n  onOpened,\n  onClose = noop,\n  onClosed,\n  disableFocusTrap,\n  disableModalOverlay,\n  ...restProps\n}: ModalCardInternalProps): ReactNode => {\n  const platform = usePlatform();\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 { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';\n\n  const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);\n  const [{ setSheetEl, setBackdropEl }, bottomSheetEventHandlers] = useBottomSheet(\n    bottomSheetEnabled,\n    {\n      blocked: keyboardOpened,\n      snapPoint: 'auto',\n      sheetCSSProperty: '--vkui_internal_ModalCard--translateY',\n      backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',\n      onDismiss() {\n        onClose?.('swipe-down');\n      },\n    },\n  );\n  const handleRef = useExternRef<HTMLDivElement>(setSheetEl, ref, getRootRef);\n  const style = keyboardOpened\n    ? {\n        ...styleProp,\n        '--vkui_internal_ModalCard--safeAreaInsetBottom': '0px',\n      }\n    : styleProp;\n  const modalOverlay = !disableModalOverlay && (\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  useFocusTrap(ref, {\n    autoFocus: !noFocusToDialog,\n    disabled: !opened || hidden || disableFocusTrap,\n    restoreFocus,\n  });\n\n  return (\n    <ModalOutlet\n      hidden={hidden}\n      isDesktop={isDesktop}\n      onKeyDown={handleEscKeyDown}\n      disableModalOverlay={disableModalOverlay}\n    >\n      {modalOverlay}\n      <ModalCardBase\n        {...restProps}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        getRootRef={handleRef}\n        style={style}\n        className={classNames(\n          styles.host,\n          isDesktop ? styles.hostDesktop : styles.hostMobile,\n          sizeByPlatformClassNames[platform],\n          transitionStateClassNames[transitionState],\n          className,\n        )}\n        onTransitionEnd={onTransitionEnd}\n        {...bottomSheetEventHandlers}\n        icon={icon}\n        title={title}\n        titleComponent={titleComponent}\n        description={description}\n        descriptionComponent={descriptionComponent}\n        actions={actions}\n        onClose={() => onClose('click-close-button')}\n        size={size}\n        modalDismissButtonTestId={modalDismissButtonTestId}\n        dismissButtonMode={dismissButtonMode}\n        dismissLabel={dismissLabel}\n      >\n        {children}\n      </ModalCardBase>\n    </ModalOutlet>\n  );\n};\n"],"names":["useCallback","classNames","noop","useAdaptivityWithJSMediaQueries","useExternRef","useFocusTrap","usePlatform","useVirtualKeyboardState","Keys","pressedKey","useCSSTransition","useBottomSheet","useScrollLock","ModalCardBase","ModalOutlet","ModalOverlay","ModalOverlayDefault","styles","sizeByPlatformClassNames","vkcom","ios","android","transitionStateClassNames","appear","appearing","enter","entering","exiting","exited","ModalCardInternal","icon","title","titleComponent","description","descriptionComponent","children","actions","size","open","style","styleProp","className","preventClose","modalOverlayTestId","modalDismissButtonTestId","getRootRef","dismissButtonMode","dismissLabel","noFocusToDialog","restoreFocus","onOpen","onOpened","onClose","onClosed","disableFocusTrap","disableModalOverlay","restProps","platform","transitionState","ref","onTransitionEnd","enableAppear","onEnter","onEntered","onExited","opened","hidden","closable","isDesktop","bottomSheetEnabled","keyboardOpened","setSheetEl","setBackdropEl","bottomSheetEventHandlers","blocked","snapPoint","sheetCSSProperty","backdropCSSProperty","onDismiss","handleRef","modalOverlay","data-testid","visible","onClick","handleBackdropClick","event","undefined","handleEscKeyDown","ESCAPE","autoFocus","disabled","onKeyDown","tabIndex","role","aria-modal","host","hostDesktop","hostMobile"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ModalCard/ModalCardInternal.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc */\n\nimport { type ComponentType, type KeyboardEvent, type ReactNode, useCallback } from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusTrap } from '../../hooks/useFocusTrap';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';\nimport { useBottomSheet } from '../../lib/sheet';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { ModalCardBase } from '../ModalCardBase/ModalCardBase';\nimport { ModalOutlet } from '../ModalOutlet/ModalOutlet';\nimport {\n  ModalOverlay as ModalOverlayDefault,\n  type ModalOverlayProps,\n} from '../ModalOverlay/ModalOverlay';\nimport type { ModalCardProps } from './types';\nimport styles from './ModalCard.module.css';\n\nconst sizeByPlatformClassNames = {\n  vkcom: styles['hostMaxWidthS'],\n  ios: styles['hostMaxWidthM'],\n  android: styles['hostMaxWidthL'],\n};\n\nconst transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {\n  appear: styles['hostStateEnter'],\n  appearing: styles['hostStateEntering'],\n\n  enter: styles['hostStateEnter'],\n  entering: styles['hostStateEntering'],\n\n  exiting: styles['hostStateExiting'],\n  exited: styles['hostStateExited'],\n};\n\nexport interface ModalCardInternalProps extends Omit<ModalCardProps, 'nav' | 'keepMounted'> {\n  ModalOverlay?: ComponentType<ModalOverlayProps>;\n}\n\n/**\n * В компоненте заложена вся логика модального окна.\n *\n * @private\n */\nexport const ModalCardInternal = ({\n  icon,\n  title,\n  titleComponent,\n  description,\n  descriptionComponent,\n  children,\n  actions,\n  size,\n  open,\n  style: styleProp,\n  className,\n  preventClose,\n  ModalOverlay = ModalOverlayDefault,\n  modalOverlayTestId,\n  modalDismissButtonTestId,\n  getRootRef,\n  dismissButtonMode,\n  dismissLabel,\n  noFocusToDialog,\n  restoreFocus,\n  onOpen,\n  onOpened,\n  onClose = noop,\n  onClosed,\n  disableFocusTrap,\n  disableModalOverlay,\n  disableOpenAnimation,\n  disableCloseAnimation,\n  ...restProps\n}: ModalCardInternalProps): ReactNode => {\n  const platform = usePlatform();\n  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(open, {\n    enableAppear: !disableOpenAnimation,\n    enableEnter: !disableOpenAnimation,\n    enableExit: !disableCloseAnimation,\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 { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';\n\n  const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);\n  const [{ setSheetEl, setBackdropEl }, bottomSheetEventHandlers] = useBottomSheet(\n    bottomSheetEnabled,\n    {\n      blocked: keyboardOpened,\n      snapPoint: 'auto',\n      sheetCSSProperty: '--vkui_internal_ModalCard--translateY',\n      backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',\n      onDismiss() {\n        onClose?.('swipe-down');\n      },\n    },\n  );\n  const handleRef = useExternRef<HTMLDivElement>(setSheetEl, ref, getRootRef);\n  const style = keyboardOpened\n    ? {\n        ...styleProp,\n        '--vkui_internal_ModalCard--safeAreaInsetBottom': '0px',\n      }\n    : styleProp;\n  const modalOverlay = !disableModalOverlay && (\n    <ModalOverlay\n      getRootRef={setBackdropEl}\n      data-testid={modalOverlayTestId}\n      visible={open}\n      disableOpenAnimation={disableOpenAnimation}\n      disableCloseAnimation={disableCloseAnimation}\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  useFocusTrap(ref, {\n    autoFocus: !noFocusToDialog,\n    disabled: !opened || hidden || disableFocusTrap,\n    restoreFocus,\n  });\n\n  return (\n    <ModalOutlet\n      hidden={hidden}\n      isDesktop={isDesktop}\n      onKeyDown={handleEscKeyDown}\n      disableModalOverlay={disableModalOverlay}\n    >\n      {modalOverlay}\n      <ModalCardBase\n        {...restProps}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        getRootRef={handleRef}\n        style={style}\n        className={classNames(\n          styles.host,\n          isDesktop ? styles.hostDesktop : styles.hostMobile,\n          sizeByPlatformClassNames[platform],\n          transitionStateClassNames[transitionState],\n          className,\n        )}\n        onTransitionEnd={onTransitionEnd}\n        {...bottomSheetEventHandlers}\n        icon={icon}\n        title={title}\n        titleComponent={titleComponent}\n        description={description}\n        descriptionComponent={descriptionComponent}\n        actions={actions}\n        onClose={() => onClose('click-close-button')}\n        size={size}\n        modalDismissButtonTestId={modalDismissButtonTestId}\n        dismissButtonMode={dismissButtonMode}\n        dismissLabel={dismissLabel}\n      >\n        {children}\n      </ModalCardBase>\n    </ModalOutlet>\n  );\n};\n"],"names":["useCallback","classNames","noop","useAdaptivityWithJSMediaQueries","useExternRef","useFocusTrap","usePlatform","useVirtualKeyboardState","Keys","pressedKey","useCSSTransition","useBottomSheet","useScrollLock","ModalCardBase","ModalOutlet","ModalOverlay","ModalOverlayDefault","styles","sizeByPlatformClassNames","vkcom","ios","android","transitionStateClassNames","appear","appearing","enter","entering","exiting","exited","ModalCardInternal","icon","title","titleComponent","description","descriptionComponent","children","actions","size","open","style","styleProp","className","preventClose","modalOverlayTestId","modalDismissButtonTestId","getRootRef","dismissButtonMode","dismissLabel","noFocusToDialog","restoreFocus","onOpen","onOpened","onClose","onClosed","disableFocusTrap","disableModalOverlay","disableOpenAnimation","disableCloseAnimation","restProps","platform","transitionState","ref","onTransitionEnd","enableAppear","enableEnter","enableExit","onEnter","onEntered","onExited","opened","hidden","closable","isDesktop","bottomSheetEnabled","keyboardOpened","setSheetEl","setBackdropEl","bottomSheetEventHandlers","blocked","snapPoint","sheetCSSProperty","backdropCSSProperty","onDismiss","handleRef","modalOverlay","data-testid","visible","onClick","handleBackdropClick","event","undefined","handleEscKeyDown","ESCAPE","autoFocus","disabled","onKeyDown","tabIndex","role","aria-modal","host","hostDesktop","hostMobile"],"mappings":"AAAA;;AACA,sCAAsC,GAEtC,SAAiEA,WAAW,QAAQ,QAAQ;AAC5F,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,uBAAuB,QAAQ,yCAAsC;AAC9E,SAASC,IAAI,EAAEC,UAAU,QAAQ,6BAA0B;AAC3D,SAASC,gBAAgB,QAAoC,+BAAsB;AACnF,SAASC,cAAc,QAAQ,2BAAkB;AACjD,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,WAAW,QAAQ,gCAA6B;AACzD,SACEC,gBAAgBC,mBAAmB,QAE9B,kCAA+B;AAEtC,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,2BAA2B;IAC/BC,OAAOF,MAAM,CAAC,gBAAgB;IAC9BG,KAAKH,MAAM,CAAC,gBAAgB;IAC5BI,SAASJ,MAAM,CAAC,gBAAgB;AAClC;AAEA,MAAMK,4BAA4E;IAChFC,QAAQN,MAAM,CAAC,iBAAiB;IAChCO,WAAWP,MAAM,CAAC,oBAAoB;IAEtCQ,OAAOR,MAAM,CAAC,iBAAiB;IAC/BS,UAAUT,MAAM,CAAC,oBAAoB;IAErCU,SAASV,MAAM,CAAC,mBAAmB;IACnCW,QAAQX,MAAM,CAAC,kBAAkB;AACnC;AAMA;;;;CAIC,GACD,OAAO,MAAMY,oBAAoB,CAAC,EAChCC,IAAI,EACJC,KAAK,EACLC,cAAc,EACdC,WAAW,EACXC,oBAAoB,EACpBC,QAAQ,EACRC,OAAO,EACPC,IAAI,EACJC,IAAI,EACJC,OAAOC,SAAS,EAChBC,SAAS,EACTC,YAAY,EACZ3B,eAAeC,mBAAmB,EAClC2B,kBAAkB,EAClBC,wBAAwB,EACxBC,UAAU,EACVC,iBAAiB,EACjBC,YAAY,EACZC,eAAe,EACfC,YAAY,EACZC,MAAM,EACNC,QAAQ,EACRC,UAAUlD,IAAI,EACdmD,QAAQ,EACRC,gBAAgB,EAChBC,mBAAmB,EACnBC,oBAAoB,EACpBC,qBAAqB,EACrB,GAAGC,WACoB;IACvB,MAAMC,WAAWrD;IACjB,MAAM,CAACsD,iBAAiB,EAAEC,GAAG,EAAEC,eAAe,EAAE,CAAC,GAAGpD,iBAAiC4B,MAAM;QACzFyB,cAAc,CAACP;QACfQ,aAAa,CAACR;QACdS,YAAY,CAACR;QACbS;YACEhB;QACF;QACAiB;YACEhB;QACF;QACAiB;YACEf;QACF;IACF;IACA,MAAMgB,SAAST,oBAAoB,cAAcA,oBAAoB;IACrE,MAAMU,SAASV,oBAAoB;IACnC,MAAMW,WAAW,CAAC7B,gBAAgB2B;IAElC,MAAM,EAAEG,SAAS,EAAE,GAAGrE;IACtB,MAAMsE,qBAAqB,CAACD,aAAa,CAAC9B,gBAAgBkB,oBAAoB;IAE9E,MAAM,EAAES,QAAQK,cAAc,EAAE,GAAGnE,wBAAwBkE;IAC3D,MAAM,CAAC,EAAEE,UAAU,EAAEC,aAAa,EAAE,EAAEC,yBAAyB,GAAGlE,eAChE8D,oBACA;QACEK,SAASJ;QACTK,WAAW;QACXC,kBAAkB;QAClBC,qBAAqB;QACrBC;YACE9B,UAAU;QACZ;IACF;IAEF,MAAM+B,YAAY/E,aAA6BuE,YAAYd,KAAKhB;IAChE,MAAMN,QAAQmC,iBACV;QACE,GAAGlC,SAAS;QACZ,kDAAkD;IACpD,IACAA;IACJ,MAAM4C,eAAe,CAAC7B,qCACpB,KAACxC;QACC8B,YAAY+B;QACZS,eAAa1C;QACb2C,SAAShD;QACTkB,sBAAsBA;QACtBC,uBAAuBA;QACvB8B,SACEhB,WACI,SAASiB,oBAAoBC,KAAK;YAChCrC,QAAQ,iBAAiBqC;QAC3B,IACAC;;IAIV,MAAMC,mBAAmB3F,YACvB,CAACyF;QACC,IAAIlB,YAAY9D,WAAWgF,WAAWjF,KAAKoF,MAAM,EAAE;YACjDxC,QAAQ;QACV;IACF,GACA;QAACmB;QAAUnB;KAAQ;IAGrBxC,cAAc,CAAC0D;IACfjE,aAAawD,KAAK;QAChBgC,WAAW,CAAC7C;QACZ8C,UAAU,CAACzB,UAAUC,UAAUhB;QAC/BL;IACF;IAEA,qBACE,MAACnC;QACCwD,QAAQA;QACRE,WAAWA;QACXuB,WAAWJ;QACXpC,qBAAqBA;;YAEpB6B;0BACD,KAACvE;gBACE,GAAG6C,SAAS;gBACbsC,UAAU,CAAC;gBACXC,MAAK;gBACLC,cAAW;gBACXrD,YAAYsC;gBACZ5C,OAAOA;gBACPE,WAAWxC,WACTgB,OAAOkF,IAAI,EACX3B,YAAYvD,OAAOmF,WAAW,GAAGnF,OAAOoF,UAAU,EAClDnF,wBAAwB,CAACyC,SAAS,EAClCrC,yBAAyB,CAACsC,gBAAgB,EAC1CnB;gBAEFqB,iBAAiBA;gBAChB,GAAGe,wBAAwB;gBAC5B/C,MAAMA;gBACNC,OAAOA;gBACPC,gBAAgBA;gBAChBC,aAAaA;gBACbC,sBAAsBA;gBACtBE,SAASA;gBACTgB,SAAS,IAAMA,QAAQ;gBACvBf,MAAMA;gBACNO,0BAA0BA;gBAC1BE,mBAAmBA;gBACnBC,cAAcA;0BAEbZ;;;;AAIT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalCard/types.ts"],"sourcesContent":["import type { UIEvent } from 'react';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport type { NavIdProps } from '../../lib/getNavId';\nimport type { UseBottomSheetHandlers } from '../../lib/sheet';\nimport type { ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\n\nexport type ModalCardCloseReason =\n  | 'click-overlay'\n  | 'click-close-button'\n  | 'escape-key'\n  | 'swipe-down';\n\nexport interface ModalCardProps\n  extends NavIdProps,\n    Omit<ModalCardBaseProps, 'id' | 'onClose' | 'onTransitionEnd' | keyof UseBottomSheetHandlers>,\n    Pick<UseFocusTrapProps, 'restoreFocus'> {\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   * Отключает фокус на интерактивный элемент после открытия модалки.\n   *\n   * > Важно установить фокус после открытия в любое место модалки используя событие `onOpened`, иначе не будет работать закрытие по нажатию `Esc`.\n   */\n  noFocusToDialog?: boolean;\n  /**\n   * `data-testid` для оверлея.\n   */\n  modalOverlayTestId?: string;\n  /**\n   * Будет вызвано при начале открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: (reason: ModalCardCloseReason, event?: UIEvent<HTMLElement>) => void;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n  /**\n   * Позволяет отключить захват фокуса.\n   *\n   * Нужно использовать, когда поверх одной модалки открывается другая, чтобы два `FocusTrap` не конфликтовали.\n   */\n  disableFocusTrap?: UseFocusTrapProps['disabled'];\n  /**\n   * Отключает отображение и взаимодействие с фоном модалки.\n   * > При использовании `ModalCard` внутри `ModalRoot` есть особенность использования этого свойства.\n   * > Об этом можно почитать на странице документации [`ModalRoot`](/components/modal-root#otklyuchenie-zadnego-fona-u-konkretnogo-modalnogo-okna).\n   */\n  disableModalOverlay?: boolean;\n}\n"],"names":[],"mappings":"AAYA,WAsDC"}
+{"version":3,"sources":["../../../../src/components/ModalCard/types.ts"],"sourcesContent":["import type { UIEvent } from 'react';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport type { NavIdProps } from '../../lib/getNavId';\nimport type { UseBottomSheetHandlers } from '../../lib/sheet';\nimport type { ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\n\nexport type ModalCardCloseReason =\n  | 'click-overlay'\n  | 'click-close-button'\n  | 'escape-key'\n  | 'swipe-down';\n\nexport interface ModalCardProps\n  extends NavIdProps,\n    Omit<ModalCardBaseProps, 'id' | 'onClose' | 'onTransitionEnd' | keyof UseBottomSheetHandlers>,\n    Pick<UseFocusTrapProps, 'restoreFocus'> {\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   * Отключает фокус на интерактивный элемент после открытия модалки.\n   *\n   * > Важно установить фокус после открытия в любое место модалки используя событие `onOpened`, иначе не будет работать закрытие по нажатию `Esc`.\n   */\n  noFocusToDialog?: boolean;\n  /**\n   * `data-testid` для оверлея.\n   */\n  modalOverlayTestId?: string;\n  /**\n   * Будет вызвано при начале открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: (reason: ModalCardCloseReason, event?: UIEvent<HTMLElement>) => void;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n  /**\n   * Позволяет отключить захват фокуса.\n   *\n   * Нужно использовать, когда поверх одной модалки открывается другая, чтобы два `FocusTrap` не конфликтовали.\n   */\n  disableFocusTrap?: UseFocusTrapProps['disabled'];\n  /**\n   * Отключает отображение и взаимодействие с фоном модалки.\n   * > При использовании `ModalCard` внутри `ModalRoot` есть особенность использования этого свойства.\n   * > Об этом можно почитать на странице документации [`ModalRoot`](/components/modal-root#disable-modal-overlay).\n   */\n  disableModalOverlay?: boolean;\n  /**\n   * Отключает анимацию открытия модалки.\n   */\n  disableOpenAnimation?: boolean;\n  /**\n   * Отключает анимацию закрытия модалки.\n   */\n  disableCloseAnimation?: boolean;\n}\n"],"names":[],"mappings":"AAYA,WA8DC"}

package/dist/cssm/components/ModalOverlay/ModalOverlay.js

@@ -21,9 +21,11 @@ const transitionStateClassNames = {
 };
 /**
  * @private
- */ export const ModalOverlay = ({ visible = false, position = 'absolute', getRootRef, onClick, ...restProps })=>{
+ */ export const ModalOverlay = ({ visible = false, position = 'absolute', getRootRef, onClick, disableOpenAnimation, disableCloseAnimation, ...restProps })=>{
     const [transitionState, { ref, onTransitionEnd }] = useCSSTransition(visible, {
-        enableAppear: true
+        enableAppear: !disableOpenAnimation,
+        enableEnter: !disableOpenAnimation,
+        enableExit: !disableCloseAnimation
     });
     const handleRef = useExternRef(getRootRef, ref);
     return /*#__PURE__*/ _jsx("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalOverlay/ModalOverlay.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc */\n\nimport type { DataHTMLAttributes } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation/useCSSTransition';\nimport type { HasRootRef } from '../../types';\nimport styles from './ModalOverlay.module.css';\n\nconst positionClassNames = {\n  absolute: styles.hostPositionAbsolute,\n  fixed: styles.hostPositionFixed,\n};\n\nconst transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {\n  appear: styles['hostStateEnter'],\n  appearing: styles['hostStateEntering'],\n  appeared: styles['hostStateEntered'],\n  enter: styles['hostStateEnter'],\n  entering: styles['hostStateEntering'],\n  entered: styles['hostStateEntered'],\n  exit: styles['hostStateExit'],\n  exiting: styles['hostStateExiting'],\n  exited: styles['hostStateExited'],\n};\n\nexport interface ModalOverlayProps\n  extends DataHTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  visible?: boolean;\n  position?: 'absolute' | 'fixed';\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n}\n\n/**\n * @private\n */\nexport const ModalOverlay = ({\n  visible = false,\n  position = 'absolute',\n  getRootRef,\n  onClick,\n  ...restProps\n}: ModalOverlayProps) => {\n  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(visible, {\n    enableAppear: true,\n  });\n  const handleRef = useExternRef(getRootRef, ref);\n\n  return (\n    <div\n      {...restProps}\n      ref={handleRef}\n      aria-hidden=\"true\"\n      hidden={transitionState === 'exited'}\n      className={classNames(\n        styles.host,\n        onClick === undefined && styles.nonInteractive,\n        positionClassNames[position],\n        transitionStateClassNames[transitionState],\n      )}\n      onClick={onClick}\n      onTransitionEnd={onTransitionEnd}\n    />\n  );\n};\n"],"names":["classNames","useExternRef","useCSSTransition","styles","positionClassNames","absolute","hostPositionAbsolute","fixed","hostPositionFixed","transitionStateClassNames","appear","appearing","appeared","enter","entering","entered","exit","exiting","exited","ModalOverlay","visible","position","getRootRef","onClick","restProps","transitionState","ref","onTransitionEnd","enableAppear","handleRef","div","aria-hidden","hidden","className","host","undefined","nonInteractive"],"mappings":"AAAA;;AAIA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,gBAAgB,QAAoC,0CAAuC;AAEpG,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,qBAAqB;IACzBC,UAAUF,OAAOG,oBAAoB;IACrCC,OAAOJ,OAAOK,iBAAiB;AACjC;AAEA,MAAMC,4BAA4E;IAChFC,QAAQP,MAAM,CAAC,iBAAiB;IAChCQ,WAAWR,MAAM,CAAC,oBAAoB;IACtCS,UAAUT,MAAM,CAAC,mBAAmB;IACpCU,OAAOV,MAAM,CAAC,iBAAiB;IAC/BW,UAAUX,MAAM,CAAC,oBAAoB;IACrCY,SAASZ,MAAM,CAAC,mBAAmB;IACnCa,MAAMb,MAAM,CAAC,gBAAgB;IAC7Bc,SAASd,MAAM,CAAC,mBAAmB;IACnCe,QAAQf,MAAM,CAAC,kBAAkB;AACnC;AAUA;;CAEC,GACD,OAAO,MAAMgB,eAAe,CAAC,EAC3BC,UAAU,KAAK,EACfC,WAAW,UAAU,EACrBC,UAAU,EACVC,OAAO,EACP,GAAGC,WACe;IAClB,MAAM,CAACC,iBAAiB,EAAEC,GAAG,EAAEC,eAAe,EAAE,CAAC,GAAGzB,iBAAiCkB,SAAS;QAC5FQ,cAAc;IAChB;IACA,MAAMC,YAAY5B,aAAaqB,YAAYI;IAE3C,qBACE,KAACI;QACE,GAAGN,SAAS;QACbE,KAAKG;QACLE,eAAY;QACZC,QAAQP,oBAAoB;QAC5BQ,WAAWjC,WACTG,OAAO+B,IAAI,EACXX,YAAYY,aAAahC,OAAOiC,cAAc,EAC9ChC,kBAAkB,CAACiB,SAAS,EAC5BZ,yBAAyB,CAACgB,gBAAgB;QAE5CF,SAASA;QACTI,iBAAiBA;;AAGvB,EAAE"}
+{"version":3,"sources":["../../../../src/components/ModalOverlay/ModalOverlay.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc */\n\nimport type { DataHTMLAttributes } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation/useCSSTransition';\nimport type { HasRootRef } from '../../types';\nimport styles from './ModalOverlay.module.css';\n\nconst positionClassNames = {\n  absolute: styles.hostPositionAbsolute,\n  fixed: styles.hostPositionFixed,\n};\n\nconst transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {\n  appear: styles['hostStateEnter'],\n  appearing: styles['hostStateEntering'],\n  appeared: styles['hostStateEntered'],\n  enter: styles['hostStateEnter'],\n  entering: styles['hostStateEntering'],\n  entered: styles['hostStateEntered'],\n  exit: styles['hostStateExit'],\n  exiting: styles['hostStateExiting'],\n  exited: styles['hostStateExited'],\n};\n\nexport interface ModalOverlayProps\n  extends DataHTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  visible?: boolean;\n  position?: 'absolute' | 'fixed';\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  disableOpenAnimation?: boolean;\n  disableCloseAnimation?: boolean;\n}\n\n/**\n * @private\n */\nexport const ModalOverlay = ({\n  visible = false,\n  position = 'absolute',\n  getRootRef,\n  onClick,\n  disableOpenAnimation,\n  disableCloseAnimation,\n  ...restProps\n}: ModalOverlayProps) => {\n  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(visible, {\n    enableAppear: !disableOpenAnimation,\n    enableEnter: !disableOpenAnimation,\n    enableExit: !disableCloseAnimation,\n  });\n  const handleRef = useExternRef(getRootRef, ref);\n\n  return (\n    <div\n      {...restProps}\n      ref={handleRef}\n      aria-hidden=\"true\"\n      hidden={transitionState === 'exited'}\n      className={classNames(\n        styles.host,\n        onClick === undefined && styles.nonInteractive,\n        positionClassNames[position],\n        transitionStateClassNames[transitionState],\n      )}\n      onClick={onClick}\n      onTransitionEnd={onTransitionEnd}\n    />\n  );\n};\n"],"names":["classNames","useExternRef","useCSSTransition","styles","positionClassNames","absolute","hostPositionAbsolute","fixed","hostPositionFixed","transitionStateClassNames","appear","appearing","appeared","enter","entering","entered","exit","exiting","exited","ModalOverlay","visible","position","getRootRef","onClick","disableOpenAnimation","disableCloseAnimation","restProps","transitionState","ref","onTransitionEnd","enableAppear","enableEnter","enableExit","handleRef","div","aria-hidden","hidden","className","host","undefined","nonInteractive"],"mappings":"AAAA;;AAIA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,gBAAgB,QAAoC,0CAAuC;AAEpG,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,qBAAqB;IACzBC,UAAUF,OAAOG,oBAAoB;IACrCC,OAAOJ,OAAOK,iBAAiB;AACjC;AAEA,MAAMC,4BAA4E;IAChFC,QAAQP,MAAM,CAAC,iBAAiB;IAChCQ,WAAWR,MAAM,CAAC,oBAAoB;IACtCS,UAAUT,MAAM,CAAC,mBAAmB;IACpCU,OAAOV,MAAM,CAAC,iBAAiB;IAC/BW,UAAUX,MAAM,CAAC,oBAAoB;IACrCY,SAASZ,MAAM,CAAC,mBAAmB;IACnCa,MAAMb,MAAM,CAAC,gBAAgB;IAC7Bc,SAASd,MAAM,CAAC,mBAAmB;IACnCe,QAAQf,MAAM,CAAC,kBAAkB;AACnC;AAYA;;CAEC,GACD,OAAO,MAAMgB,eAAe,CAAC,EAC3BC,UAAU,KAAK,EACfC,WAAW,UAAU,EACrBC,UAAU,EACVC,OAAO,EACPC,oBAAoB,EACpBC,qBAAqB,EACrB,GAAGC,WACe;IAClB,MAAM,CAACC,iBAAiB,EAAEC,GAAG,EAAEC,eAAe,EAAE,CAAC,GAAG3B,iBAAiCkB,SAAS;QAC5FU,cAAc,CAACN;QACfO,aAAa,CAACP;QACdQ,YAAY,CAACP;IACf;IACA,MAAMQ,YAAYhC,aAAaqB,YAAYM;IAE3C,qBACE,KAACM;QACE,GAAGR,SAAS;QACbE,KAAKK;QACLE,eAAY;QACZC,QAAQT,oBAAoB;QAC5BU,WAAWrC,WACTG,OAAOmC,IAAI,EACXf,YAAYgB,aAAapC,OAAOqC,cAAc,EAC9CpC,kBAAkB,CAACiB,SAAS,EAC5BZ,yBAAyB,CAACkB,gBAAgB;QAE5CJ,SAASA;QACTM,iBAAiBA;;AAGvB,EAAE"}

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

@@ -28,10 +28,12 @@ const transitionStateClassNames = {
  * В компоненте заложена вся логика модального окна.
  *
  * @private
- */ 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, disableModalOverlay, ...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, disableModalOverlay, disableOpenAnimation = false, disableCloseAnimation = false, ...restProps })=>{
     const { hasCustomPanelHeaderAfter } = useConfigProvider();
     const [transitionState, { ref, onTransitionEnd }] = useCSSTransition(open, {
-        enableAppear: true,
+        enableAppear: !disableOpenAnimation,
+        enableEnter: !disableOpenAnimation,
+        enableExit: !disableCloseAnimation,
         onEnter () {
             onOpen?.();
         },
@@ -72,6 +74,8 @@ const transitionStateClassNames = {
         getRootRef: setBackdropEl,
         "data-testid": modalOverlayTestId,
         visible: open,
+        disableOpenAnimation: disableOpenAnimation,
+        disableCloseAnimation: disableCloseAnimation,
         onClick: closable ? function handleBackdropClick(event) {
             onClose('click-overlay', event);
         } : undefined

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalPage/ModalPageInternal.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc */\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  disableModalOverlay,\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] = isDesktop\n    ? resolveDesktopMaxWidth(desktopMaxWidth)\n    : [undefined, undefined];\n\n  const modalOverlay = !disableModalOverlay && (\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\n      hidden={hidden}\n      isDesktop={isDesktop}\n      onKeyDown={handleEscKeyDown}\n      disableModalOverlay={disableModalOverlay}\n    >\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 === 'number') {\n    return [undefined, { '--vkui_internal_ModalPage--desktopMaxWidth': `${desktopMaxWidth}px` }];\n  }\n\n  return desktopMaxWidthClassNames.hasOwnProperty(desktopMaxWidth)\n    ? [desktopMaxWidthClassNames[desktopMaxWidth], undefined]\n    : [undefined, { '--vkui_internal_ModalPage--desktopMaxWidth': desktopMaxWidth }];\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","disableModalOverlay","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","undefined","modalOverlay","getRootRef","data-testid","visible","onClick","handleBackdropClick","event","handleEscKeyDown","ESCAPE","onKeyDown","autoFocus","role","aria-modal","disabled","host","hostDesktop","hostMobile","hostMobileSafeAreaInsetTopWithCustomOffset","hostMobileSafeAreaInsetTop","getHeightCSSVariable","getRef","documentDesktop","documentMobile","desktopMaxWidthClassNames","s","m","l","hasOwnProperty"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ModalPage/ModalPageInternal.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc */\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  disableModalOverlay,\n  disableOpenAnimation = false,\n  disableCloseAnimation = false,\n  ...restProps\n}: ModalPageInternalProps) => {\n  const { hasCustomPanelHeaderAfter } = useConfigProvider();\n  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(open, {\n    enableAppear: !disableOpenAnimation,\n    enableEnter: !disableOpenAnimation,\n    enableExit: !disableCloseAnimation,\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] = isDesktop\n    ? resolveDesktopMaxWidth(desktopMaxWidth)\n    : [undefined, undefined];\n\n  const modalOverlay = !disableModalOverlay && (\n    <ModalOverlay\n      getRootRef={setBackdropEl}\n      data-testid={modalOverlayTestId}\n      visible={open}\n      disableOpenAnimation={disableOpenAnimation}\n      disableCloseAnimation={disableCloseAnimation}\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\n      hidden={hidden}\n      isDesktop={isDesktop}\n      onKeyDown={handleEscKeyDown}\n      disableModalOverlay={disableModalOverlay}\n    >\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 === 'number') {\n    return [undefined, { '--vkui_internal_ModalPage--desktopMaxWidth': `${desktopMaxWidth}px` }];\n  }\n\n  return desktopMaxWidthClassNames.hasOwnProperty(desktopMaxWidth)\n    ? [desktopMaxWidthClassNames[desktopMaxWidth], undefined]\n    : [undefined, { '--vkui_internal_ModalPage--desktopMaxWidth': desktopMaxWidth }];\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","disableModalOverlay","disableOpenAnimation","disableCloseAnimation","restProps","hasCustomPanelHeaderAfter","transitionState","ref","onTransitionEnd","enableAppear","enableEnter","enableExit","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","undefined","modalOverlay","getRootRef","data-testid","visible","onClick","handleBackdropClick","event","handleEscKeyDown","ESCAPE","onKeyDown","autoFocus","role","aria-modal","disabled","host","hostDesktop","hostMobile","hostMobileSafeAreaInsetTopWithCustomOffset","hostMobileSafeAreaInsetTop","getHeightCSSVariable","getRef","documentDesktop","documentMobile","desktopMaxWidthClassNames","s","m","l","hasOwnProperty"],"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, LiteralUnion } from '../../types';\n\nexport type ModalPageCloseReason =\n  | 'click-overlay'\n  | 'click-close-button'\n  | 'escape-key'\n  | 'swipe-down';\n\ntype OmittedStyleAttribute = {\n  /**\n   * Дополнительные стили.\n   */\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?: LiteralUnion<\n    's' | 'm' | 'l' | 'auto' | 'fit-content' | 'max-content' | 'min-content',\n    string | number\n  >;\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   * > Важно установить фокус после открытия в любое место модалки используя событие `onOpened`, иначе не будет работать закрытие по нажатию `Esc`.\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   * Отключает отображение и взаимодействие с фоном модалки.\n   * > При использовании `ModalPage` внутри `ModalRoot` есть особенность использования этого свойства.\n   * > Об этом можно почитать на странице документации [`ModalRoot`](/components/modal-root#otklyuchenie-zadnego-fona-u-konkretnogo-modalnogo-okna).\n   */\n  disableModalOverlay?: boolean;\n}\n"],"names":[],"mappings":"AAkBA,WA8HC"}
+{"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, LiteralUnion } from '../../types';\n\nexport type ModalPageCloseReason =\n  | 'click-overlay'\n  | 'click-close-button'\n  | 'escape-key'\n  | 'swipe-down';\n\ntype OmittedStyleAttribute = {\n  /**\n   * Дополнительные стили.\n   */\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?: LiteralUnion<\n    's' | 'm' | 'l' | 'auto' | 'fit-content' | 'max-content' | 'min-content',\n    string | number\n  >;\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   * > Важно установить фокус после открытия в любое место модалки используя событие `onOpened`, иначе не будет работать закрытие по нажатию `Esc`.\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   * Отключает отображение и взаимодействие с фоном модалки.\n   * > При использовании `ModalPage` внутри `ModalRoot` есть особенность использования этого свойства.\n   * > Об этом можно почитать на странице документации [`ModalRoot`](/components/modal-root#disable-modal-overlay).\n   */\n  disableModalOverlay?: boolean;\n  /**\n   * Отключает анимацию открытия модалки.\n   */\n  disableOpenAnimation?: boolean;\n  /**\n   * Отключает анимацию закрытия модалки.\n   */\n  disableCloseAnimation?: boolean;\n}\n"],"names":[],"mappings":"AAkBA,WAsIC"}

package/dist/cssm/components/ModalRoot/VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay.js

@@ -12,7 +12,7 @@ import styles from "./VisuallyHiddenModalOverlay.module.css";
  * В `getRooRef` отдаёт ссылку на DOM общего `ModalOverlay`.
  *
  * @private
- */ export const VisuallyHiddenModalOverlay = ({ visible: visibleExcluded, position: positionExcluded, getRootRef, ...restProps })=>{
+ */ export const VisuallyHiddenModalOverlay = ({ visible: visibleExcluded, position: positionExcluded, getRootRef, disableOpenAnimation, disableCloseAnimation, ...restProps })=>{
     const ref = useContext(ModalRootOverlayContext);
     return /*#__PURE__*/ _jsx("div", {
         ...restProps,

package/dist/cssm/components/ModalRoot/VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ModalRoot/VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay.tsx"],"sourcesContent":["'use client';\n\nimport { useContext } from 'react';\nimport { setRef } from '../../../lib/utils';\nimport type { ModalOverlayProps } from '../../ModalOverlay/ModalOverlay';\nimport { ModalRootOverlayContext } from '../ModalRootContext';\nimport styles from './VisuallyHiddenModalOverlay.module.css';\n\nexport type VisuallyHiddenModalOverlayProps = ModalOverlayProps;\n\n/**\n * `ModalRoot` выставляет общий `ModalOverlay` для всех потомков, и чтобы не нарушить логику\n * в `ModalPage` и `ModalCard`, в них прокидывается данный компонент, который визуально не виден,\n * но при этом на нём сохраняется возможность взаимодействия.\n *\n * В `getRooRef` отдаёт ссылку на DOM общего `ModalOverlay`.\n *\n * @private\n */\nexport const VisuallyHiddenModalOverlay = ({\n  visible: visibleExcluded,\n  position: positionExcluded,\n  getRootRef,\n  ...restProps\n}: VisuallyHiddenModalOverlayProps) => {\n  const ref = useContext(ModalRootOverlayContext);\n  return (\n    <div\n      {...restProps}\n      aria-hidden=\"true\"\n      className={styles.host}\n      ref={function handleCurrentRefForForwardContextRef() {\n        setRef(ref.current, getRootRef);\n      }}\n    />\n  );\n};\n"],"names":["useContext","setRef","ModalRootOverlayContext","styles","VisuallyHiddenModalOverlay","visible","visibleExcluded","position","positionExcluded","getRootRef","restProps","ref","div","aria-hidden","className","host","handleCurrentRefForForwardContextRef","current"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,MAAM,QAAQ,wBAAqB;AAE5C,SAASC,uBAAuB,QAAQ,yBAAsB;AAC9D,OAAOC,YAAY,0CAA0C;AAI7D;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CAAC,EACzCC,SAASC,eAAe,EACxBC,UAAUC,gBAAgB,EAC1BC,UAAU,EACV,GAAGC,WAC6B;IAChC,MAAMC,MAAMX,WAAWE;IACvB,qBACE,KAACU;QACE,GAAGF,SAAS;QACbG,eAAY;QACZC,WAAWX,OAAOY,IAAI;QACtBJ,KAAK,SAASK;YACZf,OAAOU,IAAIM,OAAO,EAAER;QACtB;;AAGN,EAAE"}
+{"version":3,"sources":["../../../../../src/components/ModalRoot/VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay.tsx"],"sourcesContent":["'use client';\n\nimport { useContext } from 'react';\nimport { setRef } from '../../../lib/utils';\nimport type { ModalOverlayProps } from '../../ModalOverlay/ModalOverlay';\nimport { ModalRootOverlayContext } from '../ModalRootContext';\nimport styles from './VisuallyHiddenModalOverlay.module.css';\n\nexport type VisuallyHiddenModalOverlayProps = ModalOverlayProps;\n\n/**\n * `ModalRoot` выставляет общий `ModalOverlay` для всех потомков, и чтобы не нарушить логику\n * в `ModalPage` и `ModalCard`, в них прокидывается данный компонент, который визуально не виден,\n * но при этом на нём сохраняется возможность взаимодействия.\n *\n * В `getRooRef` отдаёт ссылку на DOM общего `ModalOverlay`.\n *\n * @private\n */\nexport const VisuallyHiddenModalOverlay = ({\n  visible: visibleExcluded,\n  position: positionExcluded,\n  getRootRef,\n  disableOpenAnimation,\n  disableCloseAnimation,\n  ...restProps\n}: VisuallyHiddenModalOverlayProps) => {\n  const ref = useContext(ModalRootOverlayContext);\n  return (\n    <div\n      {...restProps}\n      aria-hidden=\"true\"\n      className={styles.host}\n      ref={function handleCurrentRefForForwardContextRef() {\n        setRef(ref.current, getRootRef);\n      }}\n    />\n  );\n};\n"],"names":["useContext","setRef","ModalRootOverlayContext","styles","VisuallyHiddenModalOverlay","visible","visibleExcluded","position","positionExcluded","getRootRef","disableOpenAnimation","disableCloseAnimation","restProps","ref","div","aria-hidden","className","host","handleCurrentRefForForwardContextRef","current"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,MAAM,QAAQ,wBAAqB;AAE5C,SAASC,uBAAuB,QAAQ,yBAAsB;AAC9D,OAAOC,YAAY,0CAA0C;AAI7D;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CAAC,EACzCC,SAASC,eAAe,EACxBC,UAAUC,gBAAgB,EAC1BC,UAAU,EACVC,oBAAoB,EACpBC,qBAAqB,EACrB,GAAGC,WAC6B;IAChC,MAAMC,MAAMb,WAAWE;IACvB,qBACE,KAACY;QACE,GAAGF,SAAS;QACbG,eAAY;QACZC,WAAWb,OAAOc,IAAI;QACtBJ,KAAK,SAASK;YACZjB,OAAOY,IAAIM,OAAO,EAAEV;QACtB;;AAGN,EAAE"}

package/dist/cssm/components/Popper/Popper.js

@@ -15,7 +15,7 @@ import styles from "./Popper.module.css";
  * @see https://vkui.io/components/popper
  */ export const Popper = ({ // UseFloatingMiddlewaresBootstrapProps
 placement: placementProp = 'bottom-start', sameWidth, hideWhenReferenceHidden, offsetByMainAxis = 8, offsetByCrossAxis = 0, arrow, arrowHeight = DEFAULT_ARROW_HEIGHT, arrowPadding = DEFAULT_ARROW_PADDING, customMiddlewares, disableFlipMiddleware = false, disableShiftMiddleware = false, flipMiddlewareFallbackAxisSideDirection, // UseFloatingProps
-autoUpdateOnTargetResize = false, strategy: strategyProp, // ArrowProps
+autoUpdateOnTargetResize = false, autoUpdateOnAnimationFrame = false, strategy: strategyProp, // ArrowProps
 arrowProps, ArrowIcon = DefaultIcon, // rest
 targetRef, getRootRef, children, usePortal = true, onPlacementChange, onReferenceHiddenChange, zIndex, style, ...restProps })=>{
     const [arrowRef, setArrowRef] = React.useState(null);
@@ -40,7 +40,8 @@ targetRef, getRootRef, children, usePortal = true, onPlacementChange, onReferenc
         middleware: middlewares,
         whileElementsMounted (...args) {
             /* istanbul ignore next: не знаю как проверить */ return autoUpdateFloatingElement(...args, {
-                elementResize: autoUpdateOnTargetResize
+                elementResize: autoUpdateOnTargetResize,
+                animationFrame: autoUpdateOnAnimationFrame
             });
         }
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  autoUpdateFloatingElement,\n  convertFloatingDataToReactCSSProperties,\n  type FloatingComponentProps,\n  useFloating,\n  useFloatingMiddlewaresBootstrap,\n  usePlacementChangeCallback,\n  type VirtualElement,\n} from '../../lib/floating';\nimport { useReferenceHiddenChangeCallback } from '../../lib/floating/useReferenceHiddenChangeCallback';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n  FloatingArrow,\n  type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Popper.module.css';\n\nexport type FloatingArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrow'\n  | 'arrowRef'\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'hoverDelay'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'shown'\n  | 'onShownChange'\n  | 'defaultShown'\n  | 'hideWhenReferenceHidden'\n  | 'onReferenceHiddenChange'\n  | 'sameWidth'\n  | 'zIndex'\n  | 'strategy'\n  | 'usePortal'\n  | 'customMiddlewares'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n  | 'disableShiftMiddleware'\n  | 'flipMiddlewareFallbackAxisSideDirection'\n>;\n\nexport interface PopperCommonProps\n  extends AllowedFloatingComponentProps,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof AllowedFloatingComponentProps> {\n  /**\n   * Позволяет набросить на стрелку пользовательские атрибуты.\n   */\n  arrowProps?: FloatingArrowProps;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (смотри https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n   * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   */\n  ArrowIcon?: FloatingArrowPropsPrivate['Icon'];\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  /**\n   * Ref на якорный элемент.\n   */\n  targetRef: React.RefObject<HTMLElement | null> | VirtualElement;\n}\n\n/**\n * @see https://vkui.io/components/popper\n */\nexport const Popper = ({\n  // UseFloatingMiddlewaresBootstrapProps\n  placement: placementProp = 'bottom-start',\n  sameWidth,\n  hideWhenReferenceHidden,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  arrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  customMiddlewares,\n  disableFlipMiddleware = false,\n  disableShiftMiddleware = false,\n  flipMiddlewareFallbackAxisSideDirection,\n\n  // UseFloatingProps\n  autoUpdateOnTargetResize = false,\n  strategy: strategyProp,\n\n  // ArrowProps\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n\n  // rest\n  targetRef,\n  getRootRef,\n  children,\n  usePortal = true,\n  onPlacementChange,\n  onReferenceHiddenChange,\n  zIndex,\n  style,\n  ...restProps\n}: PopperProps): React.ReactNode => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n    sameWidth,\n    arrow,\n    arrowRef,\n    arrowHeight,\n    arrowPadding,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    hideWhenReferenceHidden,\n    customMiddlewares,\n    disableFlipMiddleware,\n    disableShiftMiddleware,\n    flipMiddlewareFallbackAxisSideDirection,\n  });\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData,\n  } = useFloating({\n    placement: strictPlacement,\n    strategy: strategyProp,\n    middleware: middlewares,\n    whileElementsMounted(...args) {\n      /* istanbul ignore next: не знаю как проверить */\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n  useReferenceHiddenChangeCallback(middlewareData.hide, onReferenceHiddenChange);\n\n  const { arrow: arrowCoords } = middlewareData;\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRootRef);\n\n  useIsomorphicLayoutEffect(() => {\n    refs.setReference('current' in targetRef ? targetRef.current : targetRef);\n  }, [refs.setReference, targetRef]);\n\n  const dropdownStyle =\n    typeof zIndex !== 'undefined'\n      ? {\n          zIndex,\n        }\n      : undefined;\n\n  const dropdown = (\n    <RootComponent\n      {...restProps}\n      style={mergeStyle(dropdownStyle, style)}\n      baseClassName={styles.host}\n      getRootRef={handleRootRef}\n      baseStyle={convertFloatingDataToReactCSSProperties({\n        strategy: floatingPositionStrategy,\n        x: floatingDataX,\n        y: floatingDataY,\n        initialWidth: sameWidth ? null : undefined,\n        middlewareData,\n      })}\n    >\n      {arrow && (\n        <FloatingArrow\n          {...arrowProps}\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      )}\n      {children}\n    </RootComponent>\n  );\n\n  return <AppRootPortal usePortal={usePortal}>{dropdown}</AppRootPortal>;\n};\n"],"names":["React","mergeStyle","useExternRef","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","useReferenceHiddenChangeCallback","useIsomorphicLayoutEffect","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","RootComponent","styles","Popper","placement","placementProp","sameWidth","hideWhenReferenceHidden","offsetByMainAxis","offsetByCrossAxis","arrow","arrowHeight","arrowPadding","customMiddlewares","disableFlipMiddleware","disableShiftMiddleware","flipMiddlewareFallbackAxisSideDirection","autoUpdateOnTargetResize","strategy","strategyProp","arrowProps","ArrowIcon","targetRef","getRootRef","children","usePortal","onPlacementChange","onReferenceHiddenChange","zIndex","style","restProps","arrowRef","setArrowRef","useState","strictPlacement","middlewares","x","floatingDataX","y","floatingDataY","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","middleware","whileElementsMounted","args","elementResize","hide","arrowCoords","handleRootRef","setFloating","setReference","current","dropdownStyle","undefined","dropdown","baseClassName","host","baseStyle","initialWidth","coords","Icon"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  autoUpdateFloatingElement,\n  convertFloatingDataToReactCSSProperties,\n  type FloatingComponentProps,\n  useFloating,\n  useFloatingMiddlewaresBootstrap,\n  usePlacementChangeCallback,\n  type VirtualElement,\n} from '../../lib/floating';\nimport { useReferenceHiddenChangeCallback } from '../../lib/floating/useReferenceHiddenChangeCallback';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n  FloatingArrow,\n  type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Popper.module.css';\n\nexport type FloatingArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrow'\n  | 'arrowRef'\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'hoverDelay'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'shown'\n  | 'onShownChange'\n  | 'defaultShown'\n  | 'hideWhenReferenceHidden'\n  | 'onReferenceHiddenChange'\n  | 'sameWidth'\n  | 'zIndex'\n  | 'strategy'\n  | 'usePortal'\n  | 'customMiddlewares'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n  | 'disableShiftMiddleware'\n  | 'flipMiddlewareFallbackAxisSideDirection'\n>;\n\nexport interface PopperCommonProps\n  extends AllowedFloatingComponentProps,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof AllowedFloatingComponentProps> {\n  /**\n   * Позволяет набросить на стрелку пользовательские атрибуты.\n   */\n  arrowProps?: FloatingArrowProps;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (смотри https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n   * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   */\n  ArrowIcon?: FloatingArrowPropsPrivate['Icon'];\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n  /**\n   * Пытаться обновлять позицию всплывающего элемента каждый фрейм.\n   */\n  autoUpdateOnAnimationFrame?: boolean;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  /**\n   * Ref на якорный элемент.\n   */\n  targetRef: React.RefObject<HTMLElement | null> | VirtualElement;\n}\n\n/**\n * @see https://vkui.io/components/popper\n */\nexport const Popper = ({\n  // UseFloatingMiddlewaresBootstrapProps\n  placement: placementProp = 'bottom-start',\n  sameWidth,\n  hideWhenReferenceHidden,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  arrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  customMiddlewares,\n  disableFlipMiddleware = false,\n  disableShiftMiddleware = false,\n  flipMiddlewareFallbackAxisSideDirection,\n\n  // UseFloatingProps\n  autoUpdateOnTargetResize = false,\n  autoUpdateOnAnimationFrame = false,\n  strategy: strategyProp,\n\n  // ArrowProps\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n\n  // rest\n  targetRef,\n  getRootRef,\n  children,\n  usePortal = true,\n  onPlacementChange,\n  onReferenceHiddenChange,\n  zIndex,\n  style,\n  ...restProps\n}: PopperProps): React.ReactNode => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n    sameWidth,\n    arrow,\n    arrowRef,\n    arrowHeight,\n    arrowPadding,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    hideWhenReferenceHidden,\n    customMiddlewares,\n    disableFlipMiddleware,\n    disableShiftMiddleware,\n    flipMiddlewareFallbackAxisSideDirection,\n  });\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData,\n  } = useFloating({\n    placement: strictPlacement,\n    strategy: strategyProp,\n    middleware: middlewares,\n    whileElementsMounted(...args) {\n      /* istanbul ignore next: не знаю как проверить */\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n        animationFrame: autoUpdateOnAnimationFrame,\n      });\n    },\n  });\n\n  usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n  useReferenceHiddenChangeCallback(middlewareData.hide, onReferenceHiddenChange);\n\n  const { arrow: arrowCoords } = middlewareData;\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRootRef);\n\n  useIsomorphicLayoutEffect(() => {\n    refs.setReference('current' in targetRef ? targetRef.current : targetRef);\n  }, [refs.setReference, targetRef]);\n\n  const dropdownStyle =\n    typeof zIndex !== 'undefined'\n      ? {\n          zIndex,\n        }\n      : undefined;\n\n  const dropdown = (\n    <RootComponent\n      {...restProps}\n      style={mergeStyle(dropdownStyle, style)}\n      baseClassName={styles.host}\n      getRootRef={handleRootRef}\n      baseStyle={convertFloatingDataToReactCSSProperties({\n        strategy: floatingPositionStrategy,\n        x: floatingDataX,\n        y: floatingDataY,\n        initialWidth: sameWidth ? null : undefined,\n        middlewareData,\n      })}\n    >\n      {arrow && (\n        <FloatingArrow\n          {...arrowProps}\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      )}\n      {children}\n    </RootComponent>\n  );\n\n  return <AppRootPortal usePortal={usePortal}>{dropdown}</AppRootPortal>;\n};\n"],"names":["React","mergeStyle","useExternRef","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","useReferenceHiddenChangeCallback","useIsomorphicLayoutEffect","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","RootComponent","styles","Popper","placement","placementProp","sameWidth","hideWhenReferenceHidden","offsetByMainAxis","offsetByCrossAxis","arrow","arrowHeight","arrowPadding","customMiddlewares","disableFlipMiddleware","disableShiftMiddleware","flipMiddlewareFallbackAxisSideDirection","autoUpdateOnTargetResize","autoUpdateOnAnimationFrame","strategy","strategyProp","arrowProps","ArrowIcon","targetRef","getRootRef","children","usePortal","onPlacementChange","onReferenceHiddenChange","zIndex","style","restProps","arrowRef","setArrowRef","useState","strictPlacement","middlewares","x","floatingDataX","y","floatingDataY","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","middleware","whileElementsMounted","args","elementResize","animationFrame","hide","arrowCoords","handleRootRef","setFloating","setReference","current","dropdownStyle","undefined","dropdown","baseClassName","host","baseStyle","initialWidth","coords","Icon"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.7.2",
+  "version": "7.8.0",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",
@@ -63,8 +63,9 @@
     "swc:es6": "yarn swc-base -d dist -s",
     "swc:cssm": "yarn swc-base -d dist/cssm -s --config-file ./cssm/cssm.swcrc",
     "tsc:es6": "yarn run -T cross-env NODE_ENV=production tsc --emitDeclarationOnly --declaration -p tsconfig.dist.json",
-    "test": "yarn run -T jest",
-    "test:ci": "yarn test --ci --silent --outputFile ../../test-results.json --json --coverage --coverageReporters='json' --coverageDirectory='../../.nyc_output'",
+    "test": "yarn run -T vitest run --pool=vmThreads",
+    "test:watch": "yarn run -T vitest --pool=vmThreads",
+    "test:ci": "yarn run -T vitest run --reporter=json --outputFile=../../test-results.json --coverage",
     "test:e2e": "../../scripts/generate_env_docker.sh && docker compose --env-file=./.env.docker up --abort-on-container-exit",
     "test:e2e-update": "../../scripts/generate_env_docker.sh -u && docker compose --env-file=./.env.docker up --abort-on-container-exit",
     "test:e2e:ci": "yarn run -T cross-env NODE_OPTIONS='--experimental-transform-types --disable-warning=ExperimentalWarning' playwright test --config playwright-ct.config.ts",

package/src/components/ModalCard/ModalCardInternal.tsx

@@ -74,11 +74,15 @@ export const ModalCardInternal = ({
   onClosed,
   disableFocusTrap,
   disableModalOverlay,
+  disableOpenAnimation,
+  disableCloseAnimation,
   ...restProps
 }: ModalCardInternalProps): ReactNode => {
   const platform = usePlatform();
   const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(open, {
-    enableAppear: true,
+    enableAppear: !disableOpenAnimation,
+    enableEnter: !disableOpenAnimation,
+    enableExit: !disableCloseAnimation,
     onEnter() {
       onOpen?.();
     },
@@ -121,6 +125,8 @@ export const ModalCardInternal = ({
       getRootRef={setBackdropEl}
       data-testid={modalOverlayTestId}
       visible={open}
+      disableOpenAnimation={disableOpenAnimation}
+      disableCloseAnimation={disableCloseAnimation}
       onClick={
         closable
           ? function handleBackdropClick(event) {

package/src/components/ModalCard/types.ts

@@ -61,7 +61,15 @@ export interface ModalCardProps
   /**
    * Отключает отображение и взаимодействие с фоном модалки.
    * > При использовании `ModalCard` внутри `ModalRoot` есть особенность использования этого свойства.
-   * > Об этом можно почитать на странице документации [`ModalRoot`](/components/modal-root#otklyuchenie-zadnego-fona-u-konkretnogo-modalnogo-okna).
+   * > Об этом можно почитать на странице документации [`ModalRoot`](/components/modal-root#disable-modal-overlay).
    */
   disableModalOverlay?: boolean;
+  /**
+   * Отключает анимацию открытия модалки.
+   */
+  disableOpenAnimation?: boolean;
+  /**
+   * Отключает анимацию закрытия модалки.
+   */
+  disableCloseAnimation?: boolean;
 }

package/src/components/ModalOverlay/ModalOverlay.tsx

@@ -31,6 +31,8 @@ export interface ModalOverlayProps
   visible?: boolean;
   position?: 'absolute' | 'fixed';
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  disableOpenAnimation?: boolean;
+  disableCloseAnimation?: boolean;
 }
 
 /**
@@ -41,10 +43,14 @@ export const ModalOverlay = ({
   position = 'absolute',
   getRootRef,
   onClick,
+  disableOpenAnimation,
+  disableCloseAnimation,
   ...restProps
 }: ModalOverlayProps) => {
   const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(visible, {
-    enableAppear: true,
+    enableAppear: !disableOpenAnimation,
+    enableEnter: !disableOpenAnimation,
+    enableExit: !disableCloseAnimation,
   });
   const handleRef = useExternRef(getRootRef, ref);
 

package/src/components/ModalPage/ModalPageInternal.tsx

@@ -75,11 +75,15 @@ export const ModalPageInternal = ({
   onClosed,
   disableFocusTrap,
   disableModalOverlay,
+  disableOpenAnimation = false,
+  disableCloseAnimation = false,
   ...restProps
 }: ModalPageInternalProps) => {
   const { hasCustomPanelHeaderAfter } = useConfigProvider();
   const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(open, {
-    enableAppear: true,
+    enableAppear: !disableOpenAnimation,
+    enableEnter: !disableOpenAnimation,
+    enableExit: !disableCloseAnimation,
     onEnter() {
       onOpen?.();
     },
@@ -127,6 +131,8 @@ export const ModalPageInternal = ({
       getRootRef={setBackdropEl}
       data-testid={modalOverlayTestId}
       visible={open}
+      disableOpenAnimation={disableOpenAnimation}
+      disableCloseAnimation={disableCloseAnimation}
       onClick={
         closable
           ? function handleBackdropClick(event) {

package/src/components/ModalPage/types.ts

@@ -139,7 +139,15 @@ export interface ModalPageProps
   /**
    * Отключает отображение и взаимодействие с фоном модалки.
    * > При использовании `ModalPage` внутри `ModalRoot` есть особенность использования этого свойства.
-   * > Об этом можно почитать на странице документации [`ModalRoot`](/components/modal-root#otklyuchenie-zadnego-fona-u-konkretnogo-modalnogo-okna).
+   * > Об этом можно почитать на странице документации [`ModalRoot`](/components/modal-root#disable-modal-overlay).
    */
   disableModalOverlay?: boolean;
+  /**
+   * Отключает анимацию открытия модалки.
+   */
+  disableOpenAnimation?: boolean;
+  /**
+   * Отключает анимацию закрытия модалки.
+   */
+  disableCloseAnimation?: boolean;
 }

package/src/components/ModalRoot/VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay.tsx

@@ -21,6 +21,8 @@ export const VisuallyHiddenModalOverlay = ({
   visible: visibleExcluded,
   position: positionExcluded,
   getRootRef,
+  disableOpenAnimation,
+  disableCloseAnimation,
   ...restProps
 }: VisuallyHiddenModalOverlayProps) => {
   const ref = useContext(ModalRootOverlayContext);

package/src/components/Popper/Popper.tsx

@@ -84,6 +84,10 @@ export interface PopperCommonProps
    * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.
    */
   autoUpdateOnTargetResize?: boolean;
+  /**
+   * Пытаться обновлять позицию всплывающего элемента каждый фрейм.
+   */
+  autoUpdateOnAnimationFrame?: boolean;
 }
 
 export interface PopperProps extends PopperCommonProps {
@@ -113,6 +117,7 @@ export const Popper = ({
 
   // UseFloatingProps
   autoUpdateOnTargetResize = false,
+  autoUpdateOnAnimationFrame = false,
   strategy: strategyProp,
 
   // ArrowProps
@@ -163,6 +168,7 @@ export const Popper = ({
       /* istanbul ignore next: не знаю как проверить */
       return autoUpdateFloatingElement(...args, {
         elementResize: autoUpdateOnTargetResize,
+        animationFrame: autoUpdateOnAnimationFrame,
       });
     },
   });

package/src/lib/floating/useFloatingWithInteractions/__snapshots__/useFloatingWithInteractions.test.tsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`useFloatingWithInteractions tests with snapshot should be hidden state 1`] = `
+exports[`useFloatingWithInteractions > tests with snapshot > should be hidden state 1`] = `
 {
   "floatingProps": {
     "onMouseLeave": [Function],
@@ -34,7 +34,7 @@ exports[`useFloatingWithInteractions tests with snapshot should be hidden state
 }
 `;
 
-exports[`useFloatingWithInteractions tests with snapshot should be shown state 1`] = `
+exports[`useFloatingWithInteractions > tests with snapshot > should be shown state 1`] = `
 {
   "floatingProps": {
     "onAnimationEnd": [Function],
@@ -77,7 +77,7 @@ exports[`useFloatingWithInteractions tests with snapshot should be shown state 1
 }
 `;
 
-exports[`useFloatingWithInteractions tests with snapshot should be shown state with disabled close on esc key and click outside events 1`] = `
+exports[`useFloatingWithInteractions > tests with snapshot > should be shown state with disabled close on esc key and click outside events 1`] = `
 {
   "floatingProps": {
     "onAnimationEnd": [Function],
@@ -120,7 +120,7 @@ exports[`useFloatingWithInteractions tests with snapshot should be shown state w
 }
 `;
 
-exports[`useFloatingWithInteractions tests with snapshot should be shown state with disabled interactive feature 1`] = `
+exports[`useFloatingWithInteractions > tests with snapshot > should be shown state with disabled interactive feature 1`] = `
 {
   "floatingProps": {
     "onAnimationEnd": [Function],
@@ -162,7 +162,7 @@ exports[`useFloatingWithInteractions tests with snapshot should be shown state w
 }
 `;
 
-exports[`useFloatingWithInteractions tests with snapshot should return default values 1`] = `
+exports[`useFloatingWithInteractions > tests with snapshot > should return default values 1`] = `
 {
   "floatingProps": {
     "style": {},