@vkontakte/vkui 5.0.3 → 5.1.2

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

@@ -12,7 +12,7 @@ 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 _vkjs = require("@vkontakte/vkjs");
 var _platform = require("../../lib/platform");
 var _Button = require("../Button/Button");
 var _utils = require("../../lib/utils");
@@ -75,24 +75,24 @@ var AlertAction = function AlertAction(_ref) {
   }, [onItemClick, action]);
   if (platform === _platform.Platform.IOS) {
     var _action$Component = action.Component,
-      Component = _action$Component === void 0 ? "button" : _action$Component,
+      Component = _action$Component === void 0 ? 'button' : _action$Component,
       title = action.title,
       actionProp = action.action,
       autoClose = action.autoClose,
       _mode = action.mode,
       restActionProps = (0, _objectWithoutProperties2.default)(action, _excluded2);
     return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({
-      Component: restActionProps.href ? "a" : Component,
-      className: (0, _classNames.classNamesString)("vkuiAlert__action", styles["Alert__action--mode-".concat(_mode)]),
+      Component: restActionProps.href ? 'a' : Component,
+      className: (0, _vkjs.classNames)("vkuiAlert__action", styles["Alert__action--mode-".concat(_mode)]),
       onClick: handleItemClick
     }, restActionProps, restProps), title);
   }
