@vkontakte/vkui 6.0.2 → 6.1.0

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

@@ -12,21 +12,41 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
-const _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
+const _useExternRef = require("../../hooks/useExternRef");
+const _useFocusWithin = require("../../hooks/useFocusWithin");
+const _useGlobalEscKeyDown = require("../../hooks/useGlobalEscKeyDown");
 const _usePlatform = require("../../hooks/usePlatform");
-const _useTimeout = require("../../hooks/useTimeout");
-const _useWaitTransitionFinish = require("../../hooks/useWaitTransitionFinish");
-const _adaptivity = require("../../lib/adaptivity");
+const _animation = require("../../lib/animation");
+const _useReducedMotion = require("../../lib/animation/useReducedMotion");
+const _dom = require("../../lib/dom");
 const _touch = require("../../lib/touch");
-const _AppRootPortal = require("../AppRoot/AppRootPortal");
+const _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 const _Button = require("../Button/Button");
 const _RootComponent = require("../RootComponent/RootComponent");
-const _Touch = require("../Touch/Touch");
 const _Basic = require("./subcomponents/Basic/Basic");
+const _utils = require("./utils");
+const placementClassNames = {
+    'top-start': "vkuiSnackbar--placement-top-start",
+    'top': "vkuiSnackbar--placement-top",
+    'top-end': "vkuiSnackbar--placement-top-end",
+    'bottom-start': "vkuiSnackbar--placement-bottom-start",
+    'bottom': "vkuiSnackbar--placement-bottom",
+    'bottom-end': "vkuiSnackbar--placement-bottom-end"
+};
+const animationStateClassNames = {
+    enter: "vkuiSnackbar--state-enter",
+    entering: "vkuiSnackbar--state-entering",
+    entered: "vkuiSnackbar--state-entered",
+    exit: "vkuiSnackbar--state-exit",
+    exiting: "vkuiSnackbar--state-exiting",
+    exited: "vkuiSnackbar--state-exited"
+};
 const Snackbar = (_param)=>{
-    var { children, layout: layoutProps, action, before, after, duration = 4000, onActionClick, onClose, mode = 'default', subtitle, offsetY, style } = _param, restProps = _object_without_properties._(_param, [
+    var { placement = 'bottom-start', children, layout, action, before, after, duration = 4000, onActionClick = _vkjs.noop, onClose, mode = 'default', subtitle, offsetY, style, getRootRef } = _param, restProps = _object_without_properties._(_param, [
+        "placement",
         "children",
         "layout",
         "action",
@@ -38,117 +58,142 @@ const Snackbar = (_param)=>{
         "mode",
         "subtitle",
         "offsetY",
-        "style"
+        "style",
+        "getRootRef"
     ]);
+    const isReducedMotion = (0, _useReducedMotion.useReducedMotion)();
     const platform = (0, _usePlatform.usePlatform)();
-    const { viewWidth } = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)();
-    const isDesktop = viewWidth >= _adaptivity.ViewWidth.SMALL_TABLET;
-    const { waitTransitionFinish } = (0, _useWaitTransitionFinish.useWaitTransitionFinish)();
-    const [closing, setClosing] = _react.useState(false);
+    const [open, setOpen] = _react.useState(true);
     const [touched, setTouched] = _react.useState(false);
-    const shiftXPercentRef = _react.useRef(0);
-    const shiftXCurrentRef = _react.useRef(0);
-    const bodyElRef = _react.useRef(null);
-    const innerElRef = _react.useRef(null);
-    const animationFrameRef = _react.useRef(null);
-    const transitionFinishDurationFallback = platform === 'ios' ? 320 : 400;
-    const close = ()=>{
-        setClosing(true);
-        waitTransitionFinish(innerElRef.current, ()=>{
-            onClose();
-        }, transitionFinishDurationFallback);
-    };
-    const handleActionClick = (e)=>{
-        close();
-        if (action && typeof onActionClick === 'function') {
-            onActionClick(e);
-        }
-    };
-    const closeTimeout = (0, _useTimeout.useTimeout)(close, duration);
-    const setBodyTransform = (percent)=>{
-        if (animationFrameRef.current !== null) {
-            cancelAnimationFrame(animationFrameRef.current);
+    const rootRef = (0, _useExternRef.useExternRef)(getRootRef);
+    const focused = (0, _useFocusWithin.useFocusWithin)(rootRef);
+    const inRef = _react.useRef(null);
+    const panGestureRecognizer = _react.useRef(null);
+    const shiftDataRef = _react.useRef(null);
+    const rafRef = _react.useRef(null);
+    const closeTimeoutIdRef = _react.useRef();
+    const [animationState, animationHandlers] = (0, _animation.useCSSKeyframesAnimationController)(open ? 'enter' : 'exit', {
+        onExited: onClose
+    });
+    const clearRAF = _react.useCallback(()=>{
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
         }
-        animationFrameRef.current = requestAnimationFrame(()=>{
-            if (bodyElRef.current) {
-                bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;
+    }, []);
+    const updateShiftAxisCSSProperties = _react.useCallback((x, y)=>{
+        rafRef.current = requestAnimationFrame(()=>{
+            if (rootRef.current) {
+                x === null ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_x') : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_x', `${x}px`);
+                y === null ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_y') : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_y', `${y}px`);
             }
         });
-    };
-    const onTouchStart = closeTimeout.clear;
-    const onTouchMoveX = (event)=>{
-        var _bodyElRef_current;
-        const { shiftX, originalEvent } = event;
-        originalEvent.preventDefault();
-        if (!touched) {
-            setTouched(true);
+    }, [
+        rootRef
+    ]);
+    const close = _react.useCallback(()=>{
+        setOpen(false);
+    }, []);
+    const handleActionClick = (event)=>{
+        close();
+        if (action) {
+            onActionClick(event);
         }
-        var _bodyElRef_current_offsetWidth;
-        shiftXPercentRef.current = shiftX / ((_bodyElRef_current_offsetWidth = (_bodyElRef_current = bodyElRef.current) === null || _bodyElRef_current === void 0 ? void 0 : _bodyElRef_current.offsetWidth) !== null && _bodyElRef_current_offsetWidth !== void 0 ? _bodyElRef_current_offsetWidth : 0) * 100;
-        shiftXCurrentRef.current = (0, _touch.rubber)(shiftXPercentRef.current, 72, 1.2, platform !== 'ios');
-        setBodyTransform(shiftXCurrentRef.current);
     };
-    const onTouchEnd = (e)=>{
-        let callback;
-        if (touched) {
-            let shiftXCurrent = shiftXCurrentRef.current;
-            const expectTranslateY = shiftXCurrent / e.duration * 240 * 0.6;
-            shiftXCurrent = shiftXCurrent + expectTranslateY;
-            if (isDesktop && shiftXCurrent <= -50) {
-                closeTimeout.clear();
-                waitTransitionFinish(bodyElRef.current, ()=>{
-                    onClose();
-                }, transitionFinishDurationFallback);
-                setBodyTransform(-120);
-            } else if (!isDesktop && shiftXCurrent >= 50) {
-                closeTimeout.clear();
-                waitTransitionFinish(bodyElRef.current, ()=>{
-                    onClose();
-                }, transitionFinishDurationFallback);
-                setBodyTransform(120);
-            } else {
-                callback = ()=>{
-                    closeTimeout.set();
-                    setBodyTransform(0);
-                };
+    const handleTouchStart = (event)=>{
+        panGestureRecognizer.current = new _touch.UIPanGestureRecognizer();
+        panGestureRecognizer.current.setStartCoords(event.nativeEvent);
+        shiftDataRef.current = (0, _utils.getInitialShiftData)(rootRef.current.offsetWidth, rootRef.current.offsetHeight);
+        setTouched(true);
+    };
+    const handleTouchMove = (event)=>{
+        if (shiftDataRef.current && panGestureRecognizer.current) {
+            panGestureRecognizer.current.setInitialTimeOnce();
+            panGestureRecognizer.current.setEndCoords(event.nativeEvent);
+            shiftDataRef.current = (0, _utils.getMovedShiftData)(placement, shiftDataRef.current, panGestureRecognizer.current.delta());
+            if (shiftDataRef.current.shifted) {
+                updateShiftAxisCSSProperties(shiftDataRef.current.x, shiftDataRef.current.y);
             }
-        } else {
-            closeTimeout.set();
+        }
+    };
+    const handleTouchEnd = ()=>{
+        if (touched && shiftDataRef.current && panGestureRecognizer.current && (0, _utils.shouldBeClosedByShiftData)(placement, shiftDataRef.current, (0, _dom.getRelativeBoundingClientRect)(rootRef.current, inRef.current), panGestureRecognizer.current.velocity())) {
+            close();
         }
         setTouched(false);
-        callback && requestAnimationFrame(callback);
     };
-    _react.useEffect(()=>closeTimeout.set(), [
-        closeTimeout
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function closeAfterDelay() {
+        if (!open || focused || touched || animationState !== 'entered') {
+            return;
+        }
+        closeTimeoutIdRef.current = setTimeout(close, duration);
+        return function preventCloseAfterDelayOnUnmount() {
+            clearTimeout(closeTimeoutIdRef.current);
+        };
+    }, [
+        open,
+        focused,
+        touched,
+        animationState,
+        close,
+        duration
+    ]);
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function clearUserInteractionDataAfterTouchEnd() {
+        if (!touched) {
+            clearRAF();
+            shiftDataRef.current = null;
+            panGestureRecognizer.current = null;
+            if (open) {
+                updateShiftAxisCSSProperties(null, null);
+            }
+        }
+    }, [
+        touched,
+        open,
+        updateShiftAxisCSSProperties,
+        clearRAF
+    ]);
+    _react.useEffect(()=>clearRAF, [
+        clearRAF
     ]);
-    const layout = layoutProps || (after || isDesktop || subtitle ? 'vertical' : 'horizontal');
-    return /*#__PURE__*/ _react.createElement(_AppRootPortal.AppRootPortal, null, /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
-        baseClassName: (0, _vkjs.classNames)("vkuiSnackbar", platform === 'ios' && "vkuiSnackbar--ios", closing && "vkuiSnackbar--closing", touched && "vkuiSnackbar--touched", isDesktop && "vkuiSnackbar--desktop"),
-        style: offsetY ? _object_spread_props._(_object_spread._({}, style), {
-            bottom: offsetY
-        }) : style
-    }), /*#__PURE__*/ _react.createElement(_Touch.Touch, {
-        className: "vkuiSnackbar__in",
-        getRootRef: innerElRef,
-        onStart: onTouchStart,
-        onMoveX: onTouchMoveX,
-        onEnd: onTouchEnd
-    }, /*#__PURE__*/ _react.createElement(_Basic.Basic, {
-        className: "vkuiSnackbar__snackbar",
-        getRootRef: bodyElRef,
-        layout: layout,
-        mode: mode,
-        before: before,
-        subtitle: subtitle,
-        action: action && /*#__PURE__*/ _react.createElement(_Button.Button, {
-            align: "left",
-            mode: "link",
-            appearance: mode === 'dark' ? 'overlay' : 'accent',
-            size: "s",
-            onClick: handleActionClick
-        }, action),
-        after: after
-    }, children))));
+    (0, _useGlobalEscKeyDown.useGlobalEscKeyDown)(open, close);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        role: "presentation",
+        baseClassName: (0, _vkjs.classNames)("vkuiSnackbar", platform === 'ios' && "vkuiSnackbar--ios", touched && "vkuiSnackbar--touched", placementClassNames[placement], animationStateClassNames[animationState]),
+        style: (0, _utils.resolveOffsetYCssStyle)(placement, style, offsetY),
+        getRootRef: rootRef,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._({
+            role: "alert",
+            className: "vkuiSnackbar__in",
+            ref: inRef,
+            // mobile
+            onTouchStart: isReducedMotion ? undefined : handleTouchStart,
+            onTouchMove: isReducedMotion ? undefined : handleTouchMove,
+            onTouchEnd: isReducedMotion ? undefined : handleTouchEnd,
+            // desktop
+            onMouseDown: isReducedMotion ? undefined : handleTouchStart,
+            onMouseMove: isReducedMotion ? undefined : handleTouchMove,
+            onMouseUp: isReducedMotion ? undefined : handleTouchEnd,
+            onMouseLeave: isReducedMotion ? undefined : handleTouchEnd
+        }, animationHandlers), {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Basic.Basic, {
+                mode: mode,
+                layout: layout,
+                before: before,
+                after: after,
+                subtitle: subtitle,
+                action: action && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.Button, {
+                    align: "left",
+                    mode: "link",
+                    appearance: mode === 'dark' ? /* istanbul ignore next: проверяется в e2e */ 'overlay' : 'accent',
+                    size: "s",
+                    onClick: handleActionClick,
+                    children: action
+                }),
+                children: children
+            })
+        }))
+    }));
 };
 Snackbar.Basic = _Basic.Basic;
 

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 { rubber } from '../../lib/touch';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Basic, BasicProps } from './subcomponents/Basic/Basic';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends HTMLAttributesWithRootRef<HTMLElement>, BasicProps {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n   */\n  offsetY?: React.CSSProperties['bottom'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps,\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  subtitle,\n  offsetY,\n  style,\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 === '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 = (e: React.MouseEvent) => {\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 !== '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 = layoutProps || (after || isDesktop || subtitle ? 'vertical' : 'horizontal');\n\n  return (\n    <AppRootPortal>\n      <RootComponent\n        {...restProps}\n        baseClassName={classNames(\n          styles['Snackbar'],\n          platform === 'ios' && styles['Snackbar--ios'],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n        )}\n        style={offsetY ? { ...style, bottom: offsetY } : style}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <Basic\n            className={styles['Snackbar__snackbar']}\n            getRootRef={bodyElRef}\n            layout={layout}\n            mode={mode}\n            before={before}\n            subtitle={subtitle}\n            action={\n              action && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )\n            }\n            after={after}\n          >\n            {children}\n          </Basic>\n        </Touch>\n      </RootComponent>\n    </AppRootPortal>\n  );\n};\n\nSnackbar.Basic = Basic;\n"],"names":["Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","subtitle","offsetY","style","restProps","platform","usePlatform","viewWidth","useAdaptivityWithJSMediaQueries","isDesktop","ViewWidth","SMALL_TABLET","waitTransitionFinish","useWaitTransitionFinish","closing","setClosing","React","useState","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","close","current","handleActionClick","e","closeTimeout","useTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","rubber","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","AppRootPortal","RootComponent","baseClassName","classNames","bottom","Touch","className","getRootRef","onStart","onMoveX","onEnd","Basic","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, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { useReducedMotion } from '../../lib/animation/useReducedMotion';\nimport { getRelativeBoundingClientRect } from '../../lib/dom';\nimport { UIPanGestureRecognizer } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Basic, BasicProps } from './subcomponents/Basic/Basic';\nimport type { ShiftData, SnackbarPlacement } from './types';\nimport {\n  getInitialShiftData,\n  getMovedShiftData,\n  resolveOffsetYCssStyle,\n  shouldBeClosedByShiftData,\n} from './utils';\nimport styles from './Snackbar.module.css';\n\nconst placementClassNames = {\n  'top-start': styles['Snackbar--placement-top-start'],\n  'top': styles['Snackbar--placement-top'],\n  'top-end': styles['Snackbar--placement-top-end'],\n  'bottom-start': styles['Snackbar--placement-bottom-start'],\n  'bottom': styles['Snackbar--placement-bottom'],\n  'bottom-end': styles['Snackbar--placement-bottom-end'],\n};\n\nconst animationStateClassNames = {\n  enter: styles['Snackbar--state-enter'],\n  entering: styles['Snackbar--state-entering'],\n  entered: styles['Snackbar--state-entered'],\n  exit: styles['Snackbar--state-exit'],\n  exiting: styles['Snackbar--state-exiting'],\n  exited: styles['Snackbar--state-exited'],\n};\n\nexport interface SnackbarProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'role'>,\n    BasicProps {\n  /**\n   * Задаёт расположение компонента.\n   */\n  placement?: SnackbarPlacement;\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (event: React.MouseEvent) => void;\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n   */\n  offsetY?: React.CSSProperties['bottom'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  placement = 'bottom-start',\n  children,\n  layout,\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick = noop,\n  onClose,\n  mode = 'default',\n  subtitle,\n  offsetY,\n  style,\n  getRootRef,\n  ...restProps\n}: SnackbarProps) => {\n  const isReducedMotion = useReducedMotion();\n  const platform = usePlatform();\n\n  const [open, setOpen] = React.useState(true);\n  const [touched, setTouched] = React.useState(false);\n\n  const rootRef = useExternRef(getRootRef);\n  const focused = useFocusWithin(rootRef);\n  const inRef = React.useRef<HTMLDivElement>(null);\n  const panGestureRecognizer = React.useRef<UIPanGestureRecognizer | null>(null);\n\n  const shiftDataRef = React.useRef<ShiftData | null>(null);\n\n  const rafRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n  const closeTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout>>();\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    open ? 'enter' : 'exit',\n    {\n      onExited: onClose,\n    },\n  );\n\n  const clearRAF = React.useCallback(() => {\n    if (rafRef.current !== null) {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = null;\n    }\n  }, []);\n\n  const updateShiftAxisCSSProperties = React.useCallback(\n    (x: number | null, y: number | null) => {\n      rafRef.current = requestAnimationFrame(() => {\n        if (rootRef.current) {\n          x === null\n            ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_x')\n            : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_x', `${x}px`);\n          y === null\n            ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_y')\n            : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_y', `${y}px`);\n        }\n      });\n    },\n    [rootRef],\n  );\n\n  const close = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  const handleActionClick = (event: React.MouseEvent) => {\n    close();\n    if (action) {\n      onActionClick(event);\n    }\n  };\n\n  const handleTouchStart = (event: React.UIEvent<HTMLDivElement>) => {\n    panGestureRecognizer.current = new UIPanGestureRecognizer();\n    panGestureRecognizer.current.setStartCoords(event.nativeEvent);\n    shiftDataRef.current = getInitialShiftData(\n      rootRef.current!.offsetWidth,\n      rootRef.current!.offsetHeight,\n    );\n    setTouched(true);\n  };\n\n  const handleTouchMove = (event: React.UIEvent<HTMLDivElement>) => {\n    if (shiftDataRef.current && panGestureRecognizer.current) {\n      panGestureRecognizer.current.setInitialTimeOnce();\n      panGestureRecognizer.current.setEndCoords(event.nativeEvent);\n      shiftDataRef.current = getMovedShiftData(\n        placement,\n        shiftDataRef.current,\n        panGestureRecognizer.current.delta(),\n      );\n\n      if (shiftDataRef.current.shifted) {\n        updateShiftAxisCSSProperties(shiftDataRef.current.x, shiftDataRef.current.y);\n      }\n    }\n  };\n\n  const handleTouchEnd = () => {\n    if (\n      touched &&\n      shiftDataRef.current &&\n      panGestureRecognizer.current &&\n      shouldBeClosedByShiftData(\n        placement,\n        shiftDataRef.current,\n        getRelativeBoundingClientRect(rootRef.current!, inRef.current!),\n        panGestureRecognizer.current.velocity(),\n      )\n    ) {\n      close();\n    }\n\n    setTouched(false);\n  };\n\n  useIsomorphicLayoutEffect(\n    function closeAfterDelay() {\n      if (!open || focused || touched || animationState !== 'entered') {\n        return;\n      }\n      closeTimeoutIdRef.current = setTimeout(close, duration);\n      return function preventCloseAfterDelayOnUnmount() {\n        clearTimeout(closeTimeoutIdRef.current);\n      };\n    },\n    [open, focused, touched, animationState, close, duration],\n  );\n\n  useIsomorphicLayoutEffect(\n    function clearUserInteractionDataAfterTouchEnd() {\n      if (!touched) {\n        clearRAF();\n        shiftDataRef.current = null;\n        panGestureRecognizer.current = null;\n\n        if (open) {\n          updateShiftAxisCSSProperties(null, null);\n        }\n      }\n    },\n    [touched, open, updateShiftAxisCSSProperties, clearRAF],\n  );\n\n  React.useEffect(() => clearRAF, [clearRAF]);\n\n  useGlobalEscKeyDown(open, close);\n\n  return (\n    <RootComponent\n      {...restProps}\n      role=\"presentation\"\n      baseClassName={classNames(\n        styles['Snackbar'],\n        platform === 'ios' && styles['Snackbar--ios'],\n        touched && styles['Snackbar--touched'],\n        placementClassNames[placement],\n        animationStateClassNames[animationState],\n      )}\n      style={resolveOffsetYCssStyle(placement, style, offsetY)}\n      getRootRef={rootRef}\n    >\n      <div\n        role=\"alert\"\n        className={styles['Snackbar__in']}\n        ref={inRef}\n        // mobile\n        onTouchStart={isReducedMotion ? undefined : handleTouchStart}\n        onTouchMove={isReducedMotion ? undefined : handleTouchMove}\n        onTouchEnd={isReducedMotion ? undefined : handleTouchEnd}\n        // desktop\n        onMouseDown={isReducedMotion ? undefined : handleTouchStart}\n        onMouseMove={isReducedMotion ? undefined : handleTouchMove}\n        onMouseUp={isReducedMotion ? undefined : handleTouchEnd}\n        onMouseLeave={isReducedMotion ? undefined : handleTouchEnd}\n        {...animationHandlers}\n      >\n        <Basic\n          mode={mode}\n          layout={layout}\n          before={before}\n          after={after}\n          subtitle={subtitle}\n          action={\n            action && (\n              <Button\n                align=\"left\"\n                mode=\"link\"\n                appearance={\n                  mode === 'dark'\n                    ? /* istanbul ignore next: проверяется в e2e */\n                      'overlay'\n                    : 'accent'\n                }\n                size=\"s\"\n                onClick={handleActionClick}\n              >\n                {action}\n              </Button>\n            )\n          }\n        >\n          {children}\n        </Basic>\n      </div>\n    </RootComponent>\n  );\n};\n\nSnackbar.Basic = Basic;\n"],"names":["Snackbar","placementClassNames","animationStateClassNames","enter","entering","entered","exit","exiting","exited","placement","children","layout","action","before","after","duration","onActionClick","noop","onClose","mode","subtitle","offsetY","style","getRootRef","restProps","isReducedMotion","useReducedMotion","platform","usePlatform","open","setOpen","React","useState","touched","setTouched","rootRef","useExternRef","focused","useFocusWithin","inRef","useRef","panGestureRecognizer","shiftDataRef","rafRef","closeTimeoutIdRef","animationState","animationHandlers","useCSSKeyframesAnimationController","onExited","clearRAF","useCallback","current","cancelAnimationFrame","updateShiftAxisCSSProperties","x","y","requestAnimationFrame","removeProperty","setProperty","close","handleActionClick","event","handleTouchStart","UIPanGestureRecognizer","setStartCoords","nativeEvent","getInitialShiftData","offsetWidth","offsetHeight","handleTouchMove","setInitialTimeOnce","setEndCoords","getMovedShiftData","delta","shifted","handleTouchEnd","shouldBeClosedByShiftData","getRelativeBoundingClientRect","velocity","useIsomorphicLayoutEffect","closeAfterDelay","setTimeout","preventCloseAfterDelayOnUnmount","clearTimeout","clearUserInteractionDataAfterTouchEnd","useEffect","useGlobalEscKeyDown","RootComponent","role","baseClassName","classNames","resolveOffsetYCssStyle","div","className","ref","onTouchStart","undefined","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","Basic","Button","align","appearance","size","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/cjs/components/Snackbar/subcomponents/Basic/Basic.d.ts

@@ -35,5 +35,5 @@ export interface BasicProps {
 }
 export interface SnackbarBasicProps extends HTMLAttributesWithRootRef<HTMLDivElement>, BasicProps {
 }
-export declare function Basic({ layout: layoutProps, action, after, before, mode, subtitle, children, ...restProps }: SnackbarBasicProps): React.JSX.Element;
+export declare function Basic({ layout: layoutProps, action, after, before, mode, subtitle, children, ...restProps }: SnackbarBasicProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Basic.d.ts.map

package/dist/cjs/components/Snackbar/subcomponents/Basic/Basic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Basic.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Snackbar/subcomponents/Basic/Basic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAW9D,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAEnC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAmB,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU;CAAG;AAEpG,wBAAgB,KAAK,CAAC,EACpB,MAAM,EAAE,WAAW,EACnB,MAAM,EACN,KAAK,EACL,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,kBAAkB,qBA0BpB"}
+{"version":3,"file":"Basic.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Snackbar/subcomponents/Basic/Basic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAiB9D,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAEnC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAmB,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU;CAAG;AAEpG,wBAAgB,KAAK,CAAC,EACpB,MAAM,EAAE,WAAW,EACnB,MAAM,EACN,KAAK,EACL,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,kBAAkB,2CA4BpB"}

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

@@ -10,16 +10,24 @@ Object.defineProperty(exports, "Basic", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
+const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
+const _useAdaptivity = require("../../../../hooks/useAdaptivity");
 const _RootComponent = require("../../../RootComponent/RootComponent");
 const _Paragraph = require("../../../Typography/Paragraph/Paragraph");
 const _Subhead = require("../../../Typography/Subhead/Subhead");
 const stylesLayout = {
+    none: "vkuiSnackbar--layout-none",
     vertical: "vkuiSnackbar--layout-vertical",
     horizontal: "vkuiSnackbar--layout-horizontal"
 };
+const sizeYClassNames = {
+    none: "vkuiSnackbar--sizeY-none",
+    regular: "vkuiSnackbar--sizeY-regular"
+};
 function Basic(_param) {
     var { layout: layoutProps, action, after, before, mode, subtitle, children } = _param, restProps = _object_without_properties._(_param, [
         "layout",
@@ -30,22 +38,38 @@ function Basic(_param) {
         "subtitle",
         "children"
     ]);
-    const layout = layoutProps || (after || subtitle ? 'vertical' : 'horizontal');
-    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
-        baseClassName: (0, _vkjs.classNames)("vkuiSnackbar__body", stylesLayout[layout], mode === 'dark' && "vkuiSnackbar--mode-dark")
-    }, restProps), before && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiSnackbar__before"
-    }, before), /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiSnackbar__content"
-    }, /*#__PURE__*/ _react.createElement(_Paragraph.Paragraph, {
-        className: "vkuiSnackbar__content-text"
-    }, children), subtitle && !action && /*#__PURE__*/ _react.createElement(_Subhead.Subhead, {
-        className: "vkuiSnackbar__content-subtitle"
-    }, subtitle), action && !subtitle && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiSnackbar__action"
-    }, action)), after && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiSnackbar__after"
-    }, after));
+    const { sizeY = 'none' } = (0, _useAdaptivity.useAdaptivity)();
+    const layout = after || subtitle ? 'vertical' : 'none';
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiSnackbar__body", stylesLayout[layoutProps || layout], sizeY !== 'compact' && sizeYClassNames[sizeY], mode === 'dark' && "vkuiSnackbar--mode-dark"),
+        children: [
+            before && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "vkuiSnackbar__before",
+                children: before
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "vkuiSnackbar__content",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Paragraph.Paragraph, {
+                        className: "vkuiSnackbar__content-text",
+                        children: children
+                    }),
+                    subtitle && !action && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Subhead.Subhead, {
+                        className: "vkuiSnackbar__content-subtitle",
+                        children: subtitle
+                    }),
+                    action && !subtitle && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "vkuiSnackbar__action",
+                        children: action
+                    })
+                ]
+            }),
+            after && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "vkuiSnackbar__after",
+                children: after
+            })
+        ]
+    }));
 }
 
 //# sourceMappingURL=Basic.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/Snackbar/subcomponents/Basic/Basic.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../../../types';\nimport { RootComponent } from '../../../RootComponent/RootComponent';\nimport { Paragraph } from '../../../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../../../Typography/Subhead/Subhead';\nimport styles from './Basic.module.css';\n\nconst stylesLayout = {\n  vertical: styles['Snackbar--layout-vertical'],\n  horizontal: styles['Snackbar--layout-horizontal'],\n};\n\nexport interface BasicProps {\n  /**\n   * Элемент действия.\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Варианты расположения кнопки действия\n   * По умолчанию на десктопах, или при наличии элементов `after` или `subtitle`\n   * имеет значение `vertical`, в остальных случаях `horizontal`\n   */\n  layout?: 'vertical' | 'horizontal';\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\nexport interface SnackbarBasicProps extends HTMLAttributesWithRootRef<HTMLDivElement>, BasicProps {}\n\nexport function Basic({\n  layout: layoutProps,\n  action,\n  after,\n  before,\n  mode,\n  subtitle,\n  children,\n  ...restProps\n}: SnackbarBasicProps) {\n  const layout = layoutProps || (after || subtitle ? 'vertical' : 'horizontal');\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles['Snackbar__body'],\n        stylesLayout[layout],\n        mode === 'dark' && styles['Snackbar--mode-dark'],\n      )}\n      {...restProps}\n    >\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 && <div className={styles['Snackbar__action']}>{action}</div>}\n      </div>\n\n      {after && <div className={styles['Snackbar__after']}>{after}</div>}\n    </RootComponent>\n  );\n}\n"],"names":["Basic","stylesLayout","vertical","horizontal","layout","layoutProps","action","after","before","mode","subtitle","children","restProps","RootComponent","baseClassName","classNames","div","className","Paragraph","Subhead"],"mappings":";;;;+BAsDgBA;;;eAAAA;;;;;;iEAtDO;sBACI;+BAEG;2BACJ;yBACF;AAGxB,MAAMC,eAAe;IACnBC,QAAQ;IACRC,UAAU;AACZ;AA2CO,SAASH,MAAM;QAAA,EACpBI,QAAQC,WAAW,EACnBC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EAEW,GATC,QAQjBC,yCARiB;QACpBR;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAMP,SAASC,eAAgBE,CAAAA,SAASG,WAAW,aAAa,YAAW;IAE3E,qBACE,qBAACG,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,wBAEvBd,YAAY,CAACG,OAAO,EACpBK,SAAS;OAEPG,YAEHJ,wBAAU,qBAACQ;QAAIC,SAAS;OAA+BT,uBAExD,qBAACQ;QAAIC,SAAS;qBACZ,qBAACC,oBAAS;QAACD,SAAS;OAAqCN,WACxDD,YAAY,CAACJ,wBACZ,qBAACa,gBAAO;QAACF,SAAS;OAAyCP,WAG5DJ,UAAU,CAACI,0BAAY,qBAACM;QAAIC,SAAS;OAA+BX,UAGtEC,uBAAS,qBAACS;QAAIC,SAAS;OAA8BV;AAG5D"}
