@vkontakte/vkui 6.1.2 → 6.2.1

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

@@ -6,7 +6,6 @@ import { useFocusWithin } from '../../hooks/useFocusWithin';
 import { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';
 import { usePlatform } from '../../hooks/usePlatform';
 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';
@@ -29,12 +28,11 @@ const animationStateClassNames = {
     entered: styles['Snackbar--state-entered'],
     exit: styles['Snackbar--state-exit'],
     exiting: styles['Snackbar--state-exiting'],
-    exited: styles['Snackbar--state-exited']
+    exited: undefined
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
  */ 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 [open, setOpen] = React.useState(true);
     const [touched, setTouched] = React.useState(false);
@@ -130,6 +128,9 @@ const animationStateClassNames = {
         clearRAF
     ]);
     useGlobalEscKeyDown(open, close);
+    if (animationState === 'exited') {
+        return null;
+    }
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
         role: "presentation",
@@ -141,14 +142,14 @@ const animationStateClassNames = {
             className: styles['Snackbar__in'],
             ref: inRef,
             // mobile
-            onTouchStart: isReducedMotion ? undefined : handleTouchStart,
-            onTouchMove: isReducedMotion ? undefined : handleTouchMove,
-            onTouchEnd: isReducedMotion ? undefined : handleTouchEnd,
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd,
             // desktop
-            onMouseDown: isReducedMotion ? undefined : handleTouchStart,
-            onMouseMove: isReducedMotion ? undefined : handleTouchMove,
-            onMouseUp: isReducedMotion ? undefined : handleTouchEnd,
-            onMouseLeave: isReducedMotion ? undefined : handleTouchEnd,
+            onMouseDown: handleTouchStart,
+            onMouseMove: handleTouchMove,
+            onMouseUp: handleTouchEnd,
+            onMouseLeave: handleTouchEnd,
             ...animationHandlers,
             children: /*#__PURE__*/ _jsx(Basic, {
                 mode: mode,

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, 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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"}
+{"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 { 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: undefined,\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 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  if (animationState === 'exited') {\n    return null;\n  }\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={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleTouchEnd}\n        // desktop\n        onMouseDown={handleTouchStart}\n        onMouseMove={handleTouchMove}\n        onMouseUp={handleTouchEnd}\n        onMouseLeave={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","getRelativeBoundingClientRect","UIPanGestureRecognizer","useIsomorphicLayoutEffect","Button","RootComponent","Basic","getInitialShiftData","getMovedShiftData","resolveOffsetYCssStyle","shouldBeClosedByShiftData","styles","placementClassNames","animationStateClassNames","enter","entering","entered","exit","exiting","exited","undefined","Snackbar","placement","children","layout","action","before","after","duration","onActionClick","onClose","mode","subtitle","offsetY","style","getRootRef","restProps","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","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","align","appearance","size","onClick"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,kCAAkC,QAAQ,sBAAsB;AACzE,SAASC,6BAA6B,QAAQ,gBAAgB;AAC9D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,KAAK,QAAoB,8BAA8B;AAEhE,SACEC,mBAAmB,EACnBC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,QACpB,UAAU;AACjB,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,sBAAsB;IAC1B,aAAaD,MAAM,CAAC,gCAAgC;IACpD,OAAOA,MAAM,CAAC,0BAA0B;IACxC,WAAWA,MAAM,CAAC,8BAA8B;IAChD,gBAAgBA,MAAM,CAAC,mCAAmC;IAC1D,UAAUA,MAAM,CAAC,6BAA6B;IAC9C,cAAcA,MAAM,CAAC,iCAAiC;AACxD;AAEA,MAAME,2BAA2B;IAC/BC,OAAOH,MAAM,CAAC,wBAAwB;IACtCI,UAAUJ,MAAM,CAAC,2BAA2B;IAC5CK,SAASL,MAAM,CAAC,0BAA0B;IAC1CM,MAAMN,MAAM,CAAC,uBAAuB;IACpCO,SAASP,MAAM,CAAC,0BAA0B;IAC1CQ,QAAQC;AACV;AAgCA;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,YAAY,cAAc,EAC1BC,QAAQ,EACRC,MAAM,EACNC,MAAM,EACNC,MAAM,EACNC,KAAK,EACLC,WAAW,IAAI,EACfC,gBAAgBlC,IAAI,EACpBmC,OAAO,EACPC,OAAO,SAAS,EAChBC,QAAQ,EACRC,OAAO,EACPC,KAAK,EACLC,UAAU,EACV,GAAGC,WACW;IACd,MAAMC,WAAWtC;IAEjB,MAAM,CAACuC,MAAMC,QAAQ,GAAG9C,MAAM+C,QAAQ,CAAC;IACvC,MAAM,CAACC,SAASC,WAAW,GAAGjD,MAAM+C,QAAQ,CAAC;IAE7C,MAAMG,UAAU/C,aAAauC;IAC7B,MAAMS,UAAU/C,eAAe8C;IAC/B,MAAME,QAAQpD,MAAMqD,MAAM,CAAiB;IAC3C,MAAMC,uBAAuBtD,MAAMqD,MAAM,CAAgC;IAEzE,MAAME,eAAevD,MAAMqD,MAAM,CAAmB;IAEpD,MAAMG,SAASxD,MAAMqD,MAAM,CAAkD;IAC7E,MAAMI,oBAAoBzD,MAAMqD,MAAM;IACtC,MAAM,CAACK,gBAAgBC,kBAAkB,GAAGpD,mCAC1CsC,OAAO,UAAU,QACjB;QACEe,UAAUvB;IACZ;IAGF,MAAMwB,WAAW7D,MAAM8D,WAAW,CAAC;QACjC,IAAIN,OAAOO,OAAO,KAAK,MAAM;YAC3BC,qBAAqBR,OAAOO,OAAO;YACnCP,OAAOO,OAAO,GAAG;QACnB;IACF,GAAG,EAAE;IAEL,MAAME,+BAA+BjE,MAAM8D,WAAW,CACpD,CAACI,GAAkBC;QACjBX,OAAOO,OAAO,GAAGK,sBAAsB;YACrC,IAAIlB,QAAQa,OAAO,EAAE;gBACnBG,MAAM,OACFhB,QAAQa,OAAO,CAACtB,KAAK,CAAC4B,cAAc,CAAC,uCACrCnB,QAAQa,OAAO,CAACtB,KAAK,CAAC6B,WAAW,CAAC,qCAAqC,CAAC,EAAEJ,EAAE,EAAE,CAAC;gBACnFC,MAAM,OACFjB,QAAQa,OAAO,CAACtB,KAAK,CAAC4B,cAAc,CAAC,uCACrCnB,QAAQa,OAAO,CAACtB,KAAK,CAAC6B,WAAW,CAAC,qCAAqC,CAAC,EAAEH,EAAE,EAAE,CAAC;YACrF;QACF;IACF,GACA;QAACjB;KAAQ;IAGX,MAAMqB,QAAQvE,MAAM8D,WAAW,CAAC;QAC9BhB,QAAQ;IACV,GAAG,EAAE;IAEL,MAAM0B,oBAAoB,CAACC;QACzBF;QACA,IAAIvC,QAAQ;YACVI,cAAcqC;QAChB;IACF;IAEA,MAAMC,mBAAmB,CAACD;QACxBnB,qBAAqBS,OAAO,GAAG,IAAItD;QACnC6C,qBAAqBS,OAAO,CAACY,cAAc,CAACF,MAAMG,WAAW;QAC7DrB,aAAaQ,OAAO,GAAGjD,oBACrBoC,QAAQa,OAAO,CAAEc,WAAW,EAC5B3B,QAAQa,OAAO,CAAEe,YAAY;QAE/B7B,WAAW;IACb;IAEA,MAAM8B,kBAAkB,CAACN;QACvB,IAAIlB,aAAaQ,OAAO,IAAIT,qBAAqBS,OAAO,EAAE;YACxDT,qBAAqBS,OAAO,CAACiB,kBAAkB;YAC/C1B,qBAAqBS,OAAO,CAACkB,YAAY,CAACR,MAAMG,WAAW;YAC3DrB,aAAaQ,OAAO,GAAGhD,kBACrBc,WACA0B,aAAaQ,OAAO,EACpBT,qBAAqBS,OAAO,CAACmB,KAAK;YAGpC,IAAI3B,aAAaQ,OAAO,CAACoB,OAAO,EAAE;gBAChClB,6BAA6BV,aAAaQ,OAAO,CAACG,CAAC,EAAEX,aAAaQ,OAAO,CAACI,CAAC;YAC7E;QACF;IACF;IAEA,MAAMiB,iBAAiB;QACrB,IACEpC,WACAO,aAAaQ,OAAO,IACpBT,qBAAqBS,OAAO,IAC5B9C,0BACEY,WACA0B,aAAaQ,OAAO,EACpBvD,8BAA8B0C,QAAQa,OAAO,EAAGX,MAAMW,OAAO,GAC7DT,qBAAqBS,OAAO,CAACsB,QAAQ,KAEvC;YACAd;QACF;QAEAtB,WAAW;IACb;IAEAvC,0BACE,SAAS4E;QACP,IAAI,CAACzC,QAAQM,WAAWH,WAAWU,mBAAmB,WAAW;YAC/D;QACF;QACAD,kBAAkBM,OAAO,GAAGwB,WAAWhB,OAAOpC;QAC9C,OAAO,SAASqD;YACdC,aAAahC,kBAAkBM,OAAO;QACxC;IACF,GACA;QAAClB;QAAMM;QAASH;QAASU;QAAgBa;QAAOpC;KAAS;IAG3DzB,0BACE,SAASgF;QACP,IAAI,CAAC1C,SAAS;YACZa;YACAN,aAAaQ,OAAO,GAAG;YACvBT,qBAAqBS,OAAO,GAAG;YAE/B,IAAIlB,MAAM;gBACRoB,6BAA6B,MAAM;YACrC;QACF;IACF,GACA;QAACjB;QAASH;QAAMoB;QAA8BJ;KAAS;IAGzD7D,MAAM2F,SAAS,CAAC,IAAM9B,UAAU;QAACA;KAAS;IAE1CxD,oBAAoBwC,MAAM0B;IAE1B,IAAIb,mBAAmB,UAAU;QAC/B,OAAO;IACT;IAEA,qBACE,KAAC9C;QACE,GAAG+B,SAAS;QACbiD,MAAK;QACLC,eAAe5F,WACbiB,MAAM,CAAC,WAAW,EAClB0B,aAAa,SAAS1B,MAAM,CAAC,gBAAgB,EAC7C8B,WAAW9B,MAAM,CAAC,oBAAoB,EACtCC,mBAAmB,CAACU,UAAU,EAC9BT,wBAAwB,CAACsC,eAAe;QAE1CjB,OAAOzB,uBAAuBa,WAAWY,OAAOD;QAChDE,YAAYQ;kBAEZ,cAAA,KAAC4C;YACCF,MAAK;YACLG,WAAW7E,MAAM,CAAC,eAAe;YACjC8E,KAAK5C;YACL,SAAS;YACT6C,cAAcvB;YACdwB,aAAanB;YACboB,YAAYf;YACZ,UAAU;YACVgB,aAAa1B;YACb2B,aAAatB;YACbuB,WAAWlB;YACXmB,cAAcnB;YACb,GAAGzB,iBAAiB;sBAErB,cAAA,KAAC9C;gBACCyB,MAAMA;gBACNP,QAAQA;gBACRE,QAAQA;gBACRC,OAAOA;gBACPK,UAAUA;gBACVP,QACEA,wBACE,KAACrB;oBACC6F,OAAM;oBACNlE,MAAK;oBACLmE,YACEnE,SAAS,SACL,2CAA2C,GAC3C,YACA;oBAENoE,MAAK;oBACLC,SAASnC;8BAERxC;;0BAKNF;;;;AAKX,EAAE;AAEFF,SAASf,KAAK,GAAGA"}

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

@@ -1,6 +1,11 @@
 .Snackbar {
   --vkui_internal--snackbar_safe_area_inset_bottom: var(--vkui_internal--safe_area_inset_bottom);
   --vkui_internal--snackbar_in_padding: 8px;
+  --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;
 
   position: fixed;
   inset-inline: var(--vkui_internal--safe_area_inset_left)
@@ -12,20 +17,24 @@
           user-select: none;
 }
 
+.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);
+
   inset-block-start: var(--vkui_internal--safe_area_inset_top);
 }
 
 .Snackbar--placement-bottom-start,
 .Snackbar--placement-bottom,
 .Snackbar--placement-bottom-end {
-  inset-block-end: var(--vkui_internal--snackbar_safe_area_inset_bottom);
-}
+  --vkui_internal--snackbar_animation_from: translate3d(0, 100%, 0);
 
-.Snackbar__in {
-  padding: var(--vkui_internal--snackbar_in_padding);
+  inset-block-end: var(--vkui_internal--snackbar_safe_area_inset_bottom);
 }
 
 @media (min-width: 768px) and (pointer: fine),(min-width: 768px) and (min-height: 720px) {
@@ -52,110 +61,77 @@
 
   .Snackbar--placement-top-start,
   .Snackbar--placement-bottom-start {
+    --vkui_internal--snackbar_animation_from: translate3d(-100%, 0, 0);
+
     inset-inline-start: var(--vkui_internal--safe_area_inset_left);
     inset-inline-end: auto;
   }
 
   .Snackbar--placement-top-end,
   .Snackbar--placement-bottom-end {
+    --vkui_internal--snackbar_animation_from: translate3d(100%, 0, 0);
+
     inset-inline-start: auto;
     inset-inline-end: var(--vkui_internal--safe_area_inset_right);
   }
 
-  .Snackbar__in {
-    --vkui_internal--snackbar_in_padding: 12px;
-  }
-}
-
-/* Анимации */
-
-@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);
+  .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,
-      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 {
+  padding: var(--vkui_internal--snackbar_in_padding);
+  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__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;
+}
 
+@media screen and (prefers-reduced-motion: reduce) {
   .Snackbar--state-enter .Snackbar__in,
   .Snackbar--state-entering .Snackbar__in {
-    animation-name: animation-snackbar-slide-in;
+    animation-name: animation-snackbar-fade-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--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--touched .Snackbar__in {
+  transition-property: none;
+}
 
+.Snackbar--state-exit .Snackbar__in,
+.Snackbar--state-exiting .Snackbar__in {
+  animation-name: animation-snackbar-slide-out;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
   .Snackbar--state-exit .Snackbar__in,
   .Snackbar--state-exiting .Snackbar__in {
-    animation-name: animation-snackbar-slide-out;
+    animation-name: animation-snackbar-fade-out;
   }
 }
 
-/* Выносим из @media, т.к. иначе элемент не скроется, если пользователь не удаляет Snackbar из DOM. */
-
-.Snackbar--state-exited .Snackbar__in {
-  transform: var(--vkui_internal--snackbar_animation_from);
-}
+/* stylelint-disable-next-line at-rule-empty-line-before */
 
 @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;
   }
@@ -167,65 +143,49 @@
     transform: translate3d(var(--vkui_internal--snackbar_shift_x), 0, 0);
   }
 }
-}
-
-@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);
+@keyframes animation-snackbar-slide-in {
+  from {
+    opacity: 0;
+    transform: var(--vkui_internal--snackbar_animation_from);
   }
 
-  .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
-    );
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
   }
