@vkontakte/vkui 5.0.0 → 5.0.1

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

@@ -1,131 +1,94 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Alert = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _jsxRuntime = require("../../lib/jsxRuntime");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _Tappable = require("../Tappable/Tappable");
-
 var _PopoutWrapper = require("../PopoutWrapper/PopoutWrapper");
-
 var _classNames = require("../../lib/classNames");
-
 var _platform = require("../../lib/platform");
-
 var _Button = require("../Button/Button");
-
 var _utils = require("../../lib/utils");
-
 var _Title = require("../Typography/Title/Title");
-
 var _Caption = require("../Typography/Caption/Caption");
-
 var _Footnote = require("../Typography/Footnote/Footnote");
-
 var _Text = require("../Typography/Text/Text");
-
 var _ModalDismissButton = require("../ModalDismissButton/ModalDismissButton");
-
 var _FocusTrap = require("../FocusTrap/FocusTrap");
-
 var _ScrollContext = require("../AppRoot/ScrollContext");
-
 var _useWaitTransitionFinish = require("../../hooks/useWaitTransitionFinish");
-
 var _usePlatform = require("../../hooks/usePlatform");
-
-var _useAdaptivityWithMediaQueries = require("../../hooks/useAdaptivityWithMediaQueries");
-
+var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
 var _excluded = ["action", "onItemClick"],
