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
@@ -1,6 +1,6 @@
1
- import * as React from "react";
2
- import classNames from "classnames";
3
- import Scrollspy from "react-scrollspy";
1
+ import * as React from 'react';
2
+ import classNames from 'classnames';
3
+ import Scrollspy from 'react-scrollspy';
4
4
 
5
5
  interface IMenuItem {
6
6
  id: string;
@@ -24,8 +24,8 @@ interface IMenu {
24
24
  scrollSpy?: string;
25
25
  offset?: number;
26
26
  reverseItemBorder?: boolean;
27
- style?: "default" | "inverse" | "blanc";
28
- size?: "medium" | "large";
27
+ style?: 'default' | 'inverse' | 'blanc';
28
+ size?: 'medium' | 'large';
29
29
  onSelect(id: string, route: string): void;
30
30
  }
31
31
 
@@ -50,37 +50,31 @@ export class LeftMenu extends React.PureComponent<IMenu, IState> {
50
50
  });
51
51
 
52
52
  if (item.ref) {
53
- return document
54
- .getElementById(item.ref)
55
- ?.scrollIntoView({ block: "nearest", behavior: "smooth" });
53
+ return document.getElementById(item.ref)?.scrollIntoView({block: 'nearest', behavior: 'smooth'});
56
54
  }
57
55
 
58
56
  if (item.onClick) {
59
57
  return item.onClick();
60
58
  }
61
59
 
62
- this.props.onSelect(item.id, item.route ? item.route : "");
60
+ this.props.onSelect(item.id, item.route ? item.route : '');
63
61
  }
64
62
 
65
63
  componentDidMount() {
66
64
  if (this.props.scrollTo) {
67
- return document
68
- .getElementById(this.props.scrollTo)
69
- ?.scrollIntoView({ block: "nearest", behavior: "smooth" });
65
+ return document.getElementById(this.props.scrollTo)?.scrollIntoView({block: 'nearest', behavior: 'smooth'});
70
66
  }
71
67
  }
72
68
 
73
69
  render() {
74
70
  let classes = classNames(
75
- "sd-left-nav",
71
+ 'sd-left-nav',
76
72
  {
77
- "sd-left-nav--default": this.props.style === undefined,
78
- [`sd-left-nav--${this.props.style}`]:
79
- this.props.style || this.props.style !== undefined,
80
- "sd-left-nav--medium": this.props.size === undefined,
81
- [`sd-left-nav--${this.props.size}`]:
82
- this.props.size || this.props.size !== undefined,
83
- "sd-left-nav--reverse-border": this.props.reverseItemBorder,
73
+ 'sd-left-nav--default': this.props.style === undefined,
74
+ [`sd-left-nav--${this.props.style}`]: this.props.style || this.props.style !== undefined,
75
+ 'sd-left-nav--medium': this.props.size === undefined,
76
+ [`sd-left-nav--${this.props.size}`]: this.props.size || this.props.size !== undefined,
77
+ 'sd-left-nav--reverse-border': this.props.reverseItemBorder,
84
78
  },
85
79
  this.props.className,
86
80
  );
@@ -91,32 +85,35 @@ export class LeftMenu extends React.PureComponent<IMenu, IState> {
91
85
  this.props.groups.map((element, index) => {
92
86
  scrollSpyList = [...scrollSpyList, element.label];
93
87
  scrollSpyItems.push(
94
- <span className="sd-left-nav__group-header" key={"group-" + index}>
88
+ <span className="sd-left-nav__group-header" key={'group-' + index}>
95
89
  {element.label}
96
90
  </span>,
97
91
  );
98
92
 
99
93
  element.items.map((elementOfItem, indexOfItem) => {
100
- scrollSpyList = [...scrollSpyList, `${elementOfItem.ref}`];
101
-
102
- scrollSpyItems.push(
103
- <a key={"item-" + indexOfItem}
104
- onClick={(event) => {
105
- this.handleClick(elementOfItem, event);
106
- }}
107
- className="sd-left-nav__btn" >
108
- {elementOfItem.label}
109
- </a>,
110
- );
94
+ scrollSpyList = [...scrollSpyList, `${elementOfItem.ref}`];
95
+
96
+ scrollSpyItems.push(
97
+ <a
98
+ key={'item-' + indexOfItem}
99
+ onClick={(event) => {
100
+ this.handleClick(elementOfItem, event);
101
+ }}
102
+ className="sd-left-nav__btn"
103
+ >
104
+ {elementOfItem.label}
105
+ </a>,
106
+ );
111
107
  });
112
108
  });
113
109
 
114
110
  return (
115
111
  <Scrollspy
116
- offset={this.props.offset ? this.props.offset : -300}
117
- items={scrollSpyList}
118
- rootEl={this.props.scrollSpy}
119
- currentClassName="sd-left-nav__btn--active" >
112
+ offset={this.props.offset ? this.props.offset : -300}
113
+ items={scrollSpyList}
114
+ rootEl={this.props.scrollSpy}
115
+ currentClassName="sd-left-nav__btn--active"
116
+ >
120
117
  {scrollSpyItems.map((element) => element)}
121
118
  </Scrollspy>
122
119
  );
@@ -126,23 +123,24 @@ export class LeftMenu extends React.PureComponent<IMenu, IState> {
126
123
  return this.props.groups.map((group, i) => {
127
124
  return (
128
125
  <React.Fragment key={i}>
129
- <span className="sd-left-nav__group-header">{group.label}</span>
130
- {group.items.map((item, j) => {
131
- return (
132
- <button
133
- key={j}
134
- onClick={(event) => {
135
- this.handleClick(item, event);
136
- }}
137
- className={
138
- item.id === this.state.active
139
- ? "sd-left-nav__btn sd-left-nav__btn--active"
140
- : "sd-left-nav__btn"
141
- }>
142
- {item.label}
143
- </button>
144
- );
145
- })}
126
+ <span className="sd-left-nav__group-header">{group.label}</span>
127
+ {group.items.map((item, j) => {
128
+ return (
129
+ <button
130
+ key={j}
131
+ onClick={(event) => {
132
+ this.handleClick(item, event);
133
+ }}
134
+ className={
135
+ item.id === this.state.active
136
+ ? 'sd-left-nav__btn sd-left-nav__btn--active'
137
+ : 'sd-left-nav__btn'
138
+ }
139
+ >
140
+ {item.label}
141
+ </button>
142
+ );
143
+ })}
146
144
  </React.Fragment>
147
145
  );
148
146
  });
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { Skeleton } from './Skeleton';
2
+ import {Skeleton} from './Skeleton';
3
3
 
4
4
  export class ListItemLoader extends React.Component<{}> {
5
5
  render() {
@@ -3,41 +3,25 @@ import classNames from 'classnames';
3
3
 
4
4
  class BoxedListMedia extends React.PureComponent {
5
5
  render() {
6
- return (
7
- <div className='boxed-list__item-media'>
8
- {this.props.children}
9
- </div>
10
- );
6
+ return <div className="boxed-list__item-media">{this.props.children}</div>;
11
7
  }
12
8
  }
13
9
 
14
10
  class BoxedListContent extends React.PureComponent {
15
11
  render() {
16
- return (
17
- <div className='boxed-list__item-content'>
18
- {this.props.children}
19
- </div>
20
- );
12
+ return <div className="boxed-list__item-content">{this.props.children}</div>;
21
13
  }
22
14
  }
23
15
 
24
16
  class BoxedListContentRow extends React.PureComponent {
25
17
  render() {
26
- return (
27
- <div className='boxed-list__item-content-row'>
28
- {this.props.children}
29
- </div>
30
- );
18
+ return <div className="boxed-list__item-content-row">{this.props.children}</div>;
31
19
  }
32
20
  }
33
21
 
34
22
  class BoxedListFooter extends React.PureComponent {
35
23
  render() {
36
- return (
37
- <div className='boxed-list__item-footer'>
38
- {this.props.children}
39
- </div>
40
- );
24
+ return <div className="boxed-list__item-footer">{this.props.children}</div>;
41
25
  }
42
26
  }
43
27
 
@@ -114,22 +98,11 @@ class BoxedListItem extends React.PureComponent<IPropsItem> {
114
98
  });
115
99
  return (
116
100
  <li className={classes} onClick={this.handleClick}>
101
+ {this.props.media && <BoxedListMedia>{this.props.media}</BoxedListMedia>}
117
102
 
118
- {this.props.media && (
119
- <BoxedListMedia>
120
- {this.props.media}
121
- </BoxedListMedia>
122
- )}
103
+ <BoxedListContent>{this.props.children}</BoxedListContent>
123
104
 
124
- <BoxedListContent>
125
- {this.props.children}
126
- </BoxedListContent>
127
-
128
- {this.props.footer && (
129
- <BoxedListFooter>
130
- {this.props.footer}
131
- </BoxedListFooter>
132
- )}
105
+ {this.props.footer && <BoxedListFooter>{this.props.footer}</BoxedListFooter>}
133
106
 
134
107
  {this.props.actions && (
135
108
  <BoxedListActions
@@ -155,10 +128,14 @@ interface IProps {
155
128
 
156
129
  class BoxedList extends React.PureComponent<IProps> {
157
130
  render() {
158
- let classes = classNames('boxed-list', {
159
- 'boxed-list--compact': this.props.density === undefined,
160
- [`boxed-list--${this.props.density}`]: this.props.density || this.props.density !== undefined,
161
- }, this.props.className);
131
+ let classes = classNames(
132
+ 'boxed-list',
133
+ {
134
+ 'boxed-list--compact': this.props.density === undefined,
135
+ [`boxed-list--${this.props.density}`]: this.props.density || this.props.density !== undefined,
136
+ },
137
+ this.props.className,
138
+ );
162
139
  return (
163
140
  <ul className={classes} style={this.props.style}>
164
141
  {this.props.children}
@@ -167,6 +144,4 @@ class BoxedList extends React.PureComponent<IProps> {
167
144
  }
168
145
  }
169
146
 
170
- export {
171
- BoxedList, BoxedListItem, BoxedListContentRow, BoxedListActions, BoxedListFooter
172
- };
147
+ export {BoxedList, BoxedListItem, BoxedListContentRow, BoxedListActions, BoxedListFooter};
@@ -23,11 +23,7 @@ export class CalendarWeekDayItem extends React.PureComponent<IPropsItem> {
23
23
  [`calendar-week-day__item--${this.props.state}`]: this.props.state || this.props.state !== undefined,
24
24
  });
25
25
 
26
- return (
27
- <div className={classes}>
28
- {this.props.children}
29
- </div>
30
- );
26
+ return <div className={classes}>{this.props.children}</div>;
31
27
  }
32
28
  }
33
29
 
@@ -43,10 +39,6 @@ export class WeeklyCalendarGrid extends React.PureComponent<{style?: React.CSSPr
43
39
 
44
40
  export class WeeklyCalendarGridItem extends React.PureComponent {
45
41
  render() {
46
- return (
47
- <div className="calendar-week-day__container">
48
- {this.props.children}
49
- </div>
50
- );
42
+ return <div className="calendar-week-day__container">{this.props.children}</div>;
51
43
  }
52
44
  }
@@ -6,9 +6,9 @@ interface IPropsItem {
6
6
  action?: React.ReactNode;
7
7
  locked?: boolean;
8
8
  itemColum: Array<{
9
- itemRow: Array<{ content: any }>,
10
- border?: boolean,
11
- fullwidth?: boolean,
9
+ itemRow: Array<{content: any}>;
10
+ border?: boolean;
11
+ fullwidth?: boolean;
12
12
  }>;
13
13
  activated?: boolean;
14
14
  selected?: boolean;
@@ -30,58 +30,63 @@ class ContentListItem extends React.PureComponent<IPropsItem> {
30
30
  onActionMenuClick = (event: React.MouseEvent<HTMLElement>) => {
31
31
  event.preventDefault();
32
32
  event.stopPropagation();
33
- }
33
+ };
34
34
 
35
35
  render() {
36
36
  let classes = classNames('sd-list-item sd-shadow--z1', {
37
37
  'sd-list-item--activated': this.props.activated,
38
38
  'sd-list-item--selected': this.props.selected,
39
- 'fetched': this.props.archived,
40
- 'actioning': this.props.loading,
39
+ fetched: this.props.archived,
40
+ actioning: this.props.loading,
41
41
  });
42
42
 
43
43
  return (
44
44
  <div
45
- role='listitem'
45
+ role="listitem"
46
46
  className={classes}
47
- onClick={(e) => this.multiClickHandler(e, {
48
- onSingleClick: () => {
49
- let selection = window.getSelection();
50
- if (this.props.onClick && selection) {
51
- if (selection.toString().length < 1) {
52
- this.props.onClick();
47
+ onClick={(e) =>
48
+ this.multiClickHandler(e, {
49
+ onSingleClick: () => {
50
+ let selection = window.getSelection();
51
+ if (this.props.onClick && selection) {
52
+ if (selection.toString().length < 1) {
53
+ this.props.onClick();
54
+ }
53
55
  }
54
- }
55
- },
56
- onDoubleClick: () => {
57
- if (this.props.onDoubleClick) {
58
- this.props.onDoubleClick();
59
- }
60
- },
61
- })}
62
- >
63
- {this.props.locked
64
- ? <div className="sd-list-item__border sd-list-item__border--locked"></div>
65
- : <div className="sd-list-item__border"></div>
56
+ },
57
+ onDoubleClick: () => {
58
+ if (this.props.onDoubleClick) {
59
+ this.props.onDoubleClick();
60
+ }
61
+ },
62
+ })
66
63
  }
64
+ >
65
+ {this.props.locked ? (
66
+ <div className="sd-list-item__border sd-list-item__border--locked"></div>
67
+ ) : (
68
+ <div className="sd-list-item__border"></div>
69
+ )}
67
70
  {this.props.itemColum.map((item, index) => {
68
- return <div
69
- className={`
71
+ return (
72
+ <div
73
+ className={`
70
74
  sd-list-item__column
71
75
  ${item.fullwidth && 'sd-list-item__column--grow'}
72
- ${!item.border && 'sd-list-item__column--no-border'}`
73
- }
74
- key={index}>
75
- {item.itemRow.map((e, i) => {
76
- return (
77
- item.itemRow.length <= 1
78
- ? <React.Fragment key={i}>{e.content}</React.Fragment>
79
- : <div className="sd-list-item__row" key={i}>
76
+ ${!item.border && 'sd-list-item__column--no-border'}`}
77
+ key={index}
78
+ >
79
+ {item.itemRow.map((e, i) => {
80
+ return item.itemRow.length <= 1 ? (
81
+ <React.Fragment key={i}>{e.content}</React.Fragment>
82
+ ) : (
83
+ <div className="sd-list-item__row" key={i}>
80
84
  {e.content}
81
85
  </div>
82
- );
83
- })}
84
- </div>;
86
+ );
87
+ })}
88
+ </div>
89
+ );
85
90
  })}
86
91
  <div className="sd-list-item__action-menu" onClick={this.onActionMenuClick}>
87
92
  {this.props.action}
@@ -93,20 +98,20 @@ class ContentListItem extends React.PureComponent<IPropsItem> {
93
98
 
94
99
  interface IProps {
95
100
  items: Array<{
96
- itemColum: Array<IItemArray>,
97
- locked?: boolean,
98
- action?: React.ReactNode,
99
- loading?: boolean,
100
- activated?: boolean,
101
- selected?: boolean,
102
- archived?: boolean,
103
- onClick?(): void,
101
+ itemColum: Array<IItemArray>;
102
+ locked?: boolean;
103
+ action?: React.ReactNode;
104
+ loading?: boolean;
105
+ activated?: boolean;
106
+ selected?: boolean;
107
+ archived?: boolean;
108
+ onClick?(): void;
104
109
  onDoubleClick?(): void;
105
110
  }>;
106
111
  }
107
112
 
108
113
  interface IItemArray {
109
- itemRow: Array<{ content: React.ReactNode }>;
114
+ itemRow: Array<{content: React.ReactNode}>;
110
115
  border?: boolean;
111
116
  fullwidth?: boolean;
112
117
  }
@@ -115,25 +120,26 @@ class ContentList extends React.PureComponent<IProps> {
115
120
  render() {
116
121
  let classes = classNames('sd-list-item-group sd-list-item-group--space-between-items');
117
122
  return (
118
- <div role='list' className={classes}>
123
+ <div role="list" className={classes}>
119
124
  {this.props.items.map((item, index) => {
120
- return <ContentListItem
121
- key={index}
122
- itemColum={item.itemColum}
123
- locked={item.locked}
124
- action={item.action}
125
- loading={item.loading}
126
- activated={item.activated}
127
- selected={item.selected}
128
- archived={item.archived}
129
- onClick={item.onClick}
130
- onDoubleClick={item.onDoubleClick} />;
125
+ return (
126
+ <ContentListItem
127
+ key={index}
128
+ itemColum={item.itemColum}
129
+ locked={item.locked}
130
+ action={item.action}
131
+ loading={item.loading}
132
+ activated={item.activated}
133
+ selected={item.selected}
134
+ archived={item.archived}
135
+ onClick={item.onClick}
136
+ onDoubleClick={item.onDoubleClick}
137
+ />
138
+ );
131
139
  })}
132
140
  </div>
133
141
  );
134
142
  }
135
143
  }
136
144
 
137
- export {
138
- ContentList, ContentListItem
139
- };
145
+ export {ContentList, ContentListItem};
@@ -24,8 +24,7 @@ class SimpleListItem extends React.PureComponent<IPropsItem> {
24
24
  'simple-list__item--justify-flex-start': this.props.justify === undefined,
25
25
  [`simple-list__item--justify-${this.props.justify}`]:
26
26
  this.props.justify || this.props.justify !== undefined,
27
- [`simple-list__item--gap-${this.props.gap}`]:
28
- this.props.gap || this.props.gap !== undefined,
27
+ [`simple-list__item--gap-${this.props.gap}`]: this.props.gap || this.props.gap !== undefined,
29
28
  });
30
29
  return (
31
30
  <li className={classes} id={this.props.id || undefined}>
@@ -37,13 +36,17 @@ class SimpleListItem extends React.PureComponent<IPropsItem> {
37
36
 
38
37
  class SimpleList extends React.PureComponent<IProps> {
39
38
  render() {
40
- let classes = classNames('simple-list', {
41
- 'simple-list--compact': this.props.density === undefined,
42
- 'simple-list--dotted': this.props.border === true,
43
- [`simple-list--${this.props.density}`]: this.props.density || this.props.density !== undefined,
44
- '': this.props.width === undefined,
45
- [`simple-list--fixedW-${this.props.width}`]: this.props.width || this.props.width !== undefined,
46
- }, this.props.className);
39
+ let classes = classNames(
40
+ 'simple-list',
41
+ {
42
+ 'simple-list--compact': this.props.density === undefined,
43
+ 'simple-list--dotted': this.props.border === true,
44
+ [`simple-list--${this.props.density}`]: this.props.density || this.props.density !== undefined,
45
+ '': this.props.width === undefined,
46
+ [`simple-list--fixedW-${this.props.width}`]: this.props.width || this.props.width !== undefined,
47
+ },
48
+ this.props.className,
49
+ );
47
50
  return (
48
51
  <ul className={classes} id={this.props.id || undefined}>
49
52
  {this.props.children}
@@ -52,6 +55,4 @@ class SimpleList extends React.PureComponent<IProps> {
52
55
  }
53
56
  }
54
57
 
55
- export {
56
- SimpleList, SimpleListItem
57
- };
58
+ export {SimpleList, SimpleListItem};