@vkontakte/vkui 5.3.2 → 5.4.1

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

@@ -1 +1,102 @@
-.vkuiModalCardBase__container{--vkui_internal--background:var(--vkui--color_background_modal);background:#fff;background:var(--vkui--color_background_modal);border-radius:18px;box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;margin-bottom:0;margin-bottom:var(--vkui_internal--safe_area_inset_bottom);padding:16px;pointer-events:auto;position:relative}.vkuiModalCardBase__container--softwareKeyboardOpened{margin-bottom:0}.vkuiModalCardBase__header,.vkuiModalCardBase__subheader{margin:0;padding:0 8px;text-align:center;word-break:break-word}.vkuiModalCardBase__header{color:#000;color:var(--vkui--color_text_primary)}.vkuiModalCardBase__subheader{color:#6d7885;color:var(--vkui--color_text_subhead)}.vkuiModalCardBase__header+.vkuiModalCardBase__subheader{margin-top:8px}.vkuiModalCardBase__icon{color:#2688eb;color:var(--vkui--color_icon_accent);margin:8px auto 16px}.vkuiModalCardBase__actions{display:flex;margin-top:16px}.vkuiUsersStack+.vkuiModalCardBase__actions{margin-top:24px}.vkuiModalCardBase__header+.vkuiModalCardBase__actions,.vkuiModalCardBase__subheader+.vkuiModalCardBase__actions{margin-top:32px}.vkuiModalCardBase__dismiss{color:#99a2ad;color:var(--vkui--color_icon_secondary);height:48px;justify-content:center;position:absolute;right:4px;top:4px;width:48px}.vkuiModalCardBase--ios .vkuiModalCardBase__header:first-child{padding-left:36px;padding-right:36px}.vkuiModalCardBase--android .vkuiModalCardBase__container,.vkuiModalCardBase--vkcom .vkuiModalCardBase__container{border-radius:12px}.vkuiModalCardBase--desktop .vkuiModalCardBase__container{border-radius:8px}
+.ModalCardBase__container {
+  box-sizing: border-box;
+  position: relative;
+  background: var(--vkui--color_background_modal);
+  border-radius: 18px;
+  padding: 16px;
+  margin-bottom: var(--vkui_internal--safe_area_inset_bottom);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  pointer-events: initial;
+  box-shadow: var(--vkui--elevation3);
+
+  --vkui_internal--background: var(--vkui--color_background_modal);
+}
+
+.ModalCardBase__container--softwareKeyboardOpened {
+  margin-bottom: 0;
+}
+
+.ModalCardBase__header,
+.ModalCardBase__subheader {
+  text-align: center;
+  margin: 0;
+  padding: 0 8px;
+  word-break: break-word;
+}
+
+.ModalCardBase__header {
+  color: var(--vkui--color_text_primary);
+}
+
+.ModalCardBase__subheader {
+  color: var(--vkui--color_text_subhead);
+}
+
+.ModalCardBase__header + .ModalCardBase__subheader {
+  margin-top: 8px;
+}
+
+.ModalCardBase__icon {
+  margin: 8px auto 16px;
+  color: var(--vkui--color_icon_accent);
+}
+
+.ModalCardBase__actions {
+  display: flex;
+  margin-top: 16px;
+}
+
+:global(.vkuiInternalUsersStack) + .ModalCardBase__actions {
+  margin-top: 24px;
+}
+
+.ModalCardBase__header + .ModalCardBase__actions,
+.ModalCardBase__subheader + .ModalCardBase__actions {
+  margin-top: 32px;
+}
+
+/**
+ * iOS
+ */
+
+.ModalCardBase__dismiss {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 48px;
+  height: 48px;
+  color: var(--vkui--color_icon_secondary);
+  justify-content: center;
+}
+
+/**
+ * iOS
+ */
+
+/*
+ * TODO [>=6]: зачем этот стиль? Удалить?
+*/
+
+.ModalCardBase--ios .ModalCardBase__header:first-child {
+  padding-left: 36px;
+  padding-right: 36px;
+}
+
+/**
+ * Android + vkcom
+ */
+
+.ModalCardBase--android .ModalCardBase__container,
+.ModalCardBase--vkcom .ModalCardBase__container {
+  border-radius: 12px;
+}
+
+/**
+ * Desktop
+ */
+
+.ModalCardBase--desktop .ModalCardBase__container {
+  border-radius: 8px;
+}

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

@@ -1 +1,38 @@
-.vkuiModalDismissButton{box-sizing:border-box;color:#fff;color:var(--vkui--color_icon_contrast);height:56px;justify-content:center;padding:18px;position:absolute;right:-56px;top:0;transition:opacity .15s ease-out;width:56px}.vkuiModalDismissButton:before{background:rgba(0,0,0,.4);background:var(--vkui--color_overlay_primary);border-radius:50%;bottom:14px;content:"";display:block;left:14px;position:absolute;right:14px;top:14px}.vkuiModalDismissButton .vkuiIcon{transform:translateX(0)}.vkuiModalDismissButton--hover.vkuiModalDismissButton:before{background:rgba(0,0,0,.44);background:var(--vkui--color_overlay_primary--hover)}.vkuiModalDismissButton--active.vkuiModalDismissButton:before{background:rgba(0,0,0,.48);background:var(--vkui--color_overlay_primary--active)}
+.ModalDismissButton {
+  position: absolute;
+  justify-content: center;
+  top: 0;
+  right: -56px;
+  width: 56px;
+  height: 56px;
+  padding: 18px;
+  box-sizing: border-box;
+  color: var(--vkui--color_icon_contrast);
+  transition: opacity 0.15s ease-out;
+}
+
+.ModalDismissButton::before {
+  display: block;
+  content: '';
+  top: 14px;
+  right: 14px;
+  bottom: 14px;
+  left: 14px;
+  background: var(--vkui--color_overlay_primary);
+  border-radius: 50%;
+  position: absolute;
+}
+
+/* fixes icon misplacement on Safari in some cases */
+
+.ModalDismissButton :global(.vkuiIcon) {
+  transform: translateX(0);
+}
+
+.ModalDismissButton--hover.ModalDismissButton::before {
+  background: var(--vkui--color_overlay_primary--hover);
+}
+
+.ModalDismissButton--active.ModalDismissButton::before {
+  background: var(--vkui--color_overlay_primary--active);
+}

package/dist/cssm/components/ModalPage/ModalPage.d.ts

@@ -42,4 +42,4 @@ export interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, Na
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPage
  */
-export declare const ModalPage: ({ children, header, size: sizeProp, onOpen, onOpened, onClose, onClosed, settlingHeight, dynamicContentHeight, getModalContentRef, nav, id, hideCloseButton, className, ...restProps }: ModalPageProps) => JSX.Element;
+export declare const ModalPage: ({ children, header, size: sizeProp, onOpen, onOpened, onClose, onClosed, settlingHeight, dynamicContentHeight, getModalContentRef, nav, id: idProp, hideCloseButton, className, ...restProps }: ModalPageProps) => JSX.Element;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { useId } from '../../hooks/useId';
 import { useOrientationChange } from '../../hooks/useOrientationChange';
 import { usePlatform } from '../../hooks/usePlatform';
 import { SizeType } from '../../lib/adaptivity';
@@ -11,6 +12,7 @@ import { warnOnce } from '../../lib/warnOnce';
 import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
 import { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';
 import { ModalType } from '../ModalRoot/types';
+import { ModalPageContext } from './ModalPageContext';
 import styles from './ModalPage.module.css';
 const sizeClassName = {
     s: styles['ModalPage--size-s'],
@@ -20,7 +22,9 @@ const sizeClassName = {
 const warn = warnOnce('ModalPage');
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPage
- */ export const ModalPage = ({ children , header , size: sizeProp = 's' , onOpen , onOpened , onClose , onClosed , settlingHeight , dynamicContentHeight , getModalContentRef , nav , id , hideCloseButton =false , className , ...restProps })=>{
+ */ export const ModalPage = ({ children , header , size: sizeProp = 's' , onOpen , onOpened , onClose , onClosed , settlingHeight , dynamicContentHeight , getModalContentRef , nav , id: idProp , hideCloseButton =false , className , ...restProps })=>{
+    const generatingId = useId();
+    const id = idProp || generatingId;
     const { updateModalHeight  } = React.useContext(ModalRootContext);
     const platform = usePlatform();
     const orientation = useOrientationChange();
@@ -37,8 +41,18 @@ const warn = warnOnce('ModalPage');
         nav,
         id
     }, warn), ModalType.PAGE);
-    return /*#__PURE__*/ React.createElement("div", {
+    const contextValue = React.useMemo(()=>({
+            labelId: `${id}-label`
+        }), [
+        id
+    ]);
+    return /*#__PURE__*/ React.createElement(ModalPageContext.Provider, {
+        value: contextValue
+    }, /*#__PURE__*/ React.createElement("div", {
         ...restProps,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": contextValue.labelId,
         id: id,
         className: classNames(styles['ModalPage'], platform === Platform.IOS && styles['ModalPage--ios'], isDesktop && styles['ModalPage--desktop'], sizeX === SizeType.REGULAR && 'vkuiInternalModalPage--sizeX-regular', typeof size === 'string' && sizeClassName[size], className)
     }, /*#__PURE__*/ React.createElement("div", {
@@ -61,7 +75,7 @@ const warn = warnOnce('ModalPage');
         className: styles['ModalPage__content-in']
     }, children))), isCloseButtonShown && /*#__PURE__*/ React.createElement(ModalDismissButton, {
         onClick: onClose || modalContext.onClose
-    }))));
+    })))));
 };
 
 //# sourceMappingURL=ModalPage.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useOrientationChange } from '../../hooks/useOrientationChange';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { multiRef } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport styles from './ModalPage.module.css';\n\nconst sizeClassName = {\n  s: styles['ModalPage--size-s'],\n  m: styles['ModalPage--size-m'],\n  l: styles['ModalPage--size-l'],\n};\n\nexport interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: React.ReactNode;\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: 's' | 'm' | 'l' | number;\n  /**\n   * Будет вызвано при начале открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n  /**\n   * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.\n   */\n  settlingHeight?: number;\n  /**\n   * Если высота контента в модальной странице может поменяться, нужно установить это свойство\n   */\n  dynamicContentHeight?: boolean;\n  getModalContentRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)\n   */\n  hideCloseButton?: boolean;\n}\n\nconst warn = warnOnce('ModalPage');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPage\n */\nexport const ModalPage = ({\n  children,\n  header,\n  size: sizeProp = 's',\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  settlingHeight, // 75\n  dynamicContentHeight,\n  getModalContentRef,\n  nav,\n  id,\n  hideCloseButton = false,\n  className,\n  ...restProps\n}: ModalPageProps) => {\n  const { updateModalHeight } = React.useContext(ModalRootContext);\n\n  const platform = usePlatform();\n  const orientation = useOrientationChange();\n  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  React.useEffect(updateModalHeight, [children, orientation, updateModalHeight]);\n\n  const isCloseButtonShown = !hideCloseButton && isDesktop;\n  const size = isDesktop ? sizeProp : 's';\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.PAGE);\n\n  return (\n    <div\n      {...restProps}\n      id={id}\n      className={classNames(\n        styles['ModalPage'],\n        platform === Platform.IOS && styles['ModalPage--ios'],\n        isDesktop && styles['ModalPage--desktop'],\n        sizeX === SizeType.REGULAR && 'vkuiInternalModalPage--sizeX-regular',\n        typeof size === 'string' && sizeClassName[size],\n        className,\n      )}\n    >\n      <div\n        className={styles['ModalPage__in-wrap']}\n        style={{\n          maxWidth: typeof size === 'number' ? size : undefined,\n        }}\n        ref={refs.innerElement}\n      >\n        <div className={styles['ModalPage__in']}>\n          <div className={styles['ModalPage__header']} ref={refs.headerElement}>\n            {header}\n          </div>\n\n          <div className={styles['ModalPage__content-wrap']}>\n            <div\n              className={styles['ModalPage__content']}\n              ref={multiRef<HTMLDivElement>(refs.contentElement, getModalContentRef)}\n            >\n              <div className={styles['ModalPage__content-in']}>{children}</div>\n            </div>\n          </div>\n          {isCloseButtonShown && <ModalDismissButton onClick={onClose || modalContext.onClose} />}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","useOrientationChange","usePlatform","SizeType","getNavId","Platform","multiRef","warnOnce","ModalDismissButton","ModalRootContext","useModalRegistry","ModalType","styles","sizeClassName","s","m","l","warn","ModalPage","children","header","size","sizeProp","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","hideCloseButton","className","restProps","updateModalHeight","useContext","platform","orientation","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","refs","PAGE","div","IOS","REGULAR","style","maxWidth","undefined","ref","innerElement","headerElement","contentElement","onClick"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAoB,qBAAqB;AAC1D,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,kBAAkB;AAC3C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,gCAAgC;AACnF,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,gBAAgB;IACpBC,GAAGF,MAAM,CAAC,oBAAoB;IAC9BG,GAAGH,MAAM,CAAC,oBAAoB;IAC9BI,GAAGJ,MAAM,CAAC,oBAAoB;AAChC;AA0CA,MAAMK,OAAOV,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMW,YAAY,CAAC,EACxBC,SAAQ,EACRC,OAAM,EACNC,MAAMC,WAAW,GAAG,CAAA,EACpBC,OAAM,EACNC,SAAQ,EACRC,QAAO,EACPC,SAAQ,EACRC,eAAc,EACdC,qBAAoB,EACpBC,mBAAkB,EAClBC,IAAG,EACHC,GAAE,EACFC,iBAAkB,KAAK,CAAA,EACvBC,UAAS,EACT,GAAGC,WACY,GAAK;IACpB,MAAM,EAAEC,kBAAiB,EAAE,GAAGrC,MAAMsC,UAAU,CAAC3B;IAE/C,MAAM4B,WAAWnC;IACjB,MAAMoC,cAAcrC;IACpB,MAAM,EAAEsC,MAAK,EAAEC,UAAS,EAAE,GAAGxC;IAE7BF,MAAM2C,SAAS,CAACN,mBAAmB;QAAChB;QAAUmB;QAAaH;KAAkB;IAE7E,MAAMO,qBAAqB,CAACV,mBAAmBQ;IAC/C,MAAMnB,OAAOmB,YAAYlB,WAAW,GAAG;IAEvC,MAAMqB,eAAe7C,MAAMsC,UAAU,CAAC3B;IACtC,MAAM,EAAEmC,KAAI,EAAE,GAAGlC,iBAAiBN,SAAS;QAAE0B;QAAKC;IAAG,GAAGd,OAAON,UAAUkC,IAAI;IAE7E,qBACE,oBAACC;QACE,GAAGZ,SAAS;QACbH,IAAIA;QACJE,WAAWlC,WACTa,MAAM,CAAC,YAAY,EACnByB,aAAahC,SAAS0C,GAAG,IAAInC,MAAM,CAAC,iBAAiB,EACrD4B,aAAa5B,MAAM,CAAC,qBAAqB,EACzC2B,UAAUpC,SAAS6C,OAAO,IAAI,wCAC9B,OAAO3B,SAAS,YAAYR,aAAa,CAACQ,KAAK,EAC/CY;qBAGF,oBAACa;QACCb,WAAWrB,MAAM,CAAC,qBAAqB;QACvCqC,OAAO;YACLC,UAAU,OAAO7B,SAAS,WAAWA,OAAO8B,SAAS;QACvD;QACAC,KAAKR,KAAKS,YAAY;qBAEtB,oBAACP;QAAIb,WAAWrB,MAAM,CAAC,gBAAgB;qBACrC,oBAACkC;QAAIb,WAAWrB,MAAM,CAAC,oBAAoB;QAAEwC,KAAKR,KAAKU,aAAa;OACjElC,uBAGH,oBAAC0B;QAAIb,WAAWrB,MAAM,CAAC,0BAA0B;qBAC/C,oBAACkC;QACCb,WAAWrB,MAAM,CAAC,qBAAqB;QACvCwC,KAAK9C,SAAyBsC,KAAKW,cAAc,EAAE1B;qBAEnD,oBAACiB;QAAIb,WAAWrB,MAAM,CAAC,wBAAwB;OAAGO,aAGrDuB,oCAAsB,oBAAClC;QAAmBgD,SAAS/B,WAAWkB,aAAalB,OAAO;;AAK7F,EAAE"}
