superdesk-ui-framework 4.0.46 → 4.0.48

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 (563) hide show
  1. package/.eslintrc.js +0 -1
  2. package/.eslintrc.json +2 -5
  3. package/.github/workflows/test.yml +22 -26
  4. package/.prettierignore +3 -0
  5. package/.prettierrc.js +9 -0
  6. package/.travis.yml +4 -4
  7. package/README.md +14 -1
  8. package/app/styles/form-elements/_forms-general.scss +0 -4
  9. package/app-typescript/components/Alert.tsx +12 -16
  10. package/app-typescript/components/Autocomplete.tsx +53 -42
  11. package/app-typescript/components/Badge.tsx +1 -1
  12. package/app-typescript/components/Button.tsx +5 -11
  13. package/app-typescript/components/ButtonGroup.tsx +15 -10
  14. package/app-typescript/components/Carousel.tsx +25 -26
  15. package/app-typescript/components/CheckButtonGroup.tsx +6 -10
  16. package/app-typescript/components/Checkbox.tsx +16 -10
  17. package/app-typescript/components/CheckboxButton.tsx +22 -13
  18. package/app-typescript/components/ContentDivider.tsx +6 -7
  19. package/app-typescript/components/CreateButton.tsx +8 -6
  20. package/app-typescript/components/DatePicker.tsx +59 -55
  21. package/app-typescript/components/DateTimePicker.tsx +175 -117
  22. package/app-typescript/components/Divider.tsx +2 -4
  23. package/app-typescript/components/DonutChart.tsx +11 -6
  24. package/app-typescript/components/DragHandle.tsx +10 -6
  25. package/app-typescript/components/DragHandleDots.tsx +1 -3
  26. package/app-typescript/components/DropZone.tsx +27 -25
  27. package/app-typescript/components/Dropdown.tsx +61 -102
  28. package/app-typescript/components/DropdownFirst.tsx +57 -69
  29. package/app-typescript/components/DurationInput.tsx +64 -54
  30. package/app-typescript/components/Editor/EditorButton.tsx +4 -3
  31. package/app-typescript/components/EmptyState.tsx +10 -14
  32. package/app-typescript/components/Form/FormGroup.tsx +9 -16
  33. package/app-typescript/components/Form/FormItem.tsx +1 -5
  34. package/app-typescript/components/Form/FormLabel.tsx +0 -1
  35. package/app-typescript/components/Form/FormRow.tsx +12 -19
  36. package/app-typescript/components/Form/FormRowNew.tsx +9 -16
  37. package/app-typescript/components/Form/FormText.tsx +1 -5
  38. package/app-typescript/components/Form/InputBase.tsx +12 -11
  39. package/app-typescript/components/Form/InputNew.tsx +11 -12
  40. package/app-typescript/components/Form/InputWrapper.tsx +9 -18
  41. package/app-typescript/components/Form/index.tsx +9 -9
  42. package/app-typescript/components/FormLabel.tsx +1 -5
  43. package/app-typescript/components/GridItem.tsx +38 -69
  44. package/app-typescript/components/GridList.tsx +2 -6
  45. package/app-typescript/components/HeadingText.tsx +4 -5
  46. package/app-typescript/components/IconButton.tsx +4 -10
  47. package/app-typescript/components/IconLabel.tsx +5 -5
  48. package/app-typescript/components/IconPicker.tsx +128 -126
  49. package/app-typescript/components/IllustrationButton.tsx +2 -8
  50. package/app-typescript/components/Input.tsx +2 -2
  51. package/app-typescript/components/Label.tsx +11 -7
  52. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +1 -5
  53. package/app-typescript/components/Layouts/AuthoringContainer.tsx +4 -6
  54. package/app-typescript/components/Layouts/AuthoringFrame.tsx +4 -20
  55. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +1 -5
  56. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +1 -5
  57. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +1 -5
  58. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +1 -5
  59. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +1 -5
  60. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +1 -5
  61. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +1 -5
  62. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +1 -3
  63. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +3 -6
  64. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +5 -5
  65. package/app-typescript/components/Layouts/AuthoringMain.tsx +3 -4
  66. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +1 -5
  67. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +1 -5
  68. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +1 -6
  69. package/app-typescript/components/Layouts/BottomBarAction.tsx +8 -10
  70. package/app-typescript/components/Layouts/Container.tsx +13 -8
  71. package/app-typescript/components/Layouts/ContentSplitter.tsx +2 -6
  72. package/app-typescript/components/Layouts/CoreLayout.tsx +5 -12
  73. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +1 -1
  74. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +1 -5
  75. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -4
  76. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +1 -5
  77. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +2 -4
  78. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +8 -9
  79. package/app-typescript/components/Layouts/HamburgerButton.tsx +13 -14
  80. package/app-typescript/components/Layouts/HeaderPanel.tsx +1 -5
  81. package/app-typescript/components/Layouts/Layout.tsx +10 -16
  82. package/app-typescript/components/Layouts/LayoutContainer.tsx +2 -7
  83. package/app-typescript/components/Layouts/LeftPanel.tsx +4 -11
  84. package/app-typescript/components/Layouts/MainMenu.tsx +18 -32
  85. package/app-typescript/components/Layouts/MainPanel.tsx +10 -11
  86. package/app-typescript/components/Layouts/NotificationPanel.tsx +20 -29
  87. package/app-typescript/components/Layouts/OverlayPanel.tsx +3 -5
  88. package/app-typescript/components/Layouts/PageLayout.tsx +4 -21
  89. package/app-typescript/components/Layouts/Panel.tsx +45 -81
  90. package/app-typescript/components/Layouts/index.tsx +39 -39
  91. package/app-typescript/components/LeftMenu.tsx +51 -53
  92. package/app-typescript/components/ListItemLoader.tsx +1 -1
  93. package/app-typescript/components/Lists/BoxedList.tsx +16 -41
  94. package/app-typescript/components/Lists/CalendarWeekDayItem.tsx +2 -10
  95. package/app-typescript/components/Lists/ContentList.tsx +68 -62
  96. package/app-typescript/components/Lists/SimpleList.tsx +13 -12
  97. package/app-typescript/components/Lists/TableList.tsx +169 -217
  98. package/app-typescript/components/Lists/index.tsx +2 -2
  99. package/app-typescript/components/Loader.tsx +1 -3
  100. package/app-typescript/components/Menu.tsx +2 -4
  101. package/app-typescript/components/Modal.tsx +21 -21
  102. package/app-typescript/components/MultiSelect.tsx +6 -6
  103. package/app-typescript/components/NavButton.tsx +10 -8
  104. package/app-typescript/components/Navigation/BottomNav.tsx +21 -17
  105. package/app-typescript/components/Navigation/QuickNavBar.tsx +40 -37
  106. package/app-typescript/components/Navigation/SideBarMenu.tsx +21 -17
  107. package/app-typescript/components/Navigation/SideBarTabs.tsx +13 -19
  108. package/app-typescript/components/Navigation/index.tsx +3 -3
  109. package/app-typescript/components/Popover.tsx +19 -21
  110. package/app-typescript/components/PropsList.tsx +2 -4
  111. package/app-typescript/components/RadioButtonGroup.tsx +48 -45
  112. package/app-typescript/components/RadioGroup.tsx +9 -8
  113. package/app-typescript/components/ResizablePanels.tsx +2 -3
  114. package/app-typescript/components/ResizeObserverComponent.tsx +1 -5
  115. package/app-typescript/components/SearchBar.tsx +53 -45
  116. package/app-typescript/components/Select.tsx +6 -8
  117. package/app-typescript/components/SelectGrid.tsx +32 -40
  118. package/app-typescript/components/SelectPreview.tsx +31 -25
  119. package/app-typescript/components/SelectWithTemplate.tsx +10 -11
  120. package/app-typescript/components/ShowPopup.tsx +30 -46
  121. package/app-typescript/components/SidebarMenu.tsx +19 -18
  122. package/app-typescript/components/Skeleton.tsx +12 -11
  123. package/app-typescript/components/SlidingToolbar.tsx +1 -6
  124. package/app-typescript/components/Spinner.tsx +2 -6
  125. package/app-typescript/components/StrechBar.tsx +1 -5
  126. package/app-typescript/components/SubNav.tsx +10 -8
  127. package/app-typescript/components/SvgIconIllustration.tsx +477 -105
  128. package/app-typescript/components/Switch.tsx +14 -12
  129. package/app-typescript/components/SwitchGroup.tsx +10 -10
  130. package/app-typescript/components/TabCustom.tsx +28 -35
  131. package/app-typescript/components/TabList.tsx +13 -10
  132. package/app-typescript/components/Tag.tsx +21 -24
  133. package/app-typescript/components/TagInput.tsx +4 -11
  134. package/app-typescript/components/Text/Heading.tsx +21 -41
  135. package/app-typescript/components/Text/Text.tsx +16 -12
  136. package/app-typescript/components/Text/Time.tsx +14 -10
  137. package/app-typescript/components/ThemeSelector.tsx +15 -14
  138. package/app-typescript/components/TimePicker.tsx +2 -2
  139. package/app-typescript/components/TimePickerV2.tsx +20 -20
  140. package/app-typescript/components/Toast.tsx +11 -7
  141. package/app-typescript/components/ToastMessage.tsx +3 -14
  142. package/app-typescript/components/ToastText.tsx +30 -32
  143. package/app-typescript/components/ToastWrapper.tsx +76 -74
  144. package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +30 -45
  145. package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx +31 -33
  146. package/app-typescript/components/ToggleBox/index.tsx +3 -7
  147. package/app-typescript/components/Tooltip.tsx +1 -1
  148. package/app-typescript/components/TreeMenu.tsx +72 -81
  149. package/app-typescript/components/TreeSelect/KeyboardNavigation.tsx +1 -5
  150. package/app-typescript/components/TreeSelect/TreeSelect.tsx +221 -238
  151. package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +20 -24
  152. package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +12 -15
  153. package/app-typescript/components/WithPagination.tsx +34 -39
  154. package/app-typescript/components/WithPopover.tsx +0 -1
  155. package/app-typescript/components/WithPortal.tsx +4 -7
  156. package/app-typescript/components/WithSizeObserver.tsx +2 -6
  157. package/app-typescript/components/_Positioner.tsx +26 -26
  158. package/app-typescript/components/avatar/avatar-action-add.tsx +1 -6
  159. package/app-typescript/components/avatar/avatar-group.tsx +49 -68
  160. package/app-typescript/components/avatar/avatar-image.tsx +18 -12
  161. package/app-typescript/components/avatar/avatar-placeholder.tsx +3 -15
  162. package/app-typescript/components/avatar/avatar-text.tsx +1 -4
  163. package/app-typescript/components/avatar/avatar-wrapper.tsx +18 -30
  164. package/app-typescript/components/avatar/avatar.tsx +5 -8
  165. package/app-typescript/components/with-pagination.spec.tsx +8 -27
  166. package/app-typescript/helpers.tsx +2 -2
  167. package/app-typescript/index.ts +111 -100
  168. package/declarations.d.ts +1 -1
  169. package/dist/components/Alerts.tsx +171 -78
  170. package/dist/components/Autocomplete.tsx +187 -78
  171. package/dist/components/Avatar.tsx +52 -112
  172. package/dist/components/Badges.tsx +111 -67
  173. package/dist/components/BigIconFont.tsx +29 -17
  174. package/dist/components/BoxedList.tsx +244 -114
  175. package/dist/components/ButtonGroups.tsx +213 -147
  176. package/dist/components/Buttons.tsx +409 -137
  177. package/dist/components/Card.tsx +6 -7
  178. package/dist/components/Carousel.tsx +126 -39
  179. package/dist/components/Checkboxs.tsx +446 -105
  180. package/dist/components/Container.tsx +95 -48
  181. package/dist/components/ContentDivider.tsx +110 -63
  182. package/dist/components/ContentList.tsx +577 -253
  183. package/dist/components/CreateButton.tsx +71 -21
  184. package/dist/components/DatePicker.tsx +102 -26
  185. package/dist/components/DateTimePicker.tsx +46 -10
  186. package/dist/components/DragHandleDocs.tsx +56 -26
  187. package/dist/components/DropZone.tsx +67 -29
  188. package/dist/components/Dropdowns.tsx +220 -131
  189. package/dist/components/DurationInput.tsx +92 -32
  190. package/dist/components/EmptyStates.tsx +61 -26
  191. package/dist/components/GridItem.tsx +190 -91
  192. package/dist/components/GridList.tsx +37 -17
  193. package/dist/components/Heading.tsx +81 -35
  194. package/dist/components/IconButtons.tsx +125 -32
  195. package/dist/components/IconFont.tsx +24 -12
  196. package/dist/components/IconLabels.tsx +146 -39
  197. package/dist/components/IconPicker.tsx +30 -13
  198. package/dist/components/IllustrationButton.tsx +40 -20
  199. package/dist/components/Index.tsx +128 -114
  200. package/dist/components/Inputs.tsx +153 -51
  201. package/dist/components/Labels.tsx +191 -117
  202. package/dist/components/LeftNavigations.tsx +327 -100
  203. package/dist/components/ListItems.tsx +8 -9
  204. package/dist/components/Loader.tsx +5 -4
  205. package/dist/components/Menu.tsx +48 -26
  206. package/dist/components/Modal.tsx +298 -104
  207. package/dist/components/MultiSelect.tsx +189 -53
  208. package/dist/components/NavButtons.tsx +86 -30
  209. package/dist/components/Panel.tsx +367 -120
  210. package/dist/components/Popover.tsx +37 -17
  211. package/dist/components/QuickNavigationBar.tsx +222 -86
  212. package/dist/components/RadioGroup.tsx +375 -137
  213. package/dist/components/ResizablePanels.tsx +8 -14
  214. package/dist/components/SelectGrid.tsx +79 -38
  215. package/dist/components/SelectWithTemplate.tsx +23 -14
  216. package/dist/components/Selects.tsx +94 -29
  217. package/dist/components/SimpleList.tsx +91 -41
  218. package/dist/components/SubNav.tsx +57 -37
  219. package/dist/components/Switch.tsx +168 -42
  220. package/dist/components/TableList.tsx +220 -66
  221. package/dist/components/Tabs.tsx +149 -64
  222. package/dist/components/TagInputDocs.tsx +73 -17
  223. package/dist/components/Tags.tsx +104 -73
  224. package/dist/components/Text.tsx +108 -58
  225. package/dist/components/TimePicker.tsx +74 -20
  226. package/dist/components/Toasts.tsx +162 -80
  227. package/dist/components/Togglebox.tsx +164 -62
  228. package/dist/components/Tooltips.tsx +27 -15
  229. package/dist/components/TreeMenu.tsx +95 -59
  230. package/dist/components/TreeSelect.tsx +297 -162
  231. package/dist/components/WithPaginationDocs.tsx +15 -16
  232. package/dist/components/WithSizeObserver.tsx +9 -9
  233. package/dist/components/tree-select/TreeSelect.tsx +126 -77
  234. package/dist/components/tree-select/example-1.tsx +8 -12
  235. package/dist/components/tree-select/example-2.tsx +2 -5
  236. package/dist/components/utilities/BorderRadiusUtilities.tsx +28 -13
  237. package/dist/components/utilities/BorderUtilities.tsx +31 -32
  238. package/dist/components/utilities/DisplayUtilities.tsx +4 -5
  239. package/dist/components/utilities/FlexAndGridUtilities.tsx +38 -38
  240. package/dist/components/utilities/ObjectFitUtilities.tsx +4 -6
  241. package/dist/components/utilities/ObjectPositionUtilities.tsx +3 -4
  242. package/dist/components/utilities/OpacityUtilities.tsx +4 -7
  243. package/dist/components/utilities/OverflowUtilities.tsx +4 -5
  244. package/dist/components/utilities/PositionUtilities.tsx +4 -5
  245. package/dist/components/utilities/ShadowUtilities.tsx +15 -16
  246. package/dist/components/utilities/SpacingUtilities.tsx +483 -178
  247. package/dist/components/utilities/TextUtilities.tsx +109 -60
  248. package/dist/design-patterns/Index.tsx +8 -11
  249. package/dist/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  250. package/dist/examples.bundle.css +1257 -1155
  251. package/dist/examples.bundle.js +6246 -5620
  252. package/dist/playgrounds/dummy-data/items.ts +9 -8
  253. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  254. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  255. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  256. package/dist/playgrounds/react-playgrounds/Index.tsx +11 -11
  257. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  258. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  259. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  260. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  261. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  262. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  263. package/dist/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  264. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  265. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  266. package/dist/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  267. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  268. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  269. package/dist/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  270. package/dist/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  271. package/dist/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  272. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  273. package/dist/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  274. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  275. package/dist/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  276. package/dist/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  277. package/dist/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  278. package/dist/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  279. package/dist/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  280. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  281. package/dist/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  282. package/dist/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  283. package/dist/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  284. package/dist/playgrounds/react-playgrounds/tsconfig.json +1 -1
  285. package/dist/superdesk-ui.bundle.css +0 -3
  286. package/dist/superdesk-ui.bundle.js +1791 -1865
  287. package/dist/vendor.bundle.js +2 -2
  288. package/examples/css/docs-page.css +1135 -1116
  289. package/examples/css/reset.css +124 -43
  290. package/examples/css/vendor.css +125 -125
  291. package/examples/index.js +138 -139
  292. package/examples/js/doc.js +41 -40
  293. package/examples/js/react.js +82 -48
  294. package/examples/pages/components/Alerts.tsx +171 -78
  295. package/examples/pages/components/Autocomplete.tsx +187 -78
  296. package/examples/pages/components/Avatar.tsx +52 -112
  297. package/examples/pages/components/Badges.tsx +111 -67
  298. package/examples/pages/components/BigIconFont.tsx +29 -17
  299. package/examples/pages/components/BoxedList.tsx +244 -114
  300. package/examples/pages/components/ButtonGroups.tsx +213 -147
  301. package/examples/pages/components/Buttons.tsx +409 -137
  302. package/examples/pages/components/Card.tsx +6 -7
  303. package/examples/pages/components/Carousel.tsx +126 -39
  304. package/examples/pages/components/Checkboxs.tsx +446 -105
  305. package/examples/pages/components/Container.tsx +95 -48
  306. package/examples/pages/components/ContentDivider.tsx +110 -63
  307. package/examples/pages/components/ContentList.tsx +577 -253
  308. package/examples/pages/components/CreateButton.tsx +71 -21
  309. package/examples/pages/components/DatePicker.tsx +102 -26
  310. package/examples/pages/components/DateTimePicker.tsx +46 -10
  311. package/examples/pages/components/DragHandleDocs.tsx +56 -26
  312. package/examples/pages/components/DropZone.tsx +67 -29
  313. package/examples/pages/components/Dropdowns.tsx +220 -131
  314. package/examples/pages/components/DurationInput.tsx +92 -32
  315. package/examples/pages/components/EmptyStates.tsx +61 -26
  316. package/examples/pages/components/GridItem.tsx +190 -91
  317. package/examples/pages/components/GridList.tsx +37 -17
  318. package/examples/pages/components/Heading.tsx +81 -35
  319. package/examples/pages/components/IconButtons.tsx +125 -32
  320. package/examples/pages/components/IconFont.tsx +24 -12
  321. package/examples/pages/components/IconLabels.tsx +146 -39
  322. package/examples/pages/components/IconPicker.tsx +30 -13
  323. package/examples/pages/components/IllustrationButton.tsx +40 -20
  324. package/examples/pages/components/Index.tsx +128 -114
  325. package/examples/pages/components/Inputs.tsx +153 -51
  326. package/examples/pages/components/Labels.tsx +191 -117
  327. package/examples/pages/components/LeftNavigations.tsx +327 -100
  328. package/examples/pages/components/ListItems.tsx +8 -9
  329. package/examples/pages/components/Loader.tsx +5 -4
  330. package/examples/pages/components/Menu.tsx +48 -26
  331. package/examples/pages/components/Modal.tsx +298 -104
  332. package/examples/pages/components/MultiSelect.tsx +189 -53
  333. package/examples/pages/components/NavButtons.tsx +86 -30
  334. package/examples/pages/components/Panel.tsx +367 -120
  335. package/examples/pages/components/Popover.tsx +37 -17
  336. package/examples/pages/components/QuickNavigationBar.tsx +222 -86
  337. package/examples/pages/components/RadioGroup.tsx +375 -137
  338. package/examples/pages/components/ResizablePanels.tsx +8 -14
  339. package/examples/pages/components/SelectGrid.tsx +79 -38
  340. package/examples/pages/components/SelectWithTemplate.tsx +23 -14
  341. package/examples/pages/components/Selects.tsx +94 -29
  342. package/examples/pages/components/SimpleList.tsx +91 -41
  343. package/examples/pages/components/SubNav.tsx +57 -37
  344. package/examples/pages/components/Switch.tsx +168 -42
  345. package/examples/pages/components/TableList.tsx +220 -66
  346. package/examples/pages/components/Tabs.tsx +149 -64
  347. package/examples/pages/components/TagInputDocs.tsx +73 -17
  348. package/examples/pages/components/Tags.tsx +104 -73
  349. package/examples/pages/components/Text.tsx +108 -58
  350. package/examples/pages/components/TimePicker.tsx +74 -20
  351. package/examples/pages/components/Toasts.tsx +162 -80
  352. package/examples/pages/components/Togglebox.tsx +164 -62
  353. package/examples/pages/components/Tooltips.tsx +27 -15
  354. package/examples/pages/components/TreeMenu.tsx +95 -59
  355. package/examples/pages/components/TreeSelect.tsx +297 -162
  356. package/examples/pages/components/WithPaginationDocs.tsx +15 -16
  357. package/examples/pages/components/WithSizeObserver.tsx +9 -9
  358. package/examples/pages/components/tree-select/TreeSelect.tsx +126 -77
  359. package/examples/pages/components/tree-select/example-1.tsx +8 -12
  360. package/examples/pages/components/tree-select/example-2.tsx +2 -5
  361. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +28 -13
  362. package/examples/pages/components/utilities/BorderUtilities.tsx +31 -32
  363. package/examples/pages/components/utilities/DisplayUtilities.tsx +4 -5
  364. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +38 -38
  365. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +4 -6
  366. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +3 -4
  367. package/examples/pages/components/utilities/OpacityUtilities.tsx +4 -7
  368. package/examples/pages/components/utilities/OverflowUtilities.tsx +4 -5
  369. package/examples/pages/components/utilities/PositionUtilities.tsx +4 -5
  370. package/examples/pages/components/utilities/ShadowUtilities.tsx +15 -16
  371. package/examples/pages/components/utilities/SpacingUtilities.tsx +483 -178
  372. package/examples/pages/components/utilities/TextUtilities.tsx +109 -60
  373. package/examples/pages/design-patterns/Index.tsx +8 -11
  374. package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  375. package/examples/pages/playgrounds/dummy-data/items.ts +9 -8
  376. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  377. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  378. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  379. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +11 -11
  380. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  381. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  382. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  383. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  384. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  385. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  386. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  387. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  388. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  389. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  390. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  391. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  392. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  393. package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  394. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  395. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  396. package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  397. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  398. package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  399. package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  400. package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  401. package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  402. package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  403. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  404. package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  405. package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  406. package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  407. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +1 -1
  408. package/globals.d.ts +1 -1
  409. package/mocha-setup.ts +3 -3
  410. package/package.json +119 -117
  411. package/react/components/Alert.js +6 -9
  412. package/react/components/Autocomplete.js +15 -23
  413. package/react/components/Badge.js +1 -1
  414. package/react/components/Button.js +4 -6
  415. package/react/components/ButtonGroup.js +1 -1
  416. package/react/components/Carousel.js +3 -3
  417. package/react/components/CheckButtonGroup.js +3 -6
  418. package/react/components/CheckboxButton.js +2 -4
  419. package/react/components/ContentDivider.js +1 -1
  420. package/react/components/DatePicker.js +29 -26
  421. package/react/components/DateTimePicker.d.ts +26 -4
  422. package/react/components/DateTimePicker.js +82 -27
  423. package/react/components/Divider.js +1 -1
  424. package/react/components/DonutChart.js +1 -1
  425. package/react/components/DragHandle.js +1 -1
  426. package/react/components/DragHandleDots.js +1 -1
  427. package/react/components/DropZone.js +6 -8
  428. package/react/components/Dropdown.d.ts +1 -1
  429. package/react/components/Dropdown.js +34 -38
  430. package/react/components/DropdownFirst.d.ts +11 -11
  431. package/react/components/DropdownFirst.js +20 -24
  432. package/react/components/DurationInput.js +37 -34
  433. package/react/components/EmptyState.js +5 -5
  434. package/react/components/Form/FormGroup.js +1 -1
  435. package/react/components/Form/FormItem.js +1 -1
  436. package/react/components/Form/FormRow.js +1 -1
  437. package/react/components/Form/FormRowNew.js +3 -3
  438. package/react/components/Form/FormText.js +1 -1
  439. package/react/components/Form/InputNew.js +3 -3
  440. package/react/components/Form/InputWrapper.js +7 -10
  441. package/react/components/GridItem.d.ts +1 -1
  442. package/react/components/GridItem.js +16 -16
  443. package/react/components/GridList.js +1 -1
  444. package/react/components/HeadingText.js +4 -5
  445. package/react/components/IconLabel.js +3 -5
  446. package/react/components/IconPicker.d.ts +1 -1
  447. package/react/components/IconPicker.js +111 -104
  448. package/react/components/IllustrationButton.js +1 -1
  449. package/react/components/Input.js +1 -1
  450. package/react/components/Layouts/AuthorinInnerSideBar.js +1 -1
  451. package/react/components/Layouts/AuthoringContainer.js +1 -1
  452. package/react/components/Layouts/AuthoringFrame.js +4 -4
  453. package/react/components/Layouts/AuthoringFrameContainer.js +1 -1
  454. package/react/components/Layouts/AuthoringFrameLeftBar.js +1 -1
  455. package/react/components/Layouts/AuthoringFrameMain.js +1 -1
  456. package/react/components/Layouts/AuthoringFrameNavBar.js +1 -1
  457. package/react/components/Layouts/AuthoringFrameOverlay.js +1 -1
  458. package/react/components/Layouts/AuthoringFrameRightBar.js +1 -1
  459. package/react/components/Layouts/AuthoringFrameSidePanel.js +1 -1
  460. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +1 -1
  461. package/react/components/Layouts/AuthoringMainContainer.js +1 -1
  462. package/react/components/Layouts/AuthoringMainContent.js +1 -1
  463. package/react/components/Layouts/AuthoringMainToolBar.js +1 -1
  464. package/react/components/Layouts/BottomBarAction.js +2 -2
  465. package/react/components/Layouts/ContentSplitter.js +1 -1
  466. package/react/components/Layouts/CoreLayout.js +2 -2
  467. package/react/components/Layouts/CoreLayoutContainer.js +1 -1
  468. package/react/components/Layouts/CoreLayoutFooter.js +1 -1
  469. package/react/components/Layouts/CoreLayoutOverlay.js +1 -1
  470. package/react/components/Layouts/CoreLayoutSlideInMenu.js +2 -2
  471. package/react/components/Layouts/CoreLayoutTopMenu.js +3 -3
  472. package/react/components/Layouts/HamburgerButton.js +1 -1
  473. package/react/components/Layouts/HeaderPanel.js +1 -1
  474. package/react/components/Layouts/Layout.d.ts +1 -1
  475. package/react/components/Layouts/Layout.js +9 -9
  476. package/react/components/Layouts/LayoutContainer.js +1 -1
  477. package/react/components/Layouts/LeftPanel.js +1 -1
  478. package/react/components/Layouts/MainMenu.js +8 -10
  479. package/react/components/Layouts/MainPanel.js +1 -1
  480. package/react/components/Layouts/NotificationPanel.d.ts +1 -1
  481. package/react/components/Layouts/NotificationPanel.js +7 -7
  482. package/react/components/Layouts/OverlayPanel.js +3 -3
  483. package/react/components/Layouts/PageLayout.js +2 -2
  484. package/react/components/Layouts/Panel.d.ts +1 -1
  485. package/react/components/Layouts/Panel.js +12 -18
  486. package/react/components/LeftMenu.d.ts +3 -3
  487. package/react/components/LeftMenu.js +11 -13
  488. package/react/components/Lists/BoxedList.js +6 -6
  489. package/react/components/Lists/CalendarWeekDayItem.js +2 -2
  490. package/react/components/Lists/ContentList.js +24 -26
  491. package/react/components/Lists/TableList.d.ts +1 -1
  492. package/react/components/Lists/TableList.js +59 -79
  493. package/react/components/Loader.js +1 -1
  494. package/react/components/Menu.js +1 -1
  495. package/react/components/Modal.d.ts +1 -1
  496. package/react/components/MultiSelect.d.ts +1 -1
  497. package/react/components/MultiSelect.js +2 -2
  498. package/react/components/NavButton.js +2 -4
  499. package/react/components/Navigation/BottomNav.js +9 -8
  500. package/react/components/Navigation/QuickNavBar.js +17 -20
  501. package/react/components/Navigation/SideBarMenu.js +11 -9
  502. package/react/components/Navigation/SideBarTabs.js +9 -8
  503. package/react/components/Popover.js +1 -1
  504. package/react/components/RadioButtonGroup.js +15 -23
  505. package/react/components/ResizablePanels.js +1 -3
  506. package/react/components/ResizeObserverComponent.js +1 -3
  507. package/react/components/SearchBar.js +14 -16
  508. package/react/components/Select.js +3 -3
  509. package/react/components/SelectGrid.js +15 -20
  510. package/react/components/SelectPreview.js +13 -13
  511. package/react/components/SelectWithTemplate.js +3 -5
  512. package/react/components/ShowPopup.js +7 -10
  513. package/react/components/Skeleton.js +1 -1
  514. package/react/components/SlidingToolbar.js +1 -1
  515. package/react/components/Spinner.js +1 -1
  516. package/react/components/StrechBar.js +1 -1
  517. package/react/components/SubNav.js +1 -1
  518. package/react/components/Switch.js +4 -6
  519. package/react/components/SwitchGroup.js +1 -1
  520. package/react/components/TabCustom.js +6 -4
  521. package/react/components/TabList.js +4 -8
  522. package/react/components/Tag.js +13 -17
  523. package/react/components/TagInput.js +1 -1
  524. package/react/components/Text/Heading.js +6 -6
  525. package/react/components/ThemeSelector.js +1 -1
  526. package/react/components/TimePickerV2.js +17 -17
  527. package/react/components/Toast.js +3 -3
  528. package/react/components/ToastMessage.d.ts +1 -1
  529. package/react/components/ToastMessage.js +1 -1
  530. package/react/components/ToastText.js +5 -8
  531. package/react/components/ToastWrapper.js +3 -5
  532. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -1
  533. package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -7
  534. package/react/components/ToggleBox/SimpleToggleBox.d.ts +1 -1
  535. package/react/components/ToggleBox/SimpleToggleBox.js +5 -5
  536. package/react/components/ToggleBox/index.js +3 -3
  537. package/react/components/TreeMenu.d.ts +1 -1
  538. package/react/components/TreeMenu.js +38 -44
  539. package/react/components/TreeSelect/TreeSelect.d.ts +2 -2
  540. package/react/components/TreeSelect/TreeSelect.js +105 -127
  541. package/react/components/TreeSelect/TreeSelectItem.d.ts +1 -1
  542. package/react/components/TreeSelect/TreeSelectItem.js +10 -13
  543. package/react/components/TreeSelect/TreeSelectPill.d.ts +1 -1
  544. package/react/components/TreeSelect/TreeSelectPill.js +8 -9
  545. package/react/components/WithPagination.js +18 -21
  546. package/react/components/WithPortal.d.ts +1 -1
  547. package/react/components/WithPortal.js +2 -1
  548. package/react/components/WithSizeObserver.js +1 -3
  549. package/react/components/_Positioner.js +11 -11
  550. package/react/components/avatar/avatar-action-add.js +1 -1
  551. package/react/components/avatar/avatar-group.js +11 -14
  552. package/react/components/avatar/avatar-image.js +6 -4
  553. package/react/components/avatar/avatar-placeholder.js +1 -1
  554. package/react/components/avatar/avatar-wrapper.js +2 -4
  555. package/react/components/avatar/avatar.js +4 -3
  556. package/react/helpers.js +2 -2
  557. package/react/index.d.ts +1 -1
  558. package/tasks/webpack.dev.js +1 -1
  559. package/tasks/webpack.js +5 -5
  560. package/tasks/webpack.prod.js +1 -5
  561. package/tsconfig.json +2 -5
  562. package/tslint.json +6 -12
  563. package/webpack.config.js +2 -5
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
 
