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

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 (384) hide show
  1. package/.vscode/settings.json +5 -0
  2. package/app/img/SD-logo.svg +52 -0
  3. package/app/styles/_accessibility.scss +1 -0
  4. package/app/styles/_big-icon-font.scss +3 -0
  5. package/app/styles/_boxed-list.scss +3 -0
  6. package/app/styles/_hamburger.scss +160 -0
  7. package/app/styles/_helpers.scss +11 -4
  8. package/app/styles/_icon-font.scss +3 -0
  9. package/app/styles/_sd-tag-input.scss +201 -296
  10. package/app/styles/app.scss +3 -0
  11. package/app/styles/components/_list-item.scss +13 -1
  12. package/app/styles/components/_sd-notification-panel.scss +48 -0
  13. package/app/styles/components/_sd-photo-preview.scss +1 -1
  14. package/app/styles/design-tokens/_design-tokens-general.scss +2 -5
  15. package/app/styles/design-tokens/_new-colors.scss +6 -1
  16. package/app/styles/form-elements/_forms-general.scss +22 -7
  17. package/app/styles/form-elements/_inputs.scss +356 -62
  18. package/app/styles/grids/_grid-layout.scss +119 -39
  19. package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
  20. package/app/styles/menus/_sd-left-navigation.scss +24 -1
  21. package/app/styles/menus/_sd-sidebar-menu.scss +10 -14
  22. package/app/styles/menus/_sd-top-menu.scss +19 -5
  23. package/app/styles/primereact/_pr-dropdown.scss +0 -2
  24. package/app-typescript/components/Badge.tsx +3 -2
  25. package/app-typescript/components/DatePicker.tsx +71 -36
  26. package/app-typescript/components/DonutChart.tsx +1 -1
  27. package/app-typescript/components/DurationInput.tsx +328 -0
  28. package/app-typescript/components/Form/InputBase.tsx +85 -0
  29. package/app-typescript/components/Form/InputNew.tsx +107 -0
  30. package/app-typescript/components/Form/InputWrapper.tsx +79 -0
  31. package/app-typescript/components/Form/index.tsx +3 -0
  32. package/app-typescript/components/Icon.tsx +1 -1
  33. package/app-typescript/components/IconButton.tsx +5 -1
  34. package/app-typescript/components/Input.tsx +39 -42
  35. package/app-typescript/components/Label.tsx +49 -10
  36. package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
  37. package/app-typescript/components/Layouts/CoreLayout.tsx +62 -0
  38. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
  39. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
  40. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +16 -0
  41. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
  42. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
  43. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
  44. package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
  45. package/app-typescript/components/Layouts/Layout.tsx +2 -2
  46. package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
  47. package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
  48. package/app-typescript/components/Layouts/index.tsx +12 -0
  49. package/app-typescript/components/LeftMenu.tsx +6 -0
  50. package/app-typescript/components/Lists/BoxedList.tsx +36 -4
  51. package/app-typescript/components/Lists/ContentList.tsx +4 -4
  52. package/app-typescript/components/Menu.tsx +31 -7
  53. package/app-typescript/components/Modal.tsx +5 -2
  54. package/app-typescript/components/MultiSelect.tsx +35 -5
  55. package/app-typescript/components/NavButton.tsx +4 -0
  56. package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
  57. package/app-typescript/components/Select.tsx +27 -37
  58. package/app-typescript/components/SelectGrid.tsx +1 -1
  59. package/app-typescript/components/SelectWithTemplate.tsx +32 -7
  60. package/app-typescript/components/Skeleton.tsx +1 -1
  61. package/app-typescript/components/Text/Time.tsx +34 -0
  62. package/app-typescript/components/TimePicker.tsx +48 -16
  63. package/app-typescript/components/Togglebox.tsx +1 -1
  64. package/app-typescript/components/Tooltip.tsx +7 -5
  65. package/app-typescript/components/TreeSelect.tsx +423 -195
  66. package/app-typescript/components/WithSizeObserver.tsx +88 -0
  67. package/app-typescript/dist/components/Alert.d.ts +16 -0
  68. package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
  69. package/app-typescript/dist/components/Avatar.d.ts +33 -0
  70. package/app-typescript/dist/components/Badge.d.ts +13 -0
  71. package/app-typescript/dist/components/Button.d.ts +23 -0
  72. package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
  73. package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
  74. package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
  75. package/app-typescript/dist/components/Checkbox.d.ts +19 -0
  76. package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
  77. package/app-typescript/dist/components/DatePicker.d.ts +37 -0
  78. package/app-typescript/dist/components/Divider.d.ts +9 -0
  79. package/app-typescript/dist/components/DonutChart.d.ts +12 -0
  80. package/app-typescript/dist/components/Dropdown.d.ts +28 -0
  81. package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
  82. package/app-typescript/dist/components/EmptyState.d.ts +11 -0
  83. package/app-typescript/dist/components/FormLabel.d.ts +9 -0
  84. package/app-typescript/dist/components/Genie.d.ts +13 -0
  85. package/app-typescript/dist/components/GridItem.d.ts +69 -0
  86. package/app-typescript/dist/components/GridList.d.ts +14 -0
  87. package/app-typescript/dist/components/HeadingText.d.ts +10 -0
  88. package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
  89. package/app-typescript/dist/components/Icon.d.ts +12 -0
  90. package/app-typescript/dist/components/IconButton.d.ts +12 -0
  91. package/app-typescript/dist/components/IconLabel.d.ts +11 -0
  92. package/app-typescript/dist/components/Input.d.ts +24 -0
  93. package/app-typescript/dist/components/Label.d.ts +15 -0
  94. package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
  95. package/app-typescript/dist/components/Loader.d.ts +8 -0
  96. package/app-typescript/dist/components/NavButton.d.ts +15 -0
  97. package/app-typescript/dist/components/Popover.d.ts +13 -0
  98. package/app-typescript/dist/components/PropsList.d.ts +15 -0
  99. package/app-typescript/dist/components/Radio.d.ts +19 -0
  100. package/app-typescript/dist/components/RadioButton.d.ts +20 -0
  101. package/app-typescript/dist/components/Select.d.ts +29 -0
  102. package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
  103. package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
  104. package/app-typescript/dist/components/StrechBar.d.ts +4 -0
  105. package/app-typescript/dist/components/SubNav.d.ts +10 -0
  106. package/app-typescript/dist/components/Switch.d.ts +12 -0
  107. package/app-typescript/dist/components/TabCustom.d.ts +25 -0
  108. package/app-typescript/dist/components/TabList.d.ts +22 -0
  109. package/app-typescript/dist/components/Tag.d.ts +9 -0
  110. package/app-typescript/dist/components/TagInput.d.ts +7 -0
  111. package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
  112. package/app-typescript/dist/components/TimePicker.d.ts +11 -0
  113. package/app-typescript/dist/components/Tooltip.d.ts +11 -0
  114. package/app-typescript/dist/components/_Positioner.d.ts +27 -0
  115. package/app-typescript/dist/index.d.ts +56 -0
  116. package/app-typescript/helpers.tsx +3 -0
  117. package/app-typescript/index.ts +6 -1
  118. package/dist/SD-logo.svg +52 -0
  119. package/dist/examples.bundle.css +660 -0
  120. package/dist/examples.bundle.js +44468 -41459
  121. package/dist/playgrounds/accessible-theme-test.html +1 -1
  122. package/dist/playgrounds/layout-test-2.html +1 -1
  123. package/dist/playgrounds/list-item-test.html +1 -1
  124. package/dist/playgrounds/master-desk.html +1 -1
  125. package/dist/playgrounds/media-carousel.html +1 -1
  126. package/dist/playgrounds/photo-desk.html +1 -1
  127. package/dist/playgrounds/planning.html +1 -1
  128. package/dist/playgrounds/publish.html +1 -1
  129. package/dist/playgrounds/publisher-content-analytics.html +1 -1
  130. package/dist/playgrounds/publisher-content-list-automatic.html +1 -1
  131. package/dist/playgrounds/publisher-content-list-manual.html +1 -1
  132. package/dist/playgrounds/publisher-content-lists.html +1 -1
  133. package/dist/playgrounds/publisher-dashboard.html +1 -1
  134. package/dist/playgrounds/publisher-output-control.html +1 -1
  135. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +155 -0
  136. package/dist/playgrounds/react-playgrounds/Index.tsx +1 -0
  137. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +24 -16
  138. package/dist/playgrounds/react-playgrounds/TestGround.tsx +112 -1
  139. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  140. package/dist/playgrounds/swimlane-view.html +1 -1
  141. package/dist/playgrounds/toasts.html +1 -1
  142. package/dist/playgrounds/video-editor.html +1 -1
  143. package/dist/react/Badges.tsx +18 -0
  144. package/dist/react/ContentList.tsx +15 -9
  145. package/dist/react/DatePicker.tsx +31 -6
  146. package/dist/react/DurationInput.tsx +104 -0
  147. package/dist/react/Index.tsx +10 -0
  148. package/dist/react/Inputs.tsx +262 -8
  149. package/dist/react/Labels.tsx +51 -1
  150. package/dist/react/MultiSelect.tsx +9 -1
  151. package/dist/react/SelectWithTemplate.tsx +6 -1
  152. package/dist/react/Selects.tsx +55 -0
  153. package/dist/react/TableList.tsx +22 -44
  154. package/dist/react/TimePicker.tsx +16 -8
  155. package/dist/react/TreeSelect.tsx +301 -48
  156. package/dist/react/WithSizeObserver.tsx +44 -0
  157. package/dist/react/tree-select/TreeSelect.tsx +273 -0
  158. package/dist/react/tree-select/example-1.tsx +71 -0
  159. package/dist/react/tree-select/example-2.tsx +59 -0
  160. package/dist/superdesk-ui.bundle.css +2761 -450
  161. package/dist/superdesk-ui.bundle.js +42992 -40401
  162. package/dist/vendor.bundle.js +25027 -25027
  163. package/examples/index.js +4 -0
  164. package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
  165. package/examples/pages/playgrounds/layout-test-2.html +1 -1
  166. package/examples/pages/playgrounds/list-item-test.html +1 -1
  167. package/examples/pages/playgrounds/master-desk.html +1 -1
  168. package/examples/pages/playgrounds/media-carousel.html +1 -1
  169. package/examples/pages/playgrounds/photo-desk.html +1 -1
  170. package/examples/pages/playgrounds/planning.html +1 -1
  171. package/examples/pages/playgrounds/publish.html +1 -1
  172. package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
  173. package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
  174. package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
  175. package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
  176. package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
  177. package/examples/pages/playgrounds/publisher-output-control.html +1 -1
  178. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +155 -0
  179. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +1 -0
  180. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +24 -16
  181. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +112 -1
  182. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  183. package/examples/pages/playgrounds/swimlane-view.html +1 -1
  184. package/examples/pages/playgrounds/toasts.html +1 -1
  185. package/examples/pages/playgrounds/video-editor.html +1 -1
  186. package/examples/pages/react/Badges.tsx +18 -0
  187. package/examples/pages/react/ContentList.tsx +15 -9
  188. package/examples/pages/react/DatePicker.tsx +31 -6
  189. package/examples/pages/react/DurationInput.tsx +104 -0
  190. package/examples/pages/react/Index.tsx +10 -0
  191. package/examples/pages/react/Inputs.tsx +262 -8
  192. package/examples/pages/react/Labels.tsx +51 -1
  193. package/examples/pages/react/MultiSelect.tsx +9 -1
  194. package/examples/pages/react/SelectWithTemplate.tsx +6 -1
  195. package/examples/pages/react/Selects.tsx +55 -0
  196. package/examples/pages/react/TableList.tsx +22 -44
  197. package/examples/pages/react/TimePicker.tsx +16 -8
  198. package/examples/pages/react/TreeSelect.tsx +301 -48
  199. package/examples/pages/react/WithSizeObserver.tsx +44 -0
  200. package/examples/pages/react/tree-select/TreeSelect.tsx +273 -0
  201. package/examples/pages/react/tree-select/example-1.tsx +71 -0
  202. package/examples/pages/react/tree-select/example-2.tsx +59 -0
  203. package/package.json +5 -4
  204. package/patches/@superdesk+primereact+5.0.2-4.patch +53 -0
  205. package/react/components/Alert.js +10 -8
  206. package/react/components/Autocomplete.js +16 -12
  207. package/react/components/Avatar.js +8 -6
  208. package/react/components/Badge.d.ts +1 -0
  209. package/react/components/Badge.js +9 -7
  210. package/react/components/Button.js +8 -6
  211. package/react/components/ButtonGroup.js +7 -5
  212. package/react/components/Carousel.js +4 -2
  213. package/react/components/CheckButtonGroup.js +6 -4
  214. package/react/components/CheckGroup.js +5 -3
  215. package/react/components/Checkbox.js +5 -3
  216. package/react/components/CheckboxButton.js +6 -4
  217. package/react/components/ContentDivider.js +8 -6
  218. package/react/components/CreateButton.js +6 -4
  219. package/react/components/DatePicker.d.ts +11 -0
  220. package/react/components/DatePicker.js +44 -35
  221. package/react/components/Divider.js +6 -4
  222. package/react/components/DonutChart.d.ts +1 -1
  223. package/react/components/DonutChart.js +24 -6
  224. package/react/components/DropZone.js +6 -4
  225. package/react/components/Dropdown.js +7 -6
  226. package/react/components/DropdownFirst.js +18 -11
  227. package/react/components/DurationInput.d.ts +41 -0
  228. package/react/components/DurationInput.js +289 -0
  229. package/react/components/EmptyState.js +7 -5
  230. package/react/components/Form/FormGroup.js +7 -5
  231. package/react/components/Form/FormItem.js +5 -3
  232. package/react/components/Form/FormLabel.js +5 -3
  233. package/react/components/Form/FormRow.js +5 -3
  234. package/react/components/Form/FormText.js +4 -2
  235. package/react/components/Form/InputBase.d.ts +42 -0
  236. package/react/components/Form/InputBase.js +72 -0
  237. package/react/components/Form/InputNew.d.ts +45 -0
  238. package/react/components/Form/InputNew.js +75 -0
  239. package/react/components/Form/InputWrapper.d.ts +28 -0
  240. package/react/components/Form/InputWrapper.js +91 -0
  241. package/react/components/Form/index.d.ts +3 -0
  242. package/react/components/Form/index.js +7 -0
  243. package/react/components/FormLabel.js +5 -3
  244. package/react/components/GridItem.js +9 -7
  245. package/react/components/GridList.js +8 -6
  246. package/react/components/HeadingText.js +4 -2
  247. package/react/components/HelloWorld.js +4 -2
  248. package/react/components/Icon.d.ts +1 -1
  249. package/react/components/Icon.js +9 -7
  250. package/react/components/IconButton.js +8 -6
  251. package/react/components/IconLabel.js +7 -5
  252. package/react/components/IconPicker.js +13 -9
  253. package/react/components/Input.d.ts +6 -2
  254. package/react/components/Input.js +16 -31
  255. package/react/components/Label.d.ts +1 -0
  256. package/react/components/Label.js +28 -10
  257. package/react/components/Layouts/AuthorinInnerSideBar.js +4 -2
  258. package/react/components/Layouts/AuthoringContainer.js +7 -5
  259. package/react/components/Layouts/AuthoringFrame.js +4 -2
  260. package/react/components/Layouts/AuthoringFrameContainer.js +4 -2
  261. package/react/components/Layouts/AuthoringFrameLeftBar.js +4 -2
  262. package/react/components/Layouts/AuthoringFrameMain.js +4 -2
  263. package/react/components/Layouts/AuthoringFrameNavBar.js +4 -2
  264. package/react/components/Layouts/AuthoringFrameOverlay.js +4 -2
  265. package/react/components/Layouts/AuthoringFrameRightBar.js +4 -2
  266. package/react/components/Layouts/AuthoringFrameSidePanel.js +5 -3
  267. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +5 -3
  268. package/react/components/Layouts/AuthoringInnerBody.js +4 -2
  269. package/react/components/Layouts/AuthoringInnerHeader.js +6 -4
  270. package/react/components/Layouts/AuthoringMain.js +4 -2
  271. package/react/components/Layouts/AuthoringMainContainer.js +4 -2
  272. package/react/components/Layouts/AuthoringMainContent.js +4 -2
  273. package/react/components/Layouts/AuthoringMainToolBar.js +5 -3
  274. package/react/components/Layouts/BottomBarAction.d.ts +12 -0
  275. package/react/components/Layouts/BottomBarAction.js +59 -0
  276. package/react/components/Layouts/Container.js +9 -7
  277. package/react/components/Layouts/ContentSplitter.js +6 -4
  278. package/react/components/Layouts/CoreLayout.d.ts +19 -0
  279. package/react/components/Layouts/CoreLayout.js +55 -0
  280. package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
  281. package/react/components/Layouts/CoreLayoutContainer.js +49 -0
  282. package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
  283. package/react/components/Layouts/CoreLayoutFooter.js +49 -0
  284. package/react/components/Layouts/CoreLayoutMain.d.ts +9 -0
  285. package/react/components/Layouts/CoreLayoutMain.js +49 -0
  286. package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
  287. package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
  288. package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
  289. package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
  290. package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
  291. package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
  292. package/react/components/Layouts/HamburgerButton.d.ts +14 -0
  293. package/react/components/Layouts/HamburgerButton.js +63 -0
  294. package/react/components/Layouts/HeaderPanel.js +4 -2
  295. package/react/components/Layouts/Layout.js +4 -3
  296. package/react/components/Layouts/LayoutContainer.js +4 -2
  297. package/react/components/Layouts/LeftPanel.js +5 -3
  298. package/react/components/Layouts/MainMenu.d.ts +41 -0
  299. package/react/components/Layouts/MainMenu.js +103 -0
  300. package/react/components/Layouts/MainPanel.js +5 -3
  301. package/react/components/Layouts/NotificationPanel.d.ts +45 -0
  302. package/react/components/Layouts/NotificationPanel.js +110 -0
  303. package/react/components/Layouts/OverlayPanel.js +4 -2
  304. package/react/components/Layouts/PageLayout.js +4 -2
  305. package/react/components/Layouts/Panel.js +16 -14
  306. package/react/components/Layouts/RightPanel.js +4 -2
  307. package/react/components/Layouts/index.d.ts +11 -0
  308. package/react/components/Layouts/index.js +23 -0
  309. package/react/components/LeftMenu.d.ts +2 -0
  310. package/react/components/LeftMenu.js +19 -12
  311. package/react/components/ListItemLoader.js +4 -2
  312. package/react/components/Lists/BoxedList.d.ts +6 -0
  313. package/react/components/Lists/BoxedList.js +36 -15
  314. package/react/components/Lists/ContentList.d.ts +45 -0
  315. package/react/components/Lists/ContentList.js +85 -0
  316. package/react/components/Lists/SimpleList.js +9 -7
  317. package/react/components/Lists/index.js +1 -0
  318. package/react/components/Loader.js +4 -2
  319. package/react/components/Menu.d.ts +2 -1
  320. package/react/components/Menu.js +48 -12
  321. package/react/components/Modal.d.ts +2 -1
  322. package/react/components/Modal.js +30 -9
  323. package/react/components/NavButton.d.ts +1 -0
  324. package/react/components/NavButton.js +9 -4
  325. package/react/components/Navigation/BottomNav.d.ts +24 -0
  326. package/react/components/Navigation/BottomNav.js +88 -0
  327. package/react/components/Navigation/QuickNavBar.js +13 -9
  328. package/react/components/Navigation/SideBarMenu.js +4 -2
  329. package/react/components/Navigation/SideBarTabs.js +4 -2
  330. package/react/components/Navigation/index.js +1 -0
  331. package/react/components/Popover.js +4 -2
  332. package/react/components/PropsList.js +4 -2
  333. package/react/components/RadioButtonGroup.js +9 -7
  334. package/react/components/RadioGroup.js +6 -4
  335. package/react/components/SearchBar.js +6 -4
  336. package/react/components/Select.d.ts +5 -1
  337. package/react/components/Select.js +9 -23
  338. package/react/components/SelectGrid.d.ts +1 -1
  339. package/react/components/SelectGrid.js +44 -23
  340. package/react/components/SelectWithTemplate.d.ts +11 -1
  341. package/react/components/SelectWithTemplate.js +23 -12
  342. package/react/components/Skeleton.d.ts +1 -1
  343. package/react/components/Skeleton.js +26 -5
  344. package/react/components/SlidingToolbar.js +6 -4
  345. package/react/components/Spinner.js +6 -4
  346. package/react/components/StrechBar.js +4 -2
  347. package/react/components/SubNav.js +9 -7
  348. package/react/components/Switch.js +6 -4
  349. package/react/components/SwitchGroup.js +5 -3
  350. package/react/components/TabCustom.js +11 -7
  351. package/react/components/TabList.js +6 -4
  352. package/react/components/Tag.js +5 -4
  353. package/react/components/TagInput.js +7 -6
  354. package/react/components/TagInputTest.js +13 -9
  355. package/react/components/Text/Heading.js +10 -8
  356. package/react/components/Text/Text.js +10 -8
  357. package/react/components/Text/Time.d.ts +15 -0
  358. package/react/components/Text/Time.js +65 -0
  359. package/react/components/ThemeSelector.js +7 -5
  360. package/react/components/TimePicker.d.ts +15 -2
  361. package/react/components/TimePicker.js +19 -6
  362. package/react/components/Toast.js +1 -1
  363. package/react/components/ToastMessage.js +6 -5
  364. package/react/components/ToastText.js +1 -1
  365. package/react/components/ToastWrapper.d.ts +2 -2
  366. package/react/components/ToastWrapper.js +14 -10
  367. package/react/components/Togglebox.d.ts +1 -1
  368. package/react/components/Togglebox.js +36 -15
  369. package/react/components/Tooltip.d.ts +1 -0
  370. package/react/components/Tooltip.js +14 -10
  371. package/react/components/TreeSelect.d.ts +75 -0
  372. package/react/components/TreeSelect.js +448 -0
  373. package/react/components/WithSizeObserver.d.ts +25 -0
  374. package/react/components/WithSizeObserver.js +95 -0
  375. package/react/components/_Positioner.js +4 -2
  376. package/react/helpers.d.ts +1 -0
  377. package/react/helpers.js +7 -0
  378. package/react/index.d.ts +6 -0
  379. package/react/index.js +15 -2
  380. package/yarn-error.log +111 -0
  381. package/sd_icons.eot +0 -0
  382. package/sd_icons.svg +0 -189
  383. package/sd_icons.ttf +0 -0
  384. package/sd_icons.woff +0 -0