-    _excluded2 = ["actions", "actionsLayout", "children", "className", "style", "text", "header", "onClose", "dismissLabel"];
-
+  _excluded2 = ["actions", "actionsLayout", "children", "className", "style", "text", "header", "onClose", "dismissLabel"];
 var AlertHeader = function AlertHeader(props) {
   var platform = (0, _usePlatform.usePlatform)();
-
   switch (platform) {
     case _platform.Platform.IOS:
-      return (0, _jsxRuntime.createScopedElement)(_Title.Title, (0, _extends2.default)({
-        vkuiClass: "Alert__header",
+      return /*#__PURE__*/React.createElement(_Title.Title, (0, _extends2.default)({
+        className: "vkuiAlert__header",
         weight: "1",
         level: "3"
       }, props));
-
     default:
-      return (0, _jsxRuntime.createScopedElement)(_Title.Title, (0, _extends2.default)({
-        vkuiClass: "Alert__header",
+      return /*#__PURE__*/React.createElement(_Title.Title, (0, _extends2.default)({
+        className: "vkuiAlert__header",
         weight: "2",
         level: "2"
       }, props));
   }
 };
-
 var AlertText = function AlertText(props) {
   var platform = (0, _usePlatform.usePlatform)();
-
   switch (platform) {
     case _platform.Platform.VKCOM:
-      return (0, _jsxRuntime.createScopedElement)(_Footnote.Footnote, (0, _extends2.default)({
-        vkuiClass: "Alert__text"
+      return /*#__PURE__*/React.createElement(_Footnote.Footnote, (0, _extends2.default)({
+        className: "vkuiAlert__text"
       }, props));
-
     case _platform.Platform.IOS:
-      return (0, _jsxRuntime.createScopedElement)(_Caption.Caption, (0, _extends2.default)({
-        vkuiClass: "Alert__text"
+      return /*#__PURE__*/React.createElement(_Caption.Caption, (0, _extends2.default)({
+        className: "vkuiAlert__text"
       }, props));
-
     default:
-      return (0, _jsxRuntime.createScopedElement)(_Text.Text, (0, _extends2.default)({
+      return /*#__PURE__*/React.createElement(_Text.Text, (0, _extends2.default)({
         Component: "span",
-        vkuiClass: "Alert__text",
+        className: "vkuiAlert__text",
         weight: "3"
       }, props));
   }
 };
-
 var AlertAction = function AlertAction(_ref) {
   var action = _ref.action,
-      onItemClick = _ref.onItemClick,
-      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    onItemClick = _ref.onItemClick,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
   var handleItemClick = React.useCallback(function () {
     return onItemClick(action);
   }, [onItemClick, action]);
-
   if (platform === _platform.Platform.IOS) {
     var _action$Component = action.Component,
-        Component = _action$Component === void 0 ? "button" : _action$Component;
-    return (0, _jsxRuntime.createScopedElement)(_Tappable.Tappable, (0, _extends2.default)({
+      Component = _action$Component === void 0 ? "button" : _action$Component;
+    return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({
       Component: action.href ? "a" : Component,
-      vkuiClass: (0, _classNames.classNames)("Alert__action", "Alert__action--mode-".concat(action.mode)),
+      className: (0, _classNames.classNamesString)("vkuiAlert__action", styles["Alert__action--mode-".concat(action.mode)]),
       onClick: handleItemClick,
       href: action.href,
       target: action.target
     }, restProps), action.title);
   }
-
   var mode = "tertiary";
-
   if (platform === _platform.Platform.VKCOM) {
     mode = action.mode === "cancel" ? "secondary" : "primary";
   }
-
-  return (0, _jsxRuntime.createScopedElement)(_Button.Button, {
-    vkuiClass: (0, _classNames.classNames)("Alert__button", "Alert__button--mode-".concat(action.mode)),
+  return /*#__PURE__*/React.createElement(_Button.Button, {
+    className: (0, _classNames.classNamesString)("vkuiAlert__button", styles["Alert__button--mode-".concat(action.mode)]),
     mode: mode,
     size: "m",
     onClick: handleItemClick,
@@ -134,38 +97,33 @@ var AlertAction = function AlertAction(_ref) {
     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);
+    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 _useAdaptivityWithMed = (0, _useAdaptivityWithMediaQueries.useAdaptivityWithMediaQueries)(),
-      isDesktop = _useAdaptivityWithMed.isDesktop;
-
+  var _useAdaptivityWithJSM = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)(),
+    isDesktop = _useAdaptivityWithJSM.isDesktop;
   var _useWaitTransitionFin = (0, _useWaitTransitionFinish.useWaitTransitionFinish)(),
-      waitTransitionFinish = _useWaitTransitionFin.waitTransitionFinish;
-
+    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];
-
+    _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.Platform.VKCOM ? "horizontal" : actionsLayout;
   var timeout = platform === _platform.Platform.IOS ? 300 : 200;
@@ -173,19 +131,18 @@ var Alert = function Alert(_ref2) {
     setClosing(true);
     waitTransitionFinish(elementRef.current, function (e) {
       if (!e || e.propertyName === "opacity") {
-        onClose && onClose();
+        onClose();
       }
     }, timeout);
   }, [elementRef, waitTransitionFinish, onClose, timeout]);
   var onItemClick = React.useCallback(function (item) {
     var action = item.action,
-        autoClose = item.autoClose;
-
+      autoClose = item.autoClose;
     if (autoClose) {
       setClosing(true);
       waitTransitionFinish(elementRef.current, function (e) {
         if (!e || e.propertyName === "opacity") {
-          onClose && onClose();
+          onClose();
           action && action();
         }
       }, timeout);
@@ -194,40 +151,47 @@ var Alert = function Alert(_ref2) {
     }
   }, [elementRef, waitTransitionFinish, onClose, timeout]);
   (0, _ScrollContext.useScrollLock)();
-  return (0, _jsxRuntime.createScopedElement)(_PopoutWrapper.PopoutWrapper, {
+  return /*#__PURE__*/React.createElement(_PopoutWrapper.PopoutWrapper, {
     className: className,
     closing: closing,
     style: style,
     onClick: close
-  }, (0, _jsxRuntime.createScopedElement)(_FocusTrap.FocusTrap, (0, _extends2.default)({}, restProps, {
+  }, /*#__PURE__*/React.createElement(_FocusTrap.FocusTrap, (0, _extends2.default)({}, restProps, {
     getRootRef: elementRef,
     onClick: _utils.stopPropagation,
     onClose: close,
     timeout: timeout,
-    vkuiClass: (0, _classNames.classNames)("Alert", platform === _platform.Platform.IOS && "Alert--ios", platform === _platform.Platform.VKCOM && "Alert--vkcom", resolvedActionsLayout === "vertical" ? "Alert--v" : "Alert--h", closing && "Alert--closing", isDesktop && "Alert--desktop"),
+    className: (0, _classNames.classNamesString)("vkuiAlert", platform === _platform.Platform.IOS && "vkuiAlert--ios", platform === _platform.Platform.VKCOM && "vkuiAlert--vkcom", resolvedActionsLayout === "vertical" ? "vkuiAlert--v" : "vkuiAlert--h", closing && "vkuiAlert--closing", isDesktop && "vkuiAlert--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, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "vkuiAlert__content"
+  }, (0, _utils.hasReactNode)(header) && /*#__PURE__*/React.createElement(AlertHeader, {
     id: "vkui--alert--title"
-  }, header), (0, _utils.hasReactNode)(text) && (0, _jsxRuntime.createScopedElement)(AlertText, {
+  }, header), (0, _utils.hasReactNode)(text) && /*#__PURE__*/React.createElement(AlertText, {
     id: "vkui--alert--desc"
-  }, text), children), (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: "Alert__actions"
+  }, text), children), /*#__PURE__*/React.createElement("div", {
+    className: "vkuiAlert__actions"
   }, actions.map(function (action, i) {
-    return (0, _jsxRuntime.createScopedElement)(AlertAction, {
+    return /*#__PURE__*/React.createElement(AlertAction, {
       key: i,
       action: action,
       onItemClick: onItemClick
     });
-  })), isDesktop && (0, _jsxRuntime.createScopedElement)(_ModalDismissButton.ModalDismissButton, {
+  })), isDesktop && /*#__PURE__*/React.createElement(_ModalDismissButton.ModalDismissButton, {
     onClick: close,
     "aria-label": dismissLabel
   })));
 };
-
 exports.Alert = Alert;
+var styles = {
+  "Alert__action--mode-cancel": "vkuiAlert__action--mode-cancel",
+  "Alert__action--mode-destructive": "vkuiAlert__action--mode-destructive",
+  "Alert__action--mode-default": "vkuiAlert__action--mode-default",
+  "Alert__button--mode-cancel": "vkuiAlert__button--mode-cancel",
+  "Alert__button--mode-default": "vkuiAlert__button--mode-default",
+  "Alert__button--mode-destructive": "vkuiAlert__button--mode-destructive"
+};
 //# sourceMappingURL=Alert.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","names":["AlertHeader","props","platform","usePlatform","Platform","IOS","AlertText","VKCOM","AlertAction","action","onItemClick","restProps","handleItemClick","React","useCallback","Component","href","classNames","mode","target","title","Alert","actions","actionsLayout","children","className","style","text","header","onClose","dismissLabel","useAdaptivityWithMediaQueries","isDesktop","useWaitTransitionFinish","waitTransitionFinish","useState","closing","setClosing","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","autoClose","useScrollLock","stopPropagation","hasReactNode","map","i"],"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { PopoutWrapper } from \"../PopoutWrapper/PopoutWrapper\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\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 { Footnote } from \"../Typography/Footnote/Footnote\";\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 { useAdaptivityWithMediaQueries } from \"../../hooks/useAdaptivityWithMediaQueries\";\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  children?: React.ReactNode;\n}\n\nconst AlertHeader = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.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 = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.VKCOM:\n      return <Footnote vkuiClass=\"Alert__text\" {...props} />;\n    case Platform.IOS:\n      return <Caption vkuiClass=\"Alert__text\" {...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 = ({\n  action,\n  onItemClick,\n  ...restProps\n}: AlertActionProps) => {\n  const platform = usePlatform();\n  const handleItemClick = React.useCallback(\n    () => onItemClick(action),\n    [onItemClick, action]\n  );\n\n  if (platform === 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--mode-${action.mode}`\n        )}\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\"] = \"tertiary\";\n\n  if (platform === Platform.VKCOM) {\n    mode = action.mode === \"cancel\" ? \"secondary\" : \"primary\";\n  }\n\n  return (\n    <Button\n      vkuiClass={classNames(\n        \"Alert__button\",\n        `Alert__button--mode-${action.mode}`\n      )}\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 = ({\n  actions = [],\n  actionsLayout = \"horizontal\",\n  children,\n  className,\n  style,\n  text,\n  header,\n  onClose,\n  dismissLabel = \"Закрыть предупреждение\",\n  ...restProps\n}: AlertProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithMediaQueries();\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 === Platform.VKCOM ? \"horizontal\" : actionsLayout;\n\n  const timeout = platform === Platform.IOS ? 300 : 200;\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          \"Alert\",\n          platform === Platform.IOS && \"Alert--ios\",\n          platform === Platform.VKCOM && \"Alert--vkcom\",\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        {isDesktop && (\n          <ModalDismissButton onClick={close} aria-label={dismissLabel} />\n        )}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Alert.js","names":["AlertHeader","props","platform","usePlatform","Platform","IOS","AlertText","VKCOM","AlertAction","action","onItemClick","restProps","handleItemClick","React","useCallback","Component","href","classNamesString","styles","mode","target","title","Alert","actions","actionsLayout","children","className","style","text","header","onClose","dismissLabel","useAdaptivityWithJSMediaQueries","isDesktop","useWaitTransitionFinish","waitTransitionFinish","useState","closing","setClosing","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","autoClose","useScrollLock","stopPropagation","hasReactNode","map","i"],"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { PopoutWrapper } from \"../PopoutWrapper/PopoutWrapper\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\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 { Footnote } from \"../Typography/Footnote/Footnote\";\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 { useAdaptivityWithJSMediaQueries } from \"../../hooks/useAdaptivityWithJSMediaQueries\";\nimport styles from \"./Alert.module.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  children?: React.ReactNode;\n}\n\nconst AlertHeader = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return (\n        <Title\n          className={styles[\"Alert__header\"]}\n          weight=\"1\"\n          level=\"3\"\n          {...props}\n        />\n      );\n    default:\n      return (\n        <Title\n          className={styles[\"Alert__header\"]}\n          weight=\"2\"\n          level=\"2\"\n          {...props}\n        />\n      );\n  }\n};\n\nconst AlertText = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.VKCOM:\n      return <Footnote className={styles[\"Alert__text\"]} {...props} />;\n    case Platform.IOS:\n      return <Caption className={styles[\"Alert__text\"]} {...props} />;\n    default:\n      return (\n        <Text\n          Component=\"span\"\n          className={styles[\"Alert__text\"]}\n          weight=\"3\"\n          {...props}\n        />\n      );\n  }\n};\n\ninterface AlertActionProps {\n  action: AlertActionInterface;\n  onItemClick: ItemClickHandler;\n}\n\nconst AlertAction = ({\n  action,\n  onItemClick,\n  ...restProps\n}: AlertActionProps) => {\n  const platform = usePlatform();\n  const handleItemClick = React.useCallback(\n    () => onItemClick(action),\n    [onItemClick, action]\n  );\n\n  if (platform === Platform.IOS) {\n    const { Component = \"button\" } = action;\n    return (\n      <Tappable\n        Component={action.href ? \"a\" : Component}\n        className={classNamesString(\n          styles[\"Alert__action\"],\n          styles[`Alert__action--mode-${action.mode}`]\n        )}\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\"] = \"tertiary\";\n\n  if (platform === Platform.VKCOM) {\n    mode = action.mode === \"cancel\" ? \"secondary\" : \"primary\";\n  }\n\n  return (\n    <Button\n      className={classNamesString(\n        styles[\"Alert__button\"],\n        styles[`Alert__button--mode-${action.mode}`]\n      )}\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 = ({\n  actions = [],\n  actionsLayout = \"horizontal\",\n  children,\n  className,\n  style,\n  text,\n  header,\n  onClose,\n  dismissLabel = \"Закрыть предупреждение\",\n  ...restProps\n}: AlertProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\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 === Platform.VKCOM ? \"horizontal\" : actionsLayout;\n\n  const timeout = platform === Platform.IOS ? 300 : 200;\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();\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();\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        className={classNamesString(\n          styles[\"Alert\"],\n          platform === Platform.IOS && styles[\"Alert--ios\"],\n          platform === Platform.VKCOM && styles[\"Alert--vkcom\"],\n          resolvedActionsLayout === \"vertical\"\n            ? styles[\"Alert--v\"]\n            : styles[\"Alert--h\"],\n          closing && styles[\"Alert--closing\"],\n          isDesktop && styles[\"Alert--desktop\"]\n        )}\n        role=\"alertdialog\"\n        aria-modal\n        aria-labelledby=\"vkui--alert--title\"\n        aria-describedby=\"vkui--alert--desc\"\n      >\n        <div className={styles[\"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 className={styles[\"Alert__actions\"]}>\n          {actions.map((action, i) => (\n            <AlertAction key={i} action={action} onItemClick={onItemClick} />\n          ))}\n        </div>\n        {isDesktop && (\n          <ModalDismissButton onClick={close} aria-label={dismissLabel} />\n        )}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Режим встраивания */
+    mode?: "partial" | "embedded" | "full";
+    window?: Window;
+    scroll?: "global" | "contain";
+    /**
+     * Кастомный root-элемент портала
+     */
+    portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;
+    /** Disable portal for components */
+    disablePortal?: boolean;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/AppRoot
+ */
+export declare const AppRoot: ({ children, mode, scroll, portalRoot: portalRootProp, disablePortal, className, ...props }: AppRootProps) => JSX.Element;

package/dist/cjs/components/AppRoot/AppRoot.js

@@ -1,91 +1,65 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AppRoot = void 0;
-
-var _jsxRuntime = require("../../lib/jsxRuntime");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _dom = require("../../lib/dom");
-
 var _classNames = require("../../lib/classNames");
-
 var _AppRootContext = require("./AppRootContext");
-
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-
 var _icons = require("@vkontakte/icons");
-
 var _ScrollContext = require("./ScrollContext");
-
 var _utils = require("../../lib/utils");
-
 var _useKeyboardInputTracker = require("../../hooks/useKeyboardInputTracker");
-
 var _useInsets = require("../../hooks/useInsets");
-
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-
-var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
-
+var _useAppearance = require("../../hooks/useAppearance");
 var _isRefObject = require("../../lib/isRefObject");
-
 var _getSizeXClassName = require("../../helpers/getSizeXClassName");
+var _excluded = ["children", "mode", "scroll", "portalRoot", "disablePortal", "className"];
+var INSET_CUSTOM_PROPERTY_PREFIX = "--vkui_internal--safe_area_inset_";
 
-var _excluded = ["children", "mode", "scroll", "portalRoot", "disablePortal"];
+// Используйте classList, но будьте осторожны
+/* eslint-disable no-restricted-properties */
 
 /**
  * @see https://vkcom.github.io/VKUI/#/AppRoot
  */
 var AppRoot = function AppRoot(_ref) {
   var children = _ref.children,
-      _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? "full" : _ref$mode,
-      _ref$scroll = _ref.scroll,
-      scroll = _ref$scroll === void 0 ? "global" : _ref$scroll,
-      _ref$portalRoot = _ref.portalRoot,
-      portalRootProp = _ref$portalRoot === void 0 ? null : _ref$portalRoot,
-      disablePortal = _ref.disablePortal,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "full" : _ref$mode,
+    _ref$scroll = _ref.scroll,
+    scroll = _ref$scroll === void 0 ? "global" : _ref$scroll,
+    _ref$portalRoot = _ref.portalRoot,
+    portalRootProp = _ref$portalRoot === void 0 ? null : _ref$portalRoot,
+    disablePortal = _ref.disablePortal,
+    className = _ref.className,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isKeyboardInputActive = (0, _useKeyboardInputTracker.useKeyboardInputTracker)();
   var rootRef = React.useRef(null);
-
   var _React$useState = React.useState(null),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      portalRoot = _React$useState2[0],
-      setPortalRoot = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    portalRoot = _React$useState2[0],
+    setPortalRoot = _React$useState2[1];
   var _useDOM = (0, _dom.useDOM)(),
-      document = _useDOM.document;
-
+    document = _useDOM.document;
   var insets = (0, _useInsets.useInsets)();
-
-  var _React$useContext = React.useContext(_ConfigProviderContext.ConfigProviderContext),
-      appearance = _React$useContext.appearance;
-
+  var appearance = (0, _useAppearance.useAppearance)();
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-      hasMouse = _useAdaptivity.hasMouse,
-      sizeX = _useAdaptivity.sizeX; // setup portal
-
+    hasPointer = _useAdaptivity.hasPointer,
+    sizeX = _useAdaptivity.sizeX;
 
+  // setup portal
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     var portal = null;
-
     if (portalRootProp) {
       if ((0, _isRefObject.isRefObject)(portalRootProp)) {
         portal = portalRootProp.current;
@@ -93,35 +67,27 @@ var AppRoot = function AppRoot(_ref) {
         portal = portalRootProp;
       }
     }
-
     if (!portal) {
       portal = document.createElement("div");
-      portal.classList.add("vkui__portal-root");
       document.body.appendChild(portal);
     }
-
     setPortalRoot(portal);
     return function () {
       var _portal, _portal$parentElement;
-
       (_portal = portal) === null || _portal === void 0 ? void 0 : (_portal$parentElement = _portal.parentElement) === null || _portal$parentElement === void 0 ? void 0 : _portal$parentElement.removeChild(portal);
     };
-  }, [portalRootProp]); // setup root classes
+  }, [portalRootProp]);
 
+  // setup root classes
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    var _rootRef$current, _parent$classList;
-
-    if (mode === "partial") {
+    var _rootRef$current;
+    if (mode !== "embedded") {
       return _utils.noop;
     }
-
     var parent = (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.parentElement;
-    var classes = ["vkui__root"].concat(mode === "embedded" ? "vkui__root--embedded" : []);
-    parent === null || parent === void 0 ? void 0 : (_parent$classList = parent.classList).add.apply(_parent$classList, (0, _toConsumableArray2.default)(classes));
+    parent === null || parent === void 0 ? void 0 : parent.classList.add("vkui__root--embedded");
     return function () {
-      var _parent$classList2;
-
-      parent === null || parent === void 0 ? void 0 : (_parent$classList2 = parent.classList).remove.apply(_parent$classList2, (0, _toConsumableArray2.default)(classes));
+      parent === null || parent === void 0 ? void 0 : parent.classList.remove("vkui__root--embedded");
     };
   }, []);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
@@ -131,44 +97,41 @@ var AppRoot = function AppRoot(_ref) {
         document.documentElement.classList.remove("vkui");
       };
     }
-
     return undefined;
-  }, [document, mode]); // setup insets
+  }, [document, mode]);
 
+  // setup insets
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     var _rootRef$current2;
-
     if (mode === "partial" || !((_rootRef$current2 = rootRef.current) !== null && _rootRef$current2 !== void 0 && _rootRef$current2.parentElement)) {
       return _utils.noop;
     }
-
     var parent = rootRef.current.parentElement;
-
-    for (var key in insets) {
+    var key;
+    for (key in insets) {
       if (insets.hasOwnProperty(key) && typeof insets[key] === "number") {
         var inset = insets[key];
-        parent.style.setProperty("--safe-area-inset-".concat(key), "".concat(inset, "px"));
-        portalRoot && portalRoot.style.setProperty("--safe-area-inset-".concat(key), "".concat(inset, "px"));
+        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, "".concat(inset, "px"));
+        portalRoot && portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, "".concat(inset, "px"));
       }
     }
-
     return function () {
-      for (var _key in insets) {
-        if (insets.hasOwnProperty(_key)) {
-          parent.style.removeProperty("--safe-area-inset-".concat(_key));
-          portalRoot && portalRoot.style.removeProperty("--safe-area-inset-".concat(_key));
+      var key;
+      for (key in insets) {
+        if (insets.hasOwnProperty(key)) {
+          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);
+          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);
         }
       }
     };
-  }, [insets, portalRoot]); // adaptivity handler
+  }, [insets, portalRoot]);
 
+  // adaptivity handler
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     var _rootRef$current3;
-
     if (mode === "partial") {
       return _utils.noop;
     }
-
     var className = (0, _getSizeXClassName.getSizeXClassName)("vkui", sizeX);
     var container = mode === "embedded" ? (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.parentElement : document.body;
     container === null || container === void 0 ? void 0 : container.classList.add(className);
@@ -180,7 +143,6 @@ var AppRoot = function AppRoot(_ref) {
     if (mode !== "full" || appearance === undefined) {
       return _utils.noop;
     }
-
     document.documentElement.style.setProperty("color-scheme", appearance);
     return function () {
       return document.documentElement.style.removeProperty("color-scheme");
@@ -189,7 +151,7 @@ var AppRoot = function AppRoot(_ref) {
   var ScrollController = React.useMemo(function () {
     return scroll === "contain" ? _ScrollContext.ElementScrollController : _ScrollContext.GlobalScrollController;
   }, [scroll]);
-  var content = (0, _jsxRuntime.createScopedElement)(_AppRootContext.AppRootContext.Provider, {
+  var content = /*#__PURE__*/React.createElement(_AppRootContext.AppRootContext.Provider, {
     value: {
       appRoot: rootRef,
       portalRoot: portalRoot,
@@ -198,16 +160,15 @@ var AppRoot = function AppRoot(_ref) {
       mode: mode,
       disablePortal: disablePortal
     }
-  }, (0, _jsxRuntime.createScopedElement)(ScrollController, {
+  }, /*#__PURE__*/React.createElement(ScrollController, {
     elRef: rootRef
-  }, (0, _jsxRuntime.createScopedElement)(_icons.IconSettingsProvider, {
+  }, /*#__PURE__*/React.createElement(_icons.IconSettingsProvider, {
     classPrefix: "vkui"
   }, children)));
-  return mode === "partial" ? content : (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({
+  return mode === "partial" ? content : /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     ref: rootRef,
-    vkuiClass: (0, _classNames.classNames)("AppRoot", !hasMouse && "AppRoot--no-mouse")
+    className: (0, _classNames.classNamesString)("vkuiAppRoot", hasPointer === undefined ? "vkuiAppRoot--pointer-none" : !hasPointer && "vkuiAppRoot--pointer-has-not", className)
   }, props), content);
 };
-
 exports.AppRoot = AppRoot;
 //# sourceMappingURL=AppRoot.js.map