@vkontakte/vkui 7.8.2 → 7.9.1

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 (282) hide show
  1. package/dist/components/Box/Box.d.ts +11 -0
  2. package/dist/components/Box/Box.d.ts.map +1 -0
  3. package/dist/components/Box/Box.js +25 -0
  4. package/dist/components/Box/Box.js.map +1 -0
  5. package/dist/components/CarouselBase/CarouselBase.d.ts +1 -1
  6. package/dist/components/CarouselBase/CarouselBase.d.ts.map +1 -1
  7. package/dist/components/CarouselBase/CarouselBase.js +6 -4
  8. package/dist/components/CarouselBase/CarouselBase.js.map +1 -1
  9. package/dist/components/CarouselBase/constants.d.ts +1 -1
  10. package/dist/components/CarouselBase/constants.d.ts.map +1 -1
  11. package/dist/components/CarouselBase/constants.js +1 -1
  12. package/dist/components/CarouselBase/constants.js.map +1 -1
  13. package/dist/components/CarouselBase/hooks.d.ts +3 -1
  14. package/dist/components/CarouselBase/hooks.d.ts.map +1 -1
  15. package/dist/components/CarouselBase/hooks.js +46 -6
  16. package/dist/components/CarouselBase/hooks.js.map +1 -1
  17. package/dist/components/CarouselBase/types.d.ts +12 -0
  18. package/dist/components/CarouselBase/types.d.ts.map +1 -1
  19. package/dist/components/CarouselBase/types.js.map +1 -1
  20. package/dist/components/Checkbox/Checkbox.d.ts +11 -2
  21. package/dist/components/Checkbox/Checkbox.d.ts.map +1 -1
  22. package/dist/components/Checkbox/Checkbox.js +44 -10
  23. package/dist/components/Checkbox/Checkbox.js.map +1 -1
  24. package/dist/components/Checkbox/CheckboxInput/CheckboxInput.d.ts +16 -3
  25. package/dist/components/Checkbox/CheckboxInput/CheckboxInput.d.ts.map +1 -1
  26. package/dist/components/Checkbox/CheckboxInput/CheckboxInput.js +32 -19
  27. package/dist/components/Checkbox/CheckboxInput/CheckboxInput.js.map +1 -1
  28. package/dist/components/Checkbox/CheckboxSimple/CheckboxSimple.d.ts +1 -1
  29. package/dist/components/Checkbox/CheckboxSimple/CheckboxSimple.d.ts.map +1 -1
  30. package/dist/components/Checkbox/CheckboxSimple/CheckboxSimple.js +39 -10
  31. package/dist/components/Checkbox/CheckboxSimple/CheckboxSimple.js.map +1 -1
  32. package/dist/components/ChipsInput/ChipsInput.d.ts +1 -1
  33. package/dist/components/ChipsInput/ChipsInput.d.ts.map +1 -1
  34. package/dist/components/ChipsInput/ChipsInput.js +32 -13
  35. package/dist/components/ChipsInput/ChipsInput.js.map +1 -1
  36. package/dist/components/ChipsInputBase/ChipsInputBase.d.ts +1 -1
  37. package/dist/components/ChipsInputBase/ChipsInputBase.d.ts.map +1 -1
  38. package/dist/components/ChipsInputBase/ChipsInputBase.js +52 -26
  39. package/dist/components/ChipsInputBase/ChipsInputBase.js.map +1 -1
  40. package/dist/components/ChipsInputBase/types.d.ts +13 -4
  41. package/dist/components/ChipsInputBase/types.d.ts.map +1 -1
  42. package/dist/components/ChipsInputBase/types.js.map +1 -1
  43. package/dist/components/ChipsSelect/ChipsSelect.d.ts +1 -1
  44. package/dist/components/ChipsSelect/ChipsSelect.d.ts.map +1 -1
  45. package/dist/components/ChipsSelect/ChipsSelect.js +67 -38
  46. package/dist/components/ChipsSelect/ChipsSelect.js.map +1 -1
  47. package/dist/components/CustomSelect/CustomSelect.d.ts +16 -2
  48. package/dist/components/CustomSelect/CustomSelect.d.ts.map +1 -1
  49. package/dist/components/CustomSelect/CustomSelect.js +99 -50
  50. package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
  51. package/dist/components/CustomSelect/CustomSelectInput/CustomSelectInput.d.ts +6 -2
  52. package/dist/components/CustomSelect/CustomSelectInput/CustomSelectInput.d.ts.map +1 -1
  53. package/dist/components/CustomSelect/CustomSelectInput/CustomSelectInput.js +38 -20
  54. package/dist/components/CustomSelect/CustomSelectInput/CustomSelectInput.js.map +1 -1
  55. package/dist/components/CustomSelect/helpers.d.ts +1 -0
  56. package/dist/components/CustomSelect/helpers.d.ts.map +1 -1
  57. package/dist/components/CustomSelect/helpers.js +11 -0
  58. package/dist/components/CustomSelect/helpers.js.map +1 -1
  59. package/dist/components/Div/Div.d.ts +3 -0
  60. package/dist/components/Div/Div.d.ts.map +1 -1
  61. package/dist/components/Div/Div.js +11 -1
  62. package/dist/components/Div/Div.js.map +1 -1
  63. package/dist/components/File/File.d.ts +16 -3
  64. package/dist/components/File/File.d.ts.map +1 -1
  65. package/dist/components/File/File.js +29 -17
  66. package/dist/components/File/File.js.map +1 -1
  67. package/dist/components/Input/Input.d.ts +16 -3
  68. package/dist/components/Input/Input.d.ts.map +1 -1
  69. package/dist/components/Input/Input.js +28 -13
  70. package/dist/components/Input/Input.js.map +1 -1
  71. package/dist/components/NativeSelect/NativeSelect.d.ts +17 -3
  72. package/dist/components/NativeSelect/NativeSelect.d.ts.map +1 -1
  73. package/dist/components/NativeSelect/NativeSelect.js +37 -14
  74. package/dist/components/NativeSelect/NativeSelect.js.map +1 -1
  75. package/dist/components/Radio/Radio.d.ts +18 -3
  76. package/dist/components/Radio/Radio.d.ts.map +1 -1
  77. package/dist/components/Radio/Radio.js +31 -11
  78. package/dist/components/Radio/Radio.js.map +1 -1
  79. package/dist/components/Radio/RadioInput/RadioInput.d.ts +16 -3
  80. package/dist/components/Radio/RadioInput/RadioInput.d.ts.map +1 -1
  81. package/dist/components/Radio/RadioInput/RadioInput.js +22 -11
  82. package/dist/components/Radio/RadioInput/RadioInput.js.map +1 -1
  83. package/dist/components/Search/Search.d.ts +16 -3
  84. package/dist/components/Search/Search.d.ts.map +1 -1
  85. package/dist/components/Search/Search.js +50 -28
  86. package/dist/components/Search/Search.js.map +1 -1
  87. package/dist/components/Select/Select.d.ts.map +1 -1
  88. package/dist/components/Select/Select.js +10 -4
  89. package/dist/components/Select/Select.js.map +1 -1
  90. package/dist/components/SelectionControl/SelectionControl.d.ts +2 -2
  91. package/dist/components/SelectionControl/SelectionControl.d.ts.map +1 -1
  92. package/dist/components/SelectionControl/SelectionControl.js.map +1 -1
  93. package/dist/components/Snackbar/Snackbar.d.ts +10 -1
  94. package/dist/components/Snackbar/Snackbar.d.ts.map +1 -1
  95. package/dist/components/Snackbar/Snackbar.js +20 -6
  96. package/dist/components/Snackbar/Snackbar.js.map +1 -1
  97. package/dist/components/SplitLayout/SplitLayout.d.ts +16 -3
  98. package/dist/components/SplitLayout/SplitLayout.d.ts.map +1 -1
  99. package/dist/components/SplitLayout/SplitLayout.js +24 -9
  100. package/dist/components/SplitLayout/SplitLayout.js.map +1 -1
  101. package/dist/components/Switch/Switch.d.ts +16 -3
  102. package/dist/components/Switch/Switch.d.ts.map +1 -1
  103. package/dist/components/Switch/Switch.js +32 -20
  104. package/dist/components/Switch/Switch.js.map +1 -1
  105. package/dist/components/Textarea/Textarea.d.ts +16 -3
  106. package/dist/components/Textarea/Textarea.d.ts.map +1 -1
  107. package/dist/components/Textarea/Textarea.js +36 -18
  108. package/dist/components/Textarea/Textarea.js.map +1 -1
  109. package/dist/components/WriteBar/WriteBar.d.ts +16 -3
  110. package/dist/components/WriteBar/WriteBar.d.ts.map +1 -1
  111. package/dist/components/WriteBar/WriteBar.js +28 -11
  112. package/dist/components/WriteBar/WriteBar.js.map +1 -1
  113. package/dist/components.css +1 -1
  114. package/dist/components.css.map +1 -1
  115. package/dist/cssm/components/Box/Box.js +19 -0
  116. package/dist/cssm/components/Box/Box.js.map +1 -0
  117. package/dist/cssm/components/CarouselBase/CarouselBase.js +4 -4
  118. package/dist/cssm/components/CarouselBase/CarouselBase.js.map +1 -1
  119. package/dist/cssm/components/CarouselBase/constants.js +1 -1
  120. package/dist/cssm/components/CarouselBase/constants.js.map +1 -1
  121. package/dist/cssm/components/CarouselBase/hooks.js +46 -6
  122. package/dist/cssm/components/CarouselBase/hooks.js.map +1 -1
  123. package/dist/cssm/components/CarouselBase/types.js.map +1 -1
  124. package/dist/cssm/components/Checkbox/Checkbox.js +29 -6
  125. package/dist/cssm/components/Checkbox/Checkbox.js.map +1 -1
  126. package/dist/cssm/components/Checkbox/CheckboxInput/CheckboxInput.js +24 -13
  127. package/dist/cssm/components/Checkbox/CheckboxInput/CheckboxInput.js.map +1 -1
  128. package/dist/cssm/components/Checkbox/CheckboxSimple/CheckboxSimple.js +24 -6
  129. package/dist/cssm/components/Checkbox/CheckboxSimple/CheckboxSimple.js.map +1 -1
  130. package/dist/cssm/components/ChipsInput/ChipsInput.js +25 -11
  131. package/dist/cssm/components/ChipsInput/ChipsInput.js.map +1 -1
  132. package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js +30 -12
  133. package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js.map +1 -1
  134. package/dist/cssm/components/ChipsInputBase/types.js.map +1 -1
  135. package/dist/cssm/components/ChipsSelect/ChipsSelect.js +49 -30
  136. package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map +1 -1
  137. package/dist/cssm/components/CustomSelect/CustomSelect.js +73 -41
  138. package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
  139. package/dist/cssm/components/CustomSelect/CustomSelectInput/CustomSelectInput.js +20 -9
  140. package/dist/cssm/components/CustomSelect/CustomSelectInput/CustomSelectInput.js.map +1 -1
  141. package/dist/cssm/components/CustomSelect/helpers.js +11 -0
  142. package/dist/cssm/components/CustomSelect/helpers.js.map +1 -1
  143. package/dist/cssm/components/Div/Div.js +11 -1
  144. package/dist/cssm/components/Div/Div.js.map +1 -1
  145. package/dist/cssm/components/File/File.js +20 -7
  146. package/dist/cssm/components/File/File.js.map +1 -1
  147. package/dist/cssm/components/Input/Input.js +20 -7
  148. package/dist/cssm/components/Input/Input.js.map +1 -1
  149. package/dist/cssm/components/MiniInfoCell/MiniInfoCell.module.css +1 -1
  150. package/dist/cssm/components/NativeSelect/NativeSelect.js +25 -8
  151. package/dist/cssm/components/NativeSelect/NativeSelect.js.map +1 -1
  152. package/dist/cssm/components/Radio/Radio.js +28 -8
  153. package/dist/cssm/components/Radio/Radio.js.map +1 -1
  154. package/dist/cssm/components/Radio/RadioInput/RadioInput.js +18 -6
  155. package/dist/cssm/components/Radio/RadioInput/RadioInput.js.map +1 -1
  156. package/dist/cssm/components/Search/Search.js +34 -17
  157. package/dist/cssm/components/Search/Search.js.map +1 -1
  158. package/dist/cssm/components/Select/Select.js +9 -1
  159. package/dist/cssm/components/Select/Select.js.map +1 -1
  160. package/dist/cssm/components/SelectionControl/SelectionControl.js.map +1 -1
  161. package/dist/cssm/components/Snackbar/Snackbar.js +11 -2
  162. package/dist/cssm/components/Snackbar/Snackbar.js.map +1 -1
  163. package/dist/cssm/components/SplitLayout/SplitLayout.js +22 -8
  164. package/dist/cssm/components/SplitLayout/SplitLayout.js.map +1 -1
  165. package/dist/cssm/components/Switch/Switch.js +29 -17
  166. package/dist/cssm/components/Switch/Switch.js.map +1 -1
  167. package/dist/cssm/components/Textarea/Textarea.js +22 -8
  168. package/dist/cssm/components/Textarea/Textarea.js.map +1 -1
  169. package/dist/cssm/components/WriteBar/WriteBar.js +24 -9
  170. package/dist/cssm/components/WriteBar/WriteBar.js.map +1 -1
  171. package/dist/cssm/hooks/useMergeProps.js +38 -0
  172. package/dist/cssm/hooks/useMergeProps.js.map +1 -0
  173. package/dist/cssm/index.js +2 -0
  174. package/dist/cssm/index.js.map +1 -1
  175. package/dist/cssm/lib/animation/useCSSTransition.js +1 -1
  176. package/dist/cssm/lib/animation/useCSSTransition.js.map +1 -1
  177. package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +1 -1
  178. package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
  179. package/dist/cssm/lib/fx.js +55 -8
  180. package/dist/cssm/lib/fx.js.map +1 -1
  181. package/dist/cssm/lib/layouts/gaps.js.map +1 -1
  182. package/dist/cssm/lib/layouts/helpers.js +21 -0
  183. package/dist/cssm/lib/layouts/helpers.js.map +1 -0
  184. package/dist/cssm/lib/layouts/index.js +1 -0
  185. package/dist/cssm/lib/layouts/index.js.map +1 -1
  186. package/dist/cssm/lib/layouts/layoutProps.js +89 -0
  187. package/dist/cssm/lib/layouts/layoutProps.js.map +1 -0
  188. package/dist/cssm/lib/layouts/resolveLayoutProps.js +36 -0
  189. package/dist/cssm/lib/layouts/resolveLayoutProps.js.map +1 -0
  190. package/dist/cssm/lib/layouts/types.js +3 -0
  191. package/dist/cssm/lib/layouts/types.js.map +1 -0
  192. package/dist/cssm/lib/warnOnce.js +1 -1
  193. package/dist/cssm/lib/warnOnce.js.map +1 -1
  194. package/dist/cssm/styles/layout.css +922 -0
  195. package/dist/hooks/useMergeProps.d.ts +6 -0
  196. package/dist/hooks/useMergeProps.d.ts.map +1 -0
  197. package/dist/hooks/useMergeProps.js +42 -0
  198. package/dist/hooks/useMergeProps.js.map +1 -0
  199. package/dist/index.d.ts +3 -0
  200. package/dist/index.d.ts.map +1 -1
  201. package/dist/index.js +1 -0
  202. package/dist/index.js.map +1 -1
  203. package/dist/lib/animation/useCSSTransition.js +1 -1
  204. package/dist/lib/animation/useCSSTransition.js.map +1 -1
  205. package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +1 -1
  206. package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
  207. package/dist/lib/fx.d.ts +8 -1
  208. package/dist/lib/fx.d.ts.map +1 -1
  209. package/dist/lib/fx.js +55 -8
  210. package/dist/lib/fx.js.map +1 -1
  211. package/dist/lib/layouts/gaps.d.ts +4 -5
  212. package/dist/lib/layouts/gaps.d.ts.map +1 -1
  213. package/dist/lib/layouts/gaps.js.map +1 -1
  214. package/dist/lib/layouts/helpers.d.ts +17 -0
  215. package/dist/lib/layouts/helpers.d.ts.map +1 -0
  216. package/dist/lib/layouts/helpers.js +21 -0
  217. package/dist/lib/layouts/helpers.js.map +1 -0
  218. package/dist/lib/layouts/index.d.ts +2 -0
  219. package/dist/lib/layouts/index.d.ts.map +1 -1
  220. package/dist/lib/layouts/index.js +1 -0
  221. package/dist/lib/layouts/index.js.map +1 -1
  222. package/dist/lib/layouts/layoutProps.d.ts +33 -0
  223. package/dist/lib/layouts/layoutProps.d.ts.map +1 -0
  224. package/dist/lib/layouts/layoutProps.js +89 -0
  225. package/dist/lib/layouts/layoutProps.js.map +1 -0
  226. package/dist/lib/layouts/resolveLayoutProps.d.ts +18 -0
  227. package/dist/lib/layouts/resolveLayoutProps.d.ts.map +1 -0
  228. package/dist/lib/layouts/resolveLayoutProps.js +35 -0
  229. package/dist/lib/layouts/resolveLayoutProps.js.map +1 -0
  230. package/dist/lib/layouts/types.d.ts +123 -0
  231. package/dist/lib/layouts/types.d.ts.map +1 -0
  232. package/dist/lib/layouts/types.js +3 -0
  233. package/dist/lib/layouts/types.js.map +1 -0
  234. package/dist/lib/warnOnce.js +1 -1
  235. package/dist/lib/warnOnce.js.map +1 -1
  236. package/dist/vkui.css +1 -1
  237. package/dist/vkui.css.map +1 -1
  238. package/package.json +2 -2
  239. package/src/components/Box/Box.tsx +26 -0
  240. package/src/components/CarouselBase/CarouselBase.tsx +11 -4
  241. package/src/components/CarouselBase/constants.ts +1 -1
  242. package/src/components/CarouselBase/hooks.ts +31 -6
  243. package/src/components/CarouselBase/types.ts +13 -0
  244. package/src/components/Checkbox/Checkbox.tsx +57 -7
  245. package/src/components/Checkbox/CheckboxInput/CheckboxInput.tsx +51 -18
  246. package/src/components/Checkbox/CheckboxSimple/CheckboxSimple.tsx +36 -6
  247. package/src/components/ChipsInput/ChipsInput.tsx +38 -11
  248. package/src/components/ChipsInputBase/ChipsInputBase.tsx +60 -17
  249. package/src/components/ChipsInputBase/types.ts +15 -4
  250. package/src/components/ChipsSelect/ChipsSelect.tsx +71 -33
  251. package/src/components/CustomSelect/CustomSelect.tsx +135 -45
  252. package/src/components/CustomSelect/CustomSelectInput/CustomSelectInput.tsx +48 -17
  253. package/src/components/CustomSelect/helpers.ts +23 -0
  254. package/src/components/Div/Div.tsx +13 -3
  255. package/src/components/File/File.tsx +48 -11
  256. package/src/components/Input/Input.tsx +51 -14
  257. package/src/components/MiniInfoCell/MiniInfoCell.module.css +1 -1
  258. package/src/components/NativeSelect/NativeSelect.tsx +57 -18
  259. package/src/components/Radio/Radio.tsx +51 -8
  260. package/src/components/Radio/RadioInput/RadioInput.tsx +35 -11
  261. package/src/components/Search/Search.tsx +80 -29
  262. package/src/components/Select/Select.tsx +22 -3
  263. package/src/components/SelectionControl/SelectionControl.tsx +2 -1
  264. package/src/components/Snackbar/Snackbar.tsx +35 -5
  265. package/src/components/SplitLayout/SplitLayout.tsx +46 -12
  266. package/src/components/Switch/Switch.tsx +62 -31
  267. package/src/components/Textarea/Textarea.tsx +58 -14
  268. package/src/components/WriteBar/WriteBar.tsx +59 -13
  269. package/src/hooks/useMergeProps.ts +66 -0
  270. package/src/index.ts +3 -0
  271. package/src/lib/animation/useCSSTransition.ts +1 -1
  272. package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts +1 -1
  273. package/src/lib/fx.ts +63 -8
  274. package/src/lib/layouts/gaps.ts +4 -5
  275. package/src/lib/layouts/helpers.ts +24 -0
  276. package/src/lib/layouts/index.ts +13 -0
  277. package/src/lib/layouts/layoutProps.ts +75 -0
  278. package/src/lib/layouts/resolveLayoutProps.ts +51 -0
  279. package/src/lib/layouts/types.ts +142 -0
  280. package/src/lib/warnOnce.ts +1 -1
  281. package/src/styles/layout.css +1 -0
  282. package/src/styles/layout.css.d.ts.map +1 -0
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type MouseEventHandler } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalOnEventOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { Keys } from '../../lib/accessibility';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';\nimport {\n getNewOptionDataDefault,\n getOptionLabelDefault,\n getOptionValueDefault,\n renderChipDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';\nimport {\n CustomSelectDropdown,\n type CustomSelectDropdownProps,\n} from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n type CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport {\n DEFAULT_EMPTY_TEXT,\n DEFAULT_SELECTED_BEHAVIOR,\n FOCUS_ACTION_NEXT,\n FOCUS_ACTION_PREV,\n isCreateNewOptionPreset,\n isEmptyOptionPreset,\n isNotServicePreset,\n renderOptionDefault,\n} from './constants';\nimport type { FocusActionType, OptionPreset } from './types';\nimport { useChipsSelect, type UseChipsSelectProps } from './useChipsSelect';\nimport styles from './ChipsSelect.module.css';\n\nconst findIndexAfter = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n startIndex = -1,\n) => {\n if (startIndex >= options.length - 1) {\n return -1;\n }\n return options.findIndex(\n (option, i) => i > startIndex && (!isNotServicePreset(option) || !option.disabled),\n );\n};\n\nconst findIndexBefore = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n endIndex: number = options.length,\n) => {\n let result = -1;\n if (endIndex <= 0) {\n return result;\n }\n for (let i = endIndex - 1; i >= 0; i--) {\n let option = options[i];\n\n if (!isNotServicePreset(option) || !option.disabled) {\n result = i;\n break;\n }\n }\n return result;\n};\n\nexport interface ChipsSelectProps<O extends ChipOption>\n extends ChipsInputBaseProps<O>,\n UseChipsSelectProps<O>,\n Pick<FormFieldProps, 'status' | 'mode' | 'before'>,\n Pick<CustomSelectDropdownProps, 'overscrollBehavior'> {\n /**\n * Расположение выпадающего списка.\n */\n placement?: 'top' | 'bottom';\n /**\n * Отрисовка Spinner вместо списка опций в выпадающем списке.\n */\n fetching?: boolean;\n /**\n * Закрытие выпадающего списка после выбора элемента.\n */\n closeAfterSelect?: boolean;\n /**\n * Ширина раскрывающегося списка зависит от контента.\n */\n dropdownAutoWidth?: boolean;\n /**\n * Принудительно использовать портал.\n */\n forceDropdownPortal?: boolean;\n /**\n * Передает атрибут `data-testid` для дропдауна.\n */\n dropdownTestId?: string;\n /**\n * Иконка раскрывающегося списка.\n */\n icon?: React.ReactNode;\n /**\n * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`).\n */\n addOnBlur?: boolean;\n /**\n * Отключает максимальную высоту по умолчанию.\n */\n noMaxHeight?: boolean;\n /**\n * Функция для отрисовки кастомной опции в выпадающем списке.\n */\n renderOption?: (props: CustomSelectOptionProps, option: O) => React.ReactNode;\n /**\n * Рендер-проп для кастомного рендера содержимого дропдауна.\n * В `defaultDropdownContent` содержится список опций.\n */\n renderDropdown?: ({\n defaultDropdownContent,\n }: {\n defaultDropdownContent: React.ReactNode;\n }) => React.ReactNode;\n /**\n * Событие срабатывающее перед `onChange`.\n */\n onChangeStart?: (event: React.MouseEvent | React.KeyboardEvent, option: O) => void;\n\n /**\n * Отступ от выпадающего списка.\n */\n dropdownOffsetDistance?: number;\n\n /**\n * Если `true`, то справа будет отображаться кнопка для очистки значения.\n */\n allowClearButton?: boolean;\n}\n\n/**\n * @see https://vkui.io/components/chips-select\n */\nexport const ChipsSelect = <Option extends ChipOption>({\n // FormFieldProps\n id: labelledbyId,\n getRootRef,\n className,\n status = 'default',\n icon: dropdownIconProp,\n onChangeStart,\n\n // CustomSelectDropdownProps\n options: optionsProp,\n placement: placementProp = 'bottom',\n closeAfterSelect = true,\n selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n emptyText = DEFAULT_EMPTY_TEXT,\n creatable = false,\n fetching = false,\n dropdownAutoWidth,\n forceDropdownPortal,\n noMaxHeight = false,\n filterFn = defaultFilterFn,\n sortFn = false,\n dropdownTestId,\n onClose,\n onOpen,\n overscrollBehavior,\n renderDropdown,\n\n // ChipsInputProps\n getRef,\n value: valueProp,\n defaultValue,\n inputValue: inputValueProp,\n defaultInputValue,\n disabled,\n readOnly,\n getOptionValue = getOptionValueDefault,\n getOptionLabel = getOptionLabelDefault,\n getNewOptionData = getNewOptionDataDefault,\n renderChip = renderChipDefault,\n renderOption = renderOptionDefault,\n onChange,\n onFocus: onFocusProp,\n onInputChange: onInputChangeProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n dropdownOffsetDistance = 0,\n allowClearButton,\n clearButtonTestId,\n delimiter,\n\n // a11y\n chipsListLabel,\n ...restProps\n}: ChipsSelectProps<Option>): React.ReactNode => {\n const {\n // Связано с ChipsInputProps\n // option\n value,\n addOptionFromInput,\n addOption,\n removeOption,\n clearOptions,\n // input\n inputRef: inputRefHook,\n inputValue,\n clearInput,\n onInputChange,\n\n // Связано с CustomSelectDropdownProps\n options,\n opened,\n setOpened,\n focusedOption,\n focusedOptionIndex,\n setFocusedOption,\n setFocusedOptionIndex,\n } = useChipsSelect({\n // option\n value: valueProp,\n defaultValue,\n onChange,\n getOptionValue,\n getOptionLabel,\n getNewOptionData,\n\n // input\n inputValue: inputValueProp,\n defaultInputValue,\n onInputChange: onInputChangeProp,\n\n // dropdown\n options: optionsProp,\n emptyText,\n creatable,\n filterFn,\n sortFn,\n selectedBehavior,\n onClose,\n onOpen,\n\n // other\n disabled,\n delimiter,\n });\n\n // Связано с ChipsInputProps\n const rootRef = useExternRef(getRootRef);\n const inputRef = useExternRef(getRef, inputRefHook);\n\n // Связано с CustomSelectDropdownProps\n const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<\n 'top' | 'bottom'\n >(placementProp);\n\n const onDropdownPlacementChange = React.useCallback((placement: Placement) => {\n if (placement.startsWith('top')) {\n setDropdownVerticalPlacement('top');\n } else if (placement.startsWith('bottom')) {\n setDropdownVerticalPlacement('bottom');\n }\n }, []);\n\n const dropdownId = React.useId();\n const dropdownCurrentItemId =\n focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;\n const dropdownScrollBoxRef = React.useRef<HTMLDivElement>(null);\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onFocusProp) {\n onFocusProp(event);\n }\n\n if (!readOnly) {\n setOpened(true);\n setFocusedOptionIndex(null);\n }\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlurProp) {\n onBlurProp(event);\n }\n\n // Не добавляем значение, если его нужно выбрать строго из списка\n if (!readOnly && !event.defaultPrevented && !creatable) {\n event.preventDefault();\n }\n };\n\n const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n const scrollToElement = (index: number, center = false) => {\n const dropdown = dropdownScrollBoxRef.current;\n const item = chipsSelectOptions[index];\n\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n if (!item || !dropdown) {\n return;\n }\n\n const dropdownHeight = dropdown.offsetHeight;\n const scrollTop = dropdown.scrollTop;\n const itemTop = item.offsetTop;\n const itemHeight = item.offsetHeight;\n\n /* istanbul ignore next: нет представления как воспроизвести */\n if (center) {\n dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n } else if (itemTop < scrollTop) {\n dropdown.scrollTop = itemTop;\n }\n };\n\n const focusOptionByIndex = (index: number, oldIndex: number | null) => {\n if (index === oldIndex) {\n /* istanbul ignore next: нет представления как воспроизвести */\n return;\n }\n\n const option = options[index];\n\n if (isNotServicePreset(option) && option.disabled) {\n return;\n }\n\n scrollToElement(index);\n setFocusedOptionIndex(index);\n };\n\n const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n let index = nextIndex === null ? -1 : nextIndex;\n\n if (type === FOCUS_ACTION_NEXT) {\n const nextIndex = findIndexAfter(options, index);\n index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n } else if (type === FOCUS_ACTION_PREV) {\n const beforeIndex = findIndexBefore(options, index);\n index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n }\n\n focusOptionByIndex(index, focusedOptionIndex);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (onKeyDownProp) {\n onKeyDownProp(event);\n }\n\n if (event.defaultPrevented || readOnly) {\n return;\n }\n\n switch (event.key) {\n case Keys.ARROW_UP:\n case Keys.ARROW_DOWN:\n event.preventDefault();\n\n if (!opened) {\n setOpened(true);\n focusOption(null, FOCUS_ACTION_NEXT);\n } else {\n focusOption(\n focusedOptionIndex,\n event.key === Keys.ARROW_UP ? FOCUS_ACTION_PREV : FOCUS_ACTION_NEXT,\n );\n }\n break;\n case Keys.ENTER: {\n if (!opened) {\n break;\n }\n if (focusedOptionIndex != null) {\n const foundOption = options[focusedOptionIndex];\n if (foundOption && isNotServicePreset(foundOption)) {\n event.preventDefault();\n\n if (onChangeStart) {\n onChangeStart(event, foundOption);\n }\n\n addOption(foundOption);\n setFocusedOptionIndex(null);\n clearInput();\n if (closeAfterSelect) {\n setOpened(false);\n }\n\n break;\n }\n }\n\n if (!creatable) {\n event.preventDefault();\n }\n break;\n }\n case Keys.ESCAPE:\n case Keys.TAB:\n if (opened) {\n setOpened(false);\n }\n }\n };\n\n React.useEffect(() => {\n if (focusedOptionIndex === null) {\n setFocusedOption(null);\n } else {\n const foundFocusedOptionIndex = options[focusedOptionIndex];\n\n if (foundFocusedOptionIndex && isNotServicePreset(foundFocusedOptionIndex)) {\n setFocusedOption(foundFocusedOptionIndex);\n }\n }\n }, [options, focusedOptionIndex, setFocusedOption]);\n\n const onDropdownMouseLeave = React.useCallback(() => {\n setFocusedOptionIndex(null);\n }, [setFocusedOptionIndex]);\n\n const handleClickOutside = React.useCallback(() => {\n setOpened(false);\n }, [setOpened]);\n\n useGlobalOnEventOutside(\n 'mousedown', // см. https://github.com/VKCOM/VKUI/pull/8582\n handleClickOutside,\n opened ? rootRef : null,\n opened ? dropdownScrollBoxRef : null,\n );\n\n const onDropdownIconClick: MouseEventHandler<SVGSVGElement> = React.useCallback(\n (e) => {\n e.preventDefault();\n setOpened(!opened);\n },\n [opened, setOpened],\n );\n\n const dropdownContent = React.useMemo(() => {\n const defaultDropdownContent = options.map((option, index) => {\n const dropdownItemId = `${dropdownId}-${index}`;\n\n if (isEmptyOptionPreset(option)) {\n return (\n <Footnote key=\"empty-text\" className={styles.empty}>\n {option.placeholder}\n </Footnote>\n );\n }\n if (isCreateNewOptionPreset(option)) {\n return (\n <CustomSelectOption\n key=\"create-new-option\"\n id={dropdownItemId}\n hovered={focusedOptionIndex === index}\n onMouseDown={() => addOptionFromInput(inputValue)}\n onMouseEnter={() => setFocusedOptionIndex(index)}\n >\n {option.actionText}\n </CustomSelectOption>\n );\n }\n return (\n <React.Fragment key={`${typeof option.value}-${option.value}`}>\n {renderOption(\n {\n id: dropdownItemId,\n disabled: option.disabled,\n hovered: focusedOption\n ? getOptionValue(option) === getOptionValue(focusedOption)\n : false,\n children: option.label,\n selected: !!value.find(\n (selectedOption: Option) =>\n getOptionValue(selectedOption) === getOptionValue(option),\n ),\n getRootRef(node) {\n if (node) {\n chipsSelectOptions[index] = node;\n }\n },\n onMouseDown(event: React.MouseEvent<HTMLDivElement>) {\n if (option.disabled) {\n return;\n }\n if (onChangeStart) {\n onChangeStart(event, option);\n }\n\n if (!event.defaultPrevented) {\n closeAfterSelect && setOpened(false);\n addOption(option);\n clearInput();\n }\n },\n onMouseEnter() {\n setFocusedOptionIndex(index);\n },\n },\n option,\n )}\n </React.Fragment>\n );\n });\n\n if (renderDropdown) {\n return renderDropdown({\n defaultDropdownContent,\n });\n }\n return defaultDropdownContent;\n }, [\n addOption,\n addOptionFromInput,\n chipsSelectOptions,\n clearInput,\n closeAfterSelect,\n dropdownId,\n focusedOption,\n focusedOptionIndex,\n getOptionValue,\n inputValue,\n onChangeStart,\n options,\n renderDropdown,\n renderOption,\n setFocusedOptionIndex,\n setOpened,\n value,\n ]);\n\n const openedClassNames = React.useMemo(\n () =>\n (opened &&\n dropdownOffsetDistance === 0 &&\n (dropdownVerticalPlacement.includes('top') ? styles.popUp : styles.popDown)) ||\n undefined,\n [dropdownOffsetDistance, opened, dropdownVerticalPlacement],\n );\n\n const clearButtonShown = allowClearButton && (!!value.length || !!inputValue.length);\n\n return (\n <>\n <ChipsInputBase\n {...restProps}\n disabled={disabled}\n readOnly={readOnly}\n clearButtonShown={clearButtonShown}\n clearButtonTestId={clearButtonTestId}\n // FormFieldProps\n id={labelledbyId}\n getRootRef={rootRef}\n className={classNames(styles.host, openedClassNames, className)}\n status={status}\n after={\n dropdownIconProp || (\n <DropdownIcon\n opened={opened}\n onClick={onDropdownIconClick}\n className={classNames(\n styles.dropdownIcon,\n clearButtonShown && styles.dropdownIconWithOffset,\n )}\n />\n )\n }\n // option\n value={value}\n onAddChipOption={addOptionFromInput}\n onRemoveChipOption={removeOption}\n renderChip={renderChip}\n onClear={clearOptions}\n // input\n getRef={inputRef}\n inputValue={inputValue}\n onInputChange={onInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n // a11y\n role=\"combobox\"\n aria-expanded={opened}\n aria-autocomplete=\"list\"\n aria-activedescendant={opened ? dropdownCurrentItemId : undefined}\n aria-haspopup=\"listbox\"\n chipsListLabel={chipsListLabel}\n />\n {opened && (\n <CustomSelectDropdown\n data-testid={dropdownTestId}\n targetRef={rootRef}\n placement={dropdownVerticalPlacement}\n scrollBoxRef={dropdownScrollBoxRef}\n onPlacementChange={onDropdownPlacementChange}\n onMouseLeave={onDropdownMouseLeave}\n fetching={fetching}\n autoWidth={dropdownAutoWidth}\n forcePortal={forceDropdownPortal}\n noMaxHeight={noMaxHeight}\n offsetDistance={dropdownOffsetDistance}\n overscrollBehavior={overscrollBehavior}\n // a11y\n id={dropdownId}\n role=\"listbox\"\n aria-labelledby={labelledbyId}\n >\n {dropdownContent}\n </CustomSelectDropdown>\n )}\n </>\n );\n};\n"],"names":["React","classNames","useExternRef","useGlobalOnEventOutside","Keys","defaultFilterFn","ChipsInputBase","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","renderChipDefault","CustomSelectDropdown","CustomSelectOption","DropdownIcon","Footnote","DEFAULT_EMPTY_TEXT","DEFAULT_SELECTED_BEHAVIOR","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","isCreateNewOptionPreset","isEmptyOptionPreset","isNotServicePreset","renderOptionDefault","useChipsSelect","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","ChipsSelect","id","labelledbyId","getRootRef","className","status","icon","dropdownIconProp","onChangeStart","optionsProp","placement","placementProp","closeAfterSelect","selectedBehavior","emptyText","creatable","fetching","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","filterFn","sortFn","dropdownTestId","onClose","onOpen","overscrollBehavior","renderDropdown","getRef","value","valueProp","defaultValue","inputValue","inputValueProp","defaultInputValue","readOnly","getOptionValue","getOptionLabel","getNewOptionData","renderChip","renderOption","onChange","onFocus","onFocusProp","onInputChange","onInputChangeProp","onBlur","onBlurProp","onKeyDown","onKeyDownProp","dropdownOffsetDistance","allowClearButton","clearButtonTestId","delimiter","chipsListLabel","restProps","addOptionFromInput","addOption","removeOption","clearOptions","inputRef","inputRefHook","clearInput","opened","setOpened","focusedOption","focusedOptionIndex","setFocusedOption","setFocusedOptionIndex","rootRef","dropdownVerticalPlacement","setDropdownVerticalPlacement","useState","onDropdownPlacementChange","useCallback","startsWith","dropdownId","useId","dropdownCurrentItemId","undefined","dropdownScrollBoxRef","useRef","handleFocus","event","handleBlur","defaultPrevented","preventDefault","chipsSelectOptions","current","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","beforeIndex","handleKeyDown","key","ARROW_UP","ARROW_DOWN","ENTER","foundOption","ESCAPE","TAB","useEffect","foundFocusedOptionIndex","onDropdownMouseLeave","handleClickOutside","onDropdownIconClick","e","dropdownContent","useMemo","defaultDropdownContent","map","dropdownItemId","placeholder","hovered","onMouseDown","onMouseEnter","actionText","Fragment","children","label","selected","find","selectedOption","node","openedClassNames","includes","clearButtonShown","after","onClick","onAddChipOption","onRemoveChipOption","onClear","role","aria-expanded","aria-autocomplete","aria-activedescendant","aria-haspopup","data-testid","targetRef","scrollBoxRef","onPlacementChange","onMouseLeave","autoWidth","forcePortal","offsetDistance","aria-labelledby"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type MouseEventHandler } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalOnEventOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { Keys } from '../../lib/accessibility';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';\nimport {\n getNewOptionDataDefault,\n getOptionLabelDefault,\n getOptionValueDefault,\n renderChipDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';\nimport {\n CustomSelectDropdown,\n type CustomSelectDropdownProps,\n} from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n type CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport {\n DEFAULT_EMPTY_TEXT,\n DEFAULT_SELECTED_BEHAVIOR,\n FOCUS_ACTION_NEXT,\n FOCUS_ACTION_PREV,\n isCreateNewOptionPreset,\n isEmptyOptionPreset,\n isNotServicePreset,\n renderOptionDefault,\n} from './constants';\nimport type { FocusActionType, OptionPreset } from './types';\nimport { useChipsSelect, type UseChipsSelectProps } from './useChipsSelect';\nimport styles from './ChipsSelect.module.css';\n\nconst findIndexAfter = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n startIndex = -1,\n) => {\n if (startIndex >= options.length - 1) {\n return -1;\n }\n return options.findIndex(\n (option, i) => i > startIndex && (!isNotServicePreset(option) || !option.disabled),\n );\n};\n\nconst findIndexBefore = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n endIndex: number = options.length,\n) => {\n let result = -1;\n if (endIndex <= 0) {\n return result;\n }\n for (let i = endIndex - 1; i >= 0; i--) {\n let option = options[i];\n\n if (!isNotServicePreset(option) || !option.disabled) {\n result = i;\n break;\n }\n }\n return result;\n};\n\nexport interface ChipsSelectProps<O extends ChipOption>\n extends ChipsInputBaseProps<O>,\n UseChipsSelectProps<O>,\n Pick<FormFieldProps, 'status' | 'mode' | 'before'>,\n Pick<CustomSelectDropdownProps, 'overscrollBehavior'> {\n /**\n * Расположение выпадающего списка.\n */\n placement?: 'top' | 'bottom';\n /**\n * Отрисовка Spinner вместо списка опций в выпадающем списке.\n */\n fetching?: boolean;\n /**\n * Закрытие выпадающего списка после выбора элемента.\n */\n closeAfterSelect?: boolean;\n /**\n * Ширина раскрывающегося списка зависит от контента.\n */\n dropdownAutoWidth?: boolean;\n /**\n * Принудительно использовать портал.\n */\n forceDropdownPortal?: boolean;\n /**\n * Передает атрибут `data-testid` для дропдауна.\n */\n dropdownTestId?: string;\n /**\n * Иконка раскрывающегося списка.\n */\n icon?: React.ReactNode;\n /**\n * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`).\n */\n addOnBlur?: boolean;\n /**\n * Отключает максимальную высоту по умолчанию.\n */\n noMaxHeight?: boolean;\n /**\n * Функция для отрисовки кастомной опции в выпадающем списке.\n */\n renderOption?: (props: CustomSelectOptionProps, option: O) => React.ReactNode;\n /**\n * Рендер-проп для кастомного рендера содержимого дропдауна.\n * В `defaultDropdownContent` содержится список опций.\n */\n renderDropdown?: ({\n defaultDropdownContent,\n }: {\n defaultDropdownContent: React.ReactNode;\n }) => React.ReactNode;\n /**\n * Событие срабатывающее перед `onChange`.\n */\n onChangeStart?: (event: React.MouseEvent | React.KeyboardEvent, option: O) => void;\n\n /**\n * Отступ от выпадающего списка.\n */\n dropdownOffsetDistance?: number;\n\n /**\n * Если `true`, то справа будет отображаться кнопка для очистки значения.\n */\n allowClearButton?: boolean;\n}\n\n/**\n * @see https://vkui.io/components/chips-select\n */\nexport const ChipsSelect = <Option extends ChipOption>({\n // FormFieldProps\n getRootRef,\n className,\n status = 'default',\n icon: dropdownIconProp,\n onChangeStart,\n\n // CustomSelectDropdownProps\n options: optionsProp,\n placement: placementProp = 'bottom',\n closeAfterSelect = true,\n selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n emptyText = DEFAULT_EMPTY_TEXT,\n creatable = false,\n fetching = false,\n dropdownAutoWidth,\n forceDropdownPortal,\n noMaxHeight = false,\n filterFn = defaultFilterFn,\n sortFn = false,\n dropdownTestId,\n onClose,\n onOpen,\n overscrollBehavior,\n renderDropdown,\n\n // ChipsInputProps\n getRef,\n value: valueProp,\n defaultValue,\n inputValue: inputValueProp,\n defaultInputValue: defaultInputValueProp,\n getOptionValue = getOptionValueDefault,\n getOptionLabel = getOptionLabelDefault,\n getNewOptionData = getNewOptionDataDefault,\n renderChip = renderChipDefault,\n renderOption = renderOptionDefault,\n onChange,\n onInputChange: onInputChangeProp,\n dropdownOffsetDistance = 0,\n allowClearButton,\n clearButtonTestId,\n delimiter,\n\n // a11y\n chipsListLabel,\n\n // input native props\n disabled: disabledProp,\n readOnly: readOnlyProp,\n id: idProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n\n slotProps,\n ...restProps\n}: ChipsSelectProps<Option>): React.ReactNode => {\n const {\n getRootRef: getInputRef,\n value: resolvedInputValue,\n defaultValue: resolvedDefaultInputValue,\n onChange: resolvedOnInputChange,\n disabled,\n readOnly,\n id: labelledbyId,\n onFocus,\n onBlur,\n onKeyDown,\n ...inputRest\n } = useMergeProps(\n {\n getRootRef: getRef,\n value: inputValueProp,\n defaultValue: defaultInputValueProp,\n onChange: onInputChangeProp,\n disabled: disabledProp,\n readOnly: readOnlyProp,\n id: idProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n },\n slotProps?.input,\n );\n\n const {\n // Связано с ChipsInputProps\n // option\n value,\n addOptionFromInput,\n addOption,\n removeOption,\n clearOptions,\n // input\n inputRef: inputRefHook,\n inputValue,\n clearInput,\n onInputChange,\n\n // Связано с CustomSelectDropdownProps\n options,\n opened,\n setOpened,\n focusedOption,\n focusedOptionIndex,\n setFocusedOption,\n setFocusedOptionIndex,\n } = useChipsSelect({\n // option\n value: valueProp,\n defaultValue,\n onChange,\n getOptionValue,\n getOptionLabel,\n getNewOptionData,\n\n // input\n inputValue: resolvedInputValue as string,\n defaultInputValue: resolvedDefaultInputValue as string,\n onInputChange: resolvedOnInputChange,\n\n // dropdown\n options: optionsProp,\n emptyText,\n creatable,\n filterFn,\n sortFn,\n selectedBehavior,\n onClose,\n onOpen,\n\n // other\n disabled,\n delimiter,\n });\n\n // Связано с ChipsInputProps\n const rootRef = useExternRef(getRootRef);\n const inputRef = useExternRef(getInputRef, inputRefHook);\n\n // Связано с CustomSelectDropdownProps\n const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<\n 'top' | 'bottom'\n >(placementProp);\n\n const onDropdownPlacementChange = React.useCallback((placement: Placement) => {\n if (placement.startsWith('top')) {\n setDropdownVerticalPlacement('top');\n } else if (placement.startsWith('bottom')) {\n setDropdownVerticalPlacement('bottom');\n }\n }, []);\n\n const dropdownId = React.useId();\n const dropdownCurrentItemId =\n focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;\n const dropdownScrollBoxRef = React.useRef<HTMLDivElement>(null);\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onFocus) {\n onFocus(event);\n }\n\n if (!readOnly) {\n setOpened(true);\n setFocusedOptionIndex(null);\n }\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(event);\n }\n\n // Не добавляем значение, если его нужно выбрать строго из списка\n if (!readOnly && !event.defaultPrevented && !creatable) {\n event.preventDefault();\n }\n };\n\n const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n const scrollToElement = (index: number, center = false) => {\n const dropdown = dropdownScrollBoxRef.current;\n const item = chipsSelectOptions[index];\n\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n if (!item || !dropdown) {\n return;\n }\n\n const dropdownHeight = dropdown.offsetHeight;\n const scrollTop = dropdown.scrollTop;\n const itemTop = item.offsetTop;\n const itemHeight = item.offsetHeight;\n\n /* istanbul ignore next: нет представления как воспроизвести */\n if (center) {\n dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n } else if (itemTop < scrollTop) {\n dropdown.scrollTop = itemTop;\n }\n };\n\n const focusOptionByIndex = (index: number, oldIndex: number | null) => {\n if (index === oldIndex) {\n /* istanbul ignore next: нет представления как воспроизвести */\n return;\n }\n\n const option = options[index];\n\n if (isNotServicePreset(option) && option.disabled) {\n return;\n }\n\n scrollToElement(index);\n setFocusedOptionIndex(index);\n };\n\n const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n let index = nextIndex === null ? -1 : nextIndex;\n\n if (type === FOCUS_ACTION_NEXT) {\n const nextIndex = findIndexAfter(options, index);\n index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n } else if (type === FOCUS_ACTION_PREV) {\n const beforeIndex = findIndexBefore(options, index);\n index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n }\n\n focusOptionByIndex(index, focusedOptionIndex);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (onKeyDown) {\n onKeyDown(event);\n }\n\n if (event.defaultPrevented || readOnly) {\n return;\n }\n\n switch (event.key) {\n case Keys.ARROW_UP:\n case Keys.ARROW_DOWN:\n event.preventDefault();\n\n if (!opened) {\n setOpened(true);\n focusOption(null, FOCUS_ACTION_NEXT);\n } else {\n focusOption(\n focusedOptionIndex,\n event.key === Keys.ARROW_UP ? FOCUS_ACTION_PREV : FOCUS_ACTION_NEXT,\n );\n }\n break;\n case Keys.ENTER: {\n if (!opened) {\n break;\n }\n if (focusedOptionIndex != null) {\n const foundOption = options[focusedOptionIndex];\n if (foundOption && isNotServicePreset(foundOption)) {\n event.preventDefault();\n\n if (onChangeStart) {\n onChangeStart(event, foundOption);\n }\n\n addOption(foundOption);\n setFocusedOptionIndex(null);\n clearInput();\n if (closeAfterSelect) {\n setOpened(false);\n }\n\n break;\n }\n }\n\n if (!creatable) {\n event.preventDefault();\n }\n break;\n }\n case Keys.ESCAPE:\n case Keys.TAB:\n if (opened) {\n setOpened(false);\n }\n }\n };\n\n React.useEffect(() => {\n if (focusedOptionIndex === null) {\n setFocusedOption(null);\n } else {\n const foundFocusedOptionIndex = options[focusedOptionIndex];\n\n if (foundFocusedOptionIndex && isNotServicePreset(foundFocusedOptionIndex)) {\n setFocusedOption(foundFocusedOptionIndex);\n }\n }\n }, [options, focusedOptionIndex, setFocusedOption]);\n\n const onDropdownMouseLeave = React.useCallback(() => {\n setFocusedOptionIndex(null);\n }, [setFocusedOptionIndex]);\n\n const handleClickOutside = React.useCallback(() => {\n setOpened(false);\n }, [setOpened]);\n\n useGlobalOnEventOutside(\n 'mousedown', // см. https://github.com/VKCOM/VKUI/pull/8582\n handleClickOutside,\n opened ? rootRef : null,\n opened ? dropdownScrollBoxRef : null,\n );\n\n const onDropdownIconClick: MouseEventHandler<SVGSVGElement> = React.useCallback(\n (e) => {\n e.preventDefault();\n setOpened(!opened);\n },\n [opened, setOpened],\n );\n\n const dropdownContent = React.useMemo(() => {\n const defaultDropdownContent = options.map((option, index) => {\n const dropdownItemId = `${dropdownId}-${index}`;\n\n if (isEmptyOptionPreset(option)) {\n return (\n <Footnote key=\"empty-text\" className={styles.empty}>\n {option.placeholder}\n </Footnote>\n );\n }\n if (isCreateNewOptionPreset(option)) {\n return (\n <CustomSelectOption\n key=\"create-new-option\"\n id={dropdownItemId}\n hovered={focusedOptionIndex === index}\n onMouseDown={() => addOptionFromInput(inputValue)}\n onMouseEnter={() => setFocusedOptionIndex(index)}\n >\n {option.actionText}\n </CustomSelectOption>\n );\n }\n return (\n <React.Fragment key={`${typeof option.value}-${option.value}`}>\n {renderOption(\n {\n id: dropdownItemId,\n disabled: option.disabled,\n hovered: focusedOption\n ? getOptionValue(option) === getOptionValue(focusedOption)\n : false,\n children: option.label,\n selected: !!value.find(\n (selectedOption: Option) =>\n getOptionValue(selectedOption) === getOptionValue(option),\n ),\n getRootRef(node) {\n if (node) {\n chipsSelectOptions[index] = node;\n }\n },\n onMouseDown(event: React.MouseEvent<HTMLDivElement>) {\n if (option.disabled) {\n return;\n }\n if (onChangeStart) {\n onChangeStart(event, option);\n }\n\n if (!event.defaultPrevented) {\n closeAfterSelect && setOpened(false);\n addOption(option);\n clearInput();\n }\n },\n onMouseEnter() {\n setFocusedOptionIndex(index);\n },\n },\n option,\n )}\n </React.Fragment>\n );\n });\n\n if (renderDropdown) {\n return renderDropdown({\n defaultDropdownContent,\n });\n }\n return defaultDropdownContent;\n }, [\n addOption,\n addOptionFromInput,\n chipsSelectOptions,\n clearInput,\n closeAfterSelect,\n dropdownId,\n focusedOption,\n focusedOptionIndex,\n getOptionValue,\n inputValue,\n onChangeStart,\n options,\n renderDropdown,\n renderOption,\n setFocusedOptionIndex,\n setOpened,\n value,\n ]);\n\n const openedClassNames = React.useMemo(\n () =>\n (opened &&\n dropdownOffsetDistance === 0 &&\n (dropdownVerticalPlacement.includes('top') ? styles.popUp : styles.popDown)) ||\n undefined,\n [dropdownOffsetDistance, opened, dropdownVerticalPlacement],\n );\n\n const clearButtonShown = allowClearButton && (!!value.length || !!inputValue.length);\n\n return (\n <>\n <ChipsInputBase\n clearButtonShown={clearButtonShown}\n clearButtonTestId={clearButtonTestId}\n // FormFieldProps\n getRootRef={rootRef}\n className={classNames(styles.host, openedClassNames, className)}\n status={status}\n after={\n dropdownIconProp || (\n <DropdownIcon\n opened={opened}\n onClick={onDropdownIconClick}\n className={classNames(\n styles.dropdownIcon,\n clearButtonShown && styles.dropdownIconWithOffset,\n )}\n />\n )\n }\n // option\n value={value}\n onAddChipOption={addOptionFromInput}\n onRemoveChipOption={removeOption}\n renderChip={renderChip}\n onClear={clearOptions}\n // a11y\n chipsListLabel={chipsListLabel}\n slotProps={{\n ...slotProps,\n input: {\n 'role': 'combobox',\n 'aria-expanded': opened,\n 'aria-autocomplete': 'list',\n 'aria-activedescendant': opened ? dropdownCurrentItemId : undefined,\n 'aria-haspopup': 'listbox',\n 'getRootRef': inputRef,\n 'value': inputValue,\n 'onChange': onInputChange,\n disabled,\n readOnly,\n 'id': labelledbyId,\n 'onFocus': handleFocus,\n 'onBlur': handleBlur,\n 'onKeyDown': handleKeyDown,\n ...inputRest,\n },\n }}\n {...restProps}\n />\n {opened && (\n <CustomSelectDropdown\n data-testid={dropdownTestId}\n targetRef={rootRef}\n placement={dropdownVerticalPlacement}\n scrollBoxRef={dropdownScrollBoxRef}\n onPlacementChange={onDropdownPlacementChange}\n onMouseLeave={onDropdownMouseLeave}\n fetching={fetching}\n autoWidth={dropdownAutoWidth}\n forcePortal={forceDropdownPortal}\n noMaxHeight={noMaxHeight}\n offsetDistance={dropdownOffsetDistance}\n overscrollBehavior={overscrollBehavior}\n // a11y\n id={dropdownId}\n role=\"listbox\"\n aria-labelledby={labelledbyId}\n >\n {dropdownContent}\n </CustomSelectDropdown>\n )}\n </>\n );\n};\n"],"names":["React","classNames","useExternRef","useGlobalOnEventOutside","useMergeProps","Keys","defaultFilterFn","ChipsInputBase","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","renderChipDefault","CustomSelectDropdown","CustomSelectOption","DropdownIcon","Footnote","DEFAULT_EMPTY_TEXT","DEFAULT_SELECTED_BEHAVIOR","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","isCreateNewOptionPreset","isEmptyOptionPreset","isNotServicePreset","renderOptionDefault","useChipsSelect","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","ChipsSelect","getRootRef","className","status","icon","dropdownIconProp","onChangeStart","optionsProp","placement","placementProp","closeAfterSelect","selectedBehavior","emptyText","creatable","fetching","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","filterFn","sortFn","dropdownTestId","onClose","onOpen","overscrollBehavior","renderDropdown","getRef","value","valueProp","defaultValue","inputValue","inputValueProp","defaultInputValue","defaultInputValueProp","getOptionValue","getOptionLabel","getNewOptionData","renderChip","renderOption","onChange","onInputChange","onInputChangeProp","dropdownOffsetDistance","allowClearButton","clearButtonTestId","delimiter","chipsListLabel","disabledProp","readOnly","readOnlyProp","id","idProp","onFocus","onFocusProp","onBlur","onBlurProp","onKeyDown","onKeyDownProp","slotProps","restProps","input","getInputRef","resolvedInputValue","resolvedDefaultInputValue","resolvedOnInputChange","labelledbyId","inputRest","addOptionFromInput","addOption","removeOption","clearOptions","inputRef","inputRefHook","clearInput","opened","setOpened","focusedOption","focusedOptionIndex","setFocusedOption","setFocusedOptionIndex","rootRef","dropdownVerticalPlacement","setDropdownVerticalPlacement","useState","onDropdownPlacementChange","useCallback","startsWith","dropdownId","useId","dropdownCurrentItemId","undefined","dropdownScrollBoxRef","useRef","handleFocus","event","handleBlur","defaultPrevented","preventDefault","chipsSelectOptions","current","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","beforeIndex","handleKeyDown","key","ARROW_UP","ARROW_DOWN","ENTER","foundOption","ESCAPE","TAB","useEffect","foundFocusedOptionIndex","onDropdownMouseLeave","handleClickOutside","onDropdownIconClick","e","dropdownContent","useMemo","defaultDropdownContent","map","dropdownItemId","placeholder","hovered","onMouseDown","onMouseEnter","actionText","Fragment","children","label","selected","find","selectedOption","node","openedClassNames","includes","clearButtonShown","after","onClick","onAddChipOption","onRemoveChipOption","onClear","data-testid","targetRef","scrollBoxRef","onPlacementChange","onMouseLeave","autoWidth","forcePortal","offsetDistance","role","aria-labelledby"],"mappings":"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"}
@@ -1,15 +1,27 @@
1
1
  import * as React from 'react';
2
2
  import { type FilterFn } from '../../lib/select';
3
+ import { type HasDataAttribute, type HasRootRef } from '../../types';
3
4
  import { type CustomSelectDropdownProps } from '../CustomSelectDropdown/CustomSelectDropdown';
4
5
  import type { FormFieldProps } from '../FormField/FormField';
5
- import type { NativeSelectProps } from '../NativeSelect/NativeSelect';
6
+ import { type NativeSelectProps } from '../NativeSelect/NativeSelect';
6
7
  import type { SelectType } from '../Select/Select';
7
8
  import { type CustomSelectClearButtonProps } from './CustomSelectClearButton';
8
9
  import { type CustomSelectInputProps } from './CustomSelectInput/CustomSelectInput';
9
10
  import type { CustomSelectOptionInterface, CustomSelectRenderOption, PopupDirection } from './types';
10
11
  export type { CustomSelectClearButtonProps };
11
- export interface SelectProps<OptionInterfaceT extends CustomSelectOptionInterface = CustomSelectOptionInterface> extends NativeSelectProps, Omit<FormFieldProps, 'maxHeight'>, Pick<CustomSelectDropdownProps, 'overscrollBehavior'>, Pick<CustomSelectInputProps, 'minLength' | 'maxLength' | 'pattern' | 'readOnly'> {
12
+ export interface SelectProps<OptionInterfaceT extends CustomSelectOptionInterface = CustomSelectOptionInterface> extends Omit<NativeSelectProps, 'slotProps'>, Omit<FormFieldProps, 'maxHeight'>, Pick<CustomSelectDropdownProps, 'overscrollBehavior'>, Pick<CustomSelectInputProps, 'minLength' | 'maxLength' | 'pattern' | 'readOnly'> {
12
13
  /**
14
+ * Свойства, которые можно прокинуть внутрь компонента:
15
+ * - `root`: свойства для прокидывания в корень компонента;
16
+ * - `select`: свойства для прокидывания в нативный `select`;
17
+ * - `input`: свойства для прокидывания в нативный `input`.
18
+ */
19
+ slotProps?: NativeSelectProps['slotProps'] & {
20
+ input?: React.InputHTMLAttributes<HTMLInputElement> & HasDataAttribute & HasRootRef<HTMLInputElement>;
21
+ };
22
+ /**
23
+ * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.
24
+ *
13
25
  * Ref на внутрений компонент input.
14
26
  */
15
27
  getSelectInputRef?: React.Ref<HTMLInputElement>;
@@ -109,6 +121,8 @@ export interface SelectProps<OptionInterfaceT extends CustomSelectOptionInterfac
109
121
  */
110
122
  labelTextTestId?: string;
111
123
  /**
124
+ * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ select: { 'data-testid': ... } }`.
125
+ *
112
126
  * Передает атрибут `data-testid` для нативного элемента `select`.
113
127
  */
114
128
  nativeSelectTestId?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"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"}
@@ -8,6 +8,7 @@ import { classNames } from "@vkontakte/vkjs";
8
8
  import { getRequiredValueByKey } from "../../helpers/getValueByKey.js";
9
9
  import { useAdaptivity } from "../../hooks/useAdaptivity.js";
10
10
  import { useExternRef } from "../../hooks/useExternRef.js";
11
+ import { useMergeProps } from "../../hooks/useMergeProps.js";
11
12
  import { callMultiple } from "../../lib/callMultiple.js";
12
13
  import { useDOM } from "../../lib/dom.js";
13
14
  import { defaultFilterFn } from "../../lib/select.js";
@@ -16,10 +17,11 @@ import { preventDefault } from "../../lib/utils.js";
16
17
  import { CustomSelectDropdown } from "../CustomSelectDropdown/CustomSelectDropdown.js";
17
18
  import { CustomSelectOption } from "../CustomSelectOption/CustomSelectOption.js";
18
19
  import { NOT_SELECTED, remapFromNativeValueToSelectValue } from "../NativeSelect/NativeSelect.js";
20
+ import { RootComponent } from "../RootComponent/RootComponent.js";
19
21
  import { Footnote } from "../Typography/Footnote/Footnote.js";
20
22
  import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
21
23
  import { CustomSelectInput } from "./CustomSelectInput/CustomSelectInput.js";
22
- import { checkMixControlledAndUncontrolledState, checkOptionsValueType, filter, findSelectedIndex, getOptionByValue } from "./helpers.js";
24
+ import { checkDeprecatedProps, checkMixControlledAndUncontrolledState, checkOptionsValueType, filter, findSelectedIndex, getOptionByValue } from "./helpers.js";
23
25
  import { useAfterItems } from "./hooks/useAfterItems.js";
24
26
  import { useDropdownOpenedController } from "./hooks/useDropdownOpenedController.js";
25
27
  import { useFocusedOptionController } from "./hooks/useFocusedOptionController.js";
@@ -68,14 +70,14 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
68
70
  /**
69
71
  * @see https://vkui.io/components/custom-select
70
72
  */ export function CustomSelect(props) {
71
- const { before, name, className, getRef, getRootRef, popupDirection = 'bottom', style, onChange, children, 'onInputChange': onInputChangeProp, renderDropdown, onOpen, onClose, fetching, forceDropdownPortal, selectType = 'default', searchable = false, 'renderOption': renderOptionProp = defaultRenderOptionFn, 'options': options, emptyText = 'Ничего не найдено', filterFn = defaultFilterFn, 'icon': iconProp, ClearButton, allowClearButton = false, dropdownOffsetDistance = 0, dropdownAutoWidth = false, noMaxHeight = false, 'aria-labelledby': ariaLabelledBy, clearButtonTestId, nativeSelectTestId, defaultValue, required, getSelectInputRef, overscrollBehavior, 'onInputKeyDown': onInputKeyDownProp, readOnly, accessible = false, fetchingInProgressLabel, fetchingCompletedLabel } = props, restProps = _object_without_properties(props, [
73
+ const { style, className, getRootRef, before, name, getRef, popupDirection = 'bottom', onChange, children, 'onInputChange': onInputChangeProp, renderDropdown, onOpen, onClose, fetching, labelTextTestId, multiline, placeholder, status, forceDropdownPortal, align, selectType = 'default', searchable = false, 'renderOption': renderOptionProp = defaultRenderOptionFn, 'options': options, emptyText = 'Ничего не найдено', filterFn = defaultFilterFn, 'icon': iconProp, ClearButton, allowClearButton = false, dropdownOffsetDistance = 0, dropdownAutoWidth = false, noMaxHeight = false, 'aria-labelledby': ariaLabelledBy, clearButtonTestId, nativeSelectTestId, defaultValue, required, getSelectInputRef, overscrollBehavior, 'onInputKeyDown': onInputKeyDownProp, accessible = false, fetchingInProgressLabel, fetchingCompletedLabel, 'value': selectValue, slotProps } = props, restProps = _object_without_properties(props, [
74
+ "style",
75
+ "className",
76
+ "getRootRef",
72
77
  "before",
73
78
  "name",
74
- "className",
75
79
  "getRef",
76
- "getRootRef",
77
80
  "popupDirection",
78
- "style",
79
81
  "onChange",
80
82
  "children",
81
83
  'onInputChange',
@@ -83,7 +85,12 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
83
85
  "onOpen",
84
86
  "onClose",
85
87
  "fetching",
88
+ "labelTextTestId",
89
+ "multiline",
90
+ "placeholder",
91
+ "status",
86
92
  "forceDropdownPortal",
93
+ "align",
87
94
  "selectType",
88
95
  "searchable",
89
96
  'renderOption',
@@ -104,31 +111,63 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
104
111
  "getSelectInputRef",
105
112
  "overscrollBehavior",
106
113
  'onInputKeyDown',
107
- "readOnly",
108
114
  "accessible",
109
115
  "fetchingInProgressLabel",
110
- "fetchingCompletedLabel"
116
+ "fetchingCompletedLabel",
117
+ 'value',
118
+ "slotProps"
111
119
  ]);
112
120
  if (process.env.NODE_ENV === 'development') {
113
121
  checkOptionsValueType(options);
122
+ checkDeprecatedProps(props);
114
123
  }
115
124
  const { sizeY = 'none' } = useAdaptivity();
125
+ const _useMergeProps = useMergeProps({
126
+ style,
127
+ className,
128
+ getRootRef
129
+ }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root), { onClick: onRootClick, onMouseMove: onRootMouseMove, onMouseDown: onRootMouseDown, getRootRef: rootRef } = _useMergeProps, rootRest = _object_without_properties(_useMergeProps, [
130
+ "onClick",
131
+ "onMouseMove",
132
+ "onMouseDown",
133
+ "getRootRef"
134
+ ]);
135
+ const _useMergeProps1 = useMergeProps({
136
+ getRootRef: getRef,
137
+ onBlur: props.onBlur,
138
+ onFocus: props.onFocus,
139
+ onClick: props.onClick
140
+ }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.select), { getRootRef: getSelectRef } = _useMergeProps1, selectRest = _object_without_properties(_useMergeProps1, [
141
+ "getRootRef"
142
+ ]);
143
+ const _useMergeProps2 = useMergeProps(_object_spread({
144
+ getRootRef: getSelectInputRef,
145
+ onChange: onInputChangeProp
146
+ }, restProps), slotProps === null || slotProps === void 0 ? void 0 : slotProps.input), { getRootRef: getInputRef, onChange: onChangeInput, onFocus: onInputFocus, onBlur: onInputBlur, onKeyDown: onNativeInputKeyDown, onClick: onNativeInputClick, readOnly } = _useMergeProps2, inputRest = _object_without_properties(_useMergeProps2, [
147
+ "getRootRef",
148
+ "onChange",
149
+ "onFocus",
150
+ "onBlur",
151
+ "onKeyDown",
152
+ "onClick",
153
+ "readOnly"
154
+ ]);
116
155
  const containerRef = React.useRef(null);
117
- const handleRootRef = useExternRef(containerRef, getRootRef);
118
- const selectElRef = useExternRef(getRef);
119
- const selectInputRef = useExternRef(getSelectInputRef);
156
+ const handleRootRef = useExternRef(containerRef, rootRef);
157
+ const selectElRef = useExternRef(getSelectRef);
158
+ const selectInputRef = useExternRef(getInputRef);
120
159
  const propsValue = React.useMemo(()=>{
121
160
  var _getOptionByValue;
122
- if (props.value === undefined) {
161
+ if (selectValue === undefined) {
123
162
  return undefined;
124
163
  }
125
164
  var _getOptionByValue_value;
126
- return (_getOptionByValue_value = (_getOptionByValue = getOptionByValue(options, props.value)) === null || _getOptionByValue === void 0 ? void 0 : _getOptionByValue.value) !== null && _getOptionByValue_value !== void 0 ? _getOptionByValue_value : null;
165
+ return (_getOptionByValue_value = (_getOptionByValue = getOptionByValue(options, selectValue)) === null || _getOptionByValue === void 0 ? void 0 : _getOptionByValue.value) !== null && _getOptionByValue_value !== void 0 ? _getOptionByValue_value : null;
127
166
  }, [
128
167
  options,
129
- props.value
168
+ selectValue
130
169
  ]);
131
- const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
170
+ const [isControlledOutside, setIsControlledOutside] = React.useState(selectValue !== undefined);
132
171
  const [popperPlacement, setPopperPlacement] = React.useState(popupDirection);
133
172
  const { nativeSelectValue, setNativeSelectValue, selectedOptionValue, setSelectedOptionValue, onNativeSelectChange } = useSelectedOptionController({
134
173
  value: propsValue,
@@ -145,7 +184,7 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
145
184
  options,
146
185
  accessible,
147
186
  selectedValue: selectedOptionValue,
148
- onInputChange: onInputChangeProp
187
+ onInputChange: onChangeInput
149
188
  });
150
189
  const filteredOptions = React.useMemo(()=>filter(options, searchable ? inputValue : '', filterFn), [
151
190
  filterFn,
@@ -231,7 +270,7 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
231
270
  focusedOptionValue,
232
271
  selectOption
233
272
  ]);
234
- const onInputKeyDown = useInputKeyboardController({
273
+ const handleInputKeyDown = useInputKeyboardController({
235
274
  opened,
236
275
  open,
237
276
  close,
@@ -412,61 +451,71 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
412
451
  }, [
413
452
  resetFocusedOption
414
453
  ]);
415
- return /*#__PURE__*/ _jsxs("div", {
416
- className: classNames("vkuiCustomSelect__host", sizeY !== 'regular' && sizeYClassNames[sizeY], className),
417
- style: style,
418
- ref: handleRootRef,
419
- onClick: passClickAndFocusToInputOnClick,
420
- onMouseDown: preventInputBlurWhenClickInsideFocusedSelectArea,
421
- onMouseMove: function updateLastMousePosition(e) {
422
- lastMousePositionRef.current = {
423
- x: e.clientX,
424
- y: e.clientY
425
- };
426
- },
454
+ const updateLastMousePosition = (e)=>{
455
+ lastMousePositionRef.current = {
456
+ x: e.clientX,
457
+ y: e.clientY
458
+ };
459
+ };
460
+ return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
461
+ baseClassName: classNames("vkuiCustomSelect__host", sizeY !== 'regular' && sizeYClassNames[sizeY]),
462
+ getRootRef: handleRootRef,
463
+ onClick: callMultiple(onRootClick, passClickAndFocusToInputOnClick),
464
+ onMouseDown: callMultiple(onRootMouseDown, preventInputBlurWhenClickInsideFocusedSelectArea),
465
+ onMouseMove: callMultiple(onRootMouseMove, updateLastMousePosition)
466
+ }, rootRest), {
427
467
  children: [
428
- /*#__PURE__*/ _jsx(CustomSelectInput, _object_spread_props(_object_spread({
468
+ /*#__PURE__*/ _jsx(CustomSelectInput, {
429
469
  autoComplete: "off",
430
470
  autoCapitalize: "none",
431
471
  autoCorrect: "off",
432
- spellCheck: "false"
433
- }, restProps, selectInputAriaProps), {
434
- getRef: selectInputRef,
435
- onFocus: onFocus,
436
- onBlur: onBlur,
437
- className: openedClassNames,
438
- readOnly: readOnly || !searchable,
472
+ spellCheck: "false",
439
473
  fetching: fetching,
440
474
  searchable: searchable,
441
475
  accessible: accessible,
442
- value: inputValue,
443
- onKeyDown: !readOnly ? onInputKeyDown : undefined,
444
- onChange: onInputChange,
445
- onClick: !readOnly ? toggleOpened : undefined,
446
476
  before: before,
447
477
  after: afterItems,
448
478
  selectType: selectType,
479
+ align: align,
480
+ status: status,
481
+ placeholder: placeholder,
482
+ multiline: multiline,
483
+ labelTextTestId: labelTextTestId,
484
+ slotProps: {
485
+ root: {
486
+ className: openedClassNames
487
+ },
488
+ input: _object_spread({
489
+ getRootRef: selectInputRef,
490
+ onChange: onInputChange,
491
+ onFocus: callMultiple(onFocus, onInputFocus),
492
+ onBlur: callMultiple(onBlur, onInputFocus),
493
+ onKeyDown: !readOnly ? callMultiple(handleInputKeyDown, onNativeInputKeyDown) : onNativeInputKeyDown,
494
+ onClick: !readOnly ? callMultiple(toggleOpened, onNativeInputClick) : onNativeInputClick,
495
+ value: inputValue,
496
+ readOnly: readOnly || !searchable
497
+ }, selectInputAriaProps, inputRest)
498
+ },
449
499
  children: selected === null || selected === void 0 ? void 0 : selected.label
450
- })),
500
+ }),
451
501
  /*#__PURE__*/ _jsx(FetchingStatus, {
452
502
  fetching: fetching,
453
503
  options: filteredOptions,
454
504
  fetchingInProgressLabel: fetchingInProgressLabel,
455
505
  fetchingCompletedLabel: fetchingCompletedLabel
456
506
  }),
457
- /*#__PURE__*/ _jsxs("select", {
507
+ /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
508
+ Component: "select",
509
+ baseClassName: "vkuiCustomSelect__control",
458
510
  tabIndex: -1,
459
- ref: selectElRef,
460
511
  name: name,
461
- onChange: onNativeSelectChange,
462
- onBlur: props.onBlur,
463
- onFocus: props.onFocus,
464
- onClick: props.onClick,
465
512
  value: nativeSelectValue,
466
513
  "aria-hidden": true,
467
- className: "vkuiCustomSelect__control",
468
514
  "data-testid": nativeSelectTestId,
469
515
  required: required,
516
+ onChange: onNativeSelectChange,
517
+ getRootRef: selectElRef
518
+ }, selectRest), {
470
519
  children: [
471
520
  (allowClearButton || nativeSelectValue === NOT_SELECTED.NATIVE) && /*#__PURE__*/ _jsx("option", {
472
521
  value: NOT_SELECTED.NATIVE
@@ -475,7 +524,7 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
475
524
  value: item.value
476
525
  }, `${item.value}`))
477
526
  ]
478
- }),
527
+ })),
479
528
  opened && /*#__PURE__*/ _jsx(CustomSelectDropdown, {
480
529
  targetRef: containerRef,
481
530
  placement: popperPlacement,
@@ -495,7 +544,7 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
495
544
  children: resolvedContent
496
545
  })
497
546
  ]
498
- });
547
+ }));
499
548
  }
500
549
 
501
550
  //# sourceMappingURL=CustomSelect.js.map