@vkontakte/vkui 5.4.2 → 5.5.0

package/dist/cjs/components/Snackbar/Snackbar.js

@@ -8,12 +8,12 @@ Object.defineProperty(exports, "Snackbar", {
         return Snackbar;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
 var _usePlatform = require("../../hooks/usePlatform");
@@ -22,13 +22,13 @@ var _useWaitTransitionFinish = require("../../hooks/useWaitTransitionFinish");
 var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
 var _touch = require("../../lib/touch");
-var _appRootPortal = require("../AppRoot/AppRootPortal");
-var _button = require("../Button/Button");
-var _touch1 = require("../Touch/Touch");
-var _paragraph = require("../Typography/Paragraph/Paragraph");
-var _subhead = require("../Typography/Subhead/Subhead");
+var _AppRootPortal = require("../AppRoot/AppRootPortal");
+var _Button = require("../Button/Button");
+var _Touch = require("../Touch/Touch");
+var _Paragraph = require("../Typography/Paragraph/Paragraph");
+var _Subhead = require("../Typography/Subhead/Subhead");
 var Snackbar = function(_param) {
-    var children = _param.children, tmp = _param.layout, layoutProps = tmp === void 0 ? "horizontal" : tmp, action = _param.action, before = _param.before, after = _param.after, _param_duration = _param.duration, duration = _param_duration === void 0 ? 4000 : _param_duration, onActionClick = _param.onActionClick, onClose = _param.onClose, _param_mode = _param.mode, mode = _param_mode === void 0 ? "default" : _param_mode, className = _param.className, subtitle = _param.subtitle, restProps = _objectWithoutProperties(_param, [
+    var children = _param.children, tmp = _param.layout, layoutProps = tmp === void 0 ? "horizontal" : tmp, action = _param.action, before = _param.before, after = _param.after, _param_duration = _param.duration, duration = _param_duration === void 0 ? 4000 : _param_duration, onActionClick = _param.onActionClick, onClose = _param.onClose, _param_mode = _param.mode, mode = _param_mode === void 0 ? "default" : _param_mode, className = _param.className, subtitle = _param.subtitle, restProps = _object_without_properties._(_param, [
         "children",
         "layout",
         "action",
@@ -45,8 +45,8 @@ var Snackbar = function(_param) {
     var viewWidth = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)().viewWidth;
     var isDesktop = viewWidth >= _adaptivity.ViewWidth.SMALL_TABLET;
     var waitTransitionFinish = (0, _useWaitTransitionFinish.useWaitTransitionFinish)().waitTransitionFinish;
-    var _React_useState = _slicedToArray(_react.useState(false), 2), closing = _React_useState[0], setClosing = _React_useState[1];
-    var _React_useState1 = _slicedToArray(_react.useState(false), 2), touched = _React_useState1[0], setTouched = _React_useState1[1];
+    var _React_useState = _sliced_to_array._(_react.useState(false), 2), closing = _React_useState[0], setClosing = _React_useState[1];
+    var _React_useState1 = _sliced_to_array._(_react.useState(false), 2), touched = _React_useState1[0], setTouched = _React_useState1[1];
     var shiftXPercentRef = _react.useRef(0);
     var shiftXCurrentRef = _react.useRef(0);
     var bodyElRef = _react.useRef(null);
@@ -125,12 +125,12 @@ var Snackbar = function(_param) {
         closeTimeout
     ]);
     var layout = after || isDesktop || subtitle ? "vertical" : layoutProps;
-    return /*#__PURE__*/ _react.createElement(_appRootPortal.AppRootPortal, null, /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+    return /*#__PURE__*/ _react.createElement(_AppRootPortal.AppRootPortal, null, /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
         className: (0, _vkjs.classNames)("vkuiSnackbar", platform === _platform.Platform.IOS && "vkuiSnackbar--ios", {
             vertical: "vkuiSnackbar--layout-vertical",
             horizontal: "vkuiSnackbar--layout-horizontal"
         }[layout], mode === "dark" && "vkuiSnackbar--mode-dark", closing && "vkuiSnackbar--closing", touched && "vkuiSnackbar--touched", isDesktop && "vkuiSnackbar--desktop", className)
-    }), /*#__PURE__*/ _react.createElement(_touch1.Touch, {
+    }), /*#__PURE__*/ _react.createElement(_Touch.Touch, {
         className: "vkuiSnackbar__in",
         getRootRef: innerElRef,
         onStart: onTouchStart,
@@ -143,11 +143,11 @@ var Snackbar = function(_param) {
         className: "vkuiSnackbar__before"
     }, before), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiSnackbar__content"
-    }, /*#__PURE__*/ _react.createElement(_paragraph.Paragraph, {
+    }, /*#__PURE__*/ _react.createElement(_Paragraph.Paragraph, {
         className: "vkuiSnackbar__content-text"
-    }, children), subtitle && !action && /*#__PURE__*/ _react.createElement(_subhead.Subhead, {
+    }, children), subtitle && !action && /*#__PURE__*/ _react.createElement(_Subhead.Subhead, {
         className: "vkuiSnackbar__content-subtitle"
-    }, subtitle), action && !subtitle && /*#__PURE__*/ _react.createElement(_button.Button, {
+    }, subtitle), action && !subtitle && /*#__PURE__*/ _react.createElement(_Button.Button, {
         align: "left",
         mode: "link",
         appearance: mode === "dark" ? "overlay" : "accent",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          {\n            vertical: styles['Snackbar--layout-vertical'],\n            horizontal: styles['Snackbar--layout-horizontal'],\n          }[layout],\n          mode === 'dark' && styles['Snackbar--mode-dark'],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"names":["Snackbar","children","layoutProps","layout","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","usePlatform","viewWidth","useAdaptivityWithJSMediaQueries","isDesktop","ViewWidth","SMALL_TABLET","waitTransitionFinish","useWaitTransitionFinish","React","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","Platform","IOS","close","current","handleActionClick","e","closeTimeout","useTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","rubber","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","AppRootPortal","div","classNames","vertical","horizontal","Touch","getRootRef","onStart","onMoveX","onEnd","ref","Paragraph","Subhead","Button","align","appearance","size","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          {\n            vertical: styles['Snackbar--layout-vertical'],\n            horizontal: styles['Snackbar--layout-horizontal'],\n          }[layout],\n          mode === 'dark' && styles['Snackbar--mode-dark'],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"names":["Snackbar","children","layoutProps","layout","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","usePlatform","viewWidth","useAdaptivityWithJSMediaQueries","isDesktop","ViewWidth","SMALL_TABLET","waitTransitionFinish","useWaitTransitionFinish","React","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","Platform","IOS","close","current","handleActionClick","e","closeTimeout","useTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","rubber","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","AppRootPortal","div","classNames","vertical","horizontal","Touch","getRootRef","onStart","onMoveX","onEnd","ref","Paragraph","Subhead","Button","align","appearance","size","onClick"],"mappings":";;;;+BAkEaA;;;eAAAA;;;;;;;;+DAlEU;oBACI;+CACqB;2BACpB;0BACD;uCACa;0BACd;wBACD;qBACF;6BACO;sBACP;qBACW;yBACR;uBACF;AAqDjB,IAAMA,WAAW;QACtBC,kBAAAA,UACQC,aAARC,QAAQD,cAAAA,iBAAc,eAAdA,KACRE,gBAAAA,QACAC,gBAAAA,QACAC,eAAAA,gCACAC,UAAAA,wCAAW,wBACXC,uBAAAA,eACAC,iBAAAA,8BACAC,MAAAA,gCAAO,yBACPC,mBAAAA,WACAC,kBAAAA,UACGC;QAXHZ;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA;IACjB,IAAM,AAAEC,YAAcC,IAAAA,oEAAdD;IACR,IAAME,YAAYF,aAAaG,sBAAUC;IACzC,IAAM,AAAEC,uBAAyBC,IAAAA,oDAAzBD;IAER,IAA8BE,qCAAAA,OAAMC,SAAS,YAAtCC,UAAuBF,oBAAdG,aAAcH;IAC9B,IAA8BA,sCAAAA,OAAMC,SAAS,YAAtCG,UAAuBJ,qBAAdK,aAAcL;IAE9B,IAAMM,mBAAmBN,OAAMO,OAAe;IAC9C,IAAMC,mBAAmBR,OAAMO,OAAe;IAE9C,IAAME,YAAYT,OAAMO,OAA8B;IACtD,IAAMG,aAAaV,OAAMO,OAA8B;IAEvD,IAAMI,oBAAoBX,OAAMO,OAAwD;IAExF,IAAMK,mCAAmCrB,aAAasB,mBAASC,MAAM,MAAM;IAE3E,IAAMC,QAAQ;QACZZ,WAAW;QACXL,qBACEY,WAAWM,SACX;YACE9B;QACF,GACA0B;IAEJ;IAEA,IAAMK,oBAA0D,SAACC;QAC/DH;QAEA,IAAIlC,UAAU,OAAOI,kBAAkB,YAAY;YACjDA,cAAciC;QAChB;IACF;IAEA,IAAMC,eAAeC,IAAAA,wBAAWL,OAAO/B;IAEvC,IAAMqC,mBAAmB,SAACC;QACxB,IAAIX,kBAAkBK,YAAY,MAAM;YACtCO,qBAAqBZ,kBAAkBK;QACzC;QACAL,kBAAkBK,UAAUQ,sBAAsB;YAChD,IAAIf,UAAUO,SAAS;gBACrBP,UAAUO,QAAQS,MAAMC,YAAY,AAAC,eAAsB,OAARJ,SAAQ;YAC7D;QACF;IACF;IAEA,IAAMK,eAAeR,aAAaS;IAElC,IAAMC,eAAe,SAACC;YAQkBrB;QAPtC,IAAQsB,SAA0BD,MAA1BC,QAAQC,gBAAkBF,MAAlBE;QAChBA,cAAcC;QAEd,IAAI,CAAC7B,SAAS;YACZC,WAAW;QACb;YAEsCI;QAAtCH,iBAAiBU,UAAU,AAACe,SAAUtB,CAAAA,CAAAA,iCAAAA,CAAAA,qBAAAA,UAAUO,qBAAVP,gCAAAA,KAAAA,IAAAA,mBAAmByB,yBAAnBzB,4CAAAA,iCAAkC,CAAA,IAAM;QAC9ED,iBAAiBQ,UAAUmB,IAAAA,eAAO7B,iBAAiBU,SAAS,IAAI,KAAKzB,aAAasB,mBAASC;QAE3FO,iBAAiBb,iBAAiBQ;IACpC;IAEA,IAAMoB,aAAa,SAAClB;QAClB,IAAImB;QAEJ,IAAIjC,SAAS;YACX,IAAIkC,gBAAgB9B,iBAAiBQ;YACrC,IAAMuB,mBAAmB,AAACD,gBAAgBpB,EAAElC,WAAY,MAAM;YAC9DsD,gBAAgBA,gBAAgBC;YAEhC,IAAI5C,aAAa2C,iBAAiB,CAAC,IAAI;gBACrCnB,aAAaS;gBACb9B,qBACEW,UAAUO,SACV;oBACE9B;gBACF,GACA0B;gBAEFS,iBAAiB,CAAC;YACpB,OAAO,IAAI,CAAC1B,aAAa2C,iBAAiB,IAAI;gBAC5CnB,aAAaS;gBACb9B,qBACEW,UAAUO,SACV;oBACE9B;gBACF,GACA0B;gBAEFS,iBAAiB;YACnB,OAAO;gBACLgB,WAAW;oBACTlB,aAAaqB;oBACbnB,iBAAiB;gBACnB;YACF;QACF,OAAO;YACLF,aAAaqB;QACf;QAEAnC,WAAW;QACXgC,YAAYb,sBAAsBa;IACpC;IAEArC,OAAMyC,UAAU;eAAMtB,aAAaqB;OAAO;QAACrB;KAAa;IAExD,IAAMvC,SAASG,SAASY,aAAaN,WAAW,aAAaV;IAE7D,qBACE,qBAAC+D,kDACC,qBAACC,mDACKrD;QACJF,WAAWwD,IAAAA,kCAETrD,aAAasB,mBAASC,4BACtB;YACE+B,QAAQ;YACRC,UAAU;QACZ,CAAC,CAAClE,OAAO,EACTO,SAAS,qCACTe,oCACAE,oCACAT,sCACAP;sBAGF,qBAAC2D;QACC3D,SAAS;QACT4D,YAAYtC;QACZuC,SAAStB;QACTuB,SAASrB;QACTsB,OAAOf;qBAEP,qBAACO;QAAIvD,SAAS;QAA4BgE,KAAK3C;OAC5C3B,wBAAU,qBAAC6D;QAAIvD,SAAS;OAA+BN,uBAExD,qBAAC6D;QAAIvD,SAAS;qBACZ,qBAACiE;QAAUjE,SAAS;OAAqCV,WACxDW,YAAY,CAACR,wBACZ,qBAACyE;QAAQlE,SAAS;OAAyCC,WAG5DR,UAAU,CAACQ,0BACV,qBAACkE;QACCC,OAAM;QACNrE,MAAK;QACLsE,YAAYtE,SAAS,SAAS,YAAY;QAC1CuE,MAAK;QACLtE,SAAS;QACTuE,SAAS1C;OAERpC,UAKNE,uBAAS,qBAAC4D;QAAIvD,SAAS;OAA8BL;AAMlE"}

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

@@ -9,4 +9,4 @@ export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasC
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */
-export declare const Spacing: ({ size, style: styleProp, className, ...restProps }: SpacingProps) => JSX.Element;
+export declare const Spacing: ({ size, style: styleProp, className, ...restProps }: SpacingProps) => React.JSX.Element;

package/dist/cjs/components/Spacing/Spacing.js

@@ -8,23 +8,23 @@ Object.defineProperty(exports, "Spacing", {
         return Spacing;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var Spacing = function(_param) {
-    var _param_size = _param.size, size = _param_size === void 0 ? 8 : _param_size, styleProp = _param.style, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var _param_size = _param.size, size = _param_size === void 0 ? 8 : _param_size, styleProp = _param.style, className = _param.className, restProps = _object_without_properties._(_param, [
         "size",
         "style",
         "className"
     ]);
-    var style = _objectSpread({
+    var style = _object_spread._({
         height: size,
         padding: "".concat(size / 2, "px 0")
     }, styleProp);
-    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
         className: (0, _vkjs.classNames)(className, "vkuiSpacing"),
         style: style
     }));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasChildren } from '../../types';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["Spacing","size","style","styleProp","className","restProps","height","padding","div","classNames"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;2DAfU;oBACI;AAcpB,IAAMA,UAAU,iBAA2E;6BAAxEC,MAAAA,gCAAO,iBAAGC,AAAOC,mBAAPD,OAAkBE,mBAAAA,WAAcC;QAA1CJ;QAAUC;QAAkBE;;IACpD,IAAMF,QAA6B;QACjCI,QAAQL;QACRM,SAAS,AAAC,GAAW,OAATN,OAAO,GAAE;OAClBE;IAGL,qBAAO,qBAACK,4CAAQH;QAAWD,WAAWK,IAAAA,gBAAU,EAACL;QAA+BF,OAAOA;;AACzF"}
+{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasChildren } from '../../types';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["Spacing","size","style","styleProp","className","restProps","height","padding","div","classNames"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;+DAfU;oBACI;AAcpB,IAAMA,UAAU;6BAAGC,MAAAA,gCAAO,iBAAGC,AAAOC,mBAAPD,OAAkBE,mBAAAA,WAAcC;QAA1CJ;QAAUC;QAAkBE;;IACpD,IAAMF,QAA6B;QACjCI,QAAQL;QACRM,SAAS,AAAC,GAAW,OAATN,OAAO,GAAE;OAClBE;IAGL,qBAAO,qBAACK,mDAAQH;QAAWD,WAAWK,IAAAA,kBAAWL;QAA+BF,OAAOA;;AACzF"}

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

@@ -5,4 +5,4 @@ export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */
-export declare const Spinner: React.MemoExoticComponent<({ size, "aria-label": ariaLabel, className, ...restProps }: SpinnerProps) => JSX.Element>;
+export declare const Spinner: React.MemoExoticComponent<({ size, "aria-label": ariaLabel, className, ...restProps }: SpinnerProps) => React.JSX.Element>;

package/dist/cjs/components/Spinner/Spinner.js

@@ -8,15 +8,15 @@ Object.defineProperty(exports, "Spinner", {
         return Spinner;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var Spinner = /*#__PURE__*/ _react.memo(function(_param) {
-    var _param_size = _param.size, size = _param_size === void 0 ? "regular" : _param_size, tmp = _param["aria-label"], ariaLabel = tmp === void 0 ? "Загружается..." : tmp, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var _param_size = _param.size, size = _param_size === void 0 ? "regular" : _param_size, tmp = _param["aria-label"], ariaLabel = tmp === void 0 ? "Загружается..." : tmp, className = _param.className, restProps = _object_without_properties._(_param, [
         "size",
         "aria-label",
         "className"
@@ -27,7 +27,7 @@ var Spinner = /*#__PURE__*/ _react.memo(function(_param) {
         medium: _icons.Icon32Spinner,
         large: _icons.Icon44Spinner
     }[size];
-    return /*#__PURE__*/ _react.createElement("span", _objectSpreadProps(_objectSpread({
+    return /*#__PURE__*/ _react.createElement("span", _object_spread_props._(_object_spread._({
         role: "status",
         "aria-label": ariaLabel
     }, restProps), {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    'aria-label': ariaLabel = 'Загружается...',\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    return (\n      <span\n        role=\"status\"\n        aria-label={ariaLabel}\n        {...restProps}\n        className={classNames(styles['Spinner'], className)}\n      >\n        <SpinnerIcon className={styles['Spinner__self']} />\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["Spinner","React","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","Icon16Spinner","regular","Icon24Spinner","medium","Icon32Spinner","large","Icon44Spinner","span","role","aria-label","classNames","displayName"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;;2DAZU;qBACoD;oBAChD;AAUpB,IAAMA,wBAAUC,OAAMC,IAAI,CAC/B,iBAKoB;6BAJlBC,MAAAA,gCAAO,yBACOC,aAAd,eAAcA,YAAAA,iBAAY,mBAAZA,KACdC,mBAAAA,WACGC;QAHHH;QACA;QACAE;;IAGA,IAAME,cAAc;QAClBC,OAAOC,oBAAa;QACpBC,SAASC,oBAAa;QACtBC,QAAQC,oBAAa;QACrBC,OAAOC,oBAAa;IACtB,CAAC,CAACZ,KAAK;IAEP,qBACE,qBAACa;QACCC,MAAK;QACLC,cAAYd;OACRE;QACJD,WAAWc,IAAAA,gBAAU,iBAAoBd;sBAEzC,qBAACE;QAAYF,SAAS;;AAG5B;AAGFL,QAAQoB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    'aria-label': ariaLabel = 'Загружается...',\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    return (\n      <span\n        role=\"status\"\n        aria-label={ariaLabel}\n        {...restProps}\n        className={classNames(styles['Spinner'], className)}\n      >\n        <SpinnerIcon className={styles['Spinner__self']} />\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["Spinner","React","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","Icon16Spinner","regular","Icon24Spinner","medium","Icon32Spinner","large","Icon44Spinner","span","role","aria-label","classNames","displayName"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;;+DAZU;qBACoD;oBAChD;AAUpB,IAAMA,wBAAUC,OAAMC,KAC3B;6BACEC,MAAAA,gCAAO,yBACOC,aAAd,eAAcA,YAAAA,iBAAY,mBAAZA,KACdC,mBAAAA,WACGC;QAHHH;QACA;QACAE;;IAGA,IAAME,cAAc;QAClBC,OAAOC;QACPC,SAASC;QACTC,QAAQC;QACRC,OAAOC;IACT,CAAC,CAACZ,KAAK;IAEP,qBACE,qBAACa;QACCC,MAAK;QACLC,cAAYd;OACRE;QACJD,WAAWc,IAAAA,iCAA8Bd;sBAEzC,qBAACE;QAAYF,SAAS;;AAG5B;AAGFL,QAAQoB,cAAc"}

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

@@ -26,4 +26,4 @@ export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitCol
  */
-export declare const SplitCol: (props: SplitColProps) => JSX.Element;
+export declare const SplitCol: (props: SplitColProps) => React.JSX.Element;

package/dist/cjs/components/SplitCol/SplitCol.js

@@ -8,12 +8,12 @@ Object.defineProperty(exports, "SplitCol", {
         return SplitCol;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _useMediaQueries = require("../../hooks/useMediaQueries");
@@ -21,7 +21,7 @@ var _useObjectMemo = require("../../hooks/useObjectMemo");
 var _adaptivity = require("../../lib/adaptivity");
 var _matchMedia = require("../../lib/matchMedia");
 var _warnOnce = require("../../lib/warnOnce");
-var _splitColContext = require("./SplitColContext");
+var _SplitColContext = require("./SplitColContext");
 var breakpointClassNames = {
     none: (0, _vkjs.classNames)("vkuiSplitCol--viewWidth-none", "vkuiInternalSplitCol--viewWidth-none"),
     tabletMinus: "vkuiSplitCol--viewWidth-tabletMinus",
@@ -30,7 +30,7 @@ var breakpointClassNames = {
 };
 function useTransitionAnimate(animateProp) {
     var viewWidth = (0, _useAdaptivity.useAdaptivity)().viewWidth;
-    var _React_useState = _slicedToArray(_react.useState(Boolean(animateProp)), 2), animate = _React_useState[0], setAnimate = _React_useState[1];
+    var _React_useState = _sliced_to_array._(_react.useState(Boolean(animateProp)), 2), animate = _React_useState[0], setAnimate = _React_useState[1];
     var mediaQueries = (0, _useMediaQueries.useMediaQueries)();
     _react.useEffect(function() {
         if (animateProp !== undefined) {
@@ -59,7 +59,7 @@ function useTransitionAnimate(animateProp) {
 }
 var warn = (0, _warnOnce.warnOnce)("SplitCol");
 var SplitCol = function(props) {
-    var children = props.children, width = props.width, maxWidth = props.maxWidth, minWidth = props.minWidth, spaced = props.spaced, animateProp = props.animate, fixed = props.fixed, style = props.style, autoSpaced = props.autoSpaced, stretchedOnMobile = props.stretchedOnMobile, className = props.className, restProps = _objectWithoutProperties(props, [
+    var children = props.children, width = props.width, maxWidth = props.maxWidth, minWidth = props.minWidth, spaced = props.spaced, animateProp = props.animate, fixed = props.fixed, style = props.style, autoSpaced = props.autoSpaced, stretchedOnMobile = props.stretchedOnMobile, className = props.className, restProps = _object_without_properties._(props, [
         "children",
         "width",
         "maxWidth",
@@ -83,15 +83,15 @@ var SplitCol = function(props) {
         // TODO [>=6]: Удалить spaced
         warn("Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced");
     }
-    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
-        style: _objectSpreadProps(_objectSpread({}, style), {
+    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
+        style: _object_spread_props._(_object_spread._({}, style), {
             width: width,
             maxWidth: maxWidth,
             minWidth: minWidth
         }),
         ref: baseRef,
         className: (0, _vkjs.classNames)("vkuiSplitCol", (0, _adaptivity.viewWidthToClassName)(breakpointClassNames, viewWidth), spaced && (0, _vkjs.classNames)("vkuiSplitCol--spaced", "vkuiInternalSplitCol--spaced"), spaced === undefined && (0, _vkjs.classNames)("vkuiSplitCol--spaced-none", "vkuiInternalSplitCol--spaced-none"), autoSpaced && (0, _vkjs.classNames)("vkuiSplitCol--spaced-auto", "vkuiInternalSplitCol--spaced-auto"), fixed && "vkuiSplitCol--fixed", stretchedOnMobile && "vkuiSplitCol--stretched-on-mobile", className)
-    }), /*#__PURE__*/ _react.createElement(_splitColContext.SplitColContext.Provider, {
+    }), /*#__PURE__*/ _react.createElement(_SplitColContext.SplitColContext.Provider, {
         value: contextValue
     }, fixed ? /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiSplitCol__fixedInner"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   *\n   * @deprecated используйте autoSpaced\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\nconst warn = warnOnce('SplitCol');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  if (process.env.NODE_ENV === 'development' && spaced !== undefined) {\n    // TODO [>=6]: Удалить spaced\n    warn('Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced');\n  }\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        spaced && classNames(styles['SplitCol--spaced'], 'vkuiInternalSplitCol--spaced'),\n        spaced === undefined &&\n          classNames(styles['SplitCol--spaced-none'], 'vkuiInternalSplitCol--spaced-none'),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"names":["SplitCol","breakpointClassNames","none","classNames","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","useAdaptivity","React","useState","Boolean","animate","setAnimate","mediaQueries","useMediaQueries","useEffect","undefined","ViewWidth","TABLET","listener","matches","matchMediaListAddListener","matchMediaListRemoveListener","warn","warnOnce","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","contextValue","useObjectMemo","colRef","process","env","NODE_ENV","div","ref","viewWidthToClassName","SplitColContext","Provider","value"],"mappings":";;;;+BA6EaA;;;eAAAA;;;;;;;;2DA7EU;oBACI;6BACG;+BACE;6BACF;0BACkB;0BACwB;wBAC/C;+BACO;AAGhC,IAAMC,uBAAuB;IAC3BC,MAAMC,IAAAA,gBAAU,kCAAqC;IACrDC,WAAW;IACXC,eAAe;IACfC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB,EAAE;IACnD,IAAM,AAAEC,YAAcC,IAAAA,4BAAa,IAA3BD;IACR,IAA8BE,iCAAAA,OAAMC,QAAQ,CAACC,QAAQL,mBAA9CM,UAAuBH,oBAAdI,aAAcJ;IAC9B,IAAMK,eAAeC,IAAAA,gCAAe;IAEpCN,OAAMO,SAAS,CAAC,WAAM;QACpB,IAAIV,gBAAgBW,WAAW;YAC7BJ,WAAWP;YACX;QACF,CAAC;QAED,IAAIC,cAAcU,WAAW;YAC3BJ,WAAWN,YAAYW,qBAAS,CAACC,MAAM;YACvC;QACF,CAAC;QAED,oDAAoD;QACpD,IAAMC,WAAW;mBAAMP,WAAW,CAACC,aAAaX,eAAe,CAACkB,OAAO;;QACvED;QAEAE,IAAAA,qCAAyB,EAACR,aAAaX,eAAe,EAAEiB;QACxD,OAAO,WAAM;YACXG,IAAAA,wCAA4B,EAACT,aAAaX,eAAe,EAAEiB;QAC7D;IACF,GAAG;QAACd;QAAaC;QAAWO;KAAa;IAEzC,OAAOF;AACT;AA2BA,IAAMY,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAM3B,WAAW,SAAC4B,OAAyB;IAChD,IACEC,WAYED,MAZFC,UACAC,QAWEF,MAXFE,OACAC,WAUEH,MAVFG,UACAC,WASEJ,MATFI,UACAC,SAQEL,MARFK,QACAnB,AAASN,cAOPoB,MAPFd,SACAoB,QAMEN,MANFM,OACAC,QAKEP,MALFO,OACAC,aAIER,MAJFQ,YACAC,oBAGET,MAHFS,mBACAC,YAEEV,MAFFU,WACGC,qCACDX;QAZFC;QACAC;QACAC;QACAC;QACAC;QACAnB;QACAoB;QACAC;QACAC;QACAC;QACAC;;IAGF,IAAME,UAAU7B,OAAM8B,MAAM,CAAiB,IAAI;IACjD,IAAM,AAAEhC,YAAcC,IAAAA,4BAAa,IAA3BD;IACR,IAAMK,UAAUP,qBAAqBC;IAErC,IAAMkC,eAAeC,IAAAA,4BAAa,EAAC;QACjCC,QAAQJ;QACR1B,SAAAA;IACF;IAEA,IAAI+B,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBd,WAAWd,WAAW;QAClE,6BAA6B;QAC7BO,KAAK;IACP,CAAC;IAED,qBACE,qBAACsB,4CACKT;QACJJ,OAAO,qCACFA;YACHL,OAAOA;YACPC,UAAUA;YACVC,UAAUA;;QAEZiB,KAAKT;QACLF,WAAWnC,IAAAA,gBAAU,kBAEnB+C,IAAAA,gCAAoB,EAACjD,sBAAsBQ,YAC3CwB,UAAU9B,IAAAA,gBAAU,0BAA6B,iCACjD8B,WAAWd,aACThB,IAAAA,gBAAU,+BAAkC,sCAC9CiC,cACEjC,IAAAA,gBAAU,+BAAkC,sCAC9C+B,gCACAG,0DACAC;sBAGF,qBAACa,gCAAe,CAACC,QAAQ;QAACC,OAAOX;OAC9BR,sBAAQ,qBAACc;QAAIV,SAAS;OAAmCT,YAAkBA,QAAQ;AAI5F"}
+{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   *\n   * @deprecated используйте autoSpaced\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\nconst warn = warnOnce('SplitCol');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  if (process.env.NODE_ENV === 'development' && spaced !== undefined) {\n    // TODO [>=6]: Удалить spaced\n    warn('Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced');\n  }\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        spaced && classNames(styles['SplitCol--spaced'], 'vkuiInternalSplitCol--spaced'),\n        spaced === undefined &&\n          classNames(styles['SplitCol--spaced-none'], 'vkuiInternalSplitCol--spaced-none'),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"names":["SplitCol","breakpointClassNames","none","classNames","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","useAdaptivity","React","useState","Boolean","animate","setAnimate","mediaQueries","useMediaQueries","useEffect","undefined","ViewWidth","TABLET","listener","matches","matchMediaListAddListener","matchMediaListRemoveListener","warn","warnOnce","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","contextValue","useObjectMemo","colRef","process","env","NODE_ENV","div","ref","viewWidthToClassName","SplitColContext","Provider","value"],"mappings":";;;;+BA6EaA;;;eAAAA;;;;;;;;+DA7EU;oBACI;6BACG;+BACE;6BACF;0BACkB;0BACwB;wBAC/C;+BACO;AAGhC,IAAMC,uBAAuB;IAC3BC,MAAMC,IAAAA,kDAA+C;IACrDC,WAAW;IACXC,eAAe;IACfC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,IAAM,AAAEC,YAAcC,IAAAA,gCAAdD;IACR,IAA8BE,qCAAAA,OAAMC,SAASC,QAAQL,mBAA9CM,UAAuBH,oBAAdI,aAAcJ;IAC9B,IAAMK,eAAeC,IAAAA;IAErBN,OAAMO,UAAU;QACd,IAAIV,gBAAgBW,WAAW;YAC7BJ,WAAWP;YACX;QACF;QAEA,IAAIC,cAAcU,WAAW;YAC3BJ,WAAWN,YAAYW,sBAAUC;YACjC;QACF;QAEA,oDAAoD;QACpD,IAAMC,WAAW;mBAAMP,WAAW,CAACC,aAAaX,gBAAgBkB;;QAChED;QAEAE,IAAAA,uCAA0BR,aAAaX,iBAAiBiB;QACxD,OAAO;YACLG,IAAAA,0CAA6BT,aAAaX,iBAAiBiB;QAC7D;IACF,GAAG;QAACd;QAAaC;QAAWO;KAAa;IAEzC,OAAOF;AACT;AA2BA,IAAMY,OAAOC,IAAAA,oBAAS;AAKf,IAAM3B,WAAW,SAAC4B;IACvB,IACEC,WAYED,MAZFC,UACAC,QAWEF,MAXFE,OACAC,WAUEH,MAVFG,UACAC,WASEJ,MATFI,UACAC,SAQEL,MARFK,QACAnB,AAASN,cAOPoB,MAPFd,SACAoB,QAMEN,MANFM,OACAC,QAKEP,MALFO,OACAC,aAIER,MAJFQ,YACAC,oBAGET,MAHFS,mBACAC,YAEEV,MAFFU,WACGC,yCACDX;QAZFC;QACAC;QACAC;QACAC;QACAC;QACAnB;QACAoB;QACAC;QACAC;QACAC;QACAC;;IAGF,IAAME,UAAU7B,OAAM8B,OAAuB;IAC7C,IAAM,AAAEhC,YAAcC,IAAAA,gCAAdD;IACR,IAAMK,UAAUP,qBAAqBC;IAErC,IAAMkC,eAAeC,IAAAA,8BAAc;QACjCC,QAAQJ;QACR1B,SAAAA;IACF;IAEA,IAAI+B,QAAQC,IAAIC,aAAa,iBAAiBd,WAAWd,WAAW;QAClE,6BAA6B;QAC7BO,KAAK;IACP;IAEA,qBACE,qBAACsB,mDACKT;QACJJ,OAAO,4CACFA;YACHL,OAAOA;YACPC,UAAUA;YACVC,UAAUA;;QAEZiB,KAAKT;QACLF,WAAWnC,IAAAA,kCAET+C,IAAAA,kCAAqBjD,sBAAsBQ,YAC3CwB,UAAU9B,IAAAA,0CAAuC,iCACjD8B,WAAWd,aACThB,IAAAA,+CAA4C,sCAC9CiC,cACEjC,IAAAA,+CAA4C,sCAC9C+B,gCACAG,0DACAC;sBAGF,qBAACa,iCAAgBC;QAASC,OAAOX;OAC9BR,sBAAQ,qBAACc;QAAIV,SAAS;OAAmCT,YAAkBA;AAIpF"}

package/dist/cjs/components/SplitCol/SplitColContext.js

@@ -16,8 +16,8 @@ _export(exports, {
         return useSplitCol;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var SplitColContext = /*#__PURE__*/ _react.createContext({
     colRef: null,
     animate: true

package/dist/cjs/components/SplitCol/SplitColContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitCol/SplitColContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n"],"names":["SplitColContext","useSplitCol","React","createContext","colRef","animate","useContext"],"mappings":";;;;;;;;;;;IAOaA,eAAe;eAAfA;;IAKAC,WAAW;eAAXA;;;;2DAZU;AAOhB,IAAMD,gCAAkBE,OAAMC,aAAa,CAAuB;IACvEC,QAAQ,IAAI;IACZC,SAAS,IAAI;AACf;AAEO,IAAMJ,cAAc;WAAMC,OAAMI,UAAU,CAACN"}
+{"version":3,"sources":["../../../../src/components/SplitCol/SplitColContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n"],"names":["SplitColContext","useSplitCol","React","createContext","colRef","animate","useContext"],"mappings":";;;;;;;;;;;IAOaA,eAAe;eAAfA;;IAKAC,WAAW;eAAXA;;;;+DAZU;AAOhB,IAAMD,gCAAkBE,OAAMC,cAAoC;IACvEC,QAAQ;IACRC,SAAS;AACX;AAEO,IAAMJ,cAAc;WAAMC,OAAMI,WAAWN"}

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

@@ -14,4 +14,4 @@ export interface SplitLayoutProps extends React.HTMLAttributes<HTMLDivElement>,
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitLayout
  */
-export declare const SplitLayout: ({ popout, modal, header, children, getRootRef, getRef, className, ...restProps }: SplitLayoutProps) => JSX.Element;
+export declare const SplitLayout: ({ popout, modal, header, children, getRootRef, getRef, className, ...restProps }: SplitLayoutProps) => React.JSX.Element;

package/dist/cjs/components/SplitLayout/SplitLayout.js

@@ -8,17 +8,17 @@ Object.defineProperty(exports, "SplitLayout", {
         return SplitLayout;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
-var _popoutRoot = require("../PopoutRoot/PopoutRoot");
+var _PopoutRoot = require("../PopoutRoot/PopoutRoot");
 var SplitLayout = function(_param) {
-    var popout = _param.popout, modal = _param.modal, header = _param.header, children = _param.children, getRootRef = _param.getRootRef, getRef = _param.getRef, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var popout = _param.popout, modal = _param.modal, header = _param.header, children = _param.children, getRootRef = _param.getRootRef, getRef = _param.getRef, className = _param.className, restProps = _object_without_properties._(_param, [
         "popout",
         "modal",
         "header",
@@ -28,12 +28,12 @@ var SplitLayout = function(_param) {
         "className"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
-    return /*#__PURE__*/ _react.createElement(_popoutRoot.PopoutRoot, {
+    return /*#__PURE__*/ _react.createElement(_PopoutRoot.PopoutRoot, {
         className: (0, _vkjs.classNames)("vkuiSplitLayout", platform === _platform.Platform.IOS && "vkuiSplitLayout--ios"),
         popout: popout,
         modal: modal,
         getRootRef: getRootRef
-    }, header, /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+    }, header, /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
         ref: getRef,
         className: (0, _vkjs.classNames)("vkuiSplitLayout__inner", !!header && "vkuiSplitLayout__inner--header", className)
     }), children));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === Platform.IOS && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","usePlatform","PopoutRoot","classNames","Platform","IOS","div","ref"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;2DA1BU;oBACI;2BACC;wBACH;0BAEE;AAqBpB,IAAMA,cAAc,iBASH;QARtBC,gBAAAA,QACAC,eAAAA,OACAC,gBAAAA,QACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,sBAAU;QACTJ,WAAWK,IAAAA,gBAAU,qBAEnBH,aAAaI,kBAAQ,CAACC,GAAG;QAE3Bb,QAAQA;QACRC,OAAOA;QACPG,YAAYA;OAEXF,sBACD,qBAACY,4CACKP;QACJQ,KAAKV;QACLC,WAAWK,IAAAA,gBAAU,4BAEnB,CAAC,CAACT,4CACFI;QAGDH;AAIT"}
+{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === Platform.IOS && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","usePlatform","PopoutRoot","classNames","Platform","IOS","div","ref"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;+DA1BU;oBACI;2BACC;wBACH;0BAEE;AAqBpB,IAAMA,cAAc;QACzBC,gBAAAA,QACAC,eAAAA,OACAC,gBAAAA,QACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA;IAEjB,qBACE,qBAACC;QACCJ,WAAWK,IAAAA,qCAETH,aAAaI,mBAASC;QAExBb,QAAQA;QACRC,OAAOA;QACPG,YAAYA;OAEXF,sBACD,qBAACY,mDACKP;QACJQ,KAAKV;QACLC,WAAWK,IAAAA,4CAET,CAAC,CAACT,4CACFI;QAGDH;AAIT"}

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

@@ -6,4 +6,4 @@ export interface SubnavigationBarProps extends React.HTMLAttributes<HTMLDivEleme
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationBar
  */
-export declare const SubnavigationBar: ({ mode, children, showArrows, getScrollToLeft, getScrollToRight, scrollAnimationDuration, className, ...restProps }: SubnavigationBarProps) => JSX.Element;
+export declare const SubnavigationBar: ({ mode, children, showArrows, getScrollToLeft, getScrollToRight, scrollAnimationDuration, className, ...restProps }: SubnavigationBarProps) => React.JSX.Element;

package/dist/cjs/components/SubnavigationBar/SubnavigationBar.js

@@ -8,13 +8,13 @@ Object.defineProperty(exports, "SubnavigationBar", {
         return SubnavigationBar;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _horizontalScroll = require("../HorizontalScroll/HorizontalScroll");
+var _HorizontalScroll = require("../HorizontalScroll/HorizontalScroll");
 var defaultScrollToLeft = function(x) {
     return x - 240;
 };
@@ -22,7 +22,7 @@ var defaultScrollToRight = function(x) {
     return x + 240;
 };
 var SubnavigationBar = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "overflow" : _param_mode, children = _param.children, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_getScrollToLeft = _param.getScrollToLeft, getScrollToLeft = _param_getScrollToLeft === void 0 ? defaultScrollToLeft : _param_getScrollToLeft, _param_getScrollToRight = _param.getScrollToRight, getScrollToRight = _param_getScrollToRight === void 0 ? defaultScrollToRight : _param_getScrollToRight, scrollAnimationDuration = _param.scrollAnimationDuration, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "overflow" : _param_mode, children = _param.children, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_getScrollToLeft = _param.getScrollToLeft, getScrollToLeft = _param_getScrollToLeft === void 0 ? defaultScrollToLeft : _param_getScrollToLeft, _param_getScrollToRight = _param.getScrollToRight, getScrollToRight = _param_getScrollToRight === void 0 ? defaultScrollToRight : _param_getScrollToRight, scrollAnimationDuration = _param.scrollAnimationDuration, className = _param.className, restProps = _object_without_properties._(_param, [
         "mode",
         "children",
         "showArrows",
@@ -36,7 +36,7 @@ var SubnavigationBar = function(_param) {
     if (mode === "fixed") {
         ScrollWrapper = "div";
     } else {
-        ScrollWrapper = _horizontalScroll.HorizontalScroll;
+        ScrollWrapper = _HorizontalScroll.HorizontalScroll;
         scrollWrapperProps = {
             showArrows: showArrows,
             getScrollToLeft: getScrollToLeft,
@@ -44,9 +44,9 @@ var SubnavigationBar = function(_param) {
             scrollAnimationDuration: scrollAnimationDuration
         };
     }
-    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
         className: (0, _vkjs.classNames)("vkuiInternalSubnavigationBar", mode === "fixed" && (0, _vkjs.classNames)("vkuiInternalSubnavigationBar--mode-fixed"), className)
-    }), /*#__PURE__*/ _react.createElement(ScrollWrapper, _objectSpread({
+    }), /*#__PURE__*/ _react.createElement(ScrollWrapper, _object_spread._({
         className: "vkuiSubnavigationBar__in"
     }, scrollWrapperProps), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiSubnavigationBar__scrollIn"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  className,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        'vkuiInternalSubnavigationBar',\n        mode === 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed'),\n        className,\n      )}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <div className={styles['SubnavigationBar__scrollIn']}>{children}</div>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"names":["SubnavigationBar","defaultScrollToLeft","x","defaultScrollToRight","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","className","restProps","ScrollWrapper","scrollWrapperProps","HorizontalScroll","div","classNames"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;2DAzBU;oBACI;gCAKpB;AAYP,IAAMC,sBAA6C,SAACC;WAAMA,IAAI;;AAE9D,IAAMC,uBAA8C,SAACD;WAAMA,IAAI;;AAKxD,IAAMF,mBAAmB,iBASH;6BAR3BI,MAAAA,gCAAO,0BACPC,kBAAAA,qCACAC,YAAAA,4CAAa,IAAI,sDACjBC,iBAAAA,sDAAkBN,+EAClBO,kBAAAA,wDAAmBL,gDACnBM,iCAAAA,yBACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAIE;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIT,SAAS,SAAS;QACpBQ,gBAAgB;IAClB,OAAO;QACLA,gBAAgBE,kCAAgB;QAChCD,qBAAqB;YACnBP,YAAAA;YACAC,iBAAAA;YACAC,kBAAAA;YACAC,yBAAAA;QACF;IACF,CAAC;IAED,qBACE,qBAACM,4CACKJ;QACJD,WAAWM,IAAAA,gBAAU,EACnB,gCACAZ,SAAS,WAAWY,IAAAA,gBAAU,EAAC,6CAC/BN;sBAGF,qBAACE;QAAcF,SAAS;OAAsCG,mCAC5D,qBAACE;QAAIL,SAAS;OAAyCL;AAI/D"}
+{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  className,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        'vkuiInternalSubnavigationBar',\n        mode === 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed'),\n        className,\n      )}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <div className={styles['SubnavigationBar__scrollIn']}>{children}</div>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"names":["SubnavigationBar","defaultScrollToLeft","x","defaultScrollToRight","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","className","restProps","ScrollWrapper","scrollWrapperProps","HorizontalScroll","div","classNames"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;+DAzBU;oBACI;gCAKpB;AAYP,IAAMC,sBAA6C,SAACC;WAAMA,IAAI;;AAE9D,IAAMC,uBAA8C,SAACD;WAAMA,IAAI;;AAKxD,IAAMF,mBAAmB;6BAC9BI,MAAAA,gCAAO,0BACPC,kBAAAA,qCACAC,YAAAA,4CAAa,0DACbC,iBAAAA,sDAAkBN,+EAClBO,kBAAAA,wDAAmBL,gDACnBM,iCAAAA,yBACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAIE;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIT,SAAS,SAAS;QACpBQ,gBAAgB;IAClB,OAAO;QACLA,gBAAgBE;QAChBD,qBAAqB;YACnBP,YAAAA;YACAC,iBAAAA;YACAC,kBAAAA;YACAC,yBAAAA;QACF;IACF;IAEA,qBACE,qBAACM,mDACKJ;QACJD,WAAWM,IAAAA,kBACT,gCACAZ,SAAS,WAAWY,IAAAA,kBAAW,6CAC/BN;sBAGF,qBAACE;QAAcF,SAAS;OAAsCG,mCAC5D,qBAACE;QAAIL,SAAS;OAAyCL;AAI/D"}

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

@@ -21,4 +21,4 @@ export interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationButton
  */
-export declare const SubnavigationButton: ({ mode, size, selected, textLevel, before, after, expandable, children, className, ...restProps }: SubnavigationButtonProps) => JSX.Element;
+export declare const SubnavigationButton: ({ mode, size, selected, textLevel, before, after, expandable, children, className, ...restProps }: SubnavigationButtonProps) => React.JSX.Element;