@vkontakte/vkui 6.1.2 → 6.2.0

package/dist/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","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":";;;;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,gBAAgB,QAAQ,uCAAuC;AACxE,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;AAGjB,MAAMC,sBAAsB;IAC1B,WAAW;IACX,KAAK;IACL,SAAS;IACT,cAAc;IACd,QAAQ;IACR,YAAY;AACd;AAEA,MAAMC,2BAA2B;IAC/BC,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,IAAI;IACJC,OAAO;IACPC,MAAM;AACR;AAgCA;;CAEC,GACD,OAAO,MAAMC,WAAW;QAAC,EACvBC,YAAY,cAAc,EAC1BC,QAAQ,EACRC,MAAM,EACNC,MAAM,EACNC,MAAM,EACNC,KAAK,EACLC,WAAW,IAAI,EACfC,gBAAgBjC,IAAI,EACpBkC,OAAO,EACPC,OAAO,SAAS,EAChBC,QAAQ,EACRC,OAAO,EACPC,KAAK,EACLC,UAAU,EAEI,WADXC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,kBAAkBnC;IACxB,MAAMoC,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,aAAasC;IAC7B,MAAMU,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,UAAUxB;IACZ;IAGF,MAAMyB,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,CAACvB,KAAK,CAAC6B,cAAc,CAAC,uCACrCnB,QAAQa,OAAO,CAACvB,KAAK,CAAC8B,WAAW,CAAC,qCAAqC,CAAC,EAAEJ,EAAE,EAAE,CAAC;gBACnFC,MAAM,OACFjB,QAAQa,OAAO,CAACvB,KAAK,CAAC6B,cAAc,CAAC,uCACrCnB,QAAQa,OAAO,CAACvB,KAAK,CAAC8B,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,IAAIxC,QAAQ;YACVI,cAAcsC;QAChB;IACF;IAEA,MAAMC,mBAAmB,CAACD;QACxBnB,qBAAqBS,OAAO,GAAG,IAAIrD;QACnC4C,qBAAqBS,OAAO,CAACY,cAAc,CAACF,MAAMG,WAAW;QAC7DrB,aAAaQ,OAAO,GAAGhD,oBACrBmC,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,GAAG/C,kBACrBY,WACA2B,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,IAC5B7C,0BACEU,WACA2B,aAAaQ,OAAO,EACpBtD,8BAA8ByC,QAAQa,OAAO,EAAGX,MAAMW,OAAO,GAC7DT,qBAAqBS,OAAO,CAACsB,QAAQ,KAEvC;YACAd;QACF;QAEAtB,WAAW;IACb;IAEAtC,0BACE,SAAS2E;QACP,IAAI,CAACzC,QAAQM,WAAWH,WAAWU,mBAAmB,WAAW;YAC/D;QACF;QACAD,kBAAkBM,OAAO,GAAGwB,WAAWhB,OAAOrC;QAC9C,OAAO,SAASsD;YACdC,aAAahC,kBAAkBM,OAAO;QACxC;IACF,GACA;QAAClB;QAAMM;QAASH;QAASU;QAAgBa;QAAOrC;KAAS;IAG3DvB,0BACE,SAAS+E;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,qBACE,KAAC1D,uDACK6B;QACJkD,MAAK;QACLC,eAAe5F,2BAEb2C,aAAa,8BACbI,oCACA7B,mBAAmB,CAACS,UAAU,EAC9BR,wBAAwB,CAACsC,eAAe;QAE1ClB,OAAOvB,uBAAuBW,WAAWY,OAAOD;QAChDE,YAAYS;kBAEZ,cAAA,KAAC4C;YACCF,MAAK;YACLG,SAAS;YACTC,KAAK5C;YACL,SAAS;YACT6C,cAActD,kBAAkBuD,YAAYxB;YAC5CyB,aAAaxD,kBAAkBuD,YAAYnB;YAC3CqB,YAAYzD,kBAAkBuD,YAAYd;YAC1C,UAAU;YACViB,aAAa1D,kBAAkBuD,YAAYxB;YAC3C4B,aAAa3D,kBAAkBuD,YAAYnB;YAC3CwB,WAAW5D,kBAAkBuD,YAAYd;YACzCoB,cAAc7D,kBAAkBuD,YAAYd;WACxCzB;sBAEJ,cAAA,KAAC7C;gBACCuB,MAAMA;gBACNP,QAAQA;gBACRE,QAAQA;gBACRC,OAAOA;gBACPK,UAAUA;gBACVP,QACEA,wBACE,KAACnB;oBACC6F,OAAM;oBACNpE,MAAK;oBACLqE,YACErE,SAAS,SACL,2CAA2C,GAC3C,YACA;oBAENsE,MAAK;oBACLC,SAASpC;8BAERzC;;0BAKNF;;;;AAKX,EAAE;AAEFF,SAASb,KAAK,GAAGA"}
+{"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","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":"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"}

