@vkontakte/vkui 4.24.0 → 4.25.0

package/dist/cssm/components/ModalDismissButton/ModalDismissButton.js

@@ -18,6 +18,7 @@ var ModalDismissButton = function ModalDismissButton(props) {
 
 ModalDismissButton.defaultProps = {
   "aria-label": "Закрыть"
-};
+}; // eslint-disable-next-line import/no-default-export
+
 export default ModalDismissButton;
 //# sourceMappingURL=ModalDismissButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"names":["Icon20Cancel","Tappable","getClassName","usePlatform","ModalDismissButton","props","platform","defaultProps"],"mappings":";;AACA,SAASA,YAAT,QAA6B,kBAA7B;AACA,OAAOC,QAAP;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA;;AAIA,IAAMC,kBAAqD,GAAG,SAAxDA,kBAAwD,CAC5DC,KAD4D,EAEzD;AACH,MAAMC,QAAQ,GAAGH,WAAW,EAA5B;AAEA,SACE,oBAAC,QAAD;AACE,IAAA,SAAS,EAAED,YAAY,CAAC,oBAAD,EAAuBI,QAAvB;AADzB,KAEMD,KAFN;AAGE,IAAA,UAAU,EAAC,4BAHb;AAIE,IAAA,SAAS,EAAC;AAJZ,MAME,oBAAC,YAAD,OANF,CADF;AAUD,CAfD;;AAiBAD,kBAAkB,CAACG,YAAnB,GAAkC;AAChC,gBAAc;AADkB,CAAlC;AAIA,eAAeH,kBAAf","sourcesContent":["import * as React from \"react\";\nimport { Icon20Cancel } from \"@vkontakte/icons\";\nimport Tappable from \"../Tappable/Tappable\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"./ModalDismissButton.css\";\n\nexport type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;\n\nconst ModalDismissButton: React.FC<ModalDismissButtonProps> = (\n  props: ModalDismissButtonProps\n) => {\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      vkuiClass={getClassName(\"ModalDismissButton\", platform)}\n      {...props}\n      activeMode=\"ModalDismissButton--active\"\n      hoverMode=\"ModalDismissButton--hover\"\n    >\n      <Icon20Cancel />\n    </Tappable>\n  );\n};\n\nModalDismissButton.defaultProps = {\n  \"aria-label\": \"Закрыть\",\n};\n\nexport default ModalDismissButton;\n"],"file":"ModalDismissButton.js"}
+{"version":3,"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"names":["Icon20Cancel","Tappable","getClassName","usePlatform","ModalDismissButton","props","platform","defaultProps"],"mappings":";;AACA,SAASA,YAAT,QAA6B,kBAA7B;AACA,OAAOC,QAAP;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA;;AAIA,IAAMC,kBAAqD,GAAG,SAAxDA,kBAAwD,CAC5DC,KAD4D,EAEzD;AACH,MAAMC,QAAQ,GAAGH,WAAW,EAA5B;AAEA,SACE,oBAAC,QAAD;AACE,IAAA,SAAS,EAAED,YAAY,CAAC,oBAAD,EAAuBI,QAAvB;AADzB,KAEMD,KAFN;AAGE,IAAA,UAAU,EAAC,4BAHb;AAIE,IAAA,SAAS,EAAC;AAJZ,MAME,oBAAC,YAAD,OANF,CADF;AAUD,CAfD;;AAiBAD,kBAAkB,CAACG,YAAnB,GAAkC;AAChC,gBAAc;AADkB,CAAlC,C,CAIA;;AACA,eAAeH,kBAAf","sourcesContent":["import * as React from \"react\";\nimport { Icon20Cancel } from \"@vkontakte/icons\";\nimport Tappable from \"../Tappable/Tappable\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"./ModalDismissButton.css\";\n\nexport type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;\n\nconst ModalDismissButton: React.FC<ModalDismissButtonProps> = (\n  props: ModalDismissButtonProps\n) => {\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      vkuiClass={getClassName(\"ModalDismissButton\", platform)}\n      {...props}\n      activeMode=\"ModalDismissButton--active\"\n      hoverMode=\"ModalDismissButton--hover\"\n    >\n      <Icon20Cancel />\n    </Tappable>\n  );\n};\n\nModalDismissButton.defaultProps = {\n  \"aria-label\": \"Закрыть\",\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default ModalDismissButton;\n"],"file":"ModalDismissButton.js"}

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

@@ -37,7 +37,7 @@ var ModalPage = function ModalPage(props) {
 
   React.useEffect(function () {
     updateModalHeight();
-  }, [children]);
+  }, [children, updateModalHeight]);
   var isDesktop = viewWidth >= ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= ViewHeight.MEDIUM);
   var canShowCloseBtn = viewWidth >= ViewWidth.SMALL_TABLET;
   var modalContext = React.useContext(ModalRootContext);
