npm - @vkontakte/vkui - Versions diffs - 5.0.3 → 5.1.2 - Mend

@vkontakte/vkui 5.0.3 → 5.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2443) hide show

package/dist/cssm/components/Snackbar/Snackbar.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Название кнопки действия в уведомлении
@@ -21,7 +21,7 @@ export interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {
      * Варианты расположения кнопки действия
      * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`
      */
-    layout?: "vertical" | "horizontal";
+    layout?: 'vertical' | 'horizontal';
     /**
      * Время в миллисекундах, через которое плашка скроется
      */
@@ -33,7 +33,7 @@ export interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Задает стиль снекбара
      */
-    mode?: "default" | "dark";
+    mode?: 'default' | 'dark';
     /**
      * Дополнительная строка текста под `children`.
      * Не может использоваться одновременно с `action`

package/dist/cssm/components/Snackbar/Snackbar.js CHANGED Viewed

@@ -2,20 +2,20 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "layout", "action", "before", "after", "duration", "onActionClick", "onClose", "mode", "className", "subtitle"];
-import * as React from "react";
-import { Touch } from "../Touch/Touch";
-import { classNamesString } from "../../lib/classNames";
-import { Platform } from "../../lib/platform";
-import { rubber } from "../../lib/touch";
-import { ViewWidth } from "../../lib/adaptivity";
-import { Paragraph } from "../Typography/Paragraph/Paragraph";
-import { Subhead } from "../Typography/Subhead/Subhead";
-import { Button } from "../Button/Button";
-import { AppRootPortal } from "../AppRoot/AppRootPortal";
-import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries";
-import { useTimeout } from "../../hooks/useTimeout";
+import * as React from 'react';
+import { Touch } from '../Touch/Touch';
+import { classNames } from '@vkontakte/vkjs';
+import { Platform } from '../../lib/platform';
+import { rubber } from '../../lib/touch';
+import { ViewWidth } from '../../lib/adaptivity';
+import { Paragraph } from '../Typography/Paragraph/Paragraph';
+import { Subhead } from '../Typography/Subhead/Subhead';
+import { Button } from '../Button/Button';
+import { AppRootPortal } from '../AppRoot/AppRootPortal';
+import { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { useTimeout } from '../../hooks/useTimeout';
 import "./Snackbar.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
@@ -23,7 +23,7 @@ import "./Snackbar.module.css";
 export var Snackbar = function Snackbar(_ref) {
   var children = _ref.children,
     _ref$layout = _ref.layout,
-    layoutProps = _ref$layout === void 0 ? "horizontal" : _ref$layout,
+    layoutProps = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
     action = _ref.action,
     before = _ref.before,
     after = _ref.after,
@@ -32,7 +32,7 @@ export var Snackbar = function Snackbar(_ref) {
     onActionClick = _ref.onActionClick,
     onClose = _ref.onClose,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "default" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'default' : _ref$mode,
     className = _ref.className,
     subtitle = _ref.subtitle,
     restProps = _objectWithoutProperties(_ref, _excluded);
@@ -64,7 +64,7 @@ export var Snackbar = function Snackbar(_ref) {
   };
   var handleActionClick = function handleActionClick(e) {
     close();
-    if (action && typeof onActionClick === "function") {
+    if (action && typeof onActionClick === 'function') {
       onActionClick(e);
     }
   };
@@ -125,9 +125,9 @@ export var Snackbar = function Snackbar(_ref) {
   React.useEffect(function () {
     return closeTimeout.set();
   }, [closeTimeout]);
-  var layout = after || isDesktop || subtitle ? "vertical" : layoutProps;
+  var layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;
   return /*#__PURE__*/React.createElement(AppRootPortal, null, /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNamesString("vkuiSnackbar", platform === Platform.IOS && "vkuiSnackbar--ios", styles["Snackbar--layout-".concat(layout)], styles["Snackbar--mode-".concat(mode)], closing && "vkuiSnackbar--closing", touched && "vkuiSnackbar--touched", isDesktop && "vkuiSnackbar--desktop", className)
+    className: classNames("vkuiSnackbar", platform === Platform.IOS && "vkuiSnackbar--ios", styles["Snackbar--layout-".concat(layout)], styles["Snackbar--mode-".concat(mode)], closing && "vkuiSnackbar--closing", touched && "vkuiSnackbar--touched", isDesktop && "vkuiSnackbar--desktop", className)
   }), /*#__PURE__*/React.createElement(Touch, {
     className: "vkuiSnackbar__in",
     getRootRef: innerElRef,
@@ -148,7 +148,7 @@ export var Snackbar = function Snackbar(_ref) {
   }, subtitle), action && !subtitle && /*#__PURE__*/React.createElement(Button, {
     align: "left",
     mode: "link",
-    appearance: mode === "dark" ? "overlay" : "accent",
+    appearance: mode === 'dark' ? 'overlay' : 'accent',
     size: "s",
     className: "vkuiSnackbar__action",
     onClick: handleActionClick

package/dist/cssm/components/Snackbar/Snackbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Snackbar.js","names":["React","Touch","classNamesString","Platform","rubber","ViewWidth","Paragraph","Subhead","Button","AppRootPortal","useWaitTransitionFinish","usePlatform","useAdaptivityWithJSMediaQueries","useTimeout","Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","styles"],"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Touch, TouchEvent } from \"../Touch/Touch\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { rubber } from \"../../lib/touch\";\nimport { ViewWidth } from \"../../lib/adaptivity\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Button } from \"../Button/Button\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { useWaitTransitionFinish } from \"../../hooks/useWaitTransitionFinish\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivityWithJSMediaQueries } from \"../../hooks/useAdaptivityWithJSMediaQueries\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\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 Цветная иконка 24x24 пикселя\n /\n before?: React.ReactNode;\n /\n Контент в правой части, может быть `<Avatar size={32} />`\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<\n typeof requestAnimationFrame\n > \| null>(null);\n\n const transitionFinishDurationFallback =\n 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 =\n (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) 100;\n shiftXCurrentRef.current = rubber(\n shiftXPercentRef.current,\n 72,\n 1.2,\n platform !== Platform.IOS\n );\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={classNamesString(\n styles[\"Snackbar\"],\n platform === Platform.IOS && styles[\"Snackbar--ios\"],\n styles[`Snackbar--layout-${layout}`],\n styles[`Snackbar--mode-${mode}`],\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 && (\n <div className={styles[\"Snackbar__before\"]}>{before}</div>\n )}\n\n <div className={styles[\"Snackbar__content\"]}>\n <Paragraph className={styles[\"Snackbar__content-text\"]}>\n {children}\n </Paragraph>\n {subtitle && !action && (\n <Subhead className={styles[\"Snackbar__content-subtitle\"]}>\n {subtitle}\n </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"],"mappings":"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"}
1	+ {"version":3,"file":"Snackbar.js","names":["React","Touch","classNames","Platform","rubber","ViewWidth","Paragraph","Subhead","Button","AppRootPortal","useWaitTransitionFinish","usePlatform","useAdaptivityWithJSMediaQueries","useTimeout","Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","styles"],"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Button } from '../Button/Button';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useTimeout } from '../../hooks/useTimeout';\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 Цветная иконка 24x24 пикселя\n /\n before?: React.ReactNode;\n /\n Контент в правой части, может быть `<Avatar size={32} />`\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 styles[`Snackbar--layout-${layout}`],\n styles[`Snackbar--mode-${mode}`],\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"],"mappings":"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"}

package/dist/cssm/components/Snackbar/Snackbar.module.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vkuiSnackbar{bottom:0;left:auto;padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);padding-left:0;padding-left:var(--vkui_internal--safe_area_inset_left);padding-right:0;padding-right:var(--vkui_internal--safe_area_inset_right);position:fixed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:~~101~~}.vkuiEpic .vkuiSnackbar{padding-bottom:calc(48px + 0px);padding-bottom:calc(var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom))}.vkuiSnackbar__body,.vkuiSnackbar__in{transition:transform .32s var(--vkui--animation_easing_platform)}.vkuiSnackbar__in{animation:vkui-animation-snackbar-intro-vertical .34s var(--vkui--animation_easing_platform);padding:8px}.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(0,140%,0)}.vkuiSnackbar__body{align-items:center;background:var(--vkui--color_background_modal);border-radius:var(--vkui--size_border_radius--regular);box-shadow:var(--vkui--elevation4);box-sizing:border-box;display:flex;min-height:56px;padding:12px 16px}.vkuiSnackbar--mode-dark .vkuiSnackbar__body{background:var(--vkui--color_background_contrast_inverse)}.vkuiSnackbar__before{margin-left:-4px;margin-right:12px}.vkuiSnackbar__after{margin-left:12px;margin-right:-4px}.vkuiSnackbar__content{align-items:center;display:flex;flex:1;overflow:hidden}.vkuiSnackbar--layout-vertical .vkuiSnackbar__content{align-items:flex-start;flex-direction:column}.vkuiSnackbar__content-text{-webkit-line-clamp:3;-webkit-box-orient:vertical;color:var(--vkui--color_text_primary);display:-webkit-box;flex:1;overflow:hidden;width:100%}.vkuiSnackbar__content-subtitle{color:var(--vkui--color_text_subhead);margin-top:2px}.vkuiSnackbar--mode-dark .vkuiSnackbar__content-text{color:var(--vkui--color_text_contrast)}.vkuiSnackbar--layout-horizontal .vkuiSnackbar__action{margin-left:12px;position:relative}.vkuiSnackbar--layout-vertical .vkuiSnackbar__action{margin-top:2px;min-height:auto}.vkuiModalRoot .vkuiSnackbar{padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom)}.vkuiSnackbar--ios .vkuiSnackbar__body,.vkuiSnackbar--ios .vkuiSnackbar__in{transition:transform .4s var(--vkui--animation_easing_platform)}.vkuiSnackbar--desktop{bottom:0;left:0;max-width:351px}.vkuiSnackbar--desktop .vkuiSnackbar__in{animation-name:vkui-animation-snackbar-intro-horizontal;padding:12px}.vkuiSnackbar--desktop.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(-140%,0,0)}.vkuiSnackbar--touched .vkuiSnackbar__body{transition:none}@keyframes vkui-animation-snackbar-intro-vertical{0%{transform:translate3d(0,140%,0)}to{transform:translateZ(0)}}@keyframes vkui-animation-snackbar-intro-horizontal{0%{transform:translate3d(-140%,0,0)}to{transform:translateZ(0)}}
1	+ .vkuiSnackbar{bottom:0;left:auto;padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);padding-left:0;padding-left:var(--vkui_internal--safe_area_inset_left);padding-right:0;padding-right:var(--vkui_internal--safe_area_inset_right);position:fixed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:100;z-index:var(--vkui--z_index_popout)}.vkuiEpic--hasTabbar .vkuiSnackbar{padding-bottom:calc(48px + 0px);padding-bottom:calc(var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom))}.vkuiSnackbar__body,.vkuiSnackbar__in{transition:transform .32s cubic-bezier(.4,0,.2,1);transition:transform .32s var(--vkui--animation_easing_platform)}.vkuiSnackbar__in{animation:vkui-animation-snackbar-intro-vertical .34s cubic-bezier(.4,0,.2,1);animation:vkui-animation-snackbar-intro-vertical .34s var(--vkui--animation_easing_platform);padding:8px}.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(0,140%,0)}.vkuiSnackbar__body{align-items:center;background:#fff;background:var(--vkui--color_background_modal);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-shadow:0 0 8px rgba(0,0,0,.12),0 16px 16px rgba(0,0,0,.16);box-shadow:var(--vkui--elevation4);box-sizing:border-box;display:flex;min-height:56px;padding:12px 16px}.vkuiSnackbar--mode-dark .vkuiSnackbar__body{background:#2d2d2e;background:var(--vkui--color_background_contrast_inverse)}.vkuiSnackbar__before{margin-left:-4px;margin-right:12px}.vkuiSnackbar__after{margin-left:12px;margin-right:-4px}.vkuiSnackbar__content{align-items:center;display:flex;flex:1;overflow:hidden}.vkuiSnackbar--layout-vertical .vkuiSnackbar__content{align-items:flex-start;flex-direction:column}.vkuiSnackbar__content-text{-webkit-line-clamp:3;-webkit-box-orient:vertical;color:#000;color:var(--vkui--color_text_primary);display:-webkit-box;flex:1;overflow:hidden;width:100%}.vkuiSnackbar__content-subtitle{color:#6d7885;color:var(--vkui--color_text_subhead);margin-top:2px}.vkuiSnackbar--mode-dark .vkuiSnackbar__content-text{color:#fff;color:var(--vkui--color_text_contrast)}.vkuiSnackbar--layout-horizontal .vkuiSnackbar__action{margin-left:12px;position:relative}.vkuiSnackbar--layout-vertical .vkuiSnackbar__action{margin-top:2px;min-height:auto}.vkuiModalRoot .vkuiSnackbar{padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom)}.vkuiSnackbar--ios .vkuiSnackbar__body,.vkuiSnackbar--ios .vkuiSnackbar__in{transition:transform .4s cubic-bezier(.4,0,.2,1);transition:transform .4s var(--vkui--animation_easing_platform)}.vkuiSnackbar--desktop{bottom:0;left:0;max-width:351px}.vkuiSnackbar--desktop .vkuiSnackbar__in{animation-name:vkui-animation-snackbar-intro-horizontal;padding:12px}.vkuiSnackbar--desktop.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(-140%,0,0)}.vkuiSnackbar--touched .vkuiSnackbar__body{transition:none}@keyframes vkui-animation-snackbar-intro-vertical{0%{transform:translate3d(0,140%,0)}to{transform:translateZ(0)}}@keyframes vkui-animation-snackbar-intro-horizontal{0%{transform:translate3d(-140%,0,0)}to{transform:translateZ(0)}}

package/dist/cssm/components/Spacing/Spacing.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Высота спэйсинга

package/dist/cssm/components/Spacing/Spacing.js CHANGED Viewed

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["size", "style", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 import "./Spacing.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
@@ -15,11 +15,12 @@ export var Spacing = function Spacing(_ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var style = _objectSpread({
-    height: size
+    height: size,
+    padding: "".concat(size / 2, "px 0")
   }, styleProp);
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    "aria-hidden": "true",
-    className: classNamesString(className, "vkuiSpacing"),
+    "aria-hidden": true,
+    className: classNames(className, "vkuiSpacing"),
     style: style
   }));
 };

package/dist/cssm/components/Spacing/Spacing.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Spacing.js","names":["React","~~classNamesString~~","Spacing","size","styleProp","style","className","restProps","height"],"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ~~classNamesString~~ } from ~~\"../../lib~~/~~classNames\"~~;\nimport styles from \"./Spacing.module.css\";\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n /*\n Высота спэйсинга\n /\n size?: number;\n children?: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({\n size = 8~~,\n~~ style: styleProp~~,\n~~ className~~,\n~~ ...restProps\n}: SpacingProps) => {\n const style = {\n height: size,\n ...styleProp,\n };\n\n return (\n <div\n {...restProps}\n aria-hidden~~=\"true~~\"\n className={~~classNamesString~~(className, styles[\"Spacing\"])}\n style={style}\n />\n );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,~~gBAAgB~~,QAAQ,~~sBAAsB~~;AAAC;~~AAWxD~~;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO,~~OAKA~~;EAAA,~~qBAJlBC~~,IAAI;IAAJA,IAAI,0BAAG,CAAC;~~IACDC~~,SAAS,QAAhBC,KAAK;~~IACLC~~,SAAS,QAATA,SAAS;~~IACNC~~,SAAS;~~EAEZ~~,IAAMF,~~KAAK~~;~~IACTG~~,MAAM,EAAEL;~~EAAI~~,~~GACTC~~,SAAS,CACb;EAED,oBACE,wCACMG,SAAS;IACb,~~eAAY,MAAM~~;~~IAClB~~,SAAS,EAAEN,~~gBAAgB~~,CAACK,SAAS,gBAAqB;~~IAC1D~~,KAAK,EAAED;EAAM,GACb;AAEN,CAAC"}
1	+ {"version":3,"file":"Spacing.js","names":["React","classNames","Spacing","size","styleProp","style","className","restProps","height","padding"],"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n /*\n Высота спэйсинга\n /\n size?: number;\n children?: React.ReactNode;\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 (\n <div\n {...restProps}\n aria-hidden\n className={classNames(className, styles['Spacing'])}\n style={style}\n />\n );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAW7C;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO,OAA8E;EAAA,qBAAxEC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IAASC,SAAS,QAAhBC,KAAK;IAAaC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAC3E,IAAMF,KAA0B;IAC9BG,MAAM,EAAEL,IAAI;IACZM,OAAO,YAAKN,IAAI,GAAG,CAAC;EAAM,GACvBC,SAAS,CACb;EAED,oBACE,wCACMG,SAAS;IACb,mBAAW;IACX,SAAS,EAAEN,UAAU,CAACK,SAAS,gBAAqB;IACpD,KAAK,EAAED;EAAM,GACb;AAEN,CAAC"}

package/dist/cssm/components/Spacing/Spacing.module.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vkuiSpacing{box-sizing:border-box;~~display:flex;flex-flow:column;justify-content:center;~~position:relative}
1	+ .vkuiSpacing{box-sizing:border-box;position:relative}

package/dist/cssm/components/Spinner/Spinner.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
-    size?: "small" | "regular" | "medium" | "large";
+    size?: 'small' | 'regular' | 'medium' | 'large';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner

package/dist/cssm/components/Spinner/Spinner.js CHANGED Viewed

@@ -1,18 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["size", "aria-label", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { Icon24Spinner, Icon32Spinner, Icon44Spinner, Icon16Spinner } from "@vkontakte/icons";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Icon24Spinner, Icon32Spinner, Icon44Spinner, Icon16Spinner } from '@vkontakte/icons';
 import "./Spinner.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */
 export var Spinner = /*#__PURE__*/React.memo(function (_ref) {
   var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "regular" : _ref$size,
-    _ref$ariaLabel = _ref["aria-label"],
-    ariaLabel = _ref$ariaLabel === void 0 ? "Загружается..." : _ref$ariaLabel,
+    size = _ref$size === void 0 ? 'regular' : _ref$size,
+    _ref$ariaLabel = _ref['aria-label'],
+    ariaLabel = _ref$ariaLabel === void 0 ? 'Загружается...' : _ref$ariaLabel,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var SpinnerIcon = {
@@ -25,10 +25,10 @@ export var Spinner = /*#__PURE__*/React.memo(function (_ref) {
     role: "status",
     "aria-label": ariaLabel
   }, restProps, {
-    className: classNamesString("vkuiSpinner", className)
+    className: classNames("vkuiSpinner", className)
   }), /*#__PURE__*/React.createElement(SpinnerIcon, {
     className: "vkuiSpinner__self"
   }));
 });
-Spinner.displayName = "Spinner";
+Spinner.displayName = 'Spinner';
 //# sourceMappingURL=Spinner.js.map

package/dist/cssm/components/Spinner/Spinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Spinner.js","names":["React","~~classNamesString~~","Icon24Spinner","Icon32Spinner","Icon44Spinner","Icon16Spinner","Spinner","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","regular","medium","large","displayName"],"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ~~classNamesString~~ } from ~~\"../../lib~~/~~classNames\"~~;\nimport {\n Icon24Spinner~~,\n~~ Icon32Spinner~~,\n~~ Icon44Spinner~~,\n~~ Icon16Spinner~~,\n~~} from \"@vkontakte/icons\";\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={~~classNamesString~~(styles[\"Spinner\"], className)}\n >\n <SpinnerIcon className={styles[\"Spinner__self\"]} />\n </span>\n );\n }\n);\n\nSpinner.displayName = \"Spinner\";\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,~~gBAAgB~~,QAAQ,~~sBAAsB~~;~~AACvD~~,~~SACEC~~,aAAa,~~EACbC~~,aAAa,~~EACbC~~,aAAa,~~EACbC~~,aAAa,~~QACR~~,kBAAkB;AAAC;~~AAO1B~~;AACA;AACA;AACA,OAAO,IAAMC,OAAO,gBAAGN,KAAK,CAACO,IAAI,CAC/B,gBAKoB;EAAA,qBAJlBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,sBAChB,YAAY;IAAEC,SAAS,+BAAG,gBAAgB;IAC1CC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,WAAW,GAAG;IAClBC,KAAK,EAAER,aAAa;IACpBS,OAAO,EAAEZ,aAAa;IACtBa,MAAM,EAAEZ,aAAa;IACrBa,KAAK,EAAEZ;EACT,CAAC,CAACI,IAAI,CAAC;EAEP,oBACE;IACE,IAAI,EAAC,QAAQ;IACb,cAAYC;EAAU,GAClBE,SAAS;IACb,SAAS,EAAEV,~~gBAAgB~~,gBAAoBS,SAAS;EAAE,~~iBAE1D~~,oBAAC,WAAW;IAAC,SAAS;EAA0B,EAAG,CAC9C;AAEX,CAAC,CACF;AAEDJ,OAAO,CAACW,WAAW,GAAG,SAAS"}
1	+ {"version":3,"file":"Spinner.js","names":["React","classNames","Icon24Spinner","Icon32Spinner","Icon44Spinner","Icon16Spinner","Spinner","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","regular","medium","large","displayName"],"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Icon24Spinner, Icon32Spinner, Icon44Spinner, Icon16Spinner } from '@vkontakte/icons';\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"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,kBAAkB;AAAC;AAO9F;AACA;AACA;AACA,OAAO,IAAMC,OAAO,gBAAGN,KAAK,CAACO,IAAI,CAC/B,gBAKoB;EAAA,qBAJlBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,sBAChB,YAAY;IAAEC,SAAS,+BAAG,gBAAgB;IAC1CC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,WAAW,GAAG;IAClBC,KAAK,EAAER,aAAa;IACpBS,OAAO,EAAEZ,aAAa;IACtBa,MAAM,EAAEZ,aAAa;IACrBa,KAAK,EAAEZ;EACT,CAAC,CAACI,IAAI,CAAC;EAEP,oBACE;IACE,IAAI,EAAC,QAAQ;IACb,cAAYC;EAAU,GAClBE,SAAS;IACb,SAAS,EAAEV,UAAU,gBAAoBS,SAAS;EAAE,iBAEpD,oBAAC,WAAW;IAAC,SAAS;EAA0B,EAAG,CAC9C;AAEX,CAAC,CACF;AAEDJ,OAAO,CAACW,WAAW,GAAG,SAAS"}

package/dist/cssm/components/Spinner/Spinner.module.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vkuiSpinner{align-items:center;color:var(--vkui--color_icon_medium);display:flex;height:100%;justify-content:center;width:100%}.vkuiSpinner__self{animation:vkui-rotator .7s linear infinite;animation:vkui-rotator var(--vkui_internal--duration) linear infinite;transform-origin:center}.vkuiSpinner__self svg{transform:scale(1)}.vkuiButton .vkuiSpinner,.vkuiPanelHeader .vkuiSpinner{color:currentColor}
1	+ .vkuiSpinner{align-items:center;color:#818c99;color:var(--vkui--color_icon_medium);display:flex;height:100%;justify-content:center;width:100%}.vkuiSpinner__self{animation:vkui-rotator .7s linear infinite;animation:vkui-rotator var(--vkui_internal--duration) linear infinite;transform-origin:center}.vkuiSpinner__self svg{transform:scale(1)}.vkuiButton .vkuiSpinner,.vkuiPanelHeader .vkuiSpinner{color:currentColor}

package/dist/cssm/components/SplitCol/SplitCol.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface SplitColContextProps {
     colRef: React.RefObject<HTMLDivElement> | null;
     animate: boolean;

package/dist/cssm/components/SplitCol/SplitCol.js CHANGED Viewed

@@ -3,14 +3,15 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["children", "width", "maxWidth", "minWidth", "spaced", "animate", "fixed", "style", "autoSpaced", "stretchedOnMobile", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { getSizeXClassName } from "../../helpers/getSizeXClassName";
-import { getViewWidthClassName } from "../../helpers/getViewWidthClassName";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { ViewWidth } from "../../lib/adaptivity";
-import { useObjectMemo } from "../../hooks/useObjectMemo";
-import { useMediaQueries } from "../../hooks/useMediaQueries";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { getSizeXClassName } from '../../helpers/getSizeXClassName';
+import { getViewWidthClassName } from '../../helpers/getViewWidthClassName';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { ViewWidth } from '../../lib/adaptivity';
+import { useObjectMemo } from '../../hooks/useObjectMemo';
+import { useMediaQueries } from '../../hooks/useMediaQueries';
+import { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';
 import "./SplitCol.module.css";
 function useTransitionAnimate(animateProp) {
   var _useAdaptivity = useAdaptivity(),
@@ -35,9 +36,9 @@ function useTransitionAnimate(animateProp) {
       return setAnimate(!mediaQueries.smallTabletPlus.matches);
     };
     listener();
-    mediaQueries.smallTabletPlus.addEventListener("change", listener);
+    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);
     return function () {
-      mediaQueries.smallTabletPlus.removeEventListener("change", listener);
+      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);
     };
   }, [animateProp, viewWidth, mediaQueries]);
   return animate;
@@ -81,7 +82,7 @@ export var SplitCol = function SplitCol(props) {
       minWidth: minWidth
     }),
     ref: baseRef,
-    className: classNamesString("vkuiSplitCol", getSizeXClassName("vkuiSplitCol", sizeX), getViewWidthClassName("vkuiSplitCol", viewWidth), spaced && "vkuiSplitCol--spaced", spaced === undefined && "vkuiSplitCol--spaced-none", autoSpaced && "vkuiSplitCol--spaced-auto", fixed && "vkuiSplitCol--fixed", stretchedOnMobile && "vkuiSplitCol--stretched-on-mobile", className)
+    className: classNames("vkuiSplitCol", getSizeXClassName("vkuiSplitCol", sizeX), getViewWidthClassName("vkuiSplitCol", viewWidth), spaced && "vkuiSplitCol--spaced", spaced === undefined && "vkuiSplitCol--spaced-none", autoSpaced && "vkuiSplitCol--spaced-auto", fixed && "vkuiSplitCol--fixed", stretchedOnMobile && "vkuiSplitCol--stretched-on-mobile", className)
   }), /*#__PURE__*/React.createElement(SplitColContext.Provider, {
     value: contextValue
   }, fixed ? /*#__PURE__*/React.createElement("div", {

package/dist/cssm/components/SplitCol/SplitCol.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SplitCol.js","names":["React","~~classNamesString~~","getSizeXClassName","getViewWidthClassName","useAdaptivity","ViewWidth","useObjectMemo","useMediaQueries","useTransitionAnimate","animateProp","viewWidth","useState","Boolean","animate","setAnimate","mediaQueries","useEffect","undefined","TABLET","listener","smallTabletPlus","matches","~~addEventListener","removeEventListener","~~SplitColContext","createContext","colRef","useSplitCol","useContext","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","sizeX","contextValue"],"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ~~classNamesString~~ } from ~~\"../../lib~~/~~classNames\"~~;\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { getViewWidthClassName } from \"../../helpers/getViewWidthClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { ViewWidth } from \"../../lib/adaptivity\";\nimport { useObjectMemo } from \"../../hooks/useObjectMemo\";\nimport { useMediaQueries } from \"../../hooks/useMediaQueries\";\nimport styles from \"./SplitCol.module.css\";\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 mediaQueries.smallTabletPlus~~.addEventListener(\"change\"~~, listener);\n return () => {\n mediaQueries.smallTabletPlus~~.removeEventListener(\"change\"~~, listener);\n };\n }, [animateProp, viewWidth, mediaQueries]);\n\n return animate;\n}\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\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 spaced?: boolean;\n /\n Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n /\n autoSpaced?: boolean;\n fixed?: boolean;\n /\n Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n /\n stretchedOnMobile?: boolean;\n}\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, sizeX } = useAdaptivity();\n const animate = useTransitionAnimate(animateProp);\n\n const contextValue = useObjectMemo({\n colRef: baseRef,\n animate,\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={~~classNamesString~~(\n styles[\"SplitCol\"],\n getSizeXClassName(styles[\"SplitCol\"], sizeX),\n getViewWidthClassName(styles[\"SplitCol\"], viewWidth),\n spaced && styles[\"SplitCol--spaced\"],\n spaced === undefined && styles[\"SplitCol--spaced-none\"],\n autoSpaced && styles[\"SplitCol--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 ? ~~(\n~~ <div className={styles[\"SplitCol__fixedInner\"]}>{children}</div~~>\n )~~ : ~~(\n~~ children~~\n )~~}\n </SplitColContext.Provider>\n </div>\n );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,~~gBAAgB~~,QAAQ,~~sBAAsB~~;~~AACvD~~,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,qBAAqB,QAAQ,qCAAqC;AAC3E,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,SAAS,QAAQ,sBAAsB;AAChD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,eAAe,QAAQ,6BAA6B;AAAC;~~AAG9D~~,SAASC,oBAAoB,CAACC,WAAqB,EAAE;EACnD,~~qBAAsBL~~,aAAa,EAAE;~~IAA7BM~~,SAAS,kBAATA,SAAS;EACjB,~~sBAA8BV~~,KAAK,~~CAACW~~,QAAQ,CAACC,OAAO,CAACH,WAAW,CAAC,CAAC;IAAA;IAA3DI,OAAO;IAAEC,UAAU;EAC1B,IAAMC,YAAY,~~GAAGR~~,eAAe,EAAE;EAEtCP,KAAK,~~CAACgB~~,SAAS,CAAC,YAAM;IACpB,IAAIP,WAAW,KAAKQ,SAAS,EAAE;MAC7BH,UAAU,CAACL,WAAW,CAAC;MACvB;IACF;IAEA,IAAIC,SAAS,KAAKO,SAAS,EAAE;MAC3BH,UAAU,CAACJ,SAAS,~~GAAGL~~,SAAS,~~CAACa~~,MAAM,CAAC;MACxC;IACF;;IAEA;IACA,IAAMC,QAAQ,GAAG,SAAXA,QAAQ;MAAA,OAASL,UAAU,CAAC,CAACC,YAAY,CAACK,eAAe,CAACC,OAAO,CAAC;IAAA;IACxEF,QAAQ,EAAE;~~IAEVJ~~,YAAY,CAACK,eAAe,~~CAACE~~,~~gBAAgB,CAAC,~~QAAQ,~~EAAEH,QAAQ,~~CAAC;IACjE,OAAO,YAAM;~~MACXJ~~,YAAY,CAACK,eAAe,~~CAACG~~,~~mBAAmB,CAAC,~~QAAQ,~~EAAEJ,QAAQ,~~CAAC;IACtE,CAAC;EACH,CAAC,EAAE,CAACV,WAAW,EAAEC,SAAS,EAAEK,YAAY,CAAC,CAAC;EAE1C,OAAOF,OAAO;AAChB;AAOA,OAAO,~~IAAMW~~,eAAe,gBAAGxB,KAAK,CAACyB,aAAa,CAAuB;EACvEC,MAAM,EAAE,IAAI;~~EACZb~~,OAAO,EAAE;AACX,CAAC,CAAC;AAEF,OAAO,~~IAAMc~~,WAAW,GAAG,SAAdA,WAAW;EAAA,OAAS3B,KAAK,CAAC4B,UAAU,CAACJ,eAAe,CAAC;AAAA;AAyBlE;AACA;AACA;AACA,OAAO,IAAMK,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,KAAoB,EAAK;EAChD,IACEC,QAAQ,GAYND,KAAK,CAZPC,QAAQ;IACRC,KAAK,GAWHF,KAAK,CAXPE,KAAK;IACLC,QAAQ,GAUNH,KAAK,CAVPG,QAAQ;IACRC,QAAQ,GASNJ,KAAK,CATPI,QAAQ;IACRC,MAAM,GAQJL,KAAK,CARPK,MAAM;~~IACG1B~~,WAAW,~~GAOlBqB~~,KAAK,~~CAPPjB~~,OAAO;~~IACPuB~~,KAAK,GAMHN,KAAK,CANPM,KAAK;IACLC,KAAK,GAKHP,KAAK,CALPO,KAAK;IACLC,UAAU,GAIRR,KAAK,CAJPQ,UAAU;IACVC,iBAAiB,GAGfT,KAAK,CAHPS,iBAAiB;IACjBC,SAAS,GAEPV,KAAK,CAFPU,SAAS;IACNC,SAAS,4BACVX,KAAK;EACT,IAAMY,OAAO,GAAG1C,KAAK,CAAC2C,MAAM,CAAiB,IAAI,CAAC;EAClD,sBAA6BvC,aAAa,EAAE;~~IAApCM~~,SAAS,mBAATA,SAAS;~~IAAEkC~~,KAAK,mBAALA,KAAK;EACxB,~~IAAM/B~~,OAAO,GAAGL,oBAAoB,CAACC,WAAW,CAAC;EAEjD,~~IAAMoC~~,YAAY,GAAGvC,aAAa,CAAC;IACjCoB,MAAM,EAAEgB,OAAO;~~IACf7B~~,OAAO,EAAPA;EACF,CAAC,CAAC;EAEF,oBACE,~~wCACM4B~~,SAAS;IACb,KAAK,kCACAJ,KAAK;MACRL,KAAK,EAAEA,KAAK;MACZC,QAAQ,EAAEA,QAAQ;MAClBC,QAAQ,EAAEA;IAAQ,EAClB;IACF,GAAG,EAAEQ,OAAQ;IACb,SAAS,EAAEzC,~~gBAAgB~~,~~iBAEzBC~~,iBAAiB,iBAAqB0C,KAAK,CAAC,EAC5CzC,qBAAqB,~~iBAAqBO~~,SAAS,CAAC,~~EACpDyB~~,MAAM,0BAA8B,EACpCA,MAAM,~~KAAKlB~~,SAAS,+BAAmC,~~EACvDqB~~,UAAU,+BAAmC,EAC7CF,KAAK,yBAA6B,EAClCG,iBAAiB,uCAA2C,EAC5DC,SAAS;EACT,iBAEF,oBAAC,eAAe,CAAC,QAAQ;IAAC,KAAK,EAAEK;EAAa,GAC3CT,KAAK,~~gBACJ~~;IAAK,SAAS;EAAiC,GAAEL,QAAQ,CAAO,~~GAEhEA~~,~~QACD~~,~~CACwB~~,CACvB;AAEV,CAAC"}
1	+ {"version":3,"file":"SplitCol.js","names":["React","classNames","getSizeXClassName","getViewWidthClassName","useAdaptivity","ViewWidth","useObjectMemo","useMediaQueries","matchMediaListAddListener","matchMediaListRemoveListener","useTransitionAnimate","animateProp","viewWidth","useState","Boolean","animate","setAnimate","mediaQueries","useEffect","undefined","TABLET","listener","smallTabletPlus","matches","SplitColContext","createContext","colRef","useSplitCol","useContext","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","sizeX","contextValue"],"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { getViewWidthClassName } from '../../helpers/getViewWidthClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport styles from './SplitCol.module.css';\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 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\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 spaced?: boolean;\n /\n Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n /\n autoSpaced?: boolean;\n fixed?: boolean;\n /\n Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n /\n stretchedOnMobile?: boolean;\n}\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, sizeX } = useAdaptivity();\n const animate = useTransitionAnimate(animateProp);\n\n const contextValue = useObjectMemo({\n colRef: baseRef,\n animate,\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 getSizeXClassName(styles['SplitCol'], sizeX),\n getViewWidthClassName(styles['SplitCol'], viewWidth),\n spaced && styles['SplitCol--spaced'],\n spaced === undefined && styles['SplitCol--spaced-none'],\n autoSpaced && styles['SplitCol--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"],"mappings":"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"}

package/dist/cssm/components/SplitCol/SplitCol.module.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vkuiSplitCol{flex-grow:1;flex-shrink:1;height:100%;position:relative;width:1px}.vkuiSplitCol--spaced,.vkuiSplitCol--viewWidth-tabletPlus.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto{margin:0 var(--vkui--size_split_col_padding_horizontal--regular)}@media (min-width:768px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto{margin:0 var(--vkui--size_split_col_padding_horizontal--regular)}}.vkuiSplitCol--viewWidth-mobile.vkuiSplitCol--stretched-on-mobile,.vkuiSplitCol--viewWidth-smallMobile.vkuiSplitCol--stretched-on-mobile,.vkuiSplitCol--viewWidth-smallTablet.vkuiSplitCol--stretched-on-mobile{max-width:100%!important;width:100%!important}@media (~~max~~-width:~~1023px~~){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--stretched-on-mobile{max-width:100%!important;width:100%!important}}.vkuiSplitCol--fixed{flex-grow:1;flex-shrink:1;height:100%;width:1px}.vkuiSplitCol__fixedInner{height:inherit;max-width:inherit;min-width:inherit;overflow:hidden;position:fixed;top:0;transform:translateZ(0);width:inherit}
1	+ .vkuiSplitCol{flex-grow:1;flex-shrink:1;height:100%;position:relative;width:1px}.vkuiSplitCol--spaced,.vkuiSplitCol--viewWidth-tabletPlus.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto{margin:0 16px;margin:0 var(--vkui--size_split_col_padding_horizontal--regular)}@media (min-width:768px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto{margin:0 16px;margin:0 var(--vkui--size_split_col_padding_horizontal--regular)}}.vkuiSplitCol--viewWidth-mobile.vkuiSplitCol--stretched-on-mobile,.vkuiSplitCol--viewWidth-smallMobile.vkuiSplitCol--stretched-on-mobile,.vkuiSplitCol--viewWidth-smallTablet.vkuiSplitCol--stretched-on-mobile{max-width:100%!important;width:100%!important}@media not (min-width:1024px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--stretched-on-mobile{max-width:100%!important;width:100%!important}}.vkuiSplitCol--fixed{flex-grow:1;flex-shrink:1;height:100%;width:1px}.vkuiSplitCol__fixedInner{height:inherit;max-width:inherit;min-width:inherit;overflow:hidden;position:fixed;top:0;transform:translateZ(0);width:inherit}

package/dist/cssm/components/SplitLayout/SplitLayout.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRef, HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRef, HasRootRef } from '../../types';
 export interface SplitLayoutProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
      * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.

package/dist/cssm/components/SplitLayout/SplitLayout.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["popout", "modal", "header", "children", "getRootRef", "getRef", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { Platform } from "../../lib/platform";
-import { PopoutRoot } from "../PopoutRoot/PopoutRoot";
-import { usePlatform } from "../../hooks/usePlatform";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Platform } from '../../lib/platform';
+import { PopoutRoot } from '../PopoutRoot/PopoutRoot';
+import { usePlatform } from '../../hooks/usePlatform';
 import "./SplitLayout.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitLayout
@@ -21,13 +21,13 @@ export var SplitLayout = function SplitLayout(_ref) {
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
   return /*#__PURE__*/React.createElement(PopoutRoot, {
-    className: classNamesString("vkuiSplitLayout", platform === Platform.IOS && "vkuiSplitLayout--ios"),
+    className: classNames("vkuiSplitLayout", platform === Platform.IOS && "vkuiSplitLayout--ios"),
     popout: popout,
     modal: modal,
     getRootRef: getRootRef
   }, header, /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     ref: getRef,
-    className: classNamesString("vkuiSplitLayout__inner", !!header && "vkuiSplitLayout__inner--header", className)
+    className: classNames("vkuiSplitLayout__inner", !!header && "vkuiSplitLayout__inner--header", className)
   }), children));
 };
 //# sourceMappingURL=SplitLayout.js.map

package/dist/cssm/components/SplitLayout/SplitLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SplitLayout.js","names":["React","~~classNamesString~~","Platform","PopoutRoot","usePlatform","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","IOS"],"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ~~classNamesString~~ } from ~~\"../../lib~~/~~classNames\"~~;\nimport { Platform } from \"../../lib/platform\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { PopoutRoot } from \"../PopoutRoot/PopoutRoot\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\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={~~classNamesString~~(\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={~~classNamesString~~(\n styles[\"SplitLayout__inner\"],\n !!header && styles[\"SplitLayout__inner--header\"],\n className\n )}\n >\n {children}\n </div>\n </PopoutRoot>\n );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,~~gBAAgB~~,QAAQ,~~sBAAsB~~;~~AACvD~~,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,WAAW,QAAQ,yBAAyB;AAAC;AAkBtD;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGV,WAAW,EAAE;EAE9B,oBACE,oBAAC,UAAU;IACT,SAAS,EAAEH,~~gBAAgB~~,~~oBAEzBa~~,QAAQ,KAAKZ,QAAQ,CAACa,GAAG,0BAA8B,CACvD;IACF,MAAM,EAAET,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,UAAU,EAAEG;EAAW,GAEtBF,MAAM,eACP,wCACMK,SAAS;IACb,GAAG,EAAEF,MAAO;IACZ,SAAS,EAAEV,~~gBAAgB~~,~~2BAEzB~~,CAAC,CAACO,MAAM,oCAAwC,EAChDI,SAAS;EACT,IAEDH,QAAQ,CACL,CACK;AAEjB,CAAC"}
1	+ {"version":3,"file":"SplitLayout.js","names":["React","classNames","Platform","PopoutRoot","usePlatform","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","IOS"],"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport { usePlatform } from '../../hooks/usePlatform';\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"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,WAAW,QAAQ,yBAAyB;AAAC;AAkBtD;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGV,WAAW,EAAE;EAE9B,oBACE,oBAAC,UAAU;IACT,SAAS,EAAEH,UAAU,oBAEnBa,QAAQ,KAAKZ,QAAQ,CAACa,GAAG,0BAA8B,CACvD;IACF,MAAM,EAAET,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,UAAU,EAAEG;EAAW,GAEtBF,MAAM,eACP,wCACMK,SAAS;IACb,GAAG,EAAEF,MAAO;IACZ,SAAS,EAAEV,UAAU,2BAEnB,CAAC,CAACO,MAAM,oCAAwC,EAChDI,SAAS;EACT,IAEDH,QAAQ,CACL,CACK;AAEjB,CAAC"}

package/dist/cssm/components/SplitLayout/SplitLayout.module.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vkuiSplitLayout{height:100%;position:relative;width:100%}.vkuiSplitLayout__inner{display:flex;height:100%;width:100%}.vkuiSplitLayout__inner--header{position:relative;z-index:11}.vkuiSplitLayout--ios .vkuiSplitLayout__inner--header,.vkuiSplitLayout__inner--header{margin-top:calc(-1 * (var(--vkui--size_panel_header_height--regular) + var(--vkui_internal--safe_area_inset_top)))}.vkuiSplitLayout__popout{z-index:100}.vkuiSplitLayout__modal,.vkuiSplitLayout__popout{height:100%;left:0;position:fixed;top:0;width:100%}.vkuiSplitLayout__modal{z-index:99}.vkuiSplitLayout__modal:empty{display:none}
1	+ .vkuiSplitLayout{height:100%;position:relative;width:100%}.vkuiSplitLayout__inner{display:flex;height:100%;width:100%}.vkuiSplitLayout__inner--header{position:relative;z-index:11;z-index:var(--vkui_internal--z_index_split_layout_panel_header)}.vkuiSplitLayout--ios .vkuiSplitLayout__inner--header,.vkuiSplitLayout__inner--header{margin-top:calc(-1 * (56px + 0px));margin-top:calc(-1 * (var(--vkui--size_panel_header_height--regular) + var(--vkui_internal--safe_area_inset_top)))}.vkuiSplitLayout__popout{z-index:100;z-index:var(--vkui--z_index_popout)}.vkuiSplitLayout__modal,.vkuiSplitLayout__popout{height:100%;left:0;position:fixed;top:0;width:100%}.vkuiSplitLayout__modal{z-index:99;z-index:var(--vkui--z_index_modal)}.vkuiSplitLayout__modal:empty{display:none}

package/dist/cssm/components/SubnavigationBar/SubnavigationBar.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { HorizontalScrollProps } from "../HorizontalScroll/HorizontalScroll";
-export interface SubnavigationBarProps extends React.HTMLAttributes<HTMLDivElement>, Pick<HorizontalScrollProps, "showArrows" | "getScrollToLeft" | "getScrollToRight" | "scrollAnimationDuration"> {
-    mode?: "fixed" | "overflow";
+import * as React from 'react';
+import { HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';
+export interface SubnavigationBarProps extends React.HTMLAttributes<HTMLDivElement>, Pick<HorizontalScrollProps, 'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'> {
+    mode?: 'fixed' | 'overflow';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationBar

package/dist/cssm/components/SubnavigationBar/SubnavigationBar.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["mode", "children", "showArrows", "getScrollToLeft", "getScrollToRight", "scrollAnimationDuration", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { HorizontalScroll } from "../HorizontalScroll/HorizontalScroll";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { HorizontalScroll } from '../HorizontalScroll/HorizontalScroll';
 import "./SubnavigationBar.module.css";
 var defaultScrollToLeft = function defaultScrollToLeft(x) {
   return x - 240;
@@ -17,7 +17,7 @@ var defaultScrollToRight = function defaultScrollToRight(x) {
  */
 export var SubnavigationBar = function SubnavigationBar(_ref) {
   var _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "overflow" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'overflow' : _ref$mode,
     children = _ref.children,
     _ref$showArrows = _ref.showArrows,
     showArrows = _ref$showArrows === void 0 ? true : _ref$showArrows,
@@ -30,8 +30,8 @@ export var SubnavigationBar = function SubnavigationBar(_ref) {
     restProps = _objectWithoutProperties(_ref, _excluded);
   var ScrollWrapper;
   var scrollWrapperProps = {};
-  if (mode === "fixed") {
-    ScrollWrapper = "div";
+  if (mode === 'fixed') {
+    ScrollWrapper = 'div';
   } else {
     ScrollWrapper = HorizontalScroll;
     scrollWrapperProps = {
@@ -42,7 +42,7 @@ export var SubnavigationBar = function SubnavigationBar(_ref) {
     };
   }
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNamesString("vkuiSubnavigationBar", styles["SubnavigationBar--mode-".concat(mode)], className)
+    className: classNames("vkuiSubnavigationBar", styles["SubnavigationBar--mode-".concat(mode)], className)
   }), /*#__PURE__*/React.createElement(ScrollWrapper, _extends({
     className: "vkuiSubnavigationBar__in"
   }, scrollWrapperProps), /*#__PURE__*/React.createElement("div", {

package/dist/cssm/components/SubnavigationBar/SubnavigationBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubnavigationBar.js","names":["React","~~classNamesString~~","HorizontalScroll","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","className","restProps","ScrollWrapper","scrollWrapperProps","styles"],"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ~~classNamesString~~ } from ~~\"../../lib~~/~~classNames\"~~;\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\"\n~~ \| \"getScrollToLeft~~\"\n~~ \| \"getScrollToRight~~\"\n~~ \| \"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={~~classNamesString~~(\n styles[\"SubnavigationBar\"],\n styles[`SubnavigationBar--mode-${mode}`],\n className\n )}\n >\n <ScrollWrapper\n className={styles[\"SubnavigationBar__in\"]}\n {...scrollWrapperProps}\n >\n <div className={styles[\"SubnavigationBar__scrollIn\"]}>{children}</div>\n </ScrollWrapper>\n </div>\n );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,~~gBAAgB~~,QAAQ,~~sBAAsB~~;~~AACvD~~,SACEC,gBAAgB,QAGX,sCAAsC;AAAC;~~AAe9C~~,IAAMC,mBAA0C,GAAG,SAA7CA,mBAA0C,CAAIC,CAAC;EAAA,OAAKA,CAAC,GAAG,GAAG;AAAA;AAEjE,IAAMC,oBAA2C,GAAG,SAA9CA,oBAA2C,CAAID,CAAC;EAAA,OAAKA,CAAC,GAAG,GAAG;AAAA;;AAElE;AACA;AACA;AACA,OAAO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAgB,OASA;EAAA,qBAR3BC,IAAI;IAAJA,IAAI,0BAAG,UAAU;IACjBC,QAAQ,QAARA,QAAQ;IAAA,uBACRC,UAAU;IAAVA,UAAU,gCAAG,IAAI;IAAA,4BACjBC,eAAe;IAAfA,eAAe,qCAAGP,mBAAmB;IAAA,6BACrCQ,gBAAgB;IAAhBA,gBAAgB,sCAAGN,oBAAoB;IACvCO,uBAAuB,QAAvBA,uBAAuB;IACvBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIC,aAAgC;EACpC,IAAIC,kBAAkB,GAAG,CAAC,CAAC;EAE3B,IAAIT,IAAI,KAAK,OAAO,EAAE;IACpBQ,aAAa,GAAG,KAAK;EACvB,CAAC,MAAM;IACLA,aAAa,GAAGb,gBAAgB;IAChCc,kBAAkB,GAAG;MACnBP,UAAU,EAAVA,UAAU;MACVC,eAAe,EAAfA,eAAe;MACfC,gBAAgB,EAAhBA,gBAAgB;MAChBC,uBAAuB,EAAvBA;IACF,CAAC;EACH;EAEA,oBACE,wCACME,SAAS;IACb,SAAS,EAAEb,~~gBAAgB~~,~~yBAEzBgB~~,MAAM,kCAA2BV,IAAI,EAAG,EACxCM,SAAS;EACT,iBAEF,oBAAC,aAAa;~~IACZ~~,SAAS;EAAiC,~~GACtCG~~,kBAAkB,~~gBAEtB~~;IAAK,SAAS;EAAuC,GAAER,QAAQ,CAAO,CACxD,CACZ;AAEV,CAAC;AAAC;EAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"SubnavigationBar.js","names":["React","classNames","HorizontalScroll","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","className","restProps","ScrollWrapper","scrollWrapperProps","styles"],"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 styles['SubnavigationBar'],\n styles[`SubnavigationBar--mode-${mode}`],\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"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SACEC,gBAAgB,QAGX,sCAAsC;AAAC;AAY9C,IAAMC,mBAA0C,GAAG,SAA7CA,mBAA0C,CAAIC,CAAC;EAAA,OAAKA,CAAC,GAAG,GAAG;AAAA;AAEjE,IAAMC,oBAA2C,GAAG,SAA9CA,oBAA2C,CAAID,CAAC;EAAA,OAAKA,CAAC,GAAG,GAAG;AAAA;;AAElE;AACA;AACA;AACA,OAAO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAgB,OASA;EAAA,qBAR3BC,IAAI;IAAJA,IAAI,0BAAG,UAAU;IACjBC,QAAQ,QAARA,QAAQ;IAAA,uBACRC,UAAU;IAAVA,UAAU,gCAAG,IAAI;IAAA,4BACjBC,eAAe;IAAfA,eAAe,qCAAGP,mBAAmB;IAAA,6BACrCQ,gBAAgB;IAAhBA,gBAAgB,sCAAGN,oBAAoB;IACvCO,uBAAuB,QAAvBA,uBAAuB;IACvBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIC,aAAgC;EACpC,IAAIC,kBAAkB,GAAG,CAAC,CAAC;EAE3B,IAAIT,IAAI,KAAK,OAAO,EAAE;IACpBQ,aAAa,GAAG,KAAK;EACvB,CAAC,MAAM;IACLA,aAAa,GAAGb,gBAAgB;IAChCc,kBAAkB,GAAG;MACnBP,UAAU,EAAVA,UAAU;MACVC,eAAe,EAAfA,eAAe;MACfC,gBAAgB,EAAhBA,gBAAgB;MAChBC,uBAAuB,EAAvBA;IACF,CAAC;EACH;EAEA,oBACE,wCACME,SAAS;IACb,SAAS,EAAEb,UAAU,yBAEnBgB,MAAM,kCAA2BV,IAAI,EAAG,EACxCM,SAAS;EACT,iBAEF,oBAAC,aAAa;IAAC,SAAS;EAAiC,GAAKG,kBAAkB,gBAC9E;IAAK,SAAS;EAAuC,GAAER,QAAQ,CAAO,CACxD,CACZ;AAEV,CAAC;AAAC;EAAA;EAAA;AAAA"}

package/dist/cssm/components/SubnavigationBar/SubnavigationBar.module.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vkuiSubnavigationBar__in{margin:-8px 0}.vkuiSubnavigationBar__scrollIn{display:flex;padding-bottom:calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px);padding-top:calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px)}.vkuiSubnavigationBar__scrollIn:after,.vkuiSubnavigationBar__scrollIn:before{content:"";min-width:var(--vkui--size_base_padding_horizontal--regular)}
1	+ .vkuiSubnavigationBar__in{margin:-8px 0}.vkuiSubnavigationBar__scrollIn{display:flex;padding-bottom:calc(12px + 8px);padding-bottom:calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px);padding-top:calc(12px + 8px);padding-top:calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px)}.vkuiSubnavigationBar__scrollIn:after,.vkuiSubnavigationBar__scrollIn:before{content:"";min-width:16px;min-width:var(--vkui--size_base_padding_horizontal--regular)}