@pega/cosmos-react-core 4.0.0-dev.13.0 → 4.0.0-dev.14.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 (483) hide show
  1. package/README.md +2 -2
  2. package/lib/components/AppShell/AppHeader.styles.d.ts.map +1 -1
  3. package/lib/components/AppShell/AppHeader.styles.js +0 -2
  4. package/lib/components/AppShell/AppHeader.styles.js.map +1 -1
  5. package/lib/components/AppShell/AppShell.js.map +1 -1
  6. package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
  7. package/lib/components/AppShell/AppShell.styles.js +10 -16
  8. package/lib/components/AppShell/AppShell.styles.js.map +1 -1
  9. package/lib/components/AppShell/AppShell.types.d.ts +12 -11
  10. package/lib/components/AppShell/AppShell.types.d.ts.map +1 -1
  11. package/lib/components/AppShell/AppShell.types.js.map +1 -1
  12. package/lib/components/AppShell/AppShellContext.d.ts +1 -1
  13. package/lib/components/AppShell/AppShellContext.d.ts.map +1 -1
  14. package/lib/components/AppShell/AppShellContext.js.map +1 -1
  15. package/lib/components/AppShell/AppShellList.d.ts +1 -1
  16. package/lib/components/AppShell/AppShellList.d.ts.map +1 -1
  17. package/lib/components/AppShell/AppShellList.js.map +1 -1
  18. package/lib/components/AppShell/AppShellList.styles.d.ts.map +1 -1
  19. package/lib/components/AppShell/AppShellList.styles.js +1 -2
  20. package/lib/components/AppShell/AppShellList.styles.js.map +1 -1
  21. package/lib/components/AppShell/NavigationList.d.ts.map +1 -1
  22. package/lib/components/AppShell/NavigationList.js.map +1 -1
  23. package/lib/components/AppShell/NavigationListItemWrapper.d.ts.map +1 -1
  24. package/lib/components/AppShell/NavigationListItemWrapper.js +31 -11
  25. package/lib/components/AppShell/NavigationListItemWrapper.js.map +1 -1
  26. package/lib/components/AppShell/Operator.d.ts.map +1 -1
  27. package/lib/components/AppShell/Operator.js +1 -3
  28. package/lib/components/AppShell/Operator.js.map +1 -1
  29. package/lib/components/Avatar/Avatar.d.ts +2 -2
  30. package/lib/components/Avatar/Avatar.js.map +1 -1
  31. package/lib/components/Backdrop/Backdrop.d.ts +9 -21
  32. package/lib/components/Backdrop/Backdrop.d.ts.map +1 -1
  33. package/lib/components/Backdrop/Backdrop.js +0 -2
  34. package/lib/components/Backdrop/Backdrop.js.map +1 -1
  35. package/lib/components/Badges/Count.d.ts +1 -1
  36. package/lib/components/Badges/Count.js.map +1 -1
  37. package/lib/components/Banner/Banner.d.ts +1 -1
  38. package/lib/components/Banner/Banner.d.ts.map +1 -1
  39. package/lib/components/Banner/Banner.js +3 -3
  40. package/lib/components/Banner/Banner.js.map +1 -1
  41. package/lib/components/Boolean/BooleanDisplay.d.ts +2 -2
  42. package/lib/components/Boolean/BooleanDisplay.js +2 -2
  43. package/lib/components/Boolean/BooleanDisplay.js.map +1 -1
  44. package/lib/components/Button/BareButton.d.ts +1 -1
  45. package/lib/components/Button/BareButton.js.map +1 -1
  46. package/lib/components/Button/Button.d.ts +7 -9
  47. package/lib/components/Button/Button.d.ts.map +1 -1
  48. package/lib/components/Button/Button.js +168 -142
  49. package/lib/components/Button/Button.js.map +1 -1
  50. package/lib/components/ColorPicker/ColorPicker.d.ts +1 -1
  51. package/lib/components/ColorPicker/ColorPicker.js +1 -1
  52. package/lib/components/ColorPicker/ColorPicker.js.map +1 -1
  53. package/lib/components/ColorPicker/ColorPicker.test-ids.d.ts +1 -1
  54. package/lib/components/ColorPicker/ColorPicker.test-ids.d.ts.map +1 -1
  55. package/lib/components/ColorPicker/ColorPicker.test-ids.js +5 -1
  56. package/lib/components/ColorPicker/ColorPicker.test-ids.js.map +1 -1
  57. package/lib/components/ComboBox/ComboBox.d.ts.map +1 -1
  58. package/lib/components/ComboBox/ComboBox.js +2 -10
  59. package/lib/components/ComboBox/ComboBox.js.map +1 -1
  60. package/lib/components/ComboBox/ComboxBox.test-ids.d.ts +1 -1
  61. package/lib/components/ComboBox/ComboxBox.test-ids.d.ts.map +1 -1
  62. package/lib/components/ComboBox/ComboxBox.test-ids.js +2 -1
  63. package/lib/components/ComboBox/ComboxBox.test-ids.js.map +1 -1
  64. package/lib/components/CompositeInput/CompositeInput.d.ts.map +1 -1
  65. package/lib/components/CompositeInput/CompositeInput.js +8 -10
  66. package/lib/components/CompositeInput/CompositeInput.js.map +1 -1
  67. package/lib/components/CompositeInput/CompositeInput.test-ids.d.ts +1 -1
  68. package/lib/components/CompositeInput/CompositeInput.test-ids.d.ts.map +1 -1
  69. package/lib/components/CompositeInput/CompositeInput.test-ids.js +5 -1
  70. package/lib/components/CompositeInput/CompositeInput.test-ids.js.map +1 -1
  71. package/lib/components/CompositeInput/CompositeInput.types.d.ts +2 -6
  72. package/lib/components/CompositeInput/CompositeInput.types.d.ts.map +1 -1
  73. package/lib/components/CompositeInput/CompositeInput.types.js.map +1 -1
  74. package/lib/components/Configuration/Configuration.d.ts +9 -27
  75. package/lib/components/Configuration/Configuration.d.ts.map +1 -1
  76. package/lib/components/Configuration/Configuration.js +5 -1
  77. package/lib/components/Configuration/Configuration.js.map +1 -1
  78. package/lib/components/CreditCard/utils.d.ts +1 -1
  79. package/lib/components/CreditCard/utils.d.ts.map +1 -1
  80. package/lib/components/CreditCard/utils.js +1 -1
  81. package/lib/components/CreditCard/utils.js.map +1 -1
  82. package/lib/components/Currency/Currency.test-ids.d.ts +1 -1
  83. package/lib/components/Currency/Currency.test-ids.d.ts.map +1 -1
  84. package/lib/components/Currency/Currency.test-ids.js +5 -1
  85. package/lib/components/Currency/Currency.test-ids.js.map +1 -1
  86. package/lib/components/Currency/CurrencyInput.js +1 -1
  87. package/lib/components/Currency/CurrencyInput.js.map +1 -1
  88. package/lib/components/Currency/CurrencyInput.types.d.ts +3 -7
  89. package/lib/components/Currency/CurrencyInput.types.d.ts.map +1 -1
  90. package/lib/components/Currency/CurrencyInput.types.js.map +1 -1
  91. package/lib/components/DateTime/DateTimeDisplay.d.ts +4 -10
  92. package/lib/components/DateTime/DateTimeDisplay.d.ts.map +1 -1
  93. package/lib/components/DateTime/DateTimeDisplay.js.map +1 -1
  94. package/lib/components/DateTime/Input/DateInput.d.ts.map +1 -1
  95. package/lib/components/DateTime/Input/DateInput.js +25 -32
  96. package/lib/components/DateTime/Input/DateInput.js.map +1 -1
  97. package/lib/components/DateTime/Input/DateTime.styles.d.ts +1 -0
  98. package/lib/components/DateTime/Input/DateTime.styles.d.ts.map +1 -1
  99. package/lib/components/DateTime/Input/DateTime.styles.js +3 -0
  100. package/lib/components/DateTime/Input/DateTime.styles.js.map +1 -1
  101. package/lib/components/DateTime/Input/DateTimeInput.d.ts +1 -3
  102. package/lib/components/DateTime/Input/DateTimeInput.d.ts.map +1 -1
  103. package/lib/components/DateTime/Input/DateTimeInput.js +20 -27
  104. package/lib/components/DateTime/Input/DateTimeInput.js.map +1 -1
  105. package/lib/components/DateTime/Input/TimeInput.d.ts +1 -3
  106. package/lib/components/DateTime/Input/TimeInput.d.ts.map +1 -1
  107. package/lib/components/DateTime/Input/TimeInput.js +1 -9
  108. package/lib/components/DateTime/Input/TimeInput.js.map +1 -1
  109. package/lib/components/DateTime/Input/TimeRangeInput.d.ts +1 -3
  110. package/lib/components/DateTime/Input/TimeRangeInput.d.ts.map +1 -1
  111. package/lib/components/DateTime/Input/TimeRangeInput.js.map +1 -1
  112. package/lib/components/DateTime/Input/WeekInput.d.ts.map +1 -1
  113. package/lib/components/DateTime/Input/WeekInput.js +11 -17
  114. package/lib/components/DateTime/Input/WeekInput.js.map +1 -1
  115. package/lib/components/DateTime/Input/usePickerButton.js +3 -3
  116. package/lib/components/DateTime/Input/usePickerButton.js.map +1 -1
  117. package/lib/components/DateTime/Picker/Calendar.d.ts +4 -6
  118. package/lib/components/DateTime/Picker/Calendar.d.ts.map +1 -1
  119. package/lib/components/DateTime/Picker/Calendar.js +1 -1
  120. package/lib/components/DateTime/Picker/Calendar.js.map +1 -1
  121. package/lib/components/DateTime/Picker/DatePicker.types.d.ts +2 -4
  122. package/lib/components/DateTime/Picker/DatePicker.types.d.ts.map +1 -1
  123. package/lib/components/DateTime/Picker/DatePicker.types.js.map +1 -1
  124. package/lib/components/DateTime/Picker/TimePicker.d.ts +1 -3
  125. package/lib/components/DateTime/Picker/TimePicker.d.ts.map +1 -1
  126. package/lib/components/DateTime/Picker/TimePicker.js.map +1 -1
  127. package/lib/components/DateTime/Picker/Weeks.d.ts +1 -3
  128. package/lib/components/DateTime/Picker/Weeks.d.ts.map +1 -1
  129. package/lib/components/DateTime/Picker/Weeks.js +1 -1
  130. package/lib/components/DateTime/Picker/Weeks.js.map +1 -1
  131. package/lib/components/DateTime/Picker/utils.js +1 -1
  132. package/lib/components/DateTime/Picker/utils.js.map +1 -1
  133. package/lib/components/DateTime/utils.d.ts.map +1 -1
  134. package/lib/components/DateTime/utils.js +8 -6
  135. package/lib/components/DateTime/utils.js.map +1 -1
  136. package/lib/components/Dialog/Dialog.d.ts.map +1 -1
  137. package/lib/components/Dialog/Dialog.js +2 -2
  138. package/lib/components/Dialog/Dialog.js.map +1 -1
  139. package/lib/components/Dialog/Dialog.styles.d.ts +3 -0
  140. package/lib/components/Dialog/Dialog.styles.d.ts.map +1 -1
  141. package/lib/components/Dialog/Dialog.styles.js +29 -2
  142. package/lib/components/Dialog/Dialog.styles.js.map +1 -1
  143. package/lib/components/Dialog/Dialog.types.d.ts +34 -34
  144. package/lib/components/Dialog/Dialog.types.d.ts.map +1 -1
  145. package/lib/components/Dialog/Dialog.types.js +0 -1
  146. package/lib/components/Dialog/Dialog.types.js.map +1 -1
  147. package/lib/components/Dialog/FormDialog.d.ts +4 -1
  148. package/lib/components/Dialog/FormDialog.d.ts.map +1 -1
  149. package/lib/components/Dialog/FormDialog.js +4 -5
  150. package/lib/components/Dialog/FormDialog.js.map +1 -1
  151. package/lib/components/Dialog/InfoDialog.d.ts +0 -1
  152. package/lib/components/Dialog/InfoDialog.d.ts.map +1 -1
  153. package/lib/components/Dialog/InfoDialog.js +15 -13
  154. package/lib/components/Dialog/InfoDialog.js.map +1 -1
  155. package/lib/components/Dialog/InfoDialog.styles.d.ts +6 -0
  156. package/lib/components/Dialog/InfoDialog.styles.d.ts.map +1 -0
  157. package/lib/components/Dialog/InfoDialog.styles.js +18 -0
  158. package/lib/components/Dialog/InfoDialog.styles.js.map +1 -0
  159. package/lib/components/Drawer/Drawer.d.ts +9 -9
  160. package/lib/components/Drawer/Drawer.d.ts.map +1 -1
  161. package/lib/components/Drawer/Drawer.js.map +1 -1
  162. package/lib/components/Email/EmailDisplay.d.ts +1 -1
  163. package/lib/components/Email/EmailDisplay.js.map +1 -1
  164. package/lib/components/EmojiPicker/EmojiPicker.styles.d.ts.map +1 -1
  165. package/lib/components/EmojiPicker/EmojiPicker.styles.js +2 -7
  166. package/lib/components/EmojiPicker/EmojiPicker.styles.js.map +1 -1
  167. package/lib/components/ExpandCollapse/ExpandCollapse.d.ts +6 -6
  168. package/lib/components/ExpandCollapse/ExpandCollapse.d.ts.map +1 -1
  169. package/lib/components/ExpandCollapse/ExpandCollapse.js.map +1 -1
  170. package/lib/components/FieldGroup/FieldGroup.d.ts +1 -3
  171. package/lib/components/FieldGroup/FieldGroup.d.ts.map +1 -1
  172. package/lib/components/FieldGroup/FieldGroup.js.map +1 -1
  173. package/lib/components/FieldValueList/FieldValueList.d.ts +5 -3
  174. package/lib/components/FieldValueList/FieldValueList.d.ts.map +1 -1
  175. package/lib/components/FieldValueList/FieldValueList.js.map +1 -1
  176. package/lib/components/FieldValueList/FieldValueList.test-ids.d.ts +2 -2
  177. package/lib/components/FieldValueList/FieldValueList.test-ids.d.ts.map +1 -1
  178. package/lib/components/FieldValueList/index.d.ts +1 -1
  179. package/lib/components/FieldValueList/index.d.ts.map +1 -1
  180. package/lib/components/FieldValueList/index.js.map +1 -1
  181. package/lib/components/File/File.test-ids.d.ts +1 -1
  182. package/lib/components/File/File.test-ids.d.ts.map +1 -1
  183. package/lib/components/File/File.test-ids.js +6 -1
  184. package/lib/components/File/File.test-ids.js.map +1 -1
  185. package/lib/components/File/FileDisplay.d.ts +2 -2
  186. package/lib/components/File/FileDisplay.d.ts.map +1 -1
  187. package/lib/components/File/FileDisplay.js.map +1 -1
  188. package/lib/components/File/FileInput.d.ts +1 -3
  189. package/lib/components/File/FileInput.d.ts.map +1 -1
  190. package/lib/components/File/FileInput.js +1 -1
  191. package/lib/components/File/FileInput.js.map +1 -1
  192. package/lib/components/Flex/Flex.d.ts +7 -1
  193. package/lib/components/Flex/Flex.d.ts.map +1 -1
  194. package/lib/components/Flex/Flex.js +37 -10
  195. package/lib/components/Flex/Flex.js.map +1 -1
  196. package/lib/components/FormControl/FormControl.d.ts +3 -2
  197. package/lib/components/FormControl/FormControl.d.ts.map +1 -1
  198. package/lib/components/FormControl/FormControl.js.map +1 -1
  199. package/lib/components/FormField/FormField.d.ts +4 -3
  200. package/lib/components/FormField/FormField.d.ts.map +1 -1
  201. package/lib/components/FormField/FormField.js +10 -14
  202. package/lib/components/FormField/FormField.js.map +1 -1
  203. package/lib/components/FormField/FormField.test-ids.d.ts +2 -1
  204. package/lib/components/FormField/FormField.test-ids.d.ts.map +1 -1
  205. package/lib/components/FormField/FormField.test-ids.js +3 -2
  206. package/lib/components/FormField/FormField.test-ids.js.map +1 -1
  207. package/lib/components/Grid/Grid.d.ts.map +1 -1
  208. package/lib/components/Grid/Grid.js +0 -3
  209. package/lib/components/Grid/Grid.js.map +1 -1
  210. package/lib/components/Grid/Grid.types.d.ts +6 -6
  211. package/lib/components/Grid/Grid.types.js.map +1 -1
  212. package/lib/components/Icon/iconNames.d.ts +2 -2
  213. package/lib/components/Icon/iconNames.d.ts.map +1 -1
  214. package/lib/components/Icon/iconNames.js +2 -0
  215. package/lib/components/Icon/iconNames.js.map +1 -1
  216. package/lib/components/Icon/icons/phone-merge-solid.icon.d.ts +4 -0
  217. package/lib/components/Icon/icons/phone-merge-solid.icon.d.ts.map +1 -0
  218. package/lib/components/Icon/icons/phone-merge-solid.icon.js +6 -0
  219. package/lib/components/Icon/icons/phone-merge-solid.icon.js.map +1 -0
  220. package/lib/components/Icon/icons/phone-merge.icon.d.ts +4 -0
  221. package/lib/components/Icon/icons/phone-merge.icon.d.ts.map +1 -0
  222. package/lib/components/Icon/icons/phone-merge.icon.js +6 -0
  223. package/lib/components/Icon/icons/phone-merge.icon.js.map +1 -0
  224. package/lib/components/IconPicker/IconPicker.js +2 -2
  225. package/lib/components/IconPicker/IconPicker.js.map +1 -1
  226. package/lib/components/Input/Input.d.ts +1 -1
  227. package/lib/components/Input/Input.js +1 -1
  228. package/lib/components/Input/Input.js.map +1 -1
  229. package/lib/components/Input/Input.test-ids.d.ts +1 -1
  230. package/lib/components/Input/Input.test-ids.d.ts.map +1 -1
  231. package/lib/components/Input/Input.test-ids.js +2 -1
  232. package/lib/components/Input/Input.test-ids.js.map +1 -1
  233. package/lib/components/Label/Label.d.ts +1 -1
  234. package/lib/components/Label/Label.js.map +1 -1
  235. package/lib/components/Lightbox/Lightbox.types.d.ts +1 -1
  236. package/lib/components/Lightbox/Lightbox.types.d.ts.map +1 -1
  237. package/lib/components/Lightbox/Lightbox.types.js.map +1 -1
  238. package/lib/components/Link/Link.d.ts +1 -1
  239. package/lib/components/Link/Link.js.map +1 -1
  240. package/lib/components/List/List.d.ts.map +1 -1
  241. package/lib/components/List/List.js.map +1 -1
  242. package/lib/components/ListToolbar/ListToolbar.d.ts +1 -1
  243. package/lib/components/ListToolbar/ListToolbar.d.ts.map +1 -1
  244. package/lib/components/ListToolbar/ListToolbar.js +49 -17
  245. package/lib/components/ListToolbar/ListToolbar.js.map +1 -1
  246. package/lib/components/ListToolbar/ListToolbar.styles.d.ts +3 -1
  247. package/lib/components/ListToolbar/ListToolbar.styles.d.ts.map +1 -1
  248. package/lib/components/ListToolbar/ListToolbar.styles.js +2 -3
  249. package/lib/components/ListToolbar/ListToolbar.styles.js.map +1 -1
  250. package/lib/components/ListToolbar/ListToolbar.test-ids.d.ts +2 -0
  251. package/lib/components/ListToolbar/ListToolbar.test-ids.d.ts.map +1 -0
  252. package/lib/components/ListToolbar/ListToolbar.test-ids.js +7 -0
  253. package/lib/components/ListToolbar/ListToolbar.test-ids.js.map +1 -0
  254. package/lib/components/ListToolbar/ListToolbar.types.d.ts +32 -9
  255. package/lib/components/ListToolbar/ListToolbar.types.d.ts.map +1 -1
  256. package/lib/components/ListToolbar/ListToolbar.types.js.map +1 -1
  257. package/lib/components/ListToolbar/helpers.d.ts +10 -0
  258. package/lib/components/ListToolbar/helpers.d.ts.map +1 -0
  259. package/lib/components/ListToolbar/helpers.js +46 -0
  260. package/lib/components/ListToolbar/helpers.js.map +1 -0
  261. package/lib/components/ListToolbar/index.d.ts +1 -0
  262. package/lib/components/ListToolbar/index.d.ts.map +1 -1
  263. package/lib/components/ListToolbar/index.js +1 -0
  264. package/lib/components/ListToolbar/index.js.map +1 -1
  265. package/lib/components/LiveLog/LiveLog.d.ts.map +1 -1
  266. package/lib/components/LiveLog/LiveLog.js +17 -16
  267. package/lib/components/LiveLog/LiveLog.js.map +1 -1
  268. package/lib/components/Location/Location.test-ids.d.ts +1 -1
  269. package/lib/components/Location/Location.test-ids.d.ts.map +1 -1
  270. package/lib/components/Location/Location.test-ids.js +5 -1
  271. package/lib/components/Location/Location.test-ids.js.map +1 -1
  272. package/lib/components/Location/LocationDisplay.d.ts +1 -1
  273. package/lib/components/Location/LocationDisplay.js.map +1 -1
  274. package/lib/components/Location/LocationInput.js +1 -1
  275. package/lib/components/Location/LocationInput.js.map +1 -1
  276. package/lib/components/Location/utils.d.ts +1 -1
  277. package/lib/components/Location/utils.d.ts.map +1 -1
  278. package/lib/components/Location/utils.js +1 -1
  279. package/lib/components/Location/utils.js.map +1 -1
  280. package/lib/components/Menu/Menu.styles.d.ts.map +1 -1
  281. package/lib/components/Menu/Menu.styles.js +1 -4
  282. package/lib/components/Menu/Menu.styles.js.map +1 -1
  283. package/lib/components/Menu/Menu.test-ids.d.ts +2 -2
  284. package/lib/components/Menu/Menu.test-ids.d.ts.map +1 -1
  285. package/lib/components/Menu/Menu.types.d.ts +6 -12
  286. package/lib/components/Menu/Menu.types.d.ts.map +1 -1
  287. package/lib/components/Menu/Menu.types.js.map +1 -1
  288. package/lib/components/Menu/NavItemsList.d.ts.map +1 -1
  289. package/lib/components/Menu/NavItemsList.js +2 -0
  290. package/lib/components/Menu/NavItemsList.js.map +1 -1
  291. package/lib/components/MenuButton/MenuButton.d.ts +3 -3
  292. package/lib/components/MenuButton/MenuButton.d.ts.map +1 -1
  293. package/lib/components/MenuButton/MenuButton.js +6 -4
  294. package/lib/components/MenuButton/MenuButton.js.map +1 -1
  295. package/lib/components/MenuButton/MenuButton.test-ids.d.ts +2 -0
  296. package/lib/components/MenuButton/MenuButton.test-ids.d.ts.map +1 -0
  297. package/lib/components/MenuButton/MenuButton.test-ids.js +3 -0
  298. package/lib/components/MenuButton/MenuButton.test-ids.js.map +1 -0
  299. package/lib/components/MetaList/MetaList.test-ids.d.ts +1 -1
  300. package/lib/components/MetaList/MetaList.test-ids.d.ts.map +1 -1
  301. package/lib/components/Modal/Modal.d.ts.map +1 -1
  302. package/lib/components/Modal/Modal.js +3 -5
  303. package/lib/components/Modal/Modal.js.map +1 -1
  304. package/lib/components/Modal/Modal.styles.js +1 -1
  305. package/lib/components/Modal/Modal.styles.js.map +1 -1
  306. package/lib/components/Modal/Modal.types.d.ts +25 -71
  307. package/lib/components/Modal/Modal.types.d.ts.map +1 -1
  308. package/lib/components/Modal/Modal.types.js.map +1 -1
  309. package/lib/components/Modal/ModalManager.d.ts.map +1 -1
  310. package/lib/components/Modal/ModalManager.js +5 -2
  311. package/lib/components/Modal/ModalManager.js.map +1 -1
  312. package/lib/components/MultiStepForm/HorizontalFormProgress.d.ts.map +1 -1
  313. package/lib/components/MultiStepForm/HorizontalFormProgress.js +4 -0
  314. package/lib/components/MultiStepForm/HorizontalFormProgress.js.map +1 -1
  315. package/lib/components/MultiStepForm/MultiStepForm.d.ts.map +1 -1
  316. package/lib/components/MultiStepForm/MultiStepForm.js +1 -1
  317. package/lib/components/MultiStepForm/MultiStepForm.js.map +1 -1
  318. package/lib/components/MultiStepForm/MultiStepForm.types.d.ts +1 -1
  319. package/lib/components/MultiStepForm/MultiStepForm.types.js.map +1 -1
  320. package/lib/components/Number/Number.test-ids.d.ts +2 -2
  321. package/lib/components/Number/Number.test-ids.d.ts.map +1 -1
  322. package/lib/components/Number/Number.test-ids.js +8 -2
  323. package/lib/components/Number/Number.test-ids.js.map +1 -1
  324. package/lib/components/Number/NumberInput.js +1 -1
  325. package/lib/components/Number/NumberInput.js.map +1 -1
  326. package/lib/components/Number/NumberRangeInput.js +1 -1
  327. package/lib/components/Number/NumberRangeInput.js.map +1 -1
  328. package/lib/components/PageTemplates/PageTemplates.js +2 -2
  329. package/lib/components/PageTemplates/PageTemplates.js.map +1 -1
  330. package/lib/components/Phone/Phone.test-ids.d.ts +1 -1
  331. package/lib/components/Phone/Phone.test-ids.d.ts.map +1 -1
  332. package/lib/components/Phone/Phone.test-ids.js +3 -1
  333. package/lib/components/Phone/Phone.test-ids.js.map +1 -1
  334. package/lib/components/Phone/PhoneDisplay.d.ts +1 -1
  335. package/lib/components/Phone/PhoneDisplay.js.map +1 -1
  336. package/lib/components/Phone/PhoneInput.js +2 -2
  337. package/lib/components/Phone/PhoneInput.js.map +1 -1
  338. package/lib/components/Popover/Popover.d.ts +4 -3
  339. package/lib/components/Popover/Popover.d.ts.map +1 -1
  340. package/lib/components/Popover/Popover.js +36 -24
  341. package/lib/components/Popover/Popover.js.map +1 -1
  342. package/lib/components/Popover/PopoverManager.d.ts.map +1 -1
  343. package/lib/components/Popover/PopoverManager.js +11 -10
  344. package/lib/components/Popover/PopoverManager.js.map +1 -1
  345. package/lib/components/Popover/modifiers.d.ts +1 -0
  346. package/lib/components/Popover/modifiers.d.ts.map +1 -1
  347. package/lib/components/Popover/modifiers.js +116 -1
  348. package/lib/components/Popover/modifiers.js.map +1 -1
  349. package/lib/components/Progress/Progress.styles.d.ts.map +1 -1
  350. package/lib/components/Progress/Progress.styles.js +25 -20
  351. package/lib/components/Progress/Progress.styles.js.map +1 -1
  352. package/lib/components/Progress/Progress.types.d.ts +2 -2
  353. package/lib/components/Progress/Progress.types.js.map +1 -1
  354. package/lib/components/RadioCheck/RadioCheck.js +2 -2
  355. package/lib/components/RadioCheck/RadioCheck.js.map +1 -1
  356. package/lib/components/SearchInput/SearchInput.d.ts +1 -1
  357. package/lib/components/SearchInput/SearchInput.d.ts.map +1 -1
  358. package/lib/components/SearchInput/SearchInput.js +1 -9
  359. package/lib/components/SearchInput/SearchInput.js.map +1 -1
  360. package/lib/components/Select/Select.js +2 -2
  361. package/lib/components/Select/Select.js.map +1 -1
  362. package/lib/components/Select/Select.test-ids.d.ts +1 -1
  363. package/lib/components/Select/Select.test-ids.d.ts.map +1 -1
  364. package/lib/components/Select/Select.test-ids.js +2 -1
  365. package/lib/components/Select/Select.test-ids.js.map +1 -1
  366. package/lib/components/Skeleton/LineSkeleton.d.ts +2 -2
  367. package/lib/components/Skeleton/LineSkeleton.js.map +1 -1
  368. package/lib/components/Skeleton/RectangleSkeleton.d.ts +3 -3
  369. package/lib/components/Skeleton/RectangleSkeleton.js.map +1 -1
  370. package/lib/components/Slider/Slider.js +1 -1
  371. package/lib/components/Slider/Slider.js.map +1 -1
  372. package/lib/components/Slider/Slider.styles.d.ts.map +1 -1
  373. package/lib/components/Slider/Slider.styles.js +114 -128
  374. package/lib/components/Slider/Slider.styles.js.map +1 -1
  375. package/lib/components/Slider/Slider.test-ids.d.ts +1 -1
  376. package/lib/components/Slider/Slider.test-ids.d.ts.map +1 -1
  377. package/lib/components/Slider/Slider.test-ids.js +2 -1
  378. package/lib/components/Slider/Slider.test-ids.js.map +1 -1
  379. package/lib/components/Slider/Slider.types.d.ts +3 -9
  380. package/lib/components/Slider/Slider.types.d.ts.map +1 -1
  381. package/lib/components/Slider/Slider.types.js.map +1 -1
  382. package/lib/components/Slider/utils.d.ts.map +1 -1
  383. package/lib/components/Slider/utils.js +0 -1
  384. package/lib/components/Slider/utils.js.map +1 -1
  385. package/lib/components/SummaryItem/SummaryItem.d.ts +2 -1
  386. package/lib/components/SummaryItem/SummaryItem.d.ts.map +1 -1
  387. package/lib/components/SummaryItem/SummaryItem.js.map +1 -1
  388. package/lib/components/SummaryItem/SummaryItem.test-ids.d.ts +1 -1
  389. package/lib/components/SummaryItem/SummaryItem.test-ids.d.ts.map +1 -1
  390. package/lib/components/SummaryList/SummaryList.d.ts +2 -2
  391. package/lib/components/SummaryList/SummaryList.d.ts.map +1 -1
  392. package/lib/components/SummaryList/SummaryList.js.map +1 -1
  393. package/lib/components/Table/Table.d.ts +1 -1
  394. package/lib/components/Table/Table.js.map +1 -1
  395. package/lib/components/Tabs/Tab.d.ts.map +1 -1
  396. package/lib/components/Tabs/Tab.js +21 -18
  397. package/lib/components/Tabs/Tab.js.map +1 -1
  398. package/lib/components/Tabs/TabPanel.d.ts +1 -1
  399. package/lib/components/Tabs/TabPanel.d.ts.map +1 -1
  400. package/lib/components/Tabs/TabPanel.js.map +1 -1
  401. package/lib/components/Tabs/Tabs.types.d.ts +1 -1
  402. package/lib/components/Tabs/Tabs.types.js.map +1 -1
  403. package/lib/components/Text/Text.d.ts +2 -4
  404. package/lib/components/Text/Text.d.ts.map +1 -1
  405. package/lib/components/Text/Text.js.map +1 -1
  406. package/lib/components/TextArea/TextArea.js +1 -1
  407. package/lib/components/TextArea/TextArea.js.map +1 -1
  408. package/lib/components/TextArea/TextArea.test-ids.d.ts +1 -1
  409. package/lib/components/TextArea/TextArea.test-ids.d.ts.map +1 -1
  410. package/lib/components/TextArea/TextArea.test-ids.js +2 -1
  411. package/lib/components/TextArea/TextArea.test-ids.js.map +1 -1
  412. package/lib/components/Toaster/Toaster.types.d.ts +1 -1
  413. package/lib/components/Toaster/Toaster.types.d.ts.map +1 -1
  414. package/lib/components/Toaster/Toaster.types.js.map +1 -1
  415. package/lib/components/Tooltip/Tooltip.d.ts +3 -3
  416. package/lib/components/Tooltip/Tooltip.js.map +1 -1
  417. package/lib/components/URL/URLDisplay.d.ts +1 -1
  418. package/lib/components/URL/URLDisplay.js +2 -2
  419. package/lib/components/URL/URLDisplay.js.map +1 -1
  420. package/lib/hooks/index.d.ts +1 -0
  421. package/lib/hooks/index.d.ts.map +1 -1
  422. package/lib/hooks/index.js +1 -0
  423. package/lib/hooks/index.js.map +1 -1
  424. package/lib/hooks/useArrows.js +1 -1
  425. package/lib/hooks/useArrows.js.map +1 -1
  426. package/lib/hooks/useBreakpoint.d.ts.map +1 -1
  427. package/lib/hooks/useBreakpoint.js +4 -1
  428. package/lib/hooks/useBreakpoint.js.map +1 -1
  429. package/lib/hooks/useChToPxConversionFactor.d.ts +3 -0
  430. package/lib/hooks/useChToPxConversionFactor.d.ts.map +1 -0
  431. package/lib/hooks/useChToPxConversionFactor.js +13 -0
  432. package/lib/hooks/useChToPxConversionFactor.js.map +1 -0
  433. package/lib/hooks/useElement.d.ts +1 -1
  434. package/lib/hooks/useElement.d.ts.map +1 -1
  435. package/lib/hooks/useI18n.d.ts +13 -0
  436. package/lib/hooks/useI18n.d.ts.map +1 -1
  437. package/lib/hooks/useScrollToggle.d.ts.map +1 -1
  438. package/lib/hooks/useScrollToggle.js +0 -1
  439. package/lib/hooks/useScrollToggle.js.map +1 -1
  440. package/lib/hooks/useTestIds.d.ts +1 -1
  441. package/lib/hooks/useTestIds.d.ts.map +1 -1
  442. package/lib/hooks/useTestIds.js +3 -0
  443. package/lib/hooks/useTestIds.js.map +1 -1
  444. package/lib/i18n/default.d.ts +13 -0
  445. package/lib/i18n/default.d.ts.map +1 -1
  446. package/lib/i18n/default.js +14 -0
  447. package/lib/i18n/default.js.map +1 -1
  448. package/lib/i18n/i18n.d.ts +13 -0
  449. package/lib/i18n/i18n.d.ts.map +1 -1
  450. package/lib/i18n/translate.d.ts +2 -6
  451. package/lib/i18n/translate.d.ts.map +1 -1
  452. package/lib/i18n/translate.js.map +1 -1
  453. package/lib/styles/gradients.d.ts.map +1 -1
  454. package/lib/styles/gradients.js.map +1 -1
  455. package/lib/theme/ThemeMachine.js.map +1 -1
  456. package/lib/types/types.d.ts +7 -2
  457. package/lib/types/types.d.ts.map +1 -1
  458. package/lib/types/types.js.map +1 -1
  459. package/lib/utils/createTestIds.d.ts +1 -6
  460. package/lib/utils/createTestIds.d.ts.map +1 -1
  461. package/lib/utils/createTestIds.js +2 -4
  462. package/lib/utils/createTestIds.js.map +1 -1
  463. package/lib/utils/debounce.d.ts +2 -2
  464. package/lib/utils/debounce.d.ts.map +1 -1
  465. package/lib/utils/debounce.js +9 -10
  466. package/lib/utils/debounce.js.map +1 -1
  467. package/lib/utils/getEdge.d.ts +7 -0
  468. package/lib/utils/getEdge.d.ts.map +1 -0
  469. package/lib/utils/getEdge.js +9 -0
  470. package/lib/utils/getEdge.js.map +1 -0
  471. package/lib/utils/index.d.ts +2 -1
  472. package/lib/utils/index.d.ts.map +1 -1
  473. package/lib/utils/index.js +2 -0
  474. package/lib/utils/index.js.map +1 -1
  475. package/lib/utils/kebabToCamel.d.ts +1 -3
  476. package/lib/utils/kebabToCamel.d.ts.map +1 -1
  477. package/lib/utils/kebabToCamel.js +1 -3
  478. package/lib/utils/kebabToCamel.js.map +1 -1
  479. package/lib/utils/throttle.d.ts +4 -0
  480. package/lib/utils/throttle.d.ts.map +1 -0
  481. package/lib/utils/throttle.js +15 -0
  482. package/lib/utils/throttle.js.map +1 -0
  483. package/package.json +2 -2