@@ -71,7 +71,8 @@ var ModalPage = function ModalPage(props) {
 
 ModalPage.defaultProps = {
   settlingHeight: 75
-};
+}; // eslint-disable-next-line import/no-default-export
+
 export default withAdaptivity(ModalPage, {
   viewWidth: true,
   viewHeight: true,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"names":["React","getClassName","classNames","ModalRootContext","useModalRegistry","usePlatform","withAdaptivity","ViewHeight","ViewWidth","ModalDismissButton","multiRef","ModalType","getNavId","warnOnce","warn","ModalPage","props","platform","useContext","updateModalHeight","children","header","viewWidth","viewHeight","sizeX","hasMouse","onClose","settlingHeight","dynamicContentHeight","getModalContentRef","nav","restProps","useEffect","isDesktop","SMALL_TABLET","MEDIUM","canShowCloseBtn","modalContext","PAGE","refs","innerElement","headerElement","contentElement","defaultProps"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport {\n  ModalRootContext,\n  useModalRegistry,\n} from \"../ModalRoot/ModalRootContext\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  withAdaptivity,\n  AdaptivityProps,\n  ViewHeight,\n  ViewWidth,\n} from \"../../hoc/withAdaptivity\";\nimport ModalDismissButton from \"../ModalDismissButton/ModalDismissButton\";\nimport { multiRef } from \"../../lib/utils\";\nimport { ModalType } from \"../ModalRoot/types\";\nimport { getNavId, NavIdProps } from \"../../lib/getNavId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./ModalPage.css\";\n\nexport interface ModalPageProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    AdaptivityProps,\n    NavIdProps {\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: React.ReactNode;\n  onClose?: VoidFunction;\n  /**\n   * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.\n   */\n  settlingHeight?: number;\n  /**\n   * Если высота контента в модальной странице может поменяться, нужно установить это свойство\n   */\n  dynamicContentHeight?: boolean;\n  getModalContentRef?: React.Ref<HTMLDivElement>;\n}\n\nconst warn = warnOnce(\"ModalPage\");\nconst ModalPage: React.FC<ModalPageProps> = (props: ModalPageProps) => {\n  const platform = usePlatform();\n  const { updateModalHeight } = React.useContext(ModalRootContext);\n  const {\n    children,\n    header,\n    viewWidth,\n    viewHeight,\n    sizeX,\n    hasMouse,\n    onClose,\n    settlingHeight,\n    dynamicContentHeight,\n    getModalContentRef,\n    nav,\n    ...restProps\n  } = props;\n\n  React.useEffect(() => {\n    updateModalHeight();\n  }, [children]);\n\n  const isDesktop =\n    viewWidth >= ViewWidth.SMALL_TABLET &&\n    (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n  const canShowCloseBtn = viewWidth >= ViewWidth.SMALL_TABLET;\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId(props, warn), ModalType.PAGE);\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName(\"ModalPage\", platform),\n        `ModalPage--sizeX-${sizeX}`,\n        {\n          \"ModalPage--desktop\": isDesktop,\n        }\n      )}\n    >\n      <div vkuiClass=\"ModalPage__in-wrap\" ref={refs.innerElement}>\n        <div vkuiClass=\"ModalPage__in\">\n          <div vkuiClass=\"ModalPage__header\" ref={refs.headerElement}>\n            {header}\n          </div>\n\n          <div vkuiClass=\"ModalPage__content-wrap\">\n            <div\n              vkuiClass=\"ModalPage__content\"\n              ref={multiRef<HTMLDivElement>(\n                refs.contentElement,\n                getModalContentRef\n              )}\n            >\n              <div vkuiClass=\"ModalPage__content-in\">{children}</div>\n            </div>\n          </div>\n          {canShowCloseBtn && (\n            <ModalDismissButton onClick={onClose || modalContext.onClose} />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nModalPage.defaultProps = {\n  settlingHeight: 75,\n};\n\nexport default withAdaptivity(ModalPage, {\n  viewWidth: true,\n  viewHeight: true,\n  sizeX: true,\n  hasMouse: true,\n});\n"],"file":"ModalPage.js"}
+{"version":3,"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"names":["React","getClassName","classNames","ModalRootContext","useModalRegistry","usePlatform","withAdaptivity","ViewHeight","ViewWidth","ModalDismissButton","multiRef","ModalType","getNavId","warnOnce","warn","ModalPage","props","platform","useContext","updateModalHeight","children","header","viewWidth","viewHeight","sizeX","hasMouse","onClose","settlingHeight","dynamicContentHeight","getModalContentRef","nav","restProps","useEffect","isDesktop","SMALL_TABLET","MEDIUM","canShowCloseBtn","modalContext","PAGE","refs","innerElement","headerElement","contentElement","defaultProps"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SACEC,gBADF,EAEEC,gBAFF;AAIA,SAASC,WAAT;AACA,SACEC,cADF,EAEEC,UAFF,EAGEC,SAHF;AAMA,OAAOC,kBAAP;AACA,SAASC,QAAT;AACA,SAASC,SAAT;AACA,SAASC,QAAT;AACA,SAASC,QAAT;AACA;AAsBA,IAAMC,IAAI,GAAGD,QAAQ,CAAC,WAAD,CAArB;;AACA,IAAME,SAAmC,GAAG,SAAtCA,SAAsC,CAACC,KAAD,EAA2B;AACrE,MAAMC,QAAQ,GAAGZ,WAAW,EAA5B;;AACA,0BAA8BL,KAAK,CAACkB,UAAN,CAAiBf,gBAAjB,CAA9B;AAAA,MAAQgB,iBAAR,qBAAQA,iBAAR;;AACA,MACEC,QADF,GAaIJ,KAbJ,CACEI,QADF;AAAA,MAEEC,MAFF,GAaIL,KAbJ,CAEEK,MAFF;AAAA,MAGEC,SAHF,GAaIN,KAbJ,CAGEM,SAHF;AAAA,MAIEC,UAJF,GAaIP,KAbJ,CAIEO,UAJF;AAAA,MAKEC,KALF,GAaIR,KAbJ,CAKEQ,KALF;AAAA,MAMEC,QANF,GAaIT,KAbJ,CAMES,QANF;AAAA,MAOEC,OAPF,GAaIV,KAbJ,CAOEU,OAPF;AAAA,MAQEC,cARF,GAaIX,KAbJ,CAQEW,cARF;AAAA,MASEC,oBATF,GAaIZ,KAbJ,CASEY,oBATF;AAAA,MAUEC,kBAVF,GAaIb,KAbJ,CAUEa,kBAVF;AAAA,MAWEC,GAXF,GAaId,KAbJ,CAWEc,GAXF;AAAA,MAYKC,SAZL,4BAaIf,KAbJ;;AAeAhB,EAAAA,KAAK,CAACgC,SAAN,CAAgB,YAAM;AACpBb,IAAAA,iBAAiB;AAClB,GAFD,EAEG,CAACC,QAAD,EAAWD,iBAAX,CAFH;AAIA,MAAMc,SAAS,GACbX,SAAS,IAAId,SAAS,CAAC0B,YAAvB,KACCT,QAAQ,IAAIF,UAAU,IAAIhB,UAAU,CAAC4B,MADtC,CADF;AAGA,MAAMC,eAAe,GAAGd,SAAS,IAAId,SAAS,CAAC0B,YAA/C;AAEA,MAAMG,YAAY,GAAGrC,KAAK,CAACkB,UAAN,CAAiBf,gBAAjB,CAArB;;AACA,0BAAiBC,gBAAgB,CAACQ,QAAQ,CAACI,KAAD,EAAQF,IAAR,CAAT,EAAwBH,SAAS,CAAC2B,IAAlC,CAAjC;AAAA,MAAQC,IAAR,qBAAQA,IAAR;;AAEA,SACE,wCACMR,SADN;AAEE,IAAA,SAAS,EAAE7B,UAAU,CACnBD,YAAY,CAAC,WAAD,EAAcgB,QAAd,CADO,6BAECO,KAFD,GAGnB;AACE,4BAAsBS;AADxB,KAHmB;AAFvB,MAUE;AAAK,IAAA,SAAS,EAAC,oBAAf;AAAoC,IAAA,GAAG,EAAEM,IAAI,CAACC;AAA9C,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC,mBAAf;AAAmC,IAAA,GAAG,EAAED,IAAI,CAACE;AAA7C,KACGpB,MADH,CADF,EAKE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AACE,IAAA,SAAS,EAAC,oBADZ;AAEE,IAAA,GAAG,EAAEX,QAAQ,CACX6B,IAAI,CAACG,cADM,EAEXb,kBAFW;AAFf,KAOE;AAAK,IAAA,SAAS,EAAC;AAAf,KAAwCT,QAAxC,CAPF,CADF,CALF,EAgBGgB,eAAe,IACd,oBAAC,kBAAD;AAAoB,IAAA,OAAO,EAAEV,OAAO,IAAIW,YAAY,CAACX;AAArD,IAjBJ,CADF,CAVF,CADF;AAmCD,CAjED;;AAmEAX,SAAS,CAAC4B,YAAV,GAAyB;AACvBhB,EAAAA,cAAc,EAAE;AADO,CAAzB,C,CAIA;;AACA,eAAerB,cAAc,CAACS,SAAD,EAAY;AACvCO,EAAAA,SAAS,EAAE,IAD4B;AAEvCC,EAAAA,UAAU,EAAE,IAF2B;AAGvCC,EAAAA,KAAK,EAAE,IAHgC;AAIvCC,EAAAA,QAAQ,EAAE;AAJ6B,CAAZ,CAA7B","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport {\n  ModalRootContext,\n  useModalRegistry,\n} from \"../ModalRoot/ModalRootContext\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  withAdaptivity,\n  ViewHeight,\n  ViewWidth,\n} from \"../../hoc/withAdaptivity\";\nimport { AdaptivityContextInterface } from \"../AdaptivityProvider/AdaptivityContext\";\nimport ModalDismissButton from \"../ModalDismissButton/ModalDismissButton\";\nimport { multiRef } from \"../../lib/utils\";\nimport { ModalType } from \"../ModalRoot/types\";\nimport { getNavId, NavIdProps } from \"../../lib/getNavId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./ModalPage.css\";\n\nexport interface ModalPageProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    AdaptivityContextInterface,\n    NavIdProps {\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: React.ReactNode;\n  onClose?: VoidFunction;\n  /**\n   * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.\n   */\n  settlingHeight?: number;\n  /**\n   * Если высота контента в модальной странице может поменяться, нужно установить это свойство\n   */\n  dynamicContentHeight?: boolean;\n  getModalContentRef?: React.Ref<HTMLDivElement>;\n}\n\nconst warn = warnOnce(\"ModalPage\");\nconst ModalPage: React.FC<ModalPageProps> = (props: ModalPageProps) => {\n  const platform = usePlatform();\n  const { updateModalHeight } = React.useContext(ModalRootContext);\n  const {\n    children,\n    header,\n    viewWidth,\n    viewHeight,\n    sizeX,\n    hasMouse,\n    onClose,\n    settlingHeight,\n    dynamicContentHeight,\n    getModalContentRef,\n    nav,\n    ...restProps\n  } = props;\n\n  React.useEffect(() => {\n    updateModalHeight();\n  }, [children, updateModalHeight]);\n\n  const isDesktop =\n    viewWidth >= ViewWidth.SMALL_TABLET &&\n    (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n  const canShowCloseBtn = viewWidth >= ViewWidth.SMALL_TABLET;\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId(props, warn), ModalType.PAGE);\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName(\"ModalPage\", platform),\n        `ModalPage--sizeX-${sizeX}`,\n        {\n          \"ModalPage--desktop\": isDesktop,\n        }\n      )}\n    >\n      <div vkuiClass=\"ModalPage__in-wrap\" ref={refs.innerElement}>\n        <div vkuiClass=\"ModalPage__in\">\n          <div vkuiClass=\"ModalPage__header\" ref={refs.headerElement}>\n            {header}\n          </div>\n\n          <div vkuiClass=\"ModalPage__content-wrap\">\n            <div\n              vkuiClass=\"ModalPage__content\"\n              ref={multiRef<HTMLDivElement>(\n                refs.contentElement,\n                getModalContentRef\n              )}\n            >\n              <div vkuiClass=\"ModalPage__content-in\">{children}</div>\n            </div>\n          </div>\n          {canShowCloseBtn && (\n            <ModalDismissButton onClick={onClose || modalContext.onClose} />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nModalPage.defaultProps = {\n  settlingHeight: 75,\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withAdaptivity(ModalPage, {\n  viewWidth: true,\n  viewHeight: true,\n  sizeX: true,\n  hasMouse: true,\n});\n"],"file":"ModalPage.js"}

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

