@vkontakte/vkui 4.31.0 → 4.32.0

package/dist/cjs/components/Alert/Alert.js

@@ -9,23 +9,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Alert = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _jsxRuntime = require("../../lib/jsxRuntime");
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -37,268 +27,218 @@ var _getClassName = require("../../helpers/getClassName");
 
 var _classNames = require("../../lib/classNames");
 
-var _supportEvents = require("../../lib/supportEvents");
-
 var _platform = require("../../lib/platform");
 
-var _withPlatform = require("../../hoc/withPlatform");
-
 var _withAdaptivity = require("../../hoc/withAdaptivity");
 
 var _Button = require("../Button/Button");
 
 var _utils = require("../../lib/utils");
 
-var _Headline = _interopRequireDefault(require("../Typography/Headline/Headline"));
-
 var _Title = require("../Typography/Title/Title");
 
 var _Caption = require("../Typography/Caption/Caption");
 
+var _Text = require("../Typography/Text/Text");
+
 var _ModalDismissButton = _interopRequireDefault(require("../ModalDismissButton/ModalDismissButton"));
 
 var _FocusTrap = require("../FocusTrap/FocusTrap");
 
-var _withContext = require("../../hoc/withContext");
-
 var _ScrollContext = require("../AppRoot/ScrollContext");
 
-var _excluded = ["actions", "actionsLayout", "children", "className", "style", "platform", "viewWidth", "text", "header"];
-
-var AlertComponent = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(AlertComponent, _React$Component);
+var _useWaitTransitionFinish = require("../../hooks/useWaitTransitionFinish");
 
-  var _super = (0, _createSuper2.default)(AlertComponent);
+var _usePlatform = require("../../hooks/usePlatform");
 
