@skbkontur/react-ui 4.2.2 → 4.3.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 (337) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/cjs/components/Autocomplete/Autocomplete.d.ts +9 -17
  3. package/cjs/components/Autocomplete/Autocomplete.js +10 -6
  4. package/cjs/components/Autocomplete/Autocomplete.js.map +1 -1
  5. package/cjs/components/Button/Button.d.ts +4 -5
  6. package/cjs/components/Button/Button.js +8 -3
  7. package/cjs/components/Button/Button.js.map +1 -1
  8. package/cjs/components/Button/Button.mixins.js +1 -1
  9. package/cjs/components/Button/Button.mixins.js.map +1 -1
  10. package/cjs/components/Button/Button.styles.js +18 -18
  11. package/cjs/components/Button/Button.styles.js.map +1 -1
  12. package/cjs/components/Center/Center.d.ts +4 -3
  13. package/cjs/components/Center/Center.js +9 -3
  14. package/cjs/components/Center/Center.js.map +1 -1
  15. package/cjs/components/ComboBox/ComboBox.d.ts +8 -13
  16. package/cjs/components/ComboBox/ComboBox.js +12 -2
  17. package/cjs/components/ComboBox/ComboBox.js.map +1 -1
  18. package/cjs/components/CurrencyInput/CurrencyInput.d.ts +6 -9
  19. package/cjs/components/CurrencyInput/CurrencyInput.js +15 -6
  20. package/cjs/components/CurrencyInput/CurrencyInput.js.map +1 -1
  21. package/cjs/components/CurrencyLabel/CurrencyLabel.d.ts +3 -9
  22. package/cjs/components/CurrencyLabel/CurrencyLabel.js +15 -15
  23. package/cjs/components/CurrencyLabel/CurrencyLabel.js.map +1 -1
  24. package/cjs/components/DateInput/DateInput.d.ts +8 -11
  25. package/cjs/components/DateInput/DateInput.js +11 -3
  26. package/cjs/components/DateInput/DateInput.js.map +1 -1
  27. package/cjs/components/DatePicker/DatePicker.d.ts +6 -8
  28. package/cjs/components/DatePicker/DatePicker.js +12 -6
  29. package/cjs/components/DatePicker/DatePicker.js.map +1 -1
  30. package/cjs/components/DropdownMenu/DropdownMenu.d.ts +5 -5
  31. package/cjs/components/DropdownMenu/DropdownMenu.js +9 -3
  32. package/cjs/components/DropdownMenu/DropdownMenu.js.map +1 -1
  33. package/cjs/components/FxInput/FxInput.d.ts +6 -6
  34. package/cjs/components/FxInput/FxInput.js +13 -10
  35. package/cjs/components/FxInput/FxInput.js.map +1 -1
  36. package/cjs/components/Gapped/Gapped.d.ts +7 -8
  37. package/cjs/components/Gapped/Gapped.js +12 -6
  38. package/cjs/components/Gapped/Gapped.js.map +1 -1
  39. package/cjs/components/GlobalLoader/GlobalLoader.d.ts +7 -14
  40. package/cjs/components/GlobalLoader/GlobalLoader.js +13 -9
  41. package/cjs/components/GlobalLoader/GlobalLoader.js.map +1 -1
  42. package/cjs/components/Hint/Hint.d.ts +7 -11
  43. package/cjs/components/Hint/Hint.js +15 -5
  44. package/cjs/components/Hint/Hint.js.map +1 -1
  45. package/cjs/components/Input/Input.d.ts +4 -3
  46. package/cjs/components/Input/Input.js +7 -4
  47. package/cjs/components/Input/Input.js.map +1 -1
  48. package/cjs/components/Kebab/Kebab.d.ts +7 -11
  49. package/cjs/components/Kebab/Kebab.js +14 -5
  50. package/cjs/components/Kebab/Kebab.js.map +1 -1
  51. package/cjs/components/Link/Link.d.ts +4 -4
  52. package/cjs/components/Link/Link.js +11 -4
  53. package/cjs/components/Link/Link.js.map +1 -1
  54. package/cjs/components/Loader/Loader.d.ts +7 -4
  55. package/cjs/components/Loader/Loader.js +14 -4
  56. package/cjs/components/Loader/Loader.js.map +1 -1
  57. package/cjs/components/Modal/Modal.d.ts +4 -3
  58. package/cjs/components/Modal/Modal.js +8 -3
  59. package/cjs/components/Modal/Modal.js.map +1 -1
  60. package/cjs/components/Paging/Paging.d.ts +6 -9
  61. package/cjs/components/Paging/Paging.js +15 -5
  62. package/cjs/components/Paging/Paging.js.map +1 -1
  63. package/cjs/components/Paging/PagingDefaultComponent.d.ts +1 -1
  64. package/cjs/components/Paging/PagingDefaultComponent.js.map +1 -1
  65. package/cjs/components/PasswordInput/PasswordInput.d.ts +4 -3
  66. package/cjs/components/PasswordInput/PasswordInput.js +8 -3
  67. package/cjs/components/PasswordInput/PasswordInput.js.map +1 -1
  68. package/cjs/components/Radio/Radio.d.ts +4 -3
  69. package/cjs/components/Radio/Radio.js +8 -3
  70. package/cjs/components/Radio/Radio.js.map +1 -1
  71. package/cjs/components/RadioGroup/RadioGroup.d.ts +2 -4
  72. package/cjs/components/RadioGroup/RadioGroup.js +4 -2
  73. package/cjs/components/RadioGroup/RadioGroup.js.map +1 -1
  74. package/cjs/components/ScrollContainer/ScrollContainer.d.ts +6 -7
  75. package/cjs/components/ScrollContainer/ScrollContainer.js +11 -5
  76. package/cjs/components/ScrollContainer/ScrollContainer.js.map +1 -1
  77. package/cjs/components/Select/Select.d.ts +3 -12
  78. package/cjs/components/Select/Select.js +6 -1
  79. package/cjs/components/Select/Select.js.map +1 -1
  80. package/cjs/components/Select/Select.styles.js +4 -4
  81. package/cjs/components/Select/Select.styles.js.map +1 -1
  82. package/cjs/components/SidePage/SidePage.d.ts +5 -6
  83. package/cjs/components/SidePage/SidePage.js +8 -1
  84. package/cjs/components/SidePage/SidePage.js.map +1 -1
  85. package/cjs/components/Spinner/Spinner.d.ts +4 -2
  86. package/cjs/components/Spinner/Spinner.js +9 -3
  87. package/cjs/components/Spinner/Spinner.js.map +1 -1
  88. package/cjs/components/Sticky/Sticky.d.ts +5 -4
  89. package/cjs/components/Sticky/Sticky.js +9 -2
  90. package/cjs/components/Sticky/Sticky.js.map +1 -1
  91. package/cjs/components/Tabs/Tab.d.ts +4 -4
  92. package/cjs/components/Tabs/Tab.js +11 -13
  93. package/cjs/components/Tabs/Tab.js.map +1 -1
  94. package/cjs/components/Tabs/Tabs.d.ts +4 -4
  95. package/cjs/components/Tabs/Tabs.js +12 -3
  96. package/cjs/components/Tabs/Tabs.js.map +1 -1
  97. package/cjs/components/Textarea/Textarea.d.ts +8 -10
  98. package/cjs/components/Textarea/Textarea.js +10 -6
  99. package/cjs/components/Textarea/Textarea.js.map +1 -1
  100. package/cjs/components/Toggle/Toggle.d.ts +5 -6
  101. package/cjs/components/Toggle/Toggle.js +10 -4
  102. package/cjs/components/Toggle/Toggle.js.map +1 -1
  103. package/cjs/components/TokenInput/TokenInput.d.ts +19 -16
  104. package/cjs/components/TokenInput/TokenInput.js +75 -57
  105. package/cjs/components/TokenInput/TokenInput.js.map +1 -1
  106. package/cjs/components/Tooltip/Tooltip.d.ts +10 -14
  107. package/cjs/components/Tooltip/Tooltip.js +23 -12
  108. package/cjs/components/Tooltip/Tooltip.js.map +1 -1
  109. package/cjs/components/TooltipMenu/TooltipMenu.d.ts +5 -4
  110. package/cjs/components/TooltipMenu/TooltipMenu.js +11 -5
  111. package/cjs/components/TooltipMenu/TooltipMenu.js.map +1 -1
  112. package/cjs/internal/BGRuler.d.ts +13 -15
  113. package/cjs/internal/BGRuler.js +16 -8
  114. package/cjs/internal/BGRuler.js.map +1 -1
  115. package/cjs/internal/Calendar/Calendar.d.ts +4 -13
  116. package/cjs/internal/Calendar/Calendar.js +10 -5
  117. package/cjs/internal/Calendar/Calendar.js.map +1 -1
  118. package/cjs/internal/Calendar/DayCellView.styles.js +1 -1
  119. package/cjs/internal/Calendar/DayCellView.styles.js.map +1 -1
  120. package/cjs/internal/Calendar/Month.js +16 -11
  121. package/cjs/internal/Calendar/Month.js.map +1 -1
  122. package/cjs/internal/ComponentCombinator.d.ts +6 -8
  123. package/cjs/internal/ComponentCombinator.js +6 -2
  124. package/cjs/internal/ComponentCombinator.js.map +1 -1
  125. package/cjs/internal/ComponentTable.d.ts +5 -6
  126. package/cjs/internal/ComponentTable.js +11 -2
  127. package/cjs/internal/ComponentTable.js.map +1 -1
  128. package/cjs/internal/CustomComboBox/ComboBoxMenu.d.ts +4 -4
  129. package/cjs/internal/CustomComboBox/ComboBoxMenu.js +7 -1
  130. package/cjs/internal/CustomComboBox/ComboBoxMenu.js.map +1 -1
  131. package/cjs/internal/CustomComboBox/ComboBoxView.d.ts +4 -12
  132. package/cjs/internal/CustomComboBox/ComboBoxView.js +18 -10
  133. package/cjs/internal/CustomComboBox/ComboBoxView.js.map +1 -1
  134. package/cjs/internal/DateSelect/DateSelect.d.ts +4 -6
  135. package/cjs/internal/DateSelect/DateSelect.js +15 -9
  136. package/cjs/internal/DateSelect/DateSelect.js.map +1 -1
  137. package/cjs/internal/DropdownContainer/DropdownContainer.d.ts +3 -6
  138. package/cjs/internal/DropdownContainer/DropdownContainer.js +8 -5
  139. package/cjs/internal/DropdownContainer/DropdownContainer.js.map +1 -1
  140. package/cjs/internal/InputLikeText/InputLikeText.d.ts +4 -3
  141. package/cjs/internal/InputLikeText/InputLikeText.js +7 -2
  142. package/cjs/internal/InputLikeText/InputLikeText.js.map +1 -1
  143. package/cjs/internal/InternalMenu/InternalMenu.d.ts +3 -9
  144. package/cjs/internal/InternalMenu/InternalMenu.js +16 -6
  145. package/cjs/internal/InternalMenu/InternalMenu.js.map +1 -1
  146. package/cjs/internal/MaskedInput/MaskedInput.d.ts +4 -2
  147. package/cjs/internal/MaskedInput/MaskedInput.js +7 -2
  148. package/cjs/internal/MaskedInput/MaskedInput.js.map +1 -1
  149. package/cjs/internal/Menu/Menu.d.ts +4 -7
  150. package/cjs/internal/Menu/Menu.js +7 -1
  151. package/cjs/internal/Menu/Menu.js.map +1 -1
  152. package/cjs/internal/Popup/Popup.d.ts +10 -16
  153. package/cjs/internal/Popup/Popup.js +21 -7
  154. package/cjs/internal/Popup/Popup.js.map +1 -1
  155. package/cjs/internal/PopupMenu/PopupMenu.d.ts +8 -11
  156. package/cjs/internal/PopupMenu/PopupMenu.js +8 -1
  157. package/cjs/internal/PopupMenu/PopupMenu.js.map +1 -1
  158. package/cjs/internal/RenderLayer/RenderLayer.d.ts +4 -3
  159. package/cjs/internal/RenderLayer/RenderLayer.js +8 -2
  160. package/cjs/internal/RenderLayer/RenderLayer.js.map +1 -1
  161. package/cjs/internal/ThemePlayground/VariableValue.d.ts +5 -4
  162. package/cjs/internal/ThemePlayground/VariableValue.js +6 -1
  163. package/cjs/internal/ThemePlayground/VariableValue.js.map +1 -1
  164. package/cjs/internal/ZIndex/ZIndex.d.ts +7 -11
  165. package/cjs/internal/ZIndex/ZIndex.js +10 -3
  166. package/cjs/internal/ZIndex/ZIndex.js.map +1 -1
  167. package/cjs/lib/createPropsGetter.d.ts +2 -1
  168. package/cjs/lib/createPropsGetter.js +2 -0
  169. package/cjs/lib/createPropsGetter.js.map +1 -1
  170. package/components/Autocomplete/Autocomplete/Autocomplete.js +22 -12
  171. package/components/Autocomplete/Autocomplete/Autocomplete.js.map +1 -1
  172. package/components/Autocomplete/Autocomplete.d.ts +9 -17
  173. package/components/Button/Button/Button.js +11 -5
  174. package/components/Button/Button/Button.js.map +1 -1
  175. package/components/Button/Button.d.ts +4 -5
  176. package/components/Button/Button.mixins/Button.mixins.js +1 -1
  177. package/components/Button/Button.mixins/Button.mixins.js.map +1 -1
  178. package/components/Button/Button.styles/Button.styles.js +18 -18
  179. package/components/Button/Button.styles/Button.styles.js.map +1 -1
  180. package/components/Center/Center/Center.js +7 -5
  181. package/components/Center/Center/Center.js.map +1 -1
  182. package/components/Center/Center.d.ts +4 -3
  183. package/components/ComboBox/ComboBox/ComboBox.js +3 -1
  184. package/components/ComboBox/ComboBox/ComboBox.js.map +1 -1
  185. package/components/ComboBox/ComboBox.d.ts +8 -13
  186. package/components/CurrencyInput/CurrencyInput/CurrencyInput.js +21 -18
  187. package/components/CurrencyInput/CurrencyInput/CurrencyInput.js.map +1 -1
  188. package/components/CurrencyInput/CurrencyInput.d.ts +6 -9
  189. package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js +21 -15
  190. package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js.map +1 -1
  191. package/components/CurrencyLabel/CurrencyLabel.d.ts +3 -9
  192. package/components/DateInput/DateInput/DateInput.js +17 -4
  193. package/components/DateInput/DateInput/DateInput.js.map +1 -1
  194. package/components/DateInput/DateInput.d.ts +8 -11
  195. package/components/DatePicker/DatePicker/DatePicker.js +12 -9
  196. package/components/DatePicker/DatePicker/DatePicker.js.map +1 -1
  197. package/components/DatePicker/DatePicker.d.ts +6 -8
  198. package/components/DropdownMenu/DropdownMenu/DropdownMenu.js +8 -2
  199. package/components/DropdownMenu/DropdownMenu/DropdownMenu.js.map +1 -1
  200. package/components/DropdownMenu/DropdownMenu.d.ts +5 -5
  201. package/components/FxInput/FxInput/FxInput.js +11 -9
  202. package/components/FxInput/FxInput/FxInput.js.map +1 -1
  203. package/components/FxInput/FxInput.d.ts +6 -6
  204. package/components/Gapped/Gapped/Gapped.js +17 -8
  205. package/components/Gapped/Gapped/Gapped.js.map +1 -1
  206. package/components/Gapped/Gapped.d.ts +7 -8
  207. package/components/GlobalLoader/GlobalLoader/GlobalLoader.js +35 -16
  208. package/components/GlobalLoader/GlobalLoader/GlobalLoader.js.map +1 -1
  209. package/components/GlobalLoader/GlobalLoader.d.ts +7 -14
  210. package/components/Hint/Hint/Hint.js +30 -18
  211. package/components/Hint/Hint/Hint.js.map +1 -1
  212. package/components/Hint/Hint.d.ts +7 -11
  213. package/components/Input/Input/Input.js +9 -7
  214. package/components/Input/Input/Input.js.map +1 -1
  215. package/components/Input/Input.d.ts +4 -3
  216. package/components/Kebab/Kebab/Kebab.js +19 -8
  217. package/components/Kebab/Kebab/Kebab.js.map +1 -1
  218. package/components/Kebab/Kebab.d.ts +7 -11
  219. package/components/Link/Link/Link.js +9 -6
  220. package/components/Link/Link/Link.js.map +1 -1
  221. package/components/Link/Link.d.ts +4 -4
  222. package/components/Loader/Loader/Loader.js +22 -17
  223. package/components/Loader/Loader/Loader.js.map +1 -1
  224. package/components/Loader/Loader.d.ts +7 -4
  225. package/components/Modal/Modal/Modal.js +3 -1
  226. package/components/Modal/Modal/Modal.js.map +1 -1
  227. package/components/Modal/Modal.d.ts +4 -3
  228. package/components/Paging/Paging/Paging.js +24 -14
  229. package/components/Paging/Paging/Paging.js.map +1 -1
  230. package/components/Paging/Paging.d.ts +6 -9
  231. package/components/Paging/PagingDefaultComponent/PagingDefaultComponent.js.map +1 -1
  232. package/components/Paging/PagingDefaultComponent.d.ts +1 -1
  233. package/components/PasswordInput/PasswordInput/PasswordInput.js +7 -5
  234. package/components/PasswordInput/PasswordInput/PasswordInput.js.map +1 -1
  235. package/components/PasswordInput/PasswordInput.d.ts +4 -3
  236. package/components/Radio/Radio/Radio.js +7 -5
  237. package/components/Radio/Radio/Radio.js.map +1 -1
  238. package/components/Radio/Radio.d.ts +4 -3
  239. package/components/RadioGroup/RadioGroup/RadioGroup.js +10 -10
  240. package/components/RadioGroup/RadioGroup/RadioGroup.js.map +1 -1
  241. package/components/RadioGroup/RadioGroup.d.ts +2 -4
  242. package/components/ScrollContainer/ScrollContainer/ScrollContainer.js +10 -6
  243. package/components/ScrollContainer/ScrollContainer/ScrollContainer.js.map +1 -1
  244. package/components/ScrollContainer/ScrollContainer.d.ts +6 -7
  245. package/components/Select/Select/Select.js +4 -3
  246. package/components/Select/Select/Select.js.map +1 -1
  247. package/components/Select/Select.d.ts +3 -12
  248. package/components/Select/Select.styles/Select.styles.js +4 -4
  249. package/components/Select/Select.styles/Select.styles.js.map +1 -1
  250. package/components/SidePage/SidePage/SidePage.js +14 -9
  251. package/components/SidePage/SidePage/SidePage.js.map +1 -1
  252. package/components/SidePage/SidePage.d.ts +5 -6
  253. package/components/Spinner/Spinner/Spinner.js +7 -5
  254. package/components/Spinner/Spinner/Spinner.js.map +1 -1
  255. package/components/Spinner/Spinner.d.ts +4 -2
  256. package/components/Sticky/Sticky/Sticky.js +7 -4
  257. package/components/Sticky/Sticky/Sticky.js.map +1 -1
  258. package/components/Sticky/Sticky.d.ts +5 -4
  259. package/components/Tabs/Tab/Tab.js +15 -7
  260. package/components/Tabs/Tab/Tab.js.map +1 -1
  261. package/components/Tabs/Tab.d.ts +4 -4
  262. package/components/Tabs/Tabs/Tabs.js +10 -8
  263. package/components/Tabs/Tabs/Tabs.js.map +1 -1
  264. package/components/Tabs/Tabs.d.ts +4 -4
  265. package/components/Textarea/Textarea/Textarea.js +19 -14
  266. package/components/Textarea/Textarea/Textarea.js.map +1 -1
  267. package/components/Textarea/Textarea.d.ts +8 -10
  268. package/components/Toggle/Toggle/Toggle.js +12 -7
  269. package/components/Toggle/Toggle/Toggle.js.map +1 -1
  270. package/components/Toggle/Toggle.d.ts +5 -6
  271. package/components/TokenInput/TokenInput/TokenInput.js +107 -77
  272. package/components/TokenInput/TokenInput/TokenInput.js.map +1 -1
  273. package/components/TokenInput/TokenInput.d.ts +19 -16
  274. package/components/Tooltip/Tooltip/Tooltip.js +51 -30
  275. package/components/Tooltip/Tooltip/Tooltip.js.map +1 -1
  276. package/components/Tooltip/Tooltip.d.ts +10 -14
  277. package/components/TooltipMenu/TooltipMenu/TooltipMenu.js +15 -13
  278. package/components/TooltipMenu/TooltipMenu/TooltipMenu.js.map +1 -1
  279. package/components/TooltipMenu/TooltipMenu.d.ts +5 -4
  280. package/internal/BGRuler/BGRuler.js +11 -6
  281. package/internal/BGRuler/BGRuler.js.map +1 -1
  282. package/internal/BGRuler.d.ts +13 -15
  283. package/internal/Calendar/Calendar/Calendar.js +11 -5
  284. package/internal/Calendar/Calendar/Calendar.js.map +1 -1
  285. package/internal/Calendar/Calendar.d.ts +4 -13
  286. package/internal/Calendar/DayCellView.styles/DayCellView.styles.js +1 -1
  287. package/internal/Calendar/DayCellView.styles/DayCellView.styles.js.map +1 -1
  288. package/internal/Calendar/Month/Month.js +20 -11
  289. package/internal/Calendar/Month/Month.js.map +1 -1
  290. package/internal/ComponentCombinator/ComponentCombinator.js +8 -5
  291. package/internal/ComponentCombinator/ComponentCombinator.js.map +1 -1
  292. package/internal/ComponentCombinator.d.ts +6 -8
  293. package/internal/ComponentTable/ComponentTable.js +16 -4
  294. package/internal/ComponentTable/ComponentTable.js.map +1 -1
  295. package/internal/ComponentTable.d.ts +5 -6
  296. package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js +4 -2
  297. package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js.map +1 -1
  298. package/internal/CustomComboBox/ComboBoxMenu.d.ts +4 -4
  299. package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js +21 -10
  300. package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js.map +1 -1
  301. package/internal/CustomComboBox/ComboBoxView.d.ts +4 -12
  302. package/internal/DateSelect/DateSelect/DateSelect.js +14 -11
  303. package/internal/DateSelect/DateSelect/DateSelect.js.map +1 -1
  304. package/internal/DateSelect/DateSelect.d.ts +4 -6
  305. package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js +6 -10
  306. package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js.map +1 -1
  307. package/internal/DropdownContainer/DropdownContainer.d.ts +3 -6
  308. package/internal/InputLikeText/InputLikeText/InputLikeText.js +4 -2
  309. package/internal/InputLikeText/InputLikeText/InputLikeText.js.map +1 -1
  310. package/internal/InputLikeText/InputLikeText.d.ts +4 -3
  311. package/internal/InternalMenu/InternalMenu/InternalMenu.js +21 -10
  312. package/internal/InternalMenu/InternalMenu/InternalMenu.js.map +1 -1
  313. package/internal/InternalMenu/InternalMenu.d.ts +3 -9
  314. package/internal/MaskedInput/MaskedInput/MaskedInput.js +3 -1
  315. package/internal/MaskedInput/MaskedInput/MaskedInput.js.map +1 -1
  316. package/internal/MaskedInput/MaskedInput.d.ts +4 -2
  317. package/internal/Menu/Menu/Menu.js +10 -3
  318. package/internal/Menu/Menu/Menu.js.map +1 -1
  319. package/internal/Menu/Menu.d.ts +4 -7
  320. package/internal/Popup/Popup/Popup.js +32 -23
  321. package/internal/Popup/Popup/Popup.js.map +1 -1
  322. package/internal/Popup/Popup.d.ts +10 -16
  323. package/internal/PopupMenu/PopupMenu/PopupMenu.js +12 -4
  324. package/internal/PopupMenu/PopupMenu/PopupMenu.js.map +1 -1
  325. package/internal/PopupMenu/PopupMenu.d.ts +8 -11
  326. package/internal/RenderLayer/RenderLayer/RenderLayer.js +8 -4
  327. package/internal/RenderLayer/RenderLayer/RenderLayer.js.map +1 -1
  328. package/internal/RenderLayer/RenderLayer.d.ts +4 -3
  329. package/internal/ThemePlayground/VariableValue/VariableValue.js +4 -2
  330. package/internal/ThemePlayground/VariableValue/VariableValue.js.map +1 -1
  331. package/internal/ThemePlayground/VariableValue.d.ts +5 -4
  332. package/internal/ZIndex/ZIndex/ZIndex.js +15 -13
  333. package/internal/ZIndex/ZIndex/ZIndex.js.map +1 -1
  334. package/internal/ZIndex/ZIndex.d.ts +7 -11
  335. package/lib/createPropsGetter/createPropsGetter.js.map +1 -1
  336. package/lib/createPropsGetter.d.ts +2 -1
  337. package/package.json +2 -2
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  export interface MaskedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
3
3
  mask: string;