@@ -40,17 +40,45 @@
40
40
  background-color: var(--sd-colour-panel-bg--100);
41
41
  overflow: auto;
42
42
  }
43
- .bottom-bar {
44
- height:3rem;
45
- background-color: var(--sd-colour-bottom-bar);
43
+ .bottom-bar,
44
+ .sd-bottom-bar {
46
45
  grid-column: 2/3;
47
46
  grid-row: 4/5;
48
- z-index: 2;
49
- display: flex;
50
- align-items: center;
51
- flex-direction: row;
52
- color: rgba(255, 255, 255, 0.75);
53
- padding: 0 10px;
47
+ }
48
+ }
49
+
50
+ .bottom-bar,
51
+ .sd-bottom-bar {
52
+ min-height:3.2rem;
53
+ background-color: var(--sd-colour-bottom-bar);
54
+ z-index: 2;
55
+ display: flex;
56
+ align-items: center;
57
+ display: grid;
58
+ grid-template-rows: auto;
59
+ grid-template-columns: $sd-sidebarMenu-width 1fr auto auto;
60
+ color: hsla(0, 0%, 100%, 0.75);
61
+ }
62
+ .sd-bottom-bar__action {
63
+ height: 100%;
64
+ display: flex;
65
+ align-items: center;
66
+ justify-content: center;
67
+ width: $sd-sidebarMenu-width;
68
+ text-align: center;
69
+ padding: 0;
70
+ background-color: var(--sd-colour-top-menu__btn);
71
+ transition: all 0.2s ease;
72
+ &:hover {
73
+ background-color: hsl(0, 0%, 0%);
74
+ cursor: pointer;
75
+ }
76
+ &:active {
77
+ background-color: var(--sd-colour-interactive);
78
+ }
79
+ &--disabled {
80
+ pointer-events: none !important;
81
+ opacity: 0.3;
54
82
  }
55
83
  }