package/dist/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","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;AAG9D,MAAMC,eAAe;IACnBC,IAAI;IACJC,QAAQ;IACRC,UAAU;AACZ;AAEA,MAAMC,kBAAkB;IACtBH,IAAI;IACJI,OAAO;AACT;AA2CA,OAAO,SAASC,MAAM;QAAA,EACpBC,QAAQC,WAAW,EACnBC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EAEW,GATC,QAQjBC,uCARiB;QACpBR;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGpB;IAC3B,MAAMW,SAASG,SAASG,WAAW,aAAa;IAEhD,qBACE,MAAChB,uDACKkB;QACJE,eAAetB,iCAEbK,YAAY,CAACQ,eAAeD,OAAO,EACnCS,UAAU,aAAaZ,eAAe,CAACY,MAAM,EAC7CJ,SAAS;;YAGVD,wBAAU,KAACO;gBAAIC,SAAS;0BAA+BR;;0BAExD,MAACO;gBAAIC,SAAS;;kCACZ,KAACrB;wBAAUqB,SAAS;kCAAqCL;;oBACxDD,YAAY,CAACJ,wBACZ,KAACV;wBAAQoB,SAAS;kCAAyCN;;oBAG5DJ,UAAU,CAACI,0BAAY,KAACK;wBAAIC,SAAS;kCAA+BV;;;;YAGtEC,uBAAS,KAACQ;gBAAIC,SAAS;0BAA8BT;;;;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","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;AAG9D,MAAMC,eAAe;IACnBC,IAAI;IACJC,QAAQ;IACRC,UAAU;AACZ;AAEA,MAAMC,kBAAkB;IACtBH,IAAI;IACJI,OAAO;AACT;AA2CA,OAAO,SAASC,MAAM;QAAA,EACpBC,QAAQC,WAAW,EACnBC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EAEW,GATC,QAQjBC,uCARiB;QACpBR;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGpB;IAC3B,MAAMW,SAASG,SAASG,WAAW,aAAa;IAEhD,qBACE,MAAChB,uDACKkB;QACJE,eAAetB,iCAEbK,YAAY,CAACQ,eAAeD,OAAO,EACnCS,UAAU,aAAaZ,eAAe,CAACY,MAAM,EAC7CJ,SAAS;;YAGVD,wBAAU,KAACO;gBAAIC,SAAS;0BAA+BR;;0BAExD,MAACO;gBAAIC,SAAS;;kCACZ,KAACrB;wBAAUqB,SAAS;kCAAqCL;;oBACxDD,YAAY,CAACJ,wBACZ,KAACV;wBAAQoB,SAAS;kCAAyCN;;oBAG5DJ,UAAU,CAACI,0BAAY,KAACK;wBAAIC,SAAS;kCAA+BV;;;;YAGtEC,uBAAS,KAACQ;gBAAIC,SAAS;0BAA8BT;;;;AAG5D"}

package/dist/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/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/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/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,wCAAKC;gBAAOG,KAAKF;;QAC1B,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO,wCAAKD;gBAAOI,QAAQH;;IAC/B;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,wCAAKC;gBAAOG,KAAKF;;QAC1B,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO,wCAAKD;gBAAOI,QAAQH;;IAC/B;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/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","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;AAG/D,OAAO,MAAMC,gCAAgC,+BAA+B;AAE5E,OAAO,MAAMC,kBAAkB;IAC7B,KAAK;IACL,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP,EAAE;AAUF;;CAEC,GACD,OAAO,MAAMC,UAAU;QAAC,EAAEC,OAAO,GAAG,EAAEC,KAAK,EAAEC,SAAS,EAA8B,WAAzBC;QAAjCH;QAAYC;QAAOC;;IAC3C,IAAI,OAAOF,SAAS,UAAU;QAC5BE,YAAYA,YAAYP,WAAWG,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,KAACJ,uDACKO;QACJF,OAAOA;QACPC,WAAWA;QACXE,aAAa;;AAGnB,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","CUSTOM_CSS_TOKEN_FOR_USER_GAP","sizesClassNames","Spacing","size","style","className","restProps","baseClassName"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,OAAO,MAAMC,gCAAgC,+BAA+B;AAE5E,OAAO,MAAMC,kBAAkB;IAC7B,KAAK;IACL,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP,EAAE;AAUF;;CAEC,GACD,OAAO,MAAMC,UAAU;QAAC,EAAEC,OAAO,GAAG,EAAEC,KAAK,EAAEC,SAAS,EAA8B,WAAzBC;QAAjCH;QAAYC;QAAOC;;IAC3C,IAAI,OAAOF,SAAS,UAAU;QAC5BE,YAAYA,YAAYP,WAAWG,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,KAACJ,uDACKO;QACJF,OAAOA;QACPC,WAAWA;QACXE,aAAa;;AAGnB,EAAE"}

package/dist/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/components/Spinner/Spinner.js

