@vkontakte/vkui 6.0.3 → 6.1.0

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

@@ -1,129 +1,173 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { classNames, noop } from '@vkontakte/vkjs';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useFocusWithin } from '../../hooks/useFocusWithin';
+import { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';
 import { usePlatform } from '../../hooks/usePlatform';
-import { useTimeout } from '../../hooks/useTimeout';
-import { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';
-import { ViewWidth } from '../../lib/adaptivity';
-import { rubber } from '../../lib/touch';
-import { AppRootPortal } from '../AppRoot/AppRootPortal';
+import { useCSSKeyframesAnimationController } from '../../lib/animation';
+import { useReducedMotion } from '../../lib/animation/useReducedMotion';
+import { getRelativeBoundingClientRect } from '../../lib/dom';
+import { UIPanGestureRecognizer } from '../../lib/touch';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { Button } from '../Button/Button';
 import { RootComponent } from '../RootComponent/RootComponent';
-import { Touch } from '../Touch/Touch';
 import { Basic } from './subcomponents/Basic/Basic';
+import { getInitialShiftData, getMovedShiftData, resolveOffsetYCssStyle, shouldBeClosedByShiftData } from './utils';
 import styles from './Snackbar.module.css';
+const placementClassNames = {
+    'top-start': styles['Snackbar--placement-top-start'],
+    'top': styles['Snackbar--placement-top'],
+    'top-end': styles['Snackbar--placement-top-end'],
+    'bottom-start': styles['Snackbar--placement-bottom-start'],
+    'bottom': styles['Snackbar--placement-bottom'],
+    'bottom-end': styles['Snackbar--placement-bottom-end']
+};
+const animationStateClassNames = {
+    enter: styles['Snackbar--state-enter'],
+    entering: styles['Snackbar--state-entering'],
+    entered: styles['Snackbar--state-entered'],
+    exit: styles['Snackbar--state-exit'],
+    exiting: styles['Snackbar--state-exiting'],
+    exited: styles['Snackbar--state-exited']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
- */ export const Snackbar = ({ children, layout: layoutProps, action, before, after, duration = 4000, onActionClick, onClose, mode = 'default', subtitle, offsetY, style, ...restProps })=>{
+ */ export const Snackbar = ({ placement = 'bottom-start', children, layout, action, before, after, duration = 4000, onActionClick = noop, onClose, mode = 'default', subtitle, offsetY, style, getRootRef, ...restProps })=>{
+    const isReducedMotion = useReducedMotion();
     const platform = usePlatform();
-    const { viewWidth } = useAdaptivityWithJSMediaQueries();
-    const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
-    const { waitTransitionFinish } = 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 = useTimeout(close, duration);
-    const setBodyTransform = (percent)=>{
-        if (animationFrameRef.current !== null) {
-            cancelAnimationFrame(animationFrameRef.current);
+    const rootRef = useExternRef(getRootRef);
+    const focused = 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] = 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)=>{
-        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);
         }
-        shiftXPercentRef.current = shiftX / (bodyElRef.current?.offsetWidth ?? 0) * 100;
-        shiftXCurrentRef.current = 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 UIPanGestureRecognizer();
+        panGestureRecognizer.current.setStartCoords(event.nativeEvent);
+        shiftDataRef.current = 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 = 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 && shouldBeClosedByShiftData(placement, shiftDataRef.current, getRelativeBoundingClientRect(rootRef.current, inRef.current), panGestureRecognizer.current.velocity())) {
+            close();
         }
         setTouched(false);
-        callback && requestAnimationFrame(callback);
     };
-    React.useEffect(()=>closeTimeout.set(), [
-        closeTimeout
+    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
+    ]);
+    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, null, /*#__PURE__*/ React.createElement(RootComponent, {
+    useGlobalEscKeyDown(open, close);
+    return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
-        baseClassName: classNames(styles['Snackbar'], platform === 'ios' && styles['Snackbar--ios'], closing && styles['Snackbar--closing'], touched && styles['Snackbar--touched'], isDesktop && styles['Snackbar--desktop']),
-        style: offsetY ? {
-            ...style,
-            bottom: offsetY
-        } : style
-    }, /*#__PURE__*/ React.createElement(Touch, {
-        className: styles['Snackbar__in'],
-        getRootRef: innerElRef,
-        onStart: onTouchStart,
-        onMoveX: onTouchMoveX,
-        onEnd: onTouchEnd
-    }, /*#__PURE__*/ React.createElement(Basic, {
-        className: styles['Snackbar__snackbar'],
-        getRootRef: bodyElRef,
-        layout: layout,
-        mode: mode,
-        before: before,
-        subtitle: subtitle,
-        action: action && /*#__PURE__*/ React.createElement(Button, {
-            align: "left",
-            mode: "link",
-            appearance: mode === 'dark' ? 'overlay' : 'accent',
-            size: "s",
-            onClick: handleActionClick
-        }, action),
-        after: after
-    }, children))));
+        role: "presentation",
+        baseClassName: classNames(styles['Snackbar'], platform === 'ios' && styles['Snackbar--ios'], touched && styles['Snackbar--touched'], placementClassNames[placement], animationStateClassNames[animationState]),
+        style: resolveOffsetYCssStyle(placement, style, offsetY),
+        getRootRef: rootRef,
+        children: /*#__PURE__*/ _jsx("div", {
+            role: "alert",
+            className: styles['Snackbar__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__*/ _jsx(Basic, {
+                mode: mode,
+                layout: layout,
+                before: before,
+                after: after,
+                subtitle: subtitle,
+                action: action && /*#__PURE__*/ _jsx(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;
 

package/dist/cssm/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":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","useTimeout","useWaitTransitionFinish","ViewWidth","rubber","AppRootPortal","Button","RootComponent","Touch","Basic","styles","Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","subtitle","offsetY","style","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","closing","setClosing","useState","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","baseClassName","bottom","className","getRootRef","onStart","onMoveX","onEnd","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":["React","classNames","noop","useExternRef","useFocusWithin","useGlobalEscKeyDown","usePlatform","useCSSKeyframesAnimationController","useReducedMotion","getRelativeBoundingClientRect","UIPanGestureRecognizer","useIsomorphicLayoutEffect","Button","RootComponent","Basic","getInitialShiftData","getMovedShiftData","resolveOffsetYCssStyle","shouldBeClosedByShiftData","styles","placementClassNames","animationStateClassNames","enter","entering","entered","exit","exiting","exited","Snackbar","placement","children","layout","action","before","after","duration","onActionClick","onClose","mode","subtitle","offsetY","style","getRootRef","restProps","isReducedMotion","platform","open","setOpen","useState","touched","setTouched","rootRef","focused","inRef","useRef","panGestureRecognizer","shiftDataRef","rafRef","closeTimeoutIdRef","animationState","animationHandlers","onExited","clearRAF","useCallback","current","cancelAnimationFrame","updateShiftAxisCSSProperties","x","y","requestAnimationFrame","removeProperty","setProperty","close","handleActionClick","event","handleTouchStart","setStartCoords","nativeEvent","offsetWidth","offsetHeight","handleTouchMove","setInitialTimeOnce","setEndCoords","delta","shifted","handleTouchEnd","velocity","closeAfterDelay","setTimeout","preventCloseAfterDelayOnUnmount","clearTimeout","clearUserInteractionDataAfterTouchEnd","useEffect","role","baseClassName","div","className","ref","onTouchStart","undefined","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","align","appearance","size","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1,108 +1,231 @@
 .Snackbar {
+  --vkui_internal--snackbar_safe_area_inset_bottom: var(--vkui_internal--safe_area_inset_bottom);
+  --vkui_internal--snackbar_in_padding: 8px;
+
+  position: fixed;
+  inset-inline: var(--vkui_internal--safe_area_inset_left)
+    var(--vkui_internal--safe_area_inset_right);
+  z-index: var(--vkui--z_index_popout);
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  z-index: var(--vkui--z_index_popout);
-  position: fixed;
-  inset-block-end: 0;
-  inset-inline-start: auto;
-  inline-size: 100%;
-  padding-inline: var(--vkui_internal--safe_area_inset_left)
-    var(--vkui_internal--safe_area_inset_right);
-  -webkit-padding-after: var(--vkui_internal--safe_area_inset_bottom);
-          padding-block-end: var(--vkui_internal--safe_area_inset_bottom);
 }
 
-/**
- * CMP:
- * Epic
- */
-
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-
-:global(.vkuiInternalEpic--hasTabbar) .Snackbar {
-  -webkit-padding-after: calc(
-    var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom)
-  );
-          padding-block-end: calc(
-    var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom)
-  );
+.Snackbar--placement-top-start,
+.Snackbar--placement-top,
+.Snackbar--placement-top-end {
+  inset-block-start: var(--vkui_internal--safe_area_inset_top);
 }
 
-.Snackbar__in,
-.Snackbar__snackbar {
-  transition: transform 320ms var(--vkui--animation_easing_platform);
+.Snackbar--placement-bottom-start,
+.Snackbar--placement-bottom,
+.Snackbar--placement-bottom-end {
+  inset-block-end: var(--vkui_internal--snackbar_safe_area_inset_bottom);
 }
 
 .Snackbar__in {
-  padding: 8px;
-  animation: animation-snackbar-intro-vertical 340ms var(--vkui--animation_easing_platform);
+  padding: var(--vkui_internal--snackbar_in_padding);
 }
 
-.Snackbar--closing .Snackbar__in {
-  transform: translate3d(0, 140%, 0);
-}
+@media (min-width: 768px) and (pointer: fine),(min-width: 768px) and (min-height: 720px) {
+  .Snackbar {
+    inline-size: 100%;
+    max-inline-size: 351px;
+  }
 
-.ModalRoot .Snackbar {
-  -webkit-padding-after: var(--vkui_internal--safe_area_inset_bottom);
-          padding-block-end: var(--vkui_internal--safe_area_inset_bottom);
-}
+  .Snackbar--placement-top,
+  .Snackbar--placement-bottom {
+    inset-inline: 0;
+    margin-inline: auto;
+  }
 
-/* iOS */
+  .Snackbar--placement-top-start,
+  .Snackbar--placement-top-end {
+    inset-block-start: var(--vkui_internal--safe_area_inset_top);
+  }
 
-.Snackbar--ios .Snackbar__in,
-.Snackbar--ios .Snackbar__snackbar {
-  transition: transform 400ms var(--vkui--animation_easing_platform);
-}
+  .Snackbar--placement-bottom-start,
+  .Snackbar--placement-bottom-end {
+    inset-block-end: var(--vkui_internal--snackbar_safe_area_inset_bottom);
+  }
 
-/**
- * Desktop
- */
+  .Snackbar--placement-top-start,
+  .Snackbar--placement-bottom-start {
+    inset-inline-start: var(--vkui_internal--safe_area_inset_left);
+    inset-inline-end: auto;
+  }
+
+  .Snackbar--placement-top-end,
+  .Snackbar--placement-bottom-end {
+    inset-inline-start: auto;
+    inset-inline-end: var(--vkui_internal--safe_area_inset_right);
+  }
 
-.Snackbar--desktop {
-  max-inline-size: 351px;
-  inset-inline-start: 0;
-  inset-block-end: 0;
+  .Snackbar__in {
+    --vkui_internal--snackbar_in_padding: 12px;
+  }
 }
 
-.Snackbar--desktop .Snackbar__in {
-  padding: 12px;
-  animation-name: animation-snackbar-intro-horizontal;
+/* Анимации */
+
+@media (prefers-reduced-motion: no-preference) {
+  .Snackbar {
+    --vkui_internal--snackbar_shift_x: 0;
+    --vkui_internal--snackbar_shift_y: 0;
+    --vkui_internal--snackbar_animation_from: translate3d(0, 0, 0);
+    --vkui_internal--snackbar_animation_to: translate3d(
+      0,
+      var(--vkui_internal--snackbar_shift_y),
+      0
+    );
+    --vkui_internal--snackbar_animation_duration: 340ms;
+  }
+
+  .Snackbar--ios {
+    --vkui_internal--snackbar_animation_duration: 400ms;
+  }
+
+  .Snackbar--placement-top-start,
+  .Snackbar--placement-top,
+  .Snackbar--placement-top-end {
+    --vkui_internal--snackbar_animation_from: translate3d(0, -100%, 0);
+  }
+
+  .Snackbar--placement-bottom-start,
+  .Snackbar--placement-bottom,
+  .Snackbar--placement-bottom-end {
+    --vkui_internal--snackbar_animation_from: translate3d(0, 100%, 0);
+  }
+
+  .Snackbar__in {
+    animation-duration: var(--vkui_internal--snackbar_animation_duration);
+    animation-timing-function: var(--vkui--animation_easing_platform);
+    animation-fill-mode: both;
+    transform: translate3d(0, var(--vkui_internal--snackbar_shift_y), 0);
+  }
+
+  .Snackbar--state-enter .Snackbar__in,
+  .Snackbar--state-entering .Snackbar__in {
+    animation-name: animation-snackbar-slide-in;
+  }
+
+  .Snackbar--state-entered .Snackbar__in {
+    transition-property: transform;
+    transition-duration: var(--vkui_internal--snackbar_animation_duration);
+    transition-timing-function: var(--vkui--animation_easing_platform);
+  }
+
+  .Snackbar--touched .Snackbar__in {
+    transition-property: none;
+  }
+
+  .Snackbar--state-exit .Snackbar__in,
+  .Snackbar--state-exiting .Snackbar__in {
+    animation-name: animation-snackbar-slide-out;
+  }
 }
 
-.Snackbar--desktop.Snackbar--closing .Snackbar__in {
-  transform: translate3d(-140%, 0, 0);
+/* Выносим из @media, т.к. иначе элемент не скроется, если пользователь не удаляет Snackbar из DOM. */
+
+.Snackbar--state-exited .Snackbar__in {
+  transform: var(--vkui_internal--snackbar_animation_from);
 }
 
-/**
- * Touch-interaction
- */
+@media (min-width: 768px) and (pointer: fine),(min-width: 768px) and (min-height: 720px) {
+
+@media (max-color:2147477350) and (prefers-reduced-motion: no-preference) {
+  .Snackbar--placement-top-start,
+  .Snackbar--placement-bottom-start {
+    --vkui_internal--snackbar_animation_from: translate3d(-100%, 0, 0);
+  }
+
+  .Snackbar--placement-top-end,
+  .Snackbar--placement-bottom-end {
+    --vkui_internal--snackbar_animation_from: translate3d(100%, 0, 0);
+  }
+
+  .Snackbar--placement-top-start,
+  .Snackbar--placement-bottom-start,
+  .Snackbar--placement-top-end,
+  .Snackbar--placement-bottom-end {
+    --vkui_internal--snackbar_animation_to: translate3d(
+      var(--vkui_internal--snackbar_shift_x),
+      0,
+      0
+    );
+  }
+
+  .Snackbar__in {
+    --vkui_internal--snackbar_in_padding: 12px;
+  }
 
-.Snackbar--touched .Snackbar__snackbar {
-  transition: none;
+  .Snackbar--placement-top-start .Snackbar__in,
+  .Snackbar--placement-bottom-start .Snackbar__in,
+  .Snackbar--placement-top-end .Snackbar__in,
+  .Snackbar--placement-bottom-end .Snackbar__in {
+    transform: translate3d(var(--vkui_internal--snackbar_shift_x), 0, 0);
+  }
+}
 }
 
-/**
- * Animations
- */
+@media not all and (min-width: 768px) and (pointer: fine),not all and (min-width: 768px) and (min-height: 720px) {
+
+@media (color:2147477350) and (prefers-reduced-motion: no-preference) {
+  .Snackbar--placement-top-start,
+  .Snackbar--placement-bottom-start {
+    --vkui_internal--snackbar_animation_from: translate3d(-100%, 0, 0);
+  }
+
+  .Snackbar--placement-top-end,
+  .Snackbar--placement-bottom-end {
+    --vkui_internal--snackbar_animation_from: translate3d(100%, 0, 0);
+  }
+
+  .Snackbar--placement-top-start,
+  .Snackbar--placement-bottom-start,
+  .Snackbar--placement-top-end,
+  .Snackbar--placement-bottom-end {
+    --vkui_internal--snackbar_animation_to: translate3d(
+      var(--vkui_internal--snackbar_shift_x),
+      0,
+      0
+    );
+  }
 
-@keyframes animation-snackbar-intro-vertical {
+  .Snackbar__in {
+    --vkui_internal--snackbar_in_padding: 12px;
+  }
+
+  .Snackbar--placement-top-start .Snackbar__in,
+  .Snackbar--placement-bottom-start .Snackbar__in,
+  .Snackbar--placement-top-end .Snackbar__in,
+  .Snackbar--placement-bottom-end .Snackbar__in {
+    transform: translate3d(var(--vkui_internal--snackbar_shift_x), 0, 0);
+  }
+}
+}
+
+@keyframes animation-snackbar-slide-in {
   from {
-    transform: translate3d(0, 140%, 0);
+    opacity: 0;
+    transform: var(--vkui_internal--snackbar_animation_from);
   }
 
   to {
+    opacity: 1;
     transform: translate3d(0, 0, 0);
   }
 }
 
-@keyframes animation-snackbar-intro-horizontal {
+@keyframes animation-snackbar-slide-out {
   from {
-    transform: translate3d(-140%, 0, 0);
+    opacity: 1;
+    transform: var(--vkui_internal--snackbar_animation_to);
   }
 
   to {
-    transform: translate3d(0, 0, 0);
+    opacity: 0;
+    transform: var(--vkui_internal--snackbar_animation_from);
   }
 }

package/dist/cssm/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