56
84
 
@@ -571,20 +599,6 @@ $planningEditor-width: 53rem;
571
599
  }
572
600
  }
573
601
 
574
- // DARK UI ---------------------------------------------
575
- //------------------------------------------------------
576
-
577
- // .dark-ui,
578
- // [class^="--dark-ui"],
579
- // [class*="--dark-ui"] {
580
- // .sd-filters-panel {
581
- // background-color: $sd-filters-darkUI-bg;
582
- // }
583
- // }
584
-
585
-
586
-
587
-
588
602
  // GRID LAYOUT TEST ------------------------------------------------------------------------------------------------------------------------
589
603
  //------------------------------------------------------------------------------------------------------------------------------------------
590
604
 
@@ -746,17 +760,16 @@ $planningEditor-width: 53rem;
746
760
  .sd-page-grid, .sd-page-grid--test {
747
761
  margin: 0;
748
762
  display: grid;
749
- grid-template-columns: [slideInNavigation] auto [contentContainer] 1fr;
763
+ grid-template-columns: [slideInNavigation] auto [contentContainer] 1fr [notificationPanel] 0;
750
764
  grid-template-rows: [mainToolbar] 4.8rem [contentContainer] 1fr [footerBar] auto;
751
765
  grid-gap: 0;
752
766
  height: 100vh;
753
767
  position: relative;
754
- //background-color: aquamarine;
755
768
 
756
769
  .sd-main-menu {
757
770
  grid-column: slideInNavigation;
758
771
  grid-row: 1/-1;
759
- background-color: #272727;
772
+ background-color: hsla(214, 13%, 16%, 1);
760
773
  display: grid;
761
774
  grid-template-columns: 1fr;
762
775
  grid-template-rows: 1fr;
@@ -769,14 +782,81 @@ $planningEditor-width: 53rem;
769
782
  overflow: hidden;
770
783
  transition: opacity ease-in-out 0.2s, width ease-in-out 0.1s;
771
784
  opacity: 0;
772
- box-shadow: inset -8px 0px 12px -4px rgba(0, 0, 0, 0.6);
773
785
  }
786
+ .sd-main-menu__navigation {
787
+ display: grid;
788
+ grid-template-columns: 1fr;
789
+ grid-template-rows: [mainMenuHeader] $nav-height [mainMenuContent] 1fr [mainMenuFooter] auto;
790
+ width: 0;
791
+ overflow: hidden;
792
+ transition: opacity ease-in-out 0.2s, width ease-in-out 0.1s;
793
+ opacity: 0;
794
+ box-shadow: inset -8px 0px 12px -4px rgba(0, 0, 0, 0.4), inset -1px 0px 0 0 hsla(214, 13%, 90%, 0.24);
795
+ }
796
+ .sd-main-menu__header {
797
+ display: flex;
798
+ align-items: center;
799
+ box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.4);
800
+ border-bottom: 1px solid hsla(214, 13%, 60%, 0.08);
801
+ }
802
+ .sd-main-menu__title {
803
+ font-size: 1.6rem;
804
+ font-weight: 300;
805
+ opacity: 0.65;
806
+ padding-left: 2.4rem;
807
+ }
808
+ .sd-main-menu__content {
809
+ overflow-y: auto;
810
+ }
811
+ .sd-main-menu__footer {
812
+ display: flex;
813
+ flex-direction: column;
814
+ align-items: stretch;
815
+ justify-content: center;
816
+ box-shadow: 0 -2px 3px hsla(0, 0%, 0%, 0.24);
817
+ border-top: 1px solid hsla(214, 13%, 60%, 0.08);
818
+ .sd-main-menu__footer-logo {
819
+ display: flex;
820
+ align-items: center;
821
+ border-top: 1px solid hsla(214, 13%, 60%, 0.08);
822
+ background: url(../img/SD-logo.svg) no-repeat center;
823
+ height: 7.6rem;
824
+ }
825
+ .sd-main-menu__footer-info {
826
+ display: flex;
827
+ align-items: center;
828
+ justify-content: center;
829
+ text-align: center;
830
+ font-size: 10px;
831
+ font-weight: 300;
832
+ letter-spacing: 0.05em;
833
+ padding: 6px 0 6px;
834
+ opacity: 0.5;
835
+ }
836
+ .sd-main-menu__footer-content {
837
+ display: flex;
838
+ align-items: center;
839
+ justify-content: center;
840
+ text-align: center;
841
+ font-size: 12px;
842
+ padding: 8px 0 8px;
843
+ opacity: 0.85;
844
+ height: 3.2rem;
845
+ border-top: 1px solid hsla(214, 13%, 60%, 0.08);
846
+ background-color: hsla(214, 13%, 6%, 0.24);
847
+ }
848
+ }
849
+
774
850
  &.sd-main-menu--open {
775
- .sd-main-menu__inner {
851
+ .sd-main-menu__inner,
852
+ .sd-main-menu__navigation {
776
853
  width: 30rem;
777
854
  opacity: 1;
778
855
  }
779
856
  }
857
+ .sd-left-nav {
858
+ width: 100%;
859
+ }
780
860
  }
