superdesk-ui-framework 3.0.1-beta.2 → 3.0.1-beta.20

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 (443) hide show
  1. package/.vscode/settings.json +5 -0
  2. package/app/fonts/sd_icons.eot +0 -0
  3. package/app/fonts/sd_icons.svg +14 -7
  4. package/app/fonts/sd_icons.ttf +0 -0
  5. package/app/fonts/sd_icons.woff +0 -0
  6. package/app/img/SD-logo.svg +52 -0
  7. package/app/scripts/toggleBoxNext.js +1 -1
  8. package/app/styles/_accessibility.scss +1 -0
  9. package/app/styles/_big-icon-font.scss +3 -0
  10. package/app/styles/_boxed-list.scss +3 -0
  11. package/app/styles/_buttons.scss +1 -1
  12. package/app/styles/_content-divider.scss +63 -8
  13. package/app/styles/_hamburger.scss +160 -0
  14. package/app/styles/_helpers.scss +35 -5
  15. package/app/styles/_icon-font.scss +19 -9
  16. package/app/styles/_master-desk.scss +3 -2
  17. package/app/styles/_modals.scss +6 -3
  18. package/app/styles/_normalize.scss +4 -0
  19. package/app/styles/_sd-tag-input.scss +221 -296
  20. package/app/styles/_simple-list.scss +1 -0
  21. package/app/styles/_table-list.scss +115 -12
  22. package/app/styles/app.scss +4 -0
  23. package/app/styles/components/_list-item.scss +36 -17
  24. package/app/styles/components/_sd-collapse-box.scss +6 -6
  25. package/app/styles/components/_sd-grid-item.scss +30 -16
  26. package/app/styles/components/_sd-notification-panel.scss +48 -0
  27. package/app/styles/components/_sd-photo-preview.scss +3 -3
  28. package/app/styles/components/_sd-searchbar.scss +7 -0
  29. package/app/styles/design-tokens/_design-tokens-general.scss +3 -6
  30. package/app/styles/design-tokens/_new-colors.scss +16 -6
  31. package/app/styles/dropdowns/_basic-dropdown.scss +6 -0
  32. package/app/styles/form-elements/_forms-general.scss +81 -7
  33. package/app/styles/form-elements/_input-wrap.scss +138 -0
  34. package/app/styles/form-elements/_inputs.scss +577 -102
  35. package/app/styles/grids/_grid-layout.scss +147 -40
  36. package/app/styles/interface-elements/_side-panel.scss +1 -1
  37. package/app/styles/layout/_basic-layout.scss +2 -2
  38. package/app/styles/layout/_editor.scss +10 -4
  39. package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
  40. package/app/styles/menus/_sd-left-navigation.scss +24 -1
  41. package/app/styles/menus/_sd-sidebar-menu.scss +10 -14
  42. package/app/styles/menus/_sd-top-menu.scss +19 -5
  43. package/app/styles/primereact/_pr-dialog.scss +1 -0
  44. package/app/styles/primereact/_pr-dropdown.scss +17 -3
  45. package/app/styles/primereact/_pr-menu.scss +6 -5
  46. package/app-typescript/components/Badge.tsx +3 -2
  47. package/app-typescript/components/ContentDivider.tsx +3 -0
  48. package/app-typescript/components/DatePicker.tsx +71 -36
  49. package/app-typescript/components/DonutChart.tsx +1 -1
  50. package/app-typescript/components/Dropdown.tsx +127 -82
  51. package/app-typescript/components/DurationInput.tsx +400 -0
  52. package/app-typescript/components/EmptyState.tsx +2 -1
  53. package/app-typescript/components/Form/FormLabel.tsx +8 -1
  54. package/app-typescript/components/Form/FormRowNew.tsx +41 -0
  55. package/app-typescript/components/Form/InputBase.tsx +95 -0
  56. package/app-typescript/components/Form/InputNew.tsx +107 -0
  57. package/app-typescript/components/Form/InputWrapper.tsx +79 -0
  58. package/app-typescript/components/Form/index.tsx +4 -0
  59. package/app-typescript/components/Icon.tsx +1 -1
  60. package/app-typescript/components/IconButton.tsx +5 -1
  61. package/app-typescript/components/Input.tsx +39 -42
  62. package/app-typescript/components/Label.tsx +49 -10
  63. package/app-typescript/components/Layouts/AuthoringContainer.tsx +2 -1
  64. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +1 -1
  65. package/app-typescript/components/Layouts/AuthoringMain.tsx +4 -2
  66. package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
  67. package/app-typescript/components/Layouts/CoreLayout.tsx +63 -0
  68. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
  69. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
  70. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +22 -0
  71. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
  72. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
  73. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
  74. package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
  75. package/app-typescript/components/Layouts/Layout.tsx +2 -2
  76. package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
  77. package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
  78. package/app-typescript/components/Layouts/index.tsx +12 -0
  79. package/app-typescript/components/LeftMenu.tsx +127 -116
  80. package/app-typescript/components/Lists/BoxedList.tsx +36 -4
  81. package/app-typescript/components/Lists/ContentList.tsx +38 -10
  82. package/app-typescript/components/Lists/TableList.tsx +283 -151
  83. package/app-typescript/components/Menu.tsx +31 -7
  84. package/app-typescript/components/Modal.tsx +5 -2
  85. package/app-typescript/components/MultiSelect.tsx +35 -5
  86. package/app-typescript/components/NavButton.tsx +4 -0
  87. package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
  88. package/app-typescript/components/SearchBar.tsx +39 -12
  89. package/app-typescript/components/Select.tsx +27 -37
  90. package/app-typescript/components/SelectGrid.tsx +1 -1
  91. package/app-typescript/components/SelectWithTemplate.tsx +32 -7
  92. package/app-typescript/components/Skeleton.tsx +1 -1
  93. package/app-typescript/components/Spacer.tsx +87 -0
  94. package/app-typescript/components/Text/Time.tsx +34 -0
  95. package/app-typescript/components/TimePicker.tsx +38 -15
  96. package/app-typescript/components/Togglebox.tsx +1 -1
  97. package/app-typescript/components/Tooltip.tsx +7 -5
  98. package/app-typescript/components/TreeSelect.tsx +490 -208
  99. package/app-typescript/components/WithSizeObserver.tsx +88 -0
  100. package/app-typescript/dist/components/Alert.d.ts +16 -0
  101. package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
  102. package/app-typescript/dist/components/Avatar.d.ts +33 -0
  103. package/app-typescript/dist/components/Badge.d.ts +13 -0
  104. package/app-typescript/dist/components/Button.d.ts +23 -0
  105. package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
  106. package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
  107. package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
  108. package/app-typescript/dist/components/Checkbox.d.ts +19 -0
  109. package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
  110. package/app-typescript/dist/components/DatePicker.d.ts +37 -0
  111. package/app-typescript/dist/components/Divider.d.ts +9 -0
  112. package/app-typescript/dist/components/DonutChart.d.ts +12 -0
  113. package/app-typescript/dist/components/Dropdown.d.ts +28 -0
  114. package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
  115. package/app-typescript/dist/components/EmptyState.d.ts +11 -0
  116. package/app-typescript/dist/components/FormLabel.d.ts +9 -0
  117. package/app-typescript/dist/components/Genie.d.ts +13 -0
  118. package/app-typescript/dist/components/GridItem.d.ts +69 -0
  119. package/app-typescript/dist/components/GridList.d.ts +14 -0
  120. package/app-typescript/dist/components/HeadingText.d.ts +10 -0
  121. package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
  122. package/app-typescript/dist/components/Icon.d.ts +12 -0
  123. package/app-typescript/dist/components/IconButton.d.ts +12 -0
  124. package/app-typescript/dist/components/IconLabel.d.ts +11 -0
  125. package/app-typescript/dist/components/Input.d.ts +24 -0
  126. package/app-typescript/dist/components/Label.d.ts +15 -0
  127. package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
  128. package/app-typescript/dist/components/Loader.d.ts +8 -0
  129. package/app-typescript/dist/components/NavButton.d.ts +15 -0
  130. package/app-typescript/dist/components/Popover.d.ts +13 -0
  131. package/app-typescript/dist/components/PropsList.d.ts +15 -0
  132. package/app-typescript/dist/components/Radio.d.ts +19 -0
  133. package/app-typescript/dist/components/RadioButton.d.ts +20 -0
  134. package/app-typescript/dist/components/Select.d.ts +29 -0
  135. package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
  136. package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
  137. package/app-typescript/dist/components/StrechBar.d.ts +4 -0
  138. package/app-typescript/dist/components/SubNav.d.ts +10 -0
  139. package/app-typescript/dist/components/Switch.d.ts +12 -0
  140. package/app-typescript/dist/components/TabCustom.d.ts +25 -0
  141. package/app-typescript/dist/components/TabList.d.ts +22 -0
  142. package/app-typescript/dist/components/Tag.d.ts +9 -0
  143. package/app-typescript/dist/components/TagInput.d.ts +7 -0
  144. package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
  145. package/app-typescript/dist/components/TimePicker.d.ts +11 -0
  146. package/app-typescript/dist/components/Tooltip.d.ts +11 -0
  147. package/app-typescript/dist/components/_Positioner.d.ts +27 -0
  148. package/app-typescript/dist/index.d.ts +56 -0
  149. package/app-typescript/helpers.tsx +3 -0
  150. package/app-typescript/index.ts +8 -1
  151. package/dist/SD-logo.svg +52 -0
  152. package/dist/examples.bundle.css +941 -8
  153. package/dist/examples.bundle.js +71435 -66878
  154. package/dist/playgrounds/accessible-theme-test.html +1 -1
  155. package/dist/playgrounds/layout-test-2.html +1 -1
  156. package/dist/playgrounds/list-item-test.html +1 -1
  157. package/dist/playgrounds/master-desk.html +1 -1
  158. package/dist/playgrounds/media-carousel.html +1 -1
  159. package/dist/playgrounds/photo-desk.html +1 -1
  160. package/dist/playgrounds/planning.html +1 -1
  161. package/dist/playgrounds/publish.html +1 -1
  162. package/dist/playgrounds/publisher-content-analytics.html +1 -1
  163. package/dist/playgrounds/publisher-content-list-automatic.html +1 -1
  164. package/dist/playgrounds/publisher-content-list-manual.html +1 -1
  165. package/dist/playgrounds/publisher-content-lists.html +1 -1
  166. package/dist/playgrounds/publisher-dashboard.html +1 -1
  167. package/dist/playgrounds/publisher-output-control.html +1 -1
  168. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +156 -0
  169. package/dist/playgrounds/react-playgrounds/Index.tsx +1 -0
  170. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +26 -23
  171. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +20 -21
  172. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
  173. package/dist/playgrounds/react-playgrounds/TestGround.tsx +415 -25
  174. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  175. package/dist/playgrounds/swimlane-view.html +1 -1
  176. package/dist/playgrounds/toasts.html +1 -1
  177. package/dist/playgrounds/video-editor.html +1 -1
  178. package/dist/react/Badges.tsx +18 -0
  179. package/dist/react/ContentDivider.tsx +22 -18
  180. package/dist/react/ContentList.tsx +200 -18
  181. package/dist/react/DatePicker.tsx +31 -6
  182. package/dist/react/Dropdowns.tsx +580 -48
  183. package/dist/react/DurationInput.tsx +108 -0
  184. package/dist/react/Index.tsx +10 -0
  185. package/dist/react/Inputs.tsx +256 -8
  186. package/dist/react/Labels.tsx +51 -1
  187. package/dist/react/LeftNavigations.tsx +71 -44
  188. package/dist/react/MultiSelect.tsx +10 -2
  189. package/dist/react/SelectWithTemplate.tsx +6 -1
  190. package/dist/react/Selects.tsx +55 -0
  191. package/dist/react/TableList.tsx +77 -186
  192. package/dist/react/TimePicker.tsx +22 -12
  193. package/dist/react/Togglebox.tsx +1 -1
  194. package/dist/react/TreeSelect.tsx +270 -48
  195. package/dist/react/WithSizeObserver.tsx +44 -0
  196. package/dist/react/tree-select/TreeSelect.tsx +273 -0
  197. package/dist/react/tree-select/example-1.tsx +71 -0
  198. package/dist/react/tree-select/example-2.tsx +59 -0
  199. package/dist/sd_icons.eot +0 -0
  200. package/dist/sd_icons.svg +14 -7
  201. package/dist/sd_icons.ttf +0 -0
  202. package/dist/sd_icons.woff +0 -0
  203. package/dist/superdesk-ui.bundle.css +4313 -629
  204. package/dist/superdesk-ui.bundle.js +75364 -60124
  205. package/dist/vendor.bundle.js +25027 -25027
  206. package/examples/index.js +4 -0
  207. package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
  208. package/examples/pages/playgrounds/layout-test-2.html +1 -1
  209. package/examples/pages/playgrounds/list-item-test.html +1 -1
  210. package/examples/pages/playgrounds/master-desk.html +1 -1
  211. package/examples/pages/playgrounds/media-carousel.html +1 -1
  212. package/examples/pages/playgrounds/photo-desk.html +1 -1
  213. package/examples/pages/playgrounds/planning.html +1 -1
  214. package/examples/pages/playgrounds/publish.html +1 -1
  215. package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
  216. package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
  217. package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
  218. package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
  219. package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
  220. package/examples/pages/playgrounds/publisher-output-control.html +1 -1
  221. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +156 -0
  222. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +1 -0
  223. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +26 -23
  224. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +20 -21
  225. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
  226. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +415 -25
  227. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  228. package/examples/pages/playgrounds/swimlane-view.html +1 -1
  229. package/examples/pages/playgrounds/toasts.html +1 -1
  230. package/examples/pages/playgrounds/video-editor.html +1 -1
  231. package/examples/pages/react/Badges.tsx +18 -0
  232. package/examples/pages/react/ContentDivider.tsx +22 -18
  233. package/examples/pages/react/ContentList.tsx +200 -18
  234. package/examples/pages/react/DatePicker.tsx +31 -6
  235. package/examples/pages/react/Dropdowns.tsx +580 -48
  236. package/examples/pages/react/DurationInput.tsx +108 -0
  237. package/examples/pages/react/Index.tsx +10 -0
  238. package/examples/pages/react/Inputs.tsx +256 -8
  239. package/examples/pages/react/Labels.tsx +51 -1
  240. package/examples/pages/react/LeftNavigations.tsx +71 -44
  241. package/examples/pages/react/MultiSelect.tsx +10 -2
  242. package/examples/pages/react/SelectWithTemplate.tsx +6 -1
  243. package/examples/pages/react/Selects.tsx +55 -0
  244. package/examples/pages/react/TableList.tsx +77 -186
  245. package/examples/pages/react/TimePicker.tsx +22 -12
  246. package/examples/pages/react/Togglebox.tsx +1 -1
  247. package/examples/pages/react/TreeSelect.tsx +270 -48
  248. package/examples/pages/react/WithSizeObserver.tsx +44 -0
  249. package/examples/pages/react/tree-select/TreeSelect.tsx +273 -0
  250. package/examples/pages/react/tree-select/example-1.tsx +71 -0
  251. package/examples/pages/react/tree-select/example-2.tsx +59 -0
  252. package/package.json +8 -8
  253. package/react/components/Alert.js +10 -8
  254. package/react/components/Autocomplete.js +16 -12
  255. package/react/components/Avatar.js +8 -6
  256. package/react/components/Badge.d.ts +1 -0
  257. package/react/components/Badge.js +9 -7
  258. package/react/components/Button.js +8 -6
  259. package/react/components/ButtonGroup.js +7 -5
  260. package/react/components/Carousel.js +4 -2
  261. package/react/components/CheckButtonGroup.js +6 -4
  262. package/react/components/CheckGroup.js +5 -3
  263. package/react/components/Checkbox.js +5 -3
  264. package/react/components/CheckboxButton.js +6 -4
  265. package/react/components/ContentDivider.d.ts +1 -0
  266. package/react/components/ContentDivider.js +10 -6
  267. package/react/components/CreateButton.js +6 -4
  268. package/react/components/DatePicker.d.ts +11 -0
  269. package/react/components/DatePicker.js +44 -35
  270. package/react/components/Divider.js +6 -4
  271. package/react/components/DonutChart.d.ts +1 -1
  272. package/react/components/DonutChart.js +24 -6
  273. package/react/components/DropZone.js +6 -4
  274. package/react/components/Dropdown.d.ts +6 -5
  275. package/react/components/Dropdown.js +63 -35
  276. package/react/components/DropdownFirst.js +18 -11
  277. package/react/components/DurationInput.d.ts +42 -0
  278. package/react/components/DurationInput.js +364 -0
  279. package/react/components/EmptyState.d.ts +1 -0
  280. package/react/components/EmptyState.js +8 -6
  281. package/react/components/Form/FormGroup.js +7 -5
  282. package/react/components/Form/FormItem.js +5 -3
  283. package/react/components/Form/FormLabel.d.ts +4 -1
  284. package/react/components/Form/FormLabel.js +13 -5
  285. package/react/components/Form/FormRow.js +5 -3
  286. package/react/components/Form/FormRowNew.d.ts +12 -0
  287. package/react/components/Form/FormRowNew.js +67 -0
  288. package/react/components/Form/FormText.js +4 -2
  289. package/react/components/Form/InputBase.d.ts +41 -0
  290. package/react/components/Form/InputBase.js +86 -0
  291. package/react/components/Form/InputNew.d.ts +45 -0
  292. package/react/components/Form/InputNew.js +75 -0
  293. package/react/components/Form/InputWrapper.d.ts +28 -0
  294. package/react/components/Form/InputWrapper.js +91 -0
  295. package/react/components/Form/index.d.ts +4 -0
  296. package/react/components/Form/index.js +9 -0
  297. package/react/components/FormLabel.js +5 -3
  298. package/react/components/GridItem.js +9 -7
  299. package/react/components/GridList.js +8 -6
  300. package/react/components/HeadingText.js +4 -2
  301. package/react/components/HelloWorld.js +4 -2
  302. package/react/components/Icon.d.ts +1 -1
  303. package/react/components/Icon.js +9 -7
  304. package/react/components/IconButton.js +8 -6
  305. package/react/components/IconLabel.js +7 -5
  306. package/react/components/IconPicker.js +13 -9
  307. package/react/components/Input.d.ts +6 -2
  308. package/react/components/Input.js +16 -31
  309. package/react/components/Label.d.ts +1 -0
  310. package/react/components/Label.js +28 -10
  311. package/react/components/Layouts/AuthorinInnerSideBar.js +4 -2
  312. package/react/components/Layouts/AuthoringContainer.d.ts +1 -0
  313. package/react/components/Layouts/AuthoringContainer.js +8 -6
  314. package/react/components/Layouts/AuthoringFrame.js +4 -2
  315. package/react/components/Layouts/AuthoringFrameContainer.js +4 -2
  316. package/react/components/Layouts/AuthoringFrameLeftBar.js +4 -2
  317. package/react/components/Layouts/AuthoringFrameMain.js +4 -2
  318. package/react/components/Layouts/AuthoringFrameNavBar.js +4 -2
  319. package/react/components/Layouts/AuthoringFrameOverlay.js +4 -2
  320. package/react/components/Layouts/AuthoringFrameRightBar.js +4 -2
  321. package/react/components/Layouts/AuthoringFrameSidePanel.js +5 -3
  322. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +5 -3
  323. package/react/components/Layouts/AuthoringInnerBody.js +4 -2
  324. package/react/components/Layouts/AuthoringInnerHeader.js +7 -5
  325. package/react/components/Layouts/AuthoringMain.js +5 -3
  326. package/react/components/Layouts/AuthoringMainContainer.js +4 -2
  327. package/react/components/Layouts/AuthoringMainContent.js +4 -2
  328. package/react/components/Layouts/AuthoringMainToolBar.js +5 -3
  329. package/react/components/Layouts/BottomBarAction.d.ts +12 -0
  330. package/react/components/Layouts/BottomBarAction.js +59 -0
  331. package/react/components/Layouts/Container.js +9 -7
  332. package/react/components/Layouts/ContentSplitter.js +6 -4
  333. package/react/components/Layouts/CoreLayout.d.ts +20 -0
  334. package/react/components/Layouts/CoreLayout.js +55 -0
  335. package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
  336. package/react/components/Layouts/CoreLayoutContainer.js +49 -0
  337. package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
  338. package/react/components/Layouts/CoreLayoutFooter.js +49 -0
  339. package/react/components/Layouts/CoreLayoutMain.d.ts +10 -0
  340. package/react/components/Layouts/CoreLayoutMain.js +56 -0
  341. package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
  342. package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
  343. package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
  344. package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
  345. package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
  346. package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
  347. package/react/components/Layouts/HamburgerButton.d.ts +14 -0
  348. package/react/components/Layouts/HamburgerButton.js +63 -0
  349. package/react/components/Layouts/HeaderPanel.js +4 -2
  350. package/react/components/Layouts/Layout.js +4 -3
  351. package/react/components/Layouts/LayoutContainer.js +4 -2
  352. package/react/components/Layouts/LeftPanel.js +5 -3
  353. package/react/components/Layouts/MainMenu.d.ts +41 -0
  354. package/react/components/Layouts/MainMenu.js +103 -0
  355. package/react/components/Layouts/MainPanel.js +5 -3
  356. package/react/components/Layouts/NotificationPanel.d.ts +45 -0
  357. package/react/components/Layouts/NotificationPanel.js +110 -0
  358. package/react/components/Layouts/OverlayPanel.js +4 -2
  359. package/react/components/Layouts/PageLayout.js +4 -2
  360. package/react/components/Layouts/Panel.js +16 -14
  361. package/react/components/Layouts/RightPanel.js +4 -2
  362. package/react/components/Layouts/index.d.ts +11 -0
  363. package/react/components/Layouts/index.js +23 -0
  364. package/react/components/LeftMenu.d.ts +5 -1
  365. package/react/components/LeftMenu.js +27 -13
  366. package/react/components/ListItemLoader.js +4 -2
  367. package/react/components/Lists/BoxedList.d.ts +6 -0
  368. package/react/components/Lists/BoxedList.js +36 -15
  369. package/react/components/Lists/ContentList.d.ts +50 -0
  370. package/react/components/Lists/ContentList.js +106 -0
  371. package/react/components/Lists/SimpleList.js +9 -7
  372. package/react/components/Lists/TableList.d.ts +62 -0
  373. package/react/components/Lists/TableList.js +208 -0
  374. package/react/components/Lists/index.js +1 -0
  375. package/react/components/Loader.js +4 -2
  376. package/react/components/Menu.d.ts +2 -1
  377. package/react/components/Menu.js +48 -12
  378. package/react/components/Modal.d.ts +2 -1
  379. package/react/components/Modal.js +30 -9
  380. package/react/components/NavButton.d.ts +1 -0
  381. package/react/components/NavButton.js +9 -4
  382. package/react/components/Navigation/BottomNav.d.ts +24 -0
  383. package/react/components/Navigation/BottomNav.js +88 -0
  384. package/react/components/Navigation/QuickNavBar.js +13 -9
  385. package/react/components/Navigation/SideBarMenu.js +4 -2
  386. package/react/components/Navigation/SideBarTabs.js +4 -2
  387. package/react/components/Navigation/index.js +1 -0
  388. package/react/components/Popover.js +4 -2
  389. package/react/components/PropsList.js +4 -2
  390. package/react/components/RadioButtonGroup.js +9 -7
  391. package/react/components/RadioGroup.js +6 -4
  392. package/react/components/SearchBar.d.ts +3 -2
  393. package/react/components/SearchBar.js +34 -8
  394. package/react/components/Select.d.ts +5 -1
  395. package/react/components/Select.js +9 -23
  396. package/react/components/SelectGrid.d.ts +1 -1
  397. package/react/components/SelectGrid.js +44 -23
  398. package/react/components/SelectWithTemplate.d.ts +11 -1
  399. package/react/components/SelectWithTemplate.js +23 -12
  400. package/react/components/Skeleton.d.ts +1 -1
  401. package/react/components/Skeleton.js +26 -5
  402. package/react/components/SlidingToolbar.js +6 -4
  403. package/react/components/Spinner.js +6 -4
  404. package/react/components/StrechBar.js +4 -2
  405. package/react/components/SubNav.js +9 -7
  406. package/react/components/Switch.js +6 -4
  407. package/react/components/SwitchGroup.js +5 -3
  408. package/react/components/TabCustom.js +11 -7
  409. package/react/components/TabList.js +6 -4
  410. package/react/components/Tag.js +5 -4
  411. package/react/components/TagInput.js +7 -6
  412. package/react/components/TagInputTest.js +13 -9
  413. package/react/components/Text/Heading.js +10 -8
  414. package/react/components/Text/Text.js +10 -8
  415. package/react/components/Text/Time.d.ts +15 -0
  416. package/react/components/Text/Time.js +65 -0
  417. package/react/components/ThemeSelector.js +7 -5
  418. package/react/components/TimePicker.d.ts +11 -1
  419. package/react/components/TimePicker.js +14 -5
  420. package/react/components/Toast.js +1 -1
  421. package/react/components/ToastMessage.js +6 -5
  422. package/react/components/ToastText.js +1 -1
  423. package/react/components/ToastWrapper.d.ts +2 -2
  424. package/react/components/ToastWrapper.js +14 -10
  425. package/react/components/Togglebox.d.ts +1 -1
  426. package/react/components/Togglebox.js +36 -15
  427. package/react/components/Tooltip.d.ts +1 -0
  428. package/react/components/Tooltip.js +14 -10
  429. package/react/components/TreeSelect.d.ts +80 -0
  430. package/react/components/TreeSelect.js +494 -0
  431. package/react/components/WithSizeObserver.d.ts +25 -0
  432. package/react/components/WithSizeObserver.js +95 -0
  433. package/react/components/_Positioner.js +4 -2
  434. package/react/helpers.d.ts +1 -0
  435. package/react/helpers.js +7 -0
  436. package/react/index.d.ts +8 -0
  437. package/react/index.js +20 -2
  438. package/yarn-error.log +111 -0
  439. package/patches/@superdesk+primereact+5.0.2-4.patch +0 -13
  440. package/sd_icons.eot +0 -0
  441. package/sd_icons.svg +0 -189
  442. package/sd_icons.ttf +0 -0
  443. package/sd_icons.woff +0 -0
package/dist/react/Dropdowns.tsx CHANGED
@@ -67,27 +67,460 @@ export default class DropdownDoc extends React.Component {
67
67
  <p className='docs-page__paragraph'>Add prop value <code>append = true</code> to the dropdown element to append to the inner dropdown menu to the body. This is useful when the dropdown button is inside a div with overflow: hidden, and the menu would otherwise be hidden.</p>
68
68
  <Markup.ReactMarkup>
69
69
  <Markup.ReactMarkupPreview>
70
- <Dropdown
71
- append={true}
72
- items={[
73
- {
74
- type: 'group', label: 'actions', items: [
75
- 'divider',
76
- { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
77
- { label: 'Copy', icon: 'copy', onSelect: () => 1 },
78
- { label: 'Delete', icon: 'trash', onSelect: () => 1 },
79
- 'divider',
80
- ]
81
- },
82
- {
83
- type: 'group', label: 'actions 2', items: [
84
- { label: 'Download', icon: 'download', onSelect: () => 1 },
85
- { label: 'Print', icon: 'print', onSelect: () => 1 },
86
- ]
87
- }
88
- ]}>
89
- Drop append to body
90
- </Dropdown>
70
+ <Dropdown
71
+ append={true}
72
+ header={[
73
+ {
74
+ type: 'group',
75
+ label: 'Create new',
76
+ items: [
77
+ {
78
+ type: 'submenu',
79
+ label: 'Rundown',
80
+ icon: 'plus-sign',
81
+ items: [
82
+ {
83
+ type: 'submenu',
84
+ label: 'Show 1',
85
+ icon: 'plus-sign',
86
+ items: [
87
+ {
88
+ type: 'submenu',
89
+ label: 'Show 1',
90
+ icon: 'plus-sign',
91
+ items: []
92
+ }
93
+ ],
94
+ },
95
+ {
96
+ type: 'submenu',
97
+ label: 'Show 2',
98
+ icon: 'plus-sign',
99
+
100
+ items: [
101
+
102
+ ],
103
+ },
104
+ ],
105
+ },
106
+ ],
107
+ },
108
+ ]}
109
+ items={[
110
+ {
111
+ type: 'group',
112
+ label: 'Create new',
113
+ items: [
114
+ {
115
+ type: 'submenu',
116
+ label: 'Rundown',
117
+ icon: 'plus-sign',
118
+
119
+ items: [
120
+ {
121
+ type: 'submenu',
122
+ label: 'Show 1',
123
+ icon: 'plus-sign',
124
+ items: [
125
+
126
+ ],
127
+ },
128
+ {
129
+ type: 'submenu',
130
+ label: 'Show 2',
131
+ icon: 'plus-sign',
132
+ items: [
133
+
134
+ ],
135
+ },
136
+ ],
137
+ },
138
+ {
139
+ type: 'submenu',
140
+ label: 'Rundown',
141
+ icon: 'plus-sign',
142
+
143
+ items: [
144
+ {
145
+ type: 'submenu',
146
+ label: 'Show 1',
147
+ icon: 'plus-sign',
148
+ items: [
149
+
150
+ ],
151
+ },
152
+ {
153
+ type: 'submenu',
154
+ label: 'Show 2',
155
+ icon: 'plus-sign',
156
+ items: [
157
+
158
+ ],
159
+ },
160
+ ],
161
+ },
162
+ {
163
+ type: 'submenu',
164
+ label: 'Rundown',
165
+ icon: 'plus-sign',
166
+
167
+ items: [
168
+ {
169
+ type: 'submenu',
170
+ label: 'Show 1',
171
+ icon: 'plus-sign',
172
+ items: [
173
+
174
+ ],
175
+ },
176
+ {
177
+ type: 'submenu',
178
+ label: 'Show 2',
179
+ icon: 'plus-sign',
180
+ items: [
181
+
182
+ ],
183
+ },
184
+ ],
185
+ },
186
+ {
187
+ type: 'submenu',
188
+ label: 'Rundown',
189
+ icon: 'plus-sign',
190
+
191
+ items: [
192
+ {
193
+ type: 'submenu',
194
+ label: 'Show 1',
195
+ icon: 'plus-sign',
196
+ items: [
197
+
198
+ ],
199
+ },
200
+ {
201
+ type: 'submenu',
202
+ label: 'Show 2',
203
+ icon: 'plus-sign',
204
+ items: [
205
+
206
+ ],
207
+ },
208
+ ],
209
+ },
210
+ {
211
+ type: 'submenu',
212
+ label: 'Rundown',
213
+ icon: 'plus-sign',
214
+
215
+ items: [
216
+ {
217
+ type: 'submenu',
218
+ label: 'Show 1',
219
+ icon: 'plus-sign',
220
+ items: [
221
+
222
+ ],
223
+ },
224
+ {
225
+ type: 'submenu',
226
+ label: 'Show 2',
227
+ icon: 'plus-sign',
228
+ items: [
229
+
230
+ ],
231
+ },
232
+ ],
233
+ },
234
+ {
235
+ type: 'submenu',
236
+ label: 'Rundown',
237
+ icon: 'plus-sign',
238
+
239
+ items: [
240
+ {
241
+ type: 'submenu',
242
+ label: 'Show 1',
243
+ icon: 'plus-sign',
244
+ items: [
245
+
246
+ ],
247
+ },
248
+ {
249
+ type: 'submenu',
250
+ label: 'Show 2',
251
+ icon: 'plus-sign',
252
+ items: [
253
+
254
+ ],
255
+ },
256
+ ],
257
+ },
258
+ {
259
+ type: 'submenu',
260
+ label: 'Rundown',
261
+ icon: 'plus-sign',
262
+
263
+ items: [
264
+ {
265
+ type: 'submenu',
266
+ label: 'Show 1',
267
+ icon: 'plus-sign',
268
+ items: [
269
+
270
+ ],
271
+ },
272
+ {
273
+ type: 'submenu',
274
+ label: 'Show 2',
275
+ icon: 'plus-sign',
276
+ items: [
277
+
278
+ ],
279
+ },
280
+ ],
281
+ },
282
+ {
283
+ type: 'submenu',
284
+ label: 'Rundown',
285
+ icon: 'plus-sign',
286
+
287
+ items: [
288
+ {
289
+ type: 'submenu',
290
+ label: 'Show 1',
291
+ icon: 'plus-sign',
292
+ items: [
293
+
294
+ ],
295
+ },
296
+ {
297
+ type: 'submenu',
298
+ label: 'Show 2',
299
+ icon: 'plus-sign',
300
+ items: [
301
+
302
+ ],
303
+ },
304
+ ],
305
+ },
306
+ {
307
+ type: 'submenu',
308
+ label: 'Rundown',
309
+ icon: 'plus-sign',
310
+
311
+ items: [
312
+ {
313
+ type: 'submenu',
314
+ label: 'Show 1',
315
+ icon: 'plus-sign',
316
+ items: [
317
+
318
+ ],
319
+ },
320
+ {
321
+ type: 'submenu',
322
+ label: 'Show 2',
323
+ icon: 'plus-sign',
324
+ items: [
325
+
326
+ ],
327
+ },
328
+ ],
329
+ },
330
+ {
331
+ type: 'submenu',
332
+ label: 'Rundown',
333
+ icon: 'plus-sign',
334
+
335
+ items: [
336
+ {
337
+ type: 'submenu',
338
+ label: 'Show 1',
339
+ icon: 'plus-sign',
340
+ items: [
341
+
342
+ ],
343
+ },
344
+ {
345
+ type: 'submenu',
346
+ label: 'Show 2',
347
+ icon: 'plus-sign',
348
+ items: [
349
+
350
+ ],
351
+ },
352
+ ],
353
+ },
354
+ {
355
+ type: 'submenu',
356
+ label: 'Rundown',
357
+ icon: 'plus-sign',
358
+
359
+ items: [
360
+ {
361
+ type: 'submenu',
362
+ label: 'Show 1',
363
+ icon: 'plus-sign',
364
+ items: [
365
+
366
+ ],
367
+ },
368
+ {
369
+ type: 'submenu',
370
+ label: 'Show 2',
371
+ icon: 'plus-sign',
372
+ items: [
373
+
374
+ ],
375
+ },
376
+ ],
377
+ },
378
+ {
379
+ type: 'submenu',
380
+ label: 'Rundown',
381
+ icon: 'plus-sign',
382
+
383
+ items: [
384
+ {
385
+ type: 'submenu',
386
+ label: 'Show 1',
387
+ icon: 'plus-sign',
388
+ items: [
389
+
390
+ ],
391
+ },
392
+ {
393
+ type: 'submenu',
394
+ label: 'Show 2',
395
+ icon: 'plus-sign',
396
+ items: [
397
+
398
+ ],
399
+ },
400
+ ],
401
+ },
402
+ {
403
+ type: 'submenu',
404
+ label: 'Rundown',
405
+ icon: 'plus-sign',
406
+
407
+ items: [
408
+ {
409
+ type: 'submenu',
410
+ label: 'Show 1',
411
+ icon: 'plus-sign',
412
+ items: [
413
+
414
+ ],
415
+ },
416
+ {
417
+ type: 'submenu',
418
+ label: 'Show 2',
419
+ icon: 'plus-sign',
420
+ items: [
421
+
422
+ ],
423
+ },
424
+ ],
425
+ },
426
+ {
427
+ type: 'submenu',
428
+ label: 'Rundown',
429
+ icon: 'plus-sign',
430
+
431
+ items: [
432
+ {
433
+ type: 'submenu',
434
+ label: 'Show 1',
435
+ icon: 'plus-sign',
436
+
437
+ items: [
438
+
439
+ ],
440
+ },
441
+ {
442
+ type: 'submenu',
443
+ label: 'Show 2',
444
+ icon: 'plus-sign',
445
+ items: [
446
+
447
+ ],
448
+ },
449
+ ],
450
+ },
451
+ {
452
+ type: 'submenu',
453
+ label: 'Rundown',
454
+ icon: 'plus-sign',
455
+
456
+ items: [
457
+ {
458
+ type: 'submenu',
459
+ label: 'Show 1',
460
+ icon: 'plus-sign',
461
+ items: [
462
+
463
+ ],
464
+ },
465
+ {
466
+ type: 'submenu',
467
+ label: 'Show 2',
468
+ icon: 'plus-sign',
469
+ items: [
470
+
471
+ ],
472
+ },
473
+ ],
474
+ },
475
+
476
+
477
+
478
+ ],
479
+ },
480
+ ]}
481
+ footer={[
482
+ {
483
+ type: 'group',
484
+ items: [
485
+ {
486
+ icon: 'rundown',
487
+ label: 'Create new Show',
488
+ onSelect: () => console.log('aaa'),
489
+ },
490
+ ],
491
+ },
492
+ {
493
+ type: 'group',
494
+ label: 'Create new',
495
+ items: [
496
+ {
497
+ type: 'submenu',
498
+ label: 'Rundown',
499
+ icon: 'plus-sign',
500
+ items: [
501
+ {
502
+ type: 'submenu',
503
+ label: 'Show 1',
504
+ icon: 'plus-sign',
505
+ items: [
506
+
507
+ ],
508
+ },
509
+ {
510
+ type: 'submenu',
511
+ label: 'Show 2',
512
+ icon: 'plus-sign',
513
+ items: [
514
+
515
+ ],
516
+ },
517
+ ],
518
+ },
519
+ ],
520
+ },
521
+ ]}
522
+ >
523
+ </Dropdown>
91
524
  </Markup.ReactMarkupPreview>
92
525
  <Markup.ReactMarkupCode>{`
93
526
  <Dropdown
@@ -110,7 +543,7 @@ export default class DropdownDoc extends React.Component {
110
543
  The submenu opens by default on the right side of the parent menu.</p>
111
544
  <Markup.ReactMarkup>
112
545
  <Markup.ReactMarkupPreview>
113
- <Dropdown
546
+ <Dropdown
114
547
  items={[
115
548
  {
116
549
  type: 'group', label: 'actions', items: [
@@ -207,8 +640,8 @@ export default class DropdownDoc extends React.Component {
207
640
  <SubNav zIndex={1} color='darker'>
208
641
  <h3 className="subnav__page-title">Subnav title</h3>
209
642
  <Dropdown
210
- align='right'
211
- items={[
643
+ //align='right'
644
+ header={[
212
645
  {
213
646
  type: 'group', label: 'actions', items: [
214
647
  'divider',
@@ -225,7 +658,39 @@ export default class DropdownDoc extends React.Component {
225
658
  { label: 'Action 3', onSelect: () => 1 },
226
659
  { label: 'Action 4', onSelect: () => 1 },
227
660
  ]
228
- }]}>
661
+ }
662
+ ]}
663
+ items={[
664
+ // {
665
+ // type: 'group', label: 'actions', items: [
666
+ // 'divider',
667
+ // { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
668
+ // { label: 'Copy', icon: 'copy', onSelect: () => 1 },
669
+ // { label: 'Delete', icon: 'trash', onSelect: () => 1 },
670
+ // 'divider',
671
+ // ]
672
+ // },
673
+ // {
674
+ // type: 'submenu', label: 'Second level actions', icon: 'star', items: [
675
+ // { label: 'Action 1', onSelect: () => 1 },
676
+ // { label: 'Action 2', onSelect: () => 1 },
677
+ // { label: 'Action 3', onSelect: () => 1 },
678
+ // { label: 'Action 4', onSelect: () => 1 },
679
+ // ]
680
+ // }
681
+ ]}
682
+ footer={[
683
+
684
+ {
685
+ type: 'submenu', label: 'Second level actions', icon: 'star', items: [
686
+ { label: 'Action 1', onSelect: () => 1 },
687
+ { label: 'Action 2', onSelect: () => 1 },
688
+ { label: 'Action 3', onSelect: () => 1 },
689
+ { label: 'Action 4', onSelect: () => 1 },
690
+ ]
691
+ }
692
+ ]}
693
+ >
229
694
  <button className='sd-navbtn'>
230
695
  <i className="icon-dots-vertical"></i>
231
696
  </button>
@@ -270,42 +735,109 @@ export default class DropdownDoc extends React.Component {
270
735
  <SubNav zIndex={1} color='darker'>
271
736
  <h3 className="subnav__page-title">Subnav title</h3>
272
737
  <Dropdown
273
- align='right'
738
+ append={true}
274
739
  header={[
275
740
  {
276
- type: 'group', label: 'header actions', items: [
277
- { label: 'Header action one', icon: 'download', onSelect: () => 1 },
278
- { label: 'Header action two', icon: 'trash', onSelect: () => 1 },
279
- ]
741
+ type: 'group',
742
+ label: 'Create new',
743
+ items: [
744
+ {
745
+ type: 'submenu',
746
+ label: 'Rundown',
747
+ icon: 'plus-sign',
748
+ items: [
749
+ {
750
+ type: 'submenu',
751
+ label: 'Show 1',
752
+ icon: 'plus-sign',
753
+ items: [
754
+ {
755
+ type: 'submenu',
756
+ label: 'Show 1',
757
+ items:[]
758
+ }
759
+ ],
760
+ },
761
+ {
762
+ type: 'submenu',
763
+ label: 'Show 2',
764
+ icon: 'plus-sign',
765
+ items: [
766
+
767
+ ],
768
+ },
769
+ ],
770
+ },
771
+ ],
280
772
  },
281
773
  ]}
282
774
  items={[
283
775
  {
284
776
  type: 'group', label: 'body actions', items: [
285
- { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
286
- { label: 'Copy', icon: 'copy', onSelect: () => 1 },
287
- { label: 'Action 2', icon: 'envelope', onSelect: () => 1 },
288
- { label: 'Action 3', icon: 'heart', onSelect: () => 1 },
289
- { label: 'Action 4', icon: 'print', onSelect: () => 1 },
290
- { label: 'Action 5', icon: 'plus-sign', onSelect: () => 1 },
291
- { label: 'Action 6', icon: 'minus-sign', onSelect: () => 1 },
292
- { label: 'Action 7', icon: 'refresh', onSelect: () => 1 },
293
- { label: 'Action 8', icon: 'pick', onSelect: () => 1 },
294
- { label: 'Action 9', icon: 'bell', onSelect: () => 1 },
295
- { label: 'Action 10', icon: 'kill', onSelect: () => 1 },
296
- { label: 'Action 11', icon: 'settings', onSelect: () => 1 },
297
- { label: 'Action 12', icon: 'cut', onSelect: () => 1 },
777
+ {
778
+ type: 'group',
779
+ label: 'Create new',
780
+ items: [
781
+ {
782
+ type: 'submenu',
783
+ label: 'Rundown',
784
+ icon: 'plus-sign',
785
+ items: [
786
+ {
787
+ type: 'submenu',
788
+ label: 'Show 1',
789
+ icon: 'plus-sign',
790
+ items: [
791
+
792
+ ],
793
+ },
794
+ {
795
+ type: 'submenu',
796
+ label: 'Show 2',
797
+ icon: 'plus-sign',
798
+ items: [
799
+
800
+ ],
801
+ },
802
+ ],
803
+ },
804
+ ],
805
+ },
298
806
  ]
299
807
  },
300
808
  ]}
301
809
  footer={[
302
810
  {
303
- type: 'group', label: 'footer actions', items: [
304
- { label: 'Create gallery', icon: 'slideshow', onSelect: () => 1 },
305
- { label: 'Create package', icon: 'composite', onSelect: () => 1 },
306
- ]
811
+ type: 'group',
812
+ label: 'Create new',
813
+ items: [
814
+ {
815
+ type: 'submenu',
816
+ label: 'Rundown',
817
+ icon: 'plus-sign',
818
+ items: [
819
+ {
820
+ type: 'submenu',
821
+ label: 'Show 1',
822
+ icon: 'plus-sign',
823
+ items: [
824
+
825
+ ],
826
+ },
827
+ {
828
+ type: 'submenu',
829
+ label: 'Show 2',
830
+ icon: 'plus-sign',
831
+ items: [
832
+
833
+ ],
834
+ },
835
+ ],
836
+ },
837
+ ],
307
838
  },
308
- ]}>
839
+ ]}
840
+ >
309
841
  <button className='sd-navbtn'>
310
842
  <i className="icon-dots-vertical"></i>
311
843
  </button>