@@ -1 +1 @@
-.vkuiModalPageHeader__in,.vkuiModalPageHeader__left,.vkuiModalPageHeader__right{box-sizing:border-box}.vkuiModalPageHeader__in{display:flex;align-items:center;white-space:nowrap;color:#000;color:var(--header_text_alternate);position:relative;z-index:2}.vkuiModalPage--android .vkuiModalPageHeader__in{height:56px;height:var(--modalheader_height_android);padding:0 4px}.vkuiModalPage--ios .vkuiModalPageHeader__in{height:52px;height:var(--modalheader_height_ios);padding:0 4px}.vkuiModalPageHeader__separator{margin-top:-1px}.vkuiModalPageHeader__left,.vkuiModalPageHeader__right{flex:0 0;display:flex;align-items:center;color:#2688eb;color:var(--header_tint_alternate)}.vkuiModalPageHeader__content{display:flex;align-items:center;overflow:hidden}.vkuiModalPageHeader__content-in{overflow:hidden;text-overflow:ellipsis}.vkuiModalPageHeader__right{justify-content:flex-end;text-align:right}.vkuiModalPageHeader .vkuiPanelHeaderButton .vkuiIcon--dismiss_24{color:#99a2ad;color:var(--placeholder_icon_foreground_primary)}.vkuiModalPageHeader .vkuiPanelHeaderButton .vkuiIcon--cancel_24{color:#99a2ad;color:var(--icon_secondary)}.vkuiModalPageHeader--ios .vkuiModalPageHeader__in{justify-content:space-between}.vkuiModalPageHeader--ios .vkuiModalPageHeader__left{flex-grow:1;flex-basis:0;padding-right:12px;font-size:17px}.vkuiModalPageHeader--ios .vkuiModalPageHeader__left .vkuiPanelHeaderButton .vkuiIcon--24{padding-left:12px;padding-right:12px}.vkuiModalPageHeader--ios .vkuiModalPageHeader__content{position:relative;z-index:1;flex:2 1;justify-content:center}.vkuiModalPageHeader--ios .vkuiModalPageHeader__content-in{font-size:21px;font-family:"VK Sans Display",-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-display);font-weight:500}@media (min-width:320px){.vkuiModalPageHeader--ios .vkuiModalPageHeader__content{flex-grow:3}}.vkuiModalPageHeader--ios .vkuiModalPageHeader__right{flex-grow:1;flex-basis:0;padding-left:12px;font-size:17px}.vkuiModalPageHeader--ios .vkuiModalPageHeader__right .vkuiPanelHeaderButton:not(:first-child){padding-left:12px}.vkuiModalPageHeader--ios .vkuiModalPageHeader__right .vkuiPanelHeaderButton .vkuiIcon--24{padding-left:12px;padding-right:12px}.vkuiModalPageHeader--ios.vkuiModalPageHeader--sizeX-regular .vkuiModalPageHeader__in{padding:0 8px}.vkuiModalPageHeader--ios.vkuiModalPageHeader--sizeX-regular .vkuiModalPageHeader__left:not(:empty){padding-left:0}.vkuiModalPageHeader--ios.vkuiModalPageHeader--sizeX-regular .vkuiModalPageHeader__right:not(:empty){padding-right:0}.vkuiModalPageHeader--android .vkuiModalPageHeader__left,.vkuiModalPageHeader--vkcom .vkuiModalPageHeader__left{padding-right:6px}.vkuiModalPageHeader--android .vkuiModalPageHeader__left:empty{padding-right:12px}.vkuiModalPageHeader--android .vkuiModalPageHeader__left:not(:empty){padding-left:4px}.vkuiModalPageHeader--android .vkuiModalPageHeader__dismiss,.vkuiModalPageHeader--vkcom .vkuiModalPageHeader__dismiss{color:#99a2ad;color:var(--icon_secondary)}.vkuiModalPageHeader--android .vkuiModalPageHeader__content{max-width:100%;flex-grow:2}.vkuiModalPageHeader--android .vkuiModalPageHeader__content-in{font-size:23px;font-family:"VK Sans Display",-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-display);font-weight:500}.vkuiModalPageHeader--android .vkuiModalPageHeader__right,.vkuiModalPageHeader--vkcom .vkuiModalPageHeader__right{padding-left:6px}.vkuiModalPageHeader--android .vkuiModalPageHeader__right:not(:empty){padding-right:4px}.vkuiModalPageHeader--android.vkuiModalPageHeader--sizeX-regular .vkuiModalPageHeader__in{padding:0 8px}.vkuiModalPageHeader--android .vkuiModalPageHeader__left:empty{padding-right:14px}.vkuiModalPageHeader--android.vkuiModalPageHeader--sizeX-regular .vkuiModalPageHeader__left:not(:empty){padding-left:0}.vkuiModalPageHeader--android .vkuiModalPageHeader__right:empty{padding-left:14px}.vkuiModalPageHeader--android.vkuiModalPageHeader--sizeX-regular .vkuiModalPageHeader__right:not(:empty){padding-right:0}.vkuiModalPageHeader--vkcom .vkuiModalPageHeader__in{height:48px;height:var(--panelheader_height_vkcom);justify-content:space-between;padding:0 2px}.vkuiModalPageHeader--vkcom .vkuiModalPageHeader__left,.vkuiModalPageHeader--vkcom .vkuiModalPageHeader__right{flex-grow:1;flex-basis:0}.vkuiModalPageHeader--vkcom .vkuiModalPageHeader__left{padding-right:1px}.vkuiModalPageHeader--vkcom .vkuiModalPageHeader__right{padding-left:1px}.vkuiModalPageHeader--vkcom .vkuiModalPageHeader__left:empty{padding-right:10px}.vkuiModalPageHeader--vkcom .vkuiModalPageHeader__right:empty{padding-left:10px}.vkuiModalPageHeader--vkcom .vkuiModalPageHeader__content{max-width:100%}.vkuiModalPageHeader--vkcom .vkuiModalPageHeader__content-in{display:flex;align-items:center;font-size:15px;line-height:20px;font-weight:500}.vkuiModalPageHeader--vkcom .vkuiModalPageHeader__content-in>span{overflow:hidden;width:100%;text-overflow:ellipsis}
+.vkuiModalPageHeader{position:relative;z-index:2;--safe-area-inset-top:0}.vkuiModalPageHeader--desktop.vkuiModalPageHeader--android{padding-left:6px;padding-right:6px}.vkuiModalPageHeader--desktop.vkuiModalPageHeader--ios{padding-left:4px;padding-right:4px}.vkuiModalPageHeader .vkuiIcon--dismiss_24{color:#99a2ad;color:var(--placeholder_icon_foreground_primary)}.vkuiModalPageHeader .vkuiIcon--cancel_24{color:#99a2ad;color:var(--icon_secondary)}

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

@@ -1,52 +1,51 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["left", "right", "children", "separator", "getRef"];
+var _excluded = ["children", "separator", "getRef"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import { getClassName } from "../../helpers/getClassName";
-import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
-import { isPrimitiveReactNode } from "../../lib/utils";
 import { VKCOM } from "../../lib/platform";
+import PanelHeader from "../PanelHeader/PanelHeader";
 import Separator from "../Separator/Separator";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import { ViewHeight, ViewWidth } from "../AdaptivityProvider/AdaptivityContext";
 import "./ModalPageHeader.css";
 
-var ModalPageHeader = function ModalPageHeader(props) {
+var ModalPageHeader = function ModalPageHeader(_ref) {
+  var children = _ref.children,
+      separator = _ref.separator,
+      getRef = _ref.getRef,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
   var platform = usePlatform();
 
   var _useAdaptivity = useAdaptivity(),
-      sizeX = _useAdaptivity.sizeX;
-
-  var left = props.left,
-      right = props.right,
-      children = props.children,
-      separator = props.separator,
-      getRef = props.getRef,
-      restProps = _objectWithoutProperties(props, _excluded);
+      viewWidth = _useAdaptivity.viewWidth,
+      viewHeight = _useAdaptivity.viewHeight,
+      hasMouse = _useAdaptivity.hasMouse;
 
-  var isPrimitive = isPrimitiveReactNode(children);
   var hasSeparator = separator && platform === VKCOM;
-  return createScopedElement("div", _extends({}, restProps, {
-    vkuiClass: classNames(getClassName("ModalPageHeader", platform), "ModalPageHeader--sizeX-".concat(sizeX)),
+  var isDesktop = viewWidth >= ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+  return createScopedElement("div", {
+    vkuiClass: classNames(getClassName("ModalPageHeader", platform), {
+      "ModalPageHeader--desktop": isDesktop
+    }),
     ref: getRef
-  }), createScopedElement("div", {
+  }, createScopedElement(PanelHeader, _extends({
     vkuiClass: "ModalPageHeader__in"
-  }, createScopedElement("div", {
-    vkuiClass: "ModalPageHeader__left"
-  }, left), createScopedElement("div", {
-    vkuiClass: "ModalPageHeader__content"
-  }, createScopedElement("div", {
-    vkuiClass: "ModalPageHeader__content-in"
-  }, isPrimitive ? createScopedElement("span", null, children) : children)), createScopedElement("div", {
-    vkuiClass: "ModalPageHeader__right"
-  }, right)), hasSeparator && createScopedElement(Separator, {
-    wide: true,
-    vkuiClass: "ModalPageHeader__separator"
+  }, restProps, {
+    fixed: false,
+    separator: false,
+    transparent: true
+  }), children), hasSeparator && createScopedElement(Separator, {
+    wide: true
   }));
 };
 
 ModalPageHeader.defaultProps = {
   separator: true
-};
+}; // eslint-disable-next-line import/no-default-export
+
 export default ModalPageHeader;
 //# sourceMappingURL=ModalPageHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"names":["getClassName","classNames","usePlatform","isPrimitiveReactNode","VKCOM","Separator","useAdaptivity","ModalPageHeader","props","platform","sizeX","left","right","children","separator","getRef","restProps","isPrimitive","hasSeparator","defaultProps"],"mappings":";;;;AACA,SAASA,YAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AAEA,SAASC,oBAAT;AACA,SAASC,KAAT;AACA,OAAOC,SAAP;AACA,SAASC,aAAT;AACA;;AAgBA,IAAMC,eAA8D,GAAG,SAAjEA,eAAiE,CACrEC,KADqE,EAElE;AACH,MAAMC,QAAQ,GAAGP,WAAW,EAA5B;;AACA,uBAAkBI,aAAa,EAA/B;AAAA,MAAQI,KAAR,kBAAQA,KAAR;;AACA,MAAQC,IAAR,GAAmEH,KAAnE,CAAQG,IAAR;AAAA,MAAcC,KAAd,GAAmEJ,KAAnE,CAAcI,KAAd;AAAA,MAAqBC,QAArB,GAAmEL,KAAnE,CAAqBK,QAArB;AAAA,MAA+BC,SAA/B,GAAmEN,KAAnE,CAA+BM,SAA/B;AAAA,MAA0CC,MAA1C,GAAmEP,KAAnE,CAA0CO,MAA1C;AAAA,MAAqDC,SAArD,4BAAmER,KAAnE;;AACA,MAAMS,WAAW,GAAGd,oBAAoB,CAACU,QAAD,CAAxC;AACA,MAAMK,YAAY,GAAGJ,SAAS,IAAIL,QAAQ,KAAKL,KAA/C;AAEA,SACE,wCACMY,SADN;AAEE,IAAA,SAAS,EAAEf,UAAU,CACnBD,YAAY,CAAC,iBAAD,EAAoBS,QAApB,CADO,mCAEOC,KAFP,EAFvB;AAME,IAAA,GAAG,EAAEK;AANP,MAQE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KAAwCJ,IAAxC,CADF,EAGE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGM,WAAW,GAAG,kCAAOJ,QAAP,CAAH,GAA6BA,QAD3C,CADF,CAHF,EASE;AAAK,IAAA,SAAS,EAAC;AAAf,KAAyCD,KAAzC,CATF,CARF,EAoBGM,YAAY,IACX,oBAAC,SAAD;AAAW,IAAA,IAAI,MAAf;AAAgB,IAAA,SAAS,EAAC;AAA1B,IArBJ,CADF;AA0BD,CAnCD;;AAqCAX,eAAe,CAACY,YAAhB,GAA+B;AAC7BL,EAAAA,SAAS,EAAE;AADkB,CAA/B;AAIA,eAAeP,eAAf","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasRef } from \"../../types\";\nimport { isPrimitiveReactNode } from \"../../lib/utils\";\nimport { VKCOM } from \"../../lib/platform\";\nimport Separator from \"../Separator/Separator\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./ModalPageHeader.css\";\n\nexport interface ModalPageHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Иконки, отображаемые слева\n   */\n  left?: React.ReactNode;\n  /**\n   * Иконки, отображаемые справа\n   */\n  right?: React.ReactNode;\n  separator?: boolean;\n}\n\nconst ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = (\n  props: ModalPageHeaderProps\n) => {\n  const platform = usePlatform();\n  const { sizeX } = useAdaptivity();\n  const { left, right, children, separator, getRef, ...restProps } = props;\n  const isPrimitive = isPrimitiveReactNode(children);\n  const hasSeparator = separator && platform === VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName(\"ModalPageHeader\", platform),\n        `ModalPageHeader--sizeX-${sizeX}`\n      )}\n      ref={getRef}\n    >\n      <div vkuiClass=\"ModalPageHeader__in\">\n        <div vkuiClass=\"ModalPageHeader__left\">{left}</div>\n\n        <div vkuiClass=\"ModalPageHeader__content\">\n          <div vkuiClass=\"ModalPageHeader__content-in\">\n            {isPrimitive ? <span>{children}</span> : children}\n          </div>\n        </div>\n\n        <div vkuiClass=\"ModalPageHeader__right\">{right}</div>\n      </div>\n\n      {hasSeparator && (\n        <Separator wide vkuiClass=\"ModalPageHeader__separator\" />\n      )}\n    </div>\n  );\n};\n\nModalPageHeader.defaultProps = {\n  separator: true,\n};\n\nexport default ModalPageHeader;\n"],"file":"ModalPageHeader.js"}
+{"version":3,"sources":["../../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"names":["usePlatform","VKCOM","PanelHeader","Separator","useAdaptivity","classNames","getClassName","ViewHeight","ViewWidth","ModalPageHeader","children","separator","getRef","restProps","platform","viewWidth","viewHeight","hasMouse","hasSeparator","isDesktop","SMALL_TABLET","MEDIUM","defaultProps"],"mappings":";;;;AACA,SAASA,WAAT;AAEA,SAASC,KAAT;AACA,OAAOC,WAAP;AACA,OAAOC,SAAP;AACA,SAASC,aAAT;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SAASC,UAAT,EAAqBC,SAArB;AACA;;AAOA,IAAMC,eAA8D,GAAG,SAAjEA,eAAiE,OAK3C;AAAA,MAJ1BC,QAI0B,QAJ1BA,QAI0B;AAAA,MAH1BC,SAG0B,QAH1BA,SAG0B;AAAA,MAF1BC,MAE0B,QAF1BA,MAE0B;AAAA,MADvBC,SACuB;;AAC1B,MAAMC,QAAQ,GAAGd,WAAW,EAA5B;;AACA,uBAA4CI,aAAa,EAAzD;AAAA,MAAQW,SAAR,kBAAQA,SAAR;AAAA,MAAmBC,UAAnB,kBAAmBA,UAAnB;AAAA,MAA+BC,QAA/B,kBAA+BA,QAA/B;;AACA,MAAMC,YAAY,GAAGP,SAAS,IAAIG,QAAQ,KAAKb,KAA/C;AACA,MAAMkB,SAAS,GACbJ,SAAS,IAAIP,SAAS,CAACY,YAAvB,KACCH,QAAQ,IAAID,UAAU,IAAIT,UAAU,CAACc,MADtC,CADF;AAIA,SACE;AACE,IAAA,SAAS,EAAEhB,UAAU,CAACC,YAAY,CAAC,iBAAD,EAAoBQ,QAApB,CAAb,EAA4C;AAC/D,kCAA4BK;AADmC,KAA5C,CADvB;AAIE,IAAA,GAAG,EAAEP;AAJP,KAME,oBAAC,WAAD;AACE,IAAA,SAAS,EAAC;AADZ,KAEMC,SAFN;AAGE,IAAA,KAAK,EAAE,KAHT;AAIE,IAAA,SAAS,EAAE,KAJb;AAKE,IAAA,WAAW;AALb,MAOGH,QAPH,CANF,EAeGQ,YAAY,IAAI,oBAAC,SAAD;AAAW,IAAA,IAAI;AAAf,IAfnB,CADF;AAmBD,CAhCD;;AAkCAT,eAAe,CAACa,YAAhB,GAA+B;AAC7BX,EAAAA,SAAS,EAAE;AADkB,CAA/B,C,CAIA;;AACA,eAAeF,eAAf","sourcesContent":["import * as React from \"react\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasRef } from \"../../types\";\nimport { VKCOM } from \"../../lib/platform\";\nimport PanelHeader, { PanelHeaderProps } from \"../PanelHeader/PanelHeader\";\nimport Separator from \"../Separator/Separator\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { ViewHeight, ViewWidth } from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"./ModalPageHeader.css\";\n\nexport interface ModalPageHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Omit<PanelHeaderProps, \"fixed\" | \"shadow\">,\n    HasRef<HTMLDivElement> {}\n\nconst ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = ({\n  children,\n  separator,\n  getRef,\n  ...restProps\n}: ModalPageHeaderProps) => {\n  const platform = usePlatform();\n  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();\n  const hasSeparator = separator && platform === VKCOM;\n  const isDesktop =\n    viewWidth >= ViewWidth.SMALL_TABLET &&\n    (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n\n  return (\n    <div\n      vkuiClass={classNames(getClassName(\"ModalPageHeader\", platform), {\n        \"ModalPageHeader--desktop\": isDesktop,\n      })}\n      ref={getRef}\n    >\n      <PanelHeader\n        vkuiClass=\"ModalPageHeader__in\"\n        {...restProps}\n        fixed={false}\n        separator={false}\n        transparent\n      >\n        {children}\n      </PanelHeader>\n      {hasSeparator && <Separator wide />}\n    </div>\n  );\n};\n\nModalPageHeader.defaultProps = {\n  separator: true,\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default ModalPageHeader;\n"],"file":"ModalPageHeader.js"}

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

@@ -33,6 +33,10 @@ var warn = warnOnce("ModalRoot");
 var IS_DEV = process.env.NODE_ENV === "development";
 
 function numberInRange(number, range) {
+  if (!range) {
+    return false;
+  }
+
   return number >= range[0] && number <= range[1];
 }
 
@@ -52,19 +56,19 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this), "documentScrolling", void 0);
+    _defineProperty(_assertThisInitialized(_this), "documentScrolling", false);
 
     _defineProperty(_assertThisInitialized(_this), "maskElementRef", void 0);
 
     _defineProperty(_assertThisInitialized(_this), "viewportRef", /*#__PURE__*/React.createRef());
 
-    _defineProperty(_assertThisInitialized(_this), "maskAnimationFrame", void 0);
+    _defineProperty(_assertThisInitialized(_this), "maskAnimationFrame", undefined);
 
     _defineProperty(_assertThisInitialized(_this), "modalRootContext", void 0);
 
     _defineProperty(_assertThisInitialized(_this), "frameIds", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "restoreFocusTo", void 0);
+    _defineProperty(_assertThisInitialized(_this), "restoreFocusTo", undefined);
 
     _defineProperty(_assertThisInitialized(_this), "preventTouch", function (event) {
       if (!event) {
@@ -129,16 +133,18 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onTouchEnd", function (e) {
       var modalState = _this.getModalState(_this.props.activeModal);
 
-      if (modalState.type === ModalType.PAGE) {
+      if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === ModalType.PAGE) {
         return _this.onPageTouchEnd(e, modalState);
       }
 
-      if (modalState.type === ModalType.CARD) {
+      if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === ModalType.CARD) {
         return _this.onCardTouchEnd(e, modalState);
       }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onScroll", function (e) {
+      var _modalState$contentEl;
+
       var activeModal = _this.props.activeModal;
       var target = e.target;
 
@@ -148,9 +154,13 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
 
       var modalState = _this.getModalState(activeModal);
 
-      if (modalState.type === ModalType.PAGE && modalState.contentElement.contains(target)) {
+      if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === ModalType.PAGE && modalState !== null && modalState !== void 0 && (_modalState$contentEl = modalState.contentElement) !== null && _modalState$contentEl !== void 0 && _modalState$contentEl.contains(target)) {
         modalState.contentScrolled = true;
-        clearTimeout(modalState.contentScrollStopTimeout);
+
+        if (modalState.contentScrollStopTimeout) {
+          clearTimeout(modalState.contentScrollStopTimeout);
+        }
+
         modalState.contentScrollStopTimeout = setTimeout(function () {
           if (modalState.contentScrolled) {
             modalState.contentScrolled = false;
@@ -199,6 +209,10 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getModalState",
     value: function getModalState(id) {
+      if (!id) {
+        return undefined;
+      }
+
       return this.props.getModalState(id);
     }
   }, {
@@ -211,7 +225,9 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       // Отслеживаем изменение размеров viewport (Необходимо для iOS)
       if (this.props.platform === IOS) {
-        this.window.addEventListener("resize", this.updateModalTranslate, false);
+        var _this$window;
+
+        (_this$window = this.window) === null || _this$window === void 0 ? void 0 : _this$window.addEventListener("resize", this.updateModalTranslate, false);
       }
     }
   }, {
@@ -235,12 +251,17 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         var enteringModal = this.props.enteringModal;
         var enteringState = this.getModalState(enteringModal);
         this.waitTransitionFinish(enteringState, function () {
-          enteringState.innerElement.style.transitionDelay = null;
+          if (enteringState !== null && enteringState !== void 0 && enteringState.innerElement) {
+            enteringState.innerElement.style.transitionDelay = "";
+          }
 
           _this2.props.onEnter(enteringModal);
         });
-        enteringState.innerElement.style.transitionDelay = this.props.delayEnter ? "".concat(this.timeout, "ms") : null;
-        this.animateTranslate(enteringState, enteringState.translateY);
+
+        if (enteringState !== null && enteringState !== void 0 && enteringState.innerElement) {
+          enteringState.innerElement.style.transitionDelay = this.props.delayEnter ? "".concat(this.timeout, "ms") : "";
+          this.animateTranslate(enteringState, enteringState.translateY);
+        }
       } // focus restoration
 
 
@@ -310,7 +331,10 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "closeModal",
     value: function closeModal(id) {
-      var _this3 = this;
+      var _this3 = this,
+          _prevModalState$trans,
+          _nextModalState$trans,
+          _nextModalState$trans2;
 
       // Сбрасываем состояния, которые могут помешать закрытию модального окна
       this.setState({
@@ -329,7 +353,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       this.waitTransitionFinish(prevModalState, function () {
         return _this3.props.onExit(id);
       });
-      var exitTranslate = prevIsPage && nextIsPage && prevModalState.translateY <= nextModalState.translateYFrom && !this.props.isBack ? nextModalState.translateYFrom + 10 : 100;
+      var exitTranslate = prevIsPage && nextIsPage && ((_prevModalState$trans = prevModalState.translateY) !== null && _prevModalState$trans !== void 0 ? _prevModalState$trans : 0) <= ((_nextModalState$trans = nextModalState === null || nextModalState === void 0 ? void 0 : nextModalState.translateYFrom) !== null && _nextModalState$trans !== void 0 ? _nextModalState$trans : 0) && !this.props.isBack ? ((_nextModalState$trans2 = nextModalState === null || nextModalState === void 0 ? void 0 : nextModalState.translateYFrom) !== null && _nextModalState$trans2 !== void 0 ? _nextModalState$trans2 : 0) + 10 : 100;
       this.animateTranslate(prevModalState, exitTranslate);
 
       if (!nextModalState) {
@@ -340,19 +364,23 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "onPageTouchMove",
     value: function onPageTouchMove(event, modalState) {
+      var _modalState$innerElem, _modalState$headerEle;
+
       var shiftY = event.shiftY,
           originalEvent = event.originalEvent;
       var target = originalEvent.target;
 
       if (!event.isY) {
-        if (this.viewportRef.current.contains(target)) {
+        var _this$viewportRef$cur;
+
+        if ((_this$viewportRef$cur = this.viewportRef.current) !== null && _this$viewportRef$cur !== void 0 && _this$viewportRef$cur.contains(target)) {
           originalEvent.preventDefault();
         }
 
         return;
       }
 
-      if (!modalState.innerElement.contains(target)) {
+      if (!((_modalState$innerElem = modalState.innerElement) !== null && _modalState$innerElem !== void 0 && _modalState$innerElem.contains(target))) {
         return originalEvent.preventDefault();
       }
 
@@ -363,7 +391,9 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
           expanded = modalState.expanded;
 
       if (!this.state.touchDown) {
-        modalState.touchStartContentScrollTop = modalState.contentElement.scrollTop;
+        var _modalState$contentEl2;
+
+        modalState.touchStartContentScrollTop = (_modalState$contentEl2 = modalState.contentElement) === null || _modalState$contentEl2 === void 0 ? void 0 : _modalState$contentEl2.scrollTop;
         this.setState({
           touchDown: true
         });
@@ -377,10 +407,12 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         modalState.touchMovePositive = shiftY > 0;
       }
 
-      if (!modalState.expandable || collapsed || expanded && modalState.touchMovePositive && modalState.touchStartContentScrollTop === 0 || modalState.headerElement.contains(target)) {
+      if (!modalState.expandable || collapsed || expanded && modalState.touchMovePositive && modalState.touchStartContentScrollTop === 0 || (_modalState$headerEle = modalState.headerElement) !== null && _modalState$headerEle !== void 0 && _modalState$headerEle.contains(target)) {
+        var _modalState$translate;
+
         originalEvent.preventDefault();
 
-        if (!expandable && shiftY < 0) {
+        if (!expandable && shiftY < 0 || !this.window) {
           return;
         }
 
@@ -390,7 +422,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         var shiftYPercent = shiftY / this.window.innerHeight * 100;
         var shiftYCurrent = rubber(shiftYPercent, 72, 0.8, this.props.platform === ANDROID || this.props.platform === VKCOM);
         modalState.touchShiftYPercent = shiftYPercent;
-        modalState.translateYCurrent = rangeTranslate(modalState.translateY + shiftYCurrent);
+        modalState.translateYCurrent = rangeTranslate(((_modalState$translate = modalState.translateY) !== null && _modalState$translate !== void 0 ? _modalState$translate : 0) + shiftYCurrent);
         this.animateTranslate(modalState, modalState.translateYCurrent);
         this.setMaskOpacity(modalState);
       }
@@ -398,11 +430,15 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "onCardTouchMove",
     value: function onCardTouchMove(event, modalState) {
+      var _modalState$innerElem2;
+
       var originalEvent = event.originalEvent,
           shiftY = event.shiftY;
       var target = originalEvent.target;
 
-      if (modalState.innerElement.contains(target)) {
+      if ((_modalState$innerElem2 = modalState.innerElement) !== null && _modalState$innerElem2 !== void 0 && _modalState$innerElem2.contains(target)) {
+        var _modalState$translate2;
+
         if (!this.state.touchDown) {
           this.setState({
             touchDown: true,
@@ -413,7 +449,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         var shiftYPercent = shiftY / modalState.innerElement.offsetHeight * 100;
         var shiftYCurrent = rubber(shiftYPercent, 72, 1.2, this.props.platform === ANDROID || this.props.platform === VKCOM);
         modalState.touchShiftYPercent = shiftYPercent;
-        modalState.translateYCurrent = Math.max(0, modalState.translateY + shiftYCurrent);
+        modalState.translateYCurrent = Math.max(0, ((_modalState$translate2 = modalState.translateY) !== null && _modalState$translate2 !== void 0 ? _modalState$translate2 : 0) + shiftYCurrent);
         this.animateTranslate(modalState, modalState.translateYCurrent);
         this.setMaskOpacity(modalState);
       }
@@ -429,21 +465,29 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       modalState.touchMovePositive = null;
       var setStateCallback;
 
-      if (this.state.dragging) {
+      if (this.state.dragging && this.window) {
+        var _modalState$translate3, _modalState$touchShif;
+
         var shiftYEndPercent = (startY + shiftY) / this.window.innerHeight * 100;
-        var translateY = modalState.translateYCurrent;
-        var expectTranslateY = translateY / event.duration * 240 * 0.6 * (modalState.touchShiftYPercent < 0 ? -1 : 1);
+        var translateY = (_modalState$translate3 = modalState.translateYCurrent) !== null && _modalState$translate3 !== void 0 ? _modalState$translate3 : 0;
+        var expectTranslateY = translateY / event.duration * 240 * 0.6 * (((_modalState$touchShif = modalState.touchShiftYPercent) !== null && _modalState$touchShif !== void 0 ? _modalState$touchShif : 0) < 0 ? -1 : 1);
         translateY = rangeTranslate(translateY + expectTranslateY);
 
         if (modalState.settlingHeight !== 100) {
           if (numberInRange(translateY, modalState.expandedRange)) {
-            translateY = modalState.expandedRange[0];
+            var _modalState$expandedR, _modalState$expandedR2;
+
+            translateY = (_modalState$expandedR = (_modalState$expandedR2 = modalState.expandedRange) === null || _modalState$expandedR2 === void 0 ? void 0 : _modalState$expandedR2[0]) !== null && _modalState$expandedR !== void 0 ? _modalState$expandedR : 0;
           } else if (numberInRange(translateY, modalState.collapsedRange)) {
-            translateY = modalState.translateYFrom;
+            var _modalState$translate4;
+
+            translateY = (_modalState$translate4 = modalState.translateYFrom) !== null && _modalState$translate4 !== void 0 ? _modalState$translate4 : 0;
           } else if (numberInRange(translateY, modalState.hiddenRange)) {
             translateY = 100;
           } else {
-            translateY = modalState.translateYFrom;
+            var _modalState$translate5;
+
+            translateY = (_modalState$translate5 = modalState.translateYFrom) !== null && _modalState$translate5 !== void 0 ? _modalState$translate5 : 0;
           }
         } else {
           if (numberInRange(translateY, [0, 25])) {
@@ -490,8 +534,10 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       var setStateCallback;
 
       if (this.state.dragging) {
-        var translateY = modalState.translateYCurrent;
-        var expectTranslateY = translateY / duration * 240 * 0.6 * (modalState.touchShiftYPercent < 0 ? -1 : 1);
+        var _modalState$translate6, _modalState$touchShif2;
+
+        var translateY = (_modalState$translate6 = modalState.translateYCurrent) !== null && _modalState$translate6 !== void 0 ? _modalState$translate6 : 0;
+        var expectTranslateY = translateY / duration * 240 * 0.6 * (((_modalState$touchShif2 = modalState.touchShiftYPercent) !== null && _modalState$touchShif2 !== void 0 ? _modalState$touchShif2 : 0) < 0 ? -1 : 1);
         translateY = Math.max(0, translateY + expectTranslateY);
 
         if (translateY >= 30) {
@@ -525,12 +571,16 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
     key: "waitTransitionFinish",
     value: function waitTransitionFinish(modalState, eventHandler) {
       if (transitionEvent.supported) {
+        var _modalState$innerElem4;
+
         var onceHandler = function onceHandler() {
-          modalState === null || modalState === void 0 ? void 0 : modalState.innerElement.removeEventListener(transitionEvent.name, onceHandler);
+          var _modalState$innerElem3;
+
+          modalState === null || modalState === void 0 ? void 0 : (_modalState$innerElem3 = modalState.innerElement) === null || _modalState$innerElem3 === void 0 ? void 0 : _modalState$innerElem3.removeEventListener(transitionEvent.name, onceHandler);
           eventHandler();
         };
 
-        modalState === null || modalState === void 0 ? void 0 : modalState.innerElement.addEventListener(transitionEvent.name, onceHandler);
+        modalState === null || modalState === void 0 ? void 0 : (_modalState$innerElem4 = modalState.innerElement) === null || _modalState$innerElem4 === void 0 ? void 0 : _modalState$innerElem4.addEventListener(transitionEvent.name, onceHandler);
       } else {
         setTimeout(eventHandler, this.timeout);
       }
@@ -556,19 +606,25 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "setMaskOpacity",
     value: function setMaskOpacity(modalState) {
-      var _this6 = this;
+      var _this$props$history,
+          _this6 = this;
 
       var forceOpacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
 
-      if (forceOpacity === null && this.props.history[0] !== modalState.id) {
+      if (forceOpacity === null && ((_this$props$history = this.props.history) === null || _this$props$history === void 0 ? void 0 : _this$props$history[0]) !== modalState.id) {
         return;
       }
 
-      cancelAnimationFrame(this.maskAnimationFrame);
+      if (this.maskAnimationFrame) {
+        cancelAnimationFrame(this.maskAnimationFrame);
+      }
+
       this.maskAnimationFrame = requestAnimationFrame(function () {
         if (_this6.maskElementRef.current) {
-          var translateY = modalState.translateY,
-              translateYCurrent = modalState.translateYCurrent;
+          var _modalState$translate7 = modalState.translateY,
+              translateY = _modalState$translate7 === void 0 ? 0 : _modalState$translate7,
+              _modalState$translate8 = modalState.translateYCurrent,
+              translateYCurrent = _modalState$translate8 === void 0 ? 0 : _modalState$translate8;
           var opacity = forceOpacity === null ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0 : forceOpacity;
           _this6.maskElementRef.current.style.opacity = Math.max(0, Math.min(100, opacity)).toString();
         }
@@ -577,7 +633,8 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this7 = this;
+      var _this$props$configPro,
+          _this7 = this;
 
       var _this$props = this.props,
           activeModal = _this$props.activeModal,
@@ -597,7 +654,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         value: this.modalRootContext
       }, createScopedElement(Touch, {
         vkuiClass: classNames(getClassName("ModalRoot", this.props.platform), {
-          "ModalRoot--vkapps": this.props.configProvider.webviewType === WebviewType.VKAPPS,
+          "ModalRoot--vkapps": ((_this$props$configPro = this.props.configProvider) === null || _this$props$configPro === void 0 ? void 0 : _this$props$configPro.webviewType) === WebviewType.VKAPPS,
           "ModalRoot--touched": touchDown,
           "ModalRoot--switching": !!(enteringModal || exitingModal)
         }),
@@ -614,18 +671,24 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       }, this.getModals().map(function (Modal) {
         var modalId = getNavId(Modal.props, warn);
 
-        if (modalId !== activeModal && modalId !== exitingModal) {
+        var _modalState = _this7.getModalState(modalId);
+
+        if (modalId !== activeModal && modalId !== exitingModal || !_modalState) {
           return null;
         }
 
-        var modalState = _objectSpread({}, _this7.getModalState(modalId));
+        var modalState = _objectSpread({}, _modalState);
 
         var isPage = modalState.type === ModalType.PAGE;
         var key = "modal-".concat(modalId);
         return createScopedElement(FocusTrap, {
           key: key,
           getRootRef: function getRootRef(e) {
-            return _this7.getModalState(modalId).modalElement = e;
+            var modalState = _this7.getModalState(modalId);
+
+            if (modalState) {
+              modalState.modalElement = e;
+            }
           },
           onClose: _this7.props.closeActiveModal,
           timeout: _this7.timeout,
@@ -667,10 +730,12 @@ function initModal(modalState) {
 }
 
 function initPageModal(modalState) {
+  var _contentElement$clien;
+
   var contentElement = modalState.contentElement;
-  var contentHeight = contentElement.firstElementChild.offsetHeight;
+  var contentHeight = (contentElement === null || contentElement === void 0 ? void 0 : contentElement.firstElementChild).offsetHeight;
   var prevTranslateY = modalState.translateY;
-  modalState.expandable = contentHeight > contentElement.clientHeight || modalState.settlingHeight === 100;
+  modalState.expandable = contentHeight > ((_contentElement$clien = contentElement === null || contentElement === void 0 ? void 0 : contentElement.clientHeight) !== null && _contentElement$clien !== void 0 ? _contentElement$clien : 0) || modalState.settlingHeight === 100;
   var collapsed = false;
   var expanded = false;
   var translateYFrom;
@@ -680,7 +745,9 @@ function initPageModal(modalState) {
   var hiddenRange;
 
   if (modalState.expandable) {
-    translateYFrom = 100 - modalState.settlingHeight;
+    var _modalState$settlingH;
+
+    translateYFrom = 100 - ((_modalState$settlingH = modalState.settlingHeight) !== null && _modalState$settlingH !== void 0 ? _modalState$settlingH : 0);
     var shiftHalf = translateYFrom / 2;
     var visiblePart = 100 - translateYFrom;
     expandedRange = [0, shiftHalf];
@@ -690,9 +757,11 @@ function initPageModal(modalState) {
     expanded = translateYFrom <= 0;
     translateY = translateYFrom;
   } else {
-    var headerHeight = modalState.headerElement.offsetHeight;
+    var _modalState$headerEle2, _modalState$headerEle3, _modalState$innerElem5, _modalState$innerElem6, _modalState$innerElem7;
+
+    var headerHeight = (_modalState$headerEle2 = (_modalState$headerEle3 = modalState.headerElement) === null || _modalState$headerEle3 === void 0 ? void 0 : _modalState$headerEle3.offsetHeight) !== null && _modalState$headerEle2 !== void 0 ? _modalState$headerEle2 : 0;
     var height = contentHeight + headerHeight;
-    translateYFrom = 100 - height / modalState.innerElement.parentElement.offsetHeight * 100;
+    translateYFrom = 100 - height / ((_modalState$innerElem5 = (_modalState$innerElem6 = modalState.innerElement) === null || _modalState$innerElem6 === void 0 ? void 0 : (_modalState$innerElem7 = _modalState$innerElem6.parentElement) === null || _modalState$innerElem7 === void 0 ? void 0 : _modalState$innerElem7.offsetHeight) !== null && _modalState$innerElem5 !== void 0 ? _modalState$innerElem5 : 0) * 100;
     translateY = translateYFrom;
     expandedRange = [translateY, translateY + 25];
     collapsedRange = [translateY + 25, translateY + 25];
@@ -700,7 +769,7 @@ function initPageModal(modalState) {
   } // Если модалка может открываться на весь экран, и новый сдвиг больше предыдущего, то откроем её на весь экран
 
 
-  if (modalState.expandable && translateY > prevTranslateY || modalState.settlingHeight === 100) {
+  if (modalState.expandable && translateY > (prevTranslateY !== null && prevTranslateY !== void 0 ? prevTranslateY : 0) || modalState.settlingHeight === 100) {
     translateY = 0;
   }