781
861
  .sd-top-menu {
782
862
  grid-column: contentContainer;
@@ -790,22 +870,22 @@ $planningEditor-width: 53rem;
790
870
  z-index: 1;
791
871
  overflow: auto;
792
872
  background-color: var(--sd-colour-panel-bg--100);
793
-
794
- }
795
- .bottom-bar {
873
+ }
874
+ .sd-notifications-slot {
875
+ grid-column: notificationPanel;
876
+ grid-row: contentContainer;
877
+ z-index: 2;
878
+ position: relative;
879
+ width: 0;
880
+ }
881
+ .bottom-bar,
882
+ .sd-bottom-bar {
796
883
  grid-column: contentContainer;
797
884
  grid-row: footerBar;
798
- height:3rem;
799
- background-color: var(--sd-colour-bottom-bar);
800
- z-index: 2;
801
- display: flex;
802
- align-items: center;
803
- flex-direction: row;
804
- color: rgba(255, 255, 255, 0.75);
805
- padding: 0 10px;
806
885
  }
807
886
  }
808
887
 
888
+
809
889
  // EDITOR 3 Layout ======================================= //
810
890
  .sd-authoring-page {
811
891
  display: grid;
@@ -0,0 +1,70 @@
1
+ .sd-bottom-nav-list {
2
+ display: flex;
3
+ flex-grow: 1;
4
+ flex-shrink: 1;
5
+ flex-direction: row;
6
+ justify-content: flex-start;
7
+ align-items: center;
8
+ min-height: 3.2rem;
9
+ overflow-x: auto;
10
+ grid-column: 2/3;
11
+ .sd-bottom-nav-list__item {
12
+ flex: 0 1 24rem;
13
+ display: flex;
14
+ flex-direction: row;
15
+ justify-content: center;
16
+ align-items: center;
17
+ height: 3.2rem;
18
+ padding: 0 0.8rem 0 1.6rem;
19
+ gap: 0.8rem;
20
+ border-inline-end: 1px solid hsla(214, 13%, 90%, 0.14);
21
+ background-color: var(--sd-colour-bottom-bar__item);
22
+ overflow: hidden;
23
+ .sd-bottom-nav-list__item-title {
24
+ font-size: 1.4rem;
25
+ line-height: 1;
26
+ color: hsla(214, 13%, 80%, 1);
27
+ overflow: hidden;
28
+ text-overflow: ellipsis;
29
+ white-space: nowrap;
30
+ display: flex;
31
+ flex: 1 1;
32
+ align-self: stretch;
33
+ align-items: center;
34
+ gap: 8px;
35
+ &:hover {
36
+ color: var(--sd-colour-interactive);
37
+ cursor: pointer;
38
+ }
39
+ [class^="icon-"],
40
+ [class*=" icon-"] {
41
+ flex-shrink: 0;
42
+ color: inherit !important;
43
+ opacity: 0.75;
44
+ }
45
+ span {
46
+ padding-top: 2px;
47
+ overflow: hidden;
48
+ text-overflow: ellipsis;
49
+ white-space: nowrap;
50
+ display: flex;
51
+ display: inline-block;
52
+ flex-shrink: 1;
53
+ }
54
+ }
55
+ &--active {
56
+ background-color: var(--sd-colour-bottom-bar__item--active);
57
+ .sd-bottom-nav-list__item-title,
58
+ .sd-bottom-nav-list__item-title:hover {
59
+ color: hsla(214, 13%, 98%, 1);
60
+ }
61
+ }
62
+ &--disabled {
63
+ opacity: 0.5;
64
+ pointer-events: none;
65
+ .sd-bottom-nav-list__item-title {
66
+ pointer-events: none;
67
+ }
68
+ }
69
+ }
70
+ }
@@ -4,6 +4,7 @@
4
4
  $sd-leftNav-bgColor: var(--sd-colour-background__left-nav);
5
5
  $sd-leftNav-borderColor: var(--sd-colour-line--light);
6
6
  $sd-leftNav-width: 24rem;
7
+ $sd-leftNav-width-large: 32rem;
7
8
 
8
9
  $sd-leftNavBtn-bgColor: transparent;
9
10
  $sd-leftNavBtn-bgHoverColor: $sd-colour-background__menu-item--hover;
@@ -33,9 +34,31 @@ $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
33
34
  &--blanc {
34
35
  border-color: transparent;
35
36
  background: transparent;
37
+ border-right-width: 0;
36
38
  .sd-left-nav__group-header {
37
39
  border-top-color: transparent;
38
40
  }
41
+ }
42
+ &--large {
43
+ width: $sd-leftNav-width-large;
44
+ max-width: 100%;
45
+ .sd-left-nav__group-header {
46
+ padding-inline: 2.4rem 0;
47
+ }
48
+ .sd-left-nav__btn {
49
+ padding-inline: 4rem 0;
50
+ }
51
+ }
52
+ &--reverse-border {
53
+ .sd-left-nav__btn {
54
+ border-inline-end: none;
55
+ border-inline-start: $sd-leftNavBtn-border;
56
+
57
+ &--active {
58
+ border-inline-end: none;
59
+ border-inline-start: $sd-leftNavBtn-borderActive;
60
+ }
61
+ }
39
62
  }
40
63
  }