-  function AlertComponent(props) {
-    var _this;
+var _useAdaptivity3 = require("../../hooks/useAdaptivity");
 
-    (0, _classCallCheck2.default)(this, AlertComponent);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "element", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "transitionFinishTimeout", undefined);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onItemClick", function (item) {
-      return function () {
-        var action = item.action,
-            autoclose = item.autoclose;
+var _excluded = ["action", "onItemClick"],
+    _excluded2 = ["actions", "actionsLayout", "children", "className", "style", "text", "header", "onClose", "dismissLabel"];
 
-        if (autoclose) {
-          _this.setState({
-            closing: true
-          });
+var AlertHeader = function AlertHeader(props) {
+  var platform = (0, _usePlatform.usePlatform)();
 
-          _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();
-        }
-      };
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClose", function () {
-      _this.setState({
-        closing: true
-      });
-
-      _this.waitTransitionFinish(function (e) {
-        if (!e || e.propertyName === "opacity") {
-          var _this$props$onClose2, _this$props2;
+  switch (platform) {
+    case _platform.IOS:
+      return (0, _jsxRuntime.createScopedElement)(_Title.Title, (0, _extends2.default)({
+        vkuiClass: "Alert__header",
+        weight: "1",
+        level: "3"
+      }, props));
 
-          (_this$props$onClose2 = (_this$props2 = _this.props).onClose) === null || _this$props$onClose2 === void 0 ? void 0 : _this$props$onClose2.call(_this$props2);
-        }
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "stopPropagation", function (e) {
-      e.stopPropagation();
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAction", function (action, i) {
-      var platform = _this.props.platform;
-
-      if (platform === _platform.IOS) {
-        var _action$Component = action.Component,
-            Component = _action$Component === void 0 ? "button" : _action$Component;
-        return (0, _jsxRuntime.createScopedElement)(_Tappable.default, {
-          Component: action.href ? "a" : Component,
-          vkuiClass: (0, _classNames.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 === _platform.ANDROID) {
-        mode = "tertiary";
-
-        if (_this.props.viewWidth === _withAdaptivity.ViewWidth.DESKTOP && action.mode === "destructive") {
-          mode = "destructive";
-        }
-      }
-
-      return (0, _jsxRuntime.createScopedElement)(_Button.Button, {
-        vkuiClass: (0, _classNames.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;
+    default:
+      return (0, _jsxRuntime.createScopedElement)(_Title.Title, (0, _extends2.default)({
+        vkuiClass: "Alert__header",
+        weight: "2",
+        level: "2"
+      }, props));
+  }
+};
+
+var AlertText = function AlertText(props) {
+  var platform = (0, _usePlatform.usePlatform)();
+
+  switch (platform) {
+    case _platform.VKCOM:
+      return (0, _jsxRuntime.createScopedElement)(_Caption.Caption, (0, _extends2.default)({
+        vkuiClass: "Alert__text"
+      }, props));
+
+    case _platform.IOS:
+      return (0, _jsxRuntime.createScopedElement)(_Caption.Caption, (0, _extends2.default)({
+        vkuiClass: "Alert__text",
+        level: "2"
+      }, props));
+
+    default:
+      return (0, _jsxRuntime.createScopedElement)(_Text.Text, (0, _extends2.default)({
+        Component: "span",
+        vkuiClass: "Alert__text",
+        weight: "3"
+      }, props));
+  }
+};
+
+var AlertAction = function AlertAction(_ref) {
+  var action = _ref.action,
+      onItemClick = _ref.onItemClick,
+      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var platform = (0, _usePlatform.usePlatform)();
+
+  var _useAdaptivity = (0, _useAdaptivity3.useAdaptivity)(),
+      viewWidth = _useAdaptivity.viewWidth;
+
+  var handleItemClick = React.useCallback(function () {
+    return onItemClick(action);
+  }, [onItemClick, action]);
+
+  if (platform === _platform.IOS) {
+    var _action$Component = action.Component,
+        Component = _action$Component === void 0 ? "button" : _action$Component;
+    return (0, _jsxRuntime.createScopedElement)(_Tappable.default, (0, _extends2.default)({
+      Component: action.href ? "a" : Component,
+      vkuiClass: (0, _classNames.classNames)("Alert__action", "Alert__action--".concat(action.mode)),
+      onClick: handleItemClick,
+      href: action.href,
+      target: action.target
+    }, restProps), action.title);
   }
 
-  (0, _createClass2.default)(AlertComponent, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props$scroll;
+  var mode = action.mode === "cancel" ? "secondary" : "primary";
 
-      (_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;
+  if (platform === _platform.ANDROID) {
+    mode = "tertiary";
 
-      (_this$props$scroll2 = this.props.scroll) === null || _this$props$scroll2 === void 0 ? void 0 : _this$props$scroll2.disableScrollLock();
+    if (viewWidth === _withAdaptivity.ViewWidth.DESKTOP && action.mode === "destructive") {
+      mode = "destructive";
     }
-  }, {
-    key: "timeout",
-    get: function get() {
-      return this.props.platform === _platform.ANDROID || this.props.platform === _platform.VKCOM ? 200 : 300;
-    }
-  }, {
-    key: "waitTransitionFinish",
-    value: function waitTransitionFinish(eventHandler) {
-      if (_supportEvents.transitionEvent.supported && this.element.current) {
-        this.element.current.removeEventListener(_supportEvents.transitionEvent.name, eventHandler);
-        this.element.current.addEventListener(_supportEvents.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 _platform.VKCOM:
-          return (0, _jsxRuntime.createScopedElement)(_Headline.default, {
-            vkuiClass: "Alert__header",
-            weight: "medium"
-          }, header);
-
-        case _platform.IOS:
-          return (0, _jsxRuntime.createScopedElement)(_Title.Title, {
-            vkuiClass: "Alert__header",
-            weight: "1",
-            level: "3"
-          }, header);
-
-        case _platform.ANDROID:
-          return (0, _jsxRuntime.createScopedElement)(_Title.Title, {
-            vkuiClass: "Alert__header",
-            weight: "2",
-            level: "2"
-          }, header);
-
-        default:
-          return undefined;
-      }
-    }
-  }, {
-    key: "renderText",
-    value: function renderText(text) {
-      switch (this.props.platform) {
-        case _platform.VKCOM:
-          return (0, _jsxRuntime.createScopedElement)(_Caption.Caption, {
-            vkuiClass: "Alert__text"
-          }, text);
-
-        case _platform.IOS:
-          return (0, _jsxRuntime.createScopedElement)(_Caption.Caption, {
-            vkuiClass: "Alert__text",
-            level: "2"
-          }, text);
-
-        case _platform.ANDROID:
-          return (0, _jsxRuntime.createScopedElement)(_Headline.default, {
-            vkuiClass: "Alert__text",
-            weight: "regular"
-          }, text);
-
-        default:
-          return undefined;
-      }
-    }
-  }, {
-    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 = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-      var closing = this.state.closing;
-      var resolvedActionsLayout = platform === _platform.VKCOM ? "horizontal" : actionsLayout;
-      var canShowCloseButton = platform === _platform.VKCOM || platform === _platform.ANDROID && viewWidth >= _withAdaptivity.ViewWidth.SMALL_TABLET;
-      var isDesktop = viewWidth >= _withAdaptivity.ViewWidth.SMALL_TABLET;
-      return (0, _jsxRuntime.createScopedElement)(_PopoutWrapper.PopoutWrapper, {
-        className: className,
-        closing: closing,
-        style: style,
-        onClick: this.onClose
-      }, (0, _jsxRuntime.createScopedElement)(_FocusTrap.FocusTrap, (0, _extends2.default)({}, restProps, {
-        getRootRef: this.element,
-        onClick: this.stopPropagation,
-        onClose: this.onClose,
-        timeout: this.timeout // eslint-disable-next-line vkui/no-object-expression-in-arguments
-        ,
-        vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("Alert", platform), {
-          "Alert--v": resolvedActionsLayout === "vertical",
-          "Alert--h": resolvedActionsLayout === "horizontal",
-          "Alert--closing": closing,
-          "Alert--desktop": isDesktop
-        })
-      }), canShowCloseButton && (0, _jsxRuntime.createScopedElement)(_ModalDismissButton.default, {
-        onClick: this.onClose
-      }), (0, _jsxRuntime.createScopedElement)("div", {
-        vkuiClass: "Alert__content"
-      }, (0, _utils.hasReactNode)(header) && this.renderHeader(header), (0, _utils.hasReactNode)(text) && this.renderText(text), children), (0, _jsxRuntime.createScopedElement)("footer", {
-        vkuiClass: "Alert__actions"
-      }, actions === null || actions === void 0 ? void 0 : actions.map(this.renderAction))));
+  return (0, _jsxRuntime.createScopedElement)(_Button.Button, {
+    vkuiClass: (0, _classNames.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
+ */
+
+
+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 = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  var platform = (0, _usePlatform.usePlatform)();
+
+  var _useAdaptivity2 = (0, _useAdaptivity3.useAdaptivity)(),
+      viewWidth = _useAdaptivity2.viewWidth;
+
+  var _useWaitTransitionFin = (0, _useWaitTransitionFinish.useWaitTransitionFinish)(),
+      waitTransitionFinish = _useWaitTransitionFin.waitTransitionFinish;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      closing = _React$useState2[0],
+      setClosing = _React$useState2[1];
+
+  var elementRef = React.useRef(null);
+  var resolvedActionsLayout = platform === _platform.VKCOM ? "horizontal" : actionsLayout;
+  var canShowCloseButton = platform === _platform.VKCOM || platform === _platform.ANDROID && viewWidth >= _withAdaptivity.ViewWidth.SMALL_TABLET;
+  var isDesktop = viewWidth >= _withAdaptivity.ViewWidth.SMALL_TABLET;
+  var timeout = platform === _platform.ANDROID || platform === _platform.VKCOM ? 200 : 300;
+  var close = React.useCallback(function () {
+    setClosing(true);
+    waitTransitionFinish(elementRef.current, function () {
+      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();
     }
-  }]);
-  return AlertComponent;
-}(React.Component);
+  }, [elementRef, waitTransitionFinish, onClose, timeout]);
+  (0, _ScrollContext.useScrollLock)();
+  return (0, _jsxRuntime.createScopedElement)(_PopoutWrapper.PopoutWrapper, {
+    className: className,
+    closing: closing,
+    style: style,
+    onClick: close
+  }, (0, _jsxRuntime.createScopedElement)(_FocusTrap.FocusTrap, (0, _extends2.default)({}, restProps, {
+    getRootRef: elementRef,
+    onClick: _utils.stopPropagation,
+    onClose: close,
+    timeout: timeout,
+    vkuiClass: (0, _classNames.classNames)((0, _getClassName.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"
+  }), (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "Alert__content"
+  }, (0, _utils.hasReactNode)(header) && (0, _jsxRuntime.createScopedElement)(AlertHeader, {
+    id: "vkui--alert--title"
+  }, header), (0, _utils.hasReactNode)(text) && (0, _jsxRuntime.createScopedElement)(AlertText, {
+    id: "vkui--alert--desc"
+  }, text), children), (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "Alert__actions"
+  }, actions.map(function (action, i) {
+    return (0, _jsxRuntime.createScopedElement)(AlertAction, {
+      key: i,
+      action: action,
+      onItemClick: onItemClick
+    });
+  })), canShowCloseButton && (0, _jsxRuntime.createScopedElement)(_ModalDismissButton.default, {
+    onClick: close,
+    "aria-label": dismissLabel
+  })));
+};
 
-(0, _defineProperty2.default)(AlertComponent, "defaultProps", {
-  actionsLayout: "horizontal",
-  actions: []
-});
-var Alert = (0, _withContext.withContext)((0, _withPlatform.withPlatform)((0, _withAdaptivity.withAdaptivity)(AlertComponent, {
-  viewWidth: true
-})), _ScrollContext.ScrollContext, "scroll");
 exports.Alert = Alert;
 //# sourceMappingURL=Alert.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"names":["AlertComponent","props","undefined","item","action","autoclose","setState","closing","waitTransitionFinish","e","propertyName","onClose","stopPropagation","i","platform","IOS","Component","href","mode","onItemClick","target","title","ANDROID","viewWidth","ViewWidth","DESKTOP","element","React","createRef","state","scroll","enableScrollLock","disableScrollLock","VKCOM","eventHandler","transitionEvent","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","ScrollContext"],"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 { 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":["AlertHeader","props","platform","IOS","AlertText","VKCOM","AlertAction","action","onItemClick","restProps","viewWidth","handleItemClick","React","useCallback","Component","href","mode","target","title","ANDROID","ViewWidth","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","item","autoclose","e","propertyName","stopPropagation","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      () => {\n        onClose && onClose();\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/cjs/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/cjs/components/AppRoot/AppRoot.js

@@ -49,6 +49,10 @@ var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
 
 var _excluded = ["children", "mode", "embedded", "sizeX", "hasMouse", "noLegacyClasses", "scroll"];
 var warn = (0, _warnOnce.warnOnce)("AppRoot");
+/**
+ * @see https://vkcom.github.io/VKUI/#/AppRoot
+ */
+
 var AppRoot = (0, _withAdaptivity.withAdaptivity)(function (_ref) {
   var children = _ref.children,
       _mode = _ref.mode,
@@ -71,7 +75,6 @@ var AppRoot = (0, _withAdaptivity.withAdaptivity)(function (_ref) {
       setPortalRoot = _React$useState2[1];
 
   var _useDOM = (0, _dom.useDOM)(),
-      window = _useDOM.window,
       document = _useDOM.document;
 
   var insets = (0, _useInsets.useInsets)();
@@ -184,9 +187,9 @@ var AppRoot = (0, _withAdaptivity.withAdaptivity)(function (_ref) {
       return document.documentElement.style.removeProperty("color-scheme");
     };
   }, [appearance]);
-  var scrollController = React.useMemo(function () {
-    return scroll === "contain" ? (0, _ScrollContext.elementScrollController)(rootRef) : (0, _ScrollContext.globalScrollController)(window, document);
-  }, [document, scroll, window]);
+  var ScrollController = React.useMemo(function () {
+    return scroll === "contain" ? _ScrollContext.ElementScrollController : _ScrollContext.GlobalScrollController;
+  }, [scroll]);
   var content = (0, _jsxRuntime.createScopedElement)(_AppRootContext.AppRootContext.Provider, {
     value: {
       appRoot: rootRef,
@@ -195,8 +198,8 @@ var AppRoot = (0, _withAdaptivity.withAdaptivity)(function (_ref) {
       keyboardInput: isKeyboardInputActive,
       mode: mode
     }
-  }, (0, _jsxRuntime.createScopedElement)(_ScrollContext.ScrollContext.Provider, {
-    value: scrollController
+  }, (0, _jsxRuntime.createScopedElement)(ScrollController, {
+    elRef: rootRef
   }, (0, _jsxRuntime.createScopedElement)(_icons.IconSettingsProvider, {
     classPrefix: "vkui",
     globalClasses: !noLegacyClasses