@vkontakte/vkui 5.0.2 → 5.1.0

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

@@ -9,10 +9,9 @@ exports.ModalCardBase = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("../../lib/utils");
 var _Title = require("../Typography/Title/Title");
 var _Subhead = require("../Typography/Subhead/Subhead");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _getPlatformClassName = require("../../helpers/getPlatformClassName");
 var _usePlatform = require("../../hooks/usePlatform");
 var _PanelHeaderButton = require("../PanelHeaderButton/PanelHeaderButton");
@@ -34,7 +33,7 @@ var ModalCardBase = function ModalCardBase(_ref) {
     actions = _ref.actions,
     onClose = _ref.onClose,
     _ref$dismissLabel = _ref.dismissLabel,
-    dismissLabel = _ref$dismissLabel === void 0 ? "Скрыть" : _ref$dismissLabel,
+    dismissLabel = _ref$dismissLabel === void 0 ? 'Скрыть' : _ref$dismissLabel,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
@@ -43,19 +42,19 @@ var ModalCardBase = function ModalCardBase(_ref) {
   var isSoftwareKeyboardOpened = (0, _useKeyboard.useKeyboard)().isOpened;
   var canShowCloseButtonIOS = platform === _platform.Platform.IOS && !isDesktop;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiModalCardBase", (0, _getPlatformClassName.getPlatformClassName)("vkuiModalCardBase", platform), isDesktop && "vkuiModalCardBase--desktop", className),
+    className: (0, _vkjs.classNames)("vkuiModalCardBase", (0, _getPlatformClassName.getPlatformClassName)("vkuiModalCardBase", platform), isDesktop && "vkuiModalCardBase--desktop", className),
     ref: getRootRef
   }), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classNames.classNamesString)("vkuiModalCardBase__container", isSoftwareKeyboardOpened && "vkuiModalCardBase__container--softwareKeyboardOpened")