41
64
 
@@ -75,7 +98,7 @@ $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
75
98
  line-height: 100%;
76
99
  text-transform: uppercase;
77
100
  letter-spacing: 0.1em;
78
- color: var(--color-text-light);
101
+ color: var(--color-text-lighter);
79
102
  padding-block-start: 2.6rem;
80
103
  padding-block-end: 0.9rem;
81
104
  padding-inline: 1.6rem 0;
@@ -141,7 +141,9 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
141
141
  }
142
142
 
143
143
  .sd-sidetab-menu__btn {
144
- display:block;
144
+ display: flex;
145
+ align-items: center;
146
+ justify-content: center;
145
147
  position: relative;
146
148
  width: 100%;
147
149
  height: $sd-sidebarMenu-width;
@@ -161,8 +163,8 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
161
163
  .sd-sidetab-menu__main-icon {
162
164
  color: $sd-text-light;
163
165
  position: absolute;
164
- top: 10px;
165
- left: 10px;
166
+ inset-block-start: 1rem;
167
+ inset-inline-start: 1rem;
166
168
  display: flex;
167
169
  align-items: center;
168
170
  justify-content: center;
@@ -170,25 +172,19 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
170
172
  color: $sd-text-light;
171
173
  }
172
174
  }
173
- .sd-sidetab-menu__helper-icon {
175
+
176
+ .sd-sidetab-menu__helper-icon,
177
+ i.sd-sidetab-menu__helper-icon {
174
178
  opacity: 0;
175
179
  margin: 0;
176
- left: 1.2rem;
180
+ inset-block-start: 1.2rem;
181
+ inset-inline-start: 1.2rem;
177
182
  width: 2.4rem;
178
183
  height: 2.4rem;
179
184
  font-size: 2.4rem;
180
185
  line-height: 2.4rem;
181
186
  z-index: 2;
182
187
  transition: all 0.4s 0s, transform 0.3s 0s;
183
- i {
184
- opacity: 0;
185
- margin: 0;
186
- width: 2.4rem;
187
- height: 2.4rem;
188
- font-size: 2.4rem;
189
- line-height: 2.4rem;
190
- transition: all 0.4s 0s, transform 0.3s 0s;
191
- }
192
188
  }
193
189
  .sd-sidetab-menu__main-icon,
194
190
  .sd-sidetab-menu__main-icon i {
@@ -17,19 +17,33 @@ $sd-topMenu-background: var(--sd-colour-top-menu);
17
17
  }
18
18
 
19
19
  .sd-top-menu__collapse-nav {
20
- display: inline-block;
21
20
  height: $nav-height;
22
- line-height: $nav-height + 3;
21
+ display: flex;
22
+ align-items: center;
23
+ justify-content: center;
23
24
  width: $sd-sidebarMenu-width;
24
25
  text-align: center;
25
26
  padding: 0;
26
27
  background-color: var(--sd-colour-top-menu__btn);
27
- box-shadow: 2px 0 5px 0 rgba(0,0,0,.35);
28
+ box-shadow: 2px 0 5px 0 hsla(0, 0%, 0%, 0.35);
28
29
  position: relative;
30
+ transition: all 0.3s ease;
29
31
  &:hover {
30
- background: #000;
32
+ background-color: hsl(0, 0%, 0%);
31
33
  cursor: pointer;
32
34
  }
35
+ &.is-active {
36
+ margin-inline-start: -$sd-sidebarMenu-width;
37
+ background-color: hsla(0, 0%, 0%, 0.02);
38
+ box-shadow: none;
39
+ &:hover {
40
+ background-color: hsla(0, 0%, 0%, 0.24);
41
+ }
42
+ }
43
+ &--disabled {
44
+ pointer-events: none !important;
45
+ opacity: 0.5;
46
+ }
33
47
  }
34
48
  .sd-top-menu__header {
35
49
  display: inline-block;
@@ -38,7 +52,7 @@ $sd-topMenu-background: var(--sd-colour-top-menu);
38
52
  font-size: 1.5rem;
39
53
  text-align: center;
40
54
  padding: 0 2rem;
41
- color: #aaa;
55
+ color: hsl(214, 13%, 75%);
42
56
  margin: 0;
43
57
  }
44
58
 
@@ -71,8 +71,6 @@
71
71
  .p-multiselect-label {
72
72
  display: flex;
73
73
  align-items: center;
74
- justify-content: center;
75
-
76
74
  }
77
75
 
78
76
  .p-multiselect-token {
@@ -6,6 +6,7 @@ interface IProps {
6
6
  color?: string; // https://ui-framework.superdesk.org/#/components/colors
7
7
  shape?: 'round' | 'square'; // defaults to 'round'
8
8
  children?: React.ReactNode;
9
+ hexColor?: string;
9
10
  'data-test-id'?: string;
10
11
  }
11
12
 
@@ -21,11 +22,11 @@ export class Badge extends React.PureComponent<IProps> {
21
22
  return (
22
23
  <div className='element-with-badge' data-test-id={this.props['data-test-id']}>
23
24
  {this.props.children}
24
- <span className={classes} data-test-id="badge-content">{this.props.text}</span>
25
+ <span className={classes} style={{backgroundColor: this.props.hexColor}} data-test-id="badge-content">{this.props.text}</span>
25
26
  </div>
26
27
  );
27
28
  } else {
28
- return <span className={classes} data-test-id={this.props['data-test-id']}>{this.props.text}</span>;
29
+ return <span className={classes} style={{backgroundColor: this.props.hexColor}} data-test-id={this.props['data-test-id']}>{this.props.text}</span>;
29
30
  }
30
31
  }
31
32
  }