4
- maskChar: string | null;
4
+ maskChar?: string | null;
5
5
  formatChars?: {
6
6
  [key: string]: string;
7
7
  };
@@ -16,12 +16,14 @@ interface MaskedInputState {
16
16
  emptyValue: string;
17
17
  focused: boolean;
18
18
  }
19
+ declare type DefaultProps = Required<Pick<MaskedInputProps, 'maskChar'>>;
19
20
  export declare const MaskedInputDataTids: {
20
21
  readonly root: "MaskedInput__root";
21
22
  };
22
23
  export declare class MaskedInput extends React.PureComponent<MaskedInputProps, MaskedInputState> {
23
24
  static __KONTUR_REACT_UI__: string;
24
- static defaultProps: Partial<MaskedInputProps>;
25
+ static defaultProps: DefaultProps;
26
+ private getProps;
25
27
  input: HTMLInputElement | null;
26
28
  private theme;
27
29
  private reactInputMask;
@@ -6,6 +6,7 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
6
6
 
7
7
  var _MaskCharLowLine = require("../MaskCharLowLine");
8
8
  var _Emotion = require("../../lib/theming/Emotion");
9
+ var _createPropsGetter = require("../../lib/createPropsGetter");
9
10
 
10
11
  var _MaskedInput = require("./MaskedInput.styles");var _excluded = ["maskChar", "alwaysShowMask", "hasLeftIcon", "hasRightIcon", "maxLength", "onValueChange", "onUnexpectedInput", "defaultValue", "style"];
11
12
 
@@ -26,6 +27,8 @@ var _MaskedInput = require("./MaskedInput.styles");var _excluded = ["maskChar",
26
27
 
27
28
 
28
29
 
30
+
31
+
29
32
  var MaskedInputDataTids = {
30
33
  root: 'MaskedInput__root' };exports.MaskedInputDataTids = MaskedInputDataTids;var
31
34
 
@@ -41,8 +44,10 @@ MaskedInput = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsLoose2.
41
44
 
42
45
 
43
46
 
47
+
48
+
44
49
  function MaskedInput(_props) {var _this;
45
- _this = _React$PureComponent.call(this, _props) || this;_this.input = null;_this.reactInputMask = null;_this.
50
+ _this = _React$PureComponent.call(this, _props) || this;_this.getProps = (0, _createPropsGetter.createPropsGetter)(MaskedInput.defaultProps);_this.input = null;_this.reactInputMask = null;_this.
46
51
 
47
52
 
48
53
 
@@ -183,7 +188,7 @@ MaskedInput = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsLoose2.
183
188
  userInput,
184
189
  options)
185
190
  {
186
- var visibleMaskChars = new Array(options.mask.length).fill(_this.props.maskChar);
191
+ var visibleMaskChars = new Array(options.mask.length).fill(_this.getProps().maskChar);
187
192
 
188
193
  if (newState.value !== oldState.value && userInput === null) {
189
194
  _this.setState({
@@ -1 +1 @@
1
- {"version":3,"sources":["MaskedInput.tsx"],"names":["MaskedInputDataTids","root","MaskedInput","props","input","reactInputMask","getValue","value","toString","defaultValue","refInput","refMaskedInput","handleChange","event","target","state","handleUnexpectedInput","setState","onValueChange","onChange","handleFocus","focused","onFocus","handleBlur","onBlur","preprocess","newState","oldState","userInput","options","visibleMaskChars","Array","mask","length","fill","maskChar","split","forEach","char","index","permanents","includes","emptyValue","join","isMaskVisible","alwaysShowMask","onUnexpectedInput","componentDidMount","forceUpdate","componentDidUpdate","prevProps","render","theme","renderMain","hasLeftIcon","hasRightIcon","maxLength","style","inputProps","leftHelper","textAlign","color","slice","leftClass","styles","inputMaskLeft","rightHelper","map","_char","i","container","inputMask","React","PureComponent","__KONTUR_REACT_UI__","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactInputMask, { InputState, MaskOptions } from 'react-input-mask';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MaskCharLowLine } from '../MaskCharLowLine';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MaskedInput.styles';\n\nexport interface MaskedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n mask: string;\n maskChar: string | null;\n formatChars?: { [key: string]: string };\n alwaysShowMask?: boolean;\n hasLeftIcon?: boolean;\n hasRightIcon?: boolean;\n onUnexpectedInput?: (value: string) => void;\n onValueChange?: (value: string) => void;\n}\n\ninterface MaskedInputState {\n value: string;\n emptyValue: string;\n focused: boolean;\n}\n\nexport const MaskedInputDataTids = {\n root: 'MaskedInput__root',\n} as const;\n\nexport class MaskedInput extends React.PureComponent<MaskedInputProps, MaskedInputState> {\n public static __KONTUR_REACT_UI__ = 'MaskedInput';\n\n public static defaultProps: Partial<MaskedInputProps> = {\n maskChar: '_',\n };\n\n public input: HTMLInputElement | null = null;\n private theme!: Theme;\n private reactInputMask: ReactInputMask | null = null;\n\n public constructor(props: MaskedInputProps) {\n super(props);\n\n this.state = {\n value: this.getValue(props),\n emptyValue: '',\n focused: false,\n };\n }\n\n public componentDidMount() {\n if (this.reactInputMask) {\n // FIXME: принудительно вызываем beforeMaskedValueChange, чтобы получить emptyValue\n this.reactInputMask.forceUpdate();\n }\n }\n\n public componentDidUpdate(prevProps: MaskedInputProps) {\n if (this.props.value !== prevProps.value) {\n this.setState({\n value: this.props.value ? this.props.value.toString() : '',\n });\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n maskChar,\n alwaysShowMask,\n hasLeftIcon,\n hasRightIcon,\n maxLength,\n onValueChange,\n onUnexpectedInput,\n defaultValue,\n style,\n ...inputProps\n } = this.props;\n const { emptyValue, value } = this.state;\n\n const leftHelper = style?.textAlign !== 'right' && (\n <span style={{ color: 'transparent' }}>{emptyValue.slice(0, value.length)}</span>\n );\n const leftClass = style?.textAlign !== 'right' && styles.inputMaskLeft();\n\n const rightHelper = emptyValue\n .slice(value.length)\n .split('')\n .map((_char, i) => (_char === '_' ? <MaskCharLowLine key={i} /> : _char));\n\n return (\n <span data-tid={MaskedInputDataTids.root} className={styles.container()} x-ms-format-detection=\"none\">\n <ReactInputMask\n {...inputProps}\n maskChar={null}\n beforeMaskedValueChange={this.preprocess}\n alwaysShowMask={false}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n value={value}\n inputRef={this.refInput}\n ref={this.refMaskedInput}\n style={{ ...style }}\n />\n {this.isMaskVisible() && (\n <span className={cx(styles.inputMask(this.theme), leftClass)}>\n {leftHelper}\n {rightHelper}\n </span>\n )}\n </span>\n );\n }\n\n private getValue = (props: MaskedInputProps): string => {\n if (isNonNullable(props.value)) {\n return props.value.toString();\n }\n\n if (isNonNullable(props.defaultValue)) {\n return props.defaultValue.toString();\n }\n\n return '';\n };\n\n private refInput = (input: HTMLInputElement | null) => {\n this.input = input;\n };\n\n private refMaskedInput = (reactInputMask: ReactInputMask) => {\n this.reactInputMask = reactInputMask;\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (event.target.value === this.state.value) {\n this.handleUnexpectedInput();\n } else {\n this.setState({ value: event.target.value });\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.value);\n }\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n this.setState({ focused: true });\n\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n };\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n this.setState({ focused: false });\n\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n };\n\n private preprocess = (\n newState: InputState,\n oldState: InputState,\n userInput: string,\n options: MaskOptions & Pick<MaskedInputProps, 'mask'>,\n ) => {\n const visibleMaskChars = new Array(options.mask.length).fill(this.props.maskChar);\n\n if (newState.value !== oldState.value && userInput === null) {\n this.setState({\n value: newState.value,\n });\n }\n\n options.mask.split('').forEach((char: string, index: number) => {\n if (options.permanents.includes(index)) {\n visibleMaskChars[index] = char;\n }\n\n if (newState.value[index]) {\n visibleMaskChars[index] = newState.value[index];\n }\n });\n\n const emptyValue = visibleMaskChars.join('');\n\n if (this.state.emptyValue !== emptyValue) {\n this.setState({\n emptyValue,\n });\n }\n\n return newState;\n };\n\n private isMaskVisible = () => this.props.alwaysShowMask || this.state.focused;\n\n private handleUnexpectedInput = () => {\n if (this.props.onUnexpectedInput) {\n this.props.onUnexpectedInput(this.state.value);\n }\n };\n}\n"]}
1
+ {"version":3,"sources":["MaskedInput.tsx"],"names":["MaskedInputDataTids","root","MaskedInput","props","getProps","defaultProps","input","reactInputMask","getValue","value","toString","defaultValue","refInput","refMaskedInput","handleChange","event","target","state","handleUnexpectedInput","setState","onValueChange","onChange","handleFocus","focused","onFocus","handleBlur","onBlur","preprocess","newState","oldState","userInput","options","visibleMaskChars","Array","mask","length","fill","maskChar","split","forEach","char","index","permanents","includes","emptyValue","join","isMaskVisible","alwaysShowMask","onUnexpectedInput","componentDidMount","forceUpdate","componentDidUpdate","prevProps","render","theme","renderMain","hasLeftIcon","hasRightIcon","maxLength","style","inputProps","leftHelper","textAlign","color","slice","leftClass","styles","inputMaskLeft","rightHelper","map","_char","i","container","inputMask","React","PureComponent","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactInputMask, { InputState, MaskOptions } from 'react-input-mask';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MaskCharLowLine } from '../MaskCharLowLine';\nimport { cx } from '../../lib/theming/Emotion';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './MaskedInput.styles';\n\nexport interface MaskedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n mask: string;\n maskChar?: string | null;\n formatChars?: { [key: string]: string };\n alwaysShowMask?: boolean;\n hasLeftIcon?: boolean;\n hasRightIcon?: boolean;\n onUnexpectedInput?: (value: string) => void;\n onValueChange?: (value: string) => void;\n}\n\ninterface MaskedInputState {\n value: string;\n emptyValue: string;\n focused: boolean;\n}\n\ntype DefaultProps = Required<Pick<MaskedInputProps, 'maskChar'>>;\n\nexport const MaskedInputDataTids = {\n root: 'MaskedInput__root',\n} as const;\n\nexport class MaskedInput extends React.PureComponent<MaskedInputProps, MaskedInputState> {\n public static __KONTUR_REACT_UI__ = 'MaskedInput';\n\n public static defaultProps: DefaultProps = {\n maskChar: '_',\n };\n\n private getProps = createPropsGetter(MaskedInput.defaultProps);\n\n public input: HTMLInputElement | null = null;\n private theme!: Theme;\n private reactInputMask: ReactInputMask | null = null;\n\n public constructor(props: MaskedInputProps) {\n super(props);\n\n this.state = {\n value: this.getValue(props),\n emptyValue: '',\n focused: false,\n };\n }\n\n public componentDidMount() {\n if (this.reactInputMask) {\n // FIXME: принудительно вызываем beforeMaskedValueChange, чтобы получить emptyValue\n this.reactInputMask.forceUpdate();\n }\n }\n\n public componentDidUpdate(prevProps: MaskedInputProps) {\n if (this.props.value !== prevProps.value) {\n this.setState({\n value: this.props.value ? this.props.value.toString() : '',\n });\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n maskChar,\n alwaysShowMask,\n hasLeftIcon,\n hasRightIcon,\n maxLength,\n onValueChange,\n onUnexpectedInput,\n defaultValue,\n style,\n ...inputProps\n } = this.props;\n const { emptyValue, value } = this.state;\n\n const leftHelper = style?.textAlign !== 'right' && (\n <span style={{ color: 'transparent' }}>{emptyValue.slice(0, value.length)}</span>\n );\n const leftClass = style?.textAlign !== 'right' && styles.inputMaskLeft();\n\n const rightHelper = emptyValue\n .slice(value.length)\n .split('')\n .map((_char, i) => (_char === '_' ? <MaskCharLowLine key={i} /> : _char));\n\n return (\n <span data-tid={MaskedInputDataTids.root} className={styles.container()} x-ms-format-detection=\"none\">\n <ReactInputMask\n {...inputProps}\n maskChar={null}\n beforeMaskedValueChange={this.preprocess}\n alwaysShowMask={false}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n value={value}\n inputRef={this.refInput}\n ref={this.refMaskedInput}\n style={{ ...style }}\n />\n {this.isMaskVisible() && (\n <span className={cx(styles.inputMask(this.theme), leftClass)}>\n {leftHelper}\n {rightHelper}\n </span>\n )}\n </span>\n );\n }\n\n private getValue = (props: MaskedInputProps): string => {\n if (isNonNullable(props.value)) {\n return props.value.toString();\n }\n\n if (isNonNullable(props.defaultValue)) {\n return props.defaultValue.toString();\n }\n\n return '';\n };\n\n private refInput = (input: HTMLInputElement | null) => {\n this.input = input;\n };\n\n private refMaskedInput = (reactInputMask: ReactInputMask) => {\n this.reactInputMask = reactInputMask;\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (event.target.value === this.state.value) {\n this.handleUnexpectedInput();\n } else {\n this.setState({ value: event.target.value });\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.value);\n }\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n this.setState({ focused: true });\n\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n };\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n this.setState({ focused: false });\n\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n };\n\n private preprocess = (\n newState: InputState,\n oldState: InputState,\n userInput: string,\n options: MaskOptions & Pick<MaskedInputProps, 'mask'>,\n ) => {\n const visibleMaskChars = new Array(options.mask.length).fill(this.getProps().maskChar);\n\n if (newState.value !== oldState.value && userInput === null) {\n this.setState({\n value: newState.value,\n });\n }\n\n options.mask.split('').forEach((char: string, index: number) => {\n if (options.permanents.includes(index)) {\n visibleMaskChars[index] = char;\n }\n\n if (newState.value[index]) {\n visibleMaskChars[index] = newState.value[index];\n }\n });\n\n const emptyValue = visibleMaskChars.join('');\n\n if (this.state.emptyValue !== emptyValue) {\n this.setState({\n emptyValue,\n });\n }\n\n return newState;\n };\n\n private isMaskVisible = () => this.props.alwaysShowMask || this.state.focused;\n\n private handleUnexpectedInput = () => {\n if (this.props.onUnexpectedInput) {\n this.props.onUnexpectedInput(this.state.value);\n }\n };\n}\n"]}
@@ -18,15 +18,11 @@ export interface MenuState {
18
18
  export declare const MenuDataTids: {
19
19
  readonly root: "Menu__root";
20
20
  };
21
+ declare type DefaultProps = Required<Pick<MenuProps, 'align' | 'width' | 'maxHeight' | 'hasShadow' | 'preventWindowScroll'>>;
21
22
  export declare class Menu extends React.Component<MenuProps, MenuState> {
22
23
  static __KONTUR_REACT_UI__: string;
23
- static defaultProps: {
24
- align: string;
25
- width: string;
26
- maxHeight: number;
27
- hasShadow: boolean;
28
- preventWindowScroll: boolean;
29
- };
24
+ static defaultProps: DefaultProps;
25
+ private getProps;
30
26
  state: {
31
27
  highlightedIndex: number;
32
28
  };
@@ -71,3 +67,4 @@ export declare class Menu extends React.Component<MenuProps, MenuState> {
71
67
  private move;
72
68
  private isEmpty;
73
69
  }
70
+ export {};
@@ -10,6 +10,7 @@ var _Emotion = require("../../lib/theming/Emotion");
10
10
  var _rootNode = require("../../lib/rootNode");
11
11
  var _addIconPaddingIfPartOfMenu = require("../InternalMenu/addIconPaddingIfPartOfMenu");
12
12
  var _client = require("../../lib/client");
13
+ var _createPropsGetter = require("../../lib/createPropsGetter");
13
14
 
14
15
  var _Menu = require("./Menu.styles");
15
16
  var _isActiveElement = require("./isActiveElement");var _class, _class2, _temp;
@@ -37,6 +38,8 @@ var MenuDataTids = {
37
38
 
38
39
 
39
40
 
41
+
42
+
40
43
  Menu = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Menu, _React$Component);function Menu() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
41
44
 
42
45
 
@@ -48,6 +51,8 @@ Menu = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
48
51
 
49
52
 
50
53
 
54
+ getProps = (0, _createPropsGetter.createPropsGetter)(Menu.defaultProps);_this.
55
+
51
56
  state = {
52
57
  highlightedIndex: -1 };_this.
53
58
 
@@ -137,6 +142,7 @@ Menu = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
137
142
 
138
143
 
139
144
 
145
+
140
146
 
141
147
 
142
148
  getChildList = function () {
@@ -246,7 +252,7 @@ Menu = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
246
252
  * @public
247
253
  */;_proto.reset = function reset() {this.setState({ highlightedIndex: -1 });} /**
248
254
  * @public
249
- */;_proto.hasHighlightedItem = function hasHighlightedItem() {return this.state.highlightedIndex !== -1;};_proto.highlightItem = function highlightItem(index) {this.highlight(index);};_proto.renderMain = function renderMain() {var _cx;if (this.isEmpty()) {return null;}return /*#__PURE__*/_react.default.createElement("div", { "data-tid": MenuDataTids.root, className: (0, _Emotion.cx)(getAlignRightClass(this.props), (_cx = {}, _cx[_Menu.styles.root(this.theme)] = true, _cx[_Menu.styles.shadow(this.theme)] = this.props.hasShadow, _cx)), style: getStyle(this.props), ref: this.setRootNode }, /*#__PURE__*/_react.default.createElement(_ScrollContainer.ScrollContainer, { ref: this.refScrollContainer, maxHeight: this.props.maxHeight, preventWindowScroll: this.props.preventWindowScroll, disabled: this.props.disableScrollContainer }, /*#__PURE__*/_react.default.createElement("div", { className: _Menu.styles.scrollContainer(this.theme) }, this.getChildList())));};_proto.refHighlighted = function refHighlighted(originalRef, menuItem) {this.highlighted = menuItem;if (typeof originalRef === 'function') {originalRef(menuItem);}};_proto.select = function select(index, shouldHandleHref, event) {var item = childrenToArray(this.props.children)[index];if ((0, _isActiveElement.isActiveElement)(item)) {if (shouldHandleHref && item.props.href) {if (item.props.target) {window.open(item.props.href, item.props.target);} else {location.href = item.props.href;}}if (item.props.onClick) {item.props.onClick(event);}if (this.props.onItemClick) {this.props.onItemClick();}return true;}return false;};_proto.move = function move(step) {var _this3 = this;if (this.unmounted) {// NOTE workaround, because `ComboBox` call `process.nextTick` in reducer
255
+ */;_proto.hasHighlightedItem = function hasHighlightedItem() {return this.state.highlightedIndex !== -1;};_proto.highlightItem = function highlightItem(index) {this.highlight(index);};_proto.renderMain = function renderMain() {var _cx;if (this.isEmpty()) {return null;}var _this$getProps = this.getProps(),hasShadow = _this$getProps.hasShadow,maxHeight = _this$getProps.maxHeight,preventWindowScroll = _this$getProps.preventWindowScroll;return /*#__PURE__*/_react.default.createElement("div", { "data-tid": MenuDataTids.root, className: (0, _Emotion.cx)(getAlignRightClass(this.props), (_cx = {}, _cx[_Menu.styles.root(this.theme)] = true, _cx[_Menu.styles.shadow(this.theme)] = hasShadow, _cx)), style: getStyle(this.props), ref: this.setRootNode }, /*#__PURE__*/_react.default.createElement(_ScrollContainer.ScrollContainer, { ref: this.refScrollContainer, maxHeight: maxHeight, preventWindowScroll: preventWindowScroll, disabled: this.props.disableScrollContainer }, /*#__PURE__*/_react.default.createElement("div", { className: _Menu.styles.scrollContainer(this.theme) }, this.getChildList())));};_proto.refHighlighted = function refHighlighted(originalRef, menuItem) {this.highlighted = menuItem;if (typeof originalRef === 'function') {originalRef(menuItem);}};_proto.select = function select(index, shouldHandleHref, event) {var item = childrenToArray(this.props.children)[index];if ((0, _isActiveElement.isActiveElement)(item)) {if (shouldHandleHref && item.props.href) {if (item.props.target) {window.open(item.props.href, item.props.target);} else {location.href = item.props.href;}}if (item.props.onClick) {item.props.onClick(event);}if (this.props.onItemClick) {this.props.onItemClick();}return true;}return false;};_proto.move = function move(step) {var _this3 = this;if (this.unmounted) {// NOTE workaround, because `ComboBox` call `process.nextTick` in reducer
250
256
  return;}var children = childrenToArray(this.props.children);var activeElements = children.filter(_isActiveElement.isActiveElement);if (!activeElements.length) {return;
251
257
  }
252
258
  var index = this.state.highlightedIndex;var _loop = function _loop() {
@@ -1 +1 @@
1
- {"version":3,"sources":["Menu.tsx"],"names":["MenuDataTids","root","Menu","rootNode","state","highlightedIndex","unmounted","getChildList","enableIconPadding","React","Children","toArray","props","children","some","x","isValidElement","icon","map","child","index","modifiedChild","highlight","ref","refHighlighted","bind","cloneElement","onClick","select","onMouseEnter","onMouseLeave","unhighlight","refScrollContainer","scrollContainer","scrollToSelected","highlighted","scrollTo","scrollToTop","scrollToBottom","setState","componentWillUnmount","render","theme","renderMain","up","move","down","enter","event","reset","hasHighlightedItem","highlightItem","isEmpty","getAlignRightClass","styles","shadow","hasShadow","getStyle","setRootNode","maxHeight","preventWindowScroll","disableScrollContainer","originalRef","menuItem","shouldHandleHref","item","childrenToArray","href","target","window","open","location","onItemClick","step","activeElements","filter","isActiveElement","length","indexOf","isNonNullable","Component","__KONTUR_REACT_UI__","defaultProps","align","width","ret","forEach","push","maxWidth","minWidth","alignRight","isIE11","alignRightIE11","alignRightIE11FixAutoWidth"],"mappings":"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","sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { ScrollContainer } from '../../components/ScrollContainer';\nimport { MenuItem, MenuItemProps } from '../../components/MenuItem';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { addIconPaddingIfPartOfMenu } from '../InternalMenu/addIconPaddingIfPartOfMenu';\nimport { isIE11 } from '../../lib/client';\n\nimport { styles } from './Menu.styles';\nimport { isActiveElement } from './isActiveElement';\n\nexport interface MenuProps {\n children: React.ReactNode;\n hasShadow?: boolean;\n maxHeight?: number | string;\n onItemClick?: () => void;\n width?: number | string;\n preventWindowScroll?: boolean;\n /**\n * Отключение кастомного скролла контейнера\n */\n disableScrollContainer?: boolean;\n align?: 'left' | 'right';\n}\n\nexport interface MenuState {\n highlightedIndex: number;\n}\n\nexport const MenuDataTids = {\n root: 'Menu__root',\n} as const;\n\n@rootNode\nexport class Menu extends React.Component<MenuProps, MenuState> {\n public static __KONTUR_REACT_UI__ = 'Menu';\n\n public static defaultProps = {\n align: 'left',\n width: 'auto',\n maxHeight: 300,\n hasShadow: true,\n preventWindowScroll: true,\n };\n\n public state = {\n highlightedIndex: -1,\n };\n\n private theme!: Theme;\n private scrollContainer: Nullable<ScrollContainer>;\n private highlighted: Nullable<MenuItem>;\n private unmounted = false;\n private setRootNode!: TSetRootNode;\n\n public componentWillUnmount() {\n this.unmounted = true;\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * @public\n */\n public up() {\n this.move(-1);\n }\n\n /**\n * @public\n */\n public down() {\n this.move(1);\n }\n\n /**\n * @public\n */\n public enter(event: React.SyntheticEvent<HTMLElement>) {\n return this.select(this.state.highlightedIndex, true, event);\n }\n\n /**\n * @public\n */\n public reset() {\n this.setState({ highlightedIndex: -1 });\n }\n\n /**\n * @public\n */\n public hasHighlightedItem() {\n return this.state.highlightedIndex !== -1;\n }\n\n public highlightItem(index: number) {\n this.highlight(index);\n }\n\n private renderMain() {\n if (this.isEmpty()) {\n return null;\n }\n\n return (\n <div\n data-tid={MenuDataTids.root}\n className={cx(getAlignRightClass(this.props), {\n [styles.root(this.theme)]: true,\n [styles.shadow(this.theme)]: this.props.hasShadow,\n })}\n style={getStyle(this.props)}\n ref={this.setRootNode}\n >\n <ScrollContainer\n ref={this.refScrollContainer}\n maxHeight={this.props.maxHeight}\n preventWindowScroll={this.props.preventWindowScroll}\n disabled={this.props.disableScrollContainer}\n >\n <div className={styles.scrollContainer(this.theme)}>{this.getChildList()}</div>\n </ScrollContainer>\n </div>\n );\n }\n\n private getChildList = () => {\n const enableIconPadding = React.Children.toArray(this.props.children).some(\n (x) => React.isValidElement(x) && x.props.icon,\n );\n\n return React.Children.map(this.props.children, (child, index) => {\n if (!child) {\n return child;\n }\n\n if (typeof child === 'string' || typeof child === 'number') {\n return child;\n }\n\n const modifiedChild = addIconPaddingIfPartOfMenu(child, enableIconPadding);\n\n if (isActiveElement(modifiedChild)) {\n const highlight = this.state.highlightedIndex === index;\n\n let ref = modifiedChild.ref;\n if (highlight && typeof modifiedChild.ref !== 'string') {\n ref = this.refHighlighted.bind(this, modifiedChild.ref);\n }\n\n return React.cloneElement<MenuItemProps, MenuItem>(modifiedChild, {\n ref,\n state: highlight ? 'hover' : modifiedChild.props.state,\n onClick: this.select.bind(this, index, false),\n onMouseEnter: this.highlight.bind(this, index),\n onMouseLeave: this.unhighlight,\n });\n }\n\n return modifiedChild;\n });\n };\n\n private refScrollContainer = (scrollContainer: Nullable<ScrollContainer>) => {\n this.scrollContainer = scrollContainer;\n };\n\n private refHighlighted(\n originalRef: ((menuItem: MenuItem | null) => any) | React.RefObject<MenuItem> | null | undefined,\n menuItem: MenuItem | null,\n ) {\n this.highlighted = menuItem;\n\n if (typeof originalRef === 'function') {\n originalRef(menuItem);\n }\n }\n\n private scrollToSelected = () => {\n if (this.scrollContainer && this.highlighted) {\n this.scrollContainer.scrollTo(getRootNode(this.highlighted));\n }\n };\n\n private scrollToTop = () => {\n if (this.scrollContainer) {\n this.scrollContainer.scrollToTop();\n }\n };\n\n private scrollToBottom = () => {\n if (this.scrollContainer) {\n this.scrollContainer.scrollToBottom();\n }\n };\n\n private select(index: number, shouldHandleHref: boolean, event: React.SyntheticEvent<HTMLElement>): boolean {\n const item = childrenToArray(this.props.children)[index];\n if (isActiveElement(item)) {\n if (shouldHandleHref && item.props.href) {\n if (item.props.target) {\n window.open(item.props.href, item.props.target);\n } else {\n location.href = item.props.href;\n }\n }\n if (item.props.onClick) {\n item.props.onClick(event);\n }\n if (this.props.onItemClick) {\n this.props.onItemClick();\n }\n return true;\n }\n return false;\n }\n\n private highlight = (index: number) => {\n this.setState({ highlightedIndex: index });\n };\n\n private unhighlight = () => {\n this.setState({ highlightedIndex: -1 });\n };\n\n private move(step: number) {\n if (this.unmounted) {\n // NOTE workaround, because `ComboBox` call `process.nextTick` in reducer\n return;\n }\n\n const children = childrenToArray(this.props.children);\n const activeElements = children.filter(isActiveElement);\n if (!activeElements.length) {\n return;\n }\n let index = this.state.highlightedIndex;\n do {\n index += step;\n if (index < 0) {\n index = children.length - 1;\n } else if (index > children.length) {\n index = 0;\n }\n\n const child = children[index];\n if (isActiveElement(child)) {\n this.setState({ highlightedIndex: index }, () => {\n switch (activeElements.indexOf(child)) {\n case 0:\n this.scrollToTop();\n break;\n case activeElements.length - 1:\n this.scrollToBottom();\n break;\n default:\n this.scrollToSelected();\n }\n });\n return;\n }\n } while (index !== this.state.highlightedIndex);\n }\n\n private isEmpty() {\n const { children } = this.props;\n return !children || !childrenToArray(children).filter(isNonNullable).length;\n }\n}\n\nfunction childrenToArray(children: React.ReactNode): React.ReactNode[] {\n const ret: React.ReactNode[] = [];\n // Use forEach instead of map to avoid cloning for key unifying.\n React.Children.forEach(children, (child) => {\n ret.push(child);\n });\n return ret;\n}\n\nconst getStyle = (props: MenuProps): CSSProperties => {\n if (props.align === 'right') {\n return {\n maxWidth: props.width,\n minWidth: props.width,\n maxHeight: props.maxHeight,\n };\n }\n\n return {\n width: props.width,\n maxHeight: props.maxHeight,\n };\n};\n\nconst getAlignRightClass = (props: MenuProps) => {\n if (props.align === 'right') {\n return cx({\n [styles.alignRight()]: !isIE11,\n [styles.alignRightIE11()]: isIE11,\n [styles.alignRightIE11FixAutoWidth()]: isIE11 && props.width === 'auto',\n });\n }\n\n return null;\n};\n"]}
1
+ {"version":3,"sources":["Menu.tsx"],"names":["MenuDataTids","root","Menu","rootNode","getProps","defaultProps","state","highlightedIndex","unmounted","getChildList","enableIconPadding","React","Children","toArray","props","children","some","x","isValidElement","icon","map","child","index","modifiedChild","highlight","ref","refHighlighted","bind","cloneElement","onClick","select","onMouseEnter","onMouseLeave","unhighlight","refScrollContainer","scrollContainer","scrollToSelected","highlighted","scrollTo","scrollToTop","scrollToBottom","setState","componentWillUnmount","render","theme","renderMain","up","move","down","enter","event","reset","hasHighlightedItem","highlightItem","isEmpty","hasShadow","maxHeight","preventWindowScroll","getAlignRightClass","styles","shadow","getStyle","setRootNode","disableScrollContainer","originalRef","menuItem","shouldHandleHref","item","childrenToArray","href","target","window","open","location","onItemClick","step","activeElements","filter","isActiveElement","length","indexOf","isNonNullable","Component","__KONTUR_REACT_UI__","align","width","ret","forEach","push","maxWidth","minWidth","alignRight","isIE11","alignRightIE11","alignRightIE11FixAutoWidth"],"mappings":"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","sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { ScrollContainer } from '../../components/ScrollContainer';\nimport { MenuItem, MenuItemProps } from '../../components/MenuItem';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { addIconPaddingIfPartOfMenu } from '../InternalMenu/addIconPaddingIfPartOfMenu';\nimport { isIE11 } from '../../lib/client';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Menu.styles';\nimport { isActiveElement } from './isActiveElement';\n\nexport interface MenuProps {\n children: React.ReactNode;\n hasShadow?: boolean;\n maxHeight?: number | string;\n onItemClick?: () => void;\n width?: number | string;\n preventWindowScroll?: boolean;\n /**\n * Отключение кастомного скролла контейнера\n */\n disableScrollContainer?: boolean;\n align?: 'left' | 'right';\n}\n\nexport interface MenuState {\n highlightedIndex: number;\n}\n\nexport const MenuDataTids = {\n root: 'Menu__root',\n} as const;\n\ntype DefaultProps = Required<Pick<MenuProps, 'align' | 'width' | 'maxHeight' | 'hasShadow' | 'preventWindowScroll'>>;\n\n@rootNode\nexport class Menu extends React.Component<MenuProps, MenuState> {\n public static __KONTUR_REACT_UI__ = 'Menu';\n\n public static defaultProps: DefaultProps = {\n align: 'left',\n width: 'auto',\n maxHeight: 300,\n hasShadow: true,\n preventWindowScroll: true,\n };\n\n private getProps = createPropsGetter(Menu.defaultProps);\n\n public state = {\n highlightedIndex: -1,\n };\n\n private theme!: Theme;\n private scrollContainer: Nullable<ScrollContainer>;\n private highlighted: Nullable<MenuItem>;\n private unmounted = false;\n private setRootNode!: TSetRootNode;\n\n public componentWillUnmount() {\n this.unmounted = true;\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * @public\n */\n public up() {\n this.move(-1);\n }\n\n /**\n * @public\n */\n public down() {\n this.move(1);\n }\n\n /**\n * @public\n */\n public enter(event: React.SyntheticEvent<HTMLElement>) {\n return this.select(this.state.highlightedIndex, true, event);\n }\n\n /**\n * @public\n */\n public reset() {\n this.setState({ highlightedIndex: -1 });\n }\n\n /**\n * @public\n */\n public hasHighlightedItem() {\n return this.state.highlightedIndex !== -1;\n }\n\n public highlightItem(index: number) {\n this.highlight(index);\n }\n\n private renderMain() {\n if (this.isEmpty()) {\n return null;\n }\n const { hasShadow, maxHeight, preventWindowScroll } = this.getProps();\n\n return (\n <div\n data-tid={MenuDataTids.root}\n className={cx(getAlignRightClass(this.props), {\n [styles.root(this.theme)]: true,\n [styles.shadow(this.theme)]: hasShadow,\n })}\n style={getStyle(this.props)}\n ref={this.setRootNode}\n >\n <ScrollContainer\n ref={this.refScrollContainer}\n maxHeight={maxHeight}\n preventWindowScroll={preventWindowScroll}\n disabled={this.props.disableScrollContainer}\n >\n <div className={styles.scrollContainer(this.theme)}>{this.getChildList()}</div>\n </ScrollContainer>\n </div>\n );\n }\n\n private getChildList = () => {\n const enableIconPadding = React.Children.toArray(this.props.children).some(\n (x) => React.isValidElement(x) && x.props.icon,\n );\n\n return React.Children.map(this.props.children, (child, index) => {\n if (!child) {\n return child;\n }\n\n if (typeof child === 'string' || typeof child === 'number') {\n return child;\n }\n\n const modifiedChild = addIconPaddingIfPartOfMenu(child, enableIconPadding);\n\n if (isActiveElement(modifiedChild)) {\n const highlight = this.state.highlightedIndex === index;\n\n let ref = modifiedChild.ref;\n if (highlight && typeof modifiedChild.ref !== 'string') {\n ref = this.refHighlighted.bind(this, modifiedChild.ref);\n }\n\n return React.cloneElement<MenuItemProps, MenuItem>(modifiedChild, {\n ref,\n state: highlight ? 'hover' : modifiedChild.props.state,\n onClick: this.select.bind(this, index, false),\n onMouseEnter: this.highlight.bind(this, index),\n onMouseLeave: this.unhighlight,\n });\n }\n\n return modifiedChild;\n });\n };\n\n private refScrollContainer = (scrollContainer: Nullable<ScrollContainer>) => {\n this.scrollContainer = scrollContainer;\n };\n\n private refHighlighted(\n originalRef: ((menuItem: MenuItem | null) => any) | React.RefObject<MenuItem> | null | undefined,\n menuItem: MenuItem | null,\n ) {\n this.highlighted = menuItem;\n\n if (typeof originalRef === 'function') {\n originalRef(menuItem);\n }\n }\n\n private scrollToSelected = () => {\n if (this.scrollContainer && this.highlighted) {\n this.scrollContainer.scrollTo(getRootNode(this.highlighted));\n }\n };\n\n private scrollToTop = () => {\n if (this.scrollContainer) {\n this.scrollContainer.scrollToTop();\n }\n };\n\n private scrollToBottom = () => {\n if (this.scrollContainer) {\n this.scrollContainer.scrollToBottom();\n }\n };\n\n private select(index: number, shouldHandleHref: boolean, event: React.SyntheticEvent<HTMLElement>): boolean {\n const item = childrenToArray(this.props.children)[index];\n if (isActiveElement(item)) {\n if (shouldHandleHref && item.props.href) {\n if (item.props.target) {\n window.open(item.props.href, item.props.target);\n } else {\n location.href = item.props.href;\n }\n }\n if (item.props.onClick) {\n item.props.onClick(event);\n }\n if (this.props.onItemClick) {\n this.props.onItemClick();\n }\n return true;\n }\n return false;\n }\n\n private highlight = (index: number) => {\n this.setState({ highlightedIndex: index });\n };\n\n private unhighlight = () => {\n this.setState({ highlightedIndex: -1 });\n };\n\n private move(step: number) {\n if (this.unmounted) {\n // NOTE workaround, because `ComboBox` call `process.nextTick` in reducer\n return;\n }\n\n const children = childrenToArray(this.props.children);\n const activeElements = children.filter(isActiveElement);\n if (!activeElements.length) {\n return;\n }\n let index = this.state.highlightedIndex;\n do {\n index += step;\n if (index < 0) {\n index = children.length - 1;\n } else if (index > children.length) {\n index = 0;\n }\n\n const child = children[index];\n if (isActiveElement(child)) {\n this.setState({ highlightedIndex: index }, () => {\n switch (activeElements.indexOf(child)) {\n case 0:\n this.scrollToTop();\n break;\n case activeElements.length - 1:\n this.scrollToBottom();\n break;\n default:\n this.scrollToSelected();\n }\n });\n return;\n }\n } while (index !== this.state.highlightedIndex);\n }\n\n private isEmpty() {\n const { children } = this.props;\n return !children || !childrenToArray(children).filter(isNonNullable).length;\n }\n}\n\nfunction childrenToArray(children: React.ReactNode): React.ReactNode[] {\n const ret: React.ReactNode[] = [];\n // Use forEach instead of map to avoid cloning for key unifying.\n React.Children.forEach(children, (child) => {\n ret.push(child);\n });\n return ret;\n}\n\nconst getStyle = (props: MenuProps): CSSProperties => {\n if (props.align === 'right') {\n return {\n maxWidth: props.width,\n minWidth: props.width,\n maxHeight: props.maxHeight,\n };\n }\n\n return {\n width: props.width,\n maxHeight: props.maxHeight,\n };\n};\n\nconst getAlignRightClass = (props: MenuProps) => {\n if (props.align === 'right') {\n return cx({\n [styles.alignRight()]: !isIE11,\n [styles.alignRightIE11()]: isIE11,\n [styles.alignRightIE11FixAutoWidth()]: isIE11 && props.width === 'auto',\n });\n }\n\n return null;\n};\n"]}
@@ -20,24 +20,24 @@ export interface PopupProps extends CommonProps, PopupHandlerProps {
20
20
  backgroundColor?: React.CSSProperties['backgroundColor'];
21
21
  borderColor?: React.CSSProperties['borderColor'];
22
22
  children: React.ReactNode | (() => React.ReactNode);
23
- hasPin: boolean;
24
- hasShadow: boolean;
25
- disableAnimations: boolean;
23
+ hasPin?: boolean;
24
+ hasShadow?: boolean;
25
+ disableAnimations?: boolean;
26
26
  margin?: number;
27
27
  maxWidth?: number | string;
28
28
  opened: boolean;
29
29
  pinOffset?: number;
30
30
  pinSize?: number;
31
- popupOffset: number;
31
+ popupOffset?: number;
32
32
  positions: Readonly<PopupPositionsType[]>;
33
33
  /**
34
34
  * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.
35
35
  *
36
36
  * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.
37
37
  */
38
- useWrapper: boolean;
39
- ignoreHover: boolean;
40
- width: React.CSSProperties['width'];
38
+ useWrapper?: boolean;
39
+ ignoreHover?: boolean;
40
+ width?: React.CSSProperties['width'];
41
41
  /**
42
42
  * При очередном рендере пытаться сохранить первоначальную позицию попапа
43
43
  * (в числе числе, когда он выходит за пределы экрана, но может быть проскролен в него).
@@ -64,6 +64,7 @@ export declare const PopupDataTids: {
64
64
  readonly contentInner: "PopupContentInner";
65
65
  readonly popupPin: "PopupPin__root";
66
66
  };
67
+ declare type DefaultProps = Required<Pick<PopupProps, 'popupOffset' | 'hasPin' | 'hasShadow' | 'disableAnimations' | 'useWrapper' | 'ignoreHover' | 'width'>>;
67
68
  export declare class Popup extends React.Component<PopupProps, PopupState> {
68
69
  static __KONTUR_REACT_UI__: string;
69
70
  static propTypes: {
@@ -116,15 +117,8 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
116
117
  */
117
118
  ignoreHover: PropTypes.Requireable<boolean>;
118
119
  };
119
- static defaultProps: {
120
- popupOffset: number;
121
- hasPin: boolean;
122
- hasShadow: boolean;
123
- disableAnimations: boolean;
124
- useWrapper: boolean;
125
- ignoreHover: boolean;
126
- width: string;
127
- };
120
+ static defaultProps: DefaultProps;
121
+ private getProps;
128
122
  static readonly defaultRootNode: null;
129
123
  state: PopupState;
130
124
  private theme;
@@ -22,6 +22,7 @@ var _MobilePopup = require("../MobilePopup");
22
22
  var _rootNode = require("../../lib/rootNode");
23
23
  var _callChildRef = require("../../lib/callChildRef/callChildRef");
24
24
  var _InstanceWithAnchorElement = require("../../lib/InstanceWithAnchorElement");
25
+ var _createPropsGetter = require("../../lib/createPropsGetter");
25
26
 
26
27
  var _PopupPin = require("./PopupPin");
27
28
  var _PopupHelper = require("./PopupHelper");
@@ -121,6 +122,13 @@ var PopupDataTids = {
121
122
 
122
123
 
123
124
 
125
+
126
+
127
+
128
+
129
+
130
+
131
+
124
132
  Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Popup, _React$Component);function Popup() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
125
133
 
126
134
 
@@ -195,6 +203,8 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
195
203
 
196
204
 
197
205
 
206
+
207
+ getProps = (0, _createPropsGetter.createPropsGetter)(Popup.defaultProps);_this.
198
208
 
199
209
 
200
210
 
@@ -322,6 +332,7 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
322
332
 
323
333
 
324
334
 
335
+
325
336
 
326
337
 
327
338
  updateAnchorElement = function (instance) {
@@ -393,7 +404,8 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
393
404
  };_this.
394
405
 
395
406
  content = function (children) {
396
- var _this$props = _this.props,backgroundColor = _this$props.backgroundColor,width = _this$props.width;
407
+ var backgroundColor = _this.props.backgroundColor;
408
+ var width = _this.getProps().width;
397
409
 
398
410
  return /*#__PURE__*/(
399
411
  _react.default.createElement("div", { className: _Popup.styles.content(_this.theme), "data-tid": PopupDataTids.content, ref: _this.refForTransition }, /*#__PURE__*/
@@ -460,6 +472,7 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
460
472
 
461
473
 
462
474
 
475
+
463
476
 
464
477
 
465
478
  resetLocation = function () {
@@ -500,6 +513,7 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
500
513
 
501
514
 
502
515
 
516
+
503
517
 
504
518
 
505
519
  handleLayoutEvent = function () {
@@ -534,16 +548,16 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
534
548
  }
535
549
  };return _this;}var _proto = Popup.prototype;_proto.componentDidMount = function componentDidMount() {this.updateLocation();this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);};Popup.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {/**
536
550
  * Delaying updateLocation to ensure it happens after props update
537
- */if (props.opened) {if (!state.location) {return { location: DUMMY_LOCATION };}} else if (state.location) {return { location: DUMMY_LOCATION };}return state;};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {var hadNoLocation = prevState.location === DUMMY_LOCATION;var hasLocation = this.state.location !== DUMMY_LOCATION;var wasClosed = prevProps.opened && !this.props.opened;if (this.isMobileLayout && prevState.location === null && this.state.location === null) {this.setState({ location: DUMMY_LOCATION });}if (this.props.opened && hadNoLocation && hasLocation && this.props.onOpen) {this.props.onOpen();}if (wasClosed && !hasLocation && this.props.onClose) {this.props.onClose();}if (this.props.opened) {this.delayUpdateLocation();}};_proto.componentWillUnmount = function componentWillUnmount() {this.cancelDelayedUpdateLocation();this.removeEventListeners(this.anchorElement);if (this.layoutEventsToken) {this.layoutEventsToken.remove();this.layoutEventsToken = null;}if (this.state.location && this.props.onClose) {this.props.onClose();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMobile = function renderMobile() {var opened = this.props.opened;var children = this.renderChildren();return children ? /*#__PURE__*/_react.default.createElement(_MobilePopup.MobilePopup, { opened: opened, withoutRenderContainer: true, onCloseRequest: this.props.mobileOnCloseRequest }, this.content(children)) : null;};_proto.renderMain = function renderMain() {var _this3 = this;var location = this.state.location;var _this$props2 = this.props,anchorElement = _this$props2.anchorElement,useWrapper = _this$props2.useWrapper;var anchor = null;if ((0, _SSRSafe.isHTMLElement)(anchorElement)) {this.updateAnchorElement(anchorElement);} else if ( /*#__PURE__*/_react.default.isValidElement(anchorElement)) {anchor = useWrapper ? /*#__PURE__*/_react.default.createElement("span", null, anchorElement) : anchorElement;} else {anchor = /*#__PURE__*/_react.default.createElement("span", null, anchorElement);}var anchorWithRef = anchor && /*#__PURE__*/_react.default.isValidElement(anchor) && (0, _utils.isRefableElement)(anchor) ? /*#__PURE__*/_react.default.cloneElement(anchor, { ref: function ref(instance) {var _anchor;_this3.updateAnchorElement(instance);var originalRef = (_anchor = anchor) == null ? void 0 : _anchor.ref;originalRef && (0, _callChildRef.callChildRef)(originalRef, instance);} }) : null; // we need to get anchor's DOM node
551
+ */if (props.opened) {if (!state.location) {return { location: DUMMY_LOCATION };}} else if (state.location) {return { location: DUMMY_LOCATION };}return state;};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {var hadNoLocation = prevState.location === DUMMY_LOCATION;var hasLocation = this.state.location !== DUMMY_LOCATION;var wasClosed = prevProps.opened && !this.props.opened;if (this.isMobileLayout && prevState.location === null && this.state.location === null) {this.setState({ location: DUMMY_LOCATION });}if (this.props.opened && hadNoLocation && hasLocation && this.props.onOpen) {this.props.onOpen();}if (wasClosed && !hasLocation && this.props.onClose) {this.props.onClose();}if (this.props.opened) {this.delayUpdateLocation();}};_proto.componentWillUnmount = function componentWillUnmount() {this.cancelDelayedUpdateLocation();this.removeEventListeners(this.anchorElement);if (this.layoutEventsToken) {this.layoutEventsToken.remove();this.layoutEventsToken = null;}if (this.state.location && this.props.onClose) {this.props.onClose();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMobile = function renderMobile() {var opened = this.props.opened;var children = this.renderChildren();return children ? /*#__PURE__*/_react.default.createElement(_MobilePopup.MobilePopup, { opened: opened, withoutRenderContainer: true, onCloseRequest: this.props.mobileOnCloseRequest }, this.content(children)) : null;};_proto.renderMain = function renderMain() {var _this3 = this;var location = this.state.location;var anchorElement = this.props.anchorElement;var useWrapper = this.getProps().useWrapper;var anchor = null;if ((0, _SSRSafe.isHTMLElement)(anchorElement)) {this.updateAnchorElement(anchorElement);} else if ( /*#__PURE__*/_react.default.isValidElement(anchorElement)) {anchor = useWrapper ? /*#__PURE__*/_react.default.createElement("span", null, anchorElement) : anchorElement;} else {anchor = /*#__PURE__*/_react.default.createElement("span", null, anchorElement);}var anchorWithRef = anchor && /*#__PURE__*/_react.default.isValidElement(anchor) && (0, _utils.isRefableElement)(anchor) ? /*#__PURE__*/_react.default.cloneElement(anchor, { ref: function ref(instance) {var _anchor;_this3.updateAnchorElement(instance);var originalRef = (_anchor = anchor) == null ? void 0 : _anchor.ref;originalRef && (0, _callChildRef.callChildRef)(originalRef, instance);} }) : null; // we need to get anchor's DOM node
538
552
  // so we either set our own ref on it via cloning
539
553
  // or relay on findDOMNode (inside getRootNode)
540
554
  // which should be called within updateAnchorElement
541
555
  // in the case when the anchor is not refable
542
- var canGetAnchorNode = !!anchorWithRef || (0, _SSRSafe.isHTMLElement)(anchorElement);return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, { anchor: anchorWithRef || anchor, ref: canGetAnchorNode ? null : this.updateAnchorElement }, this.isMobileLayout && !this.props.withoutMobile ? this.renderMobile() : location && this.renderContent(location));};_proto.addEventListeners = function addEventListeners(element) {if (element && (0, _SSRSafe.isHTMLElement)(element)) {element.addEventListener('mouseenter', this.handleMouseEnter);element.addEventListener('mouseleave', this.handleMouseLeave);element.addEventListener('click', this.handleClick);element.addEventListener('focusin', this.handleFocus);element.addEventListener('focusout', this.handleBlur);}};_proto.removeEventListeners = function removeEventListeners(element) {if (element && (0, _SSRSafe.isHTMLElement)(element)) {element.removeEventListener('mouseenter', this.handleMouseEnter);element.removeEventListener('mouseleave', this.handleMouseLeave);element.removeEventListener('click', this.handleClick);element.removeEventListener('focusin', this.handleFocus);element.removeEventListener('focusout', this.handleBlur);}};_proto.renderContent = function renderContent(location) {var _this4 = this;var _this$props3 = this.props,disableAnimations = _this$props3.disableAnimations,maxWidth = _this$props3.maxWidth,hasShadow = _this$props3.hasShadow,ignoreHover = _this$props3.ignoreHover,opened = _this$props3.opened;var children = this.renderChildren();var _PopupHelper$getPosit = _PopupHelper.PopupHelper.getPositionObject(location.position),direction = _PopupHelper$getPosit.direction;var rootStyle = (0, _extends3.default)({}, location.coordinates, { maxWidth: maxWidth });var shouldFallbackShadow = _client.isIE11 || _client.isEdge || _client.isSafari;return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, { timeout: TRANSITION_TIMEOUT, appear: !disableAnimations, in: Boolean(opened && children), mountOnEnter: true, unmountOnExit: true, enter: !disableAnimations, exit: !disableAnimations, onExited: this.resetLocation, nodeRef: this.refForTransition }, function (state) {var _extends2, _ref;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends3.default)({}, _this4.props, { rootNodeRef: _this4.setRootNode }), /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { "data-tid": 'Popup__root', wrapperRef: _this4.refPopupElement, priority: 'Popup', className: (0, _Emotion.cx)((0, _extends3.default)((_extends2 = {}, _extends2[_Popup.styles.popup(_this4.theme)] = true, _extends2[_Popup.styles.shadow(_this4.theme)] = hasShadow && !shouldFallbackShadow, _extends2[_Popup.styles.shadowFallback(_this4.theme)] = hasShadow && shouldFallbackShadow, _extends2[_Popup.styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[_Popup.styles["transition-enter-" + direction](_this4.theme)] = true, _ref[_Popup.styles.transitionEnter()] = state === 'entering', _ref[_Popup.styles.transitionEnterActive()] = state === 'entered', _ref[_Popup.styles.transitionExit()] = state === 'exiting', _ref))), style: rootStyle, onMouseEnter: _this4.handleMouseEnter, onMouseLeave: _this4.handleMouseLeave }, _this4.content(children), !_this4.isMobileLayout && _this4.renderPin(location.position)));});};_proto.renderChildren = function renderChildren() {return (0, _utils.isFunction)(this.props.children) ? this.props.children() : this.props.children;};_proto.renderPin = function renderPin(positionName) {/**
556
+ var canGetAnchorNode = !!anchorWithRef || (0, _SSRSafe.isHTMLElement)(anchorElement);return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, { anchor: anchorWithRef || anchor, ref: canGetAnchorNode ? null : this.updateAnchorElement }, this.isMobileLayout && !this.props.withoutMobile ? this.renderMobile() : location && this.renderContent(location));};_proto.addEventListeners = function addEventListeners(element) {if (element && (0, _SSRSafe.isHTMLElement)(element)) {element.addEventListener('mouseenter', this.handleMouseEnter);element.addEventListener('mouseleave', this.handleMouseLeave);element.addEventListener('click', this.handleClick);element.addEventListener('focusin', this.handleFocus);element.addEventListener('focusout', this.handleBlur);}};_proto.removeEventListeners = function removeEventListeners(element) {if (element && (0, _SSRSafe.isHTMLElement)(element)) {element.removeEventListener('mouseenter', this.handleMouseEnter);element.removeEventListener('mouseleave', this.handleMouseLeave);element.removeEventListener('click', this.handleClick);element.removeEventListener('focusin', this.handleFocus);element.removeEventListener('focusout', this.handleBlur);}};_proto.renderContent = function renderContent(location) {var _this4 = this;var _this$props = this.props,maxWidth = _this$props.maxWidth,opened = _this$props.opened;var _this$getProps = this.getProps(),hasShadow = _this$getProps.hasShadow,disableAnimations = _this$getProps.disableAnimations,ignoreHover = _this$getProps.ignoreHover;var children = this.renderChildren();var _PopupHelper$getPosit = _PopupHelper.PopupHelper.getPositionObject(location.position),direction = _PopupHelper$getPosit.direction;var rootStyle = (0, _extends3.default)({}, location.coordinates, { maxWidth: maxWidth });var shouldFallbackShadow = _client.isIE11 || _client.isEdge || _client.isSafari;return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, { timeout: TRANSITION_TIMEOUT, appear: !disableAnimations, in: Boolean(opened && children), mountOnEnter: true, unmountOnExit: true, enter: !disableAnimations, exit: !disableAnimations, onExited: this.resetLocation, nodeRef: this.refForTransition }, function (state) {var _extends2, _ref;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends3.default)({}, _this4.props, { rootNodeRef: _this4.setRootNode }), /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { "data-tid": 'Popup__root', wrapperRef: _this4.refPopupElement, priority: 'Popup', className: (0, _Emotion.cx)((0, _extends3.default)((_extends2 = {}, _extends2[_Popup.styles.popup(_this4.theme)] = true, _extends2[_Popup.styles.shadow(_this4.theme)] = hasShadow && !shouldFallbackShadow, _extends2[_Popup.styles.shadowFallback(_this4.theme)] = hasShadow && shouldFallbackShadow, _extends2[_Popup.styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[_Popup.styles["transition-enter-" + direction](_this4.theme)] = true, _ref[_Popup.styles.transitionEnter()] = state === 'entering', _ref[_Popup.styles.transitionEnterActive()] = state === 'entered', _ref[_Popup.styles.transitionExit()] = state === 'exiting', _ref))), style: rootStyle, onMouseEnter: _this4.handleMouseEnter, onMouseLeave: _this4.handleMouseLeave }, _this4.content(children), !_this4.isMobileLayout && _this4.renderPin(location.position)));});};_proto.renderChildren = function renderChildren() {return (0, _utils.isFunction)(this.props.children) ? this.props.children() : this.props.children;};_proto.renderPin = function renderPin(positionName) {/**
543
557
  * Box-shadow does not appear under the pin. Borders are used instead.
544
558
  * In non-ie browsers drop-shadow filter is used. It is applying
545
559
  * shadow to the pin too.
546
- */var isDefaultBorderColor = this.theme.popupBorderColor === POPUP_BORDER_DEFAULT_COLOR;var pinBorder = _client.isIE11 && isDefaultBorderColor ? 'rgba(0, 0, 0, 0.09)' : this.theme.popupBorderColor;var _this$props4 = this.props,pinSize = _this$props4.pinSize,hasShadow = _this$props4.hasShadow,backgroundColor = _this$props4.backgroundColor,borderColor = _this$props4.borderColor;var position = _PopupHelper.PopupHelper.getPositionObject(positionName);return this.props.hasPin && /*#__PURE__*/_react.default.createElement(_PopupPin.PopupPin, { popupElement: this.lastPopupElement, popupPosition: positionName, size: pinSize || parseInt(this.theme.popupPinSize), offset: this.getPinOffset(position.align), borderWidth: hasShadow ? 1 : 0, backgroundColor: backgroundColor || this.theme.popupBackground, borderColor: borderColor || pinBorder });};_proto.delayUpdateLocation = function delayUpdateLocation() {this.cancelDelayedUpdateLocation();this.locationUpdateId = (0, _raf.default)(this.updateLocation);};_proto.cancelDelayedUpdateLocation = function cancelDelayedUpdateLocation() {if (this.locationUpdateId) {_raf.default.cancel(this.locationUpdateId);this.locationUpdateId = null;}};_proto.locationEquals = function locationEquals(x, y) {if (x === y) {return true;}if ((0, _utils.isNullable)(x) || (0, _utils.isNullable)(y)) {return false;}if (!_client.isIE11 && !_client.isEdge) {
560
+ */var isDefaultBorderColor = this.theme.popupBorderColor === POPUP_BORDER_DEFAULT_COLOR;var pinBorder = _client.isIE11 && isDefaultBorderColor ? 'rgba(0, 0, 0, 0.09)' : this.theme.popupBorderColor;var _this$props2 = this.props,pinSize = _this$props2.pinSize,backgroundColor = _this$props2.backgroundColor,borderColor = _this$props2.borderColor;var _this$getProps2 = this.getProps(),hasShadow = _this$getProps2.hasShadow,hasPin = _this$getProps2.hasPin;var position = _PopupHelper.PopupHelper.getPositionObject(positionName);return hasPin && /*#__PURE__*/_react.default.createElement(_PopupPin.PopupPin, { popupElement: this.lastPopupElement, popupPosition: positionName, size: pinSize || parseInt(this.theme.popupPinSize), offset: this.getPinOffset(position.align), borderWidth: hasShadow ? 1 : 0, backgroundColor: backgroundColor || this.theme.popupBackground, borderColor: borderColor || pinBorder });};_proto.delayUpdateLocation = function delayUpdateLocation() {this.cancelDelayedUpdateLocation();this.locationUpdateId = (0, _raf.default)(this.updateLocation);};_proto.cancelDelayedUpdateLocation = function cancelDelayedUpdateLocation() {if (this.locationUpdateId) {_raf.default.cancel(this.locationUpdateId);this.locationUpdateId = null;}};_proto.locationEquals = function locationEquals(x, y) {if (x === y) {return true;}if ((0, _utils.isNullable)(x) || (0, _utils.isNullable)(y)) {return false;}if (!_client.isIE11 && !_client.isEdge) {
547
561
  return (
548
562
  x.coordinates.left === y.coordinates.left &&
549
563
  x.coordinates.top === y.coordinates.top &&
@@ -562,7 +576,7 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
562
576
  };_proto.
563
577
 
564
578
  getLocation = function getLocation(popupElement, location) {
565
- var _this$props5 = this.props,positions = _this$props5.positions,tryPreserveFirstRenderedPosition = _this$props5.tryPreserveFirstRenderedPosition;
579
+ var _this$props3 = this.props,positions = _this$props3.positions,tryPreserveFirstRenderedPosition = _this$props3.tryPreserveFirstRenderedPosition;
566
580
  var anchorElement = this.anchorElement;
567
581
 
568
582
  (0, _warning.default)(
@@ -613,7 +627,7 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
613
627
  };_proto.
614
628
 
615
629
  getPinnedPopupOffset = function getPinnedPopupOffset(anchorRect, position) {
616
- if (!this.props.hasPin || /center|middle/.test(position.align)) {
630
+ if (!this.getProps().hasPin || /center|middle/.test(position.align)) {
617
631
  return 0;
618
632
  }
619
633
 
@@ -634,7 +648,7 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
634
648
  marginFromProps :
635
649
  parseInt(this.theme.popupMargin) || 0;
636
650
  var position = _PopupHelper.PopupHelper.getPositionObject(positionName);
637
- var popupOffset = this.props.popupOffset + this.getPinnedPopupOffset(anchorRect, position);
651
+ var popupOffset = this.getProps().popupOffset + this.getPinnedPopupOffset(anchorRect, position);
638
652
 
639
653
  switch (position.direction) {
640
654
  case 'top':