-  }, (0, _utils.hasReactNode)(icon) && /*#__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, _utils.hasReactNode)(header) && /*#__PURE__*/React.createElement(_Title.Title, {
+  }, icon), (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/React.createElement(_Title.Title, {
     level: "2",
     weight: "2",
     className: "vkuiModalCardBase__header"
-  }, header), (0, _utils.hasReactNode)(subheader) && /*#__PURE__*/React.createElement(_Subhead.Subhead, {
+  }, header), (0, _vkjs.hasReactNode)(subheader) && /*#__PURE__*/React.createElement(_Subhead.Subhead, {
     className: "vkuiModalCardBase__subheader"
-  }, subheader), children, (0, _utils.hasReactNode)(actions) && /*#__PURE__*/React.createElement("div", {
+  }, subheader), children, (0, _vkjs.hasReactNode)(actions) && /*#__PURE__*/React.createElement("div", {
     className: "vkuiModalCardBase__actions"
   }, actions), isDesktop && /*#__PURE__*/React.createElement(_ModalDismissButton.ModalDismissButton, {
     onClick: onClose

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

@@ -1 +1 @@
-{"version":3,"file":"ModalCardBase.js","names":["ModalCardBase","getRootRef","icon","header","subheader","children","actions","onClose","dismissLabel","className","restProps","platform","usePlatform","useAdaptivityWithJSMediaQueries","isDesktop","isSoftwareKeyboardOpened","useKeyboard","isOpened","canShowCloseButtonIOS","Platform","IOS","classNamesString","getPlatformClassName","hasReactNode"],"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { getPlatformClassName } from \"../../helpers/getPlatformClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasRootRef } from \"../../types\";\nimport { PanelHeaderButton } from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { Platform } from \"../../lib/platform\";\nimport { ModalDismissButton } from \"../ModalDismissButton/ModalDismissButton\";\nimport { Icon24Dismiss } from \"@vkontakte/icons\";\nimport { useKeyboard } from \"../../hooks/useKeyboard\";\nimport { useAdaptivityWithJSMediaQueries } from \"../../hooks/useAdaptivityWithJSMediaQueries\";\nimport styles from \"./ModalCardBase.module.css\";\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 * @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  ...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  return (\n    <div\n      {...restProps}\n      className={classNamesString(\n        styles[\"ModalCardBase\"],\n        getPlatformClassName(styles[\"ModalCardBase\"], platform),\n        isDesktop && styles[\"ModalCardBase--desktop\"],\n        className\n      )}\n      ref={getRootRef}\n    >\n      <div\n        className={classNamesString(\n          styles[\"ModalCardBase__container\"],\n          isSoftwareKeyboardOpened &&\n            styles[\"ModalCardBase__container--softwareKeyboardOpened\"]\n        )}\n      >\n        {hasReactNode(icon) && (\n          <div className={styles[\"ModalCardBase__icon\"]}>{icon}</div>\n        )}\n        {hasReactNode(header) && (\n          <Title\n            level=\"2\"\n            weight=\"2\"\n            className={styles[\"ModalCardBase__header\"]}\n          >\n            {header}\n          </Title>\n        )}\n        {hasReactNode(subheader) && (\n          <Subhead className={styles[\"ModalCardBase__subheader\"]}>\n            {subheader}\n          </Subhead>\n        )}\n\n        {children}\n\n        {hasReactNode(actions) && (\n          <div className={styles[\"ModalCardBase__actions\"]}>{actions}</div>\n        )}\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;AACA;AACA;AAA8F;AA4C9F;AACA;AACA;AACO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,OAWA;EAAA,IAVxBC,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;IACNC,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,oBACE,sDACMJ,SAAS;IACb,SAAS,EAAE,IAAAW,4BAAgB,uBAEzB,IAAAC,0CAAoB,uBAA0BX,QAAQ,CAAC,EACvDG,SAAS,gCAAoC,EAC7CL,SAAS,CACT;IACF,GAAG,EAAER;EAAW,iBAEhB;IACE,SAAS,EAAE,IAAAoB,4BAAgB,kCAEzBN,wBAAwB,0DACoC;EAC5D,GAED,IAAAQ,mBAAY,EAACrB,IAAI,CAAC,iBACjB;IAAK,SAAS;EAAgC,GAAEA,IAAI,CACrD,EACA,IAAAqB,mBAAY,EAACpB,MAAM,CAAC,iBACnB,oBAAC,YAAK;IACJ,KAAK,EAAC,GAAG;IACT,MAAM,EAAC,GAAG;IACV,SAAS;EAAkC,GAE1CA,MAAM,CAEV,EACA,IAAAoB,mBAAY,EAACnB,SAAS,CAAC,iBACtB,oBAAC,gBAAO;IAAC,SAAS;EAAqC,GACpDA,SAAS,CAEb,EAEAC,QAAQ,EAER,IAAAkB,mBAAY,EAACjB,OAAO,CAAC,iBACpB;IAAK,SAAS;EAAmC,GAAEA,OAAO,CAC3D,EAEAQ,SAAS,iBAAI,oBAAC,sCAAkB;IAAC,OAAO,EAAEP;EAAQ,EAAG,EACrDW,qBAAqB,iBACpB,oBAAC,oCAAiB;IAChB,cAAYV,YAAa;IACzB,SAAS,8BAAmC;IAC5C,OAAO,EAAED;EAAQ,gBAEjB,oBAAC,oBAAa,OAAG,CAEpB,CACG,CACF;AAEV,CAAC;AAAC"}
+{"version":3,"file":"ModalCardBase.js","names":["ModalCardBase","getRootRef","icon","header","subheader","children","actions","onClose","dismissLabel","className","restProps","platform","usePlatform","useAdaptivityWithJSMediaQueries","isDesktop","isSoftwareKeyboardOpened","useKeyboard","isOpened","canShowCloseButtonIOS","Platform","IOS","classNames","getPlatformClassName","hasReactNode"],"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Title } from '../Typography/Title/Title';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRootRef } from '../../types';\nimport { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';\nimport { Platform } from '../../lib/platform';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { useKeyboard } from '../../hooks/useKeyboard';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport styles from './ModalCardBase.module.css';\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 * @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  ...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  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['ModalCardBase'],\n        getPlatformClassName(styles['ModalCardBase'], platform),\n        isDesktop && styles['ModalCardBase--desktop'],\n        className,\n      )}\n      ref={getRootRef}\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;AAEA;AACA;AACA;AACA;AACA;AACA;AAA8F;AA4C9F;AACA;AACA;AACO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,OAWA;EAAA,IAVxBC,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;IACNC,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,oBACE,sDACMJ,SAAS;IACb,SAAS,EAAE,IAAAW,gBAAU,uBAEnB,IAAAC,0CAAoB,uBAA0BX,QAAQ,CAAC,EACvDG,SAAS,gCAAoC,EAC7CL,SAAS,CACT;IACF,GAAG,EAAER;EAAW,iBAEhB;IACE,SAAS,EAAE,IAAAoB,gBAAU,kCAEnBN,wBAAwB,0DAA8D;EACtF,GAED,IAAAQ,kBAAY,EAACrB,IAAI,CAAC,iBAAI;IAAK,SAAS;EAAgC,GAAEA,IAAI,CAAO,EACjF,IAAAqB,kBAAY,EAACpB,MAAM,CAAC,iBACnB,oBAAC,YAAK;IAAC,KAAK,EAAC,GAAG;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAAkC,GACpEA,MAAM,CAEV,EACA,IAAAoB,kBAAY,EAACnB,SAAS,CAAC,iBACtB,oBAAC,gBAAO;IAAC,SAAS;EAAqC,GAAEA,SAAS,CACnE,EAEAC,QAAQ,EAER,IAAAkB,kBAAY,EAACjB,OAAO,CAAC,iBAAI;IAAK,SAAS;EAAmC,GAAEA,OAAO,CAAO,EAE1FQ,SAAS,iBAAI,oBAAC,sCAAkB;IAAC,OAAO,EAAEP;EAAQ,EAAG,EACrDW,qBAAqB,iBACpB,oBAAC,oCAAiB;IAChB,cAAYV,YAAa;IACzB,SAAS,8BAAmC;IAC5C,OAAO,EAAED;EAAQ,gBAEjB,oBAAC,oBAAa,OAAG,CAEpB,CACG,CACF;AAEV,CAAC;AAAC"}

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

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

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

@@ -9,7 +9,7 @@ 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 _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _icons = require("@vkontakte/icons");
 var _Tappable = require("../Tappable/Tappable");
 var _excluded = ["aria-label", "className"];
@@ -17,12 +17,12 @@ 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,
+  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, _classNames.classNamesString)("vkuiModalDismissButton", className)
+    className: (0, _vkjs.classNames)("vkuiModalDismissButton", className)
   }, restProps, {
     "aria-label": ariaLabel,
     activeMode: "vkuiModalDismissButton--active",

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

@@ -1 +1 @@
-{"version":3,"file":"ModalDismissButton.js","names":["ModalDismissButton","ariaLabel","className","restProps","classNamesString"],"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Icon20Cancel } from \"@vkontakte/icons\";\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={classNamesString(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,4BAAgB,4BAA+BF,SAAS;EAAE,GACjEC,SAAS;IACb,cAAYF,SAAU;IACtB,UAAU,kCAAuC;IACjD,SAAS;EAAsC,iBAE/C,oBAAC,mBAAY,OAAG,CACP;AAEf,CAAC;AAAC"}
+{"version":3,"file":"ModalDismissButton.js","names":["ModalDismissButton","ariaLabel","className","restProps","classNames"],"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Icon20Cancel } from '@vkontakte/icons';\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"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { NavIdProps } from "../../lib/getNavId";
+import * as React from 'react';
+import { NavIdProps } from '../../lib/getNavId';
 export interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {
     /**
      * Шапка модальной страницы, `<ModalPageHeader />`
@@ -12,7 +12,7 @@ export interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, Na
      * > - Для `viewWidth < SMALL_TABLET_SIZE` будет всегда `"s"`
      * > - Для `platform === VKCOM` максимальная ширина зашита, её не изменить.
      */
-    size?: "s" | "m" | "l";
+    size?: 's' | 'm' | 'l';
     /**
      * Будет вызвано при начале открытия модалки.
      */

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

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _getSizeXClassName = require("../../helpers/getSizeXClassName");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _platform = require("../../lib/platform");
 var _ModalRootContext = require("../ModalRoot/ModalRootContext");
 var _usePlatform = require("../../hooks/usePlatform");
@@ -22,7 +22,7 @@ var _getNavId = require("../../lib/getNavId");
 var _warnOnce = require("../../lib/warnOnce");
 var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
 var _excluded = ["children", "header", "size", "onOpen", "onOpened", "onClose", "onClosed", "settlingHeight", "dynamicContentHeight", "getModalContentRef", "nav", "id", "hideCloseButton", "className"];
-var warn = (0, _warnOnce.warnOnce)("ModalPage");
+var warn = (0, _warnOnce.warnOnce)('ModalPage');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPage
@@ -31,7 +31,7 @@ var ModalPage = function ModalPage(_ref) {
   var children = _ref.children,
     header = _ref.header,
     _ref$size = _ref.size,
-    sizeProp = _ref$size === void 0 ? "s" : _ref$size,
+    sizeProp = _ref$size === void 0 ? 's' : _ref$size,
     onOpen = _ref.onOpen,
     onOpened = _ref.onOpened,
     onClose = _ref.onClose,
@@ -54,7 +54,7 @@ var ModalPage = function ModalPage(_ref) {
     isDesktop = _useAdaptivityWithJSM.isDesktop;
   React.useEffect(updateModalHeight, [children, orientation, updateModalHeight]);
   var isCloseButtonShown = !hideCloseButton && isDesktop;
-  var size = isDesktop ? sizeProp : "s";
+  var size = isDesktop ? sizeProp : 's';
   var modalContext = React.useContext(_ModalRootContext.ModalRootContext);
   var _useModalRegistry = (0, _ModalRootContext.useModalRegistry)((0, _getNavId.getNavId)({
       nav: nav,
@@ -63,7 +63,7 @@ var ModalPage = function ModalPage(_ref) {
     refs = _useModalRegistry.refs;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
     id: id,
-    className: (0, _classNames.classNamesString)("vkuiModalPage", platform === _platform.Platform.IOS && "vkuiModalPage--ios", platform === _platform.Platform.VKCOM && "vkuiModalPage--vkcom", (0, _getSizeXClassName.getSizeXClassName)("vkuiModalPage", sizeX), isDesktop && "vkuiModalPage--desktop", styles["ModalPage--size-".concat(size)], className)
+    className: (0, _vkjs.classNames)("vkuiModalPage", platform === _platform.Platform.IOS && "vkuiModalPage--ios", platform === _platform.Platform.VKCOM && "vkuiModalPage--vkcom", (0, _getSizeXClassName.getSizeXClassName)("vkuiModalPage", sizeX), isDesktop && "vkuiModalPage--desktop", styles["ModalPage--size-".concat(size)], className)
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiModalPage__in-wrap",
     ref: refs.innerElement

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

@@ -1 +1 @@
-{"version":3,"file":"ModalPage.js","names":["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","classNamesString","Platform","IOS","VKCOM","getSizeXClassName","styles","innerElement","headerElement","multiRef","contentElement"],"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport {\n  ModalRootContext,\n  useModalRegistry,\n} from \"../ModalRoot/ModalRootContext\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useOrientationChange } from \"../../hooks/useOrientationChange\";\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 { useAdaptivityWithJSMediaQueries } from \"../../hooks/useAdaptivityWithJSMediaQueries\";\nimport styles from \"./ModalPage.module.css\";\n\nexport interface ModalPageProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    NavIdProps {\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: React.ReactNode;\n  /**\n   * Задаёт контенту максимальную ширину.\n   *\n   * > ⚠️ **Заметки:**\n   * > - Для `viewWidth < SMALL_TABLET_SIZE` будет всегда `\"s\"`\n   * > - Для `platform === VKCOM` максимальная ширина зашита, её не изменить.\n   */\n  size?: \"s\" | \"m\" | \"l\";\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, [\n    children,\n    orientation,\n    updateModalHeight,\n  ]);\n\n  const isCloseButtonShown = !hideCloseButton && isDesktop;\n  const size = isDesktop ? sizeProp : \"s\";\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(\n    getNavId({ nav, id }, warn),\n    ModalType.PAGE\n  );\n\n  return (\n    <div\n      {...restProps}\n      id={id}\n      className={classNamesString(\n        styles[\"ModalPage\"],\n        platform === Platform.IOS && styles[\"ModalPage--ios\"],\n        platform === Platform.VKCOM && styles[\"ModalPage--vkcom\"],\n        getSizeXClassName(styles[\"ModalPage\"], sizeX),\n        isDesktop && styles[\"ModalPage--desktop\"],\n        styles[`ModalPage--size-${size}`],\n        className\n      )}\n    >\n      <div className={styles[\"ModalPage__in-wrap\"]} ref={refs.innerElement}>\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>(\n                refs.contentElement,\n                getModalContentRef\n              )}\n            >\n              <div className={styles[\"ModalPage__content-in\"]}>{children}</div>\n            </div>\n          </div>\n          {isCloseButtonShown && (\n            <ModalDismissButton onClick={onClose || modalContext.onClose} />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA8F;AAiD9F,IAAMA,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,CACjCnB,QAAQ,EACRsB,WAAW,EACXH,iBAAiB,CAClB,CAAC;EAEF,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,EAC/B,IAAAC,kBAAQ,EAAC;MAAEpB,GAAG,EAAHA,GAAG;MAAEC,EAAE,EAAFA;IAAG,CAAC,EAAEf,IAAI,CAAC,EAC3BmC,gBAAS,CAACC,IAAI,CACf;IAHOC,IAAI,qBAAJA,IAAI;EAKZ,oBACE,sDACMnB,SAAS;IACb,EAAE,EAAEH,EAAG;IACP,SAAS,EAAE,IAAAuB,4BAAgB,mBAEzBf,QAAQ,KAAKgB,kBAAQ,CAACC,GAAG,wBAA4B,EACrDjB,QAAQ,KAAKgB,kBAAQ,CAACE,KAAK,0BAA8B,EACzD,IAAAC,oCAAiB,mBAAsBd,KAAK,CAAC,EAC7CC,SAAS,4BAAgC,EACzCc,MAAM,2BAAoBtC,IAAI,EAAG,EACjCY,SAAS;EACT,iBAEF;IAAK,SAAS,0BAA+B;IAAC,GAAG,EAAEoB,IAAI,CAACO;EAAa,gBACnE;IAAK,SAAS;EAA0B,gBACtC;IAAK,SAAS,yBAA8B;IAAC,GAAG,EAAEP,IAAI,CAACQ;EAAc,GAClEzC,MAAM,CACH,eAEN;IAAK,SAAS;EAAoC,gBAChD;IACE,SAAS,0BAA+B;IACxC,GAAG,EAAE,IAAA0C,eAAQ,EACXT,IAAI,CAACU,cAAc,EACnBlC,kBAAkB;EAClB,gBAEF;IAAK,SAAS;EAAkC,GAAEV,QAAQ,CAAO,CAC7D,CACF,EACL4B,kBAAkB,iBACjB,oBAAC,sCAAkB;IAAC,OAAO,EAAEtB,OAAO,IAAIuB,YAAY,CAACvB;EAAQ,EAC9D,CACG,CACF,CACF;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"ModalPage.js","names":["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","VKCOM","getSizeXClassName","styles","innerElement","headerElement","multiRef","contentElement"],"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useOrientationChange } from '../../hooks/useOrientationChange';\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 { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport styles from './ModalPage.module.css';\n\nexport interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: React.ReactNode;\n  /**\n   * Задаёт контенту максимальную ширину.\n   *\n   * > ⚠️ **Заметки:**\n   * > - Для `viewWidth < SMALL_TABLET_SIZE` будет всегда `\"s\"`\n   * > - Для `platform === VKCOM` максимальная ширина зашита, её не изменить.\n   */\n  size?: 's' | 'm' | 'l';\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        platform === Platform.VKCOM && styles['ModalPage--vkcom'],\n        getSizeXClassName(styles['ModalPage'], sizeX),\n        isDesktop && styles['ModalPage--desktop'],\n        styles[`ModalPage--size-${size}`],\n        className,\n      )}\n    >\n      <div className={styles['ModalPage__in-wrap']} ref={refs.innerElement}>\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;AAA8F;AA+C9F,IAAMA,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,EACrDjB,QAAQ,KAAKgB,kBAAQ,CAACE,KAAK,0BAA8B,EACzD,IAAAC,oCAAiB,mBAAsBd,KAAK,CAAC,EAC7CC,SAAS,4BAAgC,EACzCc,MAAM,2BAAoBtC,IAAI,EAAG,EACjCY,SAAS;EACT,iBAEF;IAAK,SAAS,0BAA+B;IAAC,GAAG,EAAEoB,IAAI,CAACO;EAAa,gBACnE;IAAK,SAAS;EAA0B,gBACtC;IAAK,SAAS,yBAA8B;IAAC,GAAG,EAAEP,IAAI,CAACQ;EAAc,GAClEzC,MAAM,CACH,eAEN;IAAK,SAAS;EAAoC,gBAChD;IACE,SAAS,0BAA+B;IACxC,GAAG,EAAE,IAAA0C,eAAQ,EAAiBT,IAAI,CAACU,cAAc,EAAElC,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;AAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { HasRef } from "../../types";
-import { PanelHeaderProps } from "../PanelHeader/PanelHeader";
-export interface ModalPageHeaderProps extends React.HTMLAttributes<HTMLDivElement>, Omit<PanelHeaderProps, "fixed" | "shadow">, HasRef<HTMLDivElement> {
+import * as React from 'react';
+import { HasRef } from '../../types';
+import { PanelHeaderProps } from '../PanelHeader/PanelHeader';
+export interface ModalPageHeaderProps extends React.HTMLAttributes<HTMLDivElement>, Omit<PanelHeaderProps, 'fixed' | 'shadow'>, HasRef<HTMLDivElement> {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPageHeader

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

@@ -14,7 +14,7 @@ var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSM
 var _platform = require("../../lib/platform");
 var _Separator = require("../Separator/Separator");
 var _PanelHeader = require("../PanelHeader/PanelHeader");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _getPlatformClassName = require("../../helpers/getPlatformClassName");
 var _excluded = ["children", "separator", "getRef", "className"];
 /**
@@ -32,10 +32,10 @@ var ModalPageHeader = function ModalPageHeader(_ref) {
   var _useAdaptivityWithJSM = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)(),
     isDesktop = _useAdaptivityWithJSM.isDesktop;
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classNames.classNamesString)("vkuiModalPageHeader", (0, _getPlatformClassName.getPlatformClassName)("vkuiModalPageHeader", platform), platform !== _platform.Platform.VKCOM && "vkuiModalPageHeader--withGaps", isDesktop && "vkuiModalPageHeader--desktop"),
+    className: (0, _vkjs.classNames)("vkuiModalPageHeader", (0, _getPlatformClassName.getPlatformClassName)("vkuiModalPageHeader", platform), platform !== _platform.Platform.VKCOM && "vkuiModalPageHeader--withGaps", isDesktop && "vkuiModalPageHeader--desktop"),
     ref: getRef
   }, /*#__PURE__*/React.createElement(_PanelHeader.PanelHeader, (0, _extends2.default)({
-    className: (0, _classNames.classNamesString)("vkuiModalPageHeader__in", className)
+    className: (0, _vkjs.classNames)("vkuiModalPageHeader__in", className)
   }, restProps, {
     fixed: false,
     separator: false,

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

@@ -1 +1 @@
-{"version":3,"file":"ModalPageHeader.js","names":["ModalPageHeader","children","separator","getRef","className","restProps","platform","usePlatform","hasSeparator","Platform","VKCOM","useAdaptivityWithJSMediaQueries","isDesktop","classNamesString","getPlatformClassName"],"sources":["../../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivityWithJSMediaQueries } from \"../../hooks/useAdaptivityWithJSMediaQueries\";\nimport { HasRef } from \"../../types\";\nimport { Platform } from \"../../lib/platform\";\nimport { Separator } from \"../Separator/Separator\";\nimport { PanelHeader, PanelHeaderProps } from \"../PanelHeader/PanelHeader\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { getPlatformClassName } from \"../../helpers/getPlatformClassName\";\nimport styles from \"./ModalPageHeader.module.css\";\n\nexport interface ModalPageHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Omit<PanelHeaderProps, \"fixed\" | \"shadow\">,\n    HasRef<HTMLDivElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPageHeader\n */\nexport const ModalPageHeader = ({\n  children,\n  separator = true,\n  getRef,\n  className,\n  ...restProps\n}: ModalPageHeaderProps) => {\n  const platform = usePlatform();\n  const hasSeparator = separator && platform === Platform.VKCOM;\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  return (\n    <div\n      className={classNamesString(\n        styles[\"ModalPageHeader\"],\n        getPlatformClassName(styles[\"ModalPageHeader\"], platform),\n        platform !== Platform.VKCOM && styles[\"ModalPageHeader--withGaps\"],\n        isDesktop && styles[\"ModalPageHeader--desktop\"]\n      )}\n      ref={getRef}\n    >\n      <PanelHeader\n        className={classNamesString(styles[\"ModalPageHeader__in\"], className)}\n        {...restProps}\n        fixed={false}\n        separator={false}\n        transparent\n      >\n        {children}\n      </PanelHeader>\n      {hasSeparator && <Separator wide />}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAA0E;AAQ1E;AACA;AACA;AACO,IAAMA,eAAe,GAAG,SAAlBA,eAAe,OAMA;EAAA,IAL1BC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAChBC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,IAAMC,YAAY,GAAGN,SAAS,IAAII,QAAQ,KAAKG,kBAAQ,CAACC,KAAK;EAC7D,4BAAsB,IAAAC,gEAA+B,GAAE;IAA/CC,SAAS,yBAATA,SAAS;EAEjB,oBACE;IACE,SAAS,EAAE,IAAAC,4BAAgB,yBAEzB,IAAAC,0CAAoB,yBAA4BR,QAAQ,CAAC,EACzDA,QAAQ,KAAKG,kBAAQ,CAACC,KAAK,mCAAuC,EAClEE,SAAS,kCAAsC,CAC/C;IACF,GAAG,EAAET;EAAO,gBAEZ,oBAAC,wBAAW;IACV,SAAS,EAAE,IAAAU,4BAAgB,6BAAgCT,SAAS;EAAE,GAClEC,SAAS;IACb,KAAK,EAAE,KAAM;IACb,SAAS,EAAE,KAAM;IACjB,WAAW;EAAA,IAEVJ,QAAQ,CACG,EACbO,YAAY,iBAAI,oBAAC,oBAAS;IAAC,IAAI;EAAA,EAAG,CAC/B;AAEV,CAAC;AAAC"}
+{"version":3,"file":"ModalPageHeader.js","names":["ModalPageHeader","children","separator","getRef","className","restProps","platform","usePlatform","hasSeparator","Platform","VKCOM","useAdaptivityWithJSMediaQueries","isDesktop","classNames","getPlatformClassName"],"sources":["../../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { HasRef } from '../../types';\nimport { Platform } from '../../lib/platform';\nimport { Separator } from '../Separator/Separator';\nimport { PanelHeader, PanelHeaderProps } from '../PanelHeader/PanelHeader';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport styles from './ModalPageHeader.module.css';\n\nexport interface ModalPageHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Omit<PanelHeaderProps, 'fixed' | 'shadow'>,\n    HasRef<HTMLDivElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPageHeader\n */\nexport const ModalPageHeader = ({\n  children,\n  separator = true,\n  getRef,\n  className,\n  ...restProps\n}: ModalPageHeaderProps) => {\n  const platform = usePlatform();\n  const hasSeparator = separator && platform === Platform.VKCOM;\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  return (\n    <div\n      className={classNames(\n        styles['ModalPageHeader'],\n        getPlatformClassName(styles['ModalPageHeader'], platform),\n        platform !== Platform.VKCOM && styles['ModalPageHeader--withGaps'],\n        isDesktop && styles['ModalPageHeader--desktop'],\n      )}\n      ref={getRef}\n    >\n      <PanelHeader\n        className={classNames(styles['ModalPageHeader__in'], className)}\n        {...restProps}\n        fixed={false}\n        separator={false}\n        transparent\n      >\n        {children}\n      </PanelHeader>\n      {hasSeparator && <Separator wide />}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAA0E;AAQ1E;AACA;AACA;AACO,IAAMA,eAAe,GAAG,SAAlBA,eAAe,OAMA;EAAA,IAL1BC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAChBC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,IAAMC,YAAY,GAAGN,SAAS,IAAII,QAAQ,KAAKG,kBAAQ,CAACC,KAAK;EAC7D,4BAAsB,IAAAC,gEAA+B,GAAE;IAA/CC,SAAS,yBAATA,SAAS;EAEjB,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,yBAEnB,IAAAC,0CAAoB,yBAA4BR,QAAQ,CAAC,EACzDA,QAAQ,KAAKG,kBAAQ,CAACC,KAAK,mCAAuC,EAClEE,SAAS,kCAAsC,CAC/C;IACF,GAAG,EAAET;EAAO,gBAEZ,oBAAC,wBAAW;IACV,SAAS,EAAE,IAAAU,gBAAU,6BAAgCT,SAAS;EAAE,GAC5DC,SAAS;IACb,KAAK,EAAE,KAAM;IACb,SAAS,EAAE,KAAM;IACjB,WAAW;EAAA,IAEVJ,QAAQ,CACG,EACbO,YAAY,iBAAI,oBAAC,oBAAS;IAAC,IAAI;EAAA,EAAG,CAC/B;AAEV,CAAC;AAAC"}

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

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { HasPlatform } from "../../types";
-import { ConfigProviderContextInterface } from "../ConfigProvider/ConfigProviderContext";
+import * as React from 'react';
+import { HasPlatform } from '../../types';
+import { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
 export interface ModalRootProps extends HasPlatform {
     activeModal?: string | null;
     /**

package/dist/cjs/components/ModalRoot/ModalRoot.js

@@ -17,7 +17,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var React = _interopRequireWildcard(require("react"));
 var _Touch = require("../Touch/Touch");
 var _TouchContext = _interopRequireDefault(require("../Touch/TouchContext"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _styles = require("../../lib/styles");
 var _touch = require("../../lib/touch");
 var _platform = require("../../lib/platform");
@@ -35,8 +35,8 @@ var _FocusTrap = require("../FocusTrap/FocusTrap");
 var _useModalManager = require("./useModalManager");
 var _math = require("../../helpers/math");
 var _excluded = ["id"];
-var warn = (0, _warnOnce.warnOnce)("ModalRoot");
-var IS_DEV = process.env.NODE_ENV === "development";
+var warn = (0, _warnOnce.warnOnce)('ModalRoot');
+var IS_DEV = process.env.NODE_ENV === 'development';
 function numberInRange(number, range) {
   if (!range) {
     return false;
@@ -191,14 +191,14 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       // Отслеживаем изменение размеров viewport (Необходимо для iOS)
       if (this.props.platform === _platform.Platform.IOS) {
         var _this$window;
-        (_this$window = this.window) === null || _this$window === void 0 ? void 0 : _this$window.addEventListener("resize", this.updateModalTranslate, false);
+        (_this$window = this.window) === null || _this$window === void 0 ? void 0 : _this$window.addEventListener('resize', this.updateModalTranslate, false);
       }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.toggleDocumentScrolling(true);
-      this.window.removeEventListener("resize", this.updateModalTranslate, false);
+      this.window.removeEventListener('resize', this.updateModalTranslate, false);
     }
   }, {
     key: "componentDidUpdate",
@@ -216,12 +216,12 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         this.props.onEnter();
         this.waitTransitionFinish(enteringState, function () {
           if (enteringState !== null && enteringState !== void 0 && enteringState.innerElement) {
-            enteringState.innerElement.style.transitionDelay = "";
+            enteringState.innerElement.style.transitionDelay = '';
           }
           _this2.props.onEntered(enteringModal);
         });
         if (enteringState !== null && enteringState !== void 0 && enteringState.innerElement) {
-          enteringState.innerElement.style.transitionDelay = this.props.delayEnter ? "".concat(this.timeout, "ms") : "";
+          enteringState.innerElement.style.transitionDelay = this.props.delayEnter ? "".concat(this.timeout, "ms") : '';
           this.animateTranslate(enteringState, enteringState.translateY);
         }
       }
@@ -249,12 +249,12 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         // Здесь нужен последний аргумент с такими же параметрами, потому что
         // некоторые браузеры на странных вендорах типа Meizu не удаляют обработчик.
         // https://github.com/VKCOM/VKUI/issues/444
-        this.window.removeEventListener("touchmove", this.preventTouch, {
+        this.window.removeEventListener('touchmove', this.preventTouch, {
           // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions нет поля passive
           passive: false
         });
       } else {
-        this.window.addEventListener("touchmove", this.preventTouch, {
+        this.window.addEventListener('touchmove', this.preventTouch, {
           passive: false
         });
       }
@@ -293,7 +293,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       });
       var prevModalState = this.getModalState(id);
       if (!prevModalState) {
-        id && warn("closeActiveModal: \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E (\u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430) ".concat(id, " \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442"), "error");
+        id && warn("closeActiveModal: \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E (\u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430) ".concat(id, " \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442"), 'error');
         return;
       }
       var nextModalState = this.getModalState(this.props.activeModal);
@@ -551,7 +551,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(_ModalRootContext.ModalRootContext.Provider, {
         value: this.modalRootContext
       }, /*#__PURE__*/React.createElement(_Touch.Touch, {
-        className: (0, _classNames.classNamesString)("vkuiModalRoot", ((_this$props$configPro = this.props.configProvider) === null || _this$props$configPro === void 0 ? void 0 : _this$props$configPro.webviewType) === _ConfigProviderContext.WebviewType.VKAPPS && "vkuiModalRoot--vkapps", touchDown && "vkuiModalRoot--touched", !!(enteringModal || exitingModal) && "vkuiModalRoot--switching"),
+        className: (0, _vkjs.classNames)("vkuiModalRoot", ((_this$props$configPro = this.props.configProvider) === null || _this$props$configPro === void 0 ? void 0 : _this$props$configPro.webviewType) === _ConfigProviderContext.WebviewType.VKAPPS && "vkuiModalRoot--vkapps", touchDown && "vkuiModalRoot--touched", !!(enteringModal || exitingModal) && "vkuiModalRoot--switching"),
         onMove: this.onTouchMove,
         onEnd: this.onTouchEnd,
         onScroll: this.onScroll
@@ -581,7 +581,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
           },
           onClose: _this7.props.onExit,
           timeout: _this7.timeout,
-          className: (0, _classNames.classNamesString)("vkuiModalRoot__modal", modalId === activeModal && "vkuiModalRoot__modal--active", modalId === exitingModal && "vkuiModalRoot__modal--prev", (exitingModal && modalId === activeModal || modalId === enteringModal) && "vkuiModalRoot__modal--next", dragging && "vkuiModalRoot__modal--dragging", isPage && modalState.expandable && "vkuiModalRoot__modal--expandable", isPage && modalState.expanded && "vkuiModalRoot__modal--expanded", isPage && modalState.collapsed && "vkuiModalRoot__modal--collapsed"),
+          className: (0, _vkjs.classNames)("vkuiModalRoot__modal", dragging && "vkuiModalRoot__modal--dragging", isPage && modalState.expandable && "vkuiModalRoot__modal--expandable", isPage && modalState.collapsed && "vkuiModalRoot__modal--collapsed"),
           restoreFocus: false
         }, Modal);
       })))));
@@ -589,7 +589,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }]);
   return ModalRootTouchComponent;
 }(React.Component);
-var ModalRootTouch = (0, _withContext.withContext)((0, _withPlatform.withPlatform)((0, _dom.withDOM)((0, _useModalManager.withModalManager)(initModal)(ModalRootTouchComponent))), _ConfigProviderContext.ConfigProviderContext, "configProvider");
+var ModalRootTouch = (0, _withContext.withContext)((0, _withPlatform.withPlatform)((0, _dom.withDOM)((0, _useModalManager.withModalManager)(initModal)(ModalRootTouchComponent))), _ConfigProviderContext.ConfigProviderContext, 'configProvider');
 
 /**
  * Инициализирует модалку перед анимацией открытия
@@ -603,7 +603,7 @@ function initModal(modalState) {
     case _types.ModalType.CARD:
       return initCardModal(modalState);
     default:
-      IS_DEV && warn("initActiveModal: modalState.type=\"".concat(modalState.type, "\" \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F"), "error");
+      IS_DEV && warn("initActiveModal: modalState.type=\"".concat(modalState.type, "\" \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F"), 'error');
   }
 }
 function initPageModal(modalState) {