@vkontakte/vkui 6.3.1 → 6.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (234) hide show
  1. package/dist/cjs/components/ChipsInputBase/ChipsInputBase.d.ts +1 -1
  2. package/dist/cjs/components/ChipsInputBase/ChipsInputBase.d.ts.map +1 -1
  3. package/dist/cjs/components/ChipsInputBase/ChipsInputBase.js +3 -1
  4. package/dist/cjs/components/ChipsInputBase/ChipsInputBase.js.map +1 -1
  5. package/dist/cjs/components/ChipsInputBase/types.d.ts +1 -1
  6. package/dist/cjs/components/ChipsInputBase/types.d.ts.map +1 -1
  7. package/dist/cjs/components/ChipsInputBase/types.js.map +1 -1
  8. package/dist/cjs/components/Clickable/Clickable.d.ts.map +1 -1
  9. package/dist/cjs/components/Clickable/Clickable.js +4 -3
  10. package/dist/cjs/components/Clickable/Clickable.js.map +1 -1
  11. package/dist/cjs/components/CustomSelect/CustomSelect.d.ts.map +1 -1
  12. package/dist/cjs/components/CustomSelect/CustomSelect.js +1 -2
  13. package/dist/cjs/components/CustomSelect/CustomSelect.js.map +1 -1
  14. package/dist/cjs/components/FormField/FormField.d.ts +5 -1
  15. package/dist/cjs/components/FormField/FormField.d.ts.map +1 -1
  16. package/dist/cjs/components/FormField/FormField.js +26 -10
  17. package/dist/cjs/components/FormField/FormField.js.map +1 -1
  18. package/dist/cjs/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.d.ts.map +1 -1
  19. package/dist/cjs/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js +4 -4
  20. package/dist/cjs/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js.map +1 -1
  21. package/dist/cjs/components/Input/Input.d.ts +1 -1
  22. package/dist/cjs/components/Input/Input.d.ts.map +1 -1
  23. package/dist/cjs/components/Input/Input.js.map +1 -1
  24. package/dist/cjs/components/ScreenSpinner/ScreenSpinner.d.ts +20 -1
  25. package/dist/cjs/components/ScreenSpinner/ScreenSpinner.d.ts.map +1 -1
  26. package/dist/cjs/components/ScreenSpinner/ScreenSpinner.js +109 -25
  27. package/dist/cjs/components/ScreenSpinner/ScreenSpinner.js.map +1 -1
  28. package/dist/cjs/components/Select/Select.d.ts.map +1 -1
  29. package/dist/cjs/components/Select/Select.js +2 -1
  30. package/dist/cjs/components/Select/Select.js.map +1 -1
  31. package/dist/cjs/components/Snackbar/Snackbar.d.ts +3 -1
  32. package/dist/cjs/components/Snackbar/Snackbar.d.ts.map +1 -1
  33. package/dist/cjs/components/Snackbar/Snackbar.js +4 -3
  34. package/dist/cjs/components/Snackbar/Snackbar.js.map +1 -1
  35. package/dist/cjs/components/Snackbar/types.d.ts +1 -0
  36. package/dist/cjs/components/Snackbar/types.d.ts.map +1 -1
  37. package/dist/cjs/components/Snackbar/utils.d.ts.map +1 -1
  38. package/dist/cjs/components/Snackbar/utils.js +7 -3
  39. package/dist/cjs/components/Snackbar/utils.js.map +1 -1
  40. package/dist/cjs/components/Textarea/Textarea.d.ts +1 -1
  41. package/dist/cjs/components/Textarea/Textarea.d.ts.map +1 -1
  42. package/dist/cjs/components/Textarea/Textarea.js +1 -3
  43. package/dist/cjs/components/Textarea/Textarea.js.map +1 -1
  44. package/dist/cjs/components/Tooltip/Tooltip.d.ts +5 -1
  45. package/dist/cjs/components/Tooltip/Tooltip.d.ts.map +1 -1
  46. package/dist/cjs/components/Tooltip/Tooltip.js +3 -2
  47. package/dist/cjs/components/Tooltip/Tooltip.js.map +1 -1
  48. package/dist/cjs/index.d.ts +2 -2
  49. package/dist/cjs/index.d.ts.map +1 -1
  50. package/dist/cjs/index.js +3 -0
  51. package/dist/cjs/index.js.map +1 -1
  52. package/dist/cjs/lib/animation/useCSSKeyframesAnimationController.d.ts +9 -9
  53. package/dist/cjs/lib/animation/useCSSKeyframesAnimationController.d.ts.map +1 -1
  54. package/dist/cjs/lib/animation/useCSSKeyframesAnimationController.js +31 -52
  55. package/dist/cjs/lib/animation/useCSSKeyframesAnimationController.js.map +1 -1
  56. package/dist/cjs/lib/utils.d.ts +1 -1
  57. package/dist/cjs/lib/utils.d.ts.map +1 -1
  58. package/dist/cjs/lib/utils.js +12 -9
  59. package/dist/cjs/lib/utils.js.map +1 -1
  60. package/dist/components/ChipsInputBase/ChipsInputBase.d.ts +1 -1
  61. package/dist/components/ChipsInputBase/ChipsInputBase.d.ts.map +1 -1
  62. package/dist/components/ChipsInputBase/ChipsInputBase.js +3 -1
  63. package/dist/components/ChipsInputBase/ChipsInputBase.js.map +1 -1
  64. package/dist/components/ChipsInputBase/types.d.ts +1 -1
  65. package/dist/components/ChipsInputBase/types.d.ts.map +1 -1
  66. package/dist/components/ChipsInputBase/types.js.map +1 -1
  67. package/dist/components/Clickable/Clickable.d.ts.map +1 -1
  68. package/dist/components/Clickable/Clickable.js +4 -3
  69. package/dist/components/Clickable/Clickable.js.map +1 -1
  70. package/dist/components/CustomSelect/CustomSelect.d.ts.map +1 -1
  71. package/dist/components/CustomSelect/CustomSelect.js +1 -2
  72. package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
  73. package/dist/components/FormField/FormField.d.ts +5 -1
  74. package/dist/components/FormField/FormField.d.ts.map +1 -1
  75. package/dist/components/FormField/FormField.js +26 -10
  76. package/dist/components/FormField/FormField.js.map +1 -1
  77. package/dist/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.d.ts.map +1 -1
  78. package/dist/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js +4 -4
  79. package/dist/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js.map +1 -1
  80. package/dist/components/Input/Input.d.ts +1 -1
  81. package/dist/components/Input/Input.d.ts.map +1 -1
  82. package/dist/components/Input/Input.js.map +1 -1
  83. package/dist/components/ScreenSpinner/ScreenSpinner.d.ts +20 -1
  84. package/dist/components/ScreenSpinner/ScreenSpinner.d.ts.map +1 -1
  85. package/dist/components/ScreenSpinner/ScreenSpinner.js +99 -24
  86. package/dist/components/ScreenSpinner/ScreenSpinner.js.map +1 -1
  87. package/dist/components/Select/Select.d.ts.map +1 -1
  88. package/dist/components/Select/Select.js +2 -1
  89. package/dist/components/Select/Select.js.map +1 -1
  90. package/dist/components/Snackbar/Snackbar.d.ts +3 -1
  91. package/dist/components/Snackbar/Snackbar.d.ts.map +1 -1
  92. package/dist/components/Snackbar/Snackbar.js +4 -3
  93. package/dist/components/Snackbar/Snackbar.js.map +1 -1
  94. package/dist/components/Snackbar/types.d.ts +1 -0
  95. package/dist/components/Snackbar/types.d.ts.map +1 -1
  96. package/dist/components/Snackbar/types.js.map +1 -1
  97. package/dist/components/Snackbar/utils.d.ts.map +1 -1
  98. package/dist/components/Snackbar/utils.js +7 -3
  99. package/dist/components/Snackbar/utils.js.map +1 -1
  100. package/dist/components/Textarea/Textarea.d.ts +1 -1
  101. package/dist/components/Textarea/Textarea.d.ts.map +1 -1
  102. package/dist/components/Textarea/Textarea.js +1 -3
  103. package/dist/components/Textarea/Textarea.js.map +1 -1
  104. package/dist/components/Tooltip/Tooltip.d.ts +5 -1
  105. package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
  106. package/dist/components/Tooltip/Tooltip.js +3 -2
  107. package/dist/components/Tooltip/Tooltip.js.map +1 -1
  108. package/dist/components.css +2 -2
  109. package/dist/components.css.map +1 -1
  110. package/dist/components.js.tmp +882 -752
  111. package/dist/cssm/components/ChipsInputBase/ChipsInputBase.d.ts +1 -1
  112. package/dist/cssm/components/ChipsInputBase/ChipsInputBase.d.ts.map +1 -1
  113. package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js +2 -1
  114. package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js.map +1 -1
  115. package/dist/cssm/components/ChipsInputBase/types.d.ts +1 -1
  116. package/dist/cssm/components/ChipsInputBase/types.d.ts.map +1 -1
  117. package/dist/cssm/components/ChipsInputBase/types.js.map +1 -1
  118. package/dist/cssm/components/Clickable/Clickable.d.ts.map +1 -1
  119. package/dist/cssm/components/Clickable/Clickable.js +4 -3
  120. package/dist/cssm/components/Clickable/Clickable.js.map +1 -1
  121. package/dist/cssm/components/CustomSelect/CustomSelect.d.ts.map +1 -1
  122. package/dist/cssm/components/CustomSelect/CustomSelect.js +1 -2
  123. package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
  124. package/dist/cssm/components/DateInput/DateInput.module.css +1 -0
  125. package/dist/cssm/components/DateRangeInput/DateRangeInput.module.css +1 -0
  126. package/dist/cssm/components/FormField/FormField.d.ts +5 -1
  127. package/dist/cssm/components/FormField/FormField.d.ts.map +1 -1
  128. package/dist/cssm/components/FormField/FormField.js +24 -9
  129. package/dist/cssm/components/FormField/FormField.js.map +1 -1
  130. package/dist/cssm/components/FormField/FormField.module.css +27 -4
  131. package/dist/cssm/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.d.ts.map +1 -1
  132. package/dist/cssm/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js +2 -3
  133. package/dist/cssm/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js.map +1 -1
  134. package/dist/cssm/components/Input/Input.d.ts +1 -1
  135. package/dist/cssm/components/Input/Input.d.ts.map +1 -1
  136. package/dist/cssm/components/Input/Input.js.map +1 -1
  137. package/dist/cssm/components/ScreenSpinner/ScreenSpinner.d.ts +20 -1
  138. package/dist/cssm/components/ScreenSpinner/ScreenSpinner.d.ts.map +1 -1
  139. package/dist/cssm/components/ScreenSpinner/ScreenSpinner.js +86 -18
  140. package/dist/cssm/components/ScreenSpinner/ScreenSpinner.js.map +1 -1
  141. package/dist/cssm/components/ScreenSpinner/ScreenSpinner.module.css +14 -16
  142. package/dist/cssm/components/Select/Select.d.ts.map +1 -1
  143. package/dist/cssm/components/Select/Select.js +1 -1
  144. package/dist/cssm/components/Select/Select.js.map +1 -1
  145. package/dist/cssm/components/Select/Select.module.css +1 -0
  146. package/dist/cssm/components/Snackbar/Snackbar.d.ts +3 -1
  147. package/dist/cssm/components/Snackbar/Snackbar.d.ts.map +1 -1
  148. package/dist/cssm/components/Snackbar/Snackbar.js +4 -3
  149. package/dist/cssm/components/Snackbar/Snackbar.js.map +1 -1
  150. package/dist/cssm/components/Snackbar/Snackbar.module.css +14 -1
  151. package/dist/cssm/components/Snackbar/types.d.ts +1 -0
  152. package/dist/cssm/components/Snackbar/types.d.ts.map +1 -1
  153. package/dist/cssm/components/Snackbar/types.js.map +1 -1
  154. package/dist/cssm/components/Snackbar/utils.d.ts.map +1 -1
  155. package/dist/cssm/components/Snackbar/utils.js +7 -3
  156. package/dist/cssm/components/Snackbar/utils.js.map +1 -1
  157. package/dist/cssm/components/Textarea/Textarea.d.ts +1 -1
  158. package/dist/cssm/components/Textarea/Textarea.d.ts.map +1 -1
  159. package/dist/cssm/components/Textarea/Textarea.js +1 -3
  160. package/dist/cssm/components/Textarea/Textarea.js.map +1 -1
  161. package/dist/cssm/components/Tooltip/Tooltip.d.ts +5 -1
  162. package/dist/cssm/components/Tooltip/Tooltip.d.ts.map +1 -1
  163. package/dist/cssm/components/Tooltip/Tooltip.js +2 -2
  164. package/dist/cssm/components/Tooltip/Tooltip.js.map +1 -1
  165. package/dist/cssm/index.d.ts +2 -2
  166. package/dist/cssm/index.d.ts.map +1 -1
  167. package/dist/cssm/index.js +1 -1
  168. package/dist/cssm/index.js.map +1 -1
  169. package/dist/cssm/lib/animation/useCSSKeyframesAnimationController.d.ts +9 -9
  170. package/dist/cssm/lib/animation/useCSSKeyframesAnimationController.d.ts.map +1 -1
  171. package/dist/cssm/lib/animation/useCSSKeyframesAnimationController.js +31 -51
  172. package/dist/cssm/lib/animation/useCSSKeyframesAnimationController.js.map +1 -1
  173. package/dist/cssm/lib/utils.d.ts +1 -1
  174. package/dist/cssm/lib/utils.d.ts.map +1 -1
  175. package/dist/cssm/lib/utils.js +15 -7
  176. package/dist/cssm/lib/utils.js.map +1 -1
  177. package/dist/index.d.ts +2 -2
  178. package/dist/index.d.ts.map +1 -1
  179. package/dist/index.js +1 -1
  180. package/dist/index.js.map +1 -1
  181. package/dist/lib/animation/useCSSKeyframesAnimationController.d.ts +9 -9
  182. package/dist/lib/animation/useCSSKeyframesAnimationController.d.ts.map +1 -1
  183. package/dist/lib/animation/useCSSKeyframesAnimationController.js +31 -51
  184. package/dist/lib/animation/useCSSKeyframesAnimationController.js.map +1 -1
  185. package/dist/lib/utils.d.ts +1 -1
  186. package/dist/lib/utils.d.ts.map +1 -1
  187. package/dist/lib/utils.js +16 -7
  188. package/dist/lib/utils.js.map +1 -1
  189. package/dist/vkui.css +2 -2
  190. package/dist/vkui.css.map +1 -1
  191. package/dist/vkui.js.tmp +882 -752
  192. package/package.json +3 -3
  193. package/src/components/ChipsInputBase/ChipsInputBase.tsx +2 -0
  194. package/src/components/ChipsInputBase/types.ts +1 -1
  195. package/src/components/Clickable/Clickable.tsx +16 -13
  196. package/src/components/CustomSelect/CustomSelect.tsx +1 -2
  197. package/src/components/DateInput/DateInput.module.css +1 -0
  198. package/src/components/DateRangeInput/DateRangeInput.module.css +1 -0
  199. package/src/components/FormField/FormField.module.css +26 -4
  200. package/src/components/FormField/FormField.tsx +31 -16
  201. package/src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx +2 -3
  202. package/src/components/Input/Input.tsx +1 -1
  203. package/src/components/ScreenSpinner/ScreenSpinner.module.css +14 -16
  204. package/src/components/ScreenSpinner/ScreenSpinner.tsx +132 -40
  205. package/src/components/Select/Select.module.css +1 -0
  206. package/src/components/Select/Select.tsx +1 -0
  207. package/src/components/Snackbar/Snackbar.module.css +14 -1
  208. package/src/components/Snackbar/Snackbar.tsx +17 -4
  209. package/src/components/Snackbar/types.ts +1 -0
  210. package/src/components/Snackbar/utils.ts +12 -4
  211. package/src/components/Textarea/Textarea.tsx +1 -2
  212. package/src/components/Tooltip/Tooltip.tsx +6 -1
  213. package/src/index.ts +5 -2
  214. package/src/lib/animation/useCSSKeyframesAnimationController.ts +46 -62
  215. package/src/lib/utils.ts +18 -9
  216. package/dist/cjs/components/Clickable/useKeyboard.d.ts +0 -5
  217. package/dist/cjs/components/Clickable/useKeyboard.d.ts.map +0 -1
  218. package/dist/cjs/components/Clickable/useKeyboard.js +0 -29
  219. package/dist/cjs/components/Clickable/useKeyboard.js.map +0 -1
  220. package/dist/cjs/vkui.js +0 -8
  221. package/dist/cjs/vkui.js.map +0 -1
  222. package/dist/components/Clickable/useKeyboard.d.ts +0 -5
  223. package/dist/components/Clickable/useKeyboard.d.ts.map +0 -1
  224. package/dist/components/Clickable/useKeyboard.js +0 -24
  225. package/dist/components/Clickable/useKeyboard.js.map +0 -1
  226. package/dist/cssm/components/Clickable/useKeyboard.d.ts +0 -5
  227. package/dist/cssm/components/Clickable/useKeyboard.d.ts.map +0 -1
  228. package/dist/cssm/components/Clickable/useKeyboard.js +0 -23
  229. package/dist/cssm/components/Clickable/useKeyboard.js.map +0 -1
  230. package/dist/cssm/vkui.js +0 -3
  231. package/dist/cssm/vkui.js.map +0 -1
  232. package/dist/vkui.js +0 -3
  233. package/dist/vkui.js.map +0 -1
  234. package/src/components/Clickable/useKeyboard.tsx +0 -26