@@ -3,6 +3,9 @@ import addDays from 'date-fns/addDays';
3
3
  import format from 'date-fns/format';
4
4
  import {Calendar, LocaleSettings, CalendarProps} from '@superdesk/primereact/calendar';
5
5
  import {throttle} from 'lodash';
6
+ // import classNames from 'classnames';
7
+ import nextId from "react-id-generator";
8
+ import { InputWrapper } from './Form';
6
9
 
7
10
  export type DatePickerLocaleSettings = Omit<LocaleSettings, 'today' | 'clear'>;
8
11
 
@@ -29,6 +32,17 @@ interface IDatePickerBase {
29
32
  }}
30
33
  */
31
34
  locale?: DatePickerLocaleSettings;
35
+
36
+ // label props
37
+ inlineLabel?: boolean;
38
+ required?: boolean;
39
+ fullWidth?: boolean;
40
+ invalid?: boolean;
41
+ labelHidden?: boolean;
42
+ tabindex?: number;
43
+ label?: string;
44
+ info?: string;
45
+ error?: string;
32
46
  }
33
47
 
34
48
  interface IDatePicker extends IDatePickerBase {
@@ -53,6 +67,7 @@ interface IState {
53
67
  // valid means it can be parsed
54
68
  // if a value is invalid on blur, it will be set to an empty string and `props.onChange` called with `null`
55
69
  valid: boolean;
70
+ invalid: boolean;
56
71
  }
57
72
 
58
73
  // tries to parse primereact/calendar value format to IDatePicker['value']
@@ -65,7 +80,6 @@ function parseFromPrimeReactCalendarFormat(value: CalendarProps['value']): IDate
65
80
  return null;
66
81
  } else {
67
82
  // at this point value is a free input string that can't be parsed to a Date inside primereact/calendar
68
-
69
83
  return 'failed-to-parse';
70
84
  }
