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
@@ -5,37 +5,36 @@ import * as Markup from '../../js/react';
5
5
  import {WithPagination} from '../../../app-typescript';
6
6
  import {range} from 'lodash';
7
7
 
8
- function getItems(pageNo: number): Promise<{items: Array<number>, itemCount: number}> {
8
+ function getItems(pageNo: number): Promise<{items: Array<number>; itemCount: number}> {
9
9
  return new Promise((resolve) => {
10
10
  setTimeout(() => {
11
11
  return resolve({items: range(1, 500).slice((pageNo - 1) * 20, (pageNo - 1) * 20 + 20), itemCount: 500});
12
12
  }, 1000);
13
13
  });
14
- };
14
+ }
15
15
 
16
16
  export class WithPaginationDocs extends React.Component {
17
17
  render() {
18
18
  const wrapperStyle: React.CSSProperties = {
19
19
  display: 'flex',
20
20
  flexDirection: 'column',
21
- alignItems: 'center'
21
+ alignItems: 'center',
22
22
  };
23
23
 
24
24
  return (
25
- <section className='docs-page__container'>
26
- <h2 className='docs-page__h2'>With pagination</h2>
27
- <p className='docs-page__paragraph'></p>
25
+ <section className="docs-page__container">
26
+ <h2 className="docs-page__h2">With pagination</h2>
27
+ <p className="docs-page__paragraph"></p>
28
28
  <Markup.ReactMarkup>
29
29
  <Markup.ReactMarkupPreview>
30
- <WithPagination
31
- getItems={(pageNo) => getItems(pageNo)}
32
- >
33
- {
34
- (items) =>
35
- <div style={wrapperStyle}>
36
- {items.map((x, i) => <div key={i}>{x}</div>)}
37
- </div>
38
- }
30
+ <WithPagination getItems={(pageNo) => getItems(pageNo)}>
31
+ {(items) => (
32
+ <div style={wrapperStyle}>
33
+ {items.map((x, i) => (
34
+ <div key={i}>{x}</div>
35
+ ))}
36
+ </div>
37
+ )}
39
38
  </WithPagination>
40
39
  </Markup.ReactMarkupPreview>
41
40
  <Markup.ReactMarkupCode>{`
@@ -52,6 +51,6 @@ export class WithPaginationDocs extends React.Component {
52
51
  `}</Markup.ReactMarkupCode>
53
52
  </Markup.ReactMarkup>
54
53
  </section>
55
- )
54
+ );
56
55
  }
57
56
  }
@@ -5,29 +5,29 @@ import {WithSizeObserver} from '../../../app-typescript/components/WithSizeObser
5
5
  export class WithSizeObserverDocs extends React.Component {
6
6
  render() {
7
7
  return (
8
- <section className='docs-page__container'>
9
-
10
- <h2 className='docs-page__h2'>WithSizeObserver</h2>
8
+ <section className="docs-page__container">
9
+ <h2 className="docs-page__h2">WithSizeObserver</h2>
11
10
 
12
11
  <p>Higher order component for dynamically retrieving dimensions of any element.</p>
13
12
 
14
13
  <p>It uses `ResizeObserver` to listen for updates and re-render children efficiently.</p>
15
14
 
16
- <p className='docs-page__paragraph'></p>
15
+ <p className="docs-page__paragraph"></p>
17
16
  <Markup.ReactMarkup>
18
17
  <Markup.ReactMarkupPreview>
19
- <div className='docs-page__content-row docs-page__content-row--no-margin'>
20
- <div className='form__row'>
18
+ <div className="docs-page__content-row docs-page__content-row--no-margin">
19
+ <div className="form__row">
21
20
  <div style={{resize: 'both', overflow: 'auto', height: 40, outline: '1px solid red'}}>
22
21
  <WithSizeObserver>
23
22
  {({width, height}) => (
24
- <div>width: {width}px ; height: {height}px</div>
23
+ <div>
24
+ width: {width}px ; height: {height}px
25
+ </div>
25
26
  )}
26
27
  </WithSizeObserver>
27
28
  </div>
28
29
  </div>
29
30
  </div>
30
-
31
31
  </Markup.ReactMarkupPreview>
32
32
 
33
33
  <Markup.ReactMarkupCode>{`
@@ -39,6 +39,6 @@ export class WithSizeObserverDocs extends React.Component {
39
39
  `}</Markup.ReactMarkupCode>
40
40
  </Markup.ReactMarkup>
41
41
  </section>
42
- )
42
+ );
43
43
  }