+}
 
-  .Snackbar__in {
-    --vkui_internal--snackbar_in_padding: 12px;
+@keyframes animation-snackbar-slide-out {
+  from {
+    opacity: 1;
+    transform: var(--vkui_internal--snackbar_animation_to);
   }
 
-  .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);
+  to {
+    opacity: 0;
+    transform: var(--vkui_internal--snackbar_animation_from);
   }
 }
-}
 
-@keyframes animation-snackbar-slide-in {
+/* Анимации при (prefers-reduced-motion: reduce) */
+
+@keyframes animation-snackbar-fade-in {
   from {
     opacity: 0;
-    transform: var(--vkui_internal--snackbar_animation_from);
   }
 
   to {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
   }
 }
 
-@keyframes animation-snackbar-slide-out {
+@keyframes animation-snackbar-fade-out {
   from {
     opacity: 1;
-    transform: var(--vkui_internal--snackbar_animation_to);
   }
 
   to {
     opacity: 0;
-    transform: var(--vkui_internal--snackbar_animation_from);
   }
 }

package/dist/cssm/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 { 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":["React","classNames","useAdaptivity","RootComponent","Paragraph","Subhead","styles","stylesLayout","none","vertical","horizontal","sizeYClassNames","regular","Basic","layout","layoutProps","action","after","before","mode","subtitle","children","restProps","sizeY","baseClassName","div","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,kCAAkC;AAEhE,SAASC,aAAa,QAAQ,uCAAuC;AACrE,SAASC,SAAS,QAAQ,0CAA0C;AACpE,SAASC,OAAO,QAAQ,sCAAsC;AAC9D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,eAAe;IACnBC,MAAMF,MAAM,CAAC,wBAAwB;IACrCG,UAAUH,MAAM,CAAC,4BAA4B;IAC7CI,YAAYJ,MAAM,CAAC,8BAA8B;AACnD;AAEA,MAAMK,kBAAkB;IACtBH,MAAMF,MAAM,CAAC,uBAAuB;IACpCM,SAASN,MAAM,CAAC,0BAA0B;AAC5C;AA2CA,OAAO,SAASO,MAAM,EACpBC,QAAQC,WAAW,EACnBC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACgB;IACnB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGrB;IAC3B,MAAMY,SAASG,SAASG,WAAW,aAAa;IAEhD,qBACE,MAACjB;QACE,GAAGmB,SAAS;QACbE,eAAevB,WACbK,MAAM,CAAC,iBAAiB,EACxBC,YAAY,CAACQ,eAAeD,OAAO,EACnCS,UAAU,aAAaZ,eAAe,CAACY,MAAM,EAC7CJ,SAAS,UAAUb,MAAM,CAAC,sBAAsB;;YAGjDY,wBAAU,KAACO;gBAAIC,WAAWpB,MAAM,CAAC,mBAAmB;0BAAGY;;0BAExD,MAACO;gBAAIC,WAAWpB,MAAM,CAAC,oBAAoB;;kCACzC,KAACF;wBAAUsB,WAAWpB,MAAM,CAAC,yBAAyB;kCAAGe;;oBACxDD,YAAY,CAACJ,wBACZ,KAACX;wBAAQqB,WAAWpB,MAAM,CAAC,6BAA6B;kCAAGc;;oBAG5DJ,UAAU,CAACI,0BAAY,KAACK;wBAAIC,WAAWpB,MAAM,CAAC,mBAAmB;kCAAGU;;;;YAGtEC,uBAAS,KAACQ;gBAAIC,WAAWpB,MAAM,CAAC,kBAAkB;0BAAGW;;;;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":["React","classNames","useAdaptivity","RootComponent","Paragraph","Subhead","styles","stylesLayout","none","vertical","horizontal","sizeYClassNames","regular","Basic","layout","layoutProps","action","after","before","mode","subtitle","children","restProps","sizeY","baseClassName","div","className"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,kCAAkC;AAEhE,SAASC,aAAa,QAAQ,uCAAuC;AACrE,SAASC,SAAS,QAAQ,0CAA0C;AACpE,SAASC,OAAO,QAAQ,sCAAsC;AAC9D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,eAAe;IACnBC,MAAMF,MAAM,CAAC,wBAAwB;IACrCG,UAAUH,MAAM,CAAC,4BAA4B;IAC7CI,YAAYJ,MAAM,CAAC,8BAA8B;AACnD;AAEA,MAAMK,kBAAkB;IACtBH,MAAMF,MAAM,CAAC,uBAAuB;IACpCM,SAASN,MAAM,CAAC,0BAA0B;AAC5C;AA2CA,OAAO,SAASO,MAAM,EACpBC,QAAQC,WAAW,EACnBC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACgB;IACnB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGrB;IAC3B,MAAMY,SAASG,SAASG,WAAW,aAAa;IAEhD,qBACE,MAACjB;QACE,GAAGmB,SAAS;QACbE,eAAevB,WACbK,MAAM,CAAC,iBAAiB,EACxBC,YAAY,CAACQ,eAAeD,OAAO,EACnCS,UAAU,aAAaZ,eAAe,CAACY,MAAM,EAC7CJ,SAAS,UAAUb,MAAM,CAAC,sBAAsB;;YAGjDY,wBAAU,KAACO;gBAAIC,WAAWpB,MAAM,CAAC,mBAAmB;0BAAGY;;0BAExD,MAACO;gBAAIC,WAAWpB,MAAM,CAAC,oBAAoB;;kCACzC,KAACF;wBAAUsB,WAAWpB,MAAM,CAAC,yBAAyB;kCAAGe;;oBACxDD,YAAY,CAACJ,wBACZ,KAACX;wBAAQqB,WAAWpB,MAAM,CAAC,6BAA6B;kCAAGc;;oBAG5DJ,UAAU,CAACI,0BAAY,KAACK;wBAAIC,WAAWpB,MAAM,CAAC,mBAAmB;kCAAGU;;;;YAGtEC,uBAAS,KAACQ;gBAAIC,WAAWpB,MAAM,CAAC,kBAAkB;0BAAGW;;;;AAG5D"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Snackbar/types.ts"],"sourcesContent":["export type SnackbarPlacement =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end';\n\nexport type ShiftData = { x: number; y: number; width: number; height: number; shifted: boolean };\n"],"names":[],"rangeMappings":"","mappings":"AAQA,WAAkG"}
+{"version":3,"sources":["../../../../src/components/Snackbar/types.ts"],"sourcesContent":["export type SnackbarPlacement =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end';\n\nexport type ShiftData = { x: number; y: number; width: number; height: number; shifted: boolean };\n"],"names":[],"mappings":"AAQA,WAAkG"}

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

@@ -1,4 +1,3 @@
-/// <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): {

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

@@ -1 +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"}
+{"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Snackbar/utils.ts"],"sourcesContent":["import { rubberbandIfOutOfBounds } from '../../lib/animation';\nimport type { ShiftData, SnackbarPlacement } from './types';\n\nexport function resolveOffsetYCssStyle(\n  placement: SnackbarPlacement,\n  style?: React.CSSProperties,\n  offsetY?: React.CSSProperties['inset'],\n) {\n  if (offsetY === undefined) {\n    return style;\n  }\n  switch (placement) {\n    case 'top-start':\n    case 'top':\n    case 'top-end':\n      return { ...style, top: offsetY };\n    case 'bottom-start':\n    case 'bottom':\n    case 'bottom-end':\n      return { ...style, bottom: offsetY };\n  }\n}\n\nexport function getInitialShiftData(width: number, height: number) {\n  return {\n    shifted: false,\n    x: 0,\n    y: 0,\n    width,\n    height,\n  };\n}\n\nexport function getMovedShiftData(\n  placement: SnackbarPlacement,\n  shiftData: ShiftData,\n  nextShift: { x: number; y: number },\n) {\n  switch (placement) {\n    case 'top-start':\n    case 'bottom-start':\n      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);\n      break;\n    case 'top-end':\n    case 'bottom-end':\n      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);\n      break;\n  }\n\n  switch (placement) {\n    case 'top-start':\n    case 'top':\n    case 'top-end':\n      shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);\n      break;\n    case 'bottom-start':\n    case 'bottom':\n    case 'bottom-end':\n      shiftData.y = rubberbandIfOutOfBounds(nextShift.y, 0, shiftData.height);\n      break;\n  }\n\n  shiftData.shifted = true;\n\n  return shiftData;\n}\n\nconst MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE = 200;\n\nexport function shouldBeClosedByShiftData(\n  placement: SnackbarPlacement,\n  shiftData: ShiftData,\n  relativeClientRect: DOMRect,\n  velocity: { x: number; y: number },\n) {\n  if (!shiftData.shifted) {\n    return false;\n  }\n  const shouldBeClosedThreshold = { x: false, y: false };\n  const shouldBeClosedByVelocity = { x: false, y: false };\n\n  switch (placement) {\n    case 'top-start':\n    case 'bottom-start':\n      shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x = velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;\n      break;\n    case 'top-end':\n    case 'bottom-end':\n      shouldBeClosedThreshold.x = relativeClientRect.x > relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x = velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;\n      break;\n  }\n\n  switch (placement) {\n    case 'top-start':\n    case 'top':\n    case 'top-end':\n      shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;\n      shouldBeClosedByVelocity.y = velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;\n      break;\n    case 'bottom-start':\n    case 'bottom':\n    case 'bottom-end':\n      shouldBeClosedThreshold.y = relativeClientRect.y > relativeClientRect.height / 2;\n      shouldBeClosedByVelocity.y = velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;\n      break;\n  }\n\n  return (\n    shouldBeClosedThreshold.x ||\n    shouldBeClosedByVelocity.x ||\n    shouldBeClosedThreshold.y ||\n    /* istanbul ignore next: подсвечивает жёлтым и пишет \"branch not covered\" */\n    shouldBeClosedByVelocity.y\n  );\n}\n"],"names":["rubberbandIfOutOfBounds","resolveOffsetYCssStyle","placement","style","offsetY","undefined","top","bottom","getInitialShiftData","width","height","shifted","x","y","getMovedShiftData","shiftData","nextShift","MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE","shouldBeClosedByShiftData","relativeClientRect","velocity","shouldBeClosedThreshold","shouldBeClosedByVelocity"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,uBAAuB,QAAQ,sBAAsB;AAG9D,OAAO,SAASC,uBACdC,SAA4B,EAC5BC,KAA2B,EAC3BC,OAAsC;IAEtC,IAAIA,YAAYC,WAAW;QACzB,OAAOF;IACT;IACA,OAAQD;QACN,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO;gBAAE,GAAGC,KAAK;gBAAEG,KAAKF;YAAQ;QAClC,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO;gBAAE,GAAGD,KAAK;gBAAEI,QAAQH;YAAQ;IACvC;AACF;AAEA,OAAO,SAASI,oBAAoBC,KAAa,EAAEC,MAAc;IAC/D,OAAO;QACLC,SAAS;QACTC,GAAG;QACHC,GAAG;QACHJ;QACAC;IACF;AACF;AAEA,OAAO,SAASI,kBACdZ,SAA4B,EAC5Ba,SAAoB,EACpBC,SAAmC;IAEnC,OAAQd;QACN,KAAK;QACL,KAAK;YACHa,UAAUH,CAAC,GAAGZ,wBAAwBgB,UAAUJ,CAAC,EAAE,CAACG,UAAUN,KAAK,EAAE;YACrE;QACF,KAAK;QACL,KAAK;YACHM,UAAUH,CAAC,GAAGZ,wBAAwBgB,UAAUJ,CAAC,EAAE,GAAGG,UAAUN,KAAK;YACrE;IACJ;IAEA,OAAQP;QACN,KAAK;QACL,KAAK;QACL,KAAK;YACHa,UAAUF,CAAC,GAAGb,wBAAwBgB,UAAUH,CAAC,EAAE,CAACE,UAAUL,MAAM,EAAE;YACtE;QACF,KAAK;QACL,KAAK;QACL,KAAK;YACHK,UAAUF,CAAC,GAAGb,wBAAwBgB,UAAUH,CAAC,EAAE,GAAGE,UAAUL,MAAM;YACtE;IACJ;IAEAK,UAAUJ,OAAO,GAAG;IAEpB,OAAOI;AACT;AAEA,MAAME,wCAAwC;AAE9C,OAAO,SAASC,0BACdhB,SAA4B,EAC5Ba,SAAoB,EACpBI,kBAA2B,EAC3BC,QAAkC;IAElC,IAAI,CAACL,UAAUJ,OAAO,EAAE;QACtB,OAAO;IACT;IACA,MAAMU,0BAA0B;QAAET,GAAG;QAAOC,GAAG;IAAM;IACrD,MAAMS,2BAA2B;QAAEV,GAAG;QAAOC,GAAG;IAAM;IAEtD,OAAQX;QACN,KAAK;QACL,KAAK;YACHmB,wBAAwBT,CAAC,GAAGO,mBAAmBP,CAAC,GAAG,CAACO,mBAAmBV,KAAK,GAAG;YAC/Ea,yBAAyBV,CAAC,GAAGQ,SAASR,CAAC,GAAG,CAACK;YAC3C;QACF,KAAK;QACL,KAAK;YACHI,wBAAwBT,CAAC,GAAGO,mBAAmBP,CAAC,GAAGO,mBAAmBV,KAAK,GAAG;YAC9Ea,yBAAyBV,CAAC,GAAGQ,SAASR,CAAC,GAAGK;YAC1C;IACJ;IAEA,OAAQf;QACN,KAAK;QACL,KAAK;QACL,KAAK;YACHmB,wBAAwBR,CAAC,GAAGM,mBAAmBN,CAAC,GAAG,CAACM,mBAAmBT,MAAM,GAAG;YAChFY,yBAAyBT,CAAC,GAAGO,SAASP,CAAC,GAAG,CAACI;YAC3C;QACF,KAAK;QACL,KAAK;QACL,KAAK;YACHI,wBAAwBR,CAAC,GAAGM,mBAAmBN,CAAC,GAAGM,mBAAmBT,MAAM,GAAG;YAC/EY,yBAAyBT,CAAC,GAAGO,SAASP,CAAC,GAAGI;YAC1C;IACJ;IAEA,OACEI,wBAAwBT,CAAC,IACzBU,yBAAyBV,CAAC,IAC1BS,wBAAwBR,CAAC,IACzB,0EAA0E,GAC1ES,yBAAyBT,CAAC;AAE9B"}
+{"version":3,"sources":["../../../../src/components/Snackbar/utils.ts"],"sourcesContent":["import { rubberbandIfOutOfBounds } from '../../lib/animation';\nimport type { ShiftData, SnackbarPlacement } from './types';\n\nexport function resolveOffsetYCssStyle(\n  placement: SnackbarPlacement,\n  style?: React.CSSProperties,\n  offsetY?: React.CSSProperties['inset'],\n) {\n  if (offsetY === undefined) {\n    return style;\n  }\n  switch (placement) {\n    case 'top-start':\n    case 'top':\n    case 'top-end':\n      return { ...style, top: offsetY };\n    case 'bottom-start':\n    case 'bottom':\n    case 'bottom-end':\n      return { ...style, bottom: offsetY };\n  }\n}\n\nexport function getInitialShiftData(width: number, height: number) {\n  return {\n    shifted: false,\n    x: 0,\n    y: 0,\n    width,\n    height,\n  };\n}\n\nexport function getMovedShiftData(\n  placement: SnackbarPlacement,\n  shiftData: ShiftData,\n  nextShift: { x: number; y: number },\n) {\n  switch (placement) {\n    case 'top-start':\n    case 'bottom-start':\n      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);\n      break;\n    case 'top-end':\n    case 'bottom-end':\n      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);\n      break;\n  }\n\n  switch (placement) {\n    case 'top-start':\n    case 'top':\n    case 'top-end':\n      shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);\n      break;\n    case 'bottom-start':\n    case 'bottom':\n    case 'bottom-end':\n      shiftData.y = rubberbandIfOutOfBounds(nextShift.y, 0, shiftData.height);\n      break;\n  }\n\n  shiftData.shifted = true;\n\n  return shiftData;\n}\n\nconst MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE = 200;\n\nexport function shouldBeClosedByShiftData(\n  placement: SnackbarPlacement,\n  shiftData: ShiftData,\n  relativeClientRect: DOMRect,\n  velocity: { x: number; y: number },\n) {\n  if (!shiftData.shifted) {\n    return false;\n  }\n  const shouldBeClosedThreshold = { x: false, y: false };\n  const shouldBeClosedByVelocity = { x: false, y: false };\n\n  switch (placement) {\n    case 'top-start':\n    case 'bottom-start':\n      shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x = velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;\n      break;\n    case 'top-end':\n    case 'bottom-end':\n      shouldBeClosedThreshold.x = relativeClientRect.x > relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x = velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;\n      break;\n  }\n\n  switch (placement) {\n    case 'top-start':\n    case 'top':\n    case 'top-end':\n      shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;\n      shouldBeClosedByVelocity.y = velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;\n      break;\n    case 'bottom-start':\n    case 'bottom':\n    case 'bottom-end':\n      shouldBeClosedThreshold.y = relativeClientRect.y > relativeClientRect.height / 2;\n      shouldBeClosedByVelocity.y = velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;\n      break;\n  }\n\n  return (\n    shouldBeClosedThreshold.x ||\n    shouldBeClosedByVelocity.x ||\n    shouldBeClosedThreshold.y ||\n    /* istanbul ignore next: подсвечивает жёлтым и пишет \"branch not covered\" */\n    shouldBeClosedByVelocity.y\n  );\n}\n"],"names":["rubberbandIfOutOfBounds","resolveOffsetYCssStyle","placement","style","offsetY","undefined","top","bottom","getInitialShiftData","width","height","shifted","x","y","getMovedShiftData","shiftData","nextShift","MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE","shouldBeClosedByShiftData","relativeClientRect","velocity","shouldBeClosedThreshold","shouldBeClosedByVelocity"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,sBAAsB;AAG9D,OAAO,SAASC,uBACdC,SAA4B,EAC5BC,KAA2B,EAC3BC,OAAsC;IAEtC,IAAIA,YAAYC,WAAW;QACzB,OAAOF;IACT;IACA,OAAQD;QACN,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO;gBAAE,GAAGC,KAAK;gBAAEG,KAAKF;YAAQ;QAClC,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO;gBAAE,GAAGD,KAAK;gBAAEI,QAAQH;YAAQ;IACvC;AACF;AAEA,OAAO,SAASI,oBAAoBC,KAAa,EAAEC,MAAc;IAC/D,OAAO;QACLC,SAAS;QACTC,GAAG;QACHC,GAAG;QACHJ;QACAC;IACF;AACF;AAEA,OAAO,SAASI,kBACdZ,SAA4B,EAC5Ba,SAAoB,EACpBC,SAAmC;IAEnC,OAAQd;QACN,KAAK;QACL,KAAK;YACHa,UAAUH,CAAC,GAAGZ,wBAAwBgB,UAAUJ,CAAC,EAAE,CAACG,UAAUN,KAAK,EAAE;YACrE;QACF,KAAK;QACL,KAAK;YACHM,UAAUH,CAAC,GAAGZ,wBAAwBgB,UAAUJ,CAAC,EAAE,GAAGG,UAAUN,KAAK;YACrE;IACJ;IAEA,OAAQP;QACN,KAAK;QACL,KAAK;QACL,KAAK;YACHa,UAAUF,CAAC,GAAGb,wBAAwBgB,UAAUH,CAAC,EAAE,CAACE,UAAUL,MAAM,EAAE;YACtE;QACF,KAAK;QACL,KAAK;QACL,KAAK;YACHK,UAAUF,CAAC,GAAGb,wBAAwBgB,UAAUH,CAAC,EAAE,GAAGE,UAAUL,MAAM;YACtE;IACJ;IAEAK,UAAUJ,OAAO,GAAG;IAEpB,OAAOI;AACT;AAEA,MAAME,wCAAwC;AAE9C,OAAO,SAASC,0BACdhB,SAA4B,EAC5Ba,SAAoB,EACpBI,kBAA2B,EAC3BC,QAAkC;IAElC,IAAI,CAACL,UAAUJ,OAAO,EAAE;QACtB,OAAO;IACT;IACA,MAAMU,0BAA0B;QAAET,GAAG;QAAOC,GAAG;IAAM;IACrD,MAAMS,2BAA2B;QAAEV,GAAG;QAAOC,GAAG;IAAM;IAEtD,OAAQX;QACN,KAAK;QACL,KAAK;YACHmB,wBAAwBT,CAAC,GAAGO,mBAAmBP,CAAC,GAAG,CAACO,mBAAmBV,KAAK,GAAG;YAC/Ea,yBAAyBV,CAAC,GAAGQ,SAASR,CAAC,GAAG,CAACK;YAC3C;QACF,KAAK;QACL,KAAK;YACHI,wBAAwBT,CAAC,GAAGO,mBAAmBP,CAAC,GAAGO,mBAAmBV,KAAK,GAAG;YAC9Ea,yBAAyBV,CAAC,GAAGQ,SAASR,CAAC,GAAGK;YAC1C;IACJ;IAEA,OAAQf;QACN,KAAK;QACL,KAAK;QACL,KAAK;YACHmB,wBAAwBR,CAAC,GAAGM,mBAAmBN,CAAC,GAAG,CAACM,mBAAmBT,MAAM,GAAG;YAChFY,yBAAyBT,CAAC,GAAGO,SAASP,CAAC,GAAG,CAACI;YAC3C;QACF,KAAK;QACL,KAAK;QACL,KAAK;YACHI,wBAAwBR,CAAC,GAAGM,mBAAmBN,CAAC,GAAGM,mBAAmBT,MAAM,GAAG;YAC/EY,yBAAyBT,CAAC,GAAGO,SAASP,CAAC,GAAGI;YAC1C;IACJ;IAEA,OACEI,wBAAwBT,CAAC,IACzBU,yBAAyBV,CAAC,IAC1BS,wBAAwBR,CAAC,IACzB,0EAA0E,GAC1ES,yBAAyBT,CAAC;AAE9B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--Spacing_gap';\n\nexport const sizesClassNames = {\n  '3xs': styles['Spacing--3xs'],\n  '2xs': styles['Spacing--2xs'],\n  'xs': styles['Spacing--xs'],\n  's': styles['Spacing--s'],\n  'm': styles['Spacing--m'],\n  'l': styles['Spacing--l'],\n  'xl': styles['Spacing--xl'],\n  '2xl': styles['Spacing--2xl'],\n  '3xl': styles['Spacing--3xl'],\n  '4xl': styles['Spacing--4xl'],\n};\n\nexport type SpacingSize = keyof typeof sizesClassNames;\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number | SpacingSize;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 'm', style, className, ...restProps }: SpacingProps) => {\n  if (typeof size === 'string') {\n    className = className ? classNames(sizesClassNames[size], className) : sizesClassNames[size];\n  } else {\n    if (style) {\n      // @ts-expect-error: TS7053 В React.CSSProperties не учитывается Custom Properties\n      style[CUSTOM_CSS_TOKEN_FOR_USER_GAP] = size;\n    } else {\n      // @ts-expect-error: TS2353 В React.CSSProperties не учитывается Custom Properties\n      style = { [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: size };\n    }\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={style}\n      className={className}\n      baseClassName={styles['Spacing']}\n    />\n  );\n};\n"],"names":["classNames","RootComponent","styles","CUSTOM_CSS_TOKEN_FOR_USER_GAP","sizesClassNames","Spacing","size","style","className","restProps","baseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,gCAAgC,+BAA+B;AAE5E,OAAO,MAAMC,kBAAkB;IAC7B,OAAOF,MAAM,CAAC,eAAe;IAC7B,OAAOA,MAAM,CAAC,eAAe;IAC7B,MAAMA,MAAM,CAAC,cAAc;IAC3B,KAAKA,MAAM,CAAC,aAAa;IACzB,KAAKA,MAAM,CAAC,aAAa;IACzB,KAAKA,MAAM,CAAC,aAAa;IACzB,MAAMA,MAAM,CAAC,cAAc;IAC3B,OAAOA,MAAM,CAAC,eAAe;IAC7B,OAAOA,MAAM,CAAC,eAAe;IAC7B,OAAOA,MAAM,CAAC,eAAe;AAC/B,EAAE;AAUF;;CAEC,GACD,OAAO,MAAMG,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,WAAyB;IAClF,IAAI,OAAOH,SAAS,UAAU;QAC5BE,YAAYA,YAAYR,WAAWI,eAAe,CAACE,KAAK,EAAEE,aAAaJ,eAAe,CAACE,KAAK;IAC9F,OAAO;QACL,IAAIC,OAAO;YACT,kFAAkF;YAClFA,KAAK,CAACJ,8BAA8B,GAAGG;QACzC,OAAO;YACL,kFAAkF;YAClFC,QAAQ;gBAAE,CAACJ,8BAA8B,EAAEG;YAAK;QAClD;IACF;IAEA,qBACE,KAACL;QACE,GAAGQ,SAAS;QACbF,OAAOA;QACPC,WAAWA;QACXE,eAAeR,MAAM,CAAC,UAAU;;AAGtC,EAAE"}
+{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--Spacing_gap';\n\nexport const sizesClassNames = {\n  '3xs': styles['Spacing--3xs'],\n  '2xs': styles['Spacing--2xs'],\n  'xs': styles['Spacing--xs'],\n  's': styles['Spacing--s'],\n  'm': styles['Spacing--m'],\n  'l': styles['Spacing--l'],\n  'xl': styles['Spacing--xl'],\n  '2xl': styles['Spacing--2xl'],\n  '3xl': styles['Spacing--3xl'],\n  '4xl': styles['Spacing--4xl'],\n};\n\nexport type SpacingSize = keyof typeof sizesClassNames;\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number | SpacingSize;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 'm', style, className, ...restProps }: SpacingProps) => {\n  if (typeof size === 'string') {\n    className = className ? classNames(sizesClassNames[size], className) : sizesClassNames[size];\n  } else {\n    if (style) {\n      // @ts-expect-error: TS7053 В React.CSSProperties не учитывается Custom Properties\n      style[CUSTOM_CSS_TOKEN_FOR_USER_GAP] = size;\n    } else {\n      // @ts-expect-error: TS2353 В React.CSSProperties не учитывается Custom Properties\n      style = { [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: size };\n    }\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={style}\n      className={className}\n      baseClassName={styles['Spacing']}\n    />\n  );\n};\n"],"names":["classNames","RootComponent","styles","CUSTOM_CSS_TOKEN_FOR_USER_GAP","sizesClassNames","Spacing","size","style","className","restProps","baseClassName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,gCAAgC,+BAA+B;AAE5E,OAAO,MAAMC,kBAAkB;IAC7B,OAAOF,MAAM,CAAC,eAAe;IAC7B,OAAOA,MAAM,CAAC,eAAe;IAC7B,MAAMA,MAAM,CAAC,cAAc;IAC3B,KAAKA,MAAM,CAAC,aAAa;IACzB,KAAKA,MAAM,CAAC,aAAa;IACzB,KAAKA,MAAM,CAAC,aAAa;IACzB,MAAMA,MAAM,CAAC,cAAc;IAC3B,OAAOA,MAAM,CAAC,eAAe;IAC7B,OAAOA,MAAM,CAAC,eAAe;IAC7B,OAAOA,MAAM,CAAC,eAAe;AAC/B,EAAE;AAUF;;CAEC,GACD,OAAO,MAAMG,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,WAAyB;IAClF,IAAI,OAAOH,SAAS,UAAU;QAC5BE,YAAYA,YAAYR,WAAWI,eAAe,CAACE,KAAK,EAAEE,aAAaJ,eAAe,CAACE,KAAK;IAC9F,OAAO;QACL,IAAIC,OAAO;YACT,kFAAkF;YAClFA,KAAK,CAACJ,8BAA8B,GAAGG;QACzC,OAAO;YACL,kFAAkF;YAClFC,QAAQ;gBAAE,CAACJ,8BAA8B,EAAEG;YAAK;QAClD;IACF;IAEA,qBACE,KAACL;QACE,GAAGQ,SAAS;QACbF,OAAOA;QACPC,WAAWA;QACXE,eAAeR,MAAM,CAAC,UAAU;;AAGtC,EAAE"}

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

@@ -8,6 +8,7 @@
 }
 
 .Spacing--3xs {
+  /* TODO [>=7]: удалить deprecated токен */
   --vkui_internal--Spacing_gap: var(--vkui--spacing_size_3xs);
 }
 

package/dist/cssm/components/Spinner/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAKxD,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAC9E,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,iFAMf,YAAY,6CAyChB,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAKxD,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAC9E,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,iFAMf,YAAY,6CA0DhB,CAAC"}

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

@@ -2,24 +2,53 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';
 import { hasReactNode } from '@vkontakte/vkjs';
+import { useReducedMotion } from '../../lib/animation';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './Spinner.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
- */ export const Spinner = /*#__PURE__*/ React.memo(({ size = 'regular', children = 'Загружается...', disableAnimation, ...restProps })=>{
+ */ export const Spinner = /*#__PURE__*/ React.memo(({ size = 'regular', children = 'Загружается...', disableAnimation = false, ...restProps })=>{
+    const isReducedMotion = useReducedMotion();
     const SpinnerIcon = {
         small: Icon16Spinner,
         regular: Icon24Spinner,
         medium: Icon32Spinner,
         large: Icon44Spinner
     }[size];
-    const center = {
-        small: 8,
-        regular: 12,
-        medium: 16,
-        large: 22
-    }[size];
+    let svgAnimateElement = null;
+    const [isReadyForSetSVGAnimateElement, setIsReadyForSetSVGAnimateElement] = React.useState(disableAnimation ? true : false);
+    React.useEffect(function waitReactHydrationBeforeSetSVGAnimateElement() {
+        setIsReadyForSetSVGAnimateElement(true);
+    }, []);
+    if (isReadyForSetSVGAnimateElement && !disableAnimation) {
+        if (isReducedMotion) {
+            svgAnimateElement = /*#__PURE__*/ _jsx("animate", {
+                attributeName: "opacity",
+                keyTimes: "0; 0.5; 1",
+                values: "1; 0.1; 1",
+                begin: "0s",
+                dur: "2s",
+                repeatCount: "indefinite"
+            });
+        } else {
+            const center = {
+                small: 8,
+                regular: 12,
+                medium: 16,
+                large: 22
+            }[size];
+            svgAnimateElement = /*#__PURE__*/ _jsx("animateTransform", {
+                attributeType: "XML",
+                attributeName: "transform",
+                type: "rotate",
+                from: `0 ${center} ${center}`,
+                to: `360 ${center} ${center}`,
+                dur: "0.7s",
+                repeatCount: "indefinite"
+            });
+        }
+    }
     return /*#__PURE__*/ _jsxs(RootComponent, {
         Component: "span",
         role: "status",
@@ -27,17 +56,7 @@ import styles from './Spinner.module.css';
         baseClassName: styles['Spinner'],
         children: [
             /*#__PURE__*/ _jsx(SpinnerIcon, {
-                children: !disableAnimation && // TODO [a11y]: use reduced motion hook?
-                //              https://github.com/VKCOM/VKUI/pull/4673
-                /*#__PURE__*/ _jsx("animateTransform", {
-                    attributeName: "transform",
-                    attributeType: "XML",
-                    type: "rotate",
-                    from: `0 ${center} ${center}`,
-                    to: `360 ${center} ${center}`,
-                    dur: "0.7s",
-                    repeatCount: "indefinite"
-                })
+                children: svgAnimateElement
             }),
             hasReactNode(children) && /*#__PURE__*/ _jsx(VisuallyHidden, {
                 children: children