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
@@ -2,72 +2,143 @@ import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
3
  import { PropsList, Prop } from '../../../app-typescript';
4
4
  import { MultiSelect } from '../../../app-typescript/components/MultiSelect';
5
- import { TreeSelect } from '../../../app-typescript/components/TreeSelect';
5
+ import { ITreeNode, TreeSelect } from '../../../app-typescript/components/TreeSelect';
6
6
 
7
7
  interface IState {
8
8
  value: any;
9
9
  value2: any;
10
10
  options: any;
11
11
  options2: any;
12
+ inputValue: string;
12
13
  }
13
14
 
14
15
  let itemArr = [
15
16
  {
16
- label: 'Item1',
17
- items: [
17
+ value: 'Category1',
18
+ children: [
18
19
  {
19
- label: 'Item4',
20
- items: [
21
- {label: 'Item10'}
20
+ value: 'Sub-Category1',
21
+ children: [
22
+ {value: 'Item10'}
22
23
  ]
23
24
  },
24
25
  {
25
- label: 'Item5',
26
- items: [
27
- {label: 'Item11'}
26
+ value: 'Sub-Category2',
27
+ children: [
28
+ {value: 'Item11'}
28
29
  ]
29
30
  }
30
31
  ]
31
32
  },
32
33
  {
33
- label: 'Item2',
34
- items: [
34
+ value: 'Category2',
35
+ children: [
35
36
  {
36
- label: 'Item6'
37
+ value: 'Sub-Category3'
37
38
  },
38
39
  {
39
- label: 'Item7'
40
+ value: 'Sub-Category4'
40
41
  }
41
42
  ]
42
43
  },
43
44
  {
44
- label: 'Item3',
45
- items: [
45
+ value: 'Category3',
46
+ children: [
46
47
  {
47
- label: 'Item8'
48
+ value: 'Sub-Category5'
48
49
  },
49
50
  {
50
- label: 'Item9'
51
+ value: 'Sub-Category6'
51
52
  }
52
53
  ]
53
54
  },
54
55
  ]
55
56
 
57
+ let itemArr2 = [
58
+ {
59
+ value: {name: 'Category1'},
60
+ children: [
61
+ {
62
+ value: {name: 'Sub-category1'},
63
+ children: [
64
+ {value: {name: 'Item5'}}
65
+ ]
66
+ },
67
+ {
68
+ value: {name: 'Sub-category2'},
69
+ children: [
70
+ {value: {name: 'Item7'}}
71
+ ]
72
+ }
73
+ ]
74
+ },
75
+ {
76
+ value: {name: 'Category2'},
77
+ children: [
78
+ {
79
+ value: {name: 'Item8'}
80
+ },
81
+ {
82
+ value: {name: 'Item9'}
83
+ }
84
+ ]
85
+ },
86
+ {
87
+ value: {name: 'Category3'},
88
+ children: [
89
+ {
90
+ value: {name: 'Item10'}
91
+ },
92
+ {
93
+ value: {name: 'Item11'}
94
+ }
95
+ ]
96
+ },
97
+ ]
98
+
99
+ const source = [
100
+ {
101
+ 'name': 'Article (news)',
102
+ 'qcode': 'Article',
103
+ },
104
+ {
105
+ 'name': 'Sidebar',
106
+ 'qcode': 'Sidebar',
107
+ },
108
+ {
109
+ 'name': 'Factbox',
110
+ 'qcode': 'Factbox',
111
+ },
112
+ ];
113
+
114
+ function searchOptions(
115
+ term: string,
116
+ callback: (res: Array<ITreeNode<{name: string; qcode: string;}>>) => void,
117
+ ): void {
118
+ setTimeout(() => {
119
+ callback(
120
+ source
121
+ .filter((item) => item.name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
122
+ .map((item) => ({value: item})),
123
+ );
124
+ }, 1000);
125
+ }
126
+
56
127
  export class TreeSelectDocs extends React.Component<{}, IState> {
57
128
  constructor(props) {
58
129
  super(props);
59
130
  this.state = {
60
131
  value: [],
61
132
  value2: [],
62
- options: itemArr,
63
- options2: itemArr
133
+ options: itemArr2,
134
+ options2: itemArr2,
135
+ inputValue: ''
64
136
  }
65
137
 
66
138
  this.handleChange = this.handleChange.bind(this);
67
139
  }
68
140
 
69
141
  handleChange(e, option) {
70
-
71
142
  if(option.item) {
72
143
  e.stopPropagation();
73
144
  e.preventDefault();
@@ -81,7 +152,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
81
152
  render() {
82
153
  return (
83
154
  <section className='docs-page__container'>
84
- <h2 className='docs-page__h2'>TreeSelect</h2>
155
+ <h2 className='docs-page__h2'>TreeSelect (in progress)</h2>
85
156
 
86
157
  <Markup.ReactMarkupCodePreview>{`
87
158
  <TreeSelect
@@ -99,11 +170,20 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
99
170
  <div className='docs-page__content-row docs-page__content-row--no-margin'>
100
171
  <div className='form__row'>
101
172
  <TreeSelect
102
- options={this.state.options}
103
- getLabel={'label'}
104
- getMultilevelArray={'items'}
173
+ getId={(item) => item.name}
174
+ getLabel={(item) => item.name}
175
+ getOptions={() => itemArr2}
176
+ value={[{name: 'Item1'}, {name: 'Item2'}]}
105
177
  selectBranchWithChildren={true}
106
- onChange={() => false}
178
+ onChange={(e) => console.log(e)}
179
+ allowMultiple
180
+ kind={'synchronous'}
181
+ fullWidth
182
+ info={'Info Message'}
183
+ error={'Error Message'}
184
+ required
185
+ label={'TreeSelect Label'}
186
+ singleLevelSearch
107
187
  />
108
188
  </div>
109
189
  </div>
@@ -111,30 +191,83 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
111
191
 
112
192
  <Markup.ReactMarkupCode>{`
113
193
  <TreeSelect
114
- options={this.state.options}
115
- getLabel={'label'}
116
- getMultilevelArray={'items'}
194
+ getId={(item) => item.name}
195
+ getLabel={(item) => item.name}
196
+ getOptions={() => {
197
+ return itemArr2
198
+ }}
199
+ value={[{name: 'Item1'}, {name: 'Item2'}]}
117
200
  selectBranchWithChildren={true}
118
- onChange={() => false}
201
+ onChange={(e) => console.log(e)}
202
+ allowMultiple
203
+ kind={'synchronous'}
204
+ fullWidth
205
+ info={'Info Message'}
206
+ error={'Error Message'}
207
+ required
208
+ label={'TreeSelect Label'}
209
+ />
210
+ `}</Markup.ReactMarkupCode>
211
+
212
+ </Markup.ReactMarkup>
213
+
214
+ <p className='docs-page__paragraph'>Asynchronous mode in TreeSelect component.</p>
215
+ <Markup.ReactMarkup>
216
+ <Markup.ReactMarkupPreview>
217
+ <div className='docs-page__content-row docs-page__content-row--no-margin'>
218
+ <div className='form__row'>
219
+ <TreeSelect
220
+ kind="asynchronous"
221
+ searchOptions={searchOptions}
222
+ value={this.state.value}
223
+ onChange={(val) => {
224
+ this.setState({value: val});
225
+ }}
226
+ getLabel={({name}) => name}
227
+ getId={({qcode}) => qcode}
228
+ selectBranchWithChildren={false}
229
+ optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
230
+ allowMultiple={true}
231
+ />
232
+ </div>
233
+ </div>
234
+ </Markup.ReactMarkupPreview>
235
+
236
+ <Markup.ReactMarkupCode>{`
237
+ <TreeSelect
238
+ kind="asynchronous"
239
+ searchOptions={searchOptions}
240
+ value={this.state.value}
241
+ onChange={(val) => {
242
+ this.setState({value: val});
243
+ }}
244
+ getLabel={({name}) => name}
245
+ getId={({qcode}) => qcode}
246
+ selectBranchWithChildren={false}
247
+ optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
248
+ allowMultiple={true}
119
249
  />
120
250
  `}</Markup.ReactMarkupCode>
121
251
 
122
252
  </Markup.ReactMarkup>
253
+
123
254
  <p className='docs-page__paragraph'>TreeSelect with custom template.</p>
124
255
  <Markup.ReactMarkup>
125
256
  <Markup.ReactMarkupPreview>
126
257
  <div className='docs-page__content-row docs-page__content-row--no-margin'>
127
258
  <div className='form__row'>
128
259
  <TreeSelect
129
- options={this.state.options2}
130
- getMultilevelArray={'items'}
131
- getLabel={'label'}
132
- onChange={() => false}
260
+ getId={(item) => item.name}
261
+ getLabel={(item) => item.name}
262
+ placeholder='Select one'
263
+ getOptions={() => this.state.options}
264
+ kind={'synchronous'}
265
+ onChange={(e) => console.log(e)}
133
266
  optionTemplate={(item: any) => {
134
- return <div>Label: {item.label}</div>
267
+ return <div>Label: {item.name}</div>
135
268
  }}
136
269
  valueTemplate={(item: any) => {
137
- return <span>Label: {item.label}</span>
270
+ return <span>Label: {item.name}</span>
138
271
  }}
139
272
  />
140
273
  </div>
@@ -143,16 +276,18 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
143
276
 
144
277
  <Markup.ReactMarkupCode>{`
145
278
  <TreeSelect
146
- options={this.state.options2}
147
- getMultilevelArray={'items'}
148
- getLabel={'label'}
149
- onChange={() => false}
279
+ getId={(item) => item.name}
280
+ getLabel={(item) => item.name}
281
+ value={[{name: 'Item4'}, {name: 'Item10'}]}
282
+ getOptions={() => this.state.options}
283
+ kind={'synchronous'}
284
+ onChange={(e) => console.log(e)}
150
285
  optionTemplate={(item: any) => {
151
- return <div>Label: {item.label}</div>
286
+ return <div>Label: {item.name}</div>
152
287
  }}
153
288
  valueTemplate={(item: any) => {
154
- return <span>Label: {item.label}</span>
155
- }}
289
+ return <span>Label: {item.name}</span>
290
+ }}
156
291
  />
157
292
  `}</Markup.ReactMarkupCode>
158
293
 
@@ -161,18 +296,136 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
161
296
  <h3 className="docs-page__h3">Props</h3>
162
297
  <PropsList>
163
298
  <Prop name='value' isRequired={false} type='Array<T>' default='/' description='Value of the component.'/>
164
- <Prop name='options' isRequired={true} type='Array<T>' default='/' description='An array of selectitems to display as the available options.'/>
165
- <Prop name='getLabel' isRequired={true} type='string' default='/' description='Name of the label field of an option and decides which field or fields to search against.'/>
166
- <Prop name='getMultilevelArray' isRequired={true} type='string' default='/' description='Name of the children array of an option.'/>
299
+ <Prop name='getOptions' isRequired={true} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
300
+ <Prop name='kind' isRequired={true} type='synchronous | asynchronous' default='/' description='Type of TreeSelect component.'/>
167
301
  <Prop name='width' isRequired={false} type='medium | full-width (100%)' default='100%' description='Dropdown width.'/>
168
302
  <Prop name='selectBranchWithChildren' isRequired={false} type='boolean' default='false' description='When specified, select branch with children is enabled.'/>
169
303
  <Prop name='readonly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.'/>
170
- <Prop name='valueTemplate' isRequired={false} type='function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
171
- <Prop name='optionTemplate' isRequired={false} type='function' default='/' description='Function that gets the option and returns the content for it.'/>
172
- <Prop name='onChange' isRequired={true} type='function' default='/' description='Callback to invoke when value changes.'/>
304
+ <Prop name='loading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator in dropdown.'/>
305
+ <Prop name='getLabel' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
306
+ <Prop name='getId' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
307
+ <Prop name='valueTemplate' isRequired={false} type='Function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
308
+ <Prop name='optionTemplate' isRequired={false} type='Function' default='/' description='Function that gets the option and returns the content for it.'/>
309
+ <Prop name='searchOptions' isRequired={false} type='Function' default='/' description='The function will be called when a search is initiated from UI in asynchronous mode.'/>
310
+ <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
311
+ </PropsList>
312
+
313
+ <p className='docs-page__paragraph'>synchronous:</p>
314
+ <PropsList>
315
+ <Prop name='getOptions' isRequired={false} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
316
+ </PropsList>
317
+
318
+ <p className='docs-page__paragraph'>asynchronous:</p>
319
+ <PropsList>
320
+ <Prop name='getOptions' isRequired={false} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
321
+ <Prop name='searchOptions' isRequired={false} type='Function' default='/' description='function will be called when a search is initiated from UI.'/>
173
322
  </PropsList>
174
323
 
175
324
  </section>
176
325
  )
177
326
  }
178
327
  }
328
+
329
+ // import React from 'react';
330
+ // import {ITreeNode, TreeSelect} from './TreeSelect';
331
+
332
+ // type IProps = {};
333
+
334
+ // interface IVocabularyItem {
335
+ // qcode: string;
336
+ // name: string;
337
+ // }
338
+
339
+ // interface IState {
340
+ // value: Array<IVocabularyItem>;
341
+ // }
342
+
343
+ // const source: Array<ITreeNode<IVocabularyItem>> = [
344
+ // {
345
+ // value: {
346
+ // 'name': 'Article (news)',
347
+ // 'qcode': 'Article',
348
+ // },
349
+ // children: [
350
+ // {
351
+ // value: {
352
+ // 'name': 'Test 1',
353
+ // 'qcode': 'test-1',
354
+ // },
355
+ // }
356
+ // ],
357
+ // },
358
+ // {
359
+ // value: {
360
+ // 'name': 'Sidebar',
361
+ // 'qcode': 'Sidebar',
362
+ // },
363
+ // children: [
364
+ // {
365
+ // value: {
366
+ // 'name': 'Test 2',
367
+ // 'qcode': 'test-2',
368
+ // },
369
+ // }
370
+ // ],
371
+ // },
372
+ // {
373
+ // value: {
374
+ // 'name': 'Factbox',
375
+ // 'qcode': 'Factbox',
376
+ // },
377
+ // children: [
378
+ // {
379
+ // value: {
380
+ // 'name': 'Test 3',
381
+ // 'qcode': 'test-3',
382
+ // },
383
+ // }
384
+ // ],
385
+ // }
386
+ // ];
387
+
388
+ // export class TreeSelectDocs extends React.PureComponent<IProps, IState> {
389
+ // constructor(props: IProps) {
390
+ // super(props);
391
+ // this.state = {
392
+ // value: [],
393
+ // };
394
+ // }
395
+ // render() {
396
+ // return (
397
+ // // <TreeSelect
398
+ // // kind="synchronous"
399
+ // // getOptions={() => source}
400
+ // // value={this.state.value}
401
+ // // onChange={(val) => {
402
+ // // this.setState({value: val});
403
+ // // }}
404
+ // // getId={(item) => item.name}
405
+ // // getLabel={(item) => item.name}
406
+ // // selectBranchWithChildren={false}
407
+ // // optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
408
+ // // allowMultiple={true}
409
+
410
+ // // />
411
+
412
+ // <TreeSelect
413
+ // getId={(item) => item.name}
414
+ // getLabel={(item) => item.name}
415
+ // getOptions={() => {
416
+ // return source
417
+ // }}
418
+ // //value={[{name: 'Item1'}, {name: 'Item2'}]}
419
+ // //selectBranchWithChildren={true}
420
+ // onChange={(e) => console.log(e)}
421
+ // allowMultiple
422
+ // kind={'synchronous'}
423
+ // fullWidth
424
+ // info={'Info Message'}
425
+ // error={'Error Message'}
426
+ // required
427
+ // label={'TreeSelect Label'}
428
+ // />
429
+ // );
430
+ // }
431
+ // }
@@ -0,0 +1,44 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import {WithSizeObserver} from '../../../app-typescript/components/WithSizeObserver';
4
+
5
+ export class WithSizeObserverDocs extends React.Component {
6
+ render() {
7
+ return (
8
+ <section className='docs-page__container'>
9
+
10
+ <h2 className='docs-page__h2'>WithSizeObserver</h2>
11
+
12
+ <p>Higher order component for dynamically retrieving dimensions of any element.</p>
13
+
14
+ <p>It uses `ResizeObserver` to listen for updates and re-render children efficiently.</p>
15
+
16
+ <p className='docs-page__paragraph'></p>
17
+ <Markup.ReactMarkup>
18
+ <Markup.ReactMarkupPreview>
19
+ <div className='docs-page__content-row docs-page__content-row--no-margin'>
20
+ <div className='form__row'>
21
+ <div style={{resize: 'both', overflow: 'auto', height: 40, outline: '1px solid red'}}>
22
+ <WithSizeObserver>
23
+ {({width, height}) => (
24
+ <div>width: {width}px ; height: {height}px</div>
25
+ )}
26
+ </WithSizeObserver>
27
+ </div>
28
+ </div>
29
+ </div>
30
+
31
+ </Markup.ReactMarkupPreview>
32
+
33
+ <Markup.ReactMarkupCode>{`
34
+ <WithSizeObserver>
35
+ {({width, height}) => (
36
+ <div>width: {width}px ; height: {height}px</div>
37
+ )}
38
+ </WithSizeObserver>
39
+ `}</Markup.ReactMarkupCode>
40
+ </Markup.ReactMarkup>
41
+ </section>
42
+ )
43
+ }
44
+ }