71
85
  }
@@ -77,13 +91,14 @@ function parseToPrimeReactCalendarFormat(value: IDatePicker['value']): CalendarP
77
91
  export class DatePicker extends React.PureComponent<IDatePicker, IState> {
78
92
  private instance: IPrivatePrimeReactCalendarApi | undefined;
79
93
  hidePopupOnScroll: () => void;
94
+ private htmlId = nextId();
80
95
 
81
96
  constructor(props: IDatePicker) {
82
97
  super(props);
83
-
84
98
  this.state = {
85
99
  value: parseToPrimeReactCalendarFormat(this.props.value),
86
100
  valid: true,
101
+ invalid: this.props.invalid ?? false,
87
102
  };
88
103
 
89
104
  this.hidePopupOnScroll = throttle(() => {
@@ -122,7 +137,6 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
122
137
 
123
138
  render() {
124
139
  let locale: LocaleSettings | undefined;
125
-
126
140
  if (this.props.locale != null) {
127
141
  locale = {
128
142
  ...this.props.locale,
@@ -132,7 +146,21 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
132
146
  }
133
147
 
134
148
  return (
135
- <Calendar
149
+ <InputWrapper
150
+ label={this.props.label}
151
+ error={this.props.error}
152
+ required={this.props.required}
153
+ disabled={this.props.disabled}
154
+ invalid={this.state.invalid}
155
+ info={this.props.info}
156
+ inlineLabel={this.props.inlineLabel}
157
+ labelHidden={this.props.labelHidden}
158
+ fullWidth={this.props.fullWidth}
159
+ htmlId={this.htmlId}
160
+ tabindex={this.props.tabindex}>
161
+ <Calendar
162
+ inputId={this.htmlId}
163
+ ariaLabelledBy={this.htmlId + 'label'}
136
164
  ref={(ref) => {
137
165
  this.instance = ref as unknown as IPrivatePrimeReactCalendarApi;
138
166
  }}
@@ -153,24 +181,22 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
153
181
  showIcon={true}
154
182
  icon="icon-calendar"
155
183
  headerTemplate={() => this.props.shortcuts == null ? null : (
156
- <div style={{width: '100%', display: 'flex', justifyContent: 'space-between', marginBottom: 10}}>
157
- {
158
- this.props.shortcuts.map(({label, days}, i) => (
159
- <button
160
- key={i}
161
- className="btn btn--hollow btn--small"
162
- onClick={() => {
163
- this.props.onChange(addDays(new Date(), days));
164
-
165
- if (this.instance != null && typeof this.instance.hideOverlay === 'function') {
166
- this.instance.hideOverlay();
167
- }
168
- }}
169
- >
170
- {label}
171
- </button>
172
- ))
173
- }
184
+ <div
185
+ style={{width: '100%', display: 'flex', justifyContent: 'space-between', marginBottom: 10}}>
186
+ {this.props.shortcuts.map(({label, days}, i) => (
187
+ <button
188
+ key={i}
189
+ className="btn btn--hollow btn--small"
190
+ onClick={() => {
191
+ this.props.onChange(addDays(new Date(), days));
192
+
193
+ if (this.instance != null && typeof this.instance.hideOverlay === 'function') {
194
+ this.instance.hideOverlay();
195
+ }
196
+ }}>
197
+ {label}
198
+ </button>
199
+ ))}
174
200
  </div>
175
201
  )}
176
202
  appendTo={document.body} // making it work inside `overflow:hidden`
@@ -184,8 +210,8 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
184
210
  // restoring internal state to current props value
185
211
  this.setState({valid: true, value: parseToPrimeReactCalendarFormat(this.props.value)});
186
212
  }
187
- }}
188
- />
213
+ }} />
214
+ </InputWrapper>
189
215
  );
190
216
  }