@@ -1 +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 { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { getRelativeBoundingClientRect } from '../../lib/dom';\nimport { UIPanGestureRecognizer } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { 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 * > Note: в мобильном режиме:\n * > - `\"top-start\"`/`\"top-end\"` перебивается на `\"top\"`, чтобы поведение было схожим с нативными\n * > уведомлениями;\n * > - `\"bottom\"`/`\"bottom-end\"` перебивается на \"bottom-start\", чтобы избежать вызова системных\n * > функций, таких как **Pull To Refresh** и **Режим управления одной рукой**.\n */\n placement?: SnackbarPlacement;\n /**\n * Название кнопки действия в уведомлении\n * Не может использоваться одновременно с `subtitle`\n */\n action?: React.ReactNode;\n /**\n * Будет вызвано при клике на кнопку действия\n */\n onActionClick?: (event: React.MouseEvent) => void;\n /**\n * Время в миллисекундах, через которое плашка скроется\n */\n duration?: number;\n /**\n * Обработчик закрытия уведомления\n */\n onClose: () => void;\n /**\n * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n */\n offsetY?: React.CSSProperties['bottom'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({\n placement = 'bottom-start',\n children,\n layout,\n action,\n before,\n after,\n duration = 4000,\n onActionClick = 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 mediaQueries = useMediaQueries();\n const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n open ? 'enter' : 'exit',\n {\n onExited: onClose,\n },\n );\n\n const clearRAF = React.useCallback(() => {\n if (rafRef.current !== null) {\n cancelAnimationFrame(rafRef.current);\n rafRef.current = null;\n }\n }, []);\n\n const updateShiftAxisCSSProperties = React.useCallback(\n (x: number | null, y: number | null) => {\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 mediaQueries,\n );\n setTouched(true);\n };\n\n const handleTouchMove = (event: React.UIEvent<HTMLDivElement>) => {\n if (shiftDataRef.current && panGestureRecognizer.current) {\n panGestureRecognizer.current.setInitialTimeOnce();\n panGestureRecognizer.current.setEndCoords(event.nativeEvent);\n shiftDataRef.current = getMovedShiftData(\n placement,\n shiftDataRef.current,\n panGestureRecognizer.current.delta(),\n );\n\n if (shiftDataRef.current.shifted) {\n updateShiftAxisCSSProperties(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","useMediaQueries","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","mediaQueries","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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"}
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 { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { getRelativeBoundingClientRect } from '../../lib/dom';\nimport { UIPanGestureRecognizer } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { 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 * > Note: в мобильном режиме:\n * > - `\"top-start\"`/`\"top-end\"` перебивается на `\"top\"`, чтобы поведение было схожим с нативными\n * > уведомлениями;\n * > - `\"bottom\"` перебивается на `\"bottom-start\"`, чтобы избежать вызова системных\n * > функций, таких как **Pull To Refresh** и **Режим управления одной рукой**.\n * > - `\"bottom-start\"`/`\"bottom-end\"` закрываются смахиванием в любое из направлений\n * > по горизонтальной оси.\n */\n placement?: SnackbarPlacement;\n /**\n * Название кнопки действия в уведомлении\n * Не может использоваться одновременно с `subtitle`\n */\n action?: React.ReactNode;\n /**\n * Будет вызвано при клике на кнопку действия\n */\n onActionClick?: (event: React.MouseEvent) => void;\n /**\n * Время в миллисекундах, через которое плашка скроется\n */\n duration?: number;\n /**\n * Обработчик закрытия уведомления\n */\n onClose: () => void;\n /**\n * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n */\n offsetY?: React.CSSProperties['bottom'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({\n placement = 'bottom-start',\n children,\n layout,\n action,\n before,\n after,\n duration = 4000,\n onActionClick = 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 mediaQueries = useMediaQueries();\n const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n open ? 'enter' : 'exit',\n {\n onExited: onClose,\n },\n );\n\n const clearRAF = React.useCallback(() => {\n if (rafRef.current !== null) {\n cancelAnimationFrame(rafRef.current);\n rafRef.current = null;\n }\n }, []);\n\n const updateShiftAxisCSSProperties = React.useCallback(\n (x: number | null, y: number | null, direction: number | null) => {\n rafRef.current = requestAnimationFrame(() => {\n if (rootRef.current) {\n x === null\n ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_x')\n : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_x', `${x}px`);\n y === null\n ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_y')\n : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_y', `${y}px`);\n direction === null\n ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_direction')\n : /* istanbul ignore next: TODO чтобы протестировать кейс, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n rootRef.current.style.setProperty(\n '--vkui_internal--snackbar_direction',\n `${direction}`,\n );\n }\n });\n },\n [rootRef],\n );\n\n const close = React.useCallback(() => {\n setOpen(false);\n }, []);\n\n const handleActionClick = (event: React.MouseEvent) => {\n close();\n if (action) {\n onActionClick(event);\n }\n };\n\n const handleTouchStart = (event: React.UIEvent<HTMLDivElement>) => {\n panGestureRecognizer.current = new UIPanGestureRecognizer();\n panGestureRecognizer.current.setStartCoords(event.nativeEvent);\n shiftDataRef.current = getInitialShiftData(\n rootRef.current!.offsetWidth,\n rootRef.current!.offsetHeight,\n mediaQueries,\n );\n setTouched(true);\n };\n\n const handleTouchMove = (event: React.UIEvent<HTMLDivElement>) => {\n if (shiftDataRef.current && panGestureRecognizer.current) {\n panGestureRecognizer.current.setInitialTimeOnce();\n panGestureRecognizer.current.setEndCoords(event.nativeEvent);\n shiftDataRef.current = getMovedShiftData(\n placement,\n shiftDataRef.current,\n panGestureRecognizer.current.delta(),\n );\n\n if (shiftDataRef.current.shifted) {\n updateShiftAxisCSSProperties(\n shiftDataRef.current.x,\n shiftDataRef.current.y,\n shiftDataRef.current.direction,\n );\n }\n }\n };\n\n const handleTouchEnd = () => {\n if (\n touched &&\n shiftDataRef.current &&\n panGestureRecognizer.current &&\n shouldBeClosedByShiftData(\n placement,\n shiftDataRef.current,\n getRelativeBoundingClientRect(rootRef.current!, inRef.current!),\n panGestureRecognizer.current.velocity(),\n )\n ) {\n close();\n }\n\n setTouched(false);\n };\n\n useIsomorphicLayoutEffect(\n function closeAfterDelay() {\n if (!open || focused || touched || animationState !== 'entered') {\n return;\n }\n closeTimeoutIdRef.current = setTimeout(close, duration);\n return function preventCloseAfterDelayOnUnmount() {\n clearTimeout(closeTimeoutIdRef.current);\n };\n },\n [open, focused, touched, animationState, close, duration],\n );\n\n useIsomorphicLayoutEffect(\n function clearUserInteractionDataAfterTouchEnd() {\n if (!touched) {\n clearRAF();\n shiftDataRef.current = null;\n panGestureRecognizer.current = null;\n\n if (open) {\n updateShiftAxisCSSProperties(null, null, null);\n }\n }\n },\n [touched, open, updateShiftAxisCSSProperties, clearRAF],\n );\n\n React.useEffect(() => clearRAF, [clearRAF]);\n\n useGlobalEscKeyDown(open, close);\n\n if (animationState === 'exited') {\n return null;\n }\n\n return (\n <RootComponent\n {...restProps}\n role=\"presentation\"\n baseClassName={classNames(\n styles['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","useMediaQueries","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","mediaQueries","animationState","animationHandlers","onExited","clearRAF","useCallback","current","cancelAnimationFrame","updateShiftAxisCSSProperties","x","y","direction","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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"}
@@ -2,6 +2,7 @@ export type SnackbarPlacement = 'top-start' | 'top' | 'top-end' | 'bottom-start'
2
2
  export type ShiftData = {
3
3
  x: number;
4
4
  y: number;
5
+ direction: number | null;
5
6
  width: number;
6
7
  height: number;
7
8
  shifted: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,KAAK,GACL,SAAS,GACT,cAAc,GACd,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,SAAS,GAAG;IACtB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,KAAK,GACL,SAAS,GACT,cAAc,GACd,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,SAAS,GAAG;IACtB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC"}
@@ -1 +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 = {\n x: number;\n y: number;\n width: number;\n height: number;\n shifted: boolean;\n isDesktop: boolean;\n};\n"],"names":[],"mappings":"AAQA,WAOE"}
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 = {\n x: number;\n y: number;\n direction: number | null;\n width: number;\n height: number;\n shifted: boolean;\n isDesktop: boolean;\n};\n"],"names":[],"mappings":"AAQA,WAQE"}
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,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,GACrC,KAAK,CAAC,aAAa,GAAG,SAAS,CAcjC;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,GACzB,SAAS,CASX;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,GAClC,SAAS,CAuBX;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,GACjC,OAAO,CA4CT"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,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,GACrC,KAAK,CAAC,aAAa,GAAG,SAAS,CAcjC;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,GACzB,SAAS,CAUX;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,GAClC,SAAS,CA2BX;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,GACjC,OAAO,CA+CT"}
@@ -24,6 +24,7 @@ export function resolveOffsetYCssStyle(placement, style, offsetY) {
24
24
  export function getInitialShiftData(width, height, mediaQueries) {
25
25
  return {
26
26
  shifted: false,
27
+ direction: null,
27
28
  isDesktop: mediaQueries.smallTabletPlus.matches,
28
29
  x: 0,
29
30
  y: 0,
@@ -42,7 +43,10 @@ export function getMovedShiftData(placement, shiftData, nextShift) {
42
43
  shiftData.y = rubberbandIfOutOfBounds(nextShift.y, 0, shiftData.height);
43
44
  }
44
45
  } else if (placement.startsWith('bottom')) {
45
- shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);
46
+ shiftData.x = nextShift.x;
47
+ const movingToLeft = nextShift.x < 0 ? -1 : null;
48
+ const movingToRight = nextShift.x > 0 ? 1 : null;
49
+ shiftData.direction = movingToLeft || movingToRight;
46
50
  }
47
51
  if (placement.startsWith('top')) {
48
52
  shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);
@@ -76,8 +80,8 @@ export function shouldBeClosedByShiftData(placement, shiftData, relativeClientRe
76
80
  shouldBeClosedByVelocity.y = relativeClientRect.y > 0 ? velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;
77
81
  }
78
82
  } else if (placement.startsWith('bottom')) {
79
- shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;
80
- shouldBeClosedByVelocity.x = relativeClientRect.x < 0 ? velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;
83
+ shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2 || relativeClientRect.x > relativeClientRect.width / 2;
84
+ shouldBeClosedByVelocity.x = relativeClientRect.x < 0 && velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE || relativeClientRect.x > 0 && velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;
81
85
  }
82
86
  if (placement.startsWith('top')) {
83
87
  shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Snackbar/utils.ts"],"sourcesContent":["import * as React from 'react';\nimport type { MediaQueries } from '../../lib/adaptivity';\nimport { rubberbandIfOutOfBounds } from '../../lib/animation';\nimport type { ShiftData, SnackbarPlacement } from './types';\n\nexport function resolveOffsetYCssStyle(\n placement: SnackbarPlacement,\n style?: React.CSSProperties,\n offsetY?: React.CSSProperties['inset'],\n): React.CSSProperties | undefined {\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(\n width: number,\n height: number,\n mediaQueries: MediaQueries,\n): ShiftData {\n return {\n shifted: false,\n isDesktop: mediaQueries.smallTabletPlus.matches, // eslint-disable-line no-restricted-properties\n x: 0,\n y: 0,\n width,\n height,\n };\n}\n\nexport function getMovedShiftData(\n placement: SnackbarPlacement,\n shiftData: ShiftData,\n nextShift: { x: number; y: number },\n): ShiftData {\n /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n if (shiftData.isDesktop) {\n if (placement.endsWith('start')) {\n shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);\n } else if (placement.endsWith('end')) {\n shiftData.x = rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);\n }\n\n if (placement.startsWith('bottom')) {\n shiftData.y = rubberbandIfOutOfBounds(nextShift.y, 0, shiftData.height);\n }\n } else if (placement.startsWith('bottom')) {\n shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);\n }\n\n if (placement.startsWith('top')) {\n shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);\n }\n\n shiftData.shifted = true;\n\n return shiftData;\n}\n\nconst MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE = 200;\n\nexport function shouldBeClosedByShiftData(\n placement: SnackbarPlacement,\n shiftData: ShiftData,\n relativeClientRect: DOMRect,\n velocity: { x: number; y: number },\n): boolean {\n if (!shiftData.shifted) {\n return false;\n }\n\n const shouldBeClosedThreshold = { x: false, y: false };\n const shouldBeClosedByVelocity = { x: false, y: false };\n\n /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n if (shiftData.isDesktop) {\n if (placement.endsWith('start')) {\n shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;\n shouldBeClosedByVelocity.x =\n relativeClientRect.x < 0 ? velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n } else if (placement.endsWith('end')) {\n shouldBeClosedThreshold.x = relativeClientRect.x > relativeClientRect.width / 2;\n shouldBeClosedByVelocity.x =\n relativeClientRect.x > 0 ? velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n }\n\n if (placement.startsWith('bottom')) {\n shouldBeClosedThreshold.y = relativeClientRect.y > relativeClientRect.height / 2;\n shouldBeClosedByVelocity.y =\n relativeClientRect.y > 0 ? velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n }\n } else if (placement.startsWith('bottom')) {\n shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;\n shouldBeClosedByVelocity.x =\n relativeClientRect.x < 0 ? velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n }\n\n if (placement.startsWith('top')) {\n shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;\n shouldBeClosedByVelocity.y =\n relativeClientRect.y < 0 ? velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n }\n\n return (\n shouldBeClosedThreshold.x ||\n shouldBeClosedByVelocity.x ||\n shouldBeClosedThreshold.y ||\n /* istanbul ignore next: подсвечивает жёлтым и пишет \"branch not covered\" */\n shouldBeClosedByVelocity.y\n );\n}\n"],"names":["React","rubberbandIfOutOfBounds","resolveOffsetYCssStyle","placement","style","offsetY","undefined","top","bottom","getInitialShiftData","width","height","mediaQueries","shifted","isDesktop","smallTabletPlus","matches","x","y","getMovedShiftData","shiftData","nextShift","endsWith","startsWith","MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE","shouldBeClosedByShiftData","relativeClientRect","velocity","shouldBeClosedThreshold","shouldBeClosedByVelocity"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/components/Snackbar/utils.ts"],"sourcesContent":["import * as React from 'react';\nimport type { MediaQueries } from '../../lib/adaptivity';\nimport { rubberbandIfOutOfBounds } from '../../lib/animation';\nimport type { ShiftData, SnackbarPlacement } from './types';\n\nexport function resolveOffsetYCssStyle(\n placement: SnackbarPlacement,\n style?: React.CSSProperties,\n offsetY?: React.CSSProperties['inset'],\n): React.CSSProperties | undefined {\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(\n width: number,\n height: number,\n mediaQueries: MediaQueries,\n): ShiftData {\n return {\n shifted: false,\n direction: null,\n isDesktop: mediaQueries.smallTabletPlus.matches, // eslint-disable-line no-restricted-properties,\n x: 0,\n y: 0,\n width,\n height,\n };\n}\n\nexport function getMovedShiftData(\n placement: SnackbarPlacement,\n shiftData: ShiftData,\n nextShift: { x: number; y: number },\n): ShiftData {\n /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n if (shiftData.isDesktop) {\n if (placement.endsWith('start')) {\n shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);\n } else if (placement.endsWith('end')) {\n shiftData.x = rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);\n }\n\n if (placement.startsWith('bottom')) {\n shiftData.y = rubberbandIfOutOfBounds(nextShift.y, 0, shiftData.height);\n }\n } else if (placement.startsWith('bottom')) {\n shiftData.x = nextShift.x;\n\n const movingToLeft = nextShift.x < 0 ? -1 : null;\n const movingToRight = nextShift.x > 0 ? 1 : null;\n shiftData.direction = movingToLeft || movingToRight;\n }\n\n if (placement.startsWith('top')) {\n shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);\n }\n\n shiftData.shifted = true;\n\n return shiftData;\n}\n\nconst MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE = 200;\n\nexport function shouldBeClosedByShiftData(\n placement: SnackbarPlacement,\n shiftData: ShiftData,\n relativeClientRect: DOMRect,\n velocity: { x: number; y: number },\n): boolean {\n if (!shiftData.shifted) {\n return false;\n }\n\n const shouldBeClosedThreshold = { x: false, y: false };\n const shouldBeClosedByVelocity = { x: false, y: false };\n\n /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n if (shiftData.isDesktop) {\n if (placement.endsWith('start')) {\n shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;\n shouldBeClosedByVelocity.x =\n relativeClientRect.x < 0 ? velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n } else if (placement.endsWith('end')) {\n shouldBeClosedThreshold.x = relativeClientRect.x > relativeClientRect.width / 2;\n shouldBeClosedByVelocity.x =\n relativeClientRect.x > 0 ? velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n }\n\n if (placement.startsWith('bottom')) {\n shouldBeClosedThreshold.y = relativeClientRect.y > relativeClientRect.height / 2;\n shouldBeClosedByVelocity.y =\n relativeClientRect.y > 0 ? velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n }\n } else if (placement.startsWith('bottom')) {\n shouldBeClosedThreshold.x =\n relativeClientRect.x < -relativeClientRect.width / 2 ||\n relativeClientRect.x > relativeClientRect.width / 2;\n shouldBeClosedByVelocity.x =\n (relativeClientRect.x < 0 && velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE) ||\n (relativeClientRect.x > 0 && velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE);\n }\n\n if (placement.startsWith('top')) {\n shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;\n shouldBeClosedByVelocity.y =\n relativeClientRect.y < 0 ? velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n }\n\n return (\n shouldBeClosedThreshold.x ||\n shouldBeClosedByVelocity.x ||\n shouldBeClosedThreshold.y ||\n /* istanbul ignore next: подсвечивает жёлтым и пишет \"branch not covered\" */\n shouldBeClosedByVelocity.y\n );\n}\n"],"names":["React","rubberbandIfOutOfBounds","resolveOffsetYCssStyle","placement","style","offsetY","undefined","top","bottom","getInitialShiftData","width","height","mediaQueries","shifted","direction","isDesktop","smallTabletPlus","matches","x","y","getMovedShiftData","shiftData","nextShift","endsWith","startsWith","movingToLeft","movingToRight","MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE","shouldBeClosedByShiftData","relativeClientRect","velocity","shouldBeClosedThreshold","shouldBeClosedByVelocity"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { HasAlign, HasRef, HasRootRef } from '../../types';
3
3
  import { FormFieldProps } from '../FormField/FormField';
4
- export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>, HasRef<HTMLTextAreaElement>, HasRootRef<HTMLElement>, Pick<React.CSSProperties, 'maxHeight'>, HasAlign, FormFieldProps {
4
+ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>, HasRef<HTMLTextAreaElement>, HasRootRef<HTMLElement>, HasAlign, FormFieldProps {
5
5
  grow?: boolean;
6
6
  onResize?: (el: HTMLTextAreaElement) => void;
7
7
  defaultValue?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAUnE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC,EACzE,MAAM,CAAC,mBAAmB,CAAC,EAC3B,UAAU,CAAC,WAAW,CAAC,EACvB,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,WAAW,CAAC,EACtC,QAAQ,EACR,cAAc;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,mKAkBlB,aAAa,KAAG,KAAK,CAAC,SAsCxB,CAAC"}
1
+ {"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAUnE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC,EACzE,MAAM,CAAC,mBAAmB,CAAC,EAC3B,UAAU,CAAC,WAAW,CAAC,EACvB,QAAQ,EACR,cAAc;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,mKAkBlB,aAAa,KAAG,KAAK,CAAC,SAsCxB,CAAC"}
@@ -53,11 +53,9 @@ const sizeYClassNames = {
53
53
  before: before,
54
54
  afterAlign: afterAlign,
55
55
  beforeAlign: beforeAlign,
56
+ maxHeight: maxHeight,
56
57
  children: /*#__PURE__*/ _jsx(UnstyledTextField, _object_spread_props(_object_spread({}, restProps), {
57
58
  as: "textarea",
58
- style: {
59
- maxHeight
60
- },
61
59
  rows: rows,
62
60
  className: "vkuiTextarea__el",
63
61
  onChange: callMultiple(onChange, resize),
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport { useResizeTextarea } from './useResizeTextarea';\nimport styles from './Textarea.module.css';\n\nconst sizeYClassNames = {\n none: styles['Textarea--sizeY-none'],\n ['compact']: styles['Textarea--sizeY-compact'],\n};\n\nexport interface TextareaProps\n extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>,\n HasRef<HTMLTextAreaElement>,\n HasRootRef<HTMLElement>,\n Pick<React.CSSProperties, 'maxHeight'>,\n HasAlign,\n FormFieldProps {\n grow?: boolean;\n onResize?: (el: HTMLTextAreaElement) => void;\n defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = ({\n grow = true,\n style,\n onResize,\n className,\n getRootRef,\n getRef,\n rows = 2,\n maxHeight,\n status,\n onChange,\n align,\n mode,\n after,\n before,\n afterAlign,\n beforeAlign,\n ...restProps\n}: TextareaProps): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n\n const [refResizeTextarea, resize] = useResizeTextarea(onResize, grow);\n const elementRef = useExternRef(getRef, refResizeTextarea);\n\n React.useEffect(resize, [resize, sizeY]);\n\n return (\n <FormField\n className={classNames(\n styles['Textarea'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n align === 'right' && styles['Textarea--align-right'],\n align === 'center' && styles['Textarea--align-center'],\n className,\n )}\n style={style}\n getRootRef={getRootRef}\n disabled={restProps.disabled}\n status={status}\n mode={mode}\n after={after}\n before={before}\n afterAlign={afterAlign}\n beforeAlign={beforeAlign}\n >\n <UnstyledTextField\n {...restProps}\n as=\"textarea\"\n style={{ maxHeight }}\n rows={rows}\n className={styles['Textarea__el']}\n onChange={callMultiple(onChange, resize)}\n getRootRef={elementRef}\n />\n </FormField>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","callMultiple","FormField","UnstyledTextField","useResizeTextarea","sizeYClassNames","none","Textarea","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChange","align","mode","after","before","afterAlign","beforeAlign","restProps","sizeY","refResizeTextarea","resize","elementRef","useEffect","disabled","as"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,yBAAyB;AAEtD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,iBAAiB,QAAQ,yCAAyC;AAC3E,SAASC,iBAAiB,QAAQ,sBAAsB;AAGxD,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAcA;;CAEC,GACD,OAAO,MAAMC,WAAW;QAAC,EACvBC,OAAO,IAAI,EACXC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,OAAO,CAAC,EACRC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,KAAK,EACLC,IAAI,EACJC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,WAAW,EAEG,WADXC;QAhBHhB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAG1B;IAE3B,MAAM,CAAC2B,mBAAmBC,OAAO,GAAGvB,kBAAkBM,UAAUF;IAChE,MAAMoB,aAAa5B,aAAaa,QAAQa;IAExC7B,MAAMgC,SAAS,CAACF,QAAQ;QAACA;QAAQF;KAAM;IAEvC,qBACE,KAACvB;QACCS,WAAWb,2BAET2B,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7CP,UAAU,wCACVA,UAAU,0CACVP;QAEFF,OAAOA;QACPG,YAAYA;QACZkB,UAAUN,UAAUM,QAAQ;QAC5Bd,QAAQA;QACRG,MAAMA;QACNC,OAAOA;QACPC,QAAQA;QACRC,YAAYA;QACZC,aAAaA;kBAEb,cAAA,KAACpB,2DACKqB;YACJO,IAAG;YACHtB,OAAO;gBAAEM;YAAU;YACnBD,MAAMA;YACNH,SAAS;YACTM,UAAUhB,aAAagB,UAAUU;YACjCf,YAAYgB;;;AAIpB,EAAE"}
1
+ {"version":3,"sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport { useResizeTextarea } from './useResizeTextarea';\nimport styles from './Textarea.module.css';\n\nconst sizeYClassNames = {\n none: styles['Textarea--sizeY-none'],\n ['compact']: styles['Textarea--sizeY-compact'],\n};\n\nexport interface TextareaProps\n extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>,\n HasRef<HTMLTextAreaElement>,\n HasRootRef<HTMLElement>,\n HasAlign,\n FormFieldProps {\n grow?: boolean;\n onResize?: (el: HTMLTextAreaElement) => void;\n defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = ({\n grow = true,\n style,\n onResize,\n className,\n getRootRef,\n getRef,\n rows = 2,\n maxHeight,\n status,\n onChange,\n align,\n mode,\n after,\n before,\n afterAlign,\n beforeAlign,\n ...restProps\n}: TextareaProps): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n\n const [refResizeTextarea, resize] = useResizeTextarea(onResize, grow);\n const elementRef = useExternRef(getRef, refResizeTextarea);\n\n React.useEffect(resize, [resize, sizeY]);\n\n return (\n <FormField\n className={classNames(\n styles['Textarea'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n align === 'right' && styles['Textarea--align-right'],\n align === 'center' && styles['Textarea--align-center'],\n className,\n )}\n style={style}\n getRootRef={getRootRef}\n disabled={restProps.disabled}\n status={status}\n mode={mode}\n after={after}\n before={before}\n afterAlign={afterAlign}\n beforeAlign={beforeAlign}\n maxHeight={maxHeight}\n >\n <UnstyledTextField\n {...restProps}\n as=\"textarea\"\n rows={rows}\n className={styles['Textarea__el']}\n onChange={callMultiple(onChange, resize)}\n getRootRef={elementRef}\n />\n </FormField>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","callMultiple","FormField","UnstyledTextField","useResizeTextarea","sizeYClassNames","none","Textarea","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChange","align","mode","after","before","afterAlign","beforeAlign","restProps","sizeY","refResizeTextarea","resize","elementRef","useEffect","disabled","as"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,yBAAyB;AAEtD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,iBAAiB,QAAQ,yCAAyC;AAC3E,SAASC,iBAAiB,QAAQ,sBAAsB;AAGxD,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAaA;;CAEC,GACD,OAAO,MAAMC,WAAW;QAAC,EACvBC,OAAO,IAAI,EACXC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,OAAO,CAAC,EACRC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,KAAK,EACLC,IAAI,EACJC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,WAAW,EAEG,WADXC;QAhBHhB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAG1B;IAE3B,MAAM,CAAC2B,mBAAmBC,OAAO,GAAGvB,kBAAkBM,UAAUF;IAChE,MAAMoB,aAAa5B,aAAaa,QAAQa;IAExC7B,MAAMgC,SAAS,CAACF,QAAQ;QAACA;QAAQF;KAAM;IAEvC,qBACE,KAACvB;QACCS,WAAWb,2BAET2B,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7CP,UAAU,wCACVA,UAAU,0CACVP;QAEFF,OAAOA;QACPG,YAAYA;QACZkB,UAAUN,UAAUM,QAAQ;QAC5Bd,QAAQA;QACRG,MAAMA;QACNC,OAAOA;QACPC,QAAQA;QACRC,YAAYA;QACZC,aAAaA;QACbR,WAAWA;kBAEX,cAAA,KAACZ,2DACKqB;YACJO,IAAG;YACHjB,MAAMA;YACNH,SAAS;YACTM,UAAUhB,aAAagB,UAAUU;YACjCf,YAAYgB;;;AAIpB,EAAE"}
@@ -23,10 +23,14 @@ export interface TooltipProps extends AllowedFloatingComponentProps, AllowedTool
23
23
  * Отключает закрытие по клику.
24
24
  */
25
25
  disableCloseAfterClick?: boolean;
26
+ /**
27
+ * Отключает появление при фокусе.
28
+ */
29
+ disableTriggerOnFocus?: boolean;
26
30
  }
27
31
  /**
28
32
  * @see https://vkcom.github.io/VKUI/#/Tooltip
29
33
  */
30
- export declare const Tooltip: ({ placement: placementProp, arrowPadding, arrowHeight, offsetByMainAxis, offsetByCrossAxis, hideWhenReferenceHidden, disableFlipMiddleware, defaultShown, shown: shownProp, onShownChange, hoverDelay, enableInteractive, disableArrow, disableCloseAfterClick, children, usePortal, id: idProp, getRootRef, text, header, appearance, style: styleProp, className, zIndex, onPlacementChange, ...popperProps }: TooltipProps) => React.ReactNode;
34
+ export declare const Tooltip: ({ placement: placementProp, arrowPadding, arrowHeight, offsetByMainAxis, offsetByCrossAxis, hideWhenReferenceHidden, disableFlipMiddleware, disableTriggerOnFocus, defaultShown, shown: shownProp, onShownChange, hoverDelay, enableInteractive, disableArrow, disableCloseAfterClick, children, usePortal, id: idProp, getRootRef, text, header, appearance, style: styleProp, className, zIndex, onPlacementChange, ...popperProps }: TooltipProps) => React.ReactNode;
31
35
  export {};
32
36
  //# sourceMappingURL=Tooltip.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EACL,KAAK,sBAAsB,EAK5B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAGhF,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,aAAa,GACb,cAAc,GACd,YAAY,GACZ,WAAW,GACX,kBAAkB,GAClB,mBAAmB,GACnB,cAAc,GACd,eAAe,GACf,yBAAyB,GACzB,UAAU,GACV,QAAQ,GACR,WAAW,GACX,mBAAmB,GACnB,uBAAuB,CAC1B,CAAC;AAEF,KAAK,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAEpE,MAAM,WAAW,YAAa,SAAQ,6BAA6B,EAAE,uBAAuB;IAC1F;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,oZAsCjB,YAAY,KAAG,KAAK,CAAC,SA2FvB,CAAC"}
1
+ {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EACL,KAAK,sBAAsB,EAK5B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAGhF,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,aAAa,GACb,cAAc,GACd,YAAY,GACZ,WAAW,GACX,kBAAkB,GAClB,mBAAmB,GACnB,cAAc,GACd,eAAe,GACf,yBAAyB,GACzB,UAAU,GACV,QAAQ,GACR,WAAW,GACX,mBAAmB,GACnB,uBAAuB,CAC1B,CAAC;AAEF,KAAK,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAEpE,MAAM,WAAW,YAAa,SAAQ,6BAA6B,EAAE,uBAAuB;IAC1F;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,2aAuCjB,YAAY,KAAG,KAAK,CAAC,SA2FvB,CAAC"}
@@ -16,7 +16,7 @@ import { Subhead } from '../Typography/Subhead/Subhead';
16
16
  * @see https://vkcom.github.io/VKUI/#/Tooltip
17
17
  */ export const Tooltip = (_param)=>{
18
18
  var { // UseFloatingMiddlewaresBootstrapOptions
19
- placement: placementProp = 'bottom', arrowPadding = 10, arrowHeight = 8, offsetByMainAxis = 8, offsetByCrossAxis = 0, hideWhenReferenceHidden, disableFlipMiddleware = false, // useFloatingWithInteractions
19
+ placement: placementProp = 'bottom', arrowPadding = 10, arrowHeight = 8, offsetByMainAxis = 8, offsetByCrossAxis = 0, hideWhenReferenceHidden, disableFlipMiddleware = false, disableTriggerOnFocus = false, // useFloatingWithInteractions
20
20
  defaultShown, shown: shownProp, onShownChange, hoverDelay = 150, // инверсированные св-ва для useFloatingWithInteractions
21
21
  enableInteractive = false, disableArrow = false, disableCloseAfterClick = false, // Reference
22
22
  children, // AppRootProps
@@ -29,6 +29,7 @@ import { Subhead } from '../Typography/Subhead/Subhead';
29
29
  "offsetByCrossAxis",
30
30
  "hideWhenReferenceHidden",
31
31
  "disableFlipMiddleware",
32
+ "disableTriggerOnFocus",
32
33
  "defaultShown",
33
34
  "shown",
34
35
  "onShownChange",
@@ -67,7 +68,7 @@ import { Subhead } from '../Typography/Subhead/Subhead';
67
68
  shown: shownProp,
68
69
  onShownChange,
69
70
  placement: strictPlacement,
70
- trigger: [
71
+ trigger: disableTriggerOnFocus ? 'hover' : [
71
72
  'hover',
72
73
  'focus'
73
74
  ],
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { animationFadeClassNames } from '../../lib/animation';\nimport {\n type FloatingComponentProps,\n getArrowCoordsByMiddlewareData,\n useFloatingMiddlewaresBootstrap,\n useFloatingWithInteractions,\n usePlacementChangeCallback,\n} from '../../lib/floating';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { Subhead } from '../Typography/Subhead/Subhead';\n\ntype AllowedFloatingComponentProps = Pick<\n FloatingComponentProps,\n | 'arrowHeight'\n | 'arrowPadding'\n | 'hoverDelay'\n | 'placement'\n | 'offsetByMainAxis'\n | 'offsetByCrossAxis'\n | 'defaultShown'\n | 'onShownChange'\n | 'hideWhenReferenceHidden'\n | 'children'\n | 'zIndex'\n | 'usePortal'\n | 'onPlacementChange'\n | 'disableFlipMiddleware'\n>;\n\ntype AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps'>;\n\nexport interface TooltipProps extends AllowedFloatingComponentProps, AllowedTooltipBaseProps {\n /**\n * Передача `boolean` позволяет контролировать состояния показа и скрытия вручную. Используйте\n * совместно с `onShawnChange`.\n *\n * > Если нужно разово инициировать показ тултипа при первом рендере, то используйте `defaultShown`.\n */\n shown?: boolean;\n /**\n * Добавляет возможность наводить на тултип.\n */\n enableInteractive?: boolean;\n /**\n * Скрывает стрелку, указывающую на якорный элемент.\n */\n disableArrow?: boolean;\n /**\n * Отключает закрытие по клику.\n */\n disableCloseAfterClick?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const Tooltip = ({\n // UseFloatingMiddlewaresBootstrapOptions\n placement: placementProp = 'bottom',\n arrowPadding = 10,\n arrowHeight = 8,\n offsetByMainAxis = 8,\n offsetByCrossAxis = 0,\n hideWhenReferenceHidden,\n disableFlipMiddleware = false,\n\n // useFloatingWithInteractions\n defaultShown,\n shown: shownProp,\n onShownChange,\n hoverDelay = 150,\n\n // инверсированные св-ва для useFloatingWithInteractions\n enableInteractive = false,\n disableArrow = false,\n disableCloseAfterClick = false,\n\n // Reference\n children,\n\n // AppRootProps\n usePortal,\n\n // TooltipBaseProps\n id: idProp,\n getRootRef,\n text,\n header,\n appearance = 'neutral',\n style: styleProp,\n className,\n zIndex = 'var(--vkui--z_index_popout)',\n onPlacementChange,\n ...popperProps\n}: TooltipProps): React.ReactNode => {\n const generatedId = React.useId();\n const tooltipId = idProp || generatedId;\n\n const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n placement: placementProp,\n\n offsetByMainAxis,\n offsetByCrossAxis,\n\n hideWhenReferenceHidden,\n\n arrow: !disableArrow,\n arrowRef,\n arrowPadding,\n arrowHeight,\n disableFlipMiddleware,\n });\n const {\n shown,\n willBeHide,\n placement,\n refs,\n referenceProps,\n floatingProps,\n middlewareData,\n onEscapeKeyDown,\n } = useFloatingWithInteractions({\n defaultShown,\n shown: shownProp,\n onShownChange,\n placement: strictPlacement,\n trigger: ['hover', 'focus'],\n hoverDelay,\n closeAfterClick: !disableCloseAfterClick,\n disableInteractive: !enableInteractive,\n middlewares,\n });\n const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);\n\n usePlacementChangeCallback(placementProp, placement, onPlacementChange);\n\n let tooltip: React.ReactNode = null;\n if (shown) {\n referenceProps['aria-describedby'] = tooltipId;\n floatingProps.style.zIndex = zIndex;\n if (styleProp) {\n Object.assign(floatingProps.style, styleProp);\n }\n tooltip = (\n <AppRootPortal usePortal={usePortal}>\n <TooltipBase\n {...popperProps}\n {...floatingProps}\n id={tooltipId}\n getRootRef={tooltipRef}\n appearance={appearance}\n arrowProps={\n disableArrow\n ? undefined\n : {\n placement,\n coords: getArrowCoordsByMiddlewareData(middlewareData),\n getRootRef: setArrowRef,\n }\n }\n text={\n <React.Fragment>\n {hasReactNode(header) && <Subhead weight=\"2\">{header}</Subhead>}\n {hasReactNode(text) && <Subhead>{text}</Subhead>}\n </React.Fragment>\n }\n className={classNames(\n willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,\n className,\n )}\n />\n </AppRootPortal>\n );\n }\n const [, child] = usePatchChildren(children, referenceProps, refs.setReference);\n\n useGlobalEscKeyDown(shown, onEscapeKeyDown);\n\n return (\n <React.Fragment>\n {child}\n {tooltip}\n </React.Fragment>\n );\n};\n"],"names":["React","classNames","hasReactNode","useExternRef","useGlobalEscKeyDown","usePatchChildren","animationFadeClassNames","getArrowCoordsByMiddlewareData","useFloatingMiddlewaresBootstrap","useFloatingWithInteractions","usePlacementChangeCallback","AppRootPortal","TooltipBase","Subhead","Tooltip","placement","placementProp","arrowPadding","arrowHeight","offsetByMainAxis","offsetByCrossAxis","hideWhenReferenceHidden","disableFlipMiddleware","defaultShown","shown","shownProp","onShownChange","hoverDelay","enableInteractive","disableArrow","disableCloseAfterClick","children","usePortal","id","idProp","getRootRef","text","header","appearance","style","styleProp","className","zIndex","onPlacementChange","popperProps","generatedId","useId","tooltipId","arrowRef","setArrowRef","useState","middlewares","strictPlacement","arrow","willBeHide","refs","referenceProps","floatingProps","middlewareData","onEscapeKeyDown","trigger","closeAfterClick","disableInteractive","tooltipRef","setFloating","tooltip","Object","assign","arrowProps","undefined","coords","Fragment","weight","out","in","child","setReference"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,uBAAuB,QAAQ,sBAAsB;AAC9D,SAEEC,8BAA8B,EAC9BC,+BAA+B,EAC/BC,2BAA2B,EAC3BC,0BAA0B,QACrB,qBAAqB;AAC5B,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAA+B,6BAA6B;AAChF,SAASC,OAAO,QAAQ,gCAAgC;AA4CxD;;CAEC,GACD,OAAO,MAAMC,UAAU;QAAC,EACtB,yCAAyC;IACzCC,WAAWC,gBAAgB,QAAQ,EACnCC,eAAe,EAAE,EACjBC,cAAc,CAAC,EACfC,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,uBAAuB,EACvBC,wBAAwB,KAAK,EAE7B,8BAA8B;IAC9BC,YAAY,EACZC,OAAOC,SAAS,EAChBC,aAAa,EACbC,aAAa,GAAG,EAEhB,wDAAwD;IACxDC,oBAAoB,KAAK,EACzBC,eAAe,KAAK,EACpBC,yBAAyB,KAAK,EAE9B,YAAY;IACZC,QAAQ,EAER,eAAe;IACfC,SAAS,EAET,mBAAmB;IACnBC,IAAIC,MAAM,EACVC,UAAU,EACVC,IAAI,EACJC,MAAM,EACNC,aAAa,SAAS,EACtBC,OAAOC,SAAS,EAChBC,SAAS,EACTC,SAAS,6BAA6B,EACtCC,iBAAiB,EAEJ,WADVC;QAnCH7B;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QAGAC;QACAC;QACAE;QACAC;QAGAC;QACAC;QACAC;QAGAC;QAGAC;QAGAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,MAAME,cAAc7C,MAAM8C,KAAK;IAC/B,MAAMC,YAAYb,UAAUW;IAE5B,MAAM,CAACG,UAAUC,YAAY,GAAGjD,MAAMkD,QAAQ,CAAwB;IACtE,MAAM,EAAEC,WAAW,EAAEC,eAAe,EAAE,GAAG5C,gCAAgC;QACvEO,WAAWC;QAEXG;QACAC;QAEAC;QAEAgC,OAAO,CAACxB;QACRmB;QACA/B;QACAC;QACAI;IACF;IACA,MAAM,EACJE,KAAK,EACL8B,UAAU,EACVvC,SAAS,EACTwC,IAAI,EACJC,cAAc,EACdC,aAAa,EACbC,cAAc,EACdC,eAAe,EAChB,GAAGlD,4BAA4B;QAC9Bc;QACAC,OAAOC;QACPC;QACAX,WAAWqC;QACXQ,SAAS;YAAC;YAAS;SAAQ;QAC3BjC;QACAkC,iBAAiB,CAAC/B;QAClBgC,oBAAoB,CAAClC;QACrBuB;IACF;IACA,MAAMY,aAAa5D,aAA6BgC,YAAYoB,KAAKS,WAAW;IAE5EtD,2BAA2BM,eAAeD,WAAW4B;IAErD,IAAIsB,UAA2B;IAC/B,IAAIzC,OAAO;QACTgC,cAAc,CAAC,mBAAmB,GAAGT;QACrCU,cAAclB,KAAK,CAACG,MAAM,GAAGA;QAC7B,IAAIF,WAAW;YACb0B,OAAOC,MAAM,CAACV,cAAclB,KAAK,EAAEC;QACrC;QACAyB,wBACE,KAACtD;YAAcqB,WAAWA;sBACxB,cAAA,KAACpB,qDACKgC,aACAa;gBACJxB,IAAIc;gBACJZ,YAAY4B;gBACZzB,YAAYA;gBACZ8B,YACEvC,eACIwC,YACA;oBACEtD;oBACAuD,QAAQ/D,+BAA+BmD;oBACvCvB,YAAYc;gBACd;gBAENb,oBACE,MAACpC,MAAMuE,QAAQ;;wBACZrE,aAAamC,yBAAW,KAACxB;4BAAQ2D,QAAO;sCAAKnC;;wBAC7CnC,aAAakC,uBAAS,KAACvB;sCAASuB;;;;gBAGrCK,WAAWxC,WACTqD,aAAahD,wBAAwBmE,GAAG,GAAGnE,wBAAwBoE,EAAE,EACrEjC;;;IAKV;IACA,MAAM,GAAGkC,MAAM,GAAGtE,iBAAiB0B,UAAUyB,gBAAgBD,KAAKqB,YAAY;IAE9ExE,oBAAoBoB,OAAOmC;IAE3B,qBACE,MAAC3D,MAAMuE,QAAQ;;YACZI;YACAV;;;AAGP,EAAE"}
1
+ {"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { animationFadeClassNames } from '../../lib/animation';\nimport {\n type FloatingComponentProps,\n getArrowCoordsByMiddlewareData,\n useFloatingMiddlewaresBootstrap,\n useFloatingWithInteractions,\n usePlacementChangeCallback,\n} from '../../lib/floating';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { Subhead } from '../Typography/Subhead/Subhead';\n\ntype AllowedFloatingComponentProps = Pick<\n FloatingComponentProps,\n | 'arrowHeight'\n | 'arrowPadding'\n | 'hoverDelay'\n | 'placement'\n | 'offsetByMainAxis'\n | 'offsetByCrossAxis'\n | 'defaultShown'\n | 'onShownChange'\n | 'hideWhenReferenceHidden'\n | 'children'\n | 'zIndex'\n | 'usePortal'\n | 'onPlacementChange'\n | 'disableFlipMiddleware'\n>;\n\ntype AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps'>;\n\nexport interface TooltipProps extends AllowedFloatingComponentProps, AllowedTooltipBaseProps {\n /**\n * Передача `boolean` позволяет контролировать состояния показа и скрытия вручную. Используйте\n * совместно с `onShawnChange`.\n *\n * > Если нужно разово инициировать показ тултипа при первом рендере, то используйте `defaultShown`.\n */\n shown?: boolean;\n /**\n * Добавляет возможность наводить на тултип.\n */\n enableInteractive?: boolean;\n /**\n * Скрывает стрелку, указывающую на якорный элемент.\n */\n disableArrow?: boolean;\n /**\n * Отключает закрытие по клику.\n */\n disableCloseAfterClick?: boolean;\n /**\n * Отключает появление при фокусе.\n */\n disableTriggerOnFocus?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const Tooltip = ({\n // UseFloatingMiddlewaresBootstrapOptions\n placement: placementProp = 'bottom',\n arrowPadding = 10,\n arrowHeight = 8,\n offsetByMainAxis = 8,\n offsetByCrossAxis = 0,\n hideWhenReferenceHidden,\n disableFlipMiddleware = false,\n disableTriggerOnFocus = false,\n\n // useFloatingWithInteractions\n defaultShown,\n shown: shownProp,\n onShownChange,\n hoverDelay = 150,\n\n // инверсированные св-ва для useFloatingWithInteractions\n enableInteractive = false,\n disableArrow = false,\n disableCloseAfterClick = false,\n\n // Reference\n children,\n\n // AppRootProps\n usePortal,\n\n // TooltipBaseProps\n id: idProp,\n getRootRef,\n text,\n header,\n appearance = 'neutral',\n style: styleProp,\n className,\n zIndex = 'var(--vkui--z_index_popout)',\n onPlacementChange,\n ...popperProps\n}: TooltipProps): React.ReactNode => {\n const generatedId = React.useId();\n const tooltipId = idProp || generatedId;\n\n const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n placement: placementProp,\n\n offsetByMainAxis,\n offsetByCrossAxis,\n\n hideWhenReferenceHidden,\n\n arrow: !disableArrow,\n arrowRef,\n arrowPadding,\n arrowHeight,\n disableFlipMiddleware,\n });\n const {\n shown,\n willBeHide,\n placement,\n refs,\n referenceProps,\n floatingProps,\n middlewareData,\n onEscapeKeyDown,\n } = useFloatingWithInteractions({\n defaultShown,\n shown: shownProp,\n onShownChange,\n placement: strictPlacement,\n trigger: disableTriggerOnFocus ? 'hover' : ['hover', 'focus'],\n hoverDelay,\n closeAfterClick: !disableCloseAfterClick,\n disableInteractive: !enableInteractive,\n middlewares,\n });\n const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);\n\n usePlacementChangeCallback(placementProp, placement, onPlacementChange);\n\n let tooltip: React.ReactNode = null;\n if (shown) {\n referenceProps['aria-describedby'] = tooltipId;\n floatingProps.style.zIndex = zIndex;\n if (styleProp) {\n Object.assign(floatingProps.style, styleProp);\n }\n tooltip = (\n <AppRootPortal usePortal={usePortal}>\n <TooltipBase\n {...popperProps}\n {...floatingProps}\n id={tooltipId}\n getRootRef={tooltipRef}\n appearance={appearance}\n arrowProps={\n disableArrow\n ? undefined\n : {\n placement,\n coords: getArrowCoordsByMiddlewareData(middlewareData),\n getRootRef: setArrowRef,\n }\n }\n text={\n <React.Fragment>\n {hasReactNode(header) && <Subhead weight=\"2\">{header}</Subhead>}\n {hasReactNode(text) && <Subhead>{text}</Subhead>}\n </React.Fragment>\n }\n className={classNames(\n willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,\n className,\n )}\n />\n </AppRootPortal>\n );\n }\n const [, child] = usePatchChildren(children, referenceProps, refs.setReference);\n\n useGlobalEscKeyDown(shown, onEscapeKeyDown);\n\n return (\n <React.Fragment>\n {child}\n {tooltip}\n </React.Fragment>\n );\n};\n"],"names":["React","classNames","hasReactNode","useExternRef","useGlobalEscKeyDown","usePatchChildren","animationFadeClassNames","getArrowCoordsByMiddlewareData","useFloatingMiddlewaresBootstrap","useFloatingWithInteractions","usePlacementChangeCallback","AppRootPortal","TooltipBase","Subhead","Tooltip","placement","placementProp","arrowPadding","arrowHeight","offsetByMainAxis","offsetByCrossAxis","hideWhenReferenceHidden","disableFlipMiddleware","disableTriggerOnFocus","defaultShown","shown","shownProp","onShownChange","hoverDelay","enableInteractive","disableArrow","disableCloseAfterClick","children","usePortal","id","idProp","getRootRef","text","header","appearance","style","styleProp","className","zIndex","onPlacementChange","popperProps","generatedId","useId","tooltipId","arrowRef","setArrowRef","useState","middlewares","strictPlacement","arrow","willBeHide","refs","referenceProps","floatingProps","middlewareData","onEscapeKeyDown","trigger","closeAfterClick","disableInteractive","tooltipRef","setFloating","tooltip","Object","assign","arrowProps","undefined","coords","Fragment","weight","out","in","child","setReference"],"mappings":"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"}