44
44
  }
@@ -1,8 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import * as Markup from '../../../js/react';
3
- import { PropsList, Prop } from '../../../../app-typescript';
4
- import { MultiSelect } from '../../../../app-typescript/components/MultiSelect';
5
- import { TreeSelect } from '../../../../app-typescript/components/TreeSelect';
3
+ import {PropsList, Prop} from '../../../../app-typescript';
4
+ import {MultiSelect} from '../../../../app-typescript/components/MultiSelect';
5
+ import {TreeSelect} from '../../../../app-typescript/components/TreeSelect';
6
6
  import {Example1} from './example-1';
7
7
  import {Example2} from './example-2';
8
8
 
@@ -20,41 +20,37 @@ let itemArr = [
20
20
  children: [
21
21
  {
22
22
  value: 'Item4',
23
- children: [
24
- {value: 'Item10'}
25
- ]
23
+ children: [{value: 'Item10'}],
26
24
  },
27
25
  {
28
26
  value: 'Item5',
29
- children: [
30
- {value: 'Item11'}
31
- ]
32
- }
33
- ]
27
+ children: [{value: 'Item11'}],
28
+ },
29
+ ],
34
30
  },
35
31
  {
36
32
  value: 'Item2',
37
33
  children: [
38
34
  {
39
- value: 'Item6'
35
+ value: 'Item6',
40
36
  },
41
37
  {
42
- value: 'Item7'
43
- }
44
- ]
38
+ value: 'Item7',
39
+ },
40
+ ],
45
41
  },
46
42
  {
47
43
  value: 'Item3',
48
44
  children: [
49
45
  {
50
- value: 'Item8'
46
+ value: 'Item8',
51
47
  },
52
48
  {
53
- value: 'Item9'
54
- }
55
- ]
49
+ value: 'Item9',
50
+ },
51
+ ],
56
52
  },
57
- ]
53
+ ];
58
54
 
59
55
  let itemArr2 = [
60
56
  {
@@ -62,22 +58,15 @@ let itemArr2 = [
62
58
  children: [
63
59
  {
64
60
  value: {name: 'name'},
65
- children: [
66
- {value: { name: 'name' }
67
- }
68
- ]
61
+ children: [{value: {name: 'name'}}],
69
62
  },
70
63
  {
71
64
  value: {name: 'name'},
72
- children: [
73
- {value: {name: 'name'}
74
- }
75
- ]
76
- }
77
- ]
78
- }
79
- ]
80
-
65
+ children: [{value: {name: 'name'}}],
66
+ },
67
+ ],
68
+ },
69
+ ];
81
70
 
82
71
  export class TreeSelectDocs extends React.Component<{}, IState> {
83
72
  constructor(props) {
@@ -87,27 +76,26 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
87
76
  value2: [],
88
77
  options: itemArr,
89
78
  options2: itemArr,
90
- inputValue: ''
91
- }
79
+ inputValue: '',
80
+ };
92
81
 
93
82
  this.handleChange = this.handleChange.bind(this);
94
83
  }
95
84
 
96
85
  handleChange(e, option) {
97
-
98
- if(option.item) {
86
+ if (option.item) {
99
87
  e.stopPropagation();
100
88
  e.preventDefault();
101
89
 
102
90
  this.setState({
103
- options: option.item
104
- })
91
+ options: option.item,
92
+ });
105
93
  }
106
94
  }
107
95
 
