@vkontakte/vkui 4.28.1 → 4.30.0

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

@@ -28,5 +28,9 @@ export interface ModalCardBaseProps extends React.HTMLAttributes<HTMLDivElement>
      */
     actionsLayout?: "vertical" | "horizontal";
     onClose?: VoidFunction;
+    /**
+     * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.
+     */
+    dismissLabel?: string;
 }
-export declare const ModalCardBase: React.FC<Pick<ModalCardBaseProps & AdaptivityContextInterface, "hidden" | "dir" | "header" | "slot" | "style" | "title" | "color" | "icon" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "getRootRef" | "onClose" | "actionsLayout" | "actions" | "subheader"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const ModalCardBase: React.FC<Pick<ModalCardBaseProps & AdaptivityContextInterface, "hidden" | "dir" | "header" | "slot" | "style" | "title" | "color" | "icon" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "getRootRef" | "onClose" | "actionsLayout" | "actions" | "subheader" | "dismissLabel"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;

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

@@ -15,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _utils = require("../../lib/utils");
 
-var _Title = _interopRequireDefault(require("../Typography/Title/Title"));
+var _Title = require("../Typography/Title/Title");
 
 var _Headline = _interopRequireDefault(require("../Typography/Headline/Headline"));
 
@@ -37,7 +37,7 @@ var _icons = require("@vkontakte/icons");
 
 var _useKeyboard = require("../../hooks/useKeyboard");
 
