@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/cjs/components/ModalCardBase/ModalCardBase.js

@@ -1,79 +1,77 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "ModalCardBase", {
+    enumerable: true,
+    get: function() {
+        return ModalCardBase;
+    }
 });
-exports.ModalCardBase = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
 var _useKeyboard = require("../../hooks/useKeyboard");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
-var _ModalDismissButton = require("../ModalDismissButton/ModalDismissButton");
-var _PanelHeaderButton = require("../PanelHeaderButton/PanelHeaderButton");
-var _Subhead = require("../Typography/Subhead/Subhead");
-var _Title = require("../Typography/Title/Title");
-var _excluded = ["getRootRef", "icon", "header", "subheader", "children", "actions", "onClose", "dismissLabel", "className", "style", "size"];
+var _modalDismissButton = require("../ModalDismissButton/ModalDismissButton");
+var _panelHeaderButton = require("../PanelHeaderButton/PanelHeaderButton");
+var _subhead = require("../Typography/Subhead/Subhead");
+var _title = require("../Typography/Title/Title");
 var platformClassNames = {
-  ios: "vkuiModalCardBase--ios",
-  android: "vkuiModalCardBase--android",
-  vkcom: "vkuiModalCardBase--vkcom"
+    ios: "vkuiModalCardBase--ios",
+    android: "vkuiModalCardBase--android",
+    vkcom: "vkuiModalCardBase--vkcom"
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/ModalCardBase
- */
-var ModalCardBase = function ModalCardBase(_ref) {
-  var getRootRef = _ref.getRootRef,
-    icon = _ref.icon,
-    header = _ref.header,
-    subheader = _ref.subheader,
-    children = _ref.children,
-    actions = _ref.actions,
-    onClose = _ref.onClose,
-    _ref$dismissLabel = _ref.dismissLabel,
-    dismissLabel = _ref$dismissLabel === void 0 ? 'Скрыть' : _ref$dismissLabel,
-    className = _ref.className,
-    style = _ref.style,
-    sizeProp = _ref.size,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var platform = (0, _usePlatform.usePlatform)();
-  var _useAdaptivityWithJSM = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)(),
-    isDesktop = _useAdaptivityWithJSM.isDesktop;
-  var isSoftwareKeyboardOpened = (0, _useKeyboard.useKeyboard)().isOpened;
-  var canShowCloseButtonIOS = platform === _platform.Platform.IOS && !isDesktop;
-  var size = isDesktop ? sizeProp : undefined;
-  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _vkjs.classNames)("vkuiModalCardBase", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isDesktop && "vkuiModalCardBase--desktop", className),
-    ref: getRootRef,
-    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), {}, {
-      maxWidth: size
-    })
-  }), /*#__PURE__*/React.createElement("div", {
-    className: (0, _vkjs.classNames)("vkuiModalCardBase__container", isSoftwareKeyboardOpened && "vkuiModalCardBase__container--softwareKeyboardOpened")
-  }, (0, _vkjs.hasReactNode)(icon) && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiModalCardBase__icon"
-  }, icon), (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/React.createElement(_Title.Title, {
-    level: "2",
-    weight: "2",
-    className: "vkuiModalCardBase__header"
-  }, header), (0, _vkjs.hasReactNode)(subheader) && /*#__PURE__*/React.createElement(_Subhead.Subhead, {
-    className: "vkuiModalCardBase__subheader"
-  }, subheader), children, (0, _vkjs.hasReactNode)(actions) && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiModalCardBase__actions"
-  }, actions), isDesktop && /*#__PURE__*/React.createElement(_ModalDismissButton.ModalDismissButton, {
-    onClick: onClose
-  }), canShowCloseButtonIOS && /*#__PURE__*/React.createElement(_PanelHeaderButton.PanelHeaderButton, {
-    "aria-label": dismissLabel,
-    className: "vkuiModalCardBase__dismiss",
-    onClick: onClose
-  }, /*#__PURE__*/React.createElement(_icons.Icon24Dismiss, null))));
+var ModalCardBase = function(_param) {
+    var getRootRef = _param.getRootRef, icon = _param.icon, header = _param.header, subheader = _param.subheader, children = _param.children, actions = _param.actions, onClose = _param.onClose, _param_dismissLabel = _param.dismissLabel, dismissLabel = _param_dismissLabel === void 0 ? "Скрыть" : _param_dismissLabel, className = _param.className, style = _param.style, sizeProp = _param.size, restProps = _objectWithoutProperties(_param, [
+        "getRootRef",
+        "icon",
+        "header",
+        "subheader",
+        "children",
+        "actions",
+        "onClose",
+        "dismissLabel",
+        "className",
+        "style",
+        "size"
+    ]);
+    var platform = (0, _usePlatform.usePlatform)();
+    var isDesktop = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)().isDesktop;
+    var isSoftwareKeyboardOpened = (0, _useKeyboard.useKeyboard)().isOpened;
+    var canShowCloseButtonIOS = platform === _platform.Platform.IOS && !isDesktop;
+    var size = isDesktop ? sizeProp : undefined;
+    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+        className: (0, _vkjs.classNames)("vkuiInternalModalCardBase", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isDesktop && "vkuiModalCardBase--desktop", className),
+        ref: getRootRef,
+        style: _objectSpreadProps(_objectSpread({}, style), {
+            maxWidth: size
+        })
+    }), /*#__PURE__*/ _react.createElement("div", {
+        className: (0, _vkjs.classNames)("vkuiModalCardBase__container", isSoftwareKeyboardOpened && "vkuiModalCardBase__container--softwareKeyboardOpened")
+    }, (0, _vkjs.hasReactNode)(icon) && /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiModalCardBase__icon"
+    }, icon), (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(_title.Title, {
+        level: "2",
+        weight: "2",
+        className: (0, _vkjs.classNames)("vkuiModalCardBase__header", "vkuiInternalModalCardBase__header")
+    }, header), (0, _vkjs.hasReactNode)(subheader) && /*#__PURE__*/ _react.createElement(_subhead.Subhead, {
+        className: (0, _vkjs.classNames)("vkuiModalCardBase__subheader", "vkuiInternalModalCardBase__subheader")
+    }, subheader), children, (0, _vkjs.hasReactNode)(actions) && /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiModalCardBase__actions"
+    }, actions), isDesktop && /*#__PURE__*/ _react.createElement(_modalDismissButton.ModalDismissButton, {
+        onClick: onClose
+    }), canShowCloseButtonIOS && /*#__PURE__*/ _react.createElement(_panelHeaderButton.PanelHeaderButton, {
+        "aria-label": dismissLabel,
+        className: "vkuiModalCardBase__dismiss",
+        onClick: onClose
+    }, /*#__PURE__*/ _react.createElement(_icons.Icon24Dismiss, null))));
 };