108
96
  render() {
109
97
  return (
110
- <section className='docs-page__container'>
98
+ <section className="docs-page__container">
111
99
  {/* <h2 className='docs-page__h2'>Example 1</h2>
112
100
 
113
101
  <Example1 />
@@ -116,9 +104,10 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
116
104
 
117
105
  <Example2 /> */}
118
106
 
119
- <h2 className='docs-page__h2'>TreeSelect</h2>
107
+ <h2 className="docs-page__h2">TreeSelect</h2>
120
108
 
121
- <Markup.ReactMarkupCodePreview>{`
109
+ <Markup.ReactMarkupCodePreview>
110
+ {`
122
111
  <TreeSelect
123
112
  options={this.state.options2}
124
113
  getLabel={'label'}
@@ -131,11 +120,11 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
131
120
 
132
121
  <Markup.ReactMarkup>
133
122
  <Markup.ReactMarkupPreview>
134
- <div className='docs-page__content-row docs-page__content-row--no-margin'>
135
- <div className='form__row'>
123
+ <div className="docs-page__content-row docs-page__content-row--no-margin">
124
+ <div className="form__row">
136
125
  <TreeSelect
137
126
  getOptions={() => {
138
- return itemArr
127
+ return itemArr;
139
128
  }}
140
129
  selectBranchWithChildren={true}
141
130
  onChange={(e) => console.log(e)}
@@ -162,17 +151,16 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
162
151
  kind={'synchronous'}
163
152
  />
164
153
  `}</Markup.ReactMarkupCode>
165
-
166
154
  </Markup.ReactMarkup>
167
155
 
168
- <p className='docs-page__paragraph'>Asynchronous mode in TreeSelect component.</p>
156
+ <p className="docs-page__paragraph">Asynchronous mode in TreeSelect component.</p>
169
157
  <Markup.ReactMarkup>
170
158
  <Markup.ReactMarkupPreview>
171
- <div className='docs-page__content-row docs-page__content-row--no-margin'>
172
- <div className='form__row'>
159
+ <div className="docs-page__content-row docs-page__content-row--no-margin">
160
+ <div className="form__row">
173
161
  <TreeSelect
174
162
  getOptions={() => {
175
- return itemArr
163
+ return itemArr;
176
164
  }}
177
165
  selectBranchWithChildren={true}
178
166
  onChange={() => false}
@@ -180,14 +168,12 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
180
168
  kind={'asynchronous'}
181
169
  searchOptions={(term, callback) => {
182
170
  let newArr = itemArr.filter((item) => {
183
- if (item.value
184
- .toLowerCase().includes(term.toLowerCase())) {
185
- return item;
186
- }
187
- })
188
- return callback(newArr)
171
+ if (item.value.toLowerCase().includes(term.toLowerCase())) {
172
+ return item;
173
+ }
174
+ });
175
+ return callback(newArr);
189
176
  }}
190
-
191
177
  />
192
178
  </div>
193
179
  </div>
@@ -213,23 +199,22 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
213
199
  }}
214
200
  />
215
201
  `}</Markup.ReactMarkupCode>
216
-
217
202
  </Markup.ReactMarkup>
218
203
 
219
- <p className='docs-page__paragraph'>TreeSelect with custom template.</p>
204
+ <p className="docs-page__paragraph">TreeSelect with custom template.</p>
220
205
  <Markup.ReactMarkup>
221
206
  <Markup.ReactMarkupPreview>
222
- <div className='docs-page__content-row docs-page__content-row--no-margin'>
223
- <div className='form__row'>
207
+ <div className="docs-page__content-row docs-page__content-row--no-margin">
208
+ <div className="form__row">
224
209
  <TreeSelect
225
210
  getOptions={() => this.state.options}
226
211
  kind={'synchronous'}
227
212
  onChange={() => false}
228
213
  optionTemplate={(item: any) => {
229
- return <div>Label: {item}</div>
214
+ return <div>Label: {item}</div>;
230
215
  }}
231
216
  valueTemplate={(item: any) => {
232
- return <span>Label: {item}</span>
217
+ return <span>Label: {item}</span>;
233
218
  }}
234
219
  />
235
220
  </div>
@@ -249,25 +234,89 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
249
234
  }}
250
235
  />