-var _excluded = ["getRootRef", "icon", "header", "subheader", "children", "actions", "actionsLayout", "viewWidth", "hasMouse", "viewHeight", "onClose"];
+var _excluded = ["getRootRef", "icon", "header", "subheader", "children", "actions", "actionsLayout", "viewWidth", "hasMouse", "viewHeight", "onClose", "dismissLabel"];
 var ModalCardBase = (0, _withAdaptivity.withAdaptivity)(function (_ref) {
   var getRootRef = _ref.getRootRef,
       icon = _ref.icon,
@@ -50,6 +50,8 @@ var ModalCardBase = (0, _withAdaptivity.withAdaptivity)(function (_ref) {
       hasMouse = _ref.hasMouse,
       viewHeight = _ref.viewHeight,
       onClose = _ref.onClose,
+      _ref$dismissLabel = _ref.dismissLabel,
+      dismissLabel = _ref$dismissLabel === void 0 ? "Скрыть" : _ref$dismissLabel,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
   var isDesktop = viewWidth >= _withAdaptivity.ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= _withAdaptivity.ViewHeight.MEDIUM);
@@ -57,17 +59,19 @@ var ModalCardBase = (0, _withAdaptivity.withAdaptivity)(function (_ref) {
   var canShowCloseBtn = viewWidth >= _withAdaptivity.ViewWidth.SMALL_TABLET;
   var canShowCloseBtnIos = platform === _platform.IOS && !canShowCloseBtn;
   return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
+    // eslint-disable-next-line vkui/no-object-expression-in-arguments
     vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("ModalCardBase", platform), {
       "ModalCardBase--desktop": isDesktop
     }),
     ref: getRootRef
   }), (0, _jsxRuntime.createScopedElement)("div", {
+    // eslint-disable-next-line vkui/no-object-expression-in-arguments
     vkuiClass: (0, _classNames.classNames)("ModalCardBase__container", {
       "ModalCardBase__container--softwareKeyboardOpened": isSoftwareKeyboardOpened
     })
   }, (0, _utils.hasReactNode)(icon) && (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "ModalCardBase__icon"
-  }, icon), (0, _utils.hasReactNode)(header) && (0, _jsxRuntime.createScopedElement)(_Title.default, {
+  }, icon), (0, _utils.hasReactNode)(header) && (0, _jsxRuntime.createScopedElement)(_Title.Title, {
     level: "2",
     weight: platform === _platform.ANDROID ? "2" : "1",
     vkuiClass: "ModalCardBase__header"
@@ -75,13 +79,15 @@ var ModalCardBase = (0, _withAdaptivity.withAdaptivity)(function (_ref) {
     weight: "regular",
     vkuiClass: "ModalCardBase__subheader"
   }, subheader), children, (0, _utils.hasReactNode)(actions) && (0, _jsxRuntime.createScopedElement)("div", {
+    // eslint-disable-next-line vkui/no-object-expression-in-arguments
     vkuiClass: (0, _classNames.classNames)("ModalCardBase__actions", {
       "ModalCardBase__actions--v": actionsLayout === "vertical"
     })
   }, actions), canShowCloseBtn && (0, _jsxRuntime.createScopedElement)(_ModalDismissButton.default, {
     onClick: onClose
   }), canShowCloseBtnIos && (0, _jsxRuntime.createScopedElement)(_PanelHeaderButton.PanelHeaderButton, {
-    vkuiClass: "ModalCard__dismiss",
+    "aria-label": dismissLabel,
+    vkuiClass: "ModalCardBase__dismiss",
     onClick: onClose
   }, (0, _jsxRuntime.createScopedElement)(_icons.Icon24Dismiss, null))));
 }, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"names":["ModalCardBase","getRootRef","icon","header","subheader","children","actions","actionsLayout","viewWidth","hasMouse","viewHeight","onClose","restProps","platform","isDesktop","ViewWidth","SMALL_TABLET","ViewHeight","MEDIUM","isSoftwareKeyboardOpened","isOpened","canShowCloseBtn","canShowCloseBtnIos","IOS","ANDROID"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;;AAsCO,IAAMA,aAAa,GAAG,oCAG3B,gBAaM;AAAA,MAZJC,UAYI,QAZJA,UAYI;AAAA,MAXJC,IAWI,QAXJA,IAWI;AAAA,MAVJC,MAUI,QAVJA,MAUI;AAAA,MATJC,SASI,QATJA,SASI;AAAA,MARJC,QAQI,QARJA,QAQI;AAAA,MAPJC,OAOI,QAPJA,OAOI;AAAA,MANJC,aAMI,QANJA,aAMI;AAAA,MALJC,SAKI,QALJA,SAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,UAGI,QAHJA,UAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADDC,SACC;AACJ,MAAMC,QAAQ,GAAG,+BAAjB;AACA,MAAMC,SAAS,GACbN,SAAS,IAAIO,0BAAUC,YAAvB,KACCP,QAAQ,IAAIC,UAAU,IAAIO,2BAAWC,MADtC,CADF;AAGA,MAAMC,wBAAwB,GAAG,gCAAcC,QAA/C;AAEA,MAAMC,eAAe,GAAGb,SAAS,IAAIO,0BAAUC,YAA/C;AACA,MAAMM,kBAAkB,GAAGT,QAAQ,KAAKU,aAAb,IAAoB,CAACF,eAAhD;AAEA,SACE,uEACMT,SADN;AAEE,IAAA,SAAS,EAAE,4BAAW,gCAAa,eAAb,EAA8BC,QAA9B,CAAX,EAAoD;AAC7D,gCAA0BC;AADmC,KAApD,CAFb;AAKE,IAAA,GAAG,EAAEb;AALP,MAOE;AACE,IAAA,SAAS,EAAE,4BAAW,0BAAX,EAAuC;AAChD,0DACEkB;AAF8C,KAAvC;AADb,KAMG,yBAAajB,IAAb,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAsCA,IAAtC,CAPJ,EASG,yBAAaC,MAAb,KACC,qCAAC,cAAD;AACE,IAAA,KAAK,EAAC,GADR;AAEE,IAAA,MAAM,EAAEU,QAAQ,KAAKW,iBAAb,GAAuB,GAAvB,GAA6B,GAFvC;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKGrB,MALH,CAVJ,EAkBG,yBAAaC,SAAb,KACC,qCAAC,iBAAD;AAAU,IAAA,MAAM,EAAC,SAAjB;AAA2B,IAAA,SAAS,EAAC;AAArC,KACGA,SADH,CAnBJ,EAwBGC,QAxBH,EA0BG,yBAAaC,OAAb,KACC;AACE,IAAA,SAAS,EAAE,4BAAW,wBAAX,EAAqC;AAC9C,mCAA6BC,aAAa,KAAK;AADD,KAArC;AADb,KAKGD,OALH,CA3BJ,EAoCGe,eAAe,IAAI,qCAAC,2BAAD;AAAoB,IAAA,OAAO,EAAEV;AAA7B,IApCtB,EAqCGW,kBAAkB,IACjB,qCAAC,oCAAD;AAAmB,IAAA,SAAS,EAAC,oBAA7B;AAAkD,IAAA,OAAO,EAAEX;AAA3D,KACE,qCAAC,oBAAD,OADF,CAtCJ,CAPF,CADF;AAqDD,CA/E0B,EAgF3B;AACEH,EAAAA,SAAS,EAAE,IADb;AAEEE,EAAAA,UAAU,EAAE,IAFd;AAGED,EAAAA,QAAQ,EAAE;AAHZ,CAhF2B,CAAtB","sourcesContent":["import * as React from \"react\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport Title from \"../Typography/Title/Title\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  ViewHeight,\n  ViewWidth,\n  withAdaptivity,\n} from \"../../hoc/withAdaptivity\";\nimport { HasRootRef } from \"../../types\";\nimport { PanelHeaderButton } from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { ANDROID, IOS } from \"../../lib/platform\";\nimport ModalDismissButton from \"../ModalDismissButton/ModalDismissButton\";\nimport { Icon24Dismiss } from \"@vkontakte/icons\";\nimport { useKeyboard } from \"../../hooks/useKeyboard\";\nimport { AdaptivityContextInterface } from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"./ModalCardBase.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   * Кнопки-действия.\n   *\n   * Рекомендуется использовать `<Button size=\"l\" mode=\"primary\" />` или `<Button size=\"l\" mode=\"secondary\" />`\n   */\n  actions?: React.ReactNode;\n\n  /**\n   * Тип отображения кнопок: вертикальный или горизонтальный\n   */\n  actionsLayout?: \"vertical\" | \"horizontal\";\n  onClose?: VoidFunction;\n}\n\nexport const ModalCardBase = withAdaptivity<\n  ModalCardBaseProps & AdaptivityContextInterface\n>(\n  ({\n    getRootRef,\n    icon,\n    header,\n    subheader,\n    children,\n    actions,\n    actionsLayout,\n    viewWidth,\n    hasMouse,\n    viewHeight,\n    onClose,\n    ...restProps\n  }) => {\n    const platform = usePlatform();\n    const isDesktop =\n      viewWidth >= ViewWidth.SMALL_TABLET &&\n      (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n    const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n    const canShowCloseBtn = viewWidth >= ViewWidth.SMALL_TABLET;\n    const canShowCloseBtnIos = platform === IOS && !canShowCloseBtn;\n\n    return (\n      <div\n        {...restProps}\n        vkuiClass={classNames(getClassName(\"ModalCardBase\", platform), {\n          \"ModalCardBase--desktop\": isDesktop,\n        })}\n        ref={getRootRef}\n      >\n        <div\n          vkuiClass={classNames(\"ModalCardBase__container\", {\n            \"ModalCardBase__container--softwareKeyboardOpened\":\n              isSoftwareKeyboardOpened,\n          })}\n        >\n          {hasReactNode(icon) && (\n            <div vkuiClass=\"ModalCardBase__icon\">{icon}</div>\n          )}\n          {hasReactNode(header) && (\n            <Title\n              level=\"2\"\n              weight={platform === ANDROID ? \"2\" : \"1\"}\n              vkuiClass=\"ModalCardBase__header\"\n            >\n              {header}\n            </Title>\n          )}\n          {hasReactNode(subheader) && (\n            <Headline weight=\"regular\" vkuiClass=\"ModalCardBase__subheader\">\n              {subheader}\n            </Headline>\n          )}\n\n          {children}\n\n          {hasReactNode(actions) && (\n            <div\n              vkuiClass={classNames(\"ModalCardBase__actions\", {\n                \"ModalCardBase__actions--v\": actionsLayout === \"vertical\",\n              })}\n            >\n              {actions}\n            </div>\n          )}\n\n          {canShowCloseBtn && <ModalDismissButton onClick={onClose} />}\n          {canShowCloseBtnIos && (\n            <PanelHeaderButton vkuiClass=\"ModalCard__dismiss\" onClick={onClose}>\n              <Icon24Dismiss />\n            </PanelHeaderButton>\n          )}\n        </div>\n      </div>\n    );\n  },\n  {\n    viewWidth: true,\n    viewHeight: true,\n    hasMouse: true,\n  }\n);\n"],"file":"ModalCardBase.js"}
