@vkontakte/vkui 7.1.3 → 7.2.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\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 type { HTMLAttributesWithRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Basic, type 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.placementTopStart,\n  'top': styles.placementTop,\n  'top-end': styles.placementTopEnd,\n  'bottom-start': styles.placementBottomStart,\n  'bottom': styles.placementBottom,\n  'bottom-end': styles.placementBottomEnd,\n};\n\nconst animationStateClassNames = {\n  enter: styles.stateEnter,\n  entering: styles.stateEntering,\n  entered: styles.stateEntered,\n  exit: styles.stateExit,\n  exiting: styles.stateExiting,\n  exited: undefined,\n};\n\nexport interface SnackbarProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'role'>,\n    BasicProps {\n  /**\n   * Задаёт расположение компонента.\n   *\n   * > Note: в мобильном режиме:\n   * > - `\"top-start\"`/`\"top-end\"` перебивается на `\"top\"`, чтобы поведение было схожим с нативными\n   * >   уведомлениями;\n   * > - `\"bottom\"` перебивается на `\"bottom-start\"`, чтобы избежать вызова системных\n   * >   функций, таких как **Pull To Refresh** и **Режим управления одной рукой**.\n   * > - `\"bottom-start\"`/`\"bottom-end\"` закрываются смахиванием в любое из направлений\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: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({\n  placement = 'bottom-start',\n  children,\n  layout,\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  subtitle,\n  offsetY,\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> | undefined>(undefined);\n  const mediaQueries = useMediaQueries();\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, direction: 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          direction === null\n            ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_direction')\n            : /* istanbul ignore next: TODO чтобы протестировать кейс, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n              rootRef.current.style.setProperty(\n                '--vkui_internal--snackbar_direction',\n                `${direction}`,\n              );\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      mediaQueries,\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(\n          shiftDataRef.current.x,\n          shiftDataRef.current.y,\n          shiftDataRef.current.direction,\n        );\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, 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.host,\n        platform === 'ios' && styles.ios,\n        touched && styles.touched,\n        placementClassNames[placement],\n        animationStateClassNames[animationState],\n      )}\n      baseStyle={resolveOffsetYCssStyle(placement, offsetY)}\n      getRootRef={rootRef}\n    >\n      <div\n        role=\"alert\"\n        className={styles.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","useExternRef","useFocusWithin","useGlobalEscKeyDown","useMediaQueries","usePlatform","useCSSKeyframesAnimationController","getRelativeBoundingClientRect","UIPanGestureRecognizer","useIsomorphicLayoutEffect","Button","RootComponent","Basic","getInitialShiftData","getMovedShiftData","resolveOffsetYCssStyle","shouldBeClosedByShiftData","styles","placementClassNames","placementTopStart","placementTop","placementTopEnd","placementBottomStart","placementBottom","placementBottomEnd","animationStateClassNames","enter","stateEnter","entering","stateEntering","entered","stateEntered","exit","stateExit","exiting","stateExiting","exited","undefined","Snackbar","placement","children","layout","action","before","after","duration","onActionClick","onClose","mode","subtitle","offsetY","getRootRef","restProps","platform","open","setOpen","useState","touched","setTouched","rootRef","focused","inRef","useRef","panGestureRecognizer","shiftDataRef","rafRef","closeTimeoutIdRef","mediaQueries","animationState","animationHandlers","onExited","clearRAF","useCallback","current","cancelAnimationFrame","updateShiftAxisCSSProperties","x","y","direction","requestAnimationFrame","style","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","host","ios","baseStyle","div","className","in","ref","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","align","appearance","size","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\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 type { HTMLAttributesWithRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Basic, type 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.placementTopStart,\n  'top': styles.placementTop,\n  'top-end': styles.placementTopEnd,\n  'bottom-start': styles.placementBottomStart,\n  'bottom': styles.placementBottom,\n  'bottom-end': styles.placementBottomEnd,\n};\n\nconst animationStateClassNames = {\n  enter: styles.stateEnter,\n  entering: styles.stateEntering,\n  entered: styles.stateEntered,\n  exit: styles.stateExit,\n  exiting: styles.stateExiting,\n  exited: undefined,\n};\n\nexport interface SnackbarProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'role'>,\n    BasicProps {\n  /**\n   * Задаёт расположение компонента.\n   *\n   * > Note: в мобильном режиме:\n   * > - `\"top-start\"`/`\"top-end\"` перебивается на `\"top\"`, чтобы поведение было схожим с нативными\n   * >   уведомлениями;\n   * > - `\"bottom\"` перебивается на `\"bottom-start\"`, чтобы избежать вызова системных\n   * >   функций, таких как **Pull To Refresh** и **Режим управления одной рукой**.\n   * > - `\"bottom-start\"`/`\"bottom-end\"` закрываются смахиванием в любое из направлений\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: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({\n  placement = 'bottom-start',\n  children,\n  layout,\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  subtitle,\n  offsetY,\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 direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\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> | undefined>(undefined);\n  const mediaQueries = useMediaQueries();\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, direction: 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          direction === null\n            ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_direction')\n            : /* istanbul ignore next: TODO чтобы протестировать кейс, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n              rootRef.current.style.setProperty(\n                '--vkui_internal--snackbar_direction',\n                `${direction}`,\n              );\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      mediaQueries,\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        isRtl,\n      );\n\n      if (shiftDataRef.current.shifted) {\n        updateShiftAxisCSSProperties(\n          shiftDataRef.current.x,\n          shiftDataRef.current.y,\n          shiftDataRef.current.direction,\n        );\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        isRtl,\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, 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.host,\n        platform === 'ios' && styles.ios,\n        touched && styles.touched,\n        placementClassNames[placement],\n        animationStateClassNames[animationState],\n        isRtl && styles.rtl,\n      )}\n      baseStyle={resolveOffsetYCssStyle(placement, offsetY)}\n      getRootRef={rootRef}\n    >\n      <div\n        role=\"alert\"\n        className={styles.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","useConfigDirection","useExternRef","useFocusWithin","useGlobalEscKeyDown","useMediaQueries","usePlatform","useCSSKeyframesAnimationController","getRelativeBoundingClientRect","UIPanGestureRecognizer","useIsomorphicLayoutEffect","Button","RootComponent","Basic","getInitialShiftData","getMovedShiftData","resolveOffsetYCssStyle","shouldBeClosedByShiftData","styles","placementClassNames","placementTopStart","placementTop","placementTopEnd","placementBottomStart","placementBottom","placementBottomEnd","animationStateClassNames","enter","stateEnter","entering","stateEntering","entered","stateEntered","exit","stateExit","exiting","stateExiting","exited","undefined","Snackbar","placement","children","layout","action","before","after","duration","onActionClick","onClose","mode","subtitle","offsetY","getRootRef","restProps","platform","open","setOpen","useState","touched","setTouched","direction","isRtl","rootRef","focused","inRef","useRef","panGestureRecognizer","shiftDataRef","rafRef","closeTimeoutIdRef","mediaQueries","animationState","animationHandlers","onExited","clearRAF","useCallback","current","cancelAnimationFrame","updateShiftAxisCSSProperties","x","y","requestAnimationFrame","style","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","host","ios","rtl","baseStyle","div","className","in","ref","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","align","appearance","size","onClick"],"mappings":"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"}

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

@@ -7,6 +7,7 @@
   --vkui_internal--snackbar_animation_from: translate3d(0, 0, 0);
   --vkui_internal--snackbar_animation_to: translate3d(0, 0, 0);
   --vkui_internal--snackbar_animation_duration: 340ms;
+  --vkui_internal--snackbar_animation_text_direction: 1;
 
   position: fixed;
   inset-inline: var(--vkui_internal--safe_area_inset_left)
@@ -21,6 +22,10 @@
   --vkui_internal--snackbar_animation_duration: 400ms;
 }
 
+.rtl {
+  --vkui_internal--snackbar_animation_text_direction: -1;
+}
+
 .placementTopStart,
 .placementTop,
 .placementTopEnd {
@@ -31,11 +36,15 @@
 }
 
 .placementBottomStart {
-  --vkui_internal--snackbar_direction: -1;
+  --vkui_internal--snackbar_direction: calc(
+    -1 * var(--vkui_internal--snackbar_animation_text_direction)
+  );
 }
 
 .placementBottomEnd {
-  --vkui_internal--snackbar_direction: 1;
+  --vkui_internal--snackbar_direction: calc(
+    1 * var(--vkui_internal--snackbar_animation_text_direction)
+  );
 }
 
 .placementBottomStart,
@@ -73,7 +82,11 @@
 
   .placementTopStart,
   .placementBottomStart {
-    --vkui_internal--snackbar_animation_from: translate3d(-100%, 0, 0);
+    --vkui_internal--snackbar_animation_from: translate3d(
+      calc(-100% * var(--vkui_internal--snackbar_animation_text_direction)),
+      0,
+      0
+    );
     --vkui_internal--snackbar_animation_to: translate3d(
       var(--vkui_internal--snackbar_shift_x),
       0,
@@ -86,7 +99,11 @@
 
   .placementTopEnd,
   .placementBottomEnd {
-    --vkui_internal--snackbar_animation_from: translate3d(100%, 0, 0);
+    --vkui_internal--snackbar_animation_from: translate3d(
+      calc(100% * var(--vkui_internal--snackbar_animation_text_direction)),
+      0,
+      0
+    );
     --vkui_internal--snackbar_animation_to: translate3d(
       var(--vkui_internal--snackbar_shift_x),
       0,
@@ -147,9 +164,9 @@
 }
 
 .stateEntered .in {
-  transition-property: transform;
-  transition-duration: var(--vkui_internal--snackbar_animation_duration);
   transition-timing-function: var(--vkui--animation_easing_platform);
+  transition-duration: var(--vkui_internal--snackbar_animation_duration);
+  transition-property: transform;
 }
 
 .touched .in {

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

@@ -9,13 +9,13 @@
   );
 
   box-sizing: border-box;
-  padding: 12px;
-  min-block-size: 56px;
   display: flex;
   align-items: center;
+  min-block-size: 56px;
+  padding: 12px;
   background: var(--vkui--color_background_contrast_themed);
-  box-shadow: var(--vkui--elevation4);
   border-radius: var(--vkui--size_card_border_radius--regular);
+  box-shadow: var(--vkui--elevation4);
 }
 
 .sizeYRegular {
@@ -57,25 +57,26 @@
 }
 
 .content {
-  flex: 1;
   display: flex;
+  flex: 1;
   align-items: center;
+  word-break: break-word;
 }
 
 .contentText {
+  display: -webkit-box;
   flex: 1;
-  color: var(--vkui--color_text_primary);
   inline-size: 100%;
-  display: -webkit-box;
+  overflow: hidden;
   -webkit-line-clamp: 3;
+  color: var(--vkui--color_text_primary);
   -webkit-box-orient: vertical;
-  overflow: hidden;
 }
 
 .contentSubtitle {
-  color: var(--vkui--color_text_subhead);
   -webkit-margin-before: 2px;
           margin-block-start: 2px;
+  color: var(--vkui--color_text_subhead);
 }
 
 .modeDark .contentText {

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

@@ -18,6 +18,9 @@ export function resolveOffsetYCssStyle(placement, offsetY) {
             };
     }
 }
+export function revertRtlValue(value, isRtl) {
+    return isRtl ? -1 * value : value;
+}
 export function getInitialShiftData(width, height, mediaQueries) {
     return {
         shifted: false,
@@ -29,12 +32,12 @@ export function getInitialShiftData(width, height, mediaQueries) {
         height
     };
 }
-export function getMovedShiftData(placement, shiftData, nextShift) {
+export function getMovedShiftData(placement, shiftData, nextShift, isRtl = false) {
     /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */ if (shiftData.isDesktop) {
         if (placement.endsWith('start')) {
-            shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);
+            shiftData.x = isRtl ? rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width) : rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);
         } else if (placement.endsWith('end')) {
-            shiftData.x = rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);
+            shiftData.x = isRtl ? rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0) : rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);
         }
         if (placement.startsWith('bottom')) {
             shiftData.y = rubberbandIfOutOfBounds(nextShift.y, 0, shiftData.height);
@@ -52,7 +55,7 @@ export function getMovedShiftData(placement, shiftData, nextShift) {
     return shiftData;
 }
 const MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE = 200;
-export function shouldBeClosedByShiftData(placement, shiftData, relativeClientRect, velocity) {
+export function shouldBeClosedByShiftData(placement, shiftData, relativeClientRect, velocity, isRtl = false) {
     if (!shiftData.shifted) {
         return false;
     }
@@ -66,11 +69,11 @@ export function shouldBeClosedByShiftData(placement, shiftData, relativeClientRe
     };
     /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */ if (shiftData.isDesktop) {
         if (placement.endsWith('start')) {
-            shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;
-            shouldBeClosedByVelocity.x = relativeClientRect.x < 0 ? velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;
+            shouldBeClosedThreshold.x = revertRtlValue(relativeClientRect.x, isRtl) < -relativeClientRect.width / 2;
+            shouldBeClosedByVelocity.x = revertRtlValue(relativeClientRect.x, isRtl) < 0 ? revertRtlValue(velocity.x, isRtl) < revertRtlValue(-MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE, isRtl) : false;
         } else if (placement.endsWith('end')) {
-            shouldBeClosedThreshold.x = relativeClientRect.x > relativeClientRect.width / 2;
-            shouldBeClosedByVelocity.x = relativeClientRect.x > 0 ? velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;
+            shouldBeClosedThreshold.x = revertRtlValue(relativeClientRect.x, isRtl) > relativeClientRect.width / 2;
+            shouldBeClosedByVelocity.x = revertRtlValue(relativeClientRect.x, isRtl) > 0 ? revertRtlValue(velocity.x, isRtl) > revertRtlValue(MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE, isRtl) : false;
         }
         if (placement.startsWith('bottom')) {
             shouldBeClosedThreshold.y = relativeClientRect.y > relativeClientRect.height / 2;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Snackbar/utils.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { MediaQueries } from '../../lib/adaptivity';\nimport { rubberbandIfOutOfBounds } from '../../lib/animation';\nimport type { ShiftData, SnackbarPlacement } from './types';\n\nexport function resolveOffsetYCssStyle(\n  placement: SnackbarPlacement,\n  offsetY?: React.CSSProperties['inset'],\n): React.CSSProperties | undefined {\n  if (offsetY === undefined) {\n    return undefined;\n  }\n  switch (placement) {\n    case 'top-start':\n    case 'top':\n    case 'top-end':\n      return { top: offsetY };\n    case 'bottom-start':\n    case 'bottom':\n    case 'bottom-end':\n      return { bottom: offsetY };\n  }\n}\n\nexport function getInitialShiftData(\n  width: number,\n  height: number,\n  mediaQueries: MediaQueries,\n): ShiftData {\n  return {\n    shifted: false,\n    direction: null,\n    isDesktop: mediaQueries.smallTabletPlus.matches, // eslint-disable-line no-restricted-properties,\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): ShiftData {\n  /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n  if (shiftData.isDesktop) {\n    if (placement.endsWith('start')) {\n      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);\n    } else if (placement.endsWith('end')) {\n      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);\n    }\n\n    if (placement.startsWith('bottom')) {\n      shiftData.y = rubberbandIfOutOfBounds(nextShift.y, 0, shiftData.height);\n    }\n  } else if (placement.startsWith('bottom')) {\n    shiftData.x = nextShift.x;\n\n    const movingToLeft = nextShift.x < 0 ? -1 : null;\n    const movingToRight = nextShift.x > 0 ? 1 : null;\n    shiftData.direction = movingToLeft || movingToRight;\n  }\n\n  if (placement.startsWith('top')) {\n    shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);\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): boolean {\n  if (!shiftData.shifted) {\n    return false;\n  }\n\n  const shouldBeClosedThreshold = { x: false, y: false };\n  const shouldBeClosedByVelocity = { x: false, y: false };\n\n  /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n  if (shiftData.isDesktop) {\n    if (placement.endsWith('start')) {\n      shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x =\n        relativeClientRect.x < 0 ? velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n    } else if (placement.endsWith('end')) {\n      shouldBeClosedThreshold.x = relativeClientRect.x > relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x =\n        relativeClientRect.x > 0 ? velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n    }\n\n    if (placement.startsWith('bottom')) {\n      shouldBeClosedThreshold.y = relativeClientRect.y > relativeClientRect.height / 2;\n      shouldBeClosedByVelocity.y =\n        relativeClientRect.y > 0 ? velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n    }\n  } else if (placement.startsWith('bottom')) {\n    shouldBeClosedThreshold.x =\n      relativeClientRect.x < -relativeClientRect.width / 2 ||\n      relativeClientRect.x > relativeClientRect.width / 2;\n    shouldBeClosedByVelocity.x =\n      (relativeClientRect.x < 0 && velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE) ||\n      (relativeClientRect.x > 0 && velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE);\n  }\n\n  if (placement.startsWith('top')) {\n    shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;\n    shouldBeClosedByVelocity.y =\n      relativeClientRect.y < 0 ? velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\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","offsetY","undefined","top","bottom","getInitialShiftData","width","height","mediaQueries","shifted","direction","isDesktop","smallTabletPlus","matches","x","y","getMovedShiftData","shiftData","nextShift","endsWith","startsWith","movingToLeft","movingToRight","MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE","shouldBeClosedByShiftData","relativeClientRect","velocity","shouldBeClosedThreshold","shouldBeClosedByVelocity"],"mappings":"AAEA,SAASA,uBAAuB,QAAQ,+BAAsB;AAG9D,OAAO,SAASC,uBACdC,SAA4B,EAC5BC,OAAsC;IAEtC,IAAIA,YAAYC,WAAW;QACzB,OAAOA;IACT;IACA,OAAQF;QACN,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO;gBAAEG,KAAKF;YAAQ;QACxB,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO;gBAAEG,QAAQH;YAAQ;IAC7B;AACF;AAEA,OAAO,SAASI,oBACdC,KAAa,EACbC,MAAc,EACdC,YAA0B;IAE1B,OAAO;QACLC,SAAS;QACTC,WAAW;QACXC,WAAWH,aAAaI,eAAe,CAACC,OAAO;QAC/CC,GAAG;QACHC,GAAG;QACHT;QACAC;IACF;AACF;AAEA,OAAO,SAASS,kBACdhB,SAA4B,EAC5BiB,SAAoB,EACpBC,SAAmC;IAEnC,4JAA4J,GAC5J,IAAID,UAAUN,SAAS,EAAE;QACvB,IAAIX,UAAUmB,QAAQ,CAAC,UAAU;YAC/BF,UAAUH,CAAC,GAAGhB,wBAAwBoB,UAAUJ,CAAC,EAAE,CAACG,UAAUX,KAAK,EAAE;QACvE,OAAO,IAAIN,UAAUmB,QAAQ,CAAC,QAAQ;YACpCF,UAAUH,CAAC,GAAGhB,wBAAwBoB,UAAUJ,CAAC,EAAE,GAAGG,UAAUX,KAAK;QACvE;QAEA,IAAIN,UAAUoB,UAAU,CAAC,WAAW;YAClCH,UAAUF,CAAC,GAAGjB,wBAAwBoB,UAAUH,CAAC,EAAE,GAAGE,UAAUV,MAAM;QACxE;IACF,OAAO,IAAIP,UAAUoB,UAAU,CAAC,WAAW;QACzCH,UAAUH,CAAC,GAAGI,UAAUJ,CAAC;QAEzB,MAAMO,eAAeH,UAAUJ,CAAC,GAAG,IAAI,CAAC,IAAI;QAC5C,MAAMQ,gBAAgBJ,UAAUJ,CAAC,GAAG,IAAI,IAAI;QAC5CG,UAAUP,SAAS,GAAGW,gBAAgBC;IACxC;IAEA,IAAItB,UAAUoB,UAAU,CAAC,QAAQ;QAC/BH,UAAUF,CAAC,GAAGjB,wBAAwBoB,UAAUH,CAAC,EAAE,CAACE,UAAUV,MAAM,EAAE;IACxE;IAEAU,UAAUR,OAAO,GAAG;IAEpB,OAAOQ;AACT;AAEA,MAAMM,wCAAwC;AAE9C,OAAO,SAASC,0BACdxB,SAA4B,EAC5BiB,SAAoB,EACpBQ,kBAA2B,EAC3BC,QAAkC;IAElC,IAAI,CAACT,UAAUR,OAAO,EAAE;QACtB,OAAO;IACT;IAEA,MAAMkB,0BAA0B;QAAEb,GAAG;QAAOC,GAAG;IAAM;IACrD,MAAMa,2BAA2B;QAAEd,GAAG;QAAOC,GAAG;IAAM;IAEtD,4JAA4J,GAC5J,IAAIE,UAAUN,SAAS,EAAE;QACvB,IAAIX,UAAUmB,QAAQ,CAAC,UAAU;YAC/BQ,wBAAwBb,CAAC,GAAGW,mBAAmBX,CAAC,GAAG,CAACW,mBAAmBnB,KAAK,GAAG;YAC/EsB,yBAAyBd,CAAC,GACxBW,mBAAmBX,CAAC,GAAG,IAAIY,SAASZ,CAAC,GAAG,CAACS,wCAAwC;QACrF,OAAO,IAAIvB,UAAUmB,QAAQ,CAAC,QAAQ;YACpCQ,wBAAwBb,CAAC,GAAGW,mBAAmBX,CAAC,GAAGW,mBAAmBnB,KAAK,GAAG;YAC9EsB,yBAAyBd,CAAC,GACxBW,mBAAmBX,CAAC,GAAG,IAAIY,SAASZ,CAAC,GAAGS,wCAAwC;QACpF;QAEA,IAAIvB,UAAUoB,UAAU,CAAC,WAAW;YAClCO,wBAAwBZ,CAAC,GAAGU,mBAAmBV,CAAC,GAAGU,mBAAmBlB,MAAM,GAAG;YAC/EqB,yBAAyBb,CAAC,GACxBU,mBAAmBV,CAAC,GAAG,IAAIW,SAASX,CAAC,GAAGQ,wCAAwC;QACpF;IACF,OAAO,IAAIvB,UAAUoB,UAAU,CAAC,WAAW;QACzCO,wBAAwBb,CAAC,GACvBW,mBAAmBX,CAAC,GAAG,CAACW,mBAAmBnB,KAAK,GAAG,KACnDmB,mBAAmBX,CAAC,GAAGW,mBAAmBnB,KAAK,GAAG;QACpDsB,yBAAyBd,CAAC,GACxB,AAACW,mBAAmBX,CAAC,GAAG,KAAKY,SAASZ,CAAC,GAAG,CAACS,yCAC1CE,mBAAmBX,CAAC,GAAG,KAAKY,SAASZ,CAAC,GAAGS;IAC9C;IAEA,IAAIvB,UAAUoB,UAAU,CAAC,QAAQ;QAC/BO,wBAAwBZ,CAAC,GAAGU,mBAAmBV,CAAC,GAAG,CAACU,mBAAmBlB,MAAM,GAAG;QAChFqB,yBAAyBb,CAAC,GACxBU,mBAAmBV,CAAC,GAAG,IAAIW,SAASX,CAAC,GAAG,CAACQ,wCAAwC;IACrF;IAEA,OACEI,wBAAwBb,CAAC,IACzBc,yBAAyBd,CAAC,IAC1Ba,wBAAwBZ,CAAC,IACzB,0EAA0E,GAC1Ea,yBAAyBb,CAAC;AAE9B"}
+{"version":3,"sources":["../../../../src/components/Snackbar/utils.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { MediaQueries } from '../../lib/adaptivity';\nimport { rubberbandIfOutOfBounds } from '../../lib/animation';\nimport type { ShiftData, SnackbarPlacement } from './types';\n\nexport function resolveOffsetYCssStyle(\n  placement: SnackbarPlacement,\n  offsetY?: React.CSSProperties['inset'],\n): React.CSSProperties | undefined {\n  if (offsetY === undefined) {\n    return undefined;\n  }\n  switch (placement) {\n    case 'top-start':\n    case 'top':\n    case 'top-end':\n      return { top: offsetY };\n    case 'bottom-start':\n    case 'bottom':\n    case 'bottom-end':\n      return { bottom: offsetY };\n  }\n}\n\nexport function revertRtlValue(value: number, isRtl: boolean) {\n  return isRtl ? -1 * value : value;\n}\n\nexport function getInitialShiftData(\n  width: number,\n  height: number,\n  mediaQueries: MediaQueries,\n): ShiftData {\n  return {\n    shifted: false,\n    direction: null,\n    isDesktop: mediaQueries.smallTabletPlus.matches, // eslint-disable-line no-restricted-properties,\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  isRtl = false,\n): ShiftData {\n  /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n  if (shiftData.isDesktop) {\n    if (placement.endsWith('start')) {\n      shiftData.x = isRtl\n        ? rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width)\n        : rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);\n    } else if (placement.endsWith('end')) {\n      shiftData.x = isRtl\n        ? rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0)\n        : rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);\n    }\n\n    if (placement.startsWith('bottom')) {\n      shiftData.y = rubberbandIfOutOfBounds(nextShift.y, 0, shiftData.height);\n    }\n  } else if (placement.startsWith('bottom')) {\n    shiftData.x = nextShift.x;\n\n    const movingToLeft = nextShift.x < 0 ? -1 : null;\n    const movingToRight = nextShift.x > 0 ? 1 : null;\n    shiftData.direction = movingToLeft || movingToRight;\n  }\n\n  if (placement.startsWith('top')) {\n    shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);\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  isRtl = false,\n): boolean {\n  if (!shiftData.shifted) {\n    return false;\n  }\n\n  const shouldBeClosedThreshold = { x: false, y: false };\n  const shouldBeClosedByVelocity = { x: false, y: false };\n\n  /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n  if (shiftData.isDesktop) {\n    if (placement.endsWith('start')) {\n      shouldBeClosedThreshold.x =\n        revertRtlValue(relativeClientRect.x, isRtl) < -relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x =\n        revertRtlValue(relativeClientRect.x, isRtl) < 0\n          ? revertRtlValue(velocity.x, isRtl) <\n            revertRtlValue(-MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE, isRtl)\n          : false;\n    } else if (placement.endsWith('end')) {\n      shouldBeClosedThreshold.x =\n        revertRtlValue(relativeClientRect.x, isRtl) > relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x =\n        revertRtlValue(relativeClientRect.x, isRtl) > 0\n          ? revertRtlValue(velocity.x, isRtl) >\n            revertRtlValue(MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE, isRtl)\n          : false;\n    }\n\n    if (placement.startsWith('bottom')) {\n      shouldBeClosedThreshold.y = relativeClientRect.y > relativeClientRect.height / 2;\n      shouldBeClosedByVelocity.y =\n        relativeClientRect.y > 0 ? velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n    }\n  } else if (placement.startsWith('bottom')) {\n    shouldBeClosedThreshold.x =\n      relativeClientRect.x < -relativeClientRect.width / 2 ||\n      relativeClientRect.x > relativeClientRect.width / 2;\n    shouldBeClosedByVelocity.x =\n      (relativeClientRect.x < 0 && velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE) ||\n      (relativeClientRect.x > 0 && velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE);\n  }\n\n  if (placement.startsWith('top')) {\n    shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;\n    shouldBeClosedByVelocity.y =\n      relativeClientRect.y < 0 ? velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\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","offsetY","undefined","top","bottom","revertRtlValue","value","isRtl","getInitialShiftData","width","height","mediaQueries","shifted","direction","isDesktop","smallTabletPlus","matches","x","y","getMovedShiftData","shiftData","nextShift","endsWith","startsWith","movingToLeft","movingToRight","MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE","shouldBeClosedByShiftData","relativeClientRect","velocity","shouldBeClosedThreshold","shouldBeClosedByVelocity"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 .host {
   position: relative;
-  padding-block: calc(var(--vkui_internal--spacing_size) / 2);
   box-sizing: border-box;
+  padding-block: calc(var(--vkui_internal--spacing_size) / 2);
 }

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

@@ -1,9 +1,9 @@
 .host {
-  inline-size: 100%;
-  block-size: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
   color: var(--vkui--color_icon_medium);
 }
 

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

@@ -1,9 +1,9 @@
 .host {
-  block-size: 100%;
-  inline-size: 1px;
+  position: relative;
   flex-grow: 1;
   flex-shrink: 1;
-  position: relative;
+  inline-size: 1px;
+  block-size: 100%;
 }
 
 .viewWidthSmallTabletPlus.spacedAuto {
@@ -35,19 +35,19 @@
 }
 
 .fixed {
-  block-size: 100%;
-  inline-size: 1px;
   flex-grow: 1;
   flex-shrink: 1;
+  inline-size: 1px;
+  block-size: 100%;
 }
 
 .fixedInner {
-  block-size: inherit;
+  position: fixed;
+  inset-block-start: 0;
   inline-size: inherit;
   min-inline-size: inherit;
   max-inline-size: inherit;
-  position: fixed;
-  transform: translateZ(0);
+  block-size: inherit;
   overflow: hidden;
-  inset-block-start: 0;
+  transform: translateZ(0);
 }

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

@@ -1,13 +1,13 @@
 .host {
+  position: relative;
   inline-size: 100%;
   block-size: 100%;
-  position: relative;
 }
 
 .inner {
+  display: flex;
   inline-size: 100%;
   block-size: 100%;
-  display: flex;
 }
 
 /* Hack with using PanelHeaderSimple */

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

@@ -5,21 +5,21 @@
 }
 
 .scrollIn {
-  margin: 0;
+  display: flex;
   padding-block: calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px);
   padding-inline: 0;
-  display: flex;
+  margin: 0;
 }
 
 .scrollIn::before,
 .scrollIn::after {
-  content: '';
   min-inline-size: var(--vkui--size_base_padding_horizontal--regular);
+  content: '';
 }
 
 .item {
-  list-style-type: none;
   display: flex;
+  list-style-type: none;
 }
 
 .item + .item {

package/dist/cssm/components/SubnavigationButton/SubnavigationButton.js

@@ -45,7 +45,7 @@ const SubnavigationButtonTypography = ({ textLevel, ...restProps })=>{
         ...restProps,
         hasActive: false,
         focusVisibleMode: "outside",
-        baseClassName: classNames(styles.host, sizeStyles[size], modeStyles[mode], appearanceStyles[appearance], selected && styles.selected, sizeY !== 'regular' && sizeYClassNames[sizeY]),
+        baseClassName: classNames(styles.host, sizeStyles[size], modeStyles[mode], appearanceStyles[appearance], selected && styles.selected, sizeY !== 'regular' && sizeYClassNames[sizeY], restProps.disabled && styles.disabled),
         children: /*#__PURE__*/ _jsxs("span", {
             className: styles.in,
             children: [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasChildren, HasComponent } from '../../types';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst modeStyles = {\n  primary: styles.modePrimary,\n  outline: styles.modeOutline,\n  tertiary: styles.modeTertiary,\n};\n\nconst sizeStyles = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  appearance?: 'accent' | 'neutral';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  chevron?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  chevron,\n  children,\n  ...restProps\n}: SubnavigationButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      baseClassName={classNames(\n        styles.host,\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n    >\n      <span className={styles.in}>\n        {before && <span className={styles.before}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles.label}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles.after}>{after}</span>}\n        {chevron && <Icon16Dropdown className={styles.chevronIcon} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","Tappable","Caption","Subhead","styles","appearanceStyles","accent","appearanceAccent","neutral","appearanceNeutral","modeStyles","primary","modePrimary","outline","modeOutline","tertiary","modeTertiary","sizeStyles","s","sizeS","m","sizeM","l","sizeL","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","chevron","children","sizeY","hasActive","focusVisibleMode","baseClassName","host","span","className","in","label","Component","chevronIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,mBAAmB;IACvBC,QAAQF,OAAOG,gBAAgB;IAC/BC,SAASJ,OAAOK,iBAAiB;AACnC;AAEA,MAAMC,aAAa;IACjBC,SAASP,OAAOQ,WAAW;IAC3BC,SAAST,OAAOU,WAAW;IAC3BC,UAAUX,OAAOY,YAAY;AAC/B;AAEA,MAAMC,aAAa;IACjBC,GAAGd,OAAOe,KAAK;IACfC,GAAGhB,OAAOiB,KAAK;IACfC,GAAGlB,OAAOmB,KAAK;AACjB;AAEA,MAAMC,kBAAkB;IACtBC,MAAMrB,OAAOsB,SAAS;IACtBC,SAASvB,OAAOwB,YAAY;AAC9B;AA6BA,MAAMC,gCAAgC,CAAC,EACrCC,SAAS,EACT,GAAGC,WACgC;IACnC,IAAID,cAAc,KAAK;QACrB,qBAAO,KAAC3B;YAAS,GAAG4B,SAAS;;IAC/B;IAEA,qBAAO,KAAC7B;QAAQ8B,OAAOF,cAAc,MAAM,MAAM;QAAM,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRP,YAAY,GAAG,EACfQ,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACR,GAAGV,WACsB;IACzB,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAG1C;IAE3B,qBACE,KAACC;QACE,GAAG8B,SAAS;QACbY,WAAW;QACXC,kBAAiB;QACjBC,eAAe9C,WACbK,OAAO0C,IAAI,EACX7B,UAAU,CAACmB,KAAK,EAChB1B,UAAU,CAACwB,KAAK,EAChB7B,gBAAgB,CAAC8B,WAAW,EAC5BE,YAAYjC,OAAOiC,QAAQ,EAC3BK,UAAU,aAAalB,eAAe,CAACkB,MAAM;kBAG/C,cAAA,MAACK;YAAKC,WAAW5C,OAAO6C,EAAE;;gBACvBX,wBAAU,KAACS;oBAAKC,WAAW5C,OAAOkC,MAAM;8BAAGA;;8BAC5C,KAACT;oBACCC,WAAWA;oBACXkB,WAAW5C,OAAO8C,KAAK;oBACvBC,WAAU;8BAETV;;gBAEFF,uBAAS,KAACQ;oBAAKC,WAAW5C,OAAOmC,KAAK;8BAAGA;;gBACzCC,yBAAW,KAAC1C;oBAAekD,WAAW5C,OAAOgD,WAAW;;;;;AAIjE,EAAE"}
+{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasChildren, HasComponent } from '../../types';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst modeStyles = {\n  primary: styles.modePrimary,\n  outline: styles.modeOutline,\n  tertiary: styles.modeTertiary,\n};\n\nconst sizeStyles = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  appearance?: 'accent' | 'neutral';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  chevron?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  chevron,\n  children,\n  ...restProps\n}: SubnavigationButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      baseClassName={classNames(\n        styles.host,\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        restProps.disabled && styles.disabled,\n      )}\n    >\n      <span className={styles.in}>\n        {before && <span className={styles.before}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles.label}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles.after}>{after}</span>}\n        {chevron && <Icon16Dropdown className={styles.chevronIcon} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","Tappable","Caption","Subhead","styles","appearanceStyles","accent","appearanceAccent","neutral","appearanceNeutral","modeStyles","primary","modePrimary","outline","modeOutline","tertiary","modeTertiary","sizeStyles","s","sizeS","m","sizeM","l","sizeL","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","chevron","children","sizeY","hasActive","focusVisibleMode","baseClassName","host","disabled","span","className","in","label","Component","chevronIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,mBAAmB;IACvBC,QAAQF,OAAOG,gBAAgB;IAC/BC,SAASJ,OAAOK,iBAAiB;AACnC;AAEA,MAAMC,aAAa;IACjBC,SAASP,OAAOQ,WAAW;IAC3BC,SAAST,OAAOU,WAAW;IAC3BC,UAAUX,OAAOY,YAAY;AAC/B;AAEA,MAAMC,aAAa;IACjBC,GAAGd,OAAOe,KAAK;IACfC,GAAGhB,OAAOiB,KAAK;IACfC,GAAGlB,OAAOmB,KAAK;AACjB;AAEA,MAAMC,kBAAkB;IACtBC,MAAMrB,OAAOsB,SAAS;IACtBC,SAASvB,OAAOwB,YAAY;AAC9B;AA6BA,MAAMC,gCAAgC,CAAC,EACrCC,SAAS,EACT,GAAGC,WACgC;IACnC,IAAID,cAAc,KAAK;QACrB,qBAAO,KAAC3B;YAAS,GAAG4B,SAAS;;IAC/B;IAEA,qBAAO,KAAC7B;QAAQ8B,OAAOF,cAAc,MAAM,MAAM;QAAM,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRP,YAAY,GAAG,EACfQ,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACR,GAAGV,WACsB;IACzB,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAG1C;IAE3B,qBACE,KAACC;QACE,GAAG8B,SAAS;QACbY,WAAW;QACXC,kBAAiB;QACjBC,eAAe9C,WACbK,OAAO0C,IAAI,EACX7B,UAAU,CAACmB,KAAK,EAChB1B,UAAU,CAACwB,KAAK,EAChB7B,gBAAgB,CAAC8B,WAAW,EAC5BE,YAAYjC,OAAOiC,QAAQ,EAC3BK,UAAU,aAAalB,eAAe,CAACkB,MAAM,EAC7CX,UAAUgB,QAAQ,IAAI3C,OAAO2C,QAAQ;kBAGvC,cAAA,MAACC;YAAKC,WAAW7C,OAAO8C,EAAE;;gBACvBZ,wBAAU,KAACU;oBAAKC,WAAW7C,OAAOkC,MAAM;8BAAGA;;8BAC5C,KAACT;oBACCC,WAAWA;oBACXmB,WAAW7C,OAAO+C,KAAK;oBACvBC,WAAU;8BAETX;;gBAEFF,uBAAS,KAACS;oBAAKC,WAAW7C,OAAOmC,KAAK;8BAAGA;;gBACzCC,yBAAW,KAAC1C;oBAAemD,WAAW7C,OAAOiD,WAAW;;;;;AAIjE,EAAE"}

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

@@ -6,6 +6,10 @@
   border-radius: var(--vkui--size_border_radius--regular);
 }
 
+.disabled {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
 .in {
   display: flex;
   align-items: center;
@@ -74,9 +78,9 @@
 
 .label {
   flex-grow: 0;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .after {
@@ -86,10 +90,10 @@
 
 .chevronIcon {
   box-sizing: content-box;
-  -webkit-margin-start: 8px;
-          margin-inline-start: 8px;
   -webkit-margin-before: 1px;
           margin-block-start: 1px; /* Смещает иконку относительно текста */
+  -webkit-margin-start: 8px;
+          margin-inline-start: 8px;
   color: var(--vkui--color_icon_secondary);
 }
 
@@ -133,16 +137,16 @@
  */
 
 .selected {
-  background-color: var(--vkui--color_background_accent_themed);
   color: var(--vkui--color_text_contrast_themed);
-  box-shadow: none;
+  background-color: var(--vkui--color_background_accent_themed);
   border: 0;
+  box-shadow: none;
 }
 
 .selected.modeTertiary,
 .selected.appearanceNeutral {
-  background-color: var(--vkui--color_transparent--active);
   color: var(--vkui--color_text_primary);
+  background-color: var(--vkui--color_transparent--active);
 }
 
 .selected.appearanceAccent:not(.modeTertiary) .before,

package/dist/cssm/components/Switch/Switch.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
+import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { useFocusVisible } from "../../hooks/useFocusVisible.js";
 import { useFocusVisibleClassName } from "../../hooks/useFocusVisibleClassName.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
@@ -16,6 +17,8 @@ const sizeYClassNames = {
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
  */ export const Switch = ({ style, className, getRootRef, getRef, checked: checkedProp, disabled, onBlur: onBlurProp, onFocus: onFocusProp, onClick, ...restProps })=>{
+    const direction = useConfigDirection();
+    const isRtl = direction === 'rtl';
     const platform = usePlatform();
     const { sizeY = 'none' } = useAdaptivity();
     const { focusVisible, onBlur, onFocus } = useFocusVisible();
@@ -54,7 +57,7 @@ const sizeYClassNames = {
         inputProps['aria-checked'] = localUncontrolledChecked ? 'true' : 'false';
     }
     return /*#__PURE__*/ _jsxs("label", {
-        className: classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY], platform === 'ios' ? styles.ios : styles.default, disabled && styles.disabled, focusVisibleClassNames, className),
+        className: classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY], platform === 'ios' ? styles.ios : styles.default, disabled && styles.disabled, isRtl && styles.rtl, focusVisibleClassNames, className),
         style: style,
         ref: getRootRef,
         children: [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { VisuallyHidden, type VisuallyHiddenProps } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({\n  style,\n  className,\n  getRootRef,\n  getRef,\n  checked: checkedProp,\n  disabled,\n  onBlur: onBlurProp,\n  onFocus: onFocusProp,\n  onClick,\n  ...restProps\n}: SwitchProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'outside' });\n  const handleBlur = callMultiple(onBlur, onBlurProp);\n  const handleFocus = callMultiple(onFocus, onFocusProp);\n\n  const [localUncontrolledChecked, setLocalUncontrolledChecked] = React.useState(\n    Boolean(restProps.defaultChecked),\n  );\n  const isControlled = checkedProp !== undefined;\n\n  const syncUncontrolledCheckedStateOnClick = React.useCallback(\n    (e: React.MouseEvent<HTMLInputElement>) => {\n      if (isControlled) {\n        return;\n      }\n\n      const switchTarget = e.target as HTMLInputElement;\n      setLocalUncontrolledChecked(switchTarget.checked);\n    },\n    [isControlled],\n  );\n\n  const inputProps: VisuallyHiddenProps<HTMLInputElement> = {\n    ...restProps,\n    Component: 'input',\n    getRootRef: getRef,\n    type: 'checkbox',\n    role: 'switch',\n    disabled: disabled,\n    onBlur: onBlurProp,\n    onFocus: onFocusProp,\n    onClick: callMultiple(syncUncontrolledCheckedStateOnClick, onClick),\n  };\n\n  if (isControlled) {\n    inputProps.checked = checkedProp;\n    inputProps['aria-checked'] = checkedProp ? 'true' : 'false';\n  } else {\n    inputProps['aria-checked'] = localUncontrolledChecked ? 'true' : 'false';\n  }\n\n  return (\n    <label\n      className={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' ? styles.ios : styles.default,\n        disabled && styles.disabled,\n        focusVisibleClassNames,\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n    >\n      <VisuallyHidden\n        {...inputProps}\n        className={styles.inputNative}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n      />\n      <span aria-hidden className={styles.inputFake}>\n        <span className={styles.track} />\n        <span\n          aria-hidden\n          className={classNames(\n            styles.handle,\n            platform !== 'ios' && !disabled && styles.handleWithRipple,\n          )}\n        />\n      </span>\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","useFocusVisibleClassName","usePlatform","callMultiple","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","Switch","style","className","getRootRef","getRef","checked","checkedProp","disabled","onBlur","onBlurProp","onFocus","onFocusProp","onClick","restProps","platform","sizeY","focusVisible","focusVisibleClassNames","mode","handleBlur","handleFocus","localUncontrolledChecked","setLocalUncontrolledChecked","useState","Boolean","defaultChecked","isControlled","undefined","syncUncontrolledCheckedStateOnClick","useCallback","e","switchTarget","target","inputProps","Component","type","role","label","host","ios","default","ref","inputNative","span","aria-hidden","inputFake","track","handle","handleWithRipple"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AAEtD,SAASC,cAAc,QAAkC,sCAAmC;AAC5F,OAAOC,YAAY,sBAAsB;AAEzC,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAOA;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,SAASC,WAAW,EACpBC,QAAQ,EACRC,QAAQC,UAAU,EAClBC,SAASC,WAAW,EACpBC,OAAO,EACP,GAAGC,WACS;IACZ,MAAMC,WAAWvB;IACjB,MAAM,EAAEwB,QAAQ,MAAM,EAAE,GAAG3B;IAC3B,MAAM,EAAE4B,YAAY,EAAER,MAAM,EAAEE,OAAO,EAAE,GAAGrB;IAC1C,MAAM4B,yBAAyB3B,yBAAyB;QAAE0B;QAAcE,MAAM;IAAU;IACxF,MAAMC,aAAa3B,aAAagB,QAAQC;IACxC,MAAMW,cAAc5B,aAAakB,SAASC;IAE1C,MAAM,CAACU,0BAA0BC,4BAA4B,GAAGpC,MAAMqC,QAAQ,CAC5EC,QAAQX,UAAUY,cAAc;IAElC,MAAMC,eAAepB,gBAAgBqB;IAErC,MAAMC,sCAAsC1C,MAAM2C,WAAW,CAC3D,CAACC;QACC,IAAIJ,cAAc;YAChB;QACF;QAEA,MAAMK,eAAeD,EAAEE,MAAM;QAC7BV,4BAA4BS,aAAa1B,OAAO;IAClD,GACA;QAACqB;KAAa;IAGhB,MAAMO,aAAoD;QACxD,GAAGpB,SAAS;QACZqB,WAAW;QACX/B,YAAYC;QACZ+B,MAAM;QACNC,MAAM;QACN7B,UAAUA;QACVC,QAAQC;QACRC,SAASC;QACTC,SAASpB,aAAaoC,qCAAqChB;IAC7D;IAEA,IAAIc,cAAc;QAChBO,WAAW5B,OAAO,GAAGC;QACrB2B,UAAU,CAAC,eAAe,GAAG3B,cAAc,SAAS;IACtD,OAAO;QACL2B,UAAU,CAAC,eAAe,GAAGZ,2BAA2B,SAAS;IACnE;IAEA,qBACE,MAACgB;QACCnC,WAAWf,WACTO,OAAO4C,IAAI,EACXvB,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7CD,aAAa,QAAQpB,OAAO6C,GAAG,GAAG7C,OAAO8C,OAAO,EAChDjC,YAAYb,OAAOa,QAAQ,EAC3BU,wBACAf;QAEFD,OAAOA;QACPwC,KAAKtC;;0BAEL,KAACV;gBACE,GAAGwC,UAAU;gBACd/B,WAAWR,OAAOgD,WAAW;gBAC7BlC,QAAQW;gBACRT,SAASU;;0BAEX,MAACuB;gBAAKC,aAAW;gBAAC1C,WAAWR,OAAOmD,SAAS;;kCAC3C,KAACF;wBAAKzC,WAAWR,OAAOoD,KAAK;;kCAC7B,KAACH;wBACCC,aAAW;wBACX1C,WAAWf,WACTO,OAAOqD,MAAM,EACbjC,aAAa,SAAS,CAACP,YAAYb,OAAOsD,gBAAgB;;;;;;AAMtE,EAAE"}
+{"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { VisuallyHidden, type VisuallyHiddenProps } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({\n  style,\n  className,\n  getRootRef,\n  getRef,\n  checked: checkedProp,\n  disabled,\n  onBlur: onBlurProp,\n  onFocus: onFocusProp,\n  onClick,\n  ...restProps\n}: SwitchProps): React.ReactNode => {\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'outside' });\n  const handleBlur = callMultiple(onBlur, onBlurProp);\n  const handleFocus = callMultiple(onFocus, onFocusProp);\n\n  const [localUncontrolledChecked, setLocalUncontrolledChecked] = React.useState(\n    Boolean(restProps.defaultChecked),\n  );\n  const isControlled = checkedProp !== undefined;\n\n  const syncUncontrolledCheckedStateOnClick = React.useCallback(\n    (e: React.MouseEvent<HTMLInputElement>) => {\n      if (isControlled) {\n        return;\n      }\n\n      const switchTarget = e.target as HTMLInputElement;\n      setLocalUncontrolledChecked(switchTarget.checked);\n    },\n    [isControlled],\n  );\n\n  const inputProps: VisuallyHiddenProps<HTMLInputElement> = {\n    ...restProps,\n    Component: 'input',\n    getRootRef: getRef,\n    type: 'checkbox',\n    role: 'switch',\n    disabled: disabled,\n    onBlur: onBlurProp,\n    onFocus: onFocusProp,\n    onClick: callMultiple(syncUncontrolledCheckedStateOnClick, onClick),\n  };\n\n  if (isControlled) {\n    inputProps.checked = checkedProp;\n    inputProps['aria-checked'] = checkedProp ? 'true' : 'false';\n  } else {\n    inputProps['aria-checked'] = localUncontrolledChecked ? 'true' : 'false';\n  }\n\n  return (\n    <label\n      className={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' ? styles.ios : styles.default,\n        disabled && styles.disabled,\n        isRtl && styles.rtl,\n        focusVisibleClassNames,\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n    >\n      <VisuallyHidden\n        {...inputProps}\n        className={styles.inputNative}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n      />\n      <span aria-hidden className={styles.inputFake}>\n        <span className={styles.track} />\n        <span\n          aria-hidden\n          className={classNames(\n            styles.handle,\n            platform !== 'ios' && !disabled && styles.handleWithRipple,\n          )}\n        />\n      </span>\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useConfigDirection","useFocusVisible","useFocusVisibleClassName","usePlatform","callMultiple","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","Switch","style","className","getRootRef","getRef","checked","checkedProp","disabled","onBlur","onBlurProp","onFocus","onFocusProp","onClick","restProps","direction","isRtl","platform","sizeY","focusVisible","focusVisibleClassNames","mode","handleBlur","handleFocus","localUncontrolledChecked","setLocalUncontrolledChecked","useState","Boolean","defaultChecked","isControlled","undefined","syncUncontrolledCheckedStateOnClick","useCallback","e","switchTarget","target","inputProps","Component","type","role","label","host","ios","default","rtl","ref","inputNative","span","aria-hidden","inputFake","track","handle","handleWithRipple"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AAEtD,SAASC,cAAc,QAAkC,sCAAmC;AAC5F,OAAOC,YAAY,sBAAsB;AAEzC,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAOA;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,SAASC,WAAW,EACpBC,QAAQ,EACRC,QAAQC,UAAU,EAClBC,SAASC,WAAW,EACpBC,OAAO,EACP,GAAGC,WACS;IACZ,MAAMC,YAAY1B;IAClB,MAAM2B,QAAQD,cAAc;IAC5B,MAAME,WAAWzB;IACjB,MAAM,EAAE0B,QAAQ,MAAM,EAAE,GAAG9B;IAC3B,MAAM,EAAE+B,YAAY,EAAEV,MAAM,EAAEE,OAAO,EAAE,GAAGrB;IAC1C,MAAM8B,yBAAyB7B,yBAAyB;QAAE4B;QAAcE,MAAM;IAAU;IACxF,MAAMC,aAAa7B,aAAagB,QAAQC;IACxC,MAAMa,cAAc9B,aAAakB,SAASC;IAE1C,MAAM,CAACY,0BAA0BC,4BAA4B,GAAGvC,MAAMwC,QAAQ,CAC5EC,QAAQb,UAAUc,cAAc;IAElC,MAAMC,eAAetB,gBAAgBuB;IAErC,MAAMC,sCAAsC7C,MAAM8C,WAAW,CAC3D,CAACC;QACC,IAAIJ,cAAc;YAChB;QACF;QAEA,MAAMK,eAAeD,EAAEE,MAAM;QAC7BV,4BAA4BS,aAAa5B,OAAO;IAClD,GACA;QAACuB;KAAa;IAGhB,MAAMO,aAAoD;QACxD,GAAGtB,SAAS;QACZuB,WAAW;QACXjC,YAAYC;QACZiC,MAAM;QACNC,MAAM;QACN/B,UAAUA;QACVC,QAAQC;QACRC,SAASC;QACTC,SAASpB,aAAasC,qCAAqClB;IAC7D;IAEA,IAAIgB,cAAc;QAChBO,WAAW9B,OAAO,GAAGC;QACrB6B,UAAU,CAAC,eAAe,GAAG7B,cAAc,SAAS;IACtD,OAAO;QACL6B,UAAU,CAAC,eAAe,GAAGZ,2BAA2B,SAAS;IACnE;IAEA,qBACE,MAACgB;QACCrC,WAAWhB,WACTQ,OAAO8C,IAAI,EACXvB,UAAU,aAAatB,eAAe,CAACsB,MAAM,EAC7CD,aAAa,QAAQtB,OAAO+C,GAAG,GAAG/C,OAAOgD,OAAO,EAChDnC,YAAYb,OAAOa,QAAQ,EAC3BQ,SAASrB,OAAOiD,GAAG,EACnBxB,wBACAjB;QAEFD,OAAOA;QACP2C,KAAKzC;;0BAEL,KAACV;gBACE,GAAG0C,UAAU;gBACdjC,WAAWR,OAAOmD,WAAW;gBAC7BrC,QAAQa;gBACRX,SAASY;;0BAEX,MAACwB;gBAAKC,aAAW;gBAAC7C,WAAWR,OAAOsD,SAAS;;kCAC3C,KAACF;wBAAK5C,WAAWR,OAAOuD,KAAK;;kCAC7B,KAACH;wBACCC,aAAW;wBACX7C,WAAWhB,WACTQ,OAAOwD,MAAM,EACblC,aAAa,SAAS,CAACT,YAAYb,OAAOyD,gBAAgB;;;;;;AAMtE,EAAE"}