@vkontakte/vkui 4.30.0 → 4.33.0

package/dist/cssm/components/Alert/Alert.js

@@ -1,277 +1,214 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["actions", "actionsLayout", "children", "className", "style", "platform", "viewWidth", "text", "header"];
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["action", "onItemClick"],
+    _excluded2 = ["actions", "actionsLayout", "children", "className", "style", "text", "header", "onClose", "dismissLabel"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
 import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
-import { transitionEvent } from "../../lib/supportEvents";
 import { ANDROID, VKCOM, IOS } from "../../lib/platform";
-import { withPlatform } from "../../hoc/withPlatform";
-import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
+import { ViewWidth } from "../../hoc/withAdaptivity";
 import { Button } from "../Button/Button";
-import { hasReactNode } from "../../lib/utils";
-import Headline from "../Typography/Headline/Headline";
+import { hasReactNode, stopPropagation } from "../../lib/utils";
 import { Title } from "../Typography/Title/Title";
 import { Caption } from "../Typography/Caption/Caption";
-import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
+import { Text } from "../Typography/Text/Text";
+import { ModalDismissButton } from "../ModalDismissButton/ModalDismissButton";
 import { FocusTrap } from "../FocusTrap/FocusTrap";
-import { withContext } from "../../hoc/withContext";
-import { ScrollContext } from "../AppRoot/ScrollContext";
+import { useScrollLock } from "../AppRoot/ScrollContext";
+import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import "./Alert.css";
 
-var AlertComponent = /*#__PURE__*/function (_React$Component) {
-  _inherits(AlertComponent, _React$Component);
-
-  var _super = _createSuper(AlertComponent);
-
-  function AlertComponent(props) {
-    var _this;
-
-    _classCallCheck(this, AlertComponent);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "element", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "transitionFinishTimeout", undefined);
-
-    _defineProperty(_assertThisInitialized(_this), "onItemClick", function (item) {
-      return function () {
-        var action = item.action,
-            autoclose = item.autoclose;
-
-        if (autoclose) {
-          _this.setState({
-            closing: true
-          });
-
-          _this.waitTransitionFinish(function (e) {
-            if (!e || e.propertyName === "opacity") {
-              var _this$props$onClose, _this$props;
-
-              autoclose && ((_this$props$onClose = (_this$props = _this.props).onClose) === null || _this$props$onClose === void 0 ? void 0 : _this$props$onClose.call(_this$props));
-              action && action();
-            }
-          });
-        } else {
-          action && action();
-        }
-      };
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onClose", function () {
-      _this.setState({
-        closing: true
-      });
-
-      _this.waitTransitionFinish(function (e) {
-        if (!e || e.propertyName === "opacity") {
-          var _this$props$onClose2, _this$props2;
-
-          (_this$props$onClose2 = (_this$props2 = _this.props).onClose) === null || _this$props$onClose2 === void 0 ? void 0 : _this$props$onClose2.call(_this$props2);
-        }
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "stopPropagation", function (e) {
-      e.stopPropagation();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderAction", function (action, i) {
-      var platform = _this.props.platform;
-
-      if (platform === IOS) {
-        var _action$Component = action.Component,
-            Component = _action$Component === void 0 ? "button" : _action$Component;
-        return createScopedElement(Tappable, {
-          Component: action.href ? "a" : Component,
-          vkuiClass: classNames("Alert__action", "Alert__action--".concat(action.mode)),
-          onClick: _this.onItemClick(action),
-          href: action.href,
-          key: "alert-action-".concat(i),
-          target: action.target
-        }, action.title);
-      }
-
-      var mode = action.mode === "cancel" ? "secondary" : "primary";
-
-      if (platform === ANDROID) {
-        mode = "tertiary";
-
-        if (_this.props.viewWidth === ViewWidth.DESKTOP && action.mode === "destructive") {
-          mode = "destructive";
-        }
-      }
-
-      return createScopedElement(Button, {
-        vkuiClass: classNames("Alert__button", "Alert__button--".concat(action.mode)),
-        mode: mode,
-        size: "m",
-        onClick: _this.onItemClick(action),
-        Component: action.Component,
-        href: action.href,
-        key: "alert-action-".concat(i),
-        target: action.target
-      }, action.title);
-    });
-
-    _this.element = /*#__PURE__*/React.createRef();
-    _this.state = {
-      closing: false
-    };
-    return _this;
+var AlertHeader = function AlertHeader(props) {
+  var platform = usePlatform();
+
+  switch (platform) {
+    case IOS:
+      return createScopedElement(Title, _extends({
+        vkuiClass: "Alert__header",
+        weight: "1",
+        level: "3"
+      }, props));
+
+    default:
+      return createScopedElement(Title, _extends({
+        vkuiClass: "Alert__header",
+        weight: "2",
+        level: "2"
+      }, props));
+  }
+};
+
+var AlertText = function AlertText(props) {
+  var platform = usePlatform();
+
+  switch (platform) {
+    case VKCOM:
+      return createScopedElement(Caption, _extends({
+        vkuiClass: "Alert__text"
+      }, props));
+
+    case IOS:
+      return createScopedElement(Caption, _extends({
+        vkuiClass: "Alert__text",
+        level: "2"
+      }, props));
+
+    default:
+      return createScopedElement(Text, _extends({
+        Component: "span",
+        vkuiClass: "Alert__text",
+        weight: "3"
+      }, props));
+  }
+};
+
+var AlertAction = function AlertAction(_ref) {
+  var action = _ref.action,
+      onItemClick = _ref.onItemClick,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var platform = usePlatform();
+
+  var _useAdaptivity = useAdaptivity(),
+      viewWidth = _useAdaptivity.viewWidth;
+
+  var handleItemClick = React.useCallback(function () {
+    return onItemClick(action);
+  }, [onItemClick, action]);
+
+  if (platform === IOS) {
+    var _action$Component = action.Component,
+        Component = _action$Component === void 0 ? "button" : _action$Component;
+    return createScopedElement(Tappable, _extends({
+      Component: action.href ? "a" : Component,
+      vkuiClass: classNames("Alert__action", "Alert__action--".concat(action.mode)),
+      onClick: handleItemClick,
+      href: action.href,
+      target: action.target
+    }, restProps), action.title);
   }
 
-  _createClass(AlertComponent, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props$scroll;
-
-      (_this$props$scroll = this.props.scroll) === null || _this$props$scroll === void 0 ? void 0 : _this$props$scroll.enableScrollLock();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var _this$props$scroll2;
-
-      (_this$props$scroll2 = this.props.scroll) === null || _this$props$scroll2 === void 0 ? void 0 : _this$props$scroll2.disableScrollLock();
-    }
-  }, {
-    key: "timeout",
-    get: function get() {
-      return this.props.platform === ANDROID || this.props.platform === VKCOM ? 200 : 300;
-    }
-  }, {
-    key: "waitTransitionFinish",
-    value: function waitTransitionFinish(eventHandler) {
-      if (transitionEvent.supported && this.element.current) {
-        this.element.current.removeEventListener(transitionEvent.name, eventHandler);
-        this.element.current.addEventListener(transitionEvent.name, eventHandler);
-      } else {
-        if (this.transitionFinishTimeout) {
-          clearTimeout(this.transitionFinishTimeout);
-        }
-
-        this.transitionFinishTimeout = setTimeout(eventHandler.bind(this), this.timeout);
-      }
-    }
-  }, {
-    key: "renderHeader",
-    value: function renderHeader(header) {
-      switch (this.props.platform) {
-        case VKCOM:
-          return createScopedElement(Headline, {
-            vkuiClass: "Alert__header",
-            weight: "medium"
-          }, header);
-
-        case IOS:
-          return createScopedElement(Title, {
-            vkuiClass: "Alert__header",
-            weight: "1",
-            level: "3"
-          }, header);
+  var mode = action.mode === "cancel" ? "secondary" : "primary";
 
-        case ANDROID:
-          return createScopedElement(Title, {
-            vkuiClass: "Alert__header",
-            weight: "2",
-            level: "2"
-          }, header);
+  if (platform === ANDROID) {
+    mode = "tertiary";
 
-        default:
-          return undefined;
-      }
+    if (viewWidth === ViewWidth.DESKTOP && action.mode === "destructive") {
+      mode = "destructive";
     }
-  }, {
-    key: "renderText",
-    value: function renderText(text) {
-      switch (this.props.platform) {
-        case VKCOM:
-          return createScopedElement(Caption, {
-            vkuiClass: "Alert__text"
-          }, text);
-
-        case IOS:
-          return createScopedElement(Caption, {
-            vkuiClass: "Alert__text",
-            level: "2"
-          }, text);
-
-        case ANDROID:
-          return createScopedElement(Headline, {
-            vkuiClass: "Alert__text",
-            weight: "regular"
-          }, text);
+  }
 
-        default:
-          return undefined;
+  return createScopedElement(Button, {
+    vkuiClass: classNames("Alert__button", "Alert__button--".concat(action.mode)),
+    mode: mode,
+    size: "m",
+    onClick: handleItemClick,
+    Component: action.Component,
+    href: action.href,
+    target: action.target
+  }, action.title);
+};
+/**
+ * @see https://vkcom.github.io/VKUI/#/Alert
+ */
+
+
+export var Alert = function Alert(_ref2) {
+  var _ref2$actions = _ref2.actions,
+      actions = _ref2$actions === void 0 ? [] : _ref2$actions,
+      _ref2$actionsLayout = _ref2.actionsLayout,
+      actionsLayout = _ref2$actionsLayout === void 0 ? "horizontal" : _ref2$actionsLayout,
+      children = _ref2.children,
+      className = _ref2.className,
+      style = _ref2.style,
+      text = _ref2.text,
+      header = _ref2.header,
+      onClose = _ref2.onClose,
+      _ref2$dismissLabel = _ref2.dismissLabel,
+      dismissLabel = _ref2$dismissLabel === void 0 ? "Закрыть предупреждение" : _ref2$dismissLabel,
+      restProps = _objectWithoutProperties(_ref2, _excluded2);
+
+  var platform = usePlatform();
+
+  var _useAdaptivity2 = useAdaptivity(),
+      viewWidth = _useAdaptivity2.viewWidth;
+
+  var _useWaitTransitionFin = useWaitTransitionFinish(),
+      waitTransitionFinish = _useWaitTransitionFin.waitTransitionFinish;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      closing = _React$useState2[0],
+      setClosing = _React$useState2[1];
+
+  var elementRef = React.useRef(null);
+  var resolvedActionsLayout = platform === VKCOM ? "horizontal" : actionsLayout;
+  var canShowCloseButton = platform === VKCOM || platform === ANDROID && viewWidth >= ViewWidth.SMALL_TABLET;
+  var isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
+  var timeout = platform === ANDROID || platform === VKCOM ? 200 : 300;
+  var close = React.useCallback(function () {
+    setClosing(true);
+    waitTransitionFinish(elementRef.current, function (e) {
+      if (!e || e.propertyName === "opacity") {
+        onClose && onClose();
       }
+    }, timeout);
+  }, [elementRef, waitTransitionFinish, onClose, timeout]);
+  var onItemClick = React.useCallback(function (item) {
+    var action = item.action,
+        autoclose = item.autoclose;
+
+    if (autoclose) {
+      setClosing(true);
+      waitTransitionFinish(elementRef.current, function (e) {
+        if (!e || e.propertyName === "opacity") {
+          onClose && onClose();
+          action && action();
+        }
+      }, timeout);
+    } else {
+      action && action();
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-          actions = _this$props3.actions,
-          actionsLayout = _this$props3.actionsLayout,
-          children = _this$props3.children,
-          className = _this$props3.className,
-          style = _this$props3.style,
-          platform = _this$props3.platform,
-          viewWidth = _this$props3.viewWidth,
-          text = _this$props3.text,
-          header = _this$props3.header,
-          restProps = _objectWithoutProperties(_this$props3, _excluded);
-
-      var closing = this.state.closing;
-      var resolvedActionsLayout = platform === VKCOM ? "horizontal" : actionsLayout;
-      var canShowCloseButton = platform === VKCOM || platform === ANDROID && viewWidth >= ViewWidth.SMALL_TABLET;
-      var isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
-      return createScopedElement(PopoutWrapper, {
-        className: className,
-        closing: closing,
-        style: style,
-        onClick: this.onClose
-      }, createScopedElement(FocusTrap, _extends({}, restProps, {
-        getRootRef: this.element,
-        onClick: this.stopPropagation,
-        onClose: this.onClose,
-        timeout: this.timeout // eslint-disable-next-line vkui/no-object-expression-in-arguments
-        ,
-        vkuiClass: classNames(getClassName("Alert", platform), {
-          "Alert--v": resolvedActionsLayout === "vertical",
-          "Alert--h": resolvedActionsLayout === "horizontal",
-          "Alert--closing": closing,
-          "Alert--desktop": isDesktop
-        })
-      }), canShowCloseButton && createScopedElement(ModalDismissButton, {
-        onClick: this.onClose
-      }), createScopedElement("div", {
-        vkuiClass: "Alert__content"
-      }, hasReactNode(header) && this.renderHeader(header), hasReactNode(text) && this.renderText(text), children), createScopedElement("footer", {
-        vkuiClass: "Alert__actions"
-      }, actions === null || actions === void 0 ? void 0 : actions.map(this.renderAction))));
-    }
-  }]);
-
-  return AlertComponent;
-}(React.Component);
-
-_defineProperty(AlertComponent, "defaultProps", {
-  actionsLayout: "horizontal",
-  actions: []
-});
-
-export var Alert = withContext(withPlatform(withAdaptivity(AlertComponent, {
-  viewWidth: true
-})), ScrollContext, "scroll");
+  }, [elementRef, waitTransitionFinish, onClose, timeout]);
+  useScrollLock();
+  return createScopedElement(PopoutWrapper, {
+    className: className,
+    closing: closing,
+    style: style,
+    onClick: close
+  }, createScopedElement(FocusTrap, _extends({}, restProps, {
+    getRootRef: elementRef,
+    onClick: stopPropagation,
+    onClose: close,
+    timeout: timeout,
+    vkuiClass: classNames(getClassName("Alert", platform), resolvedActionsLayout === "vertical" ? "Alert--v" : "Alert--h", closing && "Alert--closing", isDesktop && "Alert--desktop"),
+    role: "alertdialog",
+    "aria-modal": true,
+    "aria-labelledby": "vkui--alert--title",
+    "aria-describedby": "vkui--alert--desc"
+  }), createScopedElement("div", {
+    vkuiClass: "Alert__content"
+  }, hasReactNode(header) && createScopedElement(AlertHeader, {
+    id: "vkui--alert--title"
+  }, header), hasReactNode(text) && createScopedElement(AlertText, {
+    id: "vkui--alert--desc"
+  }, text), children), createScopedElement("div", {
+    vkuiClass: "Alert__actions"
+  }, actions.map(function (action, i) {
+    return createScopedElement(AlertAction, {
+      key: i,
+      action: action,
+      onItemClick: onItemClick
+    });
+  })), canShowCloseButton && createScopedElement(ModalDismissButton, {
+    onClick: close,
+    "aria-label": dismissLabel
+  })));
+};
 //# sourceMappingURL=Alert.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"names":["React","Tappable","PopoutWrapper","getClassName","classNames","transitionEvent","ANDROID","VKCOM","IOS","withPlatform","withAdaptivity","ViewWidth","Button","hasReactNode","Headline","Title","Caption","ModalDismissButton","FocusTrap","withContext","ScrollContext","AlertComponent","props","undefined","item","action","autoclose","setState","closing","waitTransitionFinish","e","propertyName","onClose","stopPropagation","i","platform","Component","href","mode","onItemClick","target","title","viewWidth","DESKTOP","element","createRef","state","scroll","enableScrollLock","disableScrollLock","eventHandler","supported","current","removeEventListener","name","addEventListener","transitionFinishTimeout","clearTimeout","setTimeout","bind","timeout","header","text","actions","actionsLayout","children","className","style","restProps","resolvedActionsLayout","canShowCloseButton","SMALL_TABLET","isDesktop","renderHeader","renderText","map","renderAction","Alert"],"mappings":";;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,QAAP;AACA,SAASC,aAAT;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SAASC,eAAT;AACA,SAASC,OAAT,EAAkBC,KAAlB,EAAyBC,GAAzB;AAEA,SAASC,YAAT;AACA,SAASC,cAAT,EAAyBC,SAAzB;AACA,SAASC,MAAT;AACA,SAASC,YAAT;AACA,OAAOC,QAAP;AACA,SAASC,KAAT;AACA,SAASC,OAAT;AACA,OAAOC,kBAAP;AACA,SAASC,SAAT;AAKA,SAASC,WAAT;AACA,SACEC,aADF;AAIA;;IAmCMC,c;;;;;AACJ,0BAAYC,KAAZ,EAAgC;AAAA;;AAAA;;AAC9B,8BAAMA,KAAN;;AAD8B;;AAAA,8EAkBsBC,SAlBtB;;AAAA,kEA+BA,UAACC,IAAD;AAAA,aAAgC,YAAM;AACpE,YAAQC,MAAR,GAA8BD,IAA9B,CAAQC,MAAR;AAAA,YAAgBC,SAAhB,GAA8BF,IAA9B,CAAgBE,SAAhB;;AAEA,YAAIA,SAAJ,EAAe;AACb,gBAAKC,QAAL,CAAc;AAAEC,YAAAA,OAAO,EAAE;AAAX,WAAd;;AACA,gBAAKC,oBAAL,CAA0B,UAACC,CAAD,EAAyB;AACjD,gBAAI,CAACA,CAAD,IAAMA,CAAC,CAACC,YAAF,KAAmB,SAA7B,EAAwC;AAAA;;AACtCL,cAAAA,SAAS,4BAAI,qBAAKJ,KAAL,EAAWU,OAAf,wDAAI,qCAAJ,CAAT;AACAP,cAAAA,MAAM,IAAIA,MAAM,EAAhB;AACD;AACF,WALD;AAMD,SARD,MAQO;AACLA,UAAAA,MAAM,IAAIA,MAAM,EAAhB;AACD;AACF,OAd+B;AAAA,KA/BA;;AAAA,8DA+CR,YAAM;AAC5B,YAAKE,QAAL,CAAc;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAAd;;AACA,YAAKC,oBAAL,CAA0B,UAACC,CAAD,EAAyB;AACjD,YAAI,CAACA,CAAD,IAAMA,CAAC,CAACC,YAAF,KAAmB,SAA7B,EAAwC;AAAA;;AACtC,wDAAKT,KAAL,EAAWU,OAAX;AACD;AACF,OAJD;AAKD,KAtD+B;;AAAA,sEAwDW,UAACF,CAAD,EAA6B;AACtEA,MAAAA,CAAC,CAACG,eAAF;AACD,KA1D+B;;AAAA,mEA+HjB,UAACR,MAAD,EAA+BS,CAA/B,EAA6C;AAC1D,UAAQC,QAAR,GAAqB,MAAKb,KAA1B,CAAQa,QAAR;;AAEA,UAAIA,QAAQ,KAAK3B,GAAjB,EAAsB;AACpB,gCAAiCiB,MAAjC,CAAQW,SAAR;AAAA,YAAQA,SAAR,kCAAoB,QAApB;AACA,eACE,oBAAC,QAAD;AACE,UAAA,SAAS,EAAEX,MAAM,CAACY,IAAP,GAAc,GAAd,GAAoBD,SADjC;AAEE,UAAA,SAAS,EAAEhC,UAAU,CACnB,eADmB,2BAEDqB,MAAM,CAACa,IAFN,EAFvB;AAME,UAAA,OAAO,EAAE,MAAKC,WAAL,CAAiBd,MAAjB,CANX;AAOE,UAAA,IAAI,EAAEA,MAAM,CAACY,IAPf;AAQE,UAAA,GAAG,yBAAkBH,CAAlB,CARL;AASE,UAAA,MAAM,EAAET,MAAM,CAACe;AATjB,WAWGf,MAAM,CAACgB,KAXV,CADF;AAeD;;AAED,UAAIH,IAAyB,GAC3Bb,MAAM,CAACa,IAAP,KAAgB,QAAhB,GAA2B,WAA3B,GAAyC,SAD3C;;AAGA,UAAIH,QAAQ,KAAK7B,OAAjB,EAA0B;AACxBgC,QAAAA,IAAI,GAAG,UAAP;;AAEA,YACE,MAAKhB,KAAL,CAAWoB,SAAX,KAAyB/B,SAAS,CAACgC,OAAnC,IACAlB,MAAM,CAACa,IAAP,KAAgB,aAFlB,EAGE;AACAA,UAAAA,IAAI,GAAG,aAAP;AACD;AACF;;AAED,aACE,oBAAC,MAAD;AACE,QAAA,SAAS,EAAElC,UAAU,CAAC,eAAD,2BAAoCqB,MAAM,CAACa,IAA3C,EADvB;AAEE,QAAA,IAAI,EAAEA,IAFR;AAGE,QAAA,IAAI,EAAC,GAHP;AAIE,QAAA,OAAO,EAAE,MAAKC,WAAL,CAAiBd,MAAjB,CAJX;AAKE,QAAA,SAAS,EAAEA,MAAM,CAACW,SALpB;AAME,QAAA,IAAI,EAAEX,MAAM,CAACY,IANf;AAOE,QAAA,GAAG,yBAAkBH,CAAlB,CAPL;AAQE,QAAA,MAAM,EAAET,MAAM,CAACe;AARjB,SAUGf,MAAM,CAACgB,KAVV,CADF;AAcD,KAjL+B;;AAE9B,UAAKG,OAAL,gBAAe5C,KAAK,CAAC6C,SAAN,EAAf;AACA,UAAKC,KAAL,GAAa;AACXlB,MAAAA,OAAO,EAAE;AADE,KAAb;AAH8B;AAM/B;;;;WAED,6BAAoB;AAAA;;AAClB,iCAAKN,KAAL,CAAWyB,MAAX,0EAAmBC,gBAAnB;AACD;;;WAED,gCAAuB;AAAA;;AACrB,kCAAK1B,KAAL,CAAWyB,MAAX,4EAAmBE,iBAAnB;AACD;;;SAWD,eAA8B;AAC5B,aAAO,KAAK3B,KAAL,CAAWa,QAAX,KAAwB7B,OAAxB,IAAmC,KAAKgB,KAAL,CAAWa,QAAX,KAAwB5B,KAA3D,GACH,GADG,GAEH,GAFJ;AAGD;;;WA+BD,8BAAqB2C,YAArB,EAAyD;AACvD,UAAI7C,eAAe,CAAC8C,SAAhB,IAA6B,KAAKP,OAAL,CAAaQ,OAA9C,EAAuD;AACrD,aAAKR,OAAL,CAAaQ,OAAb,CAAqBC,mBAArB,CACEhD,eAAe,CAACiD,IADlB,EAEEJ,YAFF;AAIA,aAAKN,OAAL,CAAaQ,OAAb,CAAqBG,gBAArB,CACElD,eAAe,CAACiD,IADlB,EAEEJ,YAFF;AAID,OATD,MASO;AACL,YAAI,KAAKM,uBAAT,EAAkC;AAChCC,UAAAA,YAAY,CAAC,KAAKD,uBAAN,CAAZ;AACD;;AACD,aAAKA,uBAAL,GAA+BE,UAAU,CACvCR,YAAY,CAACS,IAAb,CAAkB,IAAlB,CADuC,EAEvC,KAAKC,OAFkC,CAAzC;AAID;AACF;;;WAED,sBAAaC,MAAb,EAAsC;AACpC,cAAQ,KAAKvC,KAAL,CAAWa,QAAnB;AACE,aAAK5B,KAAL;AACE,iBACE,oBAAC,QAAD;AAAU,YAAA,SAAS,EAAC,eAApB;AAAoC,YAAA,MAAM,EAAC;AAA3C,aACGsD,MADH,CADF;;AAKF,aAAKrD,GAAL;AACE,iBACE,oBAAC,KAAD;AAAO,YAAA,SAAS,EAAC,eAAjB;AAAiC,YAAA,MAAM,EAAC,GAAxC;AAA4C,YAAA,KAAK,EAAC;AAAlD,aACGqD,MADH,CADF;;AAKF,aAAKvD,OAAL;AACE,iBACE,oBAAC,KAAD;AAAO,YAAA,SAAS,EAAC,eAAjB;AAAiC,YAAA,MAAM,EAAC,GAAxC;AAA4C,YAAA,KAAK,EAAC;AAAlD,aACGuD,MADH,CADF;;AAKF;AACE,iBAAOtC,SAAP;AApBJ;AAsBD;;;WAED,oBAAWuC,IAAX,EAAkC;AAChC,cAAQ,KAAKxC,KAAL,CAAWa,QAAnB;AACE,aAAK5B,KAAL;AACE,iBAAO,oBAAC,OAAD;AAAS,YAAA,SAAS,EAAC;AAAnB,aAAkCuD,IAAlC,CAAP;;AACF,aAAKtD,GAAL;AACE,iBACE,oBAAC,OAAD;AAAS,YAAA,SAAS,EAAC,aAAnB;AAAiC,YAAA,KAAK,EAAC;AAAvC,aACGsD,IADH,CADF;;AAKF,aAAKxD,OAAL;AACE,iBACE,oBAAC,QAAD;AAAU,YAAA,SAAS,EAAC,aAApB;AAAkC,YAAA,MAAM,EAAC;AAAzC,aACGwD,IADH,CADF;;AAKF;AACE,iBAAOvC,SAAP;AAhBJ;AAkBD;;;WAsDD,kBAAS;AACP,yBAWI,KAAKD,KAXT;AAAA,UACEyC,OADF,gBACEA,OADF;AAAA,UAEEC,aAFF,gBAEEA,aAFF;AAAA,UAGEC,QAHF,gBAGEA,QAHF;AAAA,UAIEC,SAJF,gBAIEA,SAJF;AAAA,UAKEC,KALF,gBAKEA,KALF;AAAA,UAMEhC,QANF,gBAMEA,QANF;AAAA,UAOEO,SAPF,gBAOEA,SAPF;AAAA,UAQEoB,IARF,gBAQEA,IARF;AAAA,UASED,MATF,gBASEA,MATF;AAAA,UAUKO,SAVL;;AAYA,UAAQxC,OAAR,GAAoB,KAAKkB,KAAzB,CAAQlB,OAAR;AAEA,UAAMyC,qBAAmD,GACvDlC,QAAQ,KAAK5B,KAAb,GAAqB,YAArB,GAAoCyD,aADtC;AAEA,UAAMM,kBAAkB,GACtBnC,QAAQ,KAAK5B,KAAb,IACC4B,QAAQ,KAAK7B,OAAb,IAAwBoC,SAAS,IAAI/B,SAAS,CAAC4D,YAFlD;AAGA,UAAMC,SAAS,GAAG9B,SAAS,IAAI/B,SAAS,CAAC4D,YAAzC;AAEA,aACE,oBAAC,aAAD;AACE,QAAA,SAAS,EAAEL,SADb;AAEE,QAAA,OAAO,EAAEtC,OAFX;AAGE,QAAA,KAAK,EAAEuC,KAHT;AAIE,QAAA,OAAO,EAAE,KAAKnC;AAJhB,SAME,oBAAC,SAAD,eACMoC,SADN;AAEE,QAAA,UAAU,EAAE,KAAKxB,OAFnB;AAGE,QAAA,OAAO,EAAE,KAAKX,eAHhB;AAIE,QAAA,OAAO,EAAE,KAAKD,OAJhB;AAKE,QAAA,OAAO,EAAE,KAAK4B,OALhB,CAME;AANF;AAOE,QAAA,SAAS,EAAExD,UAAU,CAACD,YAAY,CAAC,OAAD,EAAUgC,QAAV,CAAb,EAAkC;AACrD,sBAAYkC,qBAAqB,KAAK,UADe;AAErD,sBAAYA,qBAAqB,KAAK,YAFe;AAGrD,4BAAkBzC,OAHmC;AAIrD,4BAAkB4C;AAJmC,SAAlC;AAPvB,UAcGF,kBAAkB,IAAI,oBAAC,kBAAD;AAAoB,QAAA,OAAO,EAAE,KAAKtC;AAAlC,QAdzB,EAeE;AAAK,QAAA,SAAS,EAAC;AAAf,SACGnB,YAAY,CAACgD,MAAD,CAAZ,IAAwB,KAAKY,YAAL,CAAkBZ,MAAlB,CAD3B,EAEGhD,YAAY,CAACiD,IAAD,CAAZ,IAAsB,KAAKY,UAAL,CAAgBZ,IAAhB,CAFzB,EAGGG,QAHH,CAfF,EAoBE;AAAQ,QAAA,SAAS,EAAC;AAAlB,SACGF,OADH,aACGA,OADH,uBACGA,OAAO,CAAEY,GAAT,CAAa,KAAKC,YAAlB,CADH,CApBF,CANF,CADF;AAiCD;;;;EA3O0B5E,KAAK,CAACoC,S;;gBAA7Bf,c,kBAqBwC;AAC1C2C,EAAAA,aAAa,EAAE,YAD2B;AAE1CD,EAAAA,OAAO,EAAE;AAFiC,C;;AAyN9C,OAAO,IAAMc,KAAK,GAAG1D,WAAW,CAC9BV,YAAY,CACVC,cAAc,CAACW,cAAD,EAAiB;AAC7BqB,EAAAA,SAAS,EAAE;AADkB,CAAjB,CADJ,CADkB,EAM9BtB,aAN8B,EAO9B,QAP8B,CAAzB","sourcesContent":["import * as React from \"react\";\nimport Tappable from \"../Tappable/Tappable\";\nimport { PopoutWrapper } from \"../PopoutWrapper/PopoutWrapper\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { transitionEvent } from \"../../lib/supportEvents\";\nimport { ANDROID, VKCOM, IOS } from \"../../lib/platform\";\nimport { HasPlatform } from \"../../types\";\nimport { withPlatform } from \"../../hoc/withPlatform\";\nimport { withAdaptivity, ViewWidth } from \"../../hoc/withAdaptivity\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport ModalDismissButton from \"../ModalDismissButton/ModalDismissButton\";\nimport { FocusTrap } from \"../FocusTrap/FocusTrap\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport { withContext } from \"../../hoc/withContext\";\nimport {\n  ScrollContext,\n  ScrollContextInterface,\n} from \"../AppRoot/ScrollContext\";\nimport \"./Alert.css\";\n\nexport type AlertActionInterface = AlertAction &\n  React.AnchorHTMLAttributes<HTMLElement>;\n\nexport interface AlertAction extends Pick<ButtonProps, \"Component\" | \"href\"> {\n  title: string;\n  action?: VoidFunction;\n  autoclose?: boolean;\n  mode: \"cancel\" | \"destructive\" | \"default\";\n}\n\nexport interface AlertProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasPlatform,\n    AdaptivityProps {\n  actionsLayout?: \"vertical\" | \"horizontal\";\n  actions?: AlertAction[];\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose?: VoidFunction;\n  /** @ignore */\n  scroll?: ScrollContextInterface;\n}\n\nexport type TAlertProps = AlertProps & AdaptivityContextInterface;\n\nexport interface AlertState {\n  closing: boolean;\n}\n\ntype TransitionEndHandler = (e?: TransitionEvent) => void;\n\ntype ItemClickHandler = (item: AlertActionInterface) => () => void;\n\nclass AlertComponent extends React.Component<TAlertProps, AlertState> {\n  constructor(props: TAlertProps) {\n    super(props);\n    this.element = React.createRef();\n    this.state = {\n      closing: false,\n    };\n  }\n\n  componentDidMount() {\n    this.props.scroll?.enableScrollLock();\n  }\n\n  componentWillUnmount() {\n    this.props.scroll?.disableScrollLock();\n  }\n\n  element: React.RefObject<HTMLDivElement>;\n\n  private transitionFinishTimeout: number | undefined = undefined;\n\n  static defaultProps: Partial<TAlertProps> = {\n    actionsLayout: \"horizontal\",\n    actions: [],\n  };\n\n  private get timeout(): number {\n    return this.props.platform === ANDROID || this.props.platform === VKCOM\n      ? 200\n      : 300;\n  }\n\n  onItemClick: ItemClickHandler = (item: AlertActionInterface) => () => {\n    const { action, autoclose } = item;\n\n    if (autoclose) {\n      this.setState({ closing: true });\n      this.waitTransitionFinish((e?: TransitionEvent) => {\n        if (!e || e.propertyName === \"opacity\") {\n          autoclose && this.props.onClose?.();\n          action && action();\n        }\n      });\n    } else {\n      action && action();\n    }\n  };\n\n  onClose: VoidFunction = () => {\n    this.setState({ closing: true });\n    this.waitTransitionFinish((e?: TransitionEvent) => {\n      if (!e || e.propertyName === \"opacity\") {\n        this.props.onClose?.();\n      }\n    });\n  };\n\n  stopPropagation: React.MouseEventHandler = (e: React.SyntheticEvent) => {\n    e.stopPropagation();\n  };\n\n  waitTransitionFinish(eventHandler: TransitionEndHandler) {\n    if (transitionEvent.supported && this.element.current) {\n      this.element.current.removeEventListener(\n        transitionEvent.name as string,\n        eventHandler as () => void\n      );\n      this.element.current.addEventListener(\n        transitionEvent.name as string,\n        eventHandler as () => void\n      );\n    } else {\n      if (this.transitionFinishTimeout) {\n        clearTimeout(this.transitionFinishTimeout);\n      }\n      this.transitionFinishTimeout = setTimeout(\n        eventHandler.bind(this),\n        this.timeout\n      );\n    }\n  }\n\n  renderHeader(header: React.ReactNode) {\n    switch (this.props.platform) {\n      case VKCOM:\n        return (\n          <Headline vkuiClass=\"Alert__header\" weight=\"medium\">\n            {header}\n          </Headline>\n        );\n      case IOS:\n        return (\n          <Title vkuiClass=\"Alert__header\" weight=\"1\" level=\"3\">\n            {header}\n          </Title>\n        );\n      case ANDROID:\n        return (\n          <Title vkuiClass=\"Alert__header\" weight=\"2\" level=\"2\">\n            {header}\n          </Title>\n        );\n      default:\n        return undefined;\n    }\n  }\n\n  renderText(text: React.ReactNode) {\n    switch (this.props.platform) {\n      case VKCOM:\n        return <Caption vkuiClass=\"Alert__text\">{text}</Caption>;\n      case IOS:\n        return (\n          <Caption vkuiClass=\"Alert__text\" level=\"2\">\n            {text}\n          </Caption>\n        );\n      case ANDROID:\n        return (\n          <Headline vkuiClass=\"Alert__text\" weight=\"regular\">\n            {text}\n          </Headline>\n        );\n      default:\n        return undefined;\n    }\n  }\n\n  renderAction = (action: AlertActionInterface, i: number) => {\n    const { platform } = this.props;\n\n    if (platform === IOS) {\n      const { Component = \"button\" } = action;\n      return (\n        <Tappable\n          Component={action.href ? \"a\" : Component}\n          vkuiClass={classNames(\n            \"Alert__action\",\n            `Alert__action--${action.mode}`\n          )}\n          onClick={this.onItemClick(action)}\n          href={action.href}\n          key={`alert-action-${i}`}\n          target={action.target}\n        >\n          {action.title}\n        </Tappable>\n      );\n    }\n\n    let mode: ButtonProps[\"mode\"] =\n      action.mode === \"cancel\" ? \"secondary\" : \"primary\";\n\n    if (platform === ANDROID) {\n      mode = \"tertiary\";\n\n      if (\n        this.props.viewWidth === ViewWidth.DESKTOP &&\n        action.mode === \"destructive\"\n      ) {\n        mode = \"destructive\";\n      }\n    }\n\n    return (\n      <Button\n        vkuiClass={classNames(\"Alert__button\", `Alert__button--${action.mode}`)}\n        mode={mode}\n        size=\"m\"\n        onClick={this.onItemClick(action)}\n        Component={action.Component}\n        href={action.href}\n        key={`alert-action-${i}`}\n        target={action.target}\n      >\n        {action.title}\n      </Button>\n    );\n  };\n\n  render() {\n    const {\n      actions,\n      actionsLayout,\n      children,\n      className,\n      style,\n      platform,\n      viewWidth,\n      text,\n      header,\n      ...restProps\n    } = this.props;\n    const { closing } = this.state;\n\n    const resolvedActionsLayout: TAlertProps[\"actionsLayout\"] =\n      platform === VKCOM ? \"horizontal\" : actionsLayout;\n    const canShowCloseButton =\n      platform === VKCOM ||\n      (platform === ANDROID && viewWidth >= ViewWidth.SMALL_TABLET);\n    const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n\n    return (\n      <PopoutWrapper\n        className={className}\n        closing={closing}\n        style={style}\n        onClick={this.onClose}\n      >\n        <FocusTrap\n          {...restProps}\n          getRootRef={this.element}\n          onClick={this.stopPropagation}\n          onClose={this.onClose}\n          timeout={this.timeout}\n          // eslint-disable-next-line vkui/no-object-expression-in-arguments\n          vkuiClass={classNames(getClassName(\"Alert\", platform), {\n            \"Alert--v\": resolvedActionsLayout === \"vertical\",\n            \"Alert--h\": resolvedActionsLayout === \"horizontal\",\n            \"Alert--closing\": closing,\n            \"Alert--desktop\": isDesktop,\n          })}\n        >\n          {canShowCloseButton && <ModalDismissButton onClick={this.onClose} />}\n          <div vkuiClass=\"Alert__content\">\n            {hasReactNode(header) && this.renderHeader(header)}\n            {hasReactNode(text) && this.renderText(text)}\n            {children}\n          </div>\n          <footer vkuiClass=\"Alert__actions\">\n            {actions?.map(this.renderAction)}\n          </footer>\n        </FocusTrap>\n      </PopoutWrapper>\n    );\n  }\n}\n\nexport const Alert = withContext(\n  withPlatform(\n    withAdaptivity(AlertComponent, {\n      viewWidth: true,\n    })\n  ),\n  ScrollContext,\n  \"scroll\"\n);\n"],"file":"Alert.js"}
+{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"names":["React","Tappable","PopoutWrapper","getClassName","classNames","ANDROID","VKCOM","IOS","ViewWidth","Button","hasReactNode","stopPropagation","Title","Caption","Text","ModalDismissButton","FocusTrap","useScrollLock","useWaitTransitionFinish","usePlatform","useAdaptivity","AlertHeader","props","platform","AlertText","AlertAction","action","onItemClick","restProps","viewWidth","handleItemClick","useCallback","Component","href","mode","target","title","DESKTOP","Alert","actions","actionsLayout","children","className","style","text","header","onClose","dismissLabel","waitTransitionFinish","useState","closing","setClosing","elementRef","useRef","resolvedActionsLayout","canShowCloseButton","SMALL_TABLET","isDesktop","timeout","close","current","e","propertyName","item","autoclose","map","i"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { PopoutWrapper } from \"../PopoutWrapper/PopoutWrapper\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { ANDROID, VKCOM, IOS } from \"../../lib/platform\";\nimport { ViewWidth } from \"../../hoc/withAdaptivity\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport { hasReactNode, stopPropagation } from \"../../lib/utils\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { ModalDismissButton } from \"../ModalDismissButton/ModalDismissButton\";\nimport { FocusTrap } from \"../FocusTrap/FocusTrap\";\nimport { useScrollLock } from \"../AppRoot/ScrollContext\";\nimport { useWaitTransitionFinish } from \"../../hooks/useWaitTransitionFinish\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./Alert.css\";\n\nexport type AlertActionInterface = AlertAction &\n  React.AnchorHTMLAttributes<HTMLElement>;\n\nexport interface AlertAction extends Pick<ButtonProps, \"Component\" | \"href\"> {\n  title: string;\n  action?: VoidFunction;\n  autoclose?: boolean;\n  mode: \"cancel\" | \"destructive\" | \"default\";\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n  actionsLayout?: \"vertical\" | \"horizontal\";\n  actions?: AlertAction[];\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose?: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n}\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\n\ninterface AlertTypography {\n  id: string;\n}\n\nconst AlertHeader: React.FC<AlertTypography> = (props) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case IOS:\n      return (\n        <Title vkuiClass=\"Alert__header\" weight=\"1\" level=\"3\" {...props} />\n      );\n    default:\n      return (\n        <Title vkuiClass=\"Alert__header\" weight=\"2\" level=\"2\" {...props} />\n      );\n  }\n};\n\nconst AlertText: React.FC<AlertTypography> = (props) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case VKCOM:\n      return <Caption vkuiClass=\"Alert__text\" {...props} />;\n    case IOS:\n      return <Caption vkuiClass=\"Alert__text\" level=\"2\" {...props} />;\n    default:\n      return (\n        <Text Component=\"span\" vkuiClass=\"Alert__text\" weight=\"3\" {...props} />\n      );\n  }\n};\n\ninterface AlertActionProps {\n  action: AlertActionInterface;\n  onItemClick: ItemClickHandler;\n}\n\nconst AlertAction: React.FC<AlertActionProps> = ({\n  action,\n  onItemClick,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivity();\n  const handleItemClick = React.useCallback(\n    () => onItemClick(action),\n    [onItemClick, action]\n  );\n\n  if (platform === IOS) {\n    const { Component = \"button\" } = action;\n    return (\n      <Tappable\n        Component={action.href ? \"a\" : Component}\n        vkuiClass={classNames(\"Alert__action\", `Alert__action--${action.mode}`)}\n        onClick={handleItemClick}\n        href={action.href}\n        target={action.target}\n        {...restProps}\n      >\n        {action.title}\n      </Tappable>\n    );\n  }\n\n  let mode: ButtonProps[\"mode\"] =\n    action.mode === \"cancel\" ? \"secondary\" : \"primary\";\n\n  if (platform === ANDROID) {\n    mode = \"tertiary\";\n\n    if (viewWidth === ViewWidth.DESKTOP && action.mode === \"destructive\") {\n      mode = \"destructive\";\n    }\n  }\n\n  return (\n    <Button\n      vkuiClass={classNames(\"Alert__button\", `Alert__button--${action.mode}`)}\n      mode={mode}\n      size=\"m\"\n      onClick={handleItemClick}\n      Component={action.Component}\n      href={action.href}\n      target={action.target}\n    >\n      {action.title}\n    </Button>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert: React.FC<AlertProps> = ({\n  actions = [],\n  actionsLayout = \"horizontal\",\n  children,\n  className,\n  style,\n  text,\n  header,\n  onClose,\n  dismissLabel = \"Закрыть предупреждение\",\n  ...restProps\n}) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivity();\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const resolvedActionsLayout: AlertProps[\"actionsLayout\"] =\n    platform === VKCOM ? \"horizontal\" : actionsLayout;\n  const canShowCloseButton =\n    platform === VKCOM ||\n    (platform === ANDROID && viewWidth >= ViewWidth.SMALL_TABLET);\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n\n  const timeout = platform === ANDROID || platform === VKCOM ? 200 : 300;\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n    waitTransitionFinish(\n      elementRef.current,\n      (e?: TransitionEvent) => {\n        if (!e || e.propertyName === \"opacity\") {\n          onClose && onClose();\n        }\n      },\n      timeout\n    );\n  }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n  const onItemClick: ItemClickHandler = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action, autoclose } = item;\n\n      if (autoclose) {\n        setClosing(true);\n        waitTransitionFinish(\n          elementRef.current,\n          (e?: TransitionEvent) => {\n            if (!e || e.propertyName === \"opacity\") {\n              onClose && onClose();\n              action && action();\n            }\n          },\n          timeout\n        );\n      } else {\n        action && action();\n      }\n    },\n    [elementRef, waitTransitionFinish, onClose, timeout]\n  );\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper\n      className={className}\n      closing={closing}\n      style={style}\n      onClick={close}\n    >\n      <FocusTrap\n        {...restProps}\n        getRootRef={elementRef}\n        onClick={stopPropagation}\n        onClose={close}\n        timeout={timeout}\n        vkuiClass={classNames(\n          getClassName(\"Alert\", platform),\n          resolvedActionsLayout === \"vertical\" ? \"Alert--v\" : \"Alert--h\",\n          closing && \"Alert--closing\",\n          isDesktop && \"Alert--desktop\"\n        )}\n        role=\"alertdialog\"\n        aria-modal\n        aria-labelledby=\"vkui--alert--title\"\n        aria-describedby=\"vkui--alert--desc\"\n      >\n        <div vkuiClass=\"Alert__content\">\n          {hasReactNode(header) && (\n            <AlertHeader id=\"vkui--alert--title\">{header}</AlertHeader>\n          )}\n          {hasReactNode(text) && (\n            <AlertText id=\"vkui--alert--desc\">{text}</AlertText>\n          )}\n          {children}\n        </div>\n        <div vkuiClass=\"Alert__actions\">\n          {actions.map((action, i) => (\n            <AlertAction key={i} action={action} onItemClick={onItemClick} />\n          ))}\n        </div>\n        {canShowCloseButton && (\n          <ModalDismissButton onClick={close} aria-label={dismissLabel} />\n        )}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"file":"Alert.js"}

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

@@ -11,4 +11,7 @@ export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement>, Pick
     noLegacyClasses?: boolean;
     scroll?: "global" | "contain";
 }
+/**
+ * @see https://vkcom.github.io/VKUI/#/AppRoot
+ */
 export declare const AppRoot: React.FC<Pick<AppRootProps, "window" | "hidden" | "dir" | "slot" | "style" | "title" | "scroll" | "color" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "mode" | "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" | "embedded" | "noLegacyClasses"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;

package/dist/cssm/components/AppRoot/AppRoot.js

@@ -12,7 +12,7 @@ import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { classScopingMode } from "../../lib/classScopingMode";
 import { IconSettingsProvider } from "@vkontakte/icons";
-import { elementScrollController, globalScrollController, ScrollContext } from "./ScrollContext";
+import { ElementScrollController, GlobalScrollController } from "./ScrollContext";
 import { noop } from "../../lib/utils";
 import { warnOnce } from "../../lib/warnOnce";
 import { useKeyboardInputTracker } from "../../hooks/useKeyboardInputTracker";
@@ -23,6 +23,10 @@ import "./AppRoot.css"; // Используйте classList, но будьте
 /* eslint-disable no-restricted-properties */
 
 var warn = warnOnce("AppRoot");
+/**
+ * @see https://vkcom.github.io/VKUI/#/AppRoot
+ */
+
 export var AppRoot = withAdaptivity(function (_ref) {
   var children = _ref.children,
       _mode = _ref.mode,
@@ -46,7 +50,6 @@ export var AppRoot = withAdaptivity(function (_ref) {
       setPortalRoot = _React$useState2[1];
 
   var _useDOM = useDOM(),
-      window = _useDOM.window,
       document = _useDOM.document;
 
   var insets = useInsets();
@@ -159,9 +162,9 @@ export var AppRoot = withAdaptivity(function (_ref) {
       return document.documentElement.style.removeProperty("color-scheme");
     };
   }, [appearance]);
-  var scrollController = React.useMemo(function () {
-    return scroll === "contain" ? elementScrollController(rootRef) : globalScrollController(window, document);
-  }, [document, scroll, window]);
+  var ScrollController = React.useMemo(function () {
+    return scroll === "contain" ? ElementScrollController : GlobalScrollController;
+  }, [scroll]);
   var content = createScopedElement(AppRootContext.Provider, {
     value: {
       appRoot: rootRef,
@@ -170,8 +173,8 @@ export var AppRoot = withAdaptivity(function (_ref) {
       keyboardInput: isKeyboardInputActive,
       mode: mode
     }
-  }, createScopedElement(ScrollContext.Provider, {
-    value: scrollController
+  }, createScopedElement(ScrollController, {
+    elRef: rootRef
   }, createScopedElement(IconSettingsProvider, {
     classPrefix: "vkui",
     globalClasses: !noLegacyClasses