+{"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"names":["ModalCardBase","getRootRef","icon","header","subheader","children","actions","actionsLayout","viewWidth","hasMouse","viewHeight","onClose","dismissLabel","restProps","platform","isDesktop","ViewWidth","SMALL_TABLET","ViewHeight","MEDIUM","isSoftwareKeyboardOpened","isOpened","canShowCloseBtn","canShowCloseBtnIos","IOS","ANDROID"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;;AA2CO,IAAMA,aAAa,GAAG,oCAG3B,gBAcM;AAAA,MAbJC,UAaI,QAbJA,UAaI;AAAA,MAZJC,IAYI,QAZJA,IAYI;AAAA,MAXJC,MAWI,QAXJA,MAWI;AAAA,MAVJC,SAUI,QAVJA,SAUI;AAAA,MATJC,QASI,QATJA,QASI;AAAA,MARJC,OAQI,QARJA,OAQI;AAAA,MAPJC,aAOI,QAPJA,aAOI;AAAA,MANJC,SAMI,QANJA,SAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,+BAFJC,YAEI;AAAA,MAFJA,YAEI,kCAFW,QAEX;AAAA,MADDC,SACC;AACJ,MAAMC,QAAQ,GAAG,+BAAjB;AACA,MAAMC,SAAS,GACbP,SAAS,IAAIQ,0BAAUC,YAAvB,KACCR,QAAQ,IAAIC,UAAU,IAAIQ,2BAAWC,MADtC,CADF;AAGA,MAAMC,wBAAwB,GAAG,gCAAcC,QAA/C;AAEA,MAAMC,eAAe,GAAGd,SAAS,IAAIQ,0BAAUC,YAA/C;AACA,MAAMM,kBAAkB,GAAGT,QAAQ,KAAKU,aAAb,IAAoB,CAACF,eAAhD;AAEA,SACE,uEACMT,SADN;AAEE;AACA,IAAA,SAAS,EAAE,4BAAW,gCAAa,eAAb,EAA8BC,QAA9B,CAAX,EAAoD;AAC7D,gCAA0BC;AADmC,KAApD,CAHb;AAME,IAAA,GAAG,EAAEd;AANP,MAQE;AACE;AACA,IAAA,SAAS,EAAE,4BAAW,0BAAX,EAAuC;AAChD,0DACEmB;AAF8C,KAAvC;AAFb,KAOG,yBAAalB,IAAb,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAsCA,IAAtC,CARJ,EAUG,yBAAaC,MAAb,KACC,qCAAC,YAAD;AACE,IAAA,KAAK,EAAC,GADR;AAEE,IAAA,MAAM,EAAEW,QAAQ,KAAKW,iBAAb,GAAuB,GAAvB,GAA6B,GAFvC;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKGtB,MALH,CAXJ,EAmBG,yBAAaC,SAAb,KACC,qCAAC,iBAAD;AAAU,IAAA,MAAM,EAAC,SAAjB;AAA2B,IAAA,SAAS,EAAC;AAArC,KACGA,SADH,CApBJ,EAyBGC,QAzBH,EA2BG,yBAAaC,OAAb,KACC;AACE;AACA,IAAA,SAAS,EAAE,4BAAW,wBAAX,EAAqC;AAC9C,mCAA6BC,aAAa,KAAK;AADD,KAArC;AAFb,KAMGD,OANH,CA5BJ,EAsCGgB,eAAe,IAAI,qCAAC,2BAAD;AAAoB,IAAA,OAAO,EAAEX;AAA7B,IAtCtB,EAuCGY,kBAAkB,IACjB,qCAAC,oCAAD;AACE,kBAAYX,YADd;AAEE,IAAA,SAAS,EAAC,wBAFZ;AAGE,IAAA,OAAO,EAAED;AAHX,KAKE,qCAAC,oBAAD,OALF,CAxCJ,CARF,CADF;AA4DD,CAvF0B,EAwF3B;AACEH,EAAAA,SAAS,EAAE,IADb;AAEEE,EAAAA,UAAU,EAAE,IAFd;AAGED,EAAAA,QAAQ,EAAE;AAHZ,CAxF2B,CAAtB","sourcesContent":["import * as React from \"react\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Title } from \"../Typography/Title/Title\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  ViewHeight,\n  ViewWidth,\n  withAdaptivity,\n} from \"../../hoc/withAdaptivity\";\nimport { HasRootRef } from \"../../types\";\nimport { PanelHeaderButton } from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { ANDROID, IOS } from \"../../lib/platform\";\nimport ModalDismissButton from \"../ModalDismissButton/ModalDismissButton\";\nimport { Icon24Dismiss } from \"@vkontakte/icons\";\nimport { useKeyboard } from \"../../hooks/useKeyboard\";\nimport { AdaptivityContextInterface } from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"./ModalCardBase.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   * Кнопки-действия.\n   *\n   * Рекомендуется использовать `<Button size=\"l\" mode=\"primary\" />` или `<Button size=\"l\" mode=\"secondary\" />`\n   */\n  actions?: React.ReactNode;\n\n  /**\n   * Тип отображения кнопок: вертикальный или горизонтальный\n   */\n  actionsLayout?: \"vertical\" | \"horizontal\";\n  onClose?: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n}\n\nexport const ModalCardBase = withAdaptivity<\n  ModalCardBaseProps & AdaptivityContextInterface\n>(\n  ({\n    getRootRef,\n    icon,\n    header,\n    subheader,\n    children,\n    actions,\n    actionsLayout,\n    viewWidth,\n    hasMouse,\n    viewHeight,\n    onClose,\n    dismissLabel = \"Скрыть\",\n    ...restProps\n  }) => {\n    const platform = usePlatform();\n    const isDesktop =\n      viewWidth >= ViewWidth.SMALL_TABLET &&\n      (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n    const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n    const canShowCloseBtn = viewWidth >= ViewWidth.SMALL_TABLET;\n    const canShowCloseBtnIos = platform === IOS && !canShowCloseBtn;\n\n    return (\n      <div\n        {...restProps}\n        // eslint-disable-next-line vkui/no-object-expression-in-arguments\n        vkuiClass={classNames(getClassName(\"ModalCardBase\", platform), {\n          \"ModalCardBase--desktop\": isDesktop,\n        })}\n        ref={getRootRef}\n      >\n        <div\n          // eslint-disable-next-line vkui/no-object-expression-in-arguments\n          vkuiClass={classNames(\"ModalCardBase__container\", {\n            \"ModalCardBase__container--softwareKeyboardOpened\":\n              isSoftwareKeyboardOpened,\n          })}\n        >\n          {hasReactNode(icon) && (\n            <div vkuiClass=\"ModalCardBase__icon\">{icon}</div>\n          )}\n          {hasReactNode(header) && (\n            <Title\n              level=\"2\"\n              weight={platform === ANDROID ? \"2\" : \"1\"}\n              vkuiClass=\"ModalCardBase__header\"\n            >\n              {header}\n            </Title>\n          )}\n          {hasReactNode(subheader) && (\n            <Headline weight=\"regular\" vkuiClass=\"ModalCardBase__subheader\">\n              {subheader}\n            </Headline>\n          )}\n\n          {children}\n\n          {hasReactNode(actions) && (\n            <div\n              // eslint-disable-next-line vkui/no-object-expression-in-arguments\n              vkuiClass={classNames(\"ModalCardBase__actions\", {\n                \"ModalCardBase__actions--v\": actionsLayout === \"vertical\",\n              })}\n            >\n              {actions}\n            </div>\n          )}\n\n          {canShowCloseBtn && <ModalDismissButton onClick={onClose} />}\n          {canShowCloseBtnIos && (\n            <PanelHeaderButton\n              aria-label={dismissLabel}\n              vkuiClass=\"ModalCardBase__dismiss\"\n              onClick={onClose}\n            >\n              <Icon24Dismiss />\n            </PanelHeaderButton>\n          )}\n        </div>\n      </div>\n    );\n  },\n  {\n    viewWidth: true,\n    viewHeight: true,\n    hasMouse: true,\n  }\n);\n"],"file":"ModalCardBase.js"}

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