+{"version":3,"sources":["../../../../../../src/components/Snackbar/subcomponents/Basic/Basic.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../../hooks/useAdaptivity';\nimport { HTMLAttributesWithRootRef } from '../../../../types';\nimport { RootComponent } from '../../../RootComponent/RootComponent';\nimport { Paragraph } from '../../../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../../../Typography/Subhead/Subhead';\nimport styles from './Basic.module.css';\n\nconst stylesLayout = {\n  none: styles['Snackbar--layout-none'],\n  vertical: styles['Snackbar--layout-vertical'],\n  horizontal: styles['Snackbar--layout-horizontal'],\n};\n\nconst sizeYClassNames = {\n  none: styles['Snackbar--sizeY-none'],\n  regular: styles['Snackbar--sizeY-regular'],\n};\n\nexport interface BasicProps {\n  /**\n   * Элемент действия.\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Варианты расположения кнопки действия\n   * По умолчанию на десктопах, или при наличии элементов `after` или `subtitle`\n   * имеет значение `vertical`, в остальных случаях `horizontal`\n   */\n  layout?: 'vertical' | 'horizontal';\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\nexport interface SnackbarBasicProps extends HTMLAttributesWithRootRef<HTMLDivElement>, BasicProps {}\n\nexport function Basic({\n  layout: layoutProps,\n  action,\n  after,\n  before,\n  mode,\n  subtitle,\n  children,\n  ...restProps\n}: SnackbarBasicProps) {\n  const { sizeY = 'none' } = useAdaptivity();\n  const layout = after || subtitle ? 'vertical' : 'none';\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Snackbar__body'],\n        stylesLayout[layoutProps || layout],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        mode === 'dark' && styles['Snackbar--mode-dark'],\n      )}\n    >\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 && <div className={styles['Snackbar__action']}>{action}</div>}\n      </div>\n\n      {after && <div className={styles['Snackbar__after']}>{after}</div>}\n    </RootComponent>\n  );\n}\n"],"names":["Basic","stylesLayout","none","vertical","horizontal","sizeYClassNames","regular","layout","layoutProps","action","after","before","mode","subtitle","children","restProps","sizeY","useAdaptivity","RootComponent","baseClassName","classNames","div","className","Paragraph","Subhead"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA6DgBA;;;eAAAA;;;;;;;;iEA7DO;sBACI;+BACG;+BAEA;2BACJ;yBACF;AAGxB,MAAMC,eAAe;IACnBC,IAAI;IACJC,QAAQ;IACRC,UAAU;AACZ;AAEA,MAAMC,kBAAkB;IACtBH,IAAI;IACJI,OAAO;AACT;AA2CO,SAASN,MAAM;QAAA,EACpBO,QAAQC,WAAW,EACnBC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EAEW,GATC,QAQjBC,yCARiB;QACpBR;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMV,SAASG,SAASG,WAAW,aAAa;IAEhD,qBACE,sBAACK,4BAAa,8CACRH;QACJI,eAAeC,IAAAA,gBAAU,wBAEvBnB,YAAY,CAACO,eAAeD,OAAO,EACnCS,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CJ,SAAS;;YAGVD,wBAAU,qBAACU;gBAAIC,SAAS;0BAA+BX;;0BAExD,sBAACU;gBAAIC,SAAS;;kCACZ,qBAACC,oBAAS;wBAACD,SAAS;kCAAqCR;;oBACxDD,YAAY,CAACJ,wBACZ,qBAACe,gBAAO;wBAACF,SAAS;kCAAyCT;;oBAG5DJ,UAAU,CAACI,0BAAY,qBAACQ;wBAAIC,SAAS;kCAA+Bb;;;;YAGtEC,uBAAS,qBAACW;gBAAIC,SAAS;0BAA8BZ;;;;AAG5D"}

package/dist/cjs/components/Snackbar/types.d.ts

@@ -0,0 +1,9 @@
+export type SnackbarPlacement = 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end';
+export type ShiftData = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    shifted: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/cjs/components/Snackbar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,KAAK,GACL,SAAS,GACT,cAAc,GACd,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,SAAS,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC"}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Snackbar/types.ts"],"names":[],"rangeMappings":"","mappings":""}

package/dist/cjs/components/Snackbar/utils.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { ShiftData, SnackbarPlacement } from './types';
+export declare function resolveOffsetYCssStyle(placement: SnackbarPlacement, style?: React.CSSProperties, offsetY?: React.CSSProperties['inset']): import("react").CSSProperties | undefined;
+export declare function getInitialShiftData(width: number, height: number): {
+    shifted: boolean;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function getMovedShiftData(placement: SnackbarPlacement, shiftData: ShiftData, nextShift: {
+    x: number;
+    y: number;
+}): ShiftData;
+export declare function shouldBeClosedByShiftData(placement: SnackbarPlacement, shiftData: ShiftData, relativeClientRect: DOMRect, velocity: {
+    x: number;
+    y: number;
+}): boolean;
+//# sourceMappingURL=utils.d.ts.map

package/dist/cjs/components/Snackbar/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/utils.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5D,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,iBAAiB,EAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,EAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,6CAevC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;;;;;;EAQhE;AAED,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,aA6BpC;AAID,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,OAAO,EAC3B,QAAQ,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,WA2CnC"}