+{"version":3,"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useId } from '../../hooks/useId';\nimport { useOrientationChange } from '../../hooks/useOrientationChange';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { multiRef } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport { ModalPageContext } from './ModalPageContext';\nimport styles from './ModalPage.module.css';\n\nconst sizeClassName = {\n  s: styles['ModalPage--size-s'],\n  m: styles['ModalPage--size-m'],\n  l: styles['ModalPage--size-l'],\n};\n\nexport interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: React.ReactNode;\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: 's' | 'm' | 'l' | number;\n  /**\n   * Будет вызвано при начале открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n  /**\n   * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.\n   */\n  settlingHeight?: number;\n  /**\n   * Если высота контента в модальной странице может поменяться, нужно установить это свойство\n   */\n  dynamicContentHeight?: boolean;\n  getModalContentRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)\n   */\n  hideCloseButton?: boolean;\n}\n\nconst warn = warnOnce('ModalPage');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPage\n */\nexport const ModalPage = ({\n  children,\n  header,\n  size: sizeProp = 's',\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  settlingHeight, // 75\n  dynamicContentHeight,\n  getModalContentRef,\n  nav,\n  id: idProp,\n  hideCloseButton = false,\n  className,\n  ...restProps\n}: ModalPageProps) => {\n  const generatingId = useId();\n  const id = idProp || generatingId;\n\n  const { updateModalHeight } = React.useContext(ModalRootContext);\n\n  const platform = usePlatform();\n  const orientation = useOrientationChange();\n  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  React.useEffect(updateModalHeight, [children, orientation, updateModalHeight]);\n\n  const isCloseButtonShown = !hideCloseButton && isDesktop;\n  const size = isDesktop ? sizeProp : 's';\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.PAGE);\n\n  const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);\n\n  return (\n    <ModalPageContext.Provider value={contextValue}>\n      <div\n        {...restProps}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={contextValue.labelId}\n        id={id}\n        className={classNames(\n          styles['ModalPage'],\n          platform === Platform.IOS && styles['ModalPage--ios'],\n          isDesktop && styles['ModalPage--desktop'],\n          sizeX === SizeType.REGULAR && 'vkuiInternalModalPage--sizeX-regular',\n          typeof size === 'string' && sizeClassName[size],\n          className,\n        )}\n      >\n        <div\n          className={styles['ModalPage__in-wrap']}\n          style={{\n            maxWidth: typeof size === 'number' ? size : undefined,\n          }}\n          ref={refs.innerElement}\n        >\n          <div className={styles['ModalPage__in']}>\n            <div className={styles['ModalPage__header']} ref={refs.headerElement}>\n              {header}\n            </div>\n\n            <div className={styles['ModalPage__content-wrap']}>\n              <div\n                className={styles['ModalPage__content']}\n                ref={multiRef<HTMLDivElement>(refs.contentElement, getModalContentRef)}\n              >\n                <div className={styles['ModalPage__content-in']}>{children}</div>\n              </div>\n            </div>\n            {isCloseButtonShown && <ModalDismissButton onClick={onClose || modalContext.onClose} />}\n          </div>\n        </div>\n      </div>\n    </ModalPageContext.Provider>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","useId","useOrientationChange","usePlatform","SizeType","getNavId","Platform","multiRef","warnOnce","ModalDismissButton","ModalRootContext","useModalRegistry","ModalType","ModalPageContext","styles","sizeClassName","s","m","l","warn","ModalPage","children","header","size","sizeProp","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","idProp","hideCloseButton","className","restProps","generatingId","updateModalHeight","useContext","platform","orientation","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","refs","PAGE","contextValue","useMemo","labelId","Provider","value","div","role","aria-modal","aria-labelledby","IOS","REGULAR","style","maxWidth","undefined","ref","innerElement","headerElement","contentElement","onClick"],"mappings":"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"}

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