@@ -7,7 +7,22 @@ export interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, Ad
      * Шапка модальной страницы, `<ModalPageHeader />`
      */
     header?: React.ReactNode;
+    /**
+     * Будет вызвано при начале открытия модалки.
+     */
+    onOpen?: VoidFunction;
+    /**
+     * Будет вызвано при окончательном открытии модалки.
+     */
+    onOpened?: VoidFunction;
+    /**
+     * Будет вызвано при начале закрытия модалки.
+     */
     onClose?: VoidFunction;
+    /**
+     * Будет вызвано при окончательном закрытии модалки.
+     */
+    onClosed?: VoidFunction;
     /**
      * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.
      */
@@ -18,5 +33,5 @@ export interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, Ad
     dynamicContentHeight?: boolean;
     getModalContentRef?: React.Ref<HTMLDivElement>;
 }
-declare const _default: React.FC<Pick<ModalPageProps & AdaptivityContextInterface, "hidden" | "dir" | "header" | "nav" | "slot" | "style" | "title" | "color" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "onClose" | "settlingHeight" | "dynamicContentHeight" | "getModalContentRef"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+declare const _default: React.FC<Pick<ModalPageProps & AdaptivityContextInterface, "hidden" | "dir" | "header" | "nav" | "slot" | "style" | "title" | "color" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "onOpen" | "onOpened" | "onClose" | "onClosed" | "settlingHeight" | "dynamicContentHeight" | "getModalContentRef"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
 export default _default;

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

@@ -39,7 +39,7 @@ var _getNavId = require("../../lib/getNavId");
 
 var _warnOnce = require("../../lib/warnOnce");
 