@@ -119,101 +119,78 @@ export const StyledSlider = styled.div(props => {
119
119
  line-height: calc(${spacing} * 4);
120
120
  }
121
121
 
122
- ${status &&
123
- css `
124
- ${StyledBar}::before {
125
- background-color: ${statusColor};
126
- }
127
-
128
- ${StyledThumb} {
129
- border-color: ${borderColor};
130
- :hover,
131
- :active {
132
- background-color: ${thumbBgColor};
133
- }
134
- }
135
- `}
136
-
137
- ${orientation === 'horizontal' &&
138
- css `
139
- ${StyledSliderTrackWrapper} {
140
- margin-inline: calc(1.5 * ${spacing});
141
-
142
- ${StyledTrack},
143
- ${StyledThumb} {
144
- grid-row: 1;
145
- }
146
-
147
- ${StyledBar} {
148
- /* extend by thumb width */
149
- min-width: calc(100% + ${spacing} * 3);
150
- }
122
+ ${orientation === 'horizontal'
123
+ ? css `
124
+ ${StyledSliderTrackWrapper} {
125
+ margin-inline: calc(1.5 * ${spacing});
151
126
 
152
- ${StyledTicksContainer} {
153
- grid-row: 2;
154
- }
127
+ ${StyledTrack},
128
+ ${StyledThumb} {
129
+ grid-row: 1;
130
+ }
155
131
 
156
- & + ${StyledNumberInput}, & + ${StyledPreview} {
157
- margin-inline-start: calc(2 * ${spacing});
158
- }
159
- }
160
- `}
132
+ ${StyledBar} {
133
+ /* extend by thumb width */
134
+ min-width: calc(100% + ${spacing} * 3);
135
+ }
161
136
 
162
- /* disabling 'duplicate selectors' rule to keep the css rules grouped by orientation prop */
137
+ ${StyledTicksContainer} {
138
+ grid-row: 2;
139
+ }
163
140
 
164
- /* stylelint-disable no-duplicate-selectors */
165
- ${orientation === 'vertical' &&
166
- css `
167
- ${StyledSliderTrackWrapper} {
168
- grid-template-columns: calc(${spacing} * 4) minmax(0, 1fr);
169
- grid-template-rows: 0.5em [track-start] minmax(calc(${spacing} * 20), max-content) [track-end] 0.5em;
170
- margin-top: ${spacing};
141
+ & + ${StyledNumberInput}, & + ${StyledPreview} {
142
+ margin-inline-start: calc(2 * ${spacing});
143
+ }
144
+ }
145
+ `
146
+ : css `
147
+ ${StyledSliderTrackWrapper} {
148
+ grid-template-columns: calc(${spacing} * 4) minmax(0, 1fr);
149
+ grid-template-rows: 0.5em [track-start] minmax(calc(${spacing} * 20), max-content) [track-end] 0.5em;
150
+ margin-top: ${spacing};
171
151
 
172
- ${StyledTrack} {
173
- grid-row: track-start / track-end;
174
- height: 100%;
175
- transform: scale(-1);
152
+ ${StyledTrack} {
153
+ grid-row: track-start / track-end;
154
+ height: 100%;
155
+ transform: scale(-1);
176
156
 
177
- ${StyledBar} {
178
- height: 100%;
179
- width: ${spacing};
157
+ ${StyledBar} {
158
+ height: 100%;
159
+ width: ${spacing};
180
160
 
181
- ::before {
182
- transform: translateY(calc(-100% + var(--slider-value, 0)));
161
+ ::before {
162
+ transform: translateY(calc(-100% + var(--slider-value, 0)));
163
+ }
164
+ }
183
165
  }
184
- }
185
- }
186
166
 
187
- ${StyledThumb} {
188
- grid-row: track-start / track-end;
189
- top: auto;
190
- bottom: calc(100% - var(--slider-value));
191
- left: calc(${spacing} / 2);
192
- right: calc(${spacing} / 2);
193
- transform: translate(0, 50%);
194
- }
167
+ ${StyledThumb} {
168
+ grid-row: track-start / track-end;
169
+ top: auto;
170
+ bottom: calc(100% - var(--slider-value));
171
+ left: calc(${spacing} / 2);
172
+ right: calc(${spacing} / 2);
173
+ transform: translate(0, 50%);
174
+ }
195
175
 
196
- ${StyledTicksContainer} {
197
- grid-row: 1 / -1;
198
- height: 100%;
199
- }
176
+ ${StyledTicksContainer} {
177
+ grid-row: 1 / -1;
178
+ height: 100%;
179
+ }
200
180
 
201
- & + ${StyledNumberInput}, & + ${StyledPreview} {
202
- margin-top: calc(2 * ${spacing});
203
- width: calc(${spacing} * 4);
204
- text-align: center;
181
+ & + ${StyledNumberInput}, & + ${StyledPreview} {
182
+ margin-top: calc(2 * ${spacing});
183
+ width: calc(${spacing} * 4);
184
+ text-align: center;
205
185
 
206
- /* fix NumberInput double padding issue */
207
- &,
208
- & > input {
209
- padding: 0;
186
+ /* fix NumberInput double padding issue */
187
+ &,
188
+ & > input {
189
+ padding: 0;
190
+ }
191
+ }
210
192
  }
211
- }
212
- }
213
- `}
214
-
215
- /* stylelint-enable no-duplicate-selectors */
216
-
193
+ `}
217
194
 
218
195
  &[disabled],
219
196
  &[readonly] {
@@ -230,6 +207,21 @@ export const StyledSlider = styled.div(props => {
230
207
  }
231
208
  }
232
209
  }
210
+
211
+ ${status &&
212
+ css `
213
+ ${StyledBar}::before {
214
+ background-color: ${statusColor};
215
+ }
216
+
217
+ ${StyledThumb} {
218
+ border-color: ${borderColor};
219
+ :hover,
220
+ :active {
221
+ background-color: ${thumbBgColor};
222
+ }
223
+ }
224
+ `}
233
225
  `;
234
226
  });
235
227
  StyledSlider.defaultProps = defaultThemeProp;
@@ -237,60 +229,54 @@ export const StyledTickItem = styled(StyledGrid)(({ lowerBoundaryItem, upperBoun
237
229
  const spacing = theme.base.spacing;
238
230
  const { ltr } = useDirection();
239
231
  return css `
240
- /* disabling 'duplicate selectors' rule to keep the css rules grouped by orientation prop */
232
+ overflow: hidden;
241
233
 
242
- /* stylelint-disable no-duplicate-selectors */
243
- ${orientation === 'horizontal' &&
244
- css `
245
- text-align: center;
246
- text-overflow: ellipsis;
247
- white-space: nowrap;
248
- &::before {
249
- width: 0.0625rem;
250
- height: ${spacing};
251
- transform: translateY(-50%);
252
- margin: 0 auto;
253
- }
234
+ ${orientation === 'horizontal'
235
+ ? css `
236
+ text-align: center;
237
+ text-overflow: ellipsis;
238
+ white-space: nowrap;
239
+ &::before {
240
+ width: 0.0625rem;
241
+ height: ${spacing};
242
+ transform: translateY(-50%);
243
+ margin: 0 auto;
244
+ }
254
245
 
255
- ${lowerBoundaryItem &&
246
+ ${lowerBoundaryItem &&
256
247
  css `
257
- text-align: start;
258
- transform: translate(-0.5ch, 0);
259
- &::before {
260
- margin-inline-start: 0.5ch;
261
- }
262
- `}
248
+ text-align: start;
249
+ transform: translate(-0.5ch, 0);
250
+ &::before {
251
+ margin-inline-start: 0.5ch;
252
+ }
253
+ `}
263
254
 
264
- ${upperBoundaryItem &&
255
+ ${upperBoundaryItem &&
265
256
  css `
266
- text-align: end;
267
- transform: translate(0.5ch, 0);
268
- &::before {
269
- margin-inline-end: 0.5ch;
270
- }
271
- `}
272
- `}
273
-
274
- ${orientation === 'vertical' &&
275
- css `
276
- display: flex;
277
- align-items: center;
257
+ text-align: end;
258
+ transform: translate(0.5ch, 0);
259
+ &::before {
260
+ margin-inline-end: 0.5ch;
261
+ }
262
+ `}
263
+ `
264
+ : css `
265
+ display: flex;
266
+ align-items: center;
278
267
 
279
- &::before {
280
- width: ${spacing};
281
- height: calc(${spacing} / 8);
282
- ${ltr
268
+ &::before {
269
+ width: ${spacing};
270
+ height: calc(${spacing} / 8);
271
+ ${ltr
283
272
  ? css `
284
- transform: translateX(-50%);
285
- `
273
+ transform: translateX(-50%);
274
+ `
286
275
  : css `
287
- transform: translateX(50%);
288
- `}
289
- }
290
- `}
291
-
292
- /* stylelint-enable no-duplicate-selectors */
293
- overflow: hidden;
276
+ transform: translateX(50%);
277
+ `}
278
+ }
279
+ `}
294
280
  `;
295
281
  });
296
282
  StyledTickItem.defaultProps = defaultThemeProp;
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.styles.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { useDirection } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { PropsWithDefaults } from '../../types';\nimport { tryCatch } from '../../utils';\nimport { FormControlProps } from '../FormControl';\nimport { StyledGrid } from '../Grid';\nimport { NumberDisplay } from '../Number';\nimport StyledNumberInput from '../Number/NumberInput.styles';\n\nimport SliderProps from './Slider.types';\n\nexport type SliderPropsWithDefaults = PropsWithDefaults<SliderProps>;\n\nexport const StyledThumb = styled.div(\n ({\n theme: {\n base: {\n palette: { 'primary-background': bgColor, 'border-line': borderColor },\n spacing,\n 'border-radius': borderRadius\n },\n components: {\n progress: { 'progress-color': fgColor },\n button\n }\n }\n }) => {\n const hoverBgColor = tryCatch(() => mix(0.2, fgColor, bgColor));\n\n return css`\n border: ${button['border-width']} solid ${borderColor};\n border-radius: calc(${borderRadius} * 3);\n outline: none;\n background-color: ${bgColor};\n width: calc(${spacing} * 3);\n height: calc(${spacing} * 3);\n cursor: pointer;\n\n &:focus {\n box-shadow: ${button['focus-shadow']};\n }\n\n &:hover,\n &:active {\n background-color: ${hoverBgColor};\n border-color: ${fgColor};\n }\n `;\n }\n);\n\nStyledThumb.defaultProps = defaultThemeProp;\n\nexport const StyledBar = styled.div<{ showProgress?: boolean }>(({ theme, showProgress }) => {\n const {\n base: { spacing, colors, 'border-radius': borderRadius },\n components: {\n progress: { 'progress-color': progressColor }\n }\n } = theme;\n\n const { ltr } = useDirection();\n\n return css`\n border-radius: ${borderRadius};\n height: ${spacing};\n width: 100%;\n overflow: hidden;\n position: relative;\n background-color: ${colors.gray.light};\n\n ${showProgress &&\n css`\n ::before {\n position: absolute;\n left: 0;\n top: 0;\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n background-color: ${progressColor};\n ${ltr\n ? css`\n transform: translateX(calc(-100% + var(--slider-value, 0)));\n `\n : css`\n transform: translateX(calc(100% - var(--slider-value, 0)));\n `}\n }\n `}\n `;\n});\n\nStyledBar.defaultProps = defaultThemeProp;\n\nexport const StyledTrack = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n const { ltr } = useDirection();\n return css`\n height: calc(${spacing} * 4);\n width: 100%;\n cursor: pointer;\n position: relative;\n\n > ${StyledThumb} {\n z-index: 1;\n position: absolute;\n top: calc(${spacing} / 2);\n left: var(--slider-value);\n right: var(--slider-value);\n ${ltr\n ? css`\n transform: translate(-50%, 0);\n `\n : css`\n transform: translate(50%, 0);\n `}\n }\n `;\n }\n);\n\nStyledTrack.defaultProps = defaultThemeProp;\n\nexport const StyledTicksContainer = styled.div`\n width: 100%;\n\n div {\n &::before {\n content: '';\n display: table;\n background: ${p => p.theme.base.palette['foreground-color']};\n }\n }\n`;\n\nStyledTicksContainer.defaultProps = defaultThemeProp;\n\nexport const StyledSliderTrackWrapper = styled.div`\n width: 100%;\n`;\n\nStyledSliderTrackWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledPreview = styled(NumberDisplay)<{ size: number }>`\n width: ${props => props.size}ch;\n flex-shrink: 0;\n`;\n\nStyledPreview.defaultProps = defaultThemeProp;\n\nexport const StyledSlider = styled.div<{\n orientation: 'vertical' | 'horizontal';\n status: FormControlProps['status'];\n}>(props => {\n const {\n theme: {\n base: { spacing, palette },\n components: { 'form-field': formField }\n },\n status,\n orientation\n } = props;\n\n const statusColor =\n status && formField[status] ? formField[status]['status-color'] : 'transparent';\n const thumbBgColor = tryCatch(() => mix(0.2, statusColor, palette['primary-background']));\n\n const borderColor =\n status && formField[status] ? formField[status]['status-color'] : palette['border-line'];\n\n return css`\n > span {\n line-height: calc(${spacing} * 4);\n }\n\n ${status &&\n css`\n ${StyledBar}::before {\n background-color: ${statusColor};\n }\n\n ${StyledThumb} {\n border-color: ${borderColor};\n :hover,\n :active {\n background-color: ${thumbBgColor};\n }\n }\n `}\n\n ${orientation === 'horizontal' &&\n css`\n ${StyledSliderTrackWrapper} {\n margin-inline: calc(1.5 * ${spacing});\n\n ${StyledTrack},\n ${StyledThumb} {\n grid-row: 1;\n }\n\n ${StyledBar} {\n /* extend by thumb width */\n min-width: calc(100% + ${spacing} * 3);\n }\n\n ${StyledTicksContainer} {\n grid-row: 2;\n }\n\n & + ${StyledNumberInput}, & + ${StyledPreview} {\n margin-inline-start: calc(2 * ${spacing});\n }\n }\n `}\n\n /* disabling 'duplicate selectors' rule to keep the css rules grouped by orientation prop */\n\n /* stylelint-disable no-duplicate-selectors */\n ${orientation === 'vertical' &&\n css`\n ${StyledSliderTrackWrapper} {\n grid-template-columns: calc(${spacing} * 4) minmax(0, 1fr);\n grid-template-rows: 0.5em [track-start] minmax(calc(${spacing} * 20), max-content) [track-end] 0.5em;\n margin-top: ${spacing};\n\n ${StyledTrack} {\n grid-row: track-start / track-end;\n height: 100%;\n transform: scale(-1);\n\n ${StyledBar} {\n height: 100%;\n width: ${spacing};\n\n ::before {\n transform: translateY(calc(-100% + var(--slider-value, 0)));\n }\n }\n }\n\n ${StyledThumb} {\n grid-row: track-start / track-end;\n top: auto;\n bottom: calc(100% - var(--slider-value));\n left: calc(${spacing} / 2);\n right: calc(${spacing} / 2);\n transform: translate(0, 50%);\n }\n\n ${StyledTicksContainer} {\n grid-row: 1 / -1;\n height: 100%;\n }\n\n & + ${StyledNumberInput}, & + ${StyledPreview} {\n margin-top: calc(2 * ${spacing});\n width: calc(${spacing} * 4);\n text-align: center;\n\n /* fix NumberInput double padding issue */\n &,\n & > input {\n padding: 0;\n }\n }\n }\n `}\n\n /* stylelint-enable no-duplicate-selectors */\n\n\n &[disabled],\n &[readonly] {\n ${StyledTrack} {\n cursor: default;\n }\n\n ${StyledThumb} {\n cursor: default;\n border-color: ${palette['border-line']};\n :hover,\n :active {\n background-color: ${palette['background-color']};\n }\n }\n }\n `;\n});\n\nStyledSlider.defaultProps = defaultThemeProp;\n\nexport const StyledTickItem = styled(StyledGrid)<{\n lowerBoundaryItem?: boolean;\n upperBoundaryItem?: boolean;\n orientation: 'horizontal' | 'vertical';\n}>(({ lowerBoundaryItem, upperBoundaryItem, orientation, theme }) => {\n const spacing = theme.base.spacing;\n\n const { ltr } = useDirection();\n\n return css`\n /* disabling 'duplicate selectors' rule to keep the css rules grouped by orientation prop */\n\n /* stylelint-disable no-duplicate-selectors */\n ${orientation === 'horizontal' &&\n css`\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n &::before {\n width: 0.0625rem;\n height: ${spacing};\n transform: translateY(-50%);\n margin: 0 auto;\n }\n\n ${lowerBoundaryItem &&\n css`\n text-align: start;\n transform: translate(-0.5ch, 0);\n &::before {\n margin-inline-start: 0.5ch;\n }\n `}\n\n ${upperBoundaryItem &&\n css`\n text-align: end;\n transform: translate(0.5ch, 0);\n &::before {\n margin-inline-end: 0.5ch;\n }\n `}\n `}\n\n ${orientation === 'vertical' &&\n css`\n display: flex;\n align-items: center;\n\n &::before {\n width: ${spacing};\n height: calc(${spacing} / 8);\n ${ltr\n ? css`\n transform: translateX(-50%);\n `\n : css`\n transform: translateX(50%);\n `}\n }\n `}\n\n /* stylelint-enable no-duplicate-selectors */\n overflow: hidden;\n `;\n});\n\nStyledTickItem.defaultProps = defaultThemeProp;\n\nexport const StyledTickButton = styled.span`\n cursor: pointer;\n line-height: 1em;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n outline: 0;\n`;\n\nStyledTickButton.defaultProps = defaultThemeProp;\n"]}
1
+ {"version":3,"file":"Slider.styles.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { useDirection } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { PropsWithDefaults } from '../../types';\nimport { tryCatch } from '../../utils';\nimport { FormControlProps } from '../FormControl';\nimport { StyledGrid } from '../Grid';\nimport { NumberDisplay } from '../Number';\nimport StyledNumberInput from '../Number/NumberInput.styles';\n\nimport SliderProps from './Slider.types';\n\nexport type SliderPropsWithDefaults = PropsWithDefaults<SliderProps>;\n\nexport const StyledThumb = styled.div(\n ({\n theme: {\n base: {\n palette: { 'primary-background': bgColor, 'border-line': borderColor },\n spacing,\n 'border-radius': borderRadius\n },\n components: {\n progress: { 'progress-color': fgColor },\n button\n }\n }\n }) => {\n const hoverBgColor = tryCatch(() => mix(0.2, fgColor, bgColor));\n\n return css`\n border: ${button['border-width']} solid ${borderColor};\n border-radius: calc(${borderRadius} * 3);\n outline: none;\n background-color: ${bgColor};\n width: calc(${spacing} * 3);\n height: calc(${spacing} * 3);\n cursor: pointer;\n\n &:focus {\n box-shadow: ${button['focus-shadow']};\n }\n\n &:hover,\n &:active {\n background-color: ${hoverBgColor};\n border-color: ${fgColor};\n }\n `;\n }\n);\n\nStyledThumb.defaultProps = defaultThemeProp;\n\nexport const StyledBar = styled.div<{ showProgress?: boolean }>(({ theme, showProgress }) => {\n const {\n base: { spacing, colors, 'border-radius': borderRadius },\n components: {\n progress: { 'progress-color': progressColor }\n }\n } = theme;\n\n const { ltr } = useDirection();\n\n return css`\n border-radius: ${borderRadius};\n height: ${spacing};\n width: 100%;\n overflow: hidden;\n position: relative;\n background-color: ${colors.gray.light};\n\n ${showProgress &&\n css`\n ::before {\n position: absolute;\n left: 0;\n top: 0;\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n background-color: ${progressColor};\n ${ltr\n ? css`\n transform: translateX(calc(-100% + var(--slider-value, 0)));\n `\n : css`\n transform: translateX(calc(100% - var(--slider-value, 0)));\n `}\n }\n `}\n `;\n});\n\nStyledBar.defaultProps = defaultThemeProp;\n\nexport const StyledTrack = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n const { ltr } = useDirection();\n return css`\n height: calc(${spacing} * 4);\n width: 100%;\n cursor: pointer;\n position: relative;\n\n > ${StyledThumb} {\n z-index: 1;\n position: absolute;\n top: calc(${spacing} / 2);\n left: var(--slider-value);\n right: var(--slider-value);\n ${ltr\n ? css`\n transform: translate(-50%, 0);\n `\n : css`\n transform: translate(50%, 0);\n `}\n }\n `;\n }\n);\n\nStyledTrack.defaultProps = defaultThemeProp;\n\nexport const StyledTicksContainer = styled.div`\n width: 100%;\n\n div {\n &::before {\n content: '';\n display: table;\n background: ${p => p.theme.base.palette['foreground-color']};\n }\n }\n`;\n\nStyledTicksContainer.defaultProps = defaultThemeProp;\n\nexport const StyledSliderTrackWrapper = styled.div`\n width: 100%;\n`;\n\nStyledSliderTrackWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledPreview = styled(NumberDisplay)<{ size: number }>`\n width: ${props => props.size}ch;\n flex-shrink: 0;\n`;\n\nStyledPreview.defaultProps = defaultThemeProp;\n\nexport const StyledSlider = styled.div<{\n orientation: 'vertical' | 'horizontal';\n status: FormControlProps['status'];\n}>(props => {\n const {\n theme: {\n base: { spacing, palette },\n components: { 'form-field': formField }\n },\n status,\n orientation\n } = props;\n\n const statusColor =\n status && formField[status] ? formField[status]['status-color'] : 'transparent';\n const thumbBgColor = tryCatch(() => mix(0.2, statusColor, palette['primary-background']));\n\n const borderColor =\n status && formField[status] ? formField[status]['status-color'] : palette['border-line'];\n\n return css`\n > span {\n line-height: calc(${spacing} * 4);\n }\n\n ${orientation === 'horizontal'\n ? css`\n ${StyledSliderTrackWrapper} {\n margin-inline: calc(1.5 * ${spacing});\n\n ${StyledTrack},\n ${StyledThumb} {\n grid-row: 1;\n }\n\n ${StyledBar} {\n /* extend by thumb width */\n min-width: calc(100% + ${spacing} * 3);\n }\n\n ${StyledTicksContainer} {\n grid-row: 2;\n }\n\n & + ${StyledNumberInput}, & + ${StyledPreview} {\n margin-inline-start: calc(2 * ${spacing});\n }\n }\n `\n : css`\n ${StyledSliderTrackWrapper} {\n grid-template-columns: calc(${spacing} * 4) minmax(0, 1fr);\n grid-template-rows: 0.5em [track-start] minmax(calc(${spacing} * 20), max-content) [track-end] 0.5em;\n margin-top: ${spacing};\n\n ${StyledTrack} {\n grid-row: track-start / track-end;\n height: 100%;\n transform: scale(-1);\n\n ${StyledBar} {\n height: 100%;\n width: ${spacing};\n\n ::before {\n transform: translateY(calc(-100% + var(--slider-value, 0)));\n }\n }\n }\n\n ${StyledThumb} {\n grid-row: track-start / track-end;\n top: auto;\n bottom: calc(100% - var(--slider-value));\n left: calc(${spacing} / 2);\n right: calc(${spacing} / 2);\n transform: translate(0, 50%);\n }\n\n ${StyledTicksContainer} {\n grid-row: 1 / -1;\n height: 100%;\n }\n\n & + ${StyledNumberInput}, & + ${StyledPreview} {\n margin-top: calc(2 * ${spacing});\n width: calc(${spacing} * 4);\n text-align: center;\n\n /* fix NumberInput double padding issue */\n &,\n & > input {\n padding: 0;\n }\n }\n }\n `}\n\n &[disabled],\n &[readonly] {\n ${StyledTrack} {\n cursor: default;\n }\n\n ${StyledThumb} {\n cursor: default;\n border-color: ${palette['border-line']};\n :hover,\n :active {\n background-color: ${palette['background-color']};\n }\n }\n }\n\n ${status &&\n css`\n ${StyledBar}::before {\n background-color: ${statusColor};\n }\n\n ${StyledThumb} {\n border-color: ${borderColor};\n :hover,\n :active {\n background-color: ${thumbBgColor};\n }\n }\n `}\n `;\n});\n\nStyledSlider.defaultProps = defaultThemeProp;\n\nexport const StyledTickItem = styled(StyledGrid)<{\n lowerBoundaryItem?: boolean;\n upperBoundaryItem?: boolean;\n orientation: 'horizontal' | 'vertical';\n}>(({ lowerBoundaryItem, upperBoundaryItem, orientation, theme }) => {\n const spacing = theme.base.spacing;\n\n const { ltr } = useDirection();\n\n return css`\n overflow: hidden;\n\n ${orientation === 'horizontal'\n ? css`\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n &::before {\n width: 0.0625rem;\n height: ${spacing};\n transform: translateY(-50%);\n margin: 0 auto;\n }\n\n ${lowerBoundaryItem &&\n css`\n text-align: start;\n transform: translate(-0.5ch, 0);\n &::before {\n margin-inline-start: 0.5ch;\n }\n `}\n\n ${upperBoundaryItem &&\n css`\n text-align: end;\n transform: translate(0.5ch, 0);\n &::before {\n margin-inline-end: 0.5ch;\n }\n `}\n `\n : css`\n display: flex;\n align-items: center;\n\n &::before {\n width: ${spacing};\n height: calc(${spacing} / 8);\n ${ltr\n ? css`\n transform: translateX(-50%);\n `\n : css`\n transform: translateX(50%);\n `}\n }\n `}\n `;\n});\n\nStyledTickItem.defaultProps = defaultThemeProp;\n\nexport const StyledTickButton = styled.span`\n cursor: pointer;\n line-height: 1em;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n outline: 0;\n`;\n\nStyledTickButton.defaultProps = defaultThemeProp;\n"]}
@@ -1,2 +1,2 @@
1
- export declare const getSliderTestIds: (testIdProp?: string | undefined) => import("../../utils").TestIdsRecord<readonly ["control"]>;
1
+ export declare const getSliderTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
2
2
  //# sourceMappingURL=Slider.test-ids.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,gGAAgD,CAAC"}
1
+ {"version":3,"file":"Slider.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,wKAA6D,CAAC"}
@@ -1,3 +1,4 @@
1
1
  import { createTestIds } from '../../utils';
2
- export const getSliderTestIds = createTestIds('slider', ['control']);
2
+ import { elements } from '../FormField/FormField.test-ids';
3
+ export const getSliderTestIds = createTestIds('slider', ['control', ...elements]);
3
4
  //# sourceMappingURL=Slider.test-ids.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.test-ids.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getSliderTestIds = createTestIds('slider', ['control'] as const);\n"]}
1
+ {"version":3,"file":"Slider.test-ids.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,GAAG,QAAQ,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\nimport { elements } from '../FormField/FormField.test-ids';\n\nexport const getSliderTestIds = createTestIds('slider', ['control', ...elements] as const);\n"]}
@@ -64,9 +64,7 @@ export default interface SliderProps extends BaseProps, NoChildrenProp, TestIdPr
64
64
  * @default true
65
65
  */
66
66
  showInput?: boolean;
67
- /**
68
- * Display defined ticks.
69
- */
67
+ /** Display defined ticks. */
70
68
  ticks?: {
71
69
  [key: number]: string;
72
70
  };
@@ -75,13 +73,9 @@ export default interface SliderProps extends BaseProps, NoChildrenProp, TestIdPr
75
73
  * @param value new input value
76
74
  */
77
75
  onChange: (value: number) => void;
78
- /**
79
- * Called when the user starts dragging the slider thumb.
80
- */
76
+ /** Called when the user starts dragging the slider thumb. */
81
77
  onDragStart?: () => void;
82
- /**
83
- * Called when the user stops dragging the slider thumb.
84
- */
78
+ /** Called when the user stops dragging the slider thumb. */
85
79
  onDragEnd?: () => void;
86
80
  }
87
81
  export interface TickDefinition {
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.types.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,CAAC,OAAO,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAChF;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAClC;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf"}
1
+ {"version":3,"file":"Slider.types.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,CAAC,OAAO,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAChF;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAClC;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf"}
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.types.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"","sourcesContent":["import { BaseProps, NoChildrenProp, TestIdProp } from '../../types';\nimport { FormControlProps } from '../FormControl';\n\nexport default interface SliderProps extends BaseProps, NoChildrenProp, TestIdProp {\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /**\n * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n * value + onChange is the recommended method per React team.\n */\n value: number;\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: FormControlProps['readOnly'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Will automatically focus the thumb on render if true */\n autoFocus?: boolean;\n /**\n * Minimum value.\n * @default 0\n */\n min?: number;\n /**\n * Maximum value.\n * @default 100\n */\n max?: number;\n /**\n * Step value.\n * @default 1\n */\n step?: number;\n /**\n * Slider orientation.\n * @default 'horizontal'\n */\n orientation?: 'vertical' | 'horizontal';\n /**\n * Show slider color progress bar.\n * @default false\n */\n showProgress?: boolean;\n /**\n * Show current value.\n * @default false\n */\n preview?: boolean;\n /**\n * Display input to provide value.\n * @default true\n */\n showInput?: boolean;\n /**\n * Display defined ticks.\n */\n ticks?: { [key: number]: string };\n /**\n * On change callback.\n * @param value new input value\n */\n onChange: (value: number) => void;\n /**\n * Called when the user starts dragging the slider thumb.\n */\n onDragStart?: () => void;\n /**\n * Called when the user stops dragging the slider thumb.\n */\n onDragEnd?: () => void;\n}\n\nexport interface TickDefinition {\n start: number;\n end: number;\n value: number;\n label: string;\n}\n"]}
1
+ {"version":3,"file":"Slider.types.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"","sourcesContent":["import { BaseProps, NoChildrenProp, TestIdProp } from '../../types';\nimport { FormControlProps } from '../FormControl';\n\nexport default interface SliderProps extends BaseProps, NoChildrenProp, TestIdProp {\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /**\n * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n * value + onChange is the recommended method per React team.\n */\n value: number;\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: FormControlProps['readOnly'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Will automatically focus the thumb on render if true */\n autoFocus?: boolean;\n /**\n * Minimum value.\n * @default 0\n */\n min?: number;\n /**\n * Maximum value.\n * @default 100\n */\n max?: number;\n /**\n * Step value.\n * @default 1\n */\n step?: number;\n /**\n * Slider orientation.\n * @default 'horizontal'\n */\n orientation?: 'vertical' | 'horizontal';\n /**\n * Show slider color progress bar.\n * @default false\n */\n showProgress?: boolean;\n /**\n * Show current value.\n * @default false\n */\n preview?: boolean;\n /**\n * Display input to provide value.\n * @default true\n */\n showInput?: boolean;\n /** Display defined ticks. */\n ticks?: { [key: number]: string };\n /**\n * On change callback.\n * @param value new input value\n */\n onChange: (value: number) => void;\n /** Called when the user starts dragging the slider thumb. */\n onDragStart?: () => void;\n /** Called when the user stops dragging the slider thumb. */\n onDragEnd?: () => void;\n}\n\nexport interface TickDefinition {\n start: number;\n end: number;\n value: number;\n label: string;\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/utils.ts"],"names":[],"mappings":"AAEA,OAAO,WAAW,EAAE,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAE7D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,qBAAqB,aACtB,YAAY,WAAW,CAAC,OAAO,CAAC,CAAC,OACtC,MAAM,OACN,MAAM,QACL,MAAM,WACH,OAAO,KACf,cAAc,EAkDhB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,UAAW,MAAM,OAAO,MAAM,OAAO,MAAM,QAAQ,MAAM,KAAG,MAKvF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,QAAS,MAAM,OAAO,MAAM,QAAQ,MAAM,KAAG,MAW7E,CAAC"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/utils.ts"],"names":[],"mappings":"AAEA,OAAO,WAAW,EAAE,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAE7D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,qBAAqB,aACtB,YAAY,WAAW,CAAC,OAAO,CAAC,CAAC,OACtC,MAAM,OACN,MAAM,QACL,MAAM,WACH,OAAO,KACf,cAAc,EAiDhB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,UAAW,MAAM,OAAO,MAAM,OAAO,MAAM,QAAQ,MAAM,KAAG,MAKvF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,QAAS,MAAM,OAAO,MAAM,QAAQ,MAAM,KAAG,MAW7E,CAAC"}
@@ -37,7 +37,6 @@ export const calculateTicksRegions = (ticksMap, min, max, step, stretch) => {
37
37
  const maxCell = (max - min) / step + 2;
38
38
  const result = [];
39
39
  // extend the tick segments one by one
40
- // eslint-disable-next-line no-restricted-syntax
41
40
  for (const { prev, current, next } of triple(defs)) {
42
41
  let start = current.start;
43
42
  let end = current.end;
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Slider/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACnC,QAA2C,EAC3C,GAAW,EACX,GAAW,EACX,IAAY,EACZ,OAAgB,EACE,EAAE;IACpB,iFAAiF;IACjF,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC;SAClC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,MAAM,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC;SAC7E,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;SAC7E,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,EAAE;QAC9B,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,+EAA+E;QAClI,MAAM,SAAS,GAAG,IAAI,CAAC;QACvB,MAAM,OAAO,GAAG,SAAS,GAAG,CAAC,CAAC;QAC9B,OAAO;YACL,KAAK,EAAE,SAAS;YAChB,GAAG,EAAE,OAAO;YACZ,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC;YACxB,KAAK,EAAE,SAAS;SACjB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEL,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,OAAO,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC;IAEvC,MAAM,MAAM,GAAG,EAAE,CAAC;IAClB,sCAAsC;IACtC,gDAAgD;IAChD,KAAK,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE;QAClD,IAAI,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;QAC1B,IAAI,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC;QACtB,IAAI,KAAK,KAAK,CAAC,EAAE;YACf,6DAA6D;YAC7D,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;SACjE;aAAM,IAAI,GAAG,KAAK,OAAO,EAAE;YAC1B,0DAA0D;YAC1D,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;SAClE;aAAM;YACL,qFAAqF;YACrF,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,IAAI,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC;YAClF,iCAAiC;YACjC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAChC,sBAAsB;YACtB,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;SAC/B;QACD,MAAM,CAAC,IAAI,CAAC;YACV,KAAK;YACL,GAAG;YACH,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,KAAK,EAAE,OAAO,CAAC,KAAK;SACrB,CAAC,CAAC;KACJ;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,EAAE,IAAY,EAAU,EAAE;IAC/F,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAE/C,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC;IACvD,OAAO,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,CAAC;AAC/C,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,GAAW,EAAE,GAAW,EAAE,IAAY,EAAU,EAAE;IACrF,MAAM,CAAC,cAAc,EAAE,cAAc,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACxE,MAAM,CAAC,cAAc,EAAE,cAAc,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACxE,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC5D,OAAO,CACL,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC;QACtD,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,EAAE,eAAe,CAAC,MAAM,CAAC;QAC9E,CAAC,cAAc,IAAI,cAAc,IAAI,eAAe;YAClD,CAAC,CAAC,CAAC,CAAC,6DAA6D;YACjE,CAAC,CAAC,CAAC,CAAC,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { triple } from '../../utils';\n\nimport SliderProps, { TickDefinition } from './Slider.types';\n\n/**\n * The function accepts ticks map and produces an array of tick definitions. The definition\n * consist of tick value, its label and starting and ending index.\n * Function can stretch the ticks regions to allow more text to fit in the cell.\n * To calculate the stretched regions: {min} and {max} values produce the line which is then\n * divided to equal segments. These segments have indices that correspond to CSS grid cells.\n * Then the indices are optimized in the way that every segment is stretched by the half of length\n * between current tick's index and previous tick's index or next tick's index whichever is smaller.\n * |______________|__________|________________________|\n * 1------^ ^----2----^^----3----^ ^------------4\n * @param ticksMap ticks configuration to calculate ticks definition from\n * @param min minimum allowed value in the range\n * @param max maximum allowed value in the range\n * @param step step in the range\n * @param stretch flag indicating the regions should be stretched\n * @returns ticks definitions array\n */\nexport const calculateTicksRegions = (\n ticksMap: NonNullable<SliderProps['ticks']>,\n min: number,\n max: number,\n step: number,\n stretch: boolean\n): TickDefinition[] => {\n // calculate initial positions for every tick, the tick segment has the width = 1\n const defs = Object.entries(ticksMap)\n .filter(([tickValue]) => Number(tickValue) >= min && Number(tickValue) <= max)\n .sort(([tickValue1], [tickValue2]) => Number(tickValue1) - Number(tickValue2))\n .map(([tickValue, tickLabel]) => {\n const cell = (Number(tickValue) - min) / step + 1; // shift by 'min' value, divide by a step and increment, as index starts from 1\n const cellStart = cell;\n const cellEnd = cellStart + 1;\n return {\n start: cellStart,\n end: cellEnd,\n value: Number(tickValue),\n label: tickLabel\n };\n });\n\n if (!stretch) return defs;\n\n const maxCell = (max - min) / step + 2;\n\n const result = [];\n // extend the tick segments one by one\n // eslint-disable-next-line no-restricted-syntax\n for (const { prev, current, next } of triple(defs)) {\n let start = current.start;\n let end = current.end;\n if (start === 1) {\n // if the tick is marginal (starting) - expand to the 'right'\n end = next ? Math.floor((next.start - end) / 2) + end : maxCell;\n } else if (end === maxCell) {\n // if the tick is marginal (ending) - expand to the 'left'\n start = prev ? Math.floor((start - prev.end) / 2) + prev.end : 1;\n } else {\n // calculate length between current and prev / next tick and choose the smaller value\n const length = Math.min(start - (prev?.end ?? 1), (next?.start ?? maxCell) - end);\n // expand the segment to the left\n start -= Math.floor(length / 2);\n // expand to the right\n end += Math.floor(length / 2);\n }\n result.push({\n start,\n end,\n value: current.value,\n label: current.label\n });\n }\n\n return result;\n};\n\n/**\n * Function for given input returns nearest discrete value from a series {min, max}\n * @param input the value to look for nearest value\n * @param step step value determining discrete series\n * @param min minimal value in the series\n * @param max maximum value in the series\n * @returns nearest value as a number\n */\nexport const getNearestValue = (input: number, min: number, max: number, step: number): number => {\n const output = Math.round(input / step) * step;\n\n const decimals = step.toString().split('.')[1]?.length;\n return Number(output.toFixed(decimals || 0));\n};\n\n/**\n * Function calculates minimum length of the field where any value from the set of possible values will fit in.\n * @param min minimum value\n * @param max maximum value\n * @param step step in range\n * @returns minimum number of characters the field needs\n */\nexport const calculateValueLength = (min: number, max: number, step: number): number => {\n const [minIntegerPart, minDecimalPart = ''] = min.toString().split('.');\n const [maxIntegerPart, maxDecimalPart = ''] = max.toString().split('.');\n const stepDecimalPart = step.toString().split('.')[1] ?? '';\n return (\n Math.max(minIntegerPart.length, maxIntegerPart.length) +\n Math.max(maxDecimalPart.length, minDecimalPart.length, stepDecimalPart.length) +\n (maxDecimalPart || minDecimalPart || stepDecimalPart\n ? 1 // if there's decimal part, reserve a space for the separator\n : 0)\n );\n};\n"]}
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Slider/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { triple } from '../../utils';\n\nimport SliderProps, { TickDefinition } from './Slider.types';\n\n/**\n * The function accepts ticks map and produces an array of tick definitions. The definition\n * consist of tick value, its label and starting and ending index.\n * Function can stretch the ticks regions to allow more text to fit in the cell.\n * To calculate the stretched regions: {min} and {max} values produce the line which is then\n * divided to equal segments. These segments have indices that correspond to CSS grid cells.\n * Then the indices are optimized in the way that every segment is stretched by the half of length\n * between current tick's index and previous tick's index or next tick's index whichever is smaller.\n * |______________|__________|________________________|\n * 1------^ ^----2----^^----3----^ ^------------4\n * @param ticksMap ticks configuration to calculate ticks definition from\n * @param min minimum allowed value in the range\n * @param max maximum allowed value in the range\n * @param step step in the range\n * @param stretch flag indicating the regions should be stretched\n * @returns ticks definitions array\n */\nexport const calculateTicksRegions = (\n ticksMap: NonNullable<SliderProps['ticks']>,\n min: number,\n max: number,\n step: number,\n stretch: boolean\n): TickDefinition[] => {\n // calculate initial positions for every tick, the tick segment has the width = 1\n const defs = Object.entries(ticksMap)\n .filter(([tickValue]) => Number(tickValue) >= min && Number(tickValue) <= max)\n .sort(([tickValue1], [tickValue2]) => Number(tickValue1) - Number(tickValue2))\n .map(([tickValue, tickLabel]) => {\n const cell = (Number(tickValue) - min) / step + 1; // shift by 'min' value, divide by a step and increment, as index starts from 1\n const cellStart = cell;\n const cellEnd = cellStart + 1;\n return {\n start: cellStart,\n end: cellEnd,\n value: Number(tickValue),\n label: tickLabel\n };\n });\n\n if (!stretch) return defs;\n\n const maxCell = (max - min) / step + 2;\n\n const result = [];\n // extend the tick segments one by one\n for (const { prev, current, next } of triple(defs)) {\n let start = current.start;\n let end = current.end;\n if (start === 1) {\n // if the tick is marginal (starting) - expand to the 'right'\n end = next ? Math.floor((next.start - end) / 2) + end : maxCell;\n } else if (end === maxCell) {\n // if the tick is marginal (ending) - expand to the 'left'\n start = prev ? Math.floor((start - prev.end) / 2) + prev.end : 1;\n } else {\n // calculate length between current and prev / next tick and choose the smaller value\n const length = Math.min(start - (prev?.end ?? 1), (next?.start ?? maxCell) - end);\n // expand the segment to the left\n start -= Math.floor(length / 2);\n // expand to the right\n end += Math.floor(length / 2);\n }\n result.push({\n start,\n end,\n value: current.value,\n label: current.label\n });\n }\n\n return result;\n};\n\n/**\n * Function for given input returns nearest discrete value from a series {min, max}\n * @param input the value to look for nearest value\n * @param step step value determining discrete series\n * @param min minimal value in the series\n * @param max maximum value in the series\n * @returns nearest value as a number\n */\nexport const getNearestValue = (input: number, min: number, max: number, step: number): number => {\n const output = Math.round(input / step) * step;\n\n const decimals = step.toString().split('.')[1]?.length;\n return Number(output.toFixed(decimals || 0));\n};\n\n/**\n * Function calculates minimum length of the field where any value from the set of possible values will fit in.\n * @param min minimum value\n * @param max maximum value\n * @param step step in range\n * @returns minimum number of characters the field needs\n */\nexport const calculateValueLength = (min: number, max: number, step: number): number => {\n const [minIntegerPart, minDecimalPart = ''] = min.toString().split('.');\n const [maxIntegerPart, maxDecimalPart = ''] = max.toString().split('.');\n const stepDecimalPart = step.toString().split('.')[1] ?? '';\n return (\n Math.max(minIntegerPart.length, maxIntegerPart.length) +\n Math.max(maxDecimalPart.length, minDecimalPart.length, stepDecimalPart.length) +\n (maxDecimalPart || minDecimalPart || stepDecimalPart\n ? 1 // if there's decimal part, reserve a space for the separator\n : 0)\n );\n};\n"]}
@@ -10,10 +10,11 @@ export interface SummaryItemProps extends NoChildrenProp, TestIdProp {
10
10
  visual?: ReactNode;
11
11
  /** Region for adding Actions, Buttons, or Links. */
12
12
  actions?: ReactNode;
13
+ /** Override the default Grid container props on SummaryItem. */
13
14
  container?: GridContainerProps;
14
15
  /**
15
16
  * Determines how the text within primary and secondary fields should handle overflow.
16
- * @default "wrap"
17
+ * @default 'wrap'
17
18
  */
18
19
  overflowStrategy?: 'wrap' | 'ellipsis';
19
20
  /** HTML tag to render the SummaryItem's element with. */
@@ -1 +1 @@
1
- {"version":3,"file":"SummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAA+B,WAAW,EAAE,MAAM,OAAO,CAAC;AAGpG,OAAa,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAMvE,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,UAAU;IAClE,0CAA0C;IAC1C,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,iDAAiD;IACjD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACvC,yDAAyD;IACzD,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,yGAOxB,CAAC;AAIF,eAAO,MAAM,aAAa;;uBAEL,gBAAgB,CAAC,kBAAkB,CAAC;SAkBvD,CAAC;AAIH,eAAO,MAAM,eAAe;uBACP,gBAAgB,CAAC,kBAAkB,CAAC;SAYvD,CAAC;AAEH,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAgB9C,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAqEnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"SummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAA+B,WAAW,EAAE,MAAM,OAAO,CAAC;AAGpG,OAAa,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAMvE,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,UAAU;IAClE,0CAA0C;IAC1C,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,iDAAiD;IACjD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACvC,yDAAyD;IACzD,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,yGAOxB,CAAC;AAIF,eAAO,MAAM,aAAa;;uBAEL,gBAAgB,CAAC,kBAAkB,CAAC;SAkBvD,CAAC;AAIH,eAAO,MAAM,eAAe;uBACP,gBAAgB,CAAC,kBAAkB,CAAC;SAYvD,CAAC;AAEH,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAgB9C,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAqEnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"SummaryItem.js","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqC,UAAU,EAAgC,MAAM,OAAO,CAAC;AACpG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAA4B,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAwB/D,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;MAChC,kBAAkB;;;;;;CAMvB,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAGtC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC3C,OAAO,GAAG,CAAA;MACN,gBAAgB,KAAK,UAAU;QAC/B,CAAC,CAAC,GAAG,CAAA;;;;SAIF;QACH,CAAC,CAAC,GAAG,CAAA;;SAEF;;MAEH,QAAQ;QACV,GAAG,CAAA;qBACc,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;KACtD;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAExC,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC1B,OAAO,GAAG,CAAA;MACN,gBAAgB,KAAK,UAAU;QAC/B,CAAC,CAAC,GAAG,CAAA;;;SAGF;QACH,CAAC,CAAC,GAAG,CAAA;;SAEF;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEjD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAgD,EAAE,EAAE;IACvF,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,iBAAiB,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AAC3E,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,SAAS,EACT,MAAM,EACN,OAAO,EACoD,EAAE,EAAE;IAC/D,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IACnE,SAAS,CAAC,CAAC,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,YAAY,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EACtF,EAAE,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,WAAW,GAAuD,UAAU,CAChF,CACE,EACE,MAAM,EACN,MAAM,EACN,OAAO,EACP,SAAS,EACT,OAAO,EACP,SAAS,EACT,gBAAgB,GAAG,MAAM,EACzB,EAAE,EACF,GAAG,SAAS,EACsB,EACpC,GAA4B,EAC5B,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAE1D,OAAO,CACL,MAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,IAAI,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;YACrC,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,QAAQ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;YAC/C,GAAG,SAAS;SACb,EACD,EAAE,EAAE,iBAAiB,EACrB,WAAW,EAAE,EAAE,aAEd,MAAM,IAAI,CACT,KAAC,IAAI,mBACU,OAAO,CAAC,MAAM,EAC3B,EAAE,EAAE,YAAY,EAChB,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,YAE5C,MAAM,GACF,CACR,EACD,KAAC,aAAa,mBACC,OAAO,CAAC,OAAO,EAC5B,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,EAClE,QAAQ,EAAE,OAAO,OAAO,KAAK,QAAQ,EACrC,gBAAgB,EAAE,gBAAgB,YAEjC,OAAO,GACM,EACf,SAAS,IAAI,CACZ,KAAC,eAAe,mBACD,OAAO,CAAC,SAAS,EAC9B,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,EAC/C,gBAAgB,EAAE,gBAAgB,YAEjC,SAAS,GACM,CACnB,EACA,OAAO,IAAI,CACV,KAAC,IAAI,mBACU,OAAO,CAAC,OAAO,EAC5B,EAAE,EAAE,wBAAwB,EAC5B,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAE7C,OAAO,GACH,CACR,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, Ref, forwardRef, PropsWithoutRef, ElementType } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Grid, { GridContainerProps } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport { StyledProgressRing } from '../Progress';\nimport { useTestIds } from '../../hooks';\n\nimport { getSummaryItemTestIds } from './SummaryItem.test-ids';\n\nexport interface SummaryItemProps extends NoChildrenProp, TestIdProp {\n /** Region for the primary information. */\n primary: NonNullable<ReactNode>;\n /** Region for displaying supporting metadata. */\n secondary?: ReactNode;\n /** Region for an Avatar, Icon, or other supporting visual. */\n visual?: ReactNode;\n /** Region for adding Actions, Buttons, or Links. */\n actions?: ReactNode;\n /* Override the default Grid container props on SummaryItem. */\n container?: GridContainerProps;\n /**\n * Determines how the text within primary and secondary fields should handle overflow.\n * @default \"wrap\"\n */\n overflowStrategy?: 'wrap' | 'ellipsis';\n /** HTML tag to render the SummaryItem's element with. */\n as?: ElementType;\n /** Ref for the SummaryItem. */\n ref?: Ref<HTMLElement>;\n}\n\nexport const StyledVisual = styled.div`\n > ${StyledProgressRing}, img {\n display: block;\n object-fit: cover;\n width: 2rem;\n height: 2rem;\n }\n`;\n\nStyledVisual.defaultProps = defaultThemeProp;\n\nexport const StyledPrimary = styled(Grid)<{\n isString?: boolean;\n overflowStrategy?: SummaryItemProps['overflowStrategy'];\n}>(({ theme, isString, overflowStrategy }) => {\n return css`\n ${overflowStrategy === 'ellipsis'\n ? css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `\n : css`\n word-break: break-word;\n `}\n\n ${isString &&\n css`\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `}\n `;\n});\n\nStyledPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledSecondary = styled(Grid)<{\n overflowStrategy?: SummaryItemProps['overflowStrategy'];\n}>(({ overflowStrategy }) => {\n return css`\n ${overflowStrategy === 'ellipsis'\n ? css`\n overflow: hidden;\n text-overflow: ellipsis;\n `\n : css`\n word-break: break-word;\n `}\n `;\n});\n\nexport const StyledSummaryItemActions = styled.div`\n white-space: nowrap;\n`;\n\nexport const StyledSummaryItem = styled.div``;\n\nconst getColumns = ({ visual, actions }: Pick<SummaryItemProps, 'visual' | 'actions'>) => {\n return `${visual ? 'auto ' : ''}minmax(0, 1fr)${actions ? ' auto' : ''}`;\n};\n\nconst getAreas = ({\n secondary,\n visual,\n actions\n}: Pick<SummaryItemProps, 'secondary' | 'visual' | 'actions'>) => {\n return `\"${visual ? 'visual ' : ''}primary${actions ? ' actions' : ''}\"${\n secondary ? `\\n\"${visual ? 'visual ' : ''}secondary${actions ? ' actions' : ''}\"` : ''\n }`;\n};\n\nconst SummaryItem: FunctionComponent<SummaryItemProps & ForwardProps> = forwardRef(\n (\n {\n testId,\n visual,\n primary,\n secondary,\n actions,\n container,\n overflowStrategy = 'wrap',\n as,\n ...restProps\n }: PropsWithoutRef<SummaryItemProps>,\n ref: SummaryItemProps['ref']\n ) => {\n const testIds = useTestIds(testId, getSummaryItemTestIds);\n\n return (\n <Grid\n data-testid={testIds.root}\n {...restProps}\n ref={ref}\n container={{\n cols: getColumns({ visual, actions }),\n colGap: 2,\n areas: getAreas({ secondary, visual, actions }),\n ...container\n }}\n as={StyledSummaryItem}\n forwardedAs={as}\n >\n {visual && (\n <Grid\n data-testid={testIds.visual}\n as={StyledVisual}\n item={{ area: 'visual', alignSelf: 'center' }}\n >\n {visual}\n </Grid>\n )}\n <StyledPrimary\n data-testid={testIds.primary}\n item={{ area: 'primary', alignSelf: secondary ? 'end' : 'center' }}\n isString={typeof primary === 'string'}\n overflowStrategy={overflowStrategy}\n >\n {primary}\n </StyledPrimary>\n {secondary && (\n <StyledSecondary\n data-testid={testIds.secondary}\n item={{ area: 'secondary', alignSelf: 'start' }}\n overflowStrategy={overflowStrategy}\n >\n {secondary}\n </StyledSecondary>\n )}\n {actions && (\n <Grid\n data-testid={testIds.actions}\n as={StyledSummaryItemActions}\n item={{ area: 'actions', alignSelf: 'center' }}\n >\n {actions}\n </Grid>\n )}\n </Grid>\n );\n }\n);\n\nexport default SummaryItem;\n"]}
1
+ {"version":3,"file":"SummaryItem.js","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqC,UAAU,EAAgC,MAAM,OAAO,CAAC;AACpG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAA4B,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAwB/D,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;MAChC,kBAAkB;;;;;;CAMvB,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAGtC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC3C,OAAO,GAAG,CAAA;MACN,gBAAgB,KAAK,UAAU;QAC/B,CAAC,CAAC,GAAG,CAAA;;;;SAIF;QACH,CAAC,CAAC,GAAG,CAAA;;SAEF;;MAEH,QAAQ;QACV,GAAG,CAAA;qBACc,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;KACtD;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAExC,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC1B,OAAO,GAAG,CAAA;MACN,gBAAgB,KAAK,UAAU;QAC/B,CAAC,CAAC,GAAG,CAAA;;;SAGF;QACH,CAAC,CAAC,GAAG,CAAA;;SAEF;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEjD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAgD,EAAE,EAAE;IACvF,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,iBAAiB,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AAC3E,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,SAAS,EACT,MAAM,EACN,OAAO,EACoD,EAAE,EAAE;IAC/D,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IACnE,SAAS,CAAC,CAAC,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,YAAY,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EACtF,EAAE,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,WAAW,GAAuD,UAAU,CAChF,CACE,EACE,MAAM,EACN,MAAM,EACN,OAAO,EACP,SAAS,EACT,OAAO,EACP,SAAS,EACT,gBAAgB,GAAG,MAAM,EACzB,EAAE,EACF,GAAG,SAAS,EACsB,EACpC,GAA4B,EAC5B,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAE1D,OAAO,CACL,MAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,IAAI,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;YACrC,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,QAAQ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;YAC/C,GAAG,SAAS;SACb,EACD,EAAE,EAAE,iBAAiB,EACrB,WAAW,EAAE,EAAE,aAEd,MAAM,IAAI,CACT,KAAC,IAAI,mBACU,OAAO,CAAC,MAAM,EAC3B,EAAE,EAAE,YAAY,EAChB,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,YAE5C,MAAM,GACF,CACR,EACD,KAAC,aAAa,mBACC,OAAO,CAAC,OAAO,EAC5B,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,EAClE,QAAQ,EAAE,OAAO,OAAO,KAAK,QAAQ,EACrC,gBAAgB,EAAE,gBAAgB,YAEjC,OAAO,GACM,EACf,SAAS,IAAI,CACZ,KAAC,eAAe,mBACD,OAAO,CAAC,SAAS,EAC9B,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,EAC/C,gBAAgB,EAAE,gBAAgB,YAEjC,SAAS,GACM,CACnB,EACA,OAAO,IAAI,CACV,KAAC,IAAI,mBACU,OAAO,CAAC,OAAO,EAC5B,EAAE,EAAE,wBAAwB,EAC5B,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAE7C,OAAO,GACH,CACR,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, Ref, forwardRef, PropsWithoutRef, ElementType } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Grid, { GridContainerProps } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport { StyledProgressRing } from '../Progress';\nimport { useTestIds } from '../../hooks';\n\nimport { getSummaryItemTestIds } from './SummaryItem.test-ids';\n\nexport interface SummaryItemProps extends NoChildrenProp, TestIdProp {\n /** Region for the primary information. */\n primary: NonNullable<ReactNode>;\n /** Region for displaying supporting metadata. */\n secondary?: ReactNode;\n /** Region for an Avatar, Icon, or other supporting visual. */\n visual?: ReactNode;\n /** Region for adding Actions, Buttons, or Links. */\n actions?: ReactNode;\n /** Override the default Grid container props on SummaryItem. */\n container?: GridContainerProps;\n /**\n * Determines how the text within primary and secondary fields should handle overflow.\n * @default 'wrap'\n */\n overflowStrategy?: 'wrap' | 'ellipsis';\n /** HTML tag to render the SummaryItem's element with. */\n as?: ElementType;\n /** Ref for the SummaryItem. */\n ref?: Ref<HTMLElement>;\n}\n\nexport const StyledVisual = styled.div`\n > ${StyledProgressRing}, img {\n display: block;\n object-fit: cover;\n width: 2rem;\n height: 2rem;\n }\n`;\n\nStyledVisual.defaultProps = defaultThemeProp;\n\nexport const StyledPrimary = styled(Grid)<{\n isString?: boolean;\n overflowStrategy?: SummaryItemProps['overflowStrategy'];\n}>(({ theme, isString, overflowStrategy }) => {\n return css`\n ${overflowStrategy === 'ellipsis'\n ? css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `\n : css`\n word-break: break-word;\n `}\n\n ${isString &&\n css`\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `}\n `;\n});\n\nStyledPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledSecondary = styled(Grid)<{\n overflowStrategy?: SummaryItemProps['overflowStrategy'];\n}>(({ overflowStrategy }) => {\n return css`\n ${overflowStrategy === 'ellipsis'\n ? css`\n overflow: hidden;\n text-overflow: ellipsis;\n `\n : css`\n word-break: break-word;\n `}\n `;\n});\n\nexport const StyledSummaryItemActions = styled.div`\n white-space: nowrap;\n`;\n\nexport const StyledSummaryItem = styled.div``;\n\nconst getColumns = ({ visual, actions }: Pick<SummaryItemProps, 'visual' | 'actions'>) => {\n return `${visual ? 'auto ' : ''}minmax(0, 1fr)${actions ? ' auto' : ''}`;\n};\n\nconst getAreas = ({\n secondary,\n visual,\n actions\n}: Pick<SummaryItemProps, 'secondary' | 'visual' | 'actions'>) => {\n return `\"${visual ? 'visual ' : ''}primary${actions ? ' actions' : ''}\"${\n secondary ? `\\n\"${visual ? 'visual ' : ''}secondary${actions ? ' actions' : ''}\"` : ''\n }`;\n};\n\nconst SummaryItem: FunctionComponent<SummaryItemProps & ForwardProps> = forwardRef(\n (\n {\n testId,\n visual,\n primary,\n secondary,\n actions,\n container,\n overflowStrategy = 'wrap',\n as,\n ...restProps\n }: PropsWithoutRef<SummaryItemProps>,\n ref: SummaryItemProps['ref']\n ) => {\n const testIds = useTestIds(testId, getSummaryItemTestIds);\n\n return (\n <Grid\n data-testid={testIds.root}\n {...restProps}\n ref={ref}\n container={{\n cols: getColumns({ visual, actions }),\n colGap: 2,\n areas: getAreas({ secondary, visual, actions }),\n ...container\n }}\n as={StyledSummaryItem}\n forwardedAs={as}\n >\n {visual && (\n <Grid\n data-testid={testIds.visual}\n as={StyledVisual}\n item={{ area: 'visual', alignSelf: 'center' }}\n >\n {visual}\n </Grid>\n )}\n <StyledPrimary\n data-testid={testIds.primary}\n item={{ area: 'primary', alignSelf: secondary ? 'end' : 'center' }}\n isString={typeof primary === 'string'}\n overflowStrategy={overflowStrategy}\n >\n {primary}\n </StyledPrimary>\n {secondary && (\n <StyledSecondary\n data-testid={testIds.secondary}\n item={{ area: 'secondary', alignSelf: 'start' }}\n overflowStrategy={overflowStrategy}\n >\n {secondary}\n </StyledSecondary>\n )}\n {actions && (\n <Grid\n data-testid={testIds.actions}\n as={StyledSummaryItemActions}\n item={{ area: 'actions', alignSelf: 'center' }}\n >\n {actions}\n </Grid>\n )}\n </Grid>\n );\n }\n);\n\nexport default SummaryItem;\n"]}
@@ -1,2 +1,2 @@
1
- export declare const getSummaryItemTestIds: (testIdProp?: string | undefined) => import("../../utils").TestIdsRecord<readonly ["primary", "secondary", "visual", "actions"]>;
1
+ export declare const getSummaryItemTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["primary", "secondary", "visual", "actions"]>;
2
2
  //# sourceMappingURL=SummaryItem.test-ids.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SummaryItem.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,kIAKvB,CAAC"}
1
+ {"version":3,"file":"SummaryItem.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,4HAKvB,CAAC"}
@@ -7,7 +7,7 @@ import type { ErrorStateProps } from '../ErrorState';
7
7
  export interface SummaryListProps extends NoChildrenProp {
8
8
  /** Name of the utility to be used as its heading along with associated actions and aria attributes. */
9
9
  name?: string;
10
- /** Identifier for the icon within Pega icons. */
10
+ /** Identifier for the icon within Pega icons. */
11
11
  icon?: string;
12
12
  /** Integer representing the total count of items for a list utility dataset. */
13
13
  count?: number;
@@ -26,7 +26,7 @@ export interface SummaryListProps extends NoChildrenProp {
26
26
  * The default error state may be overridden with custom props.
27
27
  */
28
28
  error?: boolean | ErrorStateProps;
29
- /** Ref for the SummaryList's root element. */
29
+ /** Ref for the SummaryList's root element. */
30
30
  ref?: Ref<HTMLElement>;
31
31
  }
32
32
  export interface SummaryListItem extends OmitStrict<SummaryItemProps, 'actions'>, Pick<ActionsProps, 'contextualLabel'>, ForwardProps {
@@ -1 +1 @@
1
- {"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAGtE,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAMnD,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAI/E,OAAO,WAAW,EAAE,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAI/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,uGAAuG;IACvG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wHAAwH;IACxH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,qKAAqK;IACrK,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,4KAA4K;IAC5K,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACzC,2DAA2D;IAC3D,WAAW,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACzC;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAClC,+CAA+C;IAC/C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAC7C,IAAI,CAAC,YAAY,EAAE,iBAAiB,CAAC,EACrC,YAAY;IACd,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,oIAAoI;IACpI,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB;;SAapC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,OAAO,WAS1C,CAAC;AAIF,eAAO,MAAM,gBAAgB,oBAAqB,KAAK,gBAAgB,EAAE,OAAO,GAAG,MAAM,CAAC,gBA2BzF,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAiEpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAGtE,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAMnD,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAI/E,OAAO,WAAW,EAAE,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAI/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,uGAAuG;IACvG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wHAAwH;IACxH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,qKAAqK;IACrK,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,4KAA4K;IAC5K,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACzC,2DAA2D;IAC3D,WAAW,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACzC;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAClC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAC7C,IAAI,CAAC,YAAY,EAAE,iBAAiB,CAAC,EACrC,YAAY;IACd,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,oIAAoI;IACpI,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB;;SAapC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,OAAO,WAS1C,CAAC;AAIF,eAAO,MAAM,gBAAgB,oBAAqB,KAAK,gBAAgB,EAAE,OAAO,GAAG,MAAM,CAAC,gBA2BzF,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAiEpD,CAAC;AAEF,eAAe,WAAW,CAAC"}