3
3
  import * as Markup from '../../js/react';
4
4
 
5
- import { CheckGroup, Checkbox, Autocomplete, PropsList, Prop } from '../../../app-typescript';
5
+ import {CheckGroup, Checkbox, Autocomplete, PropsList, Prop} from '../../../app-typescript';
6
6
 
7
7
  interface IState {
8
8
  items: Array<any>;
@@ -16,28 +16,29 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
16
16
  super(props);
17
17
  this.state = {
18
18
  items: [
19
- { name: 'Item 1', value: 'item-1', description: 'Some description for item 1' },
20
- { name: 'Item 2', value: 'item-2', description: 'Some description for item 2' },
21
- { name: 'Item 3', value: 'item-3', description: 'Some description for item 3' },
22
- { name: 'Item 4', value: 'item-4', description: 'Some description for item 4'}
19
+ {name: 'Item 1', value: 'item-1', description: 'Some description for item 1'},
20
+ {name: 'Item 2', value: 'item-2', description: 'Some description for item 2'},
21
+ {name: 'Item 3', value: 'item-3', description: 'Some description for item 3'},
22
+ {name: 'Item 4', value: 'item-4', description: 'Some description for item 4'},
23
23
  ],
24
24
  inlineLabel: false,
25
25
  required: false,
26
26
  disabled: false,
27
- }
27
+ };
28
28
  }