-exports.ModalCardBase = ModalCardBase;
+
 //# sourceMappingURL=ModalCardBase.js.map

package/dist/cjs/components/ModalCardBase/ModalCardBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalCardBase.js","names":["platformClassNames","ios","android","vkcom","ModalCardBase","getRootRef","icon","header","subheader","children","actions","onClose","dismissLabel","className","style","sizeProp","size","restProps","platform","usePlatform","useAdaptivityWithJSMediaQueries","isDesktop","isSoftwareKeyboardOpened","useKeyboard","isOpened","canShowCloseButtonIOS","Platform","IOS","undefined","classNames","hasOwnProperty","maxWidth","hasReactNode"],"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useKeyboard } from '../../hooks/useKeyboard';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './ModalCardBase.module.css';\n\nconst platformClassNames = {\n  ios: styles['ModalCardBase--ios'],\n  android: styles['ModalCardBase--android'],\n  vkcom: styles['ModalCardBase--vkcom'],\n};\n\nexport interface ModalCardBaseProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Иконка.\n   *\n   * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Заголовок карточки\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Подзаголовок\n   */\n  subheader?: React.ReactNode;\n\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `size=\"l\" mode=\"primary\" stretched`\n   * - `size=\"l\" mode=\"secondary\" stretched`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"s\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n\n  onClose?: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n  getRootRef,\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  dismissLabel = 'Скрыть',\n  className,\n  style,\n  size: sizeProp,\n  ...restProps\n}: ModalCardBaseProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n  const canShowCloseButtonIOS = platform === Platform.IOS && !isDesktop;\n\n  const size = isDesktop ? sizeProp : undefined;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['ModalCardBase'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isDesktop && styles['ModalCardBase--desktop'],\n        className,\n      )}\n      ref={getRootRef}\n      style={{\n        ...style,\n        maxWidth: size,\n      }}\n    >\n      <div\n        className={classNames(\n          styles['ModalCardBase__container'],\n          isSoftwareKeyboardOpened && styles['ModalCardBase__container--softwareKeyboardOpened'],\n        )}\n      >\n        {hasReactNode(icon) && <div className={styles['ModalCardBase__icon']}>{icon}</div>}\n        {hasReactNode(header) && (\n          <Title level=\"2\" weight=\"2\" className={styles['ModalCardBase__header']}>\n            {header}\n          </Title>\n        )}\n        {hasReactNode(subheader) && (\n          <Subhead className={styles['ModalCardBase__subheader']}>{subheader}</Subhead>\n        )}\n\n        {children}\n\n        {hasReactNode(actions) && <div className={styles['ModalCardBase__actions']}>{actions}</div>}\n\n        {isDesktop && <ModalDismissButton onClick={onClose} />}\n        {canShowCloseButtonIOS && (\n          <PanelHeaderButton\n            aria-label={dismissLabel}\n            className={styles['ModalCardBase__dismiss']}\n            onClick={onClose}\n          >\n            <Icon24Dismiss />\n          </PanelHeaderButton>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAkD;AAGlD,IAAMA,kBAAkB,GAAG;EACzBC,GAAG,0BAA8B;EACjCC,OAAO,8BAAkC;EACzCC,KAAK;AACP,CAAC;AAgDD;AACA;AACA;AACO,IAAMC,aAAa,GAAG,SAAhBA,aAAa,OAaA;EAAA,IAZxBC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IAAA,yBACPC,YAAY;IAAZA,YAAY,kCAAG,QAAQ;IACvBC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACCC,QAAQ,QAAdC,IAAI;IACDC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,4BAAsB,IAAAC,gEAA+B,GAAE;IAA/CC,SAAS,yBAATA,SAAS;EACjB,IAAMC,wBAAwB,GAAG,IAAAC,wBAAW,GAAE,CAACC,QAAQ;EAEvD,IAAMC,qBAAqB,GAAGP,QAAQ,KAAKQ,kBAAQ,CAACC,GAAG,IAAI,CAACN,SAAS;EAErE,IAAML,IAAI,GAAGK,SAAS,GAAGN,QAAQ,GAAGa,SAAS;EAE7C,oBACE,sDACMX,SAAS;IACb,SAAS,EAAE,IAAAY,gBAAU,uBAEnB7B,kBAAkB,CAAC8B,cAAc,CAACZ,QAAQ,CAAC,GACvClB,kBAAkB,CAACkB,QAAQ,CAAC,GAC5BlB,kBAAkB,CAACE,OAAO,EAC9BmB,SAAS,gCAAoC,EAC7CR,SAAS,CACT;IACF,GAAG,EAAER,UAAW;IAChB,KAAK,8DACAS,KAAK;MACRiB,QAAQ,EAAEf;IAAI;EACd,iBAEF;IACE,SAAS,EAAE,IAAAa,gBAAU,kCAEnBP,wBAAwB,0DAA8D;EACtF,GAED,IAAAU,kBAAY,EAAC1B,IAAI,CAAC,iBAAI;IAAK,SAAS;EAAgC,GAAEA,IAAI,CAAO,EACjF,IAAA0B,kBAAY,EAACzB,MAAM,CAAC,iBACnB,oBAAC,YAAK;IAAC,KAAK,EAAC,GAAG;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAAkC,GACpEA,MAAM,CAEV,EACA,IAAAyB,kBAAY,EAACxB,SAAS,CAAC,iBACtB,oBAAC,gBAAO;IAAC,SAAS;EAAqC,GAAEA,SAAS,CACnE,EAEAC,QAAQ,EAER,IAAAuB,kBAAY,EAACtB,OAAO,CAAC,iBAAI;IAAK,SAAS;EAAmC,GAAEA,OAAO,CAAO,EAE1FW,SAAS,iBAAI,oBAAC,sCAAkB;IAAC,OAAO,EAAEV;EAAQ,EAAG,EACrDc,qBAAqB,iBACpB,oBAAC,oCAAiB;IAChB,cAAYb,YAAa;IACzB,SAAS,8BAAmC;IAC5C,OAAO,EAAED;EAAQ,gBAEjB,oBAAC,oBAAa,OAAG,CAEpB,CACG,CACF;AAEV,CAAC;AAAC"}
+{"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useKeyboard } from '../../hooks/useKeyboard';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './ModalCardBase.module.css';\n\nconst platformClassNames = {\n  ios: styles['ModalCardBase--ios'],\n  android: styles['ModalCardBase--android'],\n  vkcom: styles['ModalCardBase--vkcom'],\n};\n\nexport interface ModalCardBaseProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Иконка.\n   *\n   * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Заголовок карточки\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Подзаголовок\n   */\n  subheader?: React.ReactNode;\n\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `size=\"l\" mode=\"primary\" stretched`\n   * - `size=\"l\" mode=\"secondary\" stretched`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"s\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n\n  onClose?: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n  getRootRef,\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  dismissLabel = 'Скрыть',\n  className,\n  style,\n  size: sizeProp,\n  ...restProps\n}: ModalCardBaseProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n  const canShowCloseButtonIOS = platform === Platform.IOS && !isDesktop;\n\n  const size = isDesktop ? sizeProp : undefined;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        'vkuiInternalModalCardBase',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isDesktop && styles['ModalCardBase--desktop'],\n        className,\n      )}\n      ref={getRootRef}\n      style={{\n        ...style,\n        maxWidth: size,\n      }}\n    >\n      <div\n        className={classNames(\n          styles['ModalCardBase__container'],\n          isSoftwareKeyboardOpened && styles['ModalCardBase__container--softwareKeyboardOpened'],\n        )}\n      >\n        {hasReactNode(icon) && <div className={styles['ModalCardBase__icon']}>{icon}</div>}\n        {hasReactNode(header) && (\n          <Title\n            level=\"2\"\n            weight=\"2\"\n            className={classNames(\n              styles['ModalCardBase__header'],\n              'vkuiInternalModalCardBase__header',\n            )}\n          >\n            {header}\n          </Title>\n        )}\n        {hasReactNode(subheader) && (\n          <Subhead\n            className={classNames(\n              styles['ModalCardBase__subheader'],\n              'vkuiInternalModalCardBase__subheader',\n            )}\n          >\n            {subheader}\n          </Subhead>\n        )}\n\n        {children}\n\n        {hasReactNode(actions) && <div className={styles['ModalCardBase__actions']}>{actions}</div>}\n\n        {isDesktop && <ModalDismissButton onClick={onClose} />}\n        {canShowCloseButtonIOS && (\n          <PanelHeaderButton\n            aria-label={dismissLabel}\n            className={styles['ModalCardBase__dismiss']}\n            onClick={onClose}\n          >\n            <Icon24Dismiss />\n          </PanelHeaderButton>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["ModalCardBase","platformClassNames","ios","android","vkcom","getRootRef","icon","header","subheader","children","actions","onClose","dismissLabel","className","style","size","sizeProp","restProps","platform","usePlatform","isDesktop","useAdaptivityWithJSMediaQueries","isSoftwareKeyboardOpened","useKeyboard","isOpened","canShowCloseButtonIOS","Platform","IOS","undefined","div","classNames","hasOwnProperty","ref","maxWidth","hasReactNode","Title","level","weight","Subhead","ModalDismissButton","onClick","PanelHeaderButton","aria-label","Icon24Dismiss"],"mappings":";;;;+BAqEaA;;;eAAAA;;;;;;;2DArEU;qBACO;oBACW;+CACO;2BACpB;2BACA;wBACH;kCAEU;iCACD;uBACV;qBACF;AAGtB,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAmDO,IAAMJ,gBAAgB,iBAaH;QAZxBK,oBAAAA,YACAC,cAAAA,MACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,iBAAAA,sCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACAC,eAAAA,OACAC,AAAMC,kBAAND,MACGE;QAXHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMG,WAAWC,IAAAA,wBAAW;IAC5B,IAAM,AAAEC,YAAcC,IAAAA,gEAA+B,IAA7CD;IACR,IAAME,2BAA2BC,IAAAA,wBAAW,IAAGC,QAAQ;IAEvD,IAAMC,wBAAwBP,aAAaQ,kBAAQ,CAACC,GAAG,IAAI,CAACP;IAE5D,IAAML,OAAOK,YAAYJ,WAAWY,SAAS;IAE7C,qBACE,qBAACC,4CACKZ;QACJJ,WAAWiB,IAAAA,gBAAU,EACnB,6BACA7B,mBAAmB8B,cAAc,CAACb,YAC9BjB,kBAAkB,CAACiB,SAAS,GAC5BjB,mBAAmBE,OAAO,EAC9BiB,2CACAP;QAEFmB,KAAK3B;QACLS,OAAO,qCACFA;YACHmB,UAAUlB;;sBAGZ,qBAACc;QACChB,WAAWiB,IAAAA,gBAAU,kCAEnBR;OAGDY,IAAAA,kBAAY,EAAC5B,uBAAS,qBAACuB;QAAIhB,SAAS;OAAkCP,OACtE4B,IAAAA,kBAAY,EAAC3B,yBACZ,qBAAC4B,YAAK;QACJC,OAAM;QACNC,QAAO;QACPxB,WAAWiB,IAAAA,gBAAU,+BAEnB;OAGDvB,SAGJ2B,IAAAA,kBAAY,EAAC1B,4BACZ,qBAAC8B,gBAAO;QACNzB,WAAWiB,IAAAA,gBAAU,kCAEnB;OAGDtB,YAIJC,UAEAyB,IAAAA,kBAAY,EAACxB,0BAAY,qBAACmB;QAAIhB,SAAS;OAAqCH,UAE5EU,2BAAa,qBAACmB,sCAAkB;QAACC,SAAS7B;QAC1Cc,uCACC,qBAACgB,oCAAiB;QAChBC,cAAY9B;QACZC,SAAS;QACT2B,SAAS7B;qBAET,qBAACgC,oBAAa;AAM1B"}

package/dist/cjs/components/ModalDismissButton/ModalDismissButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;
+export type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalDismissButton
  */

package/dist/cjs/components/ModalDismissButton/ModalDismissButton.js

@@ -1,33 +1,33 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "ModalDismissButton", {
+    enumerable: true,
+    get: function() {
+        return ModalDismissButton;
+    }
 });
-exports.ModalDismissButton = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
-var _Tappable = require("../Tappable/Tappable");
-var _excluded = ["aria-label", "className"];
-/**
- * @see https://vkcom.github.io/VKUI/#/ModalDismissButton
- */
-var ModalDismissButton = function ModalDismissButton(_ref) {
-  var _ref$ariaLabel = _ref['aria-label'],
-    ariaLabel = _ref$ariaLabel === void 0 ? 'Закрыть' : _ref$ariaLabel,
-    className = _ref.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({
-    className: (0, _vkjs.classNames)("vkuiModalDismissButton", className)
-  }, restProps, {
-    "aria-label": ariaLabel,
-    activeMode: "vkuiModalDismissButton--active",
-    hoverMode: "vkuiModalDismissButton--hover"
-  }), /*#__PURE__*/React.createElement(_icons.Icon20Cancel, null));
+var _tappable = require("../Tappable/Tappable");
+var ModalDismissButton = function(_param) {
+    var tmp = _param["aria-label"], ariaLabel = tmp === void 0 ? "Закрыть" : tmp, className = _param.className, restProps = _objectWithoutProperties(_param, [
+        "aria-label",
+        "className"
+    ]);
+    return /*#__PURE__*/ _react.createElement(_tappable.Tappable, _objectSpreadProps(_objectSpread({
+        className: (0, _vkjs.classNames)("vkuiModalDismissButton", className)
+    }, restProps), {
+        "aria-label": ariaLabel,
+        activeMode: "vkuiModalDismissButton--active",
+        hoverMode: "vkuiModalDismissButton--hover"
+    }), /*#__PURE__*/ _react.createElement(_icons.Icon20Cancel, null));
 };
-exports.ModalDismissButton = ModalDismissButton;
+
 //# sourceMappingURL=ModalDismissButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ModalDismissButton.js","names":["ModalDismissButton","ariaLabel","className","restProps","classNames"],"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './ModalDismissButton.module.css';\n\nexport type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalDismissButton\n */\nexport const ModalDismissButton = ({\n  'aria-label': ariaLabel = 'Закрыть',\n  className,\n  ...restProps\n}: ModalDismissButtonProps) => {\n  return (\n    <Tappable\n      className={classNames(styles['ModalDismissButton'], className)}\n      {...restProps}\n      aria-label={ariaLabel}\n      activeMode={styles['ModalDismissButton--active']}\n      hoverMode={styles['ModalDismissButton--hover']}\n    >\n      <Icon20Cancel />\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAAgD;AAKhD;AACA;AACA;AACO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,OAIA;EAAA,0BAH7B,YAAY;IAAEC,SAAS,+BAAG,SAAS;IACnCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,kBAAQ;IACP,SAAS,EAAE,IAAAC,gBAAU,4BAA+BF,SAAS;EAAE,GAC3DC,SAAS;IACb,cAAYF,SAAU;IACtB,UAAU,kCAAuC;IACjD,SAAS;EAAsC,iBAE/C,oBAAC,mBAAY,OAAG,CACP;AAEf,CAAC;AAAC"}
+{"version":3,"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './ModalDismissButton.module.css';\n\nexport type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalDismissButton\n */\nexport const ModalDismissButton = ({\n  'aria-label': ariaLabel = 'Закрыть',\n  className,\n  ...restProps\n}: ModalDismissButtonProps) => {\n  return (\n    <Tappable\n      className={classNames(styles['ModalDismissButton'], className)}\n      {...restProps}\n      aria-label={ariaLabel}\n      activeMode={styles['ModalDismissButton--active']}\n      hoverMode={styles['ModalDismissButton--hover']}\n    >\n      <Icon20Cancel />\n    </Tappable>\n  );\n};\n"],"names":["ModalDismissButton","ariaLabel","className","restProps","Tappable","classNames","aria-label","activeMode","hoverMode","Icon20Cancel"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;;2DAXU;qBACM;oBACF;wBACF;AAQlB,IAAMA,qBAAqB,iBAIH;QAHfC,aAAd,eAAcA,YAAAA,iBAAY,YAAZA,KACdC,mBAAAA,WACGC;QAFH;QACAD;;IAGA,qBACE,qBAACE,kBAAQ;QACPF,WAAWG,IAAAA,gBAAU,4BAA+BH;OAChDC;QACJG,cAAYL;QACZM,UAAU;QACVC,SAAS;sBAET,qBAACC,mBAAY;AAGnB"}

package/dist/cjs/components/ModalPage/ModalPage.js

@@ -1,14 +1,18 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "ModalPage", {
+    enumerable: true,
+    get: function() {
+        return ModalPage;
+    }
 });
-exports.ModalPage = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
 var _useOrientationChange = require("../../hooks/useOrientationChange");
@@ -18,78 +22,72 @@ var _getNavId = require("../../lib/getNavId");
 var _platform = require("../../lib/platform");
 var _utils = require("../../lib/utils");
 var _warnOnce = require("../../lib/warnOnce");
-var _ModalDismissButton = require("../ModalDismissButton/ModalDismissButton");
-var _ModalRootContext = require("../ModalRoot/ModalRootContext");
+var _modalDismissButton = require("../ModalDismissButton/ModalDismissButton");
+var _modalRootContext = require("../ModalRoot/ModalRootContext");
 var _types = require("../ModalRoot/types");
-var _excluded = ["children", "header", "size", "onOpen", "onOpened", "onClose", "onClosed", "settlingHeight", "dynamicContentHeight", "getModalContentRef", "nav", "id", "hideCloseButton", "className"];
 var sizeClassName = {
-  s: "vkuiModalPage--size-s",
-  m: "vkuiModalPage--size-m",
-  l: "vkuiModalPage--size-l"
+    s: "vkuiModalPage--size-s",
+    m: "vkuiModalPage--size-m",
+    l: "vkuiModalPage--size-l"
 };
-var warn = (0, _warnOnce.warnOnce)('ModalPage');
-
-/**
- * @see https://vkcom.github.io/VKUI/#/ModalPage
- */
-var ModalPage = function ModalPage(_ref) {
-  var children = _ref.children,
-    header = _ref.header,
-    _ref$size = _ref.size,
-    sizeProp = _ref$size === void 0 ? 's' : _ref$size,
-    onOpen = _ref.onOpen,
-    onOpened = _ref.onOpened,
-    onClose = _ref.onClose,
-    onClosed = _ref.onClosed,
-    settlingHeight = _ref.settlingHeight,
-    dynamicContentHeight = _ref.dynamicContentHeight,
-    getModalContentRef = _ref.getModalContentRef,
-    nav = _ref.nav,
-    id = _ref.id,
-    _ref$hideCloseButton = _ref.hideCloseButton,
-    hideCloseButton = _ref$hideCloseButton === void 0 ? false : _ref$hideCloseButton,
-    className = _ref.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _React$useContext = React.useContext(_ModalRootContext.ModalRootContext),
-    updateModalHeight = _React$useContext.updateModalHeight;
-  var platform = (0, _usePlatform.usePlatform)();
-  var orientation = (0, _useOrientationChange.useOrientationChange)();
-  var _useAdaptivityWithJSM = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)(),
-    sizeX = _useAdaptivityWithJSM.sizeX,
-    isDesktop = _useAdaptivityWithJSM.isDesktop;
-  React.useEffect(updateModalHeight, [children, orientation, updateModalHeight]);
-  var isCloseButtonShown = !hideCloseButton && isDesktop;
-  var size = isDesktop ? sizeProp : 's';
-  var modalContext = React.useContext(_ModalRootContext.ModalRootContext);
-  var _useModalRegistry = (0, _ModalRootContext.useModalRegistry)((0, _getNavId.getNavId)({
-      nav: nav,
-      id: id
-    }, warn), _types.ModalType.PAGE),
-    refs = _useModalRegistry.refs;
-  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    id: id,
-    className: (0, _vkjs.classNames)("vkuiModalPage", platform === _platform.Platform.IOS && "vkuiModalPage--ios", isDesktop && "vkuiModalPage--desktop", sizeX === _adaptivity.SizeType.REGULAR && "vkuiModalPage--sizeX-regular", typeof size === 'string' && sizeClassName[size], className)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiModalPage__in-wrap",
-    style: {
-      maxWidth: typeof size === 'number' ? size : undefined
-    },
-    ref: refs.innerElement
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiModalPage__in"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiModalPage__header",
-    ref: refs.headerElement
-  }, header), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiModalPage__content-wrap"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiModalPage__content",
-    ref: (0, _utils.multiRef)(refs.contentElement, getModalContentRef)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiModalPage__content-in"
-  }, children))), isCloseButtonShown && /*#__PURE__*/React.createElement(_ModalDismissButton.ModalDismissButton, {
-    onClick: onClose || modalContext.onClose
-  }))));
+var warn = (0, _warnOnce.warnOnce)("ModalPage");
+var ModalPage = function(_param) {
+    var children = _param.children, header = _param.header, tmp = _param.size, sizeProp = tmp === void 0 ? "s" : tmp, onOpen = _param.onOpen, onOpened = _param.onOpened, onClose = _param.onClose, onClosed = _param.onClosed, settlingHeight = _param.settlingHeight, dynamicContentHeight = _param.dynamicContentHeight, getModalContentRef = _param.getModalContentRef, nav = _param.nav, id = _param.id, _param_hideCloseButton = _param.hideCloseButton, hideCloseButton = _param_hideCloseButton === void 0 ? false : _param_hideCloseButton, className = _param.className, restProps = _objectWithoutProperties(_param, [
+        "children",
+        "header",
+        "size",
+        "onOpen",
+        "onOpened",
+        "onClose",
+        "onClosed",
+        "settlingHeight",
+        "dynamicContentHeight",
+        "getModalContentRef",
+        "nav",
+        "id",
+        "hideCloseButton",
+        "className"
+    ]);
+    var updateModalHeight = _react.useContext(_modalRootContext.ModalRootContext).updateModalHeight;
+    var platform = (0, _usePlatform.usePlatform)();
+    var orientation = (0, _useOrientationChange.useOrientationChange)();
+    var _useAdaptivityWithJSMediaQueries1 = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)(), sizeX = _useAdaptivityWithJSMediaQueries1.sizeX, isDesktop = _useAdaptivityWithJSMediaQueries1.isDesktop;
+    _react.useEffect(updateModalHeight, [
+        children,
+        orientation,
+        updateModalHeight
+    ]);
+    var isCloseButtonShown = !hideCloseButton && isDesktop;
+    var size = isDesktop ? sizeProp : "s";
+    var modalContext = _react.useContext(_modalRootContext.ModalRootContext);
+    var refs = (0, _modalRootContext.useModalRegistry)((0, _getNavId.getNavId)({
+        nav: nav,
+        id: id
+    }, warn), _types.ModalType.PAGE).refs;
+    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+        id: id,
+        className: (0, _vkjs.classNames)("vkuiModalPage", platform === _platform.Platform.IOS && "vkuiModalPage--ios", isDesktop && "vkuiModalPage--desktop", sizeX === _adaptivity.SizeType.REGULAR && "vkuiInternalModalPage--sizeX-regular", typeof size === "string" && sizeClassName[size], className)
+    }), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiModalPage__in-wrap",
+        style: {
+            maxWidth: typeof size === "number" ? size : undefined
+        },
+        ref: refs.innerElement
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiModalPage__in"
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiModalPage__header",
+        ref: refs.headerElement
+    }, header), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiModalPage__content-wrap"
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiModalPage__content",
+        ref: (0, _utils.multiRef)(refs.contentElement, getModalContentRef)
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiModalPage__content-in"
+    }, children))), isCloseButtonShown && /*#__PURE__*/ _react.createElement(_modalDismissButton.ModalDismissButton, {
+        onClick: onClose || modalContext.onClose
+    }))));
 };