251
236
  `}</Markup.ReactMarkupCode>
252
-
253
237
  </Markup.ReactMarkup>
254
238
 
255
239
  <h3 className="docs-page__h3">Props</h3>
256
240
  <PropsList>
257
- <Prop name='value' isRequired={false} type='Array<T>' default='/' description='Value of the component.'/>
258
- <Prop name='getOptions' isRequired={false} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
259
- <Prop name='kind' isRequired={true} type='synchronous | asynchronous' default='/' description='Type of TreeSelect component.'/>
260
- <Prop name='width' isRequired={false} type='medium | full-width (100%)' default='100%' description='Dropdown width.'/>
261
- <Prop name='selectBranchWithChildren' isRequired={false} type='boolean' default='false' description='When specified, select branch with children is enabled.'/>
262
- <Prop name='readonly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.'/>
263
- <Prop name='loading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator in dropdown.'/>
264
- <Prop name='valueTemplate' isRequired={false} type='function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
265
- <Prop name='optionTemplate' isRequired={false} type='function' default='/' description='Function that gets the option and returns the content for it.'/>
266
- <Prop name='searchOptions' isRequired={false} type='function' default='/' description='The function will be called when a search is initiated from UI in asynchronous mode.'/>
267
- <Prop name='onChange' isRequired={true} type='function' default='/' description='Callback to invoke when value changes.'/>
241
+ <Prop
242
+ name="value"
243
+ isRequired={false}
244
+ type="Array<T>"
245
+ default="/"
246
+ description="Value of the component."
247
+ />
248
+ <Prop
249
+ name="getOptions"
250
+ isRequired={false}
251
+ type="Function"
252
+ default="/"
253
+ description="An array of selectitems to display as the available options."
254
+ />
255
+ <Prop
256
+ name="kind"
257
+ isRequired={true}
258
+ type="synchronous | asynchronous"
259
+ default="/"
260
+ description="Type of TreeSelect component."
261
+ />
262
+ <Prop
263
+ name="width"
264
+ isRequired={false}
265
+ type="medium | full-width (100%)"
266
+ default="100%"
267
+ description="Dropdown width."
268
+ />
269
+ <Prop
270
+ name="selectBranchWithChildren"
271
+ isRequired={false}
272
+ type="boolean"
273
+ default="false"
274
+ description="When specified, select branch with children is enabled."
275
+ />
276
+ <Prop
277
+ name="readonly"
278
+ isRequired={false}
279
+ type="boolean"
280
+ default="false"
281
+ description="When specified, component changes are not enabled."
282
+ />
283
+ <Prop
284
+ name="loading"
285
+ isRequired={false}
286
+ type="boolean"
287
+ default="false"
288
+ description="Adds a loading indicator in dropdown."
289
+ />
290
+ <Prop
291
+ name="valueTemplate"
292
+ isRequired={false}
293
+ type="function"
294
+ default="/"
295
+ description="Function that gets an item in the value and returns the content for it."
296
+ />
297
+ <Prop
298
+ name="optionTemplate"
299
+ isRequired={false}
300
+ type="function"
301
+ default="/"
302
+ description="Function that gets the option and returns the content for it."
303
+ />
304
+ <Prop
305
+ name="searchOptions"
306
+ isRequired={false}
307
+ type="function"
308
+ default="/"
309
+ description="The function will be called when a search is initiated from UI in asynchronous mode."
310
+ />
311
+ <Prop
312
+ name="onChange"
313
+ isRequired={true}
314
+ type="function"
315
+ default="/"
316
+ description="Callback to invoke when value changes."
317
+ />
268
318
  </PropsList>
269
-
270
319
  </section>
271
- )
320
+ );
272
321
  }
273
322
  }
@@ -15,23 +15,20 @@ interface IState {
15
15
 
16
16
  const source = [
17
17
  {
18
- 'name': 'Article (news)',
19
- 'qcode': 'Article',
18
+ name: 'Article (news)',
19
+ qcode: 'Article',
20
20
  },
21
21
  {
22
- 'name': 'Sidebar',
23
- 'qcode': 'Sidebar',
22
+ name: 'Sidebar',
23
+ qcode: 'Sidebar',
24
24
  },
25
25
  {
26
- 'name': 'Factbox',
27
- 'qcode': 'Factbox',
26
+ name: 'Factbox',
27
+ qcode: 'Factbox',
28
28
  },
29
29
  ];
30
30
 
31
- function searchOptions(
32
- term: string,
33
- callback: (res: Array<ITreeNode<{name: string; qcode: string;}>>) => void,
34
- ): void {
31
+ function searchOptions(term: string, callback: (res: Array<ITreeNode<{name: string; qcode: string}>>) => void): void {
35
32
  setTimeout(() => {
36
33
  callback(
37
34
  source
@@ -41,7 +38,6 @@ function searchOptions(
41
38
  }, 1000);
42
39
  }
43
40
 
44
-
45
41
  export class MultiSelectDemo extends React.PureComponent<IProps, IState> {
46
42
  constructor(props: IProps) {
47
43
  super(props);
@@ -68,4 +64,4 @@ export class MultiSelectDemo extends React.PureComponent<IProps, IState> {
68
64
  />
69
65
  );
70
66
  }
71
- }
67
+ }
@@ -27,9 +27,7 @@ export class Example2 extends React.PureComponent<IProps, IState> {
27
27
  super(props);
28
28
 
29
29
  this.state = {
30
- selectedRoles: [
31
- {qcode: 'writer', name: 'Writer'},
32
- ],
30
+ selectedRoles: [{qcode: 'writer', name: 'Writer'}],
33
31
  };
34
32
  }
35
33
 
@@ -48,7 +46,7 @@ export class Example2 extends React.PureComponent<IProps, IState> {
48
46
  // accessing qcodes should not cause TypeScript errors
49
47
  val.forEach((node) => {
50
48
  console.log(node.qcode);
51
- })
49
+ });
52
50
  }}
53
51
  allowMultiple={true}
54
52
  />
@@ -56,4 +54,3 @@ export class Example2 extends React.PureComponent<IProps, IState> {
56
54
  );
57
55
  }
58
56
  }
59
-
@@ -6,10 +6,8 @@ class BorderRadiusUtilitiesDoc extends React.Component {
6
6
  return (
7
7
  <section className="docs-page__container">
8
8
  <h2 className="docs-page__h2">Border Radius</h2>
9
- <p className="docs-page__paragraph">
10
- Utility classes for controlling the border radius of an element.
11
- </p>
12
- <div className='docs-page__container-block--position'>
9
+ <p className="docs-page__paragraph">Utility classes for controlling the border radius of an element.</p>
10
+ <div className="docs-page__container-block--position">
13
11
  <div className="utilities-table__container">
14
12
  <table className="table utilities-table">
15
13
  <thead>
@@ -21,36 +19,53 @@ class BorderRadiusUtilitiesDoc extends React.Component {
21
19
  <tbody>
22
20
  <tr>
23
21
  <td>radius-xs</td>
24
- <td>{'border-radius: var(--b-radius--x-small);'} <span className="doc-text--highlight">/* 2px */</span></td>
22
+ <td>
23
+ {'border-radius: var(--b-radius--x-small);'}{' '}
24
+ <span className="doc-text--highlight">/* 2px */</span>
25
+ </td>
25
26
  </tr>
26
27
  <tr>
27
28
  <td>radius-sm</td>
28
- <td>{'border-radius: var(--b-radius--small);'} <span className="doc-text--highlight">/* 3px */</span></td>
29
+ <td>
30
+ {'border-radius: var(--b-radius--small);'}{' '}
31
+ <span className="doc-text--highlight">/* 3px */</span>
32
+ </td>
29
33
  </tr>
30
34
  <tr>
31
35
  <td>radius-md</td>
32
- <td>{'border-radius: var(--b-radius--medium);'} <span className="doc-text--highlight">/* 4px */</span></td>
36
+ <td>
37
+ {'border-radius: var(--b-radius--medium);'}{' '}
38
+ <span className="doc-text--highlight">/* 4px */</span>
39
+ </td>
33
40
  </tr>
34
41
  <tr>
35
42
  <td>radius-lg</td>
36
- <td>{'border-radius: var(--b-radius--large);'} <span className="doc-text--highlight">/* 6px */</span></td>
43
+ <td>
44
+ {'border-radius: var(--b-radius--large);'}{' '}
45
+ <span className="doc-text--highlight">/* 6px */</span>
46
+ </td>
37
47
  </tr>
38
48
  <tr>
39
49
  <td>radius-xl</td>
40
- <td>{'border-radius: var(--b-radius--x-large);'} <span className="doc-text--highlight">/* 8px */</span></td>
50
+ <td>
51
+ {'border-radius: var(--b-radius--x-large);'}{' '}
52
+ <span className="doc-text--highlight">/* 8px */</span>
53
+ </td>
41
54
  </tr>
42
55
  <tr>
43
56
  <td>radius-full</td>
44
- <td>{'border-radius: var(--b-radius--full);'} <span className="doc-text--highlight">/* 9999px */</span></td>
57
+ <td>
58
+ {'border-radius: var(--b-radius--full);'}{' '}
59
+ <span className="doc-text--highlight">/* 9999px */</span>
60
+ </td>
45
61
  </tr>
46
62
  </tbody>
47
63
  </table>
48
64
  </div>
49
65
  </div>
50
-
51
66
  </section>
52
- )
67
+ );
53
68
  }
54
69
  }
55
70
 
56
- export { BorderRadiusUtilitiesDoc };
71
+ export {BorderRadiusUtilitiesDoc};