29
29
 
30
30
  searchFunction(searchString, callback) {
31
31
  let cancelled = false;
32
32
 
33
33
  let items = [
34
- { name: 'Item Custom Search 1', value: 'item-1' },
35
- { name: 'Item Custom Search 2', value: 'item-2' },
36
- { name: 'Item Custom Search 3', value: 'item-3' }
37
- ]
34
+ {name: 'Item Custom Search 1', value: 'item-1'},
35
+ {name: 'Item Custom Search 2', value: 'item-2'},
36
+ {name: 'Item Custom Search 3', value: 'item-3'},
37
+ ];
38
38
 
39
39
  let filteredItems = items.filter((item) =>
40
- item.name.toLowerCase().indexOf(searchString.toLowerCase()) !== -1 ? item : false);
40
+ item.name.toLowerCase().indexOf(searchString.toLowerCase()) !== -1 ? item : false,
41
+ );
41
42
 
42
43
  callback(filteredItems);
43
44
 
@@ -54,45 +55,69 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
54
55
  <b>{item.name}</b>
55
56
  <p>{item.description}</p>
56
57
  </div>
57
- )
58
+ );
58
59
  }
59
60
 
60
61
  render() {
61
62
  return (
62
- <section className='docs-page__container'>
63
- <h2 className='docs-page__h2'>Autocomplete</h2>
64
- <p className='docs-page__paragraph'></p>
65
- <Markup.ReactMarkupCodePreview>{`
63
+ <section className="docs-page__container">
64
+ <h2 className="docs-page__h2">Autocomplete</h2>
65
+ <p className="docs-page__paragraph"></p>
66
+ <Markup.ReactMarkupCodePreview>
67
+ {`
66
68
  import {Autocomplete} from 'superdesk-ui-framework/react'
67
69
  `}
68
70
  </Markup.ReactMarkupCodePreview>
69
71
 
70
72
  <h3 className="docs-page__h3 docs-page__h3--small-top-m">Basic Autocomplete</h3>
71
- <p className="docs-page__paragraph">For basic usage of autocomplete, you need to pass value for prop <code>text</code> and <code>items</code>. Items can be passed as array of strings or array of objects.
72
- If you pass array of objects, you need to define prop <code>keyValue</code> as object key, so autocomplete can know which propery to use as display option.</p>
73
- <Markup.ReactMarkupCodePreview>{`
73
+ <p className="docs-page__paragraph">
74
+ For basic usage of autocomplete, you need to pass value for prop <code>text</code> and{' '}
75
+ <code>items</code>. Items can be passed as array of strings or array of objects. If you pass array
76
+ of objects, you need to define prop <code>keyValue</code> as object key, so autocomplete can know
77
+ which propery to use as display option.
78
+ </p>
79
+ <Markup.ReactMarkupCodePreview>
80
+ {`
74
81
  <Autocomplete label='Autocomplete label' keyValue="name" items={items} />
75
82
  `}
76
83
  </Markup.ReactMarkupCodePreview>
77
- <p className='docs-page__paragraph'></p>
84
+ <p className="docs-page__paragraph"></p>
78
85
  <Markup.ReactMarkup>
79
86
  <Markup.ReactMarkupPreview>
80
- <div className='docs-page__content-row docs-page__content-row--no-margin'>
81
- <div className='form__row'>
87
+ <div className="docs-page__content-row docs-page__content-row--no-margin">
88
+ <div className="form__row">
82
89
  <CheckGroup>
83
- <Checkbox checked={this.state.required} label={{ text: 'Required input' }} onChange={(value) => { this.setState({ required: value }) }} />
84
- <Checkbox checked={this.state.disabled} label={{ text: 'Disabled input' }} onChange={(value) => { this.setState({ disabled: value }) }} />
85
- <Checkbox checked={this.state.inlineLabel} label={{ text: 'Label positioned inline' }} onChange={(value) => { this.setState({ inlineLabel: value }) }} />
90
+ <Checkbox
91
+ checked={this.state.required}
92
+ label={{text: 'Required input'}}
93
+ onChange={(value) => {
94
+ this.setState({required: value});
95
+ }}
96
+ />
97
+ <Checkbox
98
+ checked={this.state.disabled}
99
+ label={{text: 'Disabled input'}}
100
+ onChange={(value) => {
101
+ this.setState({disabled: value});
102
+ }}
103
+ />
104
+ <Checkbox
105
+ checked={this.state.inlineLabel}
106
+ label={{text: 'Label positioned inline'}}
107
+ onChange={(value) => {
108
+ this.setState({inlineLabel: value});
109
+ }}
110
+ />
86
111
  </CheckGroup>
87
112
  </div>
88
113
 
89
- <div className='form__row'>
114
+ <div className="form__row">
90
115
  <Autocomplete
91
- label='Autocomplete label'
116
+ label="Autocomplete label"
92
117
  items={this.state.items}
93
118
  keyValue="name"
94
- info='Try typing `item`...'
95
- error='This is an error message'
119
+ info="Try typing `item`..."
120
+ error="This is an error message"
96
121
  inlineLabel={this.state.inlineLabel}
97
122
  required={this.state.required}
98
123
  disabled={this.state.disabled}
@@ -101,7 +126,6 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
101
126
  />
102
127
  </div>
103
128
  </div>
104
-
105
129
  </Markup.ReactMarkupPreview>
106
130
  <Markup.ReactMarkupCode>{`
107
131
  let items = [
@@ -126,24 +150,27 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
126
150
  </Markup.ReactMarkup>
127
151
 
128
152
  <h3 className="docs-page__h3 docs-page__h3--small-top-m">Autocomplete with Search field</h3>
129
- <p className="docs-page__paragraph">Set prop <code>isSearchField</code> to <code>{true}</code> to enable this option.
130
- The search field does't have a visible lable. The value of the label prop will be used for the aria-label.</p>
131
- <Markup.ReactMarkupCodePreview>{`
153
+ <p className="docs-page__paragraph">
154
+ Set prop <code>isSearchField</code> to <code>{true}</code> to enable this option. The search field
155
+ does't have a visible lable. The value of the label prop will be used for the aria-label.
156
+ </p>
157
+ <Markup.ReactMarkupCodePreview>
158
+ {`
132
159
  <Autocomplete label='Search' keyValue="name" items={items} isSearchField={true} />
133
160
  `}
134
161
  </Markup.ReactMarkupCodePreview>
135
- <p className='docs-page__paragraph'></p>
162
+ <p className="docs-page__paragraph"></p>
136
163
  <Markup.ReactMarkup>
137
164
  <Markup.ReactMarkupPreview>
138
- <div className='docs-page__content-row docs-page__content-row--no-margin'>
139
- <div className='form__row'>
165
+ <div className="docs-page__content-row docs-page__content-row--no-margin">
166
+ <div className="form__row">
140
167
  <Autocomplete
141
- label='Search items'
168
+ label="Search items"
142
169
  items={this.state.items}
143
170
  keyValue="name"
144
- error='There was an error using the search'
171
+ error="There was an error using the search"
145
172
  isSearchField={true}
146
- placeholder='Search'
173
+ placeholder="Search"
147
174
  required={this.state.required}
148
175
  disabled={this.state.disabled}
149
176
  onChange={() => false}
@@ -151,7 +178,6 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
151
178
  />
152
179
  </div>
153
180
  </div>
154
-
155
181
  </Markup.ReactMarkupPreview>
156
182
  <Markup.ReactMarkupCode>{`
157
183
  let items = [
@@ -177,18 +203,21 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
177
203
  </Markup.ReactMarkup>
178
204
 
179
205
  <h3 className="docs-page__h3 docs-page__h3--small-top-m">Autocomplete with custom search function</h3>
180
- <p className="docs-page__paragraph">Define prop <code>search</code> with custom function.</p>
181
- <Markup.ReactMarkupCodePreview>{`
206
+ <p className="docs-page__paragraph">
207
+ Define prop <code>search</code> with custom function.
208
+ </p>
209
+ <Markup.ReactMarkupCodePreview>
210
+ {`
182
211
  <Autocomplete label="Autocomplete label" items={this.props.items} search={this.search} />
183
212
  `}
184
213
  </Markup.ReactMarkupCodePreview>
185
- <p className='docs-page__paragraph'></p>
214
+ <p className="docs-page__paragraph"></p>
186
215
  <Markup.ReactMarkup>
187
216
  <Markup.ReactMarkupPreview>
188
- <div className='docs-page__content-row docs-page__content-row--no-margin'>
189
- <div className='form__row'>
217
+ <div className="docs-page__content-row docs-page__content-row--no-margin">
218
+ <div className="form__row">
190
219
  <Autocomplete
191
- label='Autocomplete label'
220
+ label="Autocomplete label"
192
221
  items={this.state.items}
193
222
  keyValue="name"
194
223
  info="Try typing `item custom`...'"
@@ -201,7 +230,6 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
201
230
  />
202
231
  </div>
203
232
  </div>
204
-
205
233
  </Markup.ReactMarkupPreview>
206
234
  <Markup.ReactMarkupCode>{`
207
235
  searchFunction(searchString, callback) {
@@ -240,20 +268,24 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
240
268
  </Markup.ReactMarkup>
241
269
 
242
270
  <h3 className="docs-page__h3 docs-page__h3--small-top-m">Autocomplete with custom list template</h3>
243
- <p className="docs-page__paragraph">Define prop <code>listItemTemplate</code> with function that returns structure for list item. Function returns item, string or object.</p>
244
- <Markup.ReactMarkupCodePreview>{`
271
+ <p className="docs-page__paragraph">
272
+ Define prop <code>listItemTemplate</code> with function that returns structure for list item.
273
+ Function returns item, string or object.
274
+ </p>
275
+ <Markup.ReactMarkupCodePreview>
276
+ {`
245
277
  <Autocomplete label="Autocomplete label" items={this.props.items} listItemTemplate={this.customListTemplate} />
246
278
  `}
247
279
  </Markup.ReactMarkupCodePreview>
248
- <p className='docs-page__paragraph'></p>
280
+ <p className="docs-page__paragraph"></p>
249
281
  <Markup.ReactMarkup>
250
282
  <Markup.ReactMarkupPreview>
251
- <div className='docs-page__content-row docs-page__content-row--no-margin'>
252
- <div className='form__row'>
283
+ <div className="docs-page__content-row docs-page__content-row--no-margin">
284
+ <div className="form__row">
253
285
  <Autocomplete
254
- label='Autocomplete label'
286
+ label="Autocomplete label"
255
287
  items={this.state.items}
256
- keyValue='name'
288
+ keyValue="name"
257
289
  listItemTemplate={this.customListTemplate}
258
290
  info="Try typing `item custom`...'"
259
291
  inlineLabel={this.state.inlineLabel}
@@ -264,7 +296,6 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
264
296
  />
265
297
  </div>
266
298
  </div>
267
-
268
299
  </Markup.ReactMarkupPreview>
269
300
  <Markup.ReactMarkupCode>{`
270
301
  customListTemplate(item: any) {
@@ -289,37 +320,115 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
289
320
  `}</Markup.ReactMarkupCode>
290
321
  </Markup.ReactMarkup>
291
322
 
292
- <h3 className='docs-page__h3'>Props</h3>
323
+ <h3 className="docs-page__h3">Props</h3>
293
324
  <PropsList>
294
- <Prop name='items' isRequired={true} type='array' default='/' description='Array of values for autocomplete' />
295
- <Prop name='value' isRequired={false} type='any' default='/' description='Value to be predefined on component load' />
296
- <Prop name='keyValue' isRequired={false} type='string' default='/' description='Key value if array is combined of objects' />
297
- <Prop name='minLength' isRequired={false} type='number' default='1' description='Minimum number of characters to initiate a search' />
298
- <Prop name='listItemTemplate' isRequired={false} type='function' default='/' description='Create custom view of list item' />
299
- <Prop name='label' isRequired={false} type='string' default='/' description='Input label' />
300
- <Prop name='info' isRequired={false} type='string' default='/' description='Hint text' />
301
- <Prop name='error' isRequired={false} type='string' default='/' description='Error text' />
302
- <Prop name='placeholder' isRequired={false} type='string' default='/' description='Placeholder text for the input field.' />
303
325
  <Prop
304
- name='isSearchField'
326
+ name="items"
327
+ isRequired={true}
328
+ type="array"
329
+ default="/"
330
+ description="Array of values for autocomplete"
331
+ />
332
+ <Prop
333
+ name="value"
334
+ isRequired={false}
335
+ type="any"
336
+ default="/"
337
+ description="Value to be predefined on component load"
338
+ />
339
+ <Prop
340
+ name="keyValue"
305
341
  isRequired={false}
306
- type='boolean'
307
- default='false'
308
- description='Styles the input as a search field, adds a search icon and the option to clear the field. No visible lable is present in this option.'
342
+ type="string"
343
+ default="/"
344
+ description="Key value if array is combined of objects"
345
+ />
346
+ <Prop
347
+ name="minLength"
348
+ isRequired={false}
349
+ type="number"
350
+ default="1"
351
+ description="Minimum number of characters to initiate a search"
352
+ />
353
+ <Prop
354
+ name="listItemTemplate"
355
+ isRequired={false}
356
+ type="function"
357
+ default="/"
358
+ description="Create custom view of list item"
359
+ />
360
+ <Prop name="label" isRequired={false} type="string" default="/" description="Input label" />
361
+ <Prop name="info" isRequired={false} type="string" default="/" description="Hint text" />
362
+ <Prop name="error" isRequired={false} type="string" default="/" description="Error text" />
363
+ <Prop
364
+ name="placeholder"
365
+ isRequired={false}
366
+ type="string"
367
+ default="/"
368
+ description="Placeholder text for the input field."
369
+ />
370
+ <Prop
371
+ name="isSearchField"
372
+ isRequired={false}
373
+ type="boolean"
374
+ default="false"
375
+ description="Styles the input as a search field, adds a search icon and the option to clear the field. No visible lable is present in this option."
376
+ />
377
+ <Prop
378
+ name="inlineLabel"
379
+ isRequired={false}
380
+ type="boolean"
381
+ default="false"
382
+ description="Position labels as inline"
383
+ />
384
+ <Prop
385
+ name="required"
386
+ isRequired={false}
387
+ type="boolean"
388
+ default="false"
389
+ description="Mark field as required"
390
+ />
391
+ <Prop
392
+ name="disabled"
393
+ isRequired={false}
394
+ type="boolean"
395
+ default="false"
396
+ description="Mark field as disabled"
397
+ />
398
+ <Prop
399
+ name="invalid"
400
+ isRequired={false}
401
+ type="boolean"
402
+ default="false"
403
+ description="Mark field as invalid"
309
404
  />
310
- <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline' />
311
- <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required' />
312
- <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
313
- <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid' />
314
405
  </PropsList>
315
406
 
316
- <h3 className='docs-page__h3'>Events</h3>
407
+ <h3 className="docs-page__h3">Events</h3>
317
408
  <PropsList>
318
- <Prop name='search' isRequired={false} type='function' default='/' description='Custom function for filtering items' />
319
- <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of text input' />
320
- <Prop name='onSelect' isRequired={false} type='function' default='/' description='Returns selected value' />
409
+ <Prop
410
+ name="search"
411
+ isRequired={false}
412
+ type="function"
413
+ default="/"
414
+ description="Custom function for filtering items"
415
+ />
416
+ <Prop
417
+ name="onChange"
418
+ isRequired={true}
419
+ type="function"
420
+ default="/"
421
+ description="Returns value of text input"
422
+ />
423
+ <Prop
424
+ name="onSelect"
425
+ isRequired={false}
426
+ type="function"
427
+ default="/"
428
+ description="Returns selected value"
429
+ />
321
430
  </PropsList>
322
431
  </section>
323
- )
432
+ );
324
433
  }
325
434
  }