@@ -1 +1,151 @@
-.vkuiModalPage{box-sizing:border-box;height:100%;overflow:hidden;pointer-events:none;position:absolute;width:100%}.vkuiModalPage--desktop{align-items:center;display:flex;justify-content:center}.vkuiModalPage__in-wrap{align-items:flex-end;bottom:0;display:flex;height:100%;left:0;margin-left:auto;margin-right:auto;pointer-events:auto;position:absolute;right:0;transform:translateY(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);transition:transform .32s var(--vkui--animation_easing_platform);width:100%}.vkuiModalPage--ios .vkuiModalPage__in-wrap{transition:transform .4s cubic-bezier(.4,0,.2,1);transition:transform .4s var(--vkui--animation_easing_platform)}.vkuiModalPage--desktop .vkuiModalPage__in-wrap{align-items:normal;height:auto;margin:32px 56px;max-height:640px;opacity:0;position:relative;transform:none;transition:opacity .34s cubic-bezier(.4,0,.2,1);transition:opacity .34s var(--vkui--animation_easing_platform)}@media (max-height:672px){.vkuiModalPage--desktop .vkuiModalPage__in-wrap{max-height:calc(100% - 32px * 2)}}.vkuiModalPage--size-s .vkuiModalPage__in-wrap{max-width:420px;max-width:var(--vkui--size_popup_small--regular)}.vkuiModalPage--size-m .vkuiModalPage__in-wrap{max-width:680px;max-width:var(--vkui--size_popup_medium--regular)}.vkuiModalPage--size-l .vkuiModalPage__in-wrap{max-width:880px;max-width:var(--vkui--size_popup_large--regular)}.vkuiModalPage__in{--vkui_internal--background:var(--vkui--color_background_modal);background-color:#fff;background-color:var(--vkui--color_background_modal);border-top-left-radius:12px;border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:12px;border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-sizing:border-box;display:flex;flex-direction:column;height:100%;overflow:visible;position:relative;width:100%}.vkuiModalPage--desktop .vkuiModalPage__in{border-bottom-left-radius:12px;border-bottom-left-radius:var(--vkui--size_border_radius_paper--regular);border-bottom-right-radius:12px;border-bottom-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);height:auto}.vkuiModalPage__header{width:100%}.vkuiModalPage__content-wrap{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;display:flex;flex-direction:column;overflow:hidden;position:relative}.vkuiModalPage__header:empty+.vkuiModalPage__content-wrap{border-radius:inherit}.vkuiModalPage__content{box-sizing:border-box;height:100%;overflow-x:hidden;overflow-y:hidden}.vkuiInternalModalRoot__modal--expandable .vkuiModalPage__content,.vkuiModalPage--desktop .vkuiModalPage__content{-webkit-overflow-scrolling:touch;overflow-y:auto}.vkuiInternalModalRoot__modal--expandable .vkuiModalPage__content-in,.vkuiModalPage--desktop .vkuiModalPage__content-in{height:100%}.vkuiModalPage__content-in{position:relative}.vkuiModalPage__content-in:after{content:"";display:block;height:0;height:var(--vkui_internal--safe_area_inset_bottom)}.vkuiInternalModalRoot--touched .vkuiModalPage__in-wrap{transition:none}.vkuiInternalModalRoot--switching .vkuiModalPage__in-wrap{pointer-events:none}.vkuiInternalModalRoot__modal--collapsed .vkuiModalPage__content,.vkuiInternalModalRoot__modal--dragging .vkuiModalPage__content{overflow:hidden;touch-action:pan-y}
+.ModalPage {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+.ModalPage--desktop {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.ModalPage__in-wrap {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin-right: auto;
+  margin-left: auto;
+  display: flex;
+  align-items: flex-end;
+  pointer-events: initial;
+  transform: translateY(100%);
+  transition: transform 320ms var(--vkui--animation_easing_platform);
+}
+
+.ModalPage--ios .ModalPage__in-wrap {
+  transition: transform 400ms var(--vkui--animation_easing_platform);
+}
+
+.ModalPage--desktop .ModalPage__in-wrap {
+  position: relative;
+  align-items: initial;
+  margin: 32px 56px;
+  height: auto;
+  max-height: 640px;
+  opacity: 0;
+  transform: none;
+  transition: opacity 340ms var(--vkui--animation_easing_platform);
+}
+
+@media (max-height: 672px) {
+  .ModalPage--desktop .ModalPage__in-wrap {
+    max-height: calc(100% - 32px * 2);
+  }
+}
+
+.ModalPage--size-s .ModalPage__in-wrap {
+  max-width: var(--vkui--size_popup_small--regular);
+}
+
+.ModalPage--size-m .ModalPage__in-wrap {
+  max-width: var(--vkui--size_popup_medium--regular);
+}
+
+.ModalPage--size-l .ModalPage__in-wrap {
+  max-width: var(--vkui--size_popup_large--regular);
+}
+
+.ModalPage__in {
+  background-color: var(--vkui--color_background_modal);
+  overflow: visible;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-top-right-radius: var(--vkui--size_border_radius_paper--regular);
+  border-top-left-radius: var(--vkui--size_border_radius_paper--regular);
+
+  --vkui_internal--background: var(--vkui--color_background_modal);
+}
+
+.ModalPage--desktop .ModalPage__in {
+  height: auto;
+  box-shadow: var(--vkui--elevation3);
+  border-bottom-right-radius: var(--vkui--size_border_radius_paper--regular);
+  border-bottom-left-radius: var(--vkui--size_border_radius_paper--regular);
+}
+
+.ModalPage__header {
+  width: 100%;
+}
+
+.ModalPage__content-wrap {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+}
+
+.ModalPage__header:empty + .ModalPage__content-wrap {
+  border-radius: inherit;
+}
+
+.ModalPage__content {
+  height: 100%;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+
+.ModalPage--desktop .ModalPage__content,
+:global(.vkuiInternalModalRoot__modal--expandable) .ModalPage__content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.ModalPage--desktop .ModalPage__content-in,
+:global(.vkuiInternalModalRoot__modal--expandable) .ModalPage__content-in {
+  height: 100%;
+}
+
+.ModalPage__content-in {
+  position: relative;
+}
+
+.ModalPage__content-in::after {
+  content: '';
+  height: var(--vkui_internal--safe_area_inset_bottom);
+  display: block;
+}
+
+/**
+ * CMP:
+ * ModalRoot
+ *
+ * [дополнительно] также ищи в файле `ModalRoot__modal--expandable`
+ */
+
+:global(.vkuiInternalModalRoot--touched) .ModalPage__in-wrap {
+  transition: none;
+}
+
+:global(.vkuiInternalModalRoot--switching) .ModalPage__in-wrap {
+  pointer-events: none;
+}
+
+:global(.vkuiInternalModalRoot__modal--collapsed) .ModalPage__content,
+:global(.vkuiInternalModalRoot__modal--dragging) .ModalPage__content {
+  overflow: hidden;
+  touch-action: pan-y;
+}

package/dist/cssm/components/ModalPage/ModalPageContext.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface ModalPageContextInterface {
+    labelId?: string;
+}
+export declare const ModalPageContext: React.Context<ModalPageContextInterface>;

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export const ModalPageContext = /*#__PURE__*/ React.createContext({});
+
+//# sourceMappingURL=ModalPageContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ModalPage/ModalPageContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface ModalPageContextInterface {\n  labelId?: string;\n}\n\nexport const ModalPageContext = React.createContext<ModalPageContextInterface>({});\n"],"names":["React","ModalPageContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAM/B,OAAO,MAAMC,iCAAmBD,MAAME,aAAa,CAA4B,CAAC,GAAG"}

package/dist/cssm/components/ModalPageHeader/ModalPageHeader.js

@@ -3,6 +3,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { usePlatform } from '../../hooks/usePlatform';
 import { Platform } from '../../lib/platform';
+import { ModalPageContext } from '../ModalPage/ModalPageContext';
 import { PanelHeader } from '../PanelHeader/PanelHeader';
 import { Separator } from '../Separator/Separator';
 import styles from './ModalPageHeader.module.css';
@@ -12,6 +13,7 @@ import styles from './ModalPageHeader.module.css';
     const platform = usePlatform();
     const hasSeparator = separator && platform === Platform.VKCOM;
     const { isDesktop  } = useAdaptivityWithJSMediaQueries();
+    const { labelId  } = React.useContext(ModalPageContext);
     return /*#__PURE__*/ React.createElement("div", {
         className: classNames(styles['ModalPageHeader'], platform !== Platform.VKCOM && styles['ModalPageHeader--withGaps'], isDesktop && styles['ModalPageHeader--desktop']),
         ref: getRef
@@ -21,7 +23,10 @@ import styles from './ModalPageHeader.module.css';
         fixed: false,
         separator: false,
         transparent: true
-    }, children), hasSeparator && /*#__PURE__*/ React.createElement(Separator, {
+    }, /*#__PURE__*/ React.createElement(PanelHeader.Content, {
+        Component: "h2",
+        id: labelId
+    }, children)), hasSeparator && /*#__PURE__*/ React.createElement(Separator, {
         wide: true
     }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef } from '../../types';\nimport { PanelHeader, PanelHeaderProps } from '../PanelHeader/PanelHeader';\nimport { Separator } from '../Separator/Separator';\nimport styles from './ModalPageHeader.module.css';\n\nexport interface ModalPageHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Omit<PanelHeaderProps, 'fixed' | 'shadow'>,\n    HasRef<HTMLDivElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPageHeader\n */\nexport const ModalPageHeader = ({\n  children,\n  separator = true,\n  getRef,\n  className,\n  ...restProps\n}: ModalPageHeaderProps) => {\n  const platform = usePlatform();\n  const hasSeparator = separator && platform === Platform.VKCOM;\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  return (\n    <div\n      className={classNames(\n        styles['ModalPageHeader'],\n        platform !== Platform.VKCOM && styles['ModalPageHeader--withGaps'],\n        isDesktop && styles['ModalPageHeader--desktop'],\n      )}\n      ref={getRef}\n    >\n      <PanelHeader\n        className={classNames('vkuiInternalModalPageHeader__in', className)}\n        {...restProps}\n        fixed={false}\n        separator={false}\n        transparent\n      >\n        {children}\n      </PanelHeader>\n      {hasSeparator && <Separator wide />}\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","Platform","PanelHeader","Separator","styles","ModalPageHeader","children","separator","getRef","className","restProps","platform","hasSeparator","VKCOM","isDesktop","div","ref","fixed","transparent","wide"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,WAAW,QAA0B,6BAA6B;AAC3E,SAASC,SAAS,QAAQ,yBAAyB;AACnD,OAAOC,YAAY,+BAA+B;AAOlD;;CAEC,GACD,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,SAAQ,EACRC,WAAY,IAAI,CAAA,EAChBC,OAAM,EACNC,UAAS,EACT,GAAGC,WACkB,GAAK;IAC1B,MAAMC,WAAWX;IACjB,MAAMY,eAAeL,aAAaI,aAAaV,SAASY,KAAK;IAC7D,MAAM,EAAEC,UAAS,EAAE,GAAGf;IAEtB,qBACE,oBAACgB;QACCN,WAAWX,WACTM,MAAM,CAAC,kBAAkB,EACzBO,aAAaV,SAASY,KAAK,IAAIT,MAAM,CAAC,4BAA4B,EAClEU,aAAaV,MAAM,CAAC,2BAA2B;QAEjDY,KAAKR;qBAEL,oBAACN;QACCO,WAAWX,WAAW,mCAAmCW;QACxD,GAAGC,SAAS;QACbO,OAAO,KAAK;QACZV,WAAW,KAAK;QAChBW,aAAAA,IAAW;OAEVZ,WAEFM,8BAAgB,oBAACT;QAAUgB,MAAAA,IAAI;;AAGtC,EAAE"}
+{"version":3,"sources":["../../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef } from '../../types';\nimport { ModalPageContext } from '../ModalPage/ModalPageContext';\nimport { PanelHeader, PanelHeaderProps } from '../PanelHeader/PanelHeader';\nimport { Separator } from '../Separator/Separator';\nimport styles from './ModalPageHeader.module.css';\n\nexport interface ModalPageHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Omit<PanelHeaderProps, 'fixed' | 'shadow'>,\n    HasRef<HTMLDivElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPageHeader\n */\nexport const ModalPageHeader = ({\n  children,\n  separator = true,\n  getRef,\n  className,\n  ...restProps\n}: ModalPageHeaderProps) => {\n  const platform = usePlatform();\n  const hasSeparator = separator && platform === Platform.VKCOM;\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const { labelId } = React.useContext(ModalPageContext);\n\n  return (\n    <div\n      className={classNames(\n        styles['ModalPageHeader'],\n        platform !== Platform.VKCOM && styles['ModalPageHeader--withGaps'],\n        isDesktop && styles['ModalPageHeader--desktop'],\n      )}\n      ref={getRef}\n    >\n      <PanelHeader\n        className={classNames('vkuiInternalModalPageHeader__in', className)}\n        {...restProps}\n        fixed={false}\n        separator={false}\n        transparent\n      >\n        <PanelHeader.Content Component=\"h2\" id={labelId}>\n          {children}\n        </PanelHeader.Content>\n      </PanelHeader>\n      {hasSeparator && <Separator wide />}\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","Platform","ModalPageContext","PanelHeader","Separator","styles","ModalPageHeader","children","separator","getRef","className","restProps","platform","hasSeparator","VKCOM","isDesktop","labelId","useContext","div","ref","fixed","transparent","Content","Component","id","wide"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,WAAW,QAA0B,6BAA6B;AAC3E,SAASC,SAAS,QAAQ,yBAAyB;AACnD,OAAOC,YAAY,+BAA+B;AAOlD;;CAEC,GACD,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,SAAQ,EACRC,WAAY,IAAI,CAAA,EAChBC,OAAM,EACNC,UAAS,EACT,GAAGC,WACkB,GAAK;IAC1B,MAAMC,WAAWZ;IACjB,MAAMa,eAAeL,aAAaI,aAAaX,SAASa,KAAK;IAC7D,MAAM,EAAEC,UAAS,EAAE,GAAGhB;IACtB,MAAM,EAAEiB,QAAO,EAAE,GAAGnB,MAAMoB,UAAU,CAACf;IAErC,qBACE,oBAACgB;QACCR,WAAWZ,WACTO,MAAM,CAAC,kBAAkB,EACzBO,aAAaX,SAASa,KAAK,IAAIT,MAAM,CAAC,4BAA4B,EAClEU,aAAaV,MAAM,CAAC,2BAA2B;QAEjDc,KAAKV;qBAEL,oBAACN;QACCO,WAAWZ,WAAW,mCAAmCY;QACxD,GAAGC,SAAS;QACbS,OAAO,KAAK;QACZZ,WAAW,KAAK;QAChBa,aAAAA,IAAW;qBAEX,oBAAClB,YAAYmB,OAAO;QAACC,WAAU;QAAKC,IAAIR;OACrCT,YAGJM,8BAAgB,oBAACT;QAAUqB,MAAAA,IAAI;;AAGtC,EAAE"}

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

@@ -1 +1,18 @@
-.vkuiModalPageHeader{--vkui_internal--safe_area_inset_top:0}.vkuiModalPageHeader--withGaps{padding-left:4px;padding-right:4px}.vkuiModalPageHeader--desktop.vkuiModalPageHeader--withGaps{padding-left:8px;padding-right:8px}.vkuiModalPageHeader .vkuiIcon--cancel_24,.vkuiModalPageHeader .vkuiIcon--dismiss_24{color:#99a2ad;color:var(--vkui--color_icon_secondary)}
+.ModalPageHeader {
+  --vkui_internal--safe_area_inset_top: 0;
+}
+
+.ModalPageHeader--withGaps {
+  padding-right: 4px;
+  padding-left: 4px;
+}
+
+.ModalPageHeader--desktop.ModalPageHeader--withGaps {
+  padding-right: 8px;
+  padding-left: 8px;
+}
+
+.ModalPageHeader :global(.vkuiIcon--dismiss_24), /* Note: <Icon24Dismiss /> по документации используется только для iOS  */
+.ModalPageHeader :global(.vkuiIcon--cancel_24) {
+  color: var(--vkui--color_icon_secondary);
+}

package/dist/cssm/components/ModalRoot/ModalRoot.d.ts

@@ -1,28 +1,3 @@
 import * as React from 'react';
-import { HasPlatform } from '../../types';
-import { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
-export interface ModalRootProps extends HasPlatform {
-    activeModal?: string | null;
-    /**
-     * Будет вызвано при начале открытия активной модалки с её id
-     */
-    onOpen?(modalId: string): void;
-    /**
-     * Будет вызвано при окончательном открытии активной модалки с её id
-     */
-    onOpened?(modalId: string): void;
-    /**
-     * Будет вызвано при начале закрытия активной модалки с её id
-     */
-    onClose?(modalId: string): void;
-    /**
-     * Будет вызвано при окончательном закрытии активной модалки с её id
-     */
-    onClosed?(modalId: string): void;
-    /**
-     * @ignore
-     */
-    configProvider?: ConfigProviderContextInterface;
-    children?: React.ReactNode;
-}
-export declare const ModalRootTouch: React.FC<Omit<ModalRootProps, "platform">>;
+import { ModalRootWithDOMProps } from './types';
+export declare const ModalRootTouch: React.FC<Omit<ModalRootWithDOMProps, "platform">>;

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

@@ -39,7 +39,7 @@ class ModalRootTouchComponent extends React.Component {
         this.maskElementRef = /*#__PURE__*/ React.createRef();
         this.modalRootContext = {
             updateModalHeight: this.updateModalHeight,
-            registerModal: ({ id , ...data })=>Object.assign(this.getModalState(id) ?? {}, data),
+            registerModal: ({ id , ...data })=>Object.assign(this.props.getModalState(id) ?? {}, data),
             onClose: ()=>this.props.onExit(),
             isInsideModal: true
         };
@@ -61,12 +61,6 @@ class ModalRootTouchComponent extends React.Component {
     get window() {
         return this.props.window;
     }
-    getModalState(id) {
-        if (!id) {
-            return undefined;
-        }
-        return this.props.getModalState(id);
-    }
     getModals() {
         return React.Children.toArray(this.props.children);
     }
@@ -88,7 +82,7 @@ class ModalRootTouchComponent extends React.Component {
         // transition phase 3: animate entering modal
         if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {
             const { enteringModal  } = this.props;
-            const enteringState = this.getModalState(enteringModal);
+            const enteringState = this.props.getModalState(enteringModal);
             this.props.onEnter();
             this.waitTransitionFinish(enteringState, ()=>{
                 if (enteringState?.innerElement) {
@@ -143,11 +137,11 @@ class ModalRootTouchComponent extends React.Component {
         return false;
     };
     updateModalTranslate = ()=>{
-        const modalState = this.getModalState(this.props.activeModal);
+        const modalState = this.props.getModalState(this.props.activeModal);
         modalState && this.animateTranslate(modalState, modalState.translateY);
     };
     checkPageContentHeight() {
-        const modalState = this.getModalState(this.props.activeModal);
+        const modalState = this.props.getModalState(this.props.activeModal);
         if (modalState?.type === ModalType.PAGE && modalState?.modalElement) {
             const prevModalState = {
                 ...modalState
@@ -170,7 +164,7 @@ class ModalRootTouchComponent extends React.Component {
         }
     }
     updateModalHeight = ()=>{
-        const modalState = this.getModalState(this.props.activeModal);
+        const modalState = this.props.getModalState(this.props.activeModal);
         if (modalState && modalState.type === ModalType.PAGE && modalState.dynamicContentHeight) {
             if (this.props.enteringModal) {
                 this.waitTransitionFinish(modalState, ()=>{
@@ -186,12 +180,12 @@ class ModalRootTouchComponent extends React.Component {
         this.setState({
             touchDown: false
         });
-        const prevModalState = this.getModalState(id);
+        const prevModalState = this.props.getModalState(id);
         if (!prevModalState) {
             id && warn(`closeActiveModal: модальное окно (страница) ${id} не существует`, 'error');
             return;
         }
-        const nextModalState = this.getModalState(this.props.activeModal);
+        const nextModalState = this.props.getModalState(this.props.activeModal);
         const nextIsPage = !!nextModalState && nextModalState.type === ModalType.PAGE;
         const prevIsPage = !!prevModalState && prevModalState.type === ModalType.PAGE;
         this.waitTransitionFinish(prevModalState, ()=>this.props.onExited(id));
@@ -206,7 +200,7 @@ class ModalRootTouchComponent extends React.Component {
         if (this.props.exitingModal) {
             return;
         }
-        const modalState = this.getModalState(this.props.activeModal);
+        const modalState = this.props.getModalState(this.props.activeModal);
         if (!modalState) {
             return;
         }
@@ -278,7 +272,7 @@ class ModalRootTouchComponent extends React.Component {
         }
     }
     onTouchEnd = (e)=>{
-        const modalState = this.getModalState(this.props.activeModal);
+        const modalState = this.props.getModalState(this.props.activeModal);
         if (modalState?.type === ModalType.PAGE) {
             return this.onPageTouchEnd(e, modalState);
         }
@@ -373,7 +367,7 @@ class ModalRootTouchComponent extends React.Component {
         if (!activeModal) {
             return;
         }
-        const modalState = this.getModalState(activeModal);
+        const modalState = this.props.getModalState(activeModal);
         if (modalState?.type === ModalType.PAGE && modalState?.contentElement?.contains(target)) {
             modalState.contentScrolled = true;
             if (modalState.contentScrollStopTimeout) {
@@ -448,7 +442,7 @@ class ModalRootTouchComponent extends React.Component {
             ref: this.viewportRef
         }, this.getModals().map((Modal)=>{
             const modalId = getNavId(Modal.props, warn);
-            const _modalState = this.getModalState(modalId);
+            const _modalState = this.props.getModalState(modalId);
             if (modalId !== activeModal && modalId !== exitingModal || !_modalState) {
                 return null;
             }
@@ -460,7 +454,7 @@ class ModalRootTouchComponent extends React.Component {
             return /*#__PURE__*/ React.createElement(FocusTrap, {
                 key: key,
                 getRootRef: (e)=>{
-                    const modalState = this.getModalState(modalId);
+                    const modalState = this.props.getModalState(modalId);
                     if (modalState) {
                         modalState.modalElement = e;
                     }