-  var mode = "tertiary";
+  var mode = 'tertiary';
   if (platform === _platform.Platform.VKCOM) {
-    mode = action.mode === "cancel" ? "secondary" : "primary";
+    mode = action.mode === 'cancel' ? 'secondary' : 'primary';
   }
   return /*#__PURE__*/React.createElement(_Button.Button, {
-    className: (0, _classNames.classNamesString)("vkuiAlert__button", styles["Alert__button--mode-".concat(action.mode)]),
+    className: (0, _vkjs.classNames)("vkuiAlert__button", styles["Alert__button--mode-".concat(action.mode)]),
     mode: mode,
     size: "m",
     onClick: handleItemClick,
@@ -109,7 +109,7 @@ 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,
+    actionsLayout = _ref2$actionsLayout === void 0 ? 'horizontal' : _ref2$actionsLayout,
     children = _ref2.children,
     className = _ref2.className,
     style = _ref2.style,
@@ -117,7 +117,7 @@ var Alert = function Alert(_ref2) {
     header = _ref2.header,
     onClose = _ref2.onClose,
     _ref2$dismissLabel = _ref2.dismissLabel,
-    dismissLabel = _ref2$dismissLabel === void 0 ? "Закрыть предупреждение" : _ref2$dismissLabel,
+    dismissLabel = _ref2$dismissLabel === void 0 ? 'Закрыть предупреждение' : _ref2$dismissLabel,
     restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded3);
   var platform = (0, _usePlatform.usePlatform)();
   var _useAdaptivityWithJSM = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)(),
@@ -129,12 +129,12 @@ var Alert = function Alert(_ref2) {
     closing = _React$useState2[0],
     setClosing = _React$useState2[1];
   var elementRef = React.useRef(null);
-  var resolvedActionsLayout = platform === _platform.Platform.VKCOM ? "horizontal" : actionsLayout;
+  var resolvedActionsLayout = platform === _platform.Platform.VKCOM ? 'horizontal' : actionsLayout;
   var timeout = platform === _platform.Platform.IOS ? 300 : 200;
   var close = React.useCallback(function () {
     setClosing(true);
     waitTransitionFinish(elementRef.current, function (e) {
-      if (!e || e.propertyName === "opacity") {
+      if (!e || e.propertyName === 'opacity') {
         onClose();
       }
     }, timeout);
@@ -145,7 +145,7 @@ var Alert = function Alert(_ref2) {
     if (autoClose) {
       setClosing(true);
       waitTransitionFinish(elementRef.current, function (e) {
-        if (!e || e.propertyName === "opacity") {
+        if (!e || e.propertyName === 'opacity') {
           onClose();
           action && action();
         }
@@ -165,16 +165,16 @@ var Alert = function Alert(_ref2) {
     onClick: _utils.stopPropagation,
     onClose: close,
     timeout: timeout,
-    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"),
+    className: (0, _vkjs.classNames)("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"
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiAlert__content"
-  }, (0, _utils.hasReactNode)(header) && /*#__PURE__*/React.createElement(AlertHeader, {
+  }, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/React.createElement(AlertHeader, {
     id: "vkui--alert--title"
-  }, header), (0, _utils.hasReactNode)(text) && /*#__PURE__*/React.createElement(AlertText, {
+  }, header), (0, _vkjs.hasReactNode)(text) && /*#__PURE__*/React.createElement(AlertText, {
     id: "vkui--alert--desc"
   }, text), children), /*#__PURE__*/React.createElement("div", {
     className: "vkuiAlert__actions"

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","title","actionProp","autoClose","mode","restActionProps","href","classNamesString","styles","target","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","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 { AnchorHTMLAttributesOnly } from \"../../types\";\nimport styles from \"./Alert.module.css\";\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, \"Component\">,\n    AnchorHTMLAttributesOnly {\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?: AlertActionInterface[];\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 {\n      Component = \"button\",\n      title,\n      action: actionProp,\n      autoClose,\n      mode,\n      ...restActionProps\n    } = action;\n\n    return (\n      <Tappable\n        Component={restActionProps.href ? \"a\" : Component}\n        className={classNamesString(\n          styles[\"Alert__action\"],\n          styles[`Alert__action--mode-${mode}`]\n        )}\n        onClick={handleItemClick}\n        {...restActionProps}\n        {...restProps}\n      >\n        {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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"}
+{"version":3,"file":"Alert.js","names":["AlertHeader","props","platform","usePlatform","Platform","IOS","AlertText","VKCOM","AlertAction","action","onItemClick","restProps","handleItemClick","React","useCallback","Component","title","actionProp","autoClose","mode","restActionProps","href","classNames","styles","target","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","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, hasReactNode } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { 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 { AnchorHTMLAttributesOnly } from '../../types';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly {\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?: AlertActionInterface[];\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 <Title className={styles['Alert__header']} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles['Alert__header']} weight=\"2\" level=\"2\" {...props} />;\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 <Text Component=\"span\" className={styles['Alert__text']} weight=\"3\" {...props} />;\n  }\n};\n\ninterface AlertActionProps {\n  action: AlertActionInterface;\n  onItemClick: ItemClickHandler;\n}\n\nconst AlertAction = ({ action, onItemClick, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n  const handleItemClick = React.useCallback(() => onItemClick(action), [onItemClick, action]);\n\n  if (platform === Platform.IOS) {\n    const {\n      Component = 'button',\n      title,\n      action: actionProp,\n      autoClose,\n      mode,\n      ...restActionProps\n    } = action;\n\n    return (\n      <Tappable\n        Component={restActionProps.href ? 'a' : Component}\n        className={classNames(styles['Alert__action'], styles[`Alert__action--mode-${mode}`])}\n        onClick={handleItemClick}\n        {...restActionProps}\n        {...restProps}\n      >\n        {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={classNames(styles['Alert__button'], styles[`Alert__button--mode-${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 = ({\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 className={className} closing={closing} style={style} onClick={close}>\n      <FocusTrap\n        {...restProps}\n        getRootRef={elementRef}\n        onClick={stopPropagation}\n        onClose={close}\n        timeout={timeout}\n        className={classNames(\n          styles['Alert'],\n          platform === Platform.IOS && styles['Alert--ios'],\n          platform === Platform.VKCOM && styles['Alert--vkcom'],\n          resolvedActionsLayout === 'vertical' ? styles['Alert--v'] : 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) && <AlertHeader id=\"vkui--alert--title\">{header}</AlertHeader>}\n          {hasReactNode(text) && <AlertText id=\"vkui--alert--desc\">{text}</AlertText>}\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 && <ModalDismissButton onClick={close} aria-label={dismissLabel} />}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
-import * as React from "react";
+import * as React from 'react';
 export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Режим встраивания */
-    mode?: "partial" | "embedded" | "full";
+    mode?: 'partial' | 'embedded' | 'full';
     window?: Window;
-    scroll?: "global" | "contain";
+    scroll?: 'global' | 'contain';
     /**
      * Кастомный root-элемент портала
      */

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

@@ -7,16 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AppRoot = void 0;
 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 _vkjs = require("@vkontakte/vkjs");
 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");
@@ -35,9 +35,9 @@ var INSET_CUSTOM_PROPERTY_PREFIX = "--vkui_internal--safe_area_inset_";
 var AppRoot = function AppRoot(_ref) {
   var children = _ref.children,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "full" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'full' : _ref$mode,
     _ref$scroll = _ref.scroll,
-    scroll = _ref$scroll === void 0 ? "global" : _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,
@@ -68,7 +68,7 @@ var AppRoot = function AppRoot(_ref) {
       }
     }
     if (!portal) {
-      portal = document.createElement("div");
+      portal = document.createElement('div');
       document.body.appendChild(portal);
     }
     setPortalRoot(portal);
@@ -80,21 +80,23 @@ var AppRoot = function AppRoot(_ref) {
 
   // setup root classes
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    var _rootRef$current;
-    if (mode !== "embedded") {
-      return _utils.noop;
+    var _rootRef$current, _parent$classList;
+    if (mode === 'partial') {
+      return _vkjs.noop;
     }
     var parent = (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.parentElement;
-    parent === null || parent === void 0 ? void 0 : parent.classList.add("vkui__root--embedded");
+    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));
     return function () {
-      parent === null || parent === void 0 ? void 0 : parent.classList.remove("vkui__root--embedded");
+      var _parent$classList2;
+      parent === null || parent === void 0 ? void 0 : (_parent$classList2 = parent.classList).remove.apply(_parent$classList2, (0, _toConsumableArray2.default)(classes));
     };
   }, []);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (mode === "full") {
-      document.documentElement.classList.add("vkui");
+    if (mode === 'full') {
+      document.documentElement.classList.add('vkui');
       return function () {
-        document.documentElement.classList.remove("vkui");
+        document.documentElement.classList.remove('vkui');
       };
     }
     return undefined;
@@ -103,13 +105,13 @@ var AppRoot = function AppRoot(_ref) {
   // 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;
+    if (mode === 'partial' || !((_rootRef$current2 = rootRef.current) !== null && _rootRef$current2 !== void 0 && _rootRef$current2.parentElement)) {
+      return _vkjs.noop;
     }
     var parent = rootRef.current.parentElement;
     var key;
     for (key in insets) {
-      if (insets.hasOwnProperty(key) && typeof insets[key] === "number") {
+      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {
         var inset = insets[key];
         parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, "".concat(inset, "px"));
         portalRoot && portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, "".concat(inset, "px"));
@@ -129,33 +131,33 @@ var AppRoot = function AppRoot(_ref) {
   // adaptivity handler
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     var _rootRef$current3;
-    if (mode === "partial") {
-      return _utils.noop;
+    if (mode === 'partial') {
+      return _vkjs.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;
+    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);
     return function () {
       return container === null || container === void 0 ? void 0 : container.classList.remove(className);
     };
   }, [sizeX]);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (mode !== "full" || appearance === undefined) {
-      return _utils.noop;
+    if (mode !== 'full' || appearance === undefined) {
+      return _vkjs.noop;
     }
-    document.documentElement.style.setProperty("color-scheme", appearance);
+    document.documentElement.style.setProperty('color-scheme', appearance);
     return function () {
-      return document.documentElement.style.removeProperty("color-scheme");
+      return document.documentElement.style.removeProperty('color-scheme');
     };
   }, [appearance]);
   var ScrollController = React.useMemo(function () {
-    return scroll === "contain" ? _ScrollContext.ElementScrollController : _ScrollContext.GlobalScrollController;
+    return scroll === 'contain' ? _ScrollContext.ElementScrollController : _ScrollContext.GlobalScrollController;
   }, [scroll]);
   var content = /*#__PURE__*/React.createElement(_AppRootContext.AppRootContext.Provider, {
     value: {
       appRoot: rootRef,
       portalRoot: portalRoot,
-      embedded: mode === "embedded",
+      embedded: mode === 'embedded',
       keyboardInput: isKeyboardInputActive,
       mode: mode,
       disablePortal: disablePortal
@@ -165,9 +167,9 @@ var AppRoot = function AppRoot(_ref) {
   }, /*#__PURE__*/React.createElement(_icons.IconSettingsProvider, {
     classPrefix: "vkui"
   }, children)));
-  return mode === "partial" ? content : /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+  return mode === 'partial' ? content : /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     ref: rootRef,
-    className: (0, _classNames.classNamesString)("vkuiAppRoot", hasPointer === undefined ? "vkuiAppRoot--pointer-none" : !hasPointer && "vkuiAppRoot--pointer-has-not", className)
+    className: (0, _vkjs.classNames)("vkuiAppRoot", hasPointer === undefined ? "vkuiAppRoot--pointer-none" : !hasPointer && "vkuiAppRoot--pointer-has-not", className)
   }, props), content);
 };
 exports.AppRoot = AppRoot;

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

@@ -1 +1 @@
-{"version":3,"file":"AppRoot.js","names":["INSET_CUSTOM_PROPERTY_PREFIX","AppRoot","children","mode","scroll","portalRoot","portalRootProp","disablePortal","className","props","isKeyboardInputActive","useKeyboardInputTracker","rootRef","React","useRef","useState","setPortalRoot","useDOM","document","insets","useInsets","appearance","useAppearance","useAdaptivity","hasPointer","sizeX","useIsomorphicLayoutEffect","portal","isRefObject","current","createElement","body","appendChild","parentElement","removeChild","noop","parent","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","getSizeXClassName","container","ScrollController","useMemo","ElementScrollController","GlobalScrollController","content","appRoot","embedded","keyboardInput","classNamesString"],"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useDOM } from \"../../lib/dom\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { AppRootContext } from \"./AppRootContext\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { IconSettingsProvider } from \"@vkontakte/icons\";\nimport {\n  ElementScrollController,\n  GlobalScrollController,\n} from \"./ScrollContext\";\nimport { noop } from \"../../lib/utils\";\nimport { useKeyboardInputTracker } from \"../../hooks/useKeyboardInputTracker\";\nimport { useInsets } from \"../../hooks/useInsets\";\nimport { Insets } from \"@vkontakte/vk-bridge\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useAppearance } from \"../../hooks/useAppearance\";\nimport { isRefObject } from \"../../lib/isRefObject\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport styles from \"./AppRoot.module.css\";\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: \"partial\" | \"embedded\" | \"full\";\n  window?: Window;\n  scroll?: \"global\" | \"contain\";\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /** Disable portal for components */\n  disablePortal?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = \"full\",\n  scroll = \"global\",\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  className,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const insets = useInsets();\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX } = useAdaptivity();\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement(\"div\");\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      portal?.parentElement?.removeChild(portal);\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== \"embedded\") {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    parent?.classList.add(\"vkui__root--embedded\");\n\n    return () => {\n      parent?.classList.remove(\"vkui__root--embedded\");\n    };\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === \"full\") {\n      document!.documentElement.classList.add(\"vkui\");\n\n      return () => {\n        document!.documentElement.classList.remove(\"vkui\");\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === \"partial\" || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof Insets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === \"number\") {\n        const inset = insets[key];\n        parent.style.setProperty(\n          INSET_CUSTOM_PROPERTY_PREFIX + key,\n          `${inset}px`\n        );\n        portalRoot &&\n          portalRoot.style.setProperty(\n            INSET_CUSTOM_PROPERTY_PREFIX + key,\n            `${inset}px`\n          );\n      }\n    }\n\n    return () => {\n      let key: keyof Insets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot &&\n            portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === \"partial\") {\n      return noop;\n    }\n    const className = getSizeXClassName(\"vkui\", sizeX);\n    const container =\n      mode === \"embedded\" ? rootRef.current?.parentElement : document!.body;\n    container?.classList.add(className);\n    return () => container?.classList.remove(className);\n  }, [sizeX]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== \"full\" || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty(\"color-scheme\", appearance);\n\n    return () => document!.documentElement.style.removeProperty(\"color-scheme\");\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () =>\n      scroll === \"contain\" ? ElementScrollController : GlobalScrollController,\n    [scroll]\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === \"embedded\",\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n      }}\n    >\n      <ScrollController elRef={rootRef}>\n        <IconSettingsProvider classPrefix=\"vkui\">\n          {children}\n        </IconSettingsProvider>\n      </ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === \"partial\" ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNamesString(\n        styles[\"AppRoot\"],\n        hasPointer === undefined\n          ? styles[\"AppRoot--pointer-none\"]\n          : !hasPointer && styles[\"AppRoot--pointer-has-not\"],\n        className\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"AppRoot.js","names":["INSET_CUSTOM_PROPERTY_PREFIX","AppRoot","children","mode","scroll","portalRoot","portalRootProp","disablePortal","className","props","isKeyboardInputActive","useKeyboardInputTracker","rootRef","React","useRef","useState","setPortalRoot","useDOM","document","insets","useInsets","appearance","useAppearance","useAdaptivity","hasPointer","sizeX","useIsomorphicLayoutEffect","portal","isRefObject","current","createElement","body","appendChild","parentElement","removeChild","noop","parent","classes","concat","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","getSizeXClassName","container","ScrollController","useMemo","ElementScrollController","GlobalScrollController","content","appRoot","embedded","keyboardInput","classNames"],"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDOM } from '../../lib/dom';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { AppRootContext } from './AppRootContext';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { IconSettingsProvider } from '@vkontakte/icons';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { useInsets } from '../../hooks/useInsets';\nimport { Insets } from '@vkontakte/vk-bridge';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport styles from './AppRoot.module.css';\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /** Disable portal for components */\n  disablePortal?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  className,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const insets = useInsets();\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX } = useAdaptivity();\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      portal?.parentElement?.removeChild(portal);\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    parent?.classList.add(...classes);\n\n    return () => {\n      parent?.classList.remove(...classes);\n    };\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof Insets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {\n        const inset = insets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      let key: keyof Insets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n    const className = getSizeXClassName('vkui', sizeX);\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n    container?.classList.add(className);\n    return () => container?.classList.remove(className);\n  }, [sizeX]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n      }}\n    >\n      <ScrollController elRef={rootRef}>\n        <IconSettingsProvider classPrefix=\"vkui\">{children}</IconSettingsProvider>\n      </ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
-import * as React from "react";
+import * as React from 'react';
 export interface AppRootContextInterface {
     appRoot?: React.RefObject<HTMLDivElement>;
     portalRoot?: HTMLElement | null;
     embedded?: boolean;
-    mode?: "partial" | "embedded" | "full";
+    mode?: 'partial' | 'embedded' | 'full';
     keyboardInput?: boolean;
     disablePortal?: boolean;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"AppRootContext.js","names":["AppRootContext","React","createContext","portalRoot"],"sources":["../../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from \"react\";\n\nexport interface AppRootContextInterface {\n  appRoot?: React.RefObject<HTMLDivElement>;\n  portalRoot?: HTMLElement | null;\n  embedded?: boolean;\n  mode?: \"partial\" | \"embedded\" | \"full\";\n  keyboardInput?: boolean;\n  disablePortal?: boolean;\n}\n\nexport const AppRootContext = React.createContext<AppRootContextInterface>({\n  portalRoot: null,\n});\n"],"mappings":";;;;;;;AAAA;AAWO,IAAMA,cAAc,gBAAGC,KAAK,CAACC,aAAa,CAA0B;EACzEC,UAAU,EAAE;AACd,CAAC,CAAC;AAAC"}
+{"version":3,"file":"AppRootContext.js","names":["AppRootContext","React","createContext","portalRoot"],"sources":["../../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface AppRootContextInterface {\n  appRoot?: React.RefObject<HTMLDivElement>;\n  portalRoot?: HTMLElement | null;\n  embedded?: boolean;\n  mode?: 'partial' | 'embedded' | 'full';\n  keyboardInput?: boolean;\n  disablePortal?: boolean;\n}\n\nexport const AppRootContext = React.createContext<AppRootContextInterface>({\n  portalRoot: null,\n});\n"],"mappings":";;;;;;;AAAA;AAWO,IAAMA,cAAc,gBAAGC,KAAK,CAACC,aAAa,CAA0B;EACzEC,UAAU,EAAE;AACd,CAAC,CAAC;AAAC"}

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface AppRootPortalProps {
     className?: string;
     forcePortal?: boolean;

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

@@ -1,37 +1,30 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AppRootPortal = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _AppRootContext = require("./AppRootContext");
 var _AppearanceProvider = require("../AppearanceProvider/AppearanceProvider");
 var _useAppearance = require("../../hooks/useAppearance");
+var _useIsClient = require("../../hooks/useIsClient");
 var AppRootPortal = function AppRootPortal(_ref) {
   var children = _ref.children,
     className = _ref.className,
     forcePortalProp = _ref.forcePortal;
-  var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    mounted = _React$useState2[0],
-    setMounted = _React$useState2[1];
   var _React$useContext = React.useContext(_AppRootContext.AppRootContext),
     portalRoot = _React$useContext.portalRoot,
     mode = _React$useContext.mode,
     disablePortal = _React$useContext.disablePortal;
   var appearance = (0, _useAppearance.useAppearance)();
-  React.useEffect(function () {
-    setMounted(true);
-  }, []);
-  if (!mounted) {
+  var isClient = (0, _useIsClient.useIsClient)();
+  if (!isClient) {
     return null;
   }
-  var forcePortal = forcePortalProp !== null && forcePortalProp !== void 0 ? forcePortalProp : mode !== "full";
+  var forcePortal = forcePortalProp !== null && forcePortalProp !== void 0 ? forcePortalProp : mode !== 'full';
   return !disablePortal && portalRoot && forcePortal ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement(_AppearanceProvider.AppearanceProvider, {
     appearance: appearance
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"AppRootPortal.js","names":["AppRootPortal","children","className","forcePortalProp","forcePortal","React","useState","mounted","setMounted","useContext","AppRootContext","portalRoot","mode","disablePortal","appearance","useAppearance","useEffect","createPortal"],"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { AppRootContext } from \"./AppRootContext\";\nimport { AppearanceProvider } from \"../AppearanceProvider/AppearanceProvider\";\nimport { useAppearance } from \"../../hooks/useAppearance\";\n\nexport interface AppRootPortalProps {\n  className?: string;\n  forcePortal?: boolean;\n  children?: React.ReactNode;\n}\n\nexport const AppRootPortal = ({\n  children,\n  className,\n  forcePortal: forcePortalProp,\n}: AppRootPortalProps) => {\n  const [mounted, setMounted] = React.useState(false);\n  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);\n  const appearance = useAppearance();\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) {\n    return null;\n  }\n\n  const forcePortal = forcePortalProp ?? mode !== \"full\";\n\n  return !disablePortal && portalRoot && forcePortal ? (\n    createPortal(\n      <AppearanceProvider appearance={appearance}>\n        <div className={className}>{children}</div>\n      </AppearanceProvider>,\n      portalRoot\n    )\n  ) : (\n    <React.Fragment>{children}</React.Fragment>\n  );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAQO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,OAIA;EAAA,IAHxBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACIC,eAAe,QAA5BC,WAAW;EAEX,sBAA8BC,KAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA5CC,OAAO;IAAEC,UAAU;EAC1B,wBAA4CH,KAAK,CAACI,UAAU,CAACC,8BAAc,CAAC;IAApEC,UAAU,qBAAVA,UAAU;IAAEC,IAAI,qBAAJA,IAAI;IAAEC,aAAa,qBAAbA,aAAa;EACvC,IAAMC,UAAU,GAAG,IAAAC,4BAAa,GAAE;EAElCV,KAAK,CAACW,SAAS,CAAC,YAAM;IACpBR,UAAU,CAAC,IAAI,CAAC;EAClB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAI,CAACD,OAAO,EAAE;IACZ,OAAO,IAAI;EACb;EAEA,IAAMH,WAAW,GAAGD,eAAe,aAAfA,eAAe,cAAfA,eAAe,GAAIS,IAAI,KAAK,MAAM;EAEtD,OAAO,CAACC,aAAa,IAAIF,UAAU,IAAIP,WAAW,gBAChD,IAAAa,sBAAY,gBACV,oBAAC,sCAAkB;IAAC,UAAU,EAAEH;EAAW,gBACzC;IAAK,SAAS,EAAEZ;EAAU,GAAED,QAAQ,CAAO,CACxB,EACrBU,UAAU,CACX,gBAED,oBAAC,KAAK,CAAC,QAAQ,QAAEV,QAAQ,CAC1B;AACH,CAAC;AAAC"}
+{"version":3,"file":"AppRootPortal.js","names":["AppRootPortal","children","className","forcePortalProp","forcePortal","React","useContext","AppRootContext","portalRoot","mode","disablePortal","appearance","useAppearance","isClient","useIsClient","createPortal"],"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { AppRootContext } from './AppRootContext';\nimport { AppearanceProvider } from '../AppearanceProvider/AppearanceProvider';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useIsClient } from '../../hooks/useIsClient';\n\nexport interface AppRootPortalProps {\n  className?: string;\n  forcePortal?: boolean;\n  children?: React.ReactNode;\n}\n\nexport const AppRootPortal = ({\n  children,\n  className,\n  forcePortal: forcePortalProp,\n}: AppRootPortalProps) => {\n  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);\n  const appearance = useAppearance();\n\n  const isClient = useIsClient();\n  if (!isClient) {\n    return null;\n  }\n\n  const forcePortal = forcePortalProp ?? mode !== 'full';\n\n  return !disablePortal && portalRoot && forcePortal ? (\n    createPortal(\n      <AppearanceProvider appearance={appearance}>\n        <div className={className}>{children}</div>\n      </AppearanceProvider>,\n      portalRoot,\n    )\n  ) : (\n    <React.Fragment>{children}</React.Fragment>\n  );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAQO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,OAIA;EAAA,IAHxBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACIC,eAAe,QAA5BC,WAAW;EAEX,wBAA4CC,KAAK,CAACC,UAAU,CAACC,8BAAc,CAAC;IAApEC,UAAU,qBAAVA,UAAU;IAAEC,IAAI,qBAAJA,IAAI;IAAEC,aAAa,qBAAbA,aAAa;EACvC,IAAMC,UAAU,GAAG,IAAAC,4BAAa,GAAE;EAElC,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,IAAI,CAACD,QAAQ,EAAE;IACb,OAAO,IAAI;EACb;EAEA,IAAMT,WAAW,GAAGD,eAAe,aAAfA,eAAe,cAAfA,eAAe,GAAIM,IAAI,KAAK,MAAM;EAEtD,OAAO,CAACC,aAAa,IAAIF,UAAU,IAAIJ,WAAW,gBAChD,IAAAW,sBAAY,gBACV,oBAAC,sCAAkB;IAAC,UAAU,EAAEJ;EAAW,gBACzC;IAAK,SAAS,EAAET;EAAU,GAAED,QAAQ,CAAO,CACxB,EACrBO,UAAU,CACX,gBAED,oBAAC,KAAK,CAAC,QAAQ,QAAEP,QAAQ,CAC1B;AACH,CAAC;AAAC"}

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface ScrollContextInterface {
     getScroll(this: void): {
         x: number;
@@ -17,7 +17,7 @@ export interface ScrollControllerProps {
     children?: React.ReactNode;
 }
 export declare const GlobalScrollController: ({ children }: ScrollControllerProps) => JSX.Element;
-export declare const ElementScrollController: ({ elRef, children, }: ScrollControllerProps) => JSX.Element;
+export declare const ElementScrollController: ({ elRef, children }: ScrollControllerProps) => JSX.Element;
 /**
  * Вызывает функцию effect, до блокировки прокрутки
  * @param effect функция, которая может возвращать функцию очистки

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

@@ -8,18 +8,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.useScrollLockEffect = exports.useScrollLock = exports.useScroll = exports.ScrollContext = exports.GlobalScrollController = exports.ElementScrollController = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("../../lib/utils");
+var _vkjs = require("@vkontakte/vkjs");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 var _math = require("../../helpers/math");
 var _dom = require("../../lib/dom");
 var clearDisableScrollStyle = function clearDisableScrollStyle(node) {
   Object.assign(node.style, {
-    position: "",
-    top: "",
-    left: "",
-    right: "",
-    overflowY: "",
-    overflowX: ""
+    position: '',
+    top: '',
+    left: '',
+    right: '',
+    overflowY: '',
+    overflowX: ''
   });
 };
 var getPageYOffsetWithoutKeyboardHeight = function getPageYOffsetWithoutKeyboardHeight(window) {
@@ -36,10 +36,10 @@ var ScrollContext = /*#__PURE__*/React.createContext({
       y: 0
     };
   },
-  scrollTo: _utils.noop,
+  scrollTo: _vkjs.noop,
   isScrollLock: false,
-  enableScrollLock: _utils.noop,
-  disableScrollLock: _utils.noop
+  enableScrollLock: _vkjs.noop,
+  disableScrollLock: _vkjs.noop
 });
 exports.ScrollContext = ScrollContext;
 var useScroll = function useScroll() {
@@ -74,13 +74,13 @@ var GlobalScrollController = function GlobalScrollController(_ref) {
     });
     var scrollY = window.pageYOffset;
     var scrollX = window.pageXOffset;
-    var overflowY = window.innerWidth > document.documentElement.clientWidth ? "scroll" : "";
-    var overflowX = window.innerHeight > document.documentElement.clientHeight ? "scroll" : "";
+    var overflowY = window.innerWidth > document.documentElement.clientWidth ? 'scroll' : '';
+    var overflowX = window.innerHeight > document.documentElement.clientHeight ? 'scroll' : '';
     Object.assign(document.body.style, {
-      position: "fixed",
+      position: 'fixed',
       top: "-".concat(scrollY, "px"),
       left: "-".concat(scrollX, "px"),
-      right: "0",
+      right: '0',
       overflowY: overflowY,
       overflowX: overflowX
     });
@@ -90,7 +90,7 @@ var GlobalScrollController = function GlobalScrollController(_ref) {
     var scrollY = document.body.style.top;
     var scrollX = document.body.style.left;
     clearDisableScrollStyle(document.body);
-    window.scrollTo(-parseInt(scrollX || "0"), -parseInt(scrollY || "0"));
+    window.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));
     setScrollLock(false);
   }, [document, window]);
   var scrollController = React.useMemo(function () {
@@ -140,13 +140,13 @@ var ElementScrollController = function ElementScrollController(_ref2) {
     });
     var scrollY = el.scrollTop;
     var scrollX = el.scrollLeft;
-    var overflowY = el.scrollWidth > el.clientWidth ? "scroll" : "";
-    var overflowX = el.scrollHeight > el.clientHeight ? "scroll" : "";
+    var overflowY = el.scrollWidth > el.clientWidth ? 'scroll' : '';
+    var overflowX = el.scrollHeight > el.clientHeight ? 'scroll' : '';
     Object.assign(el.style, {
-      position: "absolute",
+      position: 'absolute',
       top: "-".concat(scrollY, "px"),
       left: "-".concat(scrollX, "px"),
-      right: "0",
+      right: '0',
       overflowY: overflowY,
       overflowX: overflowX
     });
@@ -160,7 +160,7 @@ var ElementScrollController = function ElementScrollController(_ref2) {
     var scrollY = el.style.top;
     var scrollX = el.style.left;
     clearDisableScrollStyle(el);
-    el.scrollTo(-parseInt(scrollX || "0"), -parseInt(scrollY || "0"));
+    el.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));
     setScrollLock(false);
   }, [elRef]);
   var scrollController = React.useMemo(function () {
@@ -185,7 +185,7 @@ var ElementScrollController = function ElementScrollController(_ref2) {
  */
 exports.ElementScrollController = ElementScrollController;
 var useScrollLockEffect = function useScrollLockEffect(effect, deps) {
-  var destructorRef = React.useRef(_utils.noop);
+  var destructorRef = React.useRef(_vkjs.noop);
   var _useScroll = useScroll(),
     isScrollLock = _useScroll.isScrollLock,
     beforeScrollLockFnSetRef = _useScroll.beforeScrollLockFnSetRef;
@@ -201,7 +201,7 @@ var useScrollLockEffect = function useScrollLockEffect(effect, deps) {
   React.useEffect(function () {
     var beforeSet = beforeScrollLockFnSetRef === null || beforeScrollLockFnSetRef === void 0 ? void 0 : beforeScrollLockFnSetRef.current;
     if (!beforeSet) {
-      return _utils.noop;
+      return _vkjs.noop;
     }
     beforeSet.add(effectCallback);
     return function () {
@@ -227,7 +227,7 @@ var useScrollLock = function useScrollLock() {
       enableScrollLock();
       return disableScrollLock;
     }
-    return _utils.noop;
+    return _vkjs.noop;
   }, [enableScrollLock, disableScrollLock, enabled]);
 };
 exports.useScrollLock = useScrollLock;