@@ -5,28 +5,57 @@ 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';
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */ export const Spinner = /*#__PURE__*/ React.memo((_param)=>{
-    var { size = 'regular', children = 'Загружается...', disableAnimation } = _param, restProps = _object_without_properties(_param, [
+    var { size = 'regular', children = 'Загружается...', disableAnimation = false } = _param, restProps = _object_without_properties(_param, [
         "size",
         "children",
         "disableAnimation"
     ]);
+    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, _object_spread_props(_object_spread({
         Component: "span",
         role: "status"
@@ -34,17 +63,7 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
         baseClassName: "vkuiSpinner",
         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

package/dist/components/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n  disableAnimation?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    children = 'Загружается...',\n    disableAnimation,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    const center = {\n      small: 8,\n      regular: 12,\n      medium: 16,\n      large: 22,\n    }[size];\n\n    return (\n      <RootComponent\n        Component=\"span\"\n        role=\"status\"\n        {...restProps}\n        baseClassName={styles['Spinner']}\n      >\n        <SpinnerIcon>\n          {!disableAnimation && (\n            // TODO [a11y]: use reduced motion hook?\n            //              https://github.com/VKCOM/VKUI/pull/4673\n            <animateTransform\n              attributeName=\"transform\"\n              attributeType=\"XML\"\n              type=\"rotate\"\n              from={`0 ${center} ${center}`}\n              to={`360 ${center} ${center}`}\n              dur=\"0.7s\"\n              repeatCount=\"indefinite\"\n            />\n          )}\n        </SpinnerIcon>\n        {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n      </RootComponent>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","hasReactNode","RootComponent","VisuallyHidden","Spinner","memo","size","children","disableAnimation","restProps","SpinnerIcon","small","regular","medium","large","center","Component","role","baseClassName","animateTransform","attributeName","attributeType","type","from","to","dur","repeatCount","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,cAAc,QAAQ,mCAAmC;AAQlE;;CAEC,GACD,OAAO,MAAMC,wBAAUR,MAAMS,IAAI,CAC/B;QAAC,EACCC,OAAO,SAAS,EAChBC,WAAW,gBAAgB,EAC3BC,gBAAgB,EAEH,WADVC;QAHHH;QACAC;QACAC;;IAGA,MAAME,cAAc;QAClBC,OAAOd;QACPe,SAASd;QACTe,QAAQd;QACRe,OAAOd;IACT,CAAC,CAACM,KAAK;IAEP,MAAMS,SAAS;QACbJ,OAAO;QACPC,SAAS;QACTC,QAAQ;QACRC,OAAO;IACT,CAAC,CAACR,KAAK;IAEP,qBACE,MAACJ;QACCc,WAAU;QACVC,MAAK;OACDR;QACJS,aAAa;;0BAEb,KAACR;0BACE,CAACF,oBACA,wCAAwC;gBACxC,uDAAuD;8BACvD,KAACW;oBACCC,eAAc;oBACdC,eAAc;oBACdC,MAAK;oBACLC,MAAM,CAAC,EAAE,EAAER,OAAO,CAAC,EAAEA,OAAO,CAAC;oBAC7BS,IAAI,CAAC,IAAI,EAAET,OAAO,CAAC,EAAEA,OAAO,CAAC;oBAC7BU,KAAI;oBACJC,aAAY;;;YAIjBzB,aAAaM,2BAAa,KAACJ;0BAAgBI;;;;AAGlD,GACA;AAEFH,QAAQuB,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { useReducedMotion } from '../../lib/animation';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n  disableAnimation?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    children = 'Загружается...',\n    disableAnimation = false,\n    ...restProps\n  }: SpinnerProps) => {\n    const isReducedMotion = useReducedMotion();\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n    let svgAnimateElement: React.ReactNode = null;\n\n    const [isReadyForSetSVGAnimateElement, setIsReadyForSetSVGAnimateElement] = React.useState(\n      disableAnimation ? true : false,\n    );\n\n    React.useEffect(function waitReactHydrationBeforeSetSVGAnimateElement() {\n      setIsReadyForSetSVGAnimateElement(true);\n    }, []);\n\n    if (isReadyForSetSVGAnimateElement && !disableAnimation) {\n      if (isReducedMotion) {\n        svgAnimateElement = (\n          <animate\n            attributeName=\"opacity\"\n            keyTimes=\"0; 0.5; 1\"\n            values=\"1; 0.1; 1\"\n            begin=\"0s\"\n            dur=\"2s\"\n            repeatCount=\"indefinite\"\n          />\n        );\n      } else {\n        const center = { small: 8, regular: 12, medium: 16, large: 22 }[size];\n        svgAnimateElement = (\n          <animateTransform\n            attributeType=\"XML\"\n            attributeName=\"transform\"\n            type=\"rotate\"\n            from={`0 ${center} ${center}`}\n            to={`360 ${center} ${center}`}\n            dur=\"0.7s\"\n            repeatCount=\"indefinite\"\n          />\n        );\n      }\n    }\n\n    return (\n      <RootComponent\n        Component=\"span\"\n        role=\"status\"\n        {...restProps}\n        baseClassName={styles['Spinner']}\n      >\n        <SpinnerIcon>{svgAnimateElement}</SpinnerIcon>\n        {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n      </RootComponent>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","hasReactNode","useReducedMotion","RootComponent","VisuallyHidden","Spinner","memo","size","children","disableAnimation","restProps","isReducedMotion","SpinnerIcon","small","regular","medium","large","svgAnimateElement","isReadyForSetSVGAnimateElement","setIsReadyForSetSVGAnimateElement","useState","useEffect","waitReactHydrationBeforeSetSVGAnimateElement","animate","attributeName","keyTimes","values","begin","dur","repeatCount","center","animateTransform","attributeType","type","from","to","Component","role","baseClassName","displayName"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,gBAAgB,QAAQ,sBAAsB;AAEvD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,cAAc,QAAQ,mCAAmC;AAQlE;;CAEC,GACD,OAAO,MAAMC,wBAAUT,MAAMU,IAAI,CAC/B;QAAC,EACCC,OAAO,SAAS,EAChBC,WAAW,gBAAgB,EAC3BC,mBAAmB,KAAK,EAEX,WADVC;QAHHH;QACAC;QACAC;;IAGA,MAAME,kBAAkBT;IACxB,MAAMU,cAAc;QAClBC,OAAOhB;QACPiB,SAAShB;QACTiB,QAAQhB;QACRiB,OAAOhB;IACT,CAAC,CAACO,KAAK;IACP,IAAIU,oBAAqC;IAEzC,MAAM,CAACC,gCAAgCC,kCAAkC,GAAGvB,MAAMwB,QAAQ,CACxFX,mBAAmB,OAAO;IAG5Bb,MAAMyB,SAAS,CAAC,SAASC;QACvBH,kCAAkC;IACpC,GAAG,EAAE;IAEL,IAAID,kCAAkC,CAACT,kBAAkB;QACvD,IAAIE,iBAAiB;YACnBM,kCACE,KAACM;gBACCC,eAAc;gBACdC,UAAS;gBACTC,QAAO;gBACPC,OAAM;gBACNC,KAAI;gBACJC,aAAY;;QAGlB,OAAO;YACL,MAAMC,SAAS;gBAAEjB,OAAO;gBAAGC,SAAS;gBAAIC,QAAQ;gBAAIC,OAAO;YAAG,CAAC,CAACT,KAAK;YACrEU,kCACE,KAACc;gBACCC,eAAc;gBACdR,eAAc;gBACdS,MAAK;gBACLC,MAAM,CAAC,EAAE,EAAEJ,OAAO,CAAC,EAAEA,OAAO,CAAC;gBAC7BK,IAAI,CAAC,IAAI,EAAEL,OAAO,CAAC,EAAEA,OAAO,CAAC;gBAC7BF,KAAI;gBACJC,aAAY;;QAGlB;IACF;IAEA,qBACE,MAAC1B;QACCiC,WAAU;QACVC,MAAK;OACD3B;QACJ4B,aAAa;;0BAEb,KAAC1B;0BAAaK;;YACbhB,aAAaO,2BAAa,KAACJ;0BAAgBI;;;;AAGlD,GACA;AAEFH,QAAQkC,WAAW,GAAG"}

package/dist/components/SplitCol/SplitCol.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    getRootRef,\n    ...restProps\n  } = props;\n  const baseRef = useExternRef(getRootRef);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      getRootRef={baseRef}\n      baseClassName={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useMediaQueries","useObjectMemo","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","RootComponent","SplitColContext","breakpointClassNames","none","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","SplitCol","props","children","width","maxWidth","minWidth","fixed","style","autoSpaced","stretchedOnMobile","getRootRef","restProps","baseRef","contextValue","colRef","baseClassName","Provider","value","div","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,uBAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAE/F,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,eAAe,QAAQ,oBAAoB;AAGpD,MAAMC,uBAAuB;IAC3BC,MAAMZ,2CAA+C;IACrDa,WAAW;IACXC,eAAe;IACfC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGjB;IACtB,MAAM,CAACkB,SAASC,WAAW,GAAGrB,MAAMsB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAepB;IAErBJ,MAAMyB,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYb,UAAUqB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaT,eAAe,CAACc,OAAO;QACvED;QAEApB,0BAA0BgB,aAAaT,eAAe,EAAEa;QACxD,OAAO;YACLnB,6BAA6Be,aAAaT,eAAe,EAAEa;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AAqBA;;CAEC,GACD,OAAO,MAAMU,WAAW,CAACC;IACvB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRf,SAASF,WAAW,EACpBkB,KAAK,EACLC,KAAK,EACLC,UAAU,EACVC,iBAAiB,EACjBC,UAAU,EAEX,GAAGT,OADCU,uCACDV;QAXFC;QACAC;QACAC;QACAC;QACAf;QACAgB;QACAC;QACAC;QACAC;QACAC;;IAGF,MAAME,UAAUvC,aAAaqC;IAC7B,MAAM,EAAErB,SAAS,EAAE,GAAGjB;IACtB,MAAMkB,UAAUH,qBAAqBC;IAErC,MAAMyB,eAAetC,cAAc;QACjCuC,QAAQF;QACRtB;IACF;IAEA,qBACE,KAACV,uDACK+B;QACJJ,OAAO,wCACFA;YACHJ,OAAOA;YACPC,UAAUA;YACVC,UAAUA;;QAEZK,YAAYE;QACZG,eAAe5C,2BAEbM,qBAAqBK,sBAAsBO,YAC3CmB,cACErC,wCAA4C,sCAC9CmC,gCACAG;kBAGF,cAAA,KAAC5B,gBAAgBmC,QAAQ;YAACC,OAAOJ;sBAC9BP,sBAAQ,KAACY;gBAAIC,SAAS;0BAAmCjB;iBAAkBA;;;AAIpF,EAAE"}
+{"version":3,"sources":["../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    getRootRef,\n    ...restProps\n  } = props;\n  const baseRef = useExternRef(getRootRef);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      getRootRef={baseRef}\n      baseClassName={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useMediaQueries","useObjectMemo","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","RootComponent","SplitColContext","breakpointClassNames","none","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","SplitCol","props","children","width","maxWidth","minWidth","fixed","style","autoSpaced","stretchedOnMobile","getRootRef","restProps","baseRef","contextValue","colRef","baseClassName","Provider","value","div","className"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,uBAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAE/F,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,eAAe,QAAQ,oBAAoB;AAGpD,MAAMC,uBAAuB;IAC3BC,MAAMZ,2CAA+C;IACrDa,WAAW;IACXC,eAAe;IACfC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGjB;IACtB,MAAM,CAACkB,SAASC,WAAW,GAAGrB,MAAMsB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAepB;IAErBJ,MAAMyB,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYb,UAAUqB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaT,eAAe,CAACc,OAAO;QACvED;QAEApB,0BAA0BgB,aAAaT,eAAe,EAAEa;QACxD,OAAO;YACLnB,6BAA6Be,aAAaT,eAAe,EAAEa;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AAqBA;;CAEC,GACD,OAAO,MAAMU,WAAW,CAACC;IACvB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRf,SAASF,WAAW,EACpBkB,KAAK,EACLC,KAAK,EACLC,UAAU,EACVC,iBAAiB,EACjBC,UAAU,EAEX,GAAGT,OADCU,uCACDV;QAXFC;QACAC;QACAC;QACAC;QACAf;QACAgB;QACAC;QACAC;QACAC;QACAC;;IAGF,MAAME,UAAUvC,aAAaqC;IAC7B,MAAM,EAAErB,SAAS,EAAE,GAAGjB;IACtB,MAAMkB,UAAUH,qBAAqBC;IAErC,MAAMyB,eAAetC,cAAc;QACjCuC,QAAQF;QACRtB;IACF;IAEA,qBACE,KAACV,uDACK+B;QACJJ,OAAO,wCACFA;YACHJ,OAAOA;YACPC,UAAUA;YACVC,UAAUA;;QAEZK,YAAYE;QACZG,eAAe5C,2BAEbM,qBAAqBK,sBAAsBO,YAC3CmB,cACErC,wCAA4C,sCAC9CmC,gCACAG;kBAGF,cAAA,KAAC5B,gBAAgBmC,QAAQ;YAACC,OAAOJ;sBAC9BP,sBAAQ,KAACY;gBAAIC,SAAS;0BAAmCjB;iBAAkBA;;;AAIpF,EAAE"}

package/dist/components/SplitCol/SplitColContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitCol/SplitColContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n"],"names":["React","SplitColContext","createContext","colRef","animate","useSplitCol","useContext"],"rangeMappings":";;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,OAAO,MAAMC,gCAAkBD,MAAME,aAAa,CAAuB;IACvEC,QAAQ;IACRC,SAAS;AACX,GAAG;AAEH,OAAO,MAAMC,cAAc,IAAML,MAAMM,UAAU,CAACL,iBAAiB"}
+{"version":3,"sources":["../../../src/components/SplitCol/SplitColContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n"],"names":["React","SplitColContext","createContext","colRef","animate","useSplitCol","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,OAAO,MAAMC,gCAAkBD,MAAME,aAAa,CAAuB;IACvEC,QAAQ;IACRC,SAAS;AACX,GAAG;AAEH,OAAO,MAAMC,cAAc,IAAML,MAAMM,UAAU,CAACL,iBAAiB"}

package/dist/components/SplitLayout/SplitLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  center,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === 'ios' && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          center && styles['SplitLayout__inner--center'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["React","classNames","usePlatform","PopoutRoot","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","center","restProps","platform","div","ref"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,UAAU,QAAQ,2BAA2B;AAqBtD;;CAEC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EAEW,WADdC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWZ;IAEjB,qBACE,MAACC;QACCQ,WAAWV,8BAETa,aAAa;QAEfT,QAAQA;QACRC,OAAOA;QACPG,YAAYA;;YAEXF;0BACD,KAACQ,+CACKF;gBACJG,KAAKN;gBACLC,WAAWV,qCAET,CAAC,CAACM,4CACFK,4CACAD;0BAGDH;;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  center,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === 'ios' && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          center && styles['SplitLayout__inner--center'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["React","classNames","usePlatform","PopoutRoot","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","center","restProps","platform","div","ref"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,UAAU,QAAQ,2BAA2B;AAqBtD;;CAEC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EAEW,WADdC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWZ;IAEjB,qBACE,MAACC;QACCQ,WAAWV,8BAETa,aAAa;QAEfT,QAAQA;QACRC,OAAOA;QACPG,YAAYA;;YAEXF;0BACD,KAACQ,+CACKF;gBACJG,KAAKN;gBACLC,WAAWV,qCAET,CAAC,CAACM,4CACFK,4CACAD;0BAGDH;;;;AAIT,EAAE"}

package/dist/components/SubnavigationBar/SubnavigationBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <RootComponent\n      baseClassName={mode === 'fixed' && styles['SubnavigationBar--mode-fixed']}\n      {...restProps}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <ul className={styles['SubnavigationBar__scrollIn']}>\n          {React.Children.map(children, (child, idx) =>\n            hasReactNode(child) ? (\n              <li key={idx} className={styles['SubnavigationBar__item']}>\n                {child}\n              </li>\n            ) : null,\n          )}\n        </ul>\n      </ScrollWrapper>\n    </RootComponent>\n  );\n};\n"],"names":["React","hasReactNode","HorizontalScroll","RootComponent","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps","baseClassName","className","ul","Children","map","child","idx","li"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SACEC,gBAAgB,QAGX,uCAAuC;AAC9C,SAASC,aAAa,QAAQ,iCAAiC;AAY/D,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAE/D;;CAEC,GACD,OAAO,MAAME,mBAAmB;QAAC,EAC/BC,OAAO,UAAU,EACjBC,QAAQ,EACRC,aAAa,IAAI,EACjBC,kBAAkBP,mBAAmB,EACrCQ,mBAAmBN,oBAAoB,EACvCO,uBAAuB,EAED,WADnBC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAIE;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIR,SAAS,SAAS;QACpBO,gBAAgB;IAClB,OAAO;QACLA,gBAAgBb;QAChBc,qBAAqB;YACnBN;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,KAACV;QACCc,eAAeT,SAAS;OACpBM;kBAEJ,cAAA,KAACC;YAAcG,SAAS;WAAsCF;sBAC5D,cAAA,KAACG;gBAAGD,SAAS;0BACVlB,MAAMoB,QAAQ,CAACC,GAAG,CAACZ,UAAU,CAACa,OAAOC,MACpCtB,aAAaqB,uBACX,KAACE;wBAAaN,SAAS;kCACpBI;uBADMC,OAGP;;;;AAMhB,EAAE"}
+{"version":3,"sources":["../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <RootComponent\n      baseClassName={mode === 'fixed' && styles['SubnavigationBar--mode-fixed']}\n      {...restProps}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <ul className={styles['SubnavigationBar__scrollIn']}>\n          {React.Children.map(children, (child, idx) =>\n            hasReactNode(child) ? (\n              <li key={idx} className={styles['SubnavigationBar__item']}>\n                {child}\n              </li>\n            ) : null,\n          )}\n        </ul>\n      </ScrollWrapper>\n    </RootComponent>\n  );\n};\n"],"names":["React","hasReactNode","HorizontalScroll","RootComponent","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps","baseClassName","className","ul","Children","map","child","idx","li"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SACEC,gBAAgB,QAGX,uCAAuC;AAC9C,SAASC,aAAa,QAAQ,iCAAiC;AAY/D,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAE/D;;CAEC,GACD,OAAO,MAAME,mBAAmB;QAAC,EAC/BC,OAAO,UAAU,EACjBC,QAAQ,EACRC,aAAa,IAAI,EACjBC,kBAAkBP,mBAAmB,EACrCQ,mBAAmBN,oBAAoB,EACvCO,uBAAuB,EAED,WADnBC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAIE;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIR,SAAS,SAAS;QACpBO,gBAAgB;IAClB,OAAO;QACLA,gBAAgBb;QAChBc,qBAAqB;YACnBN;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,KAACV;QACCc,eAAeT,SAAS;OACpBM;kBAEJ,cAAA,KAACC;YAAcG,SAAS;WAAsCF;sBAC5D,cAAA,KAACG;gBAAGD,SAAS;0BACVlB,MAAMoB,QAAQ,CAACC,GAAG,CAACZ,UAAU,CAACa,OAAOC,MACpCtB,aAAaqB,uBACX,KAACE;wBAAaN,SAAS;kCACpBI;uBADMC,OAGP;;;;AAMhB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, 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['SubnavigationButton--appearance-accent'],\n  neutral: styles['SubnavigationButton--appearance-neutral'],\n};\n\nconst modeStyles = {\n  primary: styles['SubnavigationButton--mode-primary'],\n  outline: styles['SubnavigationButton--mode-outline'],\n  tertiary: styles['SubnavigationButton--mode-tertiary'],\n};\n\nconst sizeStyles = {\n  s: styles['SubnavigationButton--size-s'],\n  m: styles['SubnavigationButton--size-m'],\n  l: styles['SubnavigationButton--size-l'],\n};\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  ['compact']: styles['SubnavigationButton--sizeY-compact'],\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 mode=\"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  expandable?: 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  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","Tappable","Caption","Subhead","appearanceStyles","accent","neutral","modeStyles","primary","outline","tertiary","sizeStyles","s","m","l","sizeYClassNames","none","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","expandable","children","className","sizeY","hasActive","focusVisibleMode","span","Component"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,aAAa;IACjBC,OAAO;IACPC,OAAO;IACPC,QAAQ;AACV;AAEA,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AA6BA,MAAMC,gCAAgC;QAAC,EACrCC,SAAS,EAE0B,WADhCC;QADHD;;IAGA,IAAIA,cAAc,KAAK;QACrB,qBAAO,KAACf,4BAAYgB;IACtB;IAEA,qBAAO,KAACjB;QAAQkB,OAAOF,cAAc,MAAM,MAAM;OAASC;AAC5D;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB;QAAC,EAClCC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRP,YAAY,GAAG,EACfQ,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,SAAS,EAEgB,WADtBX;QAVHG;QACAC;QACAC;QACAC;QACAP;QACAQ;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG/B;IAE3B,qBACE,KAACC,kDACKkB;QACJa,WAAW;QACXC,kBAAiB;QACjBH,WAAW/B,sCAETY,UAAU,CAACa,KAAK,EAChBjB,UAAU,CAACe,KAAK,EAChBlB,gBAAgB,CAACmB,WAAW,EAC5BE,iDACAM,UAAU,aAAahB,eAAe,CAACgB,MAAM,EAC7CD;kBAGF,cAAA,MAACI;YAAKJ,SAAS;;gBACZJ,wBAAU,KAACQ;oBAAKJ,SAAS;8BAA0CJ;;8BACpE,KAACT;oBACCC,WAAWA;oBACXY,SAAS;oBACTK,WAAU;8BAETN;;gBAEFF,uBAAS,KAACO;oBAAKJ,SAAS;8BAAyCH;;gBACjEC,4BAAc,KAAC9B;oBAAegC,SAAS;;;;;AAIhD,EAAE"}
+{"version":3,"sources":["../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, 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['SubnavigationButton--appearance-accent'],\n  neutral: styles['SubnavigationButton--appearance-neutral'],\n};\n\nconst modeStyles = {\n  primary: styles['SubnavigationButton--mode-primary'],\n  outline: styles['SubnavigationButton--mode-outline'],\n  tertiary: styles['SubnavigationButton--mode-tertiary'],\n};\n\nconst sizeStyles = {\n  s: styles['SubnavigationButton--size-s'],\n  m: styles['SubnavigationButton--size-m'],\n  l: styles['SubnavigationButton--size-l'],\n};\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  ['compact']: styles['SubnavigationButton--sizeY-compact'],\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 mode=\"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  expandable?: 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  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","Tappable","Caption","Subhead","appearanceStyles","accent","neutral","modeStyles","primary","outline","tertiary","sizeStyles","s","m","l","sizeYClassNames","none","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","expandable","children","className","sizeY","hasActive","focusVisibleMode","span","Component"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,aAAa;IACjBC,OAAO;IACPC,OAAO;IACPC,QAAQ;AACV;AAEA,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AA6BA,MAAMC,gCAAgC;QAAC,EACrCC,SAAS,EAE0B,WADhCC;QADHD;;IAGA,IAAIA,cAAc,KAAK;QACrB,qBAAO,KAACf,4BAAYgB;IACtB;IAEA,qBAAO,KAACjB;QAAQkB,OAAOF,cAAc,MAAM,MAAM;OAASC;AAC5D;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB;QAAC,EAClCC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRP,YAAY,GAAG,EACfQ,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,SAAS,EAEgB,WADtBX;QAVHG;QACAC;QACAC;QACAC;QACAP;QACAQ;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG/B;IAE3B,qBACE,KAACC,kDACKkB;QACJa,WAAW;QACXC,kBAAiB;QACjBH,WAAW/B,sCAETY,UAAU,CAACa,KAAK,EAChBjB,UAAU,CAACe,KAAK,EAChBlB,gBAAgB,CAACmB,WAAW,EAC5BE,iDACAM,UAAU,aAAahB,eAAe,CAACgB,MAAM,EAC7CD;kBAGF,cAAA,MAACI;YAAKJ,SAAS;;gBACZJ,wBAAU,KAACQ;oBAAKJ,SAAS;8BAA0CJ;;8BACpE,KAACT;oBACCC,WAAWA;oBACXY,SAAS;oBACTK,WAAU;8BAETN;;gBAEFF,uBAAS,KAACO;oBAAKJ,SAAS;8BAAyCH;;gBACjEC,4BAAc,KAAC9B;oBAAegC,SAAS;;;;;AAIhD,EAAE"}

package/dist/components/Switch/Switch.d.ts

@@ -5,5 +5,5 @@ export interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
  */
-export declare const Switch: ({ style, className, getRootRef, getRef, checked: checkedProp, ...restProps }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Switch: ({ style, className, getRootRef, getRef, checked: checkedProp, disabled, onBlur: onBlurProp, onFocus: onFocusProp, onClick, ...restProps }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Switch.d.ts.map

package/dist/components/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AASjD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC,EAC5B,MAAM,CAAC,gBAAgB,CAAC;CAAG;AAE/B;;GAEG;AACH,eAAO,MAAM,MAAM,iFAOhB,WAAW,4CAqDb,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AASjD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC,EAC5B,MAAM,CAAC,gBAAgB,CAAC;CAAG;AAE/B;;GAEG;AACH,eAAO,MAAM,MAAM,8IAWhB,WAAW,4CA2Eb,CAAC"}

package/dist/components/Switch/Switch.js

@@ -12,17 +12,21 @@ import { callMultiple } from '../../lib/callMultiple';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 const sizeYClassNames = {
     none: "vkuiSwitch--sizeY-none",
-    ['compact']: "vkuiSwitch--sizeY-compact"
+    compact: "vkuiSwitch--sizeY-compact"
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
  */ export const Switch = (_param)=>{
-    var { style, className, getRootRef, getRef, checked: checkedProp } = _param, restProps = _object_without_properties(_param, [
+    var { style, className, getRootRef, getRef, checked: checkedProp, disabled, onBlur: onBlurProp, onFocus: onFocusProp, onClick } = _param, restProps = _object_without_properties(_param, [
         "style",
         "className",
         "getRootRef",
         "getRef",
-        "checked"
+        "checked",
+        "disabled",
+        "onBlur",
+        "onFocus",
+        "onClick"
     ]);
     const platform = usePlatform();
     const { sizeY = 'none' } = useAdaptivity();
@@ -31,6 +35,8 @@ const sizeYClassNames = {
         focusVisible,
         mode: 'outside'
     });
+    const handleBlur = callMultiple(onBlur, onBlurProp);
+    const handleFocus = callMultiple(onFocus, onFocusProp);
     const [localUncontrolledChecked, setLocalUncontrolledChecked] = React.useState(Boolean(restProps.defaultChecked));
     const isControlled = checkedProp !== undefined;
     const syncUncontrolledCheckedStateOnClick = React.useCallback((e)=>{
@@ -42,28 +48,44 @@ const sizeYClassNames = {
     }, [
         isControlled
     ]);
-    const ariaCheckedState = isControlled ? checkedProp : localUncontrolledChecked;
+    const inputProps = _object_spread_props(_object_spread({}, restProps), {
+        Component: 'input',
+        getRootRef: getRef,
+        type: 'checkbox',
+        role: 'switch',
+        disabled: disabled,
+        onBlur: onBlurProp,
+        onFocus: onFocusProp,
+        onClick: callMultiple(syncUncontrolledCheckedStateOnClick, onClick)
+    });
+    if (isControlled) {
+        inputProps.checked = checkedProp;
+        inputProps['aria-checked'] = checkedProp ? 'true' : 'false';
+    } else {
+        inputProps['aria-checked'] = localUncontrolledChecked ? 'true' : 'false';
+    }
     return /*#__PURE__*/ _jsxs("label", {
-        className: classNames("vkuiSwitch", platform === 'ios' && "vkuiSwitch--ios", sizeY !== 'regular' && sizeYClassNames[sizeY], restProps.disabled && "vkuiSwitch--disabled", focusVisibleClassNames, className),
+        className: classNames("vkuiSwitch", sizeY !== 'regular' && sizeYClassNames[sizeY], platform === 'ios' ? "vkuiSwitch--ios" : "vkuiSwitch--default", disabled && "vkuiSwitch--disabled", focusVisibleClassNames, className),
         style: style,
         ref: getRootRef,
-        onBlur: callMultiple(onBlur, restProps.onBlur),
-        onFocus: callMultiple(onFocus, restProps.onFocus),
         children: [
-            /*#__PURE__*/ _jsx(VisuallyHidden, _object_spread_props(_object_spread({}, restProps, isControlled && {
-                checked: checkedProp
-            }), {
-                Component: "input",
-                getRootRef: getRef,
-                onClick: callMultiple(syncUncontrolledCheckedStateOnClick, restProps.onClick),
-                type: "checkbox",
-                role: "switch",
-                "aria-checked": ariaCheckedState ? 'true' : 'false',
-                className: "vkuiSwitch__self"
+            /*#__PURE__*/ _jsx(VisuallyHidden, _object_spread_props(_object_spread({}, inputProps), {
+                className: "vkuiSwitch__inputNative",
+                onBlur: handleBlur,
+                onFocus: handleFocus
             })),
-            /*#__PURE__*/ _jsx("span", {
+            /*#__PURE__*/ _jsxs("span", {
                 "aria-hidden": true,
-                className: "vkuiSwitch__pseudo"
+                className: "vkuiSwitch__inputFake",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "vkuiSwitch__track"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        "aria-hidden": true,
+                        className: classNames("vkuiSwitch__handle", platform !== 'ios' && !disabled && "vkuiSwitch__handle--withRipple")
+                    })
+                ]
             })
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * 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 { HasRef, HasRootRef } from '../../types';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  ['compact']: styles['Switch--sizeY-compact'],\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  ...restProps\n}: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'outside' });\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 ariaCheckedState = isControlled ? checkedProp : localUncontrolledChecked;\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        platform === 'ios' && styles['Switch--ios'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        restProps.disabled && styles['Switch--disabled'],\n        focusVisibleClassNames,\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n      onBlur={callMultiple(onBlur, restProps.onBlur)}\n      onFocus={callMultiple(onFocus, restProps.onFocus)}\n    >\n      <VisuallyHidden\n        {...restProps}\n        {...(isControlled && { checked: checkedProp })}\n        Component=\"input\"\n        getRootRef={getRef}\n        onClick={callMultiple(syncUncontrolledCheckedStateOnClick, restProps.onClick)}\n        type=\"checkbox\"\n        role=\"switch\"\n        aria-checked={ariaCheckedState ? 'true' : 'false'}\n        className={styles['Switch__self']}\n      />\n      <span aria-hidden className={styles['Switch__pseudo']} />\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","useFocusVisibleClassName","usePlatform","callMultiple","VisuallyHidden","sizeYClassNames","none","Switch","style","className","getRootRef","getRef","checked","checkedProp","restProps","platform","sizeY","focusVisible","onBlur","onFocus","focusVisibleClassNames","mode","localUncontrolledChecked","setLocalUncontrolledChecked","useState","Boolean","defaultChecked","isControlled","undefined","syncUncontrolledCheckedStateOnClick","useCallback","e","switchTarget","target","ariaCheckedState","label","disabled","ref","Component","onClick","type","role","aria-checked","span","aria-hidden"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,YAAY,QAAQ,yBAAyB;AAEtD,SAASC,cAAc,QAAQ,mCAAmC;AAGlE,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAOA;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrBC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,SAASC,WAAW,EAER,WADTC;QALHN;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAMG,WAAWb;IACjB,MAAM,EAAEc,QAAQ,MAAM,EAAE,GAAGjB;IAC3B,MAAM,EAAEkB,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGnB;IAC1C,MAAMoB,yBAAyBnB,yBAAyB;QAAEgB;QAAcI,MAAM;IAAU;IAExF,MAAM,CAACC,0BAA0BC,4BAA4B,GAAG1B,MAAM2B,QAAQ,CAC5EC,QAAQX,UAAUY,cAAc;IAElC,MAAMC,eAAed,gBAAgBe;IAErC,MAAMC,sCAAsChC,MAAMiC,WAAW,CAC3D,CAACC;QACC,IAAIJ,cAAc;YAChB;QACF;QAEA,MAAMK,eAAeD,EAAEE,MAAM;QAC7BV,4BAA4BS,aAAapB,OAAO;IAClD,GACA;QAACe;KAAa;IAGhB,MAAMO,mBAAmBP,eAAed,cAAcS;IACtD,qBACE,MAACa;QACC1B,WAAWX,yBAETiB,aAAa,4BACbC,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CF,UAAUsB,QAAQ,4BAClBhB,wBACAX;QAEFD,OAAOA;QACP6B,KAAK3B;QACLQ,QAAQf,aAAae,QAAQJ,UAAUI,MAAM;QAC7CC,SAAShB,aAAagB,SAASL,UAAUK,OAAO;;0BAEhD,KAACf,wDACKU,WACCa,gBAAgB;gBAAEf,SAASC;YAAY;gBAC5CyB,WAAU;gBACV5B,YAAYC;gBACZ4B,SAASpC,aAAa0B,qCAAqCf,UAAUyB,OAAO;gBAC5EC,MAAK;gBACLC,MAAK;gBACLC,gBAAcR,mBAAmB,SAAS;gBAC1CzB,SAAS;;0BAEX,KAACkC;gBAAKC,aAAW;gBAACnC,SAAS;;;;AAGjC,EAAE"}
+{"version":3,"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * 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 { HasRef, HasRootRef } from '../../types';\nimport { VisuallyHidden, type VisuallyHiddenProps } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  compact: styles['Switch--sizeY-compact'],\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) => {\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['Switch'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' ? styles['Switch--ios'] : styles['Switch--default'],\n        disabled && styles['Switch--disabled'],\n        focusVisibleClassNames,\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n    >\n      <VisuallyHidden\n        {...inputProps}\n        className={styles['Switch__inputNative']}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n      />\n      <span aria-hidden className={styles['Switch__inputFake']}>\n        <span className={styles['Switch__track']} />\n        <span\n          aria-hidden\n          className={classNames(\n            styles['Switch__handle'],\n            platform !== 'ios' && !disabled && styles['Switch__handle--withRipple'],\n          )}\n        />\n      </span>\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","useFocusVisibleClassName","usePlatform","callMultiple","VisuallyHidden","sizeYClassNames","none","compact","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","ref","span","aria-hidden"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,YAAY,QAAQ,yBAAyB;AAEtD,SAASC,cAAc,QAAkC,mCAAmC;AAG5F,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAOA;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrBC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,SAASC,WAAW,EACpBC,QAAQ,EACRC,QAAQC,UAAU,EAClBC,SAASC,WAAW,EACpBC,OAAO,EAEK,WADTC;QATHZ;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAE;QACAE;;IAGA,MAAME,WAAWpB;IACjB,MAAM,EAAEqB,QAAQ,MAAM,EAAE,GAAGxB;IAC3B,MAAM,EAAEyB,YAAY,EAAER,MAAM,EAAEE,OAAO,EAAE,GAAGlB;IAC1C,MAAMyB,yBAAyBxB,yBAAyB;QAAEuB;QAAcE,MAAM;IAAU;IACxF,MAAMC,aAAaxB,aAAaa,QAAQC;IACxC,MAAMW,cAAczB,aAAae,SAASC;IAE1C,MAAM,CAACU,0BAA0BC,4BAA4B,GAAGjC,MAAMkC,QAAQ,CAC5EC,QAAQX,UAAUY,cAAc;IAElC,MAAMC,eAAepB,gBAAgBqB;IAErC,MAAMC,sCAAsCvC,MAAMwC,WAAW,CAC3D,CAACC;QACC,IAAIJ,cAAc;YAChB;QACF;QAEA,MAAMK,eAAeD,EAAEE,MAAM;QAC7BV,4BAA4BS,aAAa1B,OAAO;IAClD,GACA;QAACqB;KAAa;IAGhB,MAAMO,aAAoD,wCACrDpB;QACHqB,WAAW;QACX/B,YAAYC;QACZ+B,MAAM;QACNC,MAAM;QACN7B,UAAUA;QACVC,QAAQC;QACRC,SAASC;QACTC,SAASjB,aAAaiC,qCAAqChB;;IAG7D,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,WAAWZ,yBAETyB,UAAU,aAAalB,eAAe,CAACkB,MAAM,EAC7CD,aAAa,mDACbP,oCACAU,wBACAf;QAEFD,OAAOA;QACPqC,KAAKnC;;0BAEL,KAACP,wDACKqC;gBACJ/B,SAAS;gBACTM,QAAQW;gBACRT,SAASU;;0BAEX,MAACmB;gBAAKC,aAAW;gBAACtC,SAAS;;kCACzB,KAACqC;wBAAKrC,SAAS;;kCACf,KAACqC;wBACCC,aAAW;wBACXtC,WAAWZ,iCAETwB,aAAa,SAAS,CAACP;;;;;;AAMnC,EAAE"}

package/dist/components/Tabbar/Tabbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Флаг, который скрывает тень (Android) или границы (iOS)\n   */\n  plain?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === 'ios' && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, restProps.children),\n        !plain && styles['Tabbar--shadow'],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","usePlatform","RootComponent","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","plain","mode","restProps","platform","baseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,aAAa,QAAQ,iCAAiC;AAc/D,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOL,MAAMO,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS;QAAC,EAAEC,QAAQ,KAAK,EAAEC,IAAI,EAA6B,WAAxBC;QAAxBF;QAAeC;;IACtC,MAAME,WAAWX;IAEjB,qBACE,KAACC;QACCW,eAAeb,WACb,oCAEAY,aAAa,4BACbT,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI;OAECE;AAGV,EAAE"}
+{"version":3,"sources":["../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Флаг, который скрывает тень (Android) или границы (iOS)\n   */\n  plain?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === 'ios' && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, restProps.children),\n        !plain && styles['Tabbar--shadow'],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","usePlatform","RootComponent","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","plain","mode","restProps","platform","baseClassName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,aAAa,QAAQ,iCAAiC;AAc/D,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOL,MAAMO,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS;QAAC,EAAEC,QAAQ,KAAK,EAAEC,IAAI,EAA6B,WAAxBC;QAAxBF;QAAeC;;IACtC,MAAME,WAAWX;IAEjB,qBACE,KAACC;QACCW,eAAeb,WACb,oCAEAY,aAAa,4BACbT,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI;OAECE;AAGV,EAAE"}