-var _excluded = ["children", "header", "viewWidth", "viewHeight", "sizeX", "hasMouse", "onClose", "settlingHeight", "dynamicContentHeight", "getModalContentRef", "nav"];
+var _excluded = ["children", "header", "viewWidth", "viewHeight", "sizeX", "hasMouse", "onOpen", "onOpened", "onClose", "onClosed", "settlingHeight", "dynamicContentHeight", "getModalContentRef", "nav"];
 var warn = (0, _warnOnce.warnOnce)("ModalPage");
 
 var ModalPage = function ModalPage(props) {
@@ -52,7 +52,10 @@ var ModalPage = function ModalPage(props) {
       viewHeight = props.viewHeight,
       sizeX = props.sizeX,
       hasMouse = props.hasMouse,
+      onOpen = props.onOpen,
+      onOpened = props.onOpened,
       onClose = props.onClose,
+      onClosed = props.onClosed,
       settlingHeight = props.settlingHeight,
       dynamicContentHeight = props.dynamicContentHeight,
       getModalContentRef = props.getModalContentRef,
@@ -69,6 +72,7 @@ var ModalPage = function ModalPage(props) {
       refs = _useModalRegistry.refs;
 
   return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
+    // eslint-disable-next-line vkui/no-object-expression-in-arguments
     vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("ModalPage", platform), "ModalPage--sizeX-".concat(sizeX), {
       "ModalPage--desktop": isDesktop
     })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"names":["warn","ModalPage","props","React","useContext","ModalRootContext","updateModalHeight","children","header","viewWidth","viewHeight","sizeX","hasMouse","onClose","settlingHeight","dynamicContentHeight","getModalContentRef","nav","restProps","platform","orientation","useEffect","isDesktop","ViewWidth","SMALL_TABLET","ViewHeight","MEDIUM","canShowCloseBtn","modalContext","ModalType","PAGE","refs","innerElement","headerElement","contentElement","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AASA;;AACA;;AACA;;AACA;;AACA;;;AAuBA,IAAMA,IAAI,GAAG,wBAAS,WAAT,CAAb;;AACA,IAAMC,SAAgE,GAAG,SAAnEA,SAAmE,CACvEC,KADuE,EAEpE;AACH,0BAA8BC,KAAK,CAACC,UAAN,CAAiBC,kCAAjB,CAA9B;AAAA,MAAQC,iBAAR,qBAAQA,iBAAR;;AAEA,MACEC,QADF,GAaIL,KAbJ,CACEK,QADF;AAAA,MAEEC,MAFF,GAaIN,KAbJ,CAEEM,MAFF;AAAA,MAGEC,SAHF,GAaIP,KAbJ,CAGEO,SAHF;AAAA,MAIEC,UAJF,GAaIR,KAbJ,CAIEQ,UAJF;AAAA,MAKEC,KALF,GAaIT,KAbJ,CAKES,KALF;AAAA,MAMEC,QANF,GAaIV,KAbJ,CAMEU,QANF;AAAA,MAOEC,OAPF,GAaIX,KAbJ,CAOEW,OAPF;AAAA,MAQEC,cARF,GAaIZ,KAbJ,CAQEY,cARF;AAAA,MASEC,oBATF,GAaIb,KAbJ,CASEa,oBATF;AAAA,MAUEC,kBAVF,GAaId,KAbJ,CAUEc,kBAVF;AAAA,MAWEC,GAXF,GAaIf,KAbJ,CAWEe,GAXF;AAAA,MAYKC,SAZL,0CAaIhB,KAbJ;AAeA,MAAMiB,QAAQ,GAAG,+BAAjB;AACA,MAAMC,WAAW,GAAG,iDAApB;AAEAjB,EAAAA,KAAK,CAACkB,SAAN,CAAgBf,iBAAhB,EAAmC,CACjCC,QADiC,EAEjCa,WAFiC,EAGjCd,iBAHiC,CAAnC;AAMA,MAAMgB,SAAS,GACbb,SAAS,IAAIc,0BAAUC,YAAvB,KACCZ,QAAQ,IAAIF,UAAU,IAAIe,2BAAWC,MADtC,CADF;AAGA,MAAMC,eAAe,GAAGlB,SAAS,IAAIc,0BAAUC,YAA/C;AAEA,MAAMI,YAAY,GAAGzB,KAAK,CAACC,UAAN,CAAiBC,kCAAjB,CAArB;;AACA,0BAAiB,wCAAiB,wBAASH,KAAT,EAAgBF,IAAhB,CAAjB,EAAwC6B,iBAAUC,IAAlD,CAAjB;AAAA,MAAQC,IAAR,qBAAQA,IAAR;;AAEA,SACE,uEACMb,SADN;AAEE,IAAA,SAAS,EAAE,4BACT,gCAAa,WAAb,EAA0BC,QAA1B,CADS,6BAEWR,KAFX,GAGT;AACE,4BAAsBW;AADxB,KAHS;AAFb,MAUE;AAAK,IAAA,SAAS,EAAC,oBAAf;AAAoC,IAAA,GAAG,EAAES,IAAI,CAACC;AAA9C,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC,mBAAf;AAAmC,IAAA,GAAG,EAAED,IAAI,CAACE;AAA7C,KACGzB,MADH,CADF,EAKE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AACE,IAAA,SAAS,EAAC,oBADZ;AAEE,IAAA,GAAG,EAAE,qBACHuB,IAAI,CAACG,cADF,EAEHlB,kBAFG;AAFP,KAOE;AAAK,IAAA,SAAS,EAAC;AAAf,KAAwCT,QAAxC,CAPF,CADF,CALF,EAgBGoB,eAAe,IACd,qCAAC,2BAAD;AAAoB,IAAA,OAAO,EAAEd,OAAO,IAAIe,YAAY,CAACf;AAArD,IAjBJ,CADF,CAVF,CADF;AAmCD,CAxED;;AA0EAZ,SAAS,CAACkC,YAAV,GAAyB;AACvBrB,EAAAA,cAAc,EAAE;AADO,CAAzB,C,CAIA;;eACe,oCAAeb,SAAf,EAA0B;AACvCQ,EAAAA,SAAS,EAAE,IAD4B;AAEvCC,EAAAA,UAAU,EAAE,IAF2B;AAGvCC,EAAAA,KAAK,EAAE,IAHgC;AAIvCC,EAAAA,QAAQ,EAAE;AAJ6B,CAA1B,C","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport {\n  ModalRootContext,\n  useModalRegistry,\n} from \"../ModalRoot/ModalRootContext\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useOrientationChange } from \"../../hooks/useOrientationChange\";\nimport {\n  withAdaptivity,\n  ViewHeight,\n  ViewWidth,\n} from \"../../hoc/withAdaptivity\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport ModalDismissButton from \"../ModalDismissButton/ModalDismissButton\";\nimport { multiRef } from \"../../lib/utils\";\nimport { ModalType } from \"../ModalRoot/types\";\nimport { getNavId, NavIdProps } from \"../../lib/getNavId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./ModalPage.css\";\n\nexport interface ModalPageProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    AdaptivityProps,\n    NavIdProps {\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: React.ReactNode;\n  onClose?: VoidFunction;\n  /**\n   * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.\n   */\n  settlingHeight?: number;\n  /**\n   * Если высота контента в модальной странице может поменяться, нужно установить это свойство\n   */\n  dynamicContentHeight?: boolean;\n  getModalContentRef?: React.Ref<HTMLDivElement>;\n}\n\nconst warn = warnOnce(\"ModalPage\");\nconst ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (\n  props\n) => {\n  const { updateModalHeight } = React.useContext(ModalRootContext);\n\n  const {\n    children,\n    header,\n    viewWidth,\n    viewHeight,\n    sizeX,\n    hasMouse,\n    onClose,\n    settlingHeight,\n    dynamicContentHeight,\n    getModalContentRef,\n    nav,\n    ...restProps\n  } = props;\n\n  const platform = usePlatform();\n  const orientation = useOrientationChange();\n\n  React.useEffect(updateModalHeight, [\n    children,\n    orientation,\n    updateModalHeight,\n  ]);\n\n  const isDesktop =\n    viewWidth >= ViewWidth.SMALL_TABLET &&\n    (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n  const canShowCloseBtn = viewWidth >= ViewWidth.SMALL_TABLET;\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId(props, warn), ModalType.PAGE);\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName(\"ModalPage\", platform),\n        `ModalPage--sizeX-${sizeX}`,\n        {\n          \"ModalPage--desktop\": isDesktop,\n        }\n      )}\n    >\n      <div vkuiClass=\"ModalPage__in-wrap\" ref={refs.innerElement}>\n        <div vkuiClass=\"ModalPage__in\">\n          <div vkuiClass=\"ModalPage__header\" ref={refs.headerElement}>\n            {header}\n          </div>\n\n          <div vkuiClass=\"ModalPage__content-wrap\">\n            <div\n              vkuiClass=\"ModalPage__content\"\n              ref={multiRef<HTMLDivElement>(\n                refs.contentElement,\n                getModalContentRef\n              )}\n            >\n              <div vkuiClass=\"ModalPage__content-in\">{children}</div>\n            </div>\n          </div>\n          {canShowCloseBtn && (\n            <ModalDismissButton onClick={onClose || modalContext.onClose} />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nModalPage.defaultProps = {\n  settlingHeight: 75,\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withAdaptivity(ModalPage, {\n  viewWidth: true,\n  viewHeight: true,\n  sizeX: true,\n  hasMouse: true,\n});\n"],"file":"ModalPage.js"}
+{"version":3,"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"names":["warn","ModalPage","props","React","useContext","ModalRootContext","updateModalHeight","children","header","viewWidth","viewHeight","sizeX","hasMouse","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","restProps","platform","orientation","useEffect","isDesktop","ViewWidth","SMALL_TABLET","ViewHeight","MEDIUM","canShowCloseBtn","modalContext","ModalType","PAGE","refs","innerElement","headerElement","contentElement","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AASA;;AACA;;AACA;;AACA;;AACA;;;AAsCA,IAAMA,IAAI,GAAG,wBAAS,WAAT,CAAb;;AACA,IAAMC,SAAgE,GAAG,SAAnEA,SAAmE,CACvEC,KADuE,EAEpE;AACH,0BAA8BC,KAAK,CAACC,UAAN,CAAiBC,kCAAjB,CAA9B;AAAA,MAAQC,iBAAR,qBAAQA,iBAAR;;AAEA,MACEC,QADF,GAgBIL,KAhBJ,CACEK,QADF;AAAA,MAEEC,MAFF,GAgBIN,KAhBJ,CAEEM,MAFF;AAAA,MAGEC,SAHF,GAgBIP,KAhBJ,CAGEO,SAHF;AAAA,MAIEC,UAJF,GAgBIR,KAhBJ,CAIEQ,UAJF;AAAA,MAKEC,KALF,GAgBIT,KAhBJ,CAKES,KALF;AAAA,MAMEC,QANF,GAgBIV,KAhBJ,CAMEU,QANF;AAAA,MAOEC,MAPF,GAgBIX,KAhBJ,CAOEW,MAPF;AAAA,MAQEC,QARF,GAgBIZ,KAhBJ,CAQEY,QARF;AAAA,MASEC,OATF,GAgBIb,KAhBJ,CASEa,OATF;AAAA,MAUEC,QAVF,GAgBId,KAhBJ,CAUEc,QAVF;AAAA,MAWEC,cAXF,GAgBIf,KAhBJ,CAWEe,cAXF;AAAA,MAYEC,oBAZF,GAgBIhB,KAhBJ,CAYEgB,oBAZF;AAAA,MAaEC,kBAbF,GAgBIjB,KAhBJ,CAaEiB,kBAbF;AAAA,MAcEC,GAdF,GAgBIlB,KAhBJ,CAcEkB,GAdF;AAAA,MAeKC,SAfL,0CAgBInB,KAhBJ;AAkBA,MAAMoB,QAAQ,GAAG,+BAAjB;AACA,MAAMC,WAAW,GAAG,iDAApB;AAEApB,EAAAA,KAAK,CAACqB,SAAN,CAAgBlB,iBAAhB,EAAmC,CACjCC,QADiC,EAEjCgB,WAFiC,EAGjCjB,iBAHiC,CAAnC;AAMA,MAAMmB,SAAS,GACbhB,SAAS,IAAIiB,0BAAUC,YAAvB,KACCf,QAAQ,IAAIF,UAAU,IAAIkB,2BAAWC,MADtC,CADF;AAGA,MAAMC,eAAe,GAAGrB,SAAS,IAAIiB,0BAAUC,YAA/C;AAEA,MAAMI,YAAY,GAAG5B,KAAK,CAACC,UAAN,CAAiBC,kCAAjB,CAArB;;AACA,0BAAiB,wCAAiB,wBAASH,KAAT,EAAgBF,IAAhB,CAAjB,EAAwCgC,iBAAUC,IAAlD,CAAjB;AAAA,MAAQC,IAAR,qBAAQA,IAAR;;AAEA,SACE,uEACMb,SADN;AAEE;AACA,IAAA,SAAS,EAAE,4BACT,gCAAa,WAAb,EAA0BC,QAA1B,CADS,6BAEWX,KAFX,GAGT;AACE,4BAAsBc;AADxB,KAHS;AAHb,MAWE;AAAK,IAAA,SAAS,EAAC,oBAAf;AAAoC,IAAA,GAAG,EAAES,IAAI,CAACC;AAA9C,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC,mBAAf;AAAmC,IAAA,GAAG,EAAED,IAAI,CAACE;AAA7C,KACG5B,MADH,CADF,EAKE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AACE,IAAA,SAAS,EAAC,oBADZ;AAEE,IAAA,GAAG,EAAE,qBACH0B,IAAI,CAACG,cADF,EAEHlB,kBAFG;AAFP,KAOE;AAAK,IAAA,SAAS,EAAC;AAAf,KAAwCZ,QAAxC,CAPF,CADF,CALF,EAgBGuB,eAAe,IACd,qCAAC,2BAAD;AAAoB,IAAA,OAAO,EAAEf,OAAO,IAAIgB,YAAY,CAAChB;AAArD,IAjBJ,CADF,CAXF,CADF;AAoCD,CA5ED;;AA8EAd,SAAS,CAACqC,YAAV,GAAyB;AACvBrB,EAAAA,cAAc,EAAE;AADO,CAAzB,C,CAIA;;eACe,oCAAehB,SAAf,EAA0B;AACvCQ,EAAAA,SAAS,EAAE,IAD4B;AAEvCC,EAAAA,UAAU,EAAE,IAF2B;AAGvCC,EAAAA,KAAK,EAAE,IAHgC;AAIvCC,EAAAA,QAAQ,EAAE;AAJ6B,CAA1B,C","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport {\n  ModalRootContext,\n  useModalRegistry,\n} from \"../ModalRoot/ModalRootContext\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useOrientationChange } from \"../../hooks/useOrientationChange\";\nimport {\n  withAdaptivity,\n  ViewHeight,\n  ViewWidth,\n} from \"../../hoc/withAdaptivity\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport ModalDismissButton from \"../ModalDismissButton/ModalDismissButton\";\nimport { multiRef } from \"../../lib/utils\";\nimport { ModalType } from \"../ModalRoot/types\";\nimport { getNavId, NavIdProps } from \"../../lib/getNavId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./ModalPage.css\";\n\nexport interface ModalPageProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    AdaptivityProps,\n    NavIdProps {\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: React.ReactNode;\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\nconst warn = warnOnce(\"ModalPage\");\nconst ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (\n  props\n) => {\n  const { updateModalHeight } = React.useContext(ModalRootContext);\n\n  const {\n    children,\n    header,\n    viewWidth,\n    viewHeight,\n    sizeX,\n    hasMouse,\n    onOpen,\n    onOpened,\n    onClose,\n    onClosed,\n    settlingHeight,\n    dynamicContentHeight,\n    getModalContentRef,\n    nav,\n    ...restProps\n  } = props;\n\n  const platform = usePlatform();\n  const orientation = useOrientationChange();\n\n  React.useEffect(updateModalHeight, [\n    children,\n    orientation,\n    updateModalHeight,\n  ]);\n\n  const isDesktop =\n    viewWidth >= ViewWidth.SMALL_TABLET &&\n    (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n  const canShowCloseBtn = viewWidth >= ViewWidth.SMALL_TABLET;\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId(props, warn), ModalType.PAGE);\n\n  return (\n    <div\n      {...restProps}\n      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(\n        getClassName(\"ModalPage\", platform),\n        `ModalPage--sizeX-${sizeX}`,\n        {\n          \"ModalPage--desktop\": isDesktop,\n        }\n      )}\n    >\n      <div vkuiClass=\"ModalPage__in-wrap\" ref={refs.innerElement}>\n        <div vkuiClass=\"ModalPage__in\">\n          <div vkuiClass=\"ModalPage__header\" ref={refs.headerElement}>\n            {header}\n          </div>\n\n          <div vkuiClass=\"ModalPage__content-wrap\">\n            <div\n              vkuiClass=\"ModalPage__content\"\n              ref={multiRef<HTMLDivElement>(\n                refs.contentElement,\n                getModalContentRef\n              )}\n            >\n              <div vkuiClass=\"ModalPage__content-in\">{children}</div>\n            </div>\n          </div>\n          {canShowCloseBtn && (\n            <ModalDismissButton onClick={onClose || modalContext.onClose} />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nModalPage.defaultProps = {\n  settlingHeight: 75,\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withAdaptivity(ModalPage, {\n  viewWidth: true,\n  viewHeight: true,\n  sizeX: true,\n  hasMouse: true,\n});\n"],"file":"ModalPage.js"}

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

@@ -46,6 +46,7 @@ var ModalPageHeader = function ModalPageHeader(_ref) {
   var hasSeparator = separator && platform === _platform.VKCOM;
   var isDesktop = viewWidth >= _AdaptivityContext.ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= _AdaptivityContext.ViewHeight.MEDIUM);
   return (0, _jsxRuntime.createScopedElement)("div", {
+    // eslint-disable-next-line vkui/no-object-expression-in-arguments
     vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("ModalPageHeader", platform), {
       "ModalPageHeader--desktop": isDesktop
     }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"names":["ModalPageHeader","children","separator","getRef","restProps","platform","viewWidth","viewHeight","hasMouse","hasSeparator","VKCOM","isDesktop","ViewWidth","SMALL_TABLET","ViewHeight","MEDIUM","defaultProps"],"mappings":";;;;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAQA,IAAMA,eAA8D,GAAG,SAAjEA,eAAiE,OAK3C;AAAA,MAJ1BC,QAI0B,QAJ1BA,QAI0B;AAAA,MAH1BC,SAG0B,QAH1BA,SAG0B;AAAA,MAF1BC,MAE0B,QAF1BA,MAE0B;AAAA,MADvBC,SACuB;AAC1B,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,uBAA4C,oCAA5C;AAAA,MAAQC,SAAR,kBAAQA,SAAR;AAAA,MAAmBC,UAAnB,kBAAmBA,UAAnB;AAAA,MAA+BC,QAA/B,kBAA+BA,QAA/B;;AACA,MAAMC,YAAY,GAAGP,SAAS,IAAIG,QAAQ,KAAKK,eAA/C;AACA,MAAMC,SAAS,GACbL,SAAS,IAAIM,6BAAUC,YAAvB,KACCL,QAAQ,IAAID,UAAU,IAAIO,8BAAWC,MADtC,CADF;AAIA,SACE;AACE,IAAA,SAAS,EAAE,4BAAW,gCAAa,iBAAb,EAAgCV,QAAhC,CAAX,EAAsD;AAC/D,kCAA4BM;AADmC,KAAtD,CADb;AAIE,IAAA,GAAG,EAAER;AAJP,KAME,qCAAC,oBAAD;AACE,IAAA,SAAS,EAAC;AADZ,KAEMC,SAFN;AAGE,IAAA,KAAK,EAAE,KAHT;AAIE,IAAA,SAAS,EAAE,KAJb;AAKE,IAAA,WAAW;AALb,MAOGH,QAPH,CANF,EAeGQ,YAAY,IAAI,qCAAC,kBAAD;AAAW,IAAA,IAAI;AAAf,IAfnB,CADF;AAmBD,CAhCD;;AAkCAT,eAAe,CAACgB,YAAhB,GAA+B;AAC7Bd,EAAAA,SAAS,EAAE;AADkB,CAA/B,C,CAIA;;eACeF,e","sourcesContent":["import * as React from \"react\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasRef } from \"../../types\";\nimport { VKCOM } from \"../../lib/platform\";\nimport PanelHeader, { PanelHeaderProps } from \"../PanelHeader/PanelHeader\";\nimport Separator from \"../Separator/Separator\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { ViewHeight, ViewWidth } from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"./ModalPageHeader.css\";\n\nexport interface ModalPageHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Omit<PanelHeaderProps, \"fixed\" | \"shadow\">,\n    HasRef<HTMLDivElement> {}\n\nconst ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = ({\n  children,\n  separator,\n  getRef,\n  ...restProps\n}: ModalPageHeaderProps) => {\n  const platform = usePlatform();\n  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();\n  const hasSeparator = separator && platform === VKCOM;\n  const isDesktop =\n    viewWidth >= ViewWidth.SMALL_TABLET &&\n    (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n\n  return (\n    <div\n      vkuiClass={classNames(getClassName(\"ModalPageHeader\", platform), {\n        \"ModalPageHeader--desktop\": isDesktop,\n      })}\n      ref={getRef}\n    >\n      <PanelHeader\n        vkuiClass=\"ModalPageHeader__in\"\n        {...restProps}\n        fixed={false}\n        separator={false}\n        transparent\n      >\n        {children}\n      </PanelHeader>\n      {hasSeparator && <Separator wide />}\n    </div>\n  );\n};\n\nModalPageHeader.defaultProps = {\n  separator: true,\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default ModalPageHeader;\n"],"file":"ModalPageHeader.js"}
+{"version":3,"sources":["../../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"names":["ModalPageHeader","children","separator","getRef","restProps","platform","viewWidth","viewHeight","hasMouse","hasSeparator","VKCOM","isDesktop","ViewWidth","SMALL_TABLET","ViewHeight","MEDIUM","defaultProps"],"mappings":";;;;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAQA,IAAMA,eAA8D,GAAG,SAAjEA,eAAiE,OAK3C;AAAA,MAJ1BC,QAI0B,QAJ1BA,QAI0B;AAAA,MAH1BC,SAG0B,QAH1BA,SAG0B;AAAA,MAF1BC,MAE0B,QAF1BA,MAE0B;AAAA,MADvBC,SACuB;AAC1B,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,uBAA4C,oCAA5C;AAAA,MAAQC,SAAR,kBAAQA,SAAR;AAAA,MAAmBC,UAAnB,kBAAmBA,UAAnB;AAAA,MAA+BC,QAA/B,kBAA+BA,QAA/B;;AACA,MAAMC,YAAY,GAAGP,SAAS,IAAIG,QAAQ,KAAKK,eAA/C;AACA,MAAMC,SAAS,GACbL,SAAS,IAAIM,6BAAUC,YAAvB,KACCL,QAAQ,IAAID,UAAU,IAAIO,8BAAWC,MADtC,CADF;AAIA,SACE;AACE;AACA,IAAA,SAAS,EAAE,4BAAW,gCAAa,iBAAb,EAAgCV,QAAhC,CAAX,EAAsD;AAC/D,kCAA4BM;AADmC,KAAtD,CAFb;AAKE,IAAA,GAAG,EAAER;AALP,KAOE,qCAAC,oBAAD;AACE,IAAA,SAAS,EAAC;AADZ,KAEMC,SAFN;AAGE,IAAA,KAAK,EAAE,KAHT;AAIE,IAAA,SAAS,EAAE,KAJb;AAKE,IAAA,WAAW;AALb,MAOGH,QAPH,CAPF,EAgBGQ,YAAY,IAAI,qCAAC,kBAAD;AAAW,IAAA,IAAI;AAAf,IAhBnB,CADF;AAoBD,CAjCD;;AAmCAT,eAAe,CAACgB,YAAhB,GAA+B;AAC7Bd,EAAAA,SAAS,EAAE;AADkB,CAA/B,C,CAIA;;eACeF,e","sourcesContent":["import * as React from \"react\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasRef } from \"../../types\";\nimport { VKCOM } from \"../../lib/platform\";\nimport PanelHeader, { PanelHeaderProps } from \"../PanelHeader/PanelHeader\";\nimport Separator from \"../Separator/Separator\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { ViewHeight, ViewWidth } from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"./ModalPageHeader.css\";\n\nexport interface ModalPageHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Omit<PanelHeaderProps, \"fixed\" | \"shadow\">,\n    HasRef<HTMLDivElement> {}\n\nconst ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = ({\n  children,\n  separator,\n  getRef,\n  ...restProps\n}: ModalPageHeaderProps) => {\n  const platform = usePlatform();\n  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();\n  const hasSeparator = separator && platform === VKCOM;\n  const isDesktop =\n    viewWidth >= ViewWidth.SMALL_TABLET &&\n    (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n\n  return (\n    <div\n      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(getClassName(\"ModalPageHeader\", platform), {\n        \"ModalPageHeader--desktop\": isDesktop,\n      })}\n      ref={getRef}\n    >\n      <PanelHeader\n        vkuiClass=\"ModalPageHeader__in\"\n        {...restProps}\n        fixed={false}\n        separator={false}\n        transparent\n      >\n        {children}\n      </PanelHeader>\n      {hasSeparator && <Separator wide />}\n    </div>\n  );\n};\n\nModalPageHeader.defaultProps = {\n  separator: true,\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default ModalPageHeader;\n"],"file":"ModalPageHeader.js"}

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

@@ -5,12 +5,24 @@ import "./ModalRoot.css";
 export interface ModalRootProps extends HasPlatform {
     activeModal?: string | null;
     /**
-     * Будет вызвано при закрытии активной модалки с её id
+     * Будет вызвано при начале открытия активной модалки с её id
+     */
+    onOpen?(modalId: string): void;
+    /**
+     * Будет вызвано при окончательном открытии активной модалки с её id
+     */
+    onOpened?(modalId: string): void;
+    /**
+     * Будет вызвано при начале закрытия активной модалки с её id
      */
     onClose?(modalId: string): void;
+    /**
+     * Будет вызвано при окончательном закрытии активной модалки с её id
+     */
+    onClosed?(modalId: string): void;
     /**
      * @ignore
      */
     configProvider?: ConfigProviderContextInterface;
 }
-export declare const ModalRootTouch: React.FC<Pick<ModalRootProps, "configProvider" | "onClose" | "activeModal">>;
+export declare const ModalRootTouch: React.FC<Pick<ModalRootProps, "configProvider" | "onOpen" | "onOpened" | "onClose" | "onClosed" | "activeModal">>;

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

@@ -206,7 +206,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         return Object.assign(_this.getModalState(id), data);
       },
       onClose: function onClose() {
-        return _this.props.closeActiveModal();
+        return _this.props.onExit();
       },
       isInsideModal: true
     };
@@ -273,12 +273,13 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {
         var enteringModal = this.props.enteringModal;
         var enteringState = this.getModalState(enteringModal);
+        this.props.onEnter();
         this.waitTransitionFinish(enteringState, function () {
           if (enteringState !== null && enteringState !== void 0 && enteringState.innerElement) {
             enteringState.innerElement.style.transitionDelay = "";
           }
 
-          _this2.props.onEnter(enteringModal);
+          _this2.props.onEntered(enteringModal);
         });
 
         if (enteringState !== null && enteringState !== void 0 && enteringState.innerElement) {
@@ -363,7 +364,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       var prevModalState = this.getModalState(id);
 
       if (!prevModalState) {
-        id && warn("[closeActiveModal] Modal ".concat(id, " does not exist - not closing"));
+        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;
       }
 
@@ -371,7 +372,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       var nextIsPage = !!nextModalState && nextModalState.type === _types.ModalType.PAGE;
       var prevIsPage = !!prevModalState && prevModalState.type === _types.ModalType.PAGE;
       this.waitTransitionFinish(prevModalState, function () {
-        return _this3.props.onExit(id);
+        return _this3.props.onExited(id);
       });
       var exitTranslate = prevIsPage && nextIsPage && ((_prevModalState$trans = prevModalState.translateY) !== null && _prevModalState$trans !== void 0 ? _prevModalState$trans : 0) <= ((_nextModalState$trans = nextModalState === null || nextModalState === void 0 ? void 0 : nextModalState.translateYFrom) !== null && _nextModalState$trans !== void 0 ? _nextModalState$trans : 0) && !this.props.isBack ? ((_nextModalState$trans2 = nextModalState === null || nextModalState === void 0 ? void 0 : nextModalState.translateYFrom) !== null && _nextModalState$trans2 !== void 0 ? _nextModalState$trans2 : 0) + 10 : 100;
       this.animateTranslate(prevModalState, exitTranslate);
@@ -528,7 +529,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         modalState.hidden = translateY === 100;
 
         if (modalState.hidden) {
-          this.props.closeActiveModal();
+          this.props.onExit();
         }
 
         setStateCallback = function setStateCallback() {
@@ -570,7 +571,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         modalState.hidden = translateY === 100;
 
         if (modalState.hidden) {
-          this.props.closeActiveModal();
+          this.props.onExit();
         }
 
         setStateCallback = function setStateCallback() {
@@ -672,7 +673,8 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         value: true
       }, (0, _jsxRuntime.createScopedElement)(_ModalRootContext.default.Provider, {
         value: this.modalRootContext
-      }, (0, _jsxRuntime.createScopedElement)(_Touch.Touch, {
+      }, (0, _jsxRuntime.createScopedElement)(_Touch.Touch // eslint-disable-next-line vkui/no-object-expression-in-arguments
+      , {
         vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("ModalRoot", this.props.platform), {
           "ModalRoot--vkapps": ((_this$props$configPro = this.props.configProvider) === null || _this$props$configPro === void 0 ? void 0 : _this$props$configPro.webviewType) === _ConfigProviderContext.WebviewType.VKAPPS,
           "ModalRoot--touched": touchDown,
@@ -683,7 +685,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         onScroll: this.onScroll
       }, (0, _jsxRuntime.createScopedElement)("div", {
         vkuiClass: "ModalRoot__mask",
-        onClick: this.props.closeActiveModal,
+        onClick: this.props.onExit,
         ref: this.maskElementRef
       }), (0, _jsxRuntime.createScopedElement)("div", {
         vkuiClass: "ModalRoot__viewport",
@@ -709,8 +711,9 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
               modalState.modalElement = e;
             }
           },
-          onClose: _this7.props.closeActiveModal,
-          timeout: _this7.timeout,
+          onClose: _this7.props.onExit,
+          timeout: _this7.timeout // eslint-disable-next-line vkui/no-object-expression-in-arguments
+          ,
           vkuiClass: (0, _classNames.classNames)("ModalRoot__modal", {
             "ModalRoot__modal--active": modalId === activeModal,
             "ModalRoot__modal--prev": modalId === exitingModal,
@@ -745,7 +748,7 @@ function initModal(modalState) {
       return initCardModal(modalState);
 
     default:
-      IS_DEV && warn("[initActiveModal] modalState.type is unknown");
+      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");
   }
 }