-exports.ModalPage = ModalPage;
+
 //# sourceMappingURL=ModalPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ModalPage.js","names":["sizeClassName","s","m","l","warn","warnOnce","ModalPage","children","header","size","sizeProp","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","hideCloseButton","className","restProps","React","useContext","ModalRootContext","updateModalHeight","platform","usePlatform","orientation","useOrientationChange","useAdaptivityWithJSMediaQueries","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","useModalRegistry","getNavId","ModalType","PAGE","refs","classNames","Platform","IOS","SizeType","REGULAR","maxWidth","undefined","innerElement","headerElement","multiRef","contentElement"],"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 && styles['ModalPage--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"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA+C;AAG/C,IAAMA,aAAa,GAAG;EACpBC,CAAC,yBAA6B;EAC9BC,CAAC,yBAA6B;EAC9BC,CAAC;AACH,CAAC;AA0CD,IAAMC,IAAI,GAAG,IAAAC,kBAAQ,EAAC,WAAW,CAAC;;AAElC;AACA;AACA;AACO,IAAMC,SAAS,GAAG,SAAZA,SAAS,OAgBA;EAAA,IAfpBC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IAAA,iBACNC,IAAI;IAAEC,QAAQ,0BAAG,GAAG;IACpBC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,cAAc,QAAdA,cAAc;IACdC,oBAAoB,QAApBA,oBAAoB;IACpBC,kBAAkB,QAAlBA,kBAAkB;IAClBC,GAAG,QAAHA,GAAG;IACHC,EAAE,QAAFA,EAAE;IAAA,4BACFC,eAAe;IAAfA,eAAe,qCAAG,KAAK;IACvBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,wBAA8BC,KAAK,CAACC,UAAU,CAACC,kCAAgB,CAAC;IAAxDC,iBAAiB,qBAAjBA,iBAAiB;EAEzB,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,IAAMC,WAAW,GAAG,IAAAC,0CAAoB,GAAE;EAC1C,4BAA6B,IAAAC,gEAA+B,GAAE;IAAtDC,KAAK,yBAALA,KAAK;IAAEC,SAAS,yBAATA,SAAS;EAExBV,KAAK,CAACW,SAAS,CAACR,iBAAiB,EAAE,CAACnB,QAAQ,EAAEsB,WAAW,EAAEH,iBAAiB,CAAC,CAAC;EAE9E,IAAMS,kBAAkB,GAAG,CAACf,eAAe,IAAIa,SAAS;EACxD,IAAMxB,IAAI,GAAGwB,SAAS,GAAGvB,QAAQ,GAAG,GAAG;EAEvC,IAAM0B,YAAY,GAAGb,KAAK,CAACC,UAAU,CAACC,kCAAgB,CAAC;EACvD,wBAAiB,IAAAY,kCAAgB,EAAC,IAAAC,kBAAQ,EAAC;MAAEpB,GAAG,EAAHA,GAAG;MAAEC,EAAE,EAAFA;IAAG,CAAC,EAAEf,IAAI,CAAC,EAAEmC,gBAAS,CAACC,IAAI,CAAC;IAAtEC,IAAI,qBAAJA,IAAI;EAEZ,oBACE,sDACMnB,SAAS;IACb,EAAE,EAAEH,EAAG;IACP,SAAS,EAAE,IAAAuB,gBAAU,mBAEnBf,QAAQ,KAAKgB,kBAAQ,CAACC,GAAG,wBAA4B,EACrDX,SAAS,4BAAgC,EACzCD,KAAK,KAAKa,oBAAQ,CAACC,OAAO,kCAAsC,EAChE,OAAOrC,IAAI,KAAK,QAAQ,IAAIT,aAAa,CAACS,IAAI,CAAC,EAC/CY,SAAS;EACT,iBAEF;IACE,SAAS,0BAA+B;IACxC,KAAK,EAAE;MACL0B,QAAQ,EAAE,OAAOtC,IAAI,KAAK,QAAQ,GAAGA,IAAI,GAAGuC;IAC9C,CAAE;IACF,GAAG,EAAEP,IAAI,CAACQ;EAAa,gBAEvB;IAAK,SAAS;EAA0B,gBACtC;IAAK,SAAS,yBAA8B;IAAC,GAAG,EAAER,IAAI,CAACS;EAAc,GAClE1C,MAAM,CACH,eAEN;IAAK,SAAS;EAAoC,gBAChD;IACE,SAAS,0BAA+B;IACxC,GAAG,EAAE,IAAA2C,eAAQ,EAAiBV,IAAI,CAACW,cAAc,EAAEnC,kBAAkB;EAAE,gBAEvE;IAAK,SAAS;EAAkC,GAAEV,QAAQ,CAAO,CAC7D,CACF,EACL4B,kBAAkB,iBAAI,oBAAC,sCAAkB;IAAC,OAAO,EAAEtB,OAAO,IAAIuB,YAAY,CAACvB;EAAQ,EAAG,CACnF,CACF,CACF;AAEV,CAAC;AAAC"}
+{"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":["ModalPage","sizeClassName","s","m","l","warn","warnOnce","children","header","sizeProp","size","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","hideCloseButton","className","restProps","updateModalHeight","React","useContext","ModalRootContext","platform","usePlatform","orientation","useOrientationChange","useAdaptivityWithJSMediaQueries","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","refs","useModalRegistry","getNavId","ModalType","PAGE","div","classNames","Platform","IOS","SizeType","REGULAR","style","maxWidth","undefined","ref","innerElement","headerElement","multiRef","contentElement","ModalDismissButton","onClick"],"mappings":";;;;+BAkEaA;;;eAAAA;;;;;;;2DAlEU;oBACI;+CACqB;oCACX;2BACT;0BACH;wBACY;wBACZ;qBACA;wBACA;kCACU;gCACgB;qBACzB;AAG1B,IAAMC,gBAAgB;IACpBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AA0CA,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,YAAY,iBAgBH;QAfpBO,kBAAAA,UACAC,gBAAAA,QACMC,aAANC,MAAMD,WAAAA,iBAAW,MAAXA,KACNE,gBAAAA,QACAC,kBAAAA,UACAC,iBAAAA,SACAC,kBAAAA,UACAC,wBAAAA,gBACAC,8BAAAA,sBACAC,4BAAAA,oBACAC,aAAAA,KACAC,YAAAA,oCACAC,iBAAAA,sDAAkB,KAAK,2BACvBC,mBAAAA,WACGC;QAdHf;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,oBAAsBC,OAAMC,UAAU,CAACC,kCAAgB,EAAvDH;IAER,IAAMI,WAAWC,IAAAA,wBAAW;IAC5B,IAAMC,cAAcC,IAAAA,0CAAoB;IACxC,IAA6BC,oCAAAA,IAAAA,gEAA+B,KAApDC,QAAqBD,kCAArBC,OAAOC,YAAcF,kCAAdE;IAEfT,OAAMU,SAAS,CAACX,mBAAmB;QAAChB;QAAUsB;QAAaN;KAAkB;IAE7E,IAAMY,qBAAqB,CAACf,mBAAmBa;IAC/C,IAAMvB,OAAOuB,YAAYxB,WAAW,GAAG;IAEvC,IAAM2B,eAAeZ,OAAMC,UAAU,CAACC,kCAAgB;IACtD,IAAM,AAAEW,OAASC,IAAAA,kCAAgB,EAACC,IAAAA,kBAAQ,EAAC;QAAErB,KAAAA;QAAKC,IAAAA;IAAG,GAAGd,OAAOmC,gBAAS,CAACC,IAAI,EAArEJ;IAER,qBACE,qBAACK,4CACKpB;QACJH,IAAIA;QACJE,WAAWsB,IAAAA,gBAAU,mBAEnBhB,aAAaiB,kBAAQ,CAACC,GAAG,0BACzBZ,uCACAD,UAAUc,oBAAQ,CAACC,OAAO,IAAI,wCAC9B,OAAOrC,SAAS,YAAYT,aAAa,CAACS,KAAK,EAC/CW;sBAGF,qBAACqB;QACCrB,SAAS;QACT2B,OAAO;YACLC,UAAU,OAAOvC,SAAS,WAAWA,OAAOwC,SAAS;QACvD;QACAC,KAAKd,KAAKe,YAAY;qBAEtB,qBAACV;QAAIrB,SAAS;qBACZ,qBAACqB;QAAIrB,SAAS;QAA+B8B,KAAKd,KAAKgB,aAAa;OACjE7C,uBAGH,qBAACkC;QAAIrB,SAAS;qBACZ,qBAACqB;QACCrB,SAAS;QACT8B,KAAKG,IAAAA,eAAQ,EAAiBjB,KAAKkB,cAAc,EAAEtC;qBAEnD,qBAACyB;QAAIrB,SAAS;OAAoCd,aAGrD4B,oCAAsB,qBAACqB,sCAAkB;QAACC,SAAS5C,WAAWuB,aAAavB,OAAO;;AAK7F"}

package/dist/cjs/components/ModalPageHeader/ModalPageHeader.js

@@ -1,47 +1,46 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "ModalPageHeader", {
+    enumerable: true,
+    get: function() {
+        return ModalPageHeader;
+    }
 });
-exports.ModalPageHeader = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
-var _PanelHeader = require("../PanelHeader/PanelHeader");
-var _Separator = require("../Separator/Separator");
-var _excluded = ["children", "separator", "getRef", "className"];
-/**
- * @see https://vkcom.github.io/VKUI/#/ModalPageHeader
- */
-var ModalPageHeader = function ModalPageHeader(_ref) {
-  var children = _ref.children,
-    _ref$separator = _ref.separator,
-    separator = _ref$separator === void 0 ? true : _ref$separator,
-    getRef = _ref.getRef,
-    className = _ref.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var platform = (0, _usePlatform.usePlatform)();
-  var hasSeparator = separator && platform === _platform.Platform.VKCOM;
-  var _useAdaptivityWithJSM = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)(),
-    isDesktop = _useAdaptivityWithJSM.isDesktop;
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _vkjs.classNames)("vkuiModalPageHeader", platform !== _platform.Platform.VKCOM && "vkuiModalPageHeader--withGaps", isDesktop && "vkuiModalPageHeader--desktop"),
-    ref: getRef
-  }, /*#__PURE__*/React.createElement(_PanelHeader.PanelHeader, (0, _extends2.default)({
-    className: (0, _vkjs.classNames)("vkuiModalPageHeader__in", className)
-  }, restProps, {
-    fixed: false,
-    separator: false,
-    transparent: true
-  }), children), hasSeparator && /*#__PURE__*/React.createElement(_Separator.Separator, {
-    wide: true
-  }));
+var _panelHeader = require("../PanelHeader/PanelHeader");
+var _separator = require("../Separator/Separator");
+var ModalPageHeader = function(_param) {
+    var children = _param.children, _param_separator = _param.separator, separator = _param_separator === void 0 ? true : _param_separator, getRef = _param.getRef, className = _param.className, restProps = _objectWithoutProperties(_param, [
+        "children",
+        "separator",
+        "getRef",
+        "className"
+    ]);
+    var platform = (0, _usePlatform.usePlatform)();
+    var hasSeparator = separator && platform === _platform.Platform.VKCOM;
+    var isDesktop = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)().isDesktop;
+    return /*#__PURE__*/ _react.createElement("div", {
+        className: (0, _vkjs.classNames)("vkuiModalPageHeader", platform !== _platform.Platform.VKCOM && "vkuiModalPageHeader--withGaps", isDesktop && "vkuiModalPageHeader--desktop"),
+        ref: getRef
+    }, /*#__PURE__*/ _react.createElement(_panelHeader.PanelHeader, _objectSpreadProps(_objectSpread({
+        className: (0, _vkjs.classNames)("vkuiInternalModalPageHeader__in", className)
+    }, restProps), {
+        fixed: false,
+        separator: false,
+        transparent: true
+    }), children), hasSeparator && /*#__PURE__*/ _react.createElement(_separator.Separator, {
+        wide: true
+    }));
 };
-exports.ModalPageHeader = ModalPageHeader;
+
 //# sourceMappingURL=ModalPageHeader.js.map