191
217
  }
@@ -199,18 +225,27 @@ export class DatePickerISO extends React.PureComponent<IDatePickerISO> {
199
225
  render() {
200
226
  return (
201
227
  <DatePicker
202
- value={new Date(this.props.value)}
203
- onChange={(value) => {
204
- if (value === null) {
205
- this.props.onChange('');
206
- } else {
207
- this.props.onChange(format(value, 'yyyy-MM-dd'));
208
- }
209
- }}
210
- disabled={this.props.disabled}
211
- shortcuts={this.props.shortcuts}
212
- dateFormat={this.props.dateFormat}
213
- locale={this.props.locale}
228
+ value={new Date(this.props.value)}
229
+ onChange={(value) => {
230
+ if (value === null) {
231
+ this.props.onChange('');
232
+ } else {
233
+ this.props.onChange(format(value, 'yyyy-MM-dd'));
234
+ }
235
+ }}
236
+ disabled={this.props.disabled}
237
+ shortcuts={this.props.shortcuts}
238
+ dateFormat={this.props.dateFormat}
239
+ locale={this.props.locale}
240
+ inlineLabel={this.props.inlineLabel}
241
+ required={this.props.required}
242
+ fullWidth={this.props.fullWidth}
243
+ invalid={this.props.invalid}
244
+ labelHidden={this.props.labelHidden}
245
+ tabindex={this.props.tabindex}
246
+ label={this.props.label}
247
+ info={this.props.info}
248
+ error={this.props.error}
214
249
  />
215
250
  );
216
251
  }
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import * as React from 'react';
2
2
  import { Chart } from '@superdesk/primereact/chart';
3
3
  import { ChartData, ChartOptions } from 'chart.js';
4
4