superdesk-ui-framework 2.4.21 → 3.0.0-rc12

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 (698) hide show
  1. package/app/fonts/sd_big-icons.eot +0 -0
  2. package/app/fonts/sd_big-icons.svg +55 -53
  3. package/app/fonts/sd_big-icons.ttf +0 -0
  4. package/app/fonts/sd_big-icons.woff +0 -0
  5. package/app/fonts/sd_icons.eot +0 -0
  6. package/app/fonts/sd_icons.svg +15 -7
  7. package/app/fonts/sd_icons.ttf +0 -0
  8. package/app/fonts/sd_icons.woff +0 -0
  9. package/app/img/SD-logo.svg +52 -0
  10. package/app/img/dots.svg +3 -0
  11. package/app/img/spinner.svg +3 -0
  12. package/app/img/themes/theme-base.svg +1 -0
  13. package/app/img/themes/theme-contrast.svg +45 -0
  14. package/app/img/themes/theme-dark.svg +1 -0
  15. package/app/img/themes/theme-light.svg +1 -0
  16. package/app/index.js +2 -1
  17. package/app/scripts/check.js +1 -1
  18. package/app/scripts/modals.js +1 -0
  19. package/app/scripts/toggleBoxNext.js +1 -1
  20. package/app/styles/_accessibility.scss +309 -6
  21. package/app/styles/_alerts.scss +227 -97
  22. package/app/styles/_avatar.scss +60 -33
  23. package/app/styles/_badge.scss +55 -26
  24. package/app/styles/_big-icon-font.scss +64 -23
  25. package/app/styles/_boxed-list.scss +70 -23
  26. package/app/styles/_buttons.scss +553 -1026
  27. package/app/styles/_carousel.scss +19 -13
  28. package/app/styles/_content-divider.scss +180 -0
  29. package/app/styles/_design-tokens.scss +2 -0
  30. package/app/styles/_drag-drop.scss +1 -1
  31. package/app/styles/_empty-states.scss +9 -1
  32. package/app/styles/_hamburger.scss +160 -0
  33. package/app/styles/_helpers.scss +684 -311
  34. package/app/styles/_icon-font.scss +353 -309
  35. package/app/styles/_icon-labels.scss +69 -14
  36. package/app/styles/_labels.scss +65 -53
  37. package/app/styles/_loaders.scss +28 -0
  38. package/app/styles/_master-desk.scss +14 -13
  39. package/app/styles/_mixins.scss +21 -13
  40. package/app/styles/_modals.scss +109 -119
  41. package/app/styles/_normalize.scss +5 -0
  42. package/app/styles/_panel-info.scss +21 -16
  43. package/app/styles/_popover.scss +2 -2
  44. package/app/styles/_pr-superdesk-theme.scss +4 -0
  45. package/app/styles/_publisher-styles.scss +182 -0
  46. package/app/styles/_reboot.scss +1 -0
  47. package/app/styles/_sd-tag-input.scss +311 -264
  48. package/app/styles/_simple-list.scss +39 -19
  49. package/app/styles/_table-list.scss +348 -0
  50. package/app/styles/_tables.scss +5 -4
  51. package/app/styles/_tabs.scss +24 -75
  52. package/app/styles/_tag-labels.scss +47 -47
  53. package/app/styles/_thumb-carousel.scss +11 -10
  54. package/app/styles/_toggle-box.scss +52 -46
  55. package/app/styles/_toggle-button.scss +42 -0
  56. package/app/styles/_tooltips.scss +55 -98
  57. package/app/styles/_variables.scss +0 -1
  58. package/app/styles/app.scss +22 -1
  59. package/app/styles/components/_card-item.scss +41 -28
  60. package/app/styles/components/_list-item.scss +78 -125
  61. package/app/styles/components/_sd-circular-progress.scss +1 -1
  62. package/app/styles/components/_sd-collapse-box.scss +11 -38
  63. package/app/styles/components/_sd-comment-box.scss +8 -4
  64. package/app/styles/components/_sd-dropzone.scss +114 -0
  65. package/app/styles/components/_sd-editor-popup.scss +4 -4
  66. package/app/styles/components/_sd-grid-item.scss +105 -193
  67. package/app/styles/components/_sd-loader.scss +1 -16
  68. package/app/styles/components/_sd-media-carousel.scss +47 -14
  69. package/app/styles/components/_sd-notification-panel.scss +48 -0
  70. package/app/styles/components/_sd-photo-preview.scss +16 -16
  71. package/app/styles/components/_sd-searchbar.scss +50 -127
  72. package/app/styles/components/_sd-toaster.scss +13 -6
  73. package/app/styles/components/_subnav.scss +475 -474
  74. package/app/styles/components/_theme-selector.scss +189 -0
  75. package/app/styles/components/sd-slider.scss +11 -11
  76. package/app/styles/design-tokens/_design-tokens-general.scss +81 -0
  77. package/app/styles/design-tokens/_new-colors.scss +724 -0
  78. package/app/styles/dropdowns/_basic-dropdown.scss +125 -76
  79. package/app/styles/dropdowns/_navigation_dropdown.scss +7 -8
  80. package/app/styles/dropdowns/_nested-dropdown.scss +30 -16
  81. package/app/styles/dropdowns/_other_dropdown.scss +1 -1
  82. package/app/styles/editor/_editor-buttons.scss +54 -0
  83. package/app/styles/editor/_editor-themes.scss +437 -0
  84. package/app/styles/form-elements/_autocomplete.scss +12 -41
  85. package/app/styles/form-elements/_checkbox.scss +180 -245
  86. package/app/styles/form-elements/_forms-general.scss +173 -27
  87. package/app/styles/form-elements/_input-wrap.scss +138 -0
  88. package/app/styles/form-elements/_inputs.scss +646 -421
  89. package/app/styles/form-elements/_radio.scss +6 -6
  90. package/app/styles/form-elements/_select-grid.scss +16 -14
  91. package/app/styles/form-elements/_switch.scss +26 -47
  92. package/app/styles/grids/_basic-grid.scss +52 -26
  93. package/app/styles/grids/_grid-layout.scss +256 -94
  94. package/app/styles/grids/_layout-grid.scss +6 -6
  95. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  96. package/app/styles/interface-elements/_side-panel.scss +116 -84
  97. package/app/styles/layout/_basic-layout.scss +13 -21
  98. package/app/styles/layout/_container.scss +35 -0
  99. package/app/styles/layout/_editor.scss +404 -0
  100. package/app/styles/layout/_general.scss +4 -5
  101. package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
  102. package/app/styles/menus/_sd-content-navigation.scss +1 -1
  103. package/app/styles/menus/_sd-left-navigation.scss +57 -18
  104. package/app/styles/menus/_sd-sidebar-menu.scss +124 -30
  105. package/app/styles/menus/_sd-top-menu.scss +22 -8
  106. package/app/styles/primereact/_pr-datepicker.scss +64 -11
  107. package/app/styles/primereact/_pr-dialog.scss +136 -30
  108. package/app/styles/primereact/_pr-dropdown.scss +190 -18
  109. package/app/styles/primereact/_pr-general.scss +14 -7
  110. package/app/styles/primereact/_pr-menu.scss +14 -16
  111. package/app/styles/variables/_colors.scss +152 -544
  112. package/app/styles/variables/_dimensions.scss +82 -4
  113. package/app/styles/variables/_form-elements.scss +0 -2
  114. package/app/styles/variables/_typography.scss +2 -0
  115. package/app-typescript/components/Alert.tsx +16 -1
  116. package/app-typescript/components/Avatar.tsx +21 -0
  117. package/app-typescript/components/Badge.tsx +3 -2
  118. package/app-typescript/components/ButtonGroup.tsx +9 -5
  119. package/app-typescript/components/Carousel.tsx +1 -1
  120. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  121. package/app-typescript/components/CheckGroup.tsx +2 -1
  122. package/app-typescript/components/Checkbox.tsx +7 -3
  123. package/app-typescript/components/CheckboxButton.tsx +9 -2
  124. package/app-typescript/components/ContentDivider.tsx +37 -0
  125. package/app-typescript/components/CreateButton.tsx +38 -0
  126. package/app-typescript/components/DatePicker.tsx +77 -38
  127. package/app-typescript/components/DonutChart.tsx +1 -1
  128. package/app-typescript/components/DropZone.tsx +89 -0
  129. package/app-typescript/components/Dropdown.tsx +141 -77
  130. package/app-typescript/components/DropdownFirst.tsx +1 -1
  131. package/app-typescript/components/DurationInput.tsx +400 -0
  132. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  133. package/app-typescript/components/EmptyState.tsx +2 -1
  134. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  135. package/app-typescript/components/Form/FormItem.tsx +20 -0
  136. package/app-typescript/components/Form/FormLabel.tsx +29 -0
  137. package/app-typescript/components/Form/FormRow.tsx +40 -0
  138. package/app-typescript/components/Form/FormRowNew.tsx +41 -0
  139. package/app-typescript/components/Form/FormText.tsx +15 -0
  140. package/app-typescript/components/Form/InputBase.tsx +95 -0
  141. package/app-typescript/components/Form/InputNew.tsx +107 -0
  142. package/app-typescript/components/Form/InputWrapper.tsx +79 -0
  143. package/app-typescript/components/Form/index.tsx +9 -0
  144. package/app-typescript/components/Icon.tsx +4 -2
  145. package/app-typescript/components/IconButton.tsx +30 -12
  146. package/app-typescript/components/IconLabel.tsx +8 -1
  147. package/app-typescript/components/Input.tsx +68 -52
  148. package/app-typescript/components/Label.tsx +65 -10
  149. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  150. package/app-typescript/components/Layouts/AuthoringContainer.tsx +28 -0
  151. package/app-typescript/components/Layouts/AuthoringFrame.tsx +73 -0
  152. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  153. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  154. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  155. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  156. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  157. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +34 -0
  158. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  159. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  160. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  161. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +40 -0
  162. package/app-typescript/components/Layouts/AuthoringMain.tsx +52 -0
  163. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  164. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  165. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +21 -0
  166. package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
  167. package/app-typescript/components/Layouts/Container.tsx +30 -0
  168. package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
  169. package/app-typescript/components/Layouts/CoreLayout.tsx +63 -0
  170. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
  171. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
  172. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +22 -0
  173. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
  174. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
  175. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
  176. package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
  177. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  178. package/app-typescript/components/Layouts/Layout.tsx +33 -0
  179. package/app-typescript/components/Layouts/LayoutContainer.tsx +15 -0
  180. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  181. package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
  182. package/app-typescript/components/Layouts/MainPanel.tsx +27 -0
  183. package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
  184. package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
  185. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  186. package/app-typescript/components/Layouts/Panel.tsx +208 -0
  187. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  188. package/app-typescript/components/Layouts/index.tsx +43 -0
  189. package/app-typescript/components/LeftMenu.tsx +116 -31
  190. package/app-typescript/components/Lists/BoxedList.tsx +169 -0
  191. package/app-typescript/components/Lists/ContentList.tsx +133 -0
  192. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  193. package/app-typescript/components/Lists/TableList.tsx +405 -0
  194. package/app-typescript/components/Lists/index.tsx +2 -0
  195. package/app-typescript/components/Menu.tsx +33 -9
  196. package/app-typescript/components/Modal.tsx +34 -16
  197. package/app-typescript/components/MultiSelect.tsx +99 -0
  198. package/app-typescript/components/NavButton.tsx +6 -1
  199. package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
  200. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  201. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  202. package/app-typescript/components/Navigation/SideBarTabs.tsx +87 -0
  203. package/app-typescript/components/Navigation/index.tsx +3 -0
  204. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  205. package/app-typescript/components/RadioGroup.tsx +69 -0
  206. package/app-typescript/components/SearchBar.tsx +106 -0
  207. package/app-typescript/components/Select.tsx +29 -39
  208. package/app-typescript/components/SelectGrid.tsx +4 -4
  209. package/app-typescript/components/SelectWithTemplate.tsx +32 -7
  210. package/app-typescript/components/SidebarMenu.tsx +68 -0
  211. package/app-typescript/components/Skeleton.tsx +1 -1
  212. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  213. package/app-typescript/components/Spacer.tsx +87 -0
  214. package/app-typescript/components/Spinner.tsx +1 -2
  215. package/app-typescript/components/SubNav.tsx +25 -4
  216. package/app-typescript/components/Switch.tsx +34 -12
  217. package/app-typescript/components/SwitchGroup.tsx +2 -1
  218. package/app-typescript/components/TabCustom.tsx +40 -89
  219. package/app-typescript/components/TabList.tsx +18 -43
  220. package/app-typescript/components/Tag.tsx +32 -9
  221. package/app-typescript/components/Text/Heading.tsx +67 -0
  222. package/app-typescript/components/Text/Text.tsx +36 -0
  223. package/app-typescript/components/Text/Time.tsx +34 -0
  224. package/app-typescript/components/ThemeSelector.tsx +113 -0
  225. package/app-typescript/components/TimePicker.tsx +38 -15
  226. package/app-typescript/components/Togglebox.tsx +9 -7
  227. package/app-typescript/components/Tooltip.tsx +7 -5
  228. package/app-typescript/components/TreeSelect.tsx +664 -0
  229. package/app-typescript/components/WithSizeObserver.tsx +88 -0
  230. package/app-typescript/helpers.tsx +3 -0
  231. package/app-typescript/index.ts +27 -4
  232. package/dist/SD-logo.svg +52 -0
  233. package/dist/avatar-2.jpg +0 -0
  234. package/dist/avatar-3.jpg +0 -0
  235. package/dist/avatar-4.jpg +0 -0
  236. package/dist/avatar-5.jpg +0 -0
  237. package/dist/avatar-6.jpg +0 -0
  238. package/dist/avatar_64.png +0 -0
  239. package/dist/components/basic-grid.html +1 -1
  240. package/dist/components/checkbox.html +1 -1
  241. package/dist/dots.svg +3 -0
  242. package/dist/examples.bundle.css +10746 -2781
  243. package/dist/examples.bundle.js +94094 -67758
  244. package/dist/index.html +9 -12
  245. package/dist/playgrounds/accessible-theme-test.html +1 -1
  246. package/dist/playgrounds/boxed-list.html +1 -1
  247. package/dist/playgrounds/cards.html +9 -4
  248. package/dist/playgrounds/editor-3-test.html +15 -0
  249. package/dist/playgrounds/form-layout.html +9 -7
  250. package/dist/playgrounds/layout-test-2.html +41 -37
  251. package/dist/playgrounds/list-item-test.html +2 -2
  252. package/dist/playgrounds/master-desk.html +2 -4
  253. package/dist/playgrounds/media-carousel.html +1 -1
  254. package/dist/playgrounds/photo-desk.html +34 -34
  255. package/dist/playgrounds/planning.html +1 -1
  256. package/dist/playgrounds/publish.html +1 -1
  257. package/dist/playgrounds/publisher-content-analytics.html +1 -1
  258. package/dist/playgrounds/publisher-content-list-automatic.html +1 -1
  259. package/dist/playgrounds/publisher-content-list-manual.html +1 -1
  260. package/dist/playgrounds/publisher-content-lists.html +1 -1
  261. package/dist/playgrounds/publisher-dashboard.html +1 -1
  262. package/dist/playgrounds/publisher-output-control.html +1 -1
  263. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +156 -0
  264. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  265. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  266. package/dist/playgrounds/react-playgrounds/Index.tsx +9 -1
  267. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  268. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  269. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  270. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +469 -0
  271. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
  272. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +41 -41
  273. package/dist/playgrounds/react-playgrounds/TestGround.tsx +631 -24
  274. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +304 -0
  275. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  276. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  277. package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  278. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +3 -3
  279. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  280. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  281. package/dist/playgrounds/swimlane-view.html +1 -1
  282. package/dist/playgrounds/tags-input.html +1 -1
  283. package/dist/playgrounds/toasts.html +1 -1
  284. package/dist/playgrounds/video-editor.html +1 -1
  285. package/dist/react/Alerts.tsx +123 -23
  286. package/dist/react/Avatar.tsx +314 -127
  287. package/dist/react/Badges.tsx +18 -0
  288. package/dist/react/BoxedList.tsx +362 -0
  289. package/dist/react/ButtonGroups.tsx +66 -65
  290. package/dist/react/Buttons.tsx +62 -247
  291. package/dist/react/Carousel.tsx +2 -3
  292. package/dist/react/Checkboxs.tsx +66 -25
  293. package/dist/react/Container.tsx +143 -0
  294. package/dist/react/ContentDivider.tsx +182 -0
  295. package/dist/react/ContentList.tsx +462 -0
  296. package/dist/react/CreateButton.tsx +71 -0
  297. package/dist/react/DatePicker.tsx +31 -6
  298. package/dist/react/DropZone.tsx +111 -0
  299. package/dist/react/Dropdowns.tsx +580 -48
  300. package/dist/react/DurationInput.tsx +108 -0
  301. package/dist/react/Heading.tsx +106 -0
  302. package/dist/react/IconButtons.tsx +49 -42
  303. package/dist/react/IconLabels.tsx +24 -2
  304. package/dist/react/Index.tsx +143 -11
  305. package/dist/react/Inputs.tsx +284 -23
  306. package/dist/react/Labels.tsx +51 -1
  307. package/dist/react/LeftNavigations.tsx +194 -15
  308. package/dist/react/ListItems.tsx +3 -3
  309. package/dist/react/Modal.tsx +174 -19
  310. package/dist/react/MultiSelect.tsx +201 -0
  311. package/dist/react/NavButtons.tsx +35 -5
  312. package/dist/react/Panel.tsx +366 -0
  313. package/dist/react/QuickNavigationBar.tsx +142 -0
  314. package/dist/react/RadioGroup.tsx +351 -0
  315. package/dist/react/SelectWithTemplate.tsx +7 -2
  316. package/dist/react/Selects.tsx +50 -15
  317. package/dist/react/SimpleList.tsx +148 -0
  318. package/dist/react/SubNav.tsx +69 -20
  319. package/dist/react/TableList.tsx +161 -0
  320. package/dist/react/Tabs.tsx +72 -248
  321. package/dist/react/Tags.tsx +52 -13
  322. package/dist/react/Text.tsx +134 -0
  323. package/dist/react/TimePicker.tsx +22 -12
  324. package/dist/react/Togglebox.tsx +1 -1
  325. package/dist/react/Tooltips.tsx +1 -1
  326. package/dist/react/TreeSelect.tsx +422 -0
  327. package/dist/react/WithSizeObserver.tsx +44 -0
  328. package/dist/react/tree-select/TreeSelect.tsx +273 -0
  329. package/dist/react/tree-select/example-1.tsx +71 -0
  330. package/dist/react/tree-select/example-2.tsx +59 -0
  331. package/dist/react.html +4 -0
  332. package/dist/sd_big-icons.eot +0 -0
  333. package/dist/sd_big-icons.svg +55 -53
  334. package/dist/sd_big-icons.ttf +0 -0
  335. package/dist/sd_big-icons.woff +0 -0
  336. package/dist/sd_icons.eot +0 -0
  337. package/dist/sd_icons.svg +15 -7
  338. package/dist/sd_icons.ttf +0 -0
  339. package/dist/sd_icons.woff +0 -0
  340. package/dist/superdesk-ui.bundle.css +55041 -26655
  341. package/dist/superdesk-ui.bundle.js +88737 -67504
  342. package/dist/vendor.bundle.js +25070 -25074
  343. package/examples/css/docs-page.css +208 -50
  344. package/examples/img/avatar-2.jpg +0 -0
  345. package/examples/img/avatar-3.jpg +0 -0
  346. package/examples/img/avatar-4.jpg +0 -0
  347. package/examples/img/avatar-5.jpg +0 -0
  348. package/examples/img/avatar-6.jpg +0 -0
  349. package/examples/index.html +9 -12
  350. package/examples/index.js +36 -0
  351. package/examples/pages/components/basic-grid.html +1 -1
  352. package/examples/pages/components/checkbox.html +1 -1
  353. package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
  354. package/examples/pages/playgrounds/boxed-list.html +1 -1
  355. package/examples/pages/playgrounds/cards.html +9 -4
  356. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  357. package/examples/pages/playgrounds/form-layout.html +9 -7
  358. package/examples/pages/playgrounds/layout-test-2.html +41 -37
  359. package/examples/pages/playgrounds/list-item-test.html +2 -2
  360. package/examples/pages/playgrounds/master-desk.html +2 -4
  361. package/examples/pages/playgrounds/media-carousel.html +1 -1
  362. package/examples/pages/playgrounds/photo-desk.html +34 -34
  363. package/examples/pages/playgrounds/planning.html +1 -1
  364. package/examples/pages/playgrounds/publish.html +1 -1
  365. package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
  366. package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
  367. package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
  368. package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
  369. package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
  370. package/examples/pages/playgrounds/publisher-output-control.html +1 -1
  371. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +156 -0
  372. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  373. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  374. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +9 -1
  375. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  376. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  377. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  378. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +469 -0
  379. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
  380. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +41 -41
  381. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +631 -24
  382. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +304 -0
  383. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  384. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  385. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  386. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +3 -3
  387. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  388. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  389. package/examples/pages/playgrounds/swimlane-view.html +1 -1
  390. package/examples/pages/playgrounds/tags-input.html +1 -1
  391. package/examples/pages/playgrounds/toasts.html +1 -1
  392. package/examples/pages/playgrounds/video-editor.html +1 -1
  393. package/examples/pages/react/Alerts.tsx +123 -23
  394. package/examples/pages/react/Avatar.tsx +314 -127
  395. package/examples/pages/react/Badges.tsx +18 -0
  396. package/examples/pages/react/BoxedList.tsx +362 -0
  397. package/examples/pages/react/ButtonGroups.tsx +66 -65
  398. package/examples/pages/react/Buttons.tsx +62 -247
  399. package/examples/pages/react/Carousel.tsx +2 -3
  400. package/examples/pages/react/Checkboxs.tsx +66 -25
  401. package/examples/pages/react/Container.tsx +143 -0
  402. package/examples/pages/react/ContentDivider.tsx +182 -0
  403. package/examples/pages/react/ContentList.tsx +462 -0
  404. package/examples/pages/react/CreateButton.tsx +71 -0
  405. package/examples/pages/react/DatePicker.tsx +31 -6
  406. package/examples/pages/react/DropZone.tsx +111 -0
  407. package/examples/pages/react/Dropdowns.tsx +580 -48
  408. package/examples/pages/react/DurationInput.tsx +108 -0
  409. package/examples/pages/react/Heading.tsx +106 -0
  410. package/examples/pages/react/IconButtons.tsx +49 -42
  411. package/examples/pages/react/IconLabels.tsx +24 -2
  412. package/examples/pages/react/Index.tsx +143 -11
  413. package/examples/pages/react/Inputs.tsx +284 -23
  414. package/examples/pages/react/Labels.tsx +51 -1
  415. package/examples/pages/react/LeftNavigations.tsx +194 -15
  416. package/examples/pages/react/ListItems.tsx +3 -3
  417. package/examples/pages/react/Modal.tsx +174 -19
  418. package/examples/pages/react/MultiSelect.tsx +201 -0
  419. package/examples/pages/react/NavButtons.tsx +35 -5
  420. package/examples/pages/react/Panel.tsx +366 -0
  421. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  422. package/examples/pages/react/RadioGroup.tsx +351 -0
  423. package/examples/pages/react/SelectWithTemplate.tsx +7 -2
  424. package/examples/pages/react/Selects.tsx +50 -15
  425. package/examples/pages/react/SimpleList.tsx +148 -0
  426. package/examples/pages/react/SubNav.tsx +69 -20
  427. package/examples/pages/react/TableList.tsx +161 -0
  428. package/examples/pages/react/Tabs.tsx +72 -248
  429. package/examples/pages/react/Tags.tsx +52 -13
  430. package/examples/pages/react/Text.tsx +134 -0
  431. package/examples/pages/react/TimePicker.tsx +22 -12
  432. package/examples/pages/react/Togglebox.tsx +1 -1
  433. package/examples/pages/react/Tooltips.tsx +1 -1
  434. package/examples/pages/react/TreeSelect.tsx +422 -0
  435. package/examples/pages/react/WithSizeObserver.tsx +44 -0
  436. package/examples/pages/react/tree-select/TreeSelect.tsx +273 -0
  437. package/examples/pages/react/tree-select/example-1.tsx +71 -0
  438. package/examples/pages/react/tree-select/example-2.tsx +59 -0
  439. package/examples/pages/react.html +4 -0
  440. package/images/avatar_64.png +0 -0
  441. package/package.json +17 -12
  442. package/react/components/Alert.d.ts +3 -0
  443. package/react/components/Alert.js +17 -7
  444. package/react/components/Autocomplete.js +16 -12
  445. package/react/components/Avatar.d.ts +9 -0
  446. package/react/components/Avatar.js +24 -4
  447. package/react/components/Badge.d.ts +1 -0
  448. package/react/components/Badge.js +9 -7
  449. package/react/components/Button.js +8 -6
  450. package/react/components/ButtonGroup.d.ts +4 -2
  451. package/react/components/ButtonGroup.js +11 -7
  452. package/react/components/Carousel.js +5 -3
  453. package/react/components/CheckButtonGroup.d.ts +3 -1
  454. package/react/components/CheckButtonGroup.js +14 -6
  455. package/react/components/CheckGroup.d.ts +1 -0
  456. package/react/components/CheckGroup.js +6 -4
  457. package/react/components/Checkbox.d.ts +2 -1
  458. package/react/components/Checkbox.js +7 -5
  459. package/react/components/CheckboxButton.d.ts +1 -0
  460. package/react/components/CheckboxButton.js +8 -6
  461. package/react/components/ContentDivider.d.ts +13 -0
  462. package/react/components/ContentDivider.js +70 -0
  463. package/react/components/CreateButton.d.ts +17 -0
  464. package/react/components/CreateButton.js +68 -0
  465. package/react/components/DatePicker.d.ts +11 -0
  466. package/react/components/DatePicker.js +45 -31
  467. package/react/components/Divider.js +6 -4
  468. package/react/components/DonutChart.d.ts +1 -1
  469. package/react/components/DonutChart.js +24 -6
  470. package/react/components/DropZone.d.ts +25 -0
  471. package/react/components/DropZone.js +95 -0
  472. package/react/components/Dropdown.d.ts +7 -5
  473. package/react/components/Dropdown.js +84 -51
  474. package/react/components/DropdownFirst.js +19 -12
  475. package/react/components/DurationInput.d.ts +42 -0
  476. package/react/components/DurationInput.js +364 -0
  477. package/react/components/EmptyState.d.ts +1 -0
  478. package/react/components/EmptyState.js +8 -6
  479. package/react/components/Form/FormGroup.d.ts +13 -0
  480. package/react/components/Form/FormGroup.js +63 -0
  481. package/react/components/Form/FormItem.d.ts +9 -0
  482. package/react/components/Form/FormItem.js +56 -0
  483. package/react/components/Form/FormLabel.d.ts +13 -0
  484. package/react/components/Form/FormLabel.js +62 -0
  485. package/react/components/Form/FormRow.d.ts +17 -0
  486. package/react/components/Form/FormRow.js +64 -0
  487. package/react/components/Form/FormRowNew.d.ts +12 -0
  488. package/react/components/Form/FormRowNew.js +67 -0
  489. package/react/components/Form/FormText.d.ts +8 -0
  490. package/react/components/Form/FormText.js +49 -0
  491. package/react/components/Form/InputBase.d.ts +41 -0
  492. package/react/components/Form/InputBase.js +86 -0
  493. package/react/components/Form/InputNew.d.ts +45 -0
  494. package/react/components/Form/InputNew.js +75 -0
  495. package/react/components/Form/InputWrapper.d.ts +28 -0
  496. package/react/components/Form/InputWrapper.js +91 -0
  497. package/react/components/Form/index.d.ts +9 -0
  498. package/react/components/Form/index.js +21 -0
  499. package/react/components/FormLabel.js +5 -3
  500. package/react/components/GridItem.js +9 -7
  501. package/react/components/GridList.js +8 -6
  502. package/react/components/HeadingText.js +4 -2
  503. package/react/components/HelloWorld.js +4 -2
  504. package/react/components/Icon.d.ts +2 -1
  505. package/react/components/Icon.js +9 -6
  506. package/react/components/IconButton.d.ts +9 -2
  507. package/react/components/IconButton.js +17 -7
  508. package/react/components/IconLabel.d.ts +2 -0
  509. package/react/components/IconLabel.js +12 -7
  510. package/react/components/IconPicker.js +13 -9
  511. package/react/components/Input.d.ts +25 -7
  512. package/react/components/Input.js +21 -38
  513. package/react/components/Label.d.ts +2 -0
  514. package/react/components/Label.js +44 -11
  515. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  516. package/react/components/Layouts/AuthorinInnerSideBar.js +49 -0
  517. package/react/components/Layouts/AuthoringContainer.d.ts +12 -0
  518. package/react/components/Layouts/AuthoringContainer.js +60 -0
  519. package/react/components/Layouts/AuthoringFrame.d.ts +19 -0
  520. package/react/components/Layouts/AuthoringFrame.js +58 -0
  521. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  522. package/react/components/Layouts/AuthoringFrameContainer.js +49 -0
  523. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  524. package/react/components/Layouts/AuthoringFrameLeftBar.js +49 -0
  525. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  526. package/react/components/Layouts/AuthoringFrameMain.js +49 -0
  527. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  528. package/react/components/Layouts/AuthoringFrameNavBar.js +49 -0
  529. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  530. package/react/components/Layouts/AuthoringFrameOverlay.js +49 -0
  531. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +15 -0
  532. package/react/components/Layouts/AuthoringFrameRightBar.js +60 -0
  533. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  534. package/react/components/Layouts/AuthoringFrameSidePanel.js +58 -0
  535. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  536. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +58 -0
  537. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  538. package/react/components/Layouts/AuthoringInnerBody.js +49 -0
  539. package/react/components/Layouts/AuthoringInnerHeader.d.ts +14 -0
  540. package/react/components/Layouts/AuthoringInnerHeader.js +68 -0
  541. package/react/components/Layouts/AuthoringMain.d.ts +14 -0
  542. package/react/components/Layouts/AuthoringMain.js +55 -0
  543. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  544. package/react/components/Layouts/AuthoringMainContainer.js +49 -0
  545. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  546. package/react/components/Layouts/AuthoringMainContent.js +49 -0
  547. package/react/components/Layouts/AuthoringMainToolBar.d.ts +9 -0
  548. package/react/components/Layouts/AuthoringMainToolBar.js +56 -0
  549. package/react/components/Layouts/BottomBarAction.d.ts +12 -0
  550. package/react/components/Layouts/BottomBarAction.js +59 -0
  551. package/react/components/Layouts/Container.d.ts +14 -0
  552. package/react/components/Layouts/Container.js +62 -0
  553. package/react/components/Layouts/ContentSplitter.d.ts +10 -0
  554. package/react/components/Layouts/ContentSplitter.js +58 -0
  555. package/react/components/Layouts/CoreLayout.d.ts +20 -0
  556. package/react/components/Layouts/CoreLayout.js +55 -0
  557. package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
  558. package/react/components/Layouts/CoreLayoutContainer.js +49 -0
  559. package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
  560. package/react/components/Layouts/CoreLayoutFooter.js +49 -0
  561. package/react/components/Layouts/CoreLayoutMain.d.ts +10 -0
  562. package/react/components/Layouts/CoreLayoutMain.js +56 -0
  563. package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
  564. package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
  565. package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
  566. package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
  567. package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
  568. package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
  569. package/react/components/Layouts/HamburgerButton.d.ts +14 -0
  570. package/react/components/Layouts/HamburgerButton.js +63 -0
  571. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  572. package/react/components/Layouts/HeaderPanel.js +49 -0
  573. package/react/components/Layouts/Layout.d.ts +8 -0
  574. package/react/components/Layouts/Layout.js +36 -0
  575. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  576. package/react/components/Layouts/LayoutContainer.js +49 -0
  577. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  578. package/react/components/Layouts/LeftPanel.js +56 -0
  579. package/react/components/Layouts/MainMenu.d.ts +41 -0
  580. package/react/components/Layouts/MainMenu.js +103 -0
  581. package/react/components/Layouts/MainPanel.d.ts +11 -0
  582. package/react/components/Layouts/MainPanel.js +59 -0
  583. package/react/components/Layouts/NotificationPanel.d.ts +45 -0
  584. package/react/components/Layouts/NotificationPanel.js +110 -0
  585. package/react/components/Layouts/OverlayPanel.d.ts +8 -0
  586. package/react/components/Layouts/OverlayPanel.js +51 -0
  587. package/react/components/Layouts/PageLayout.d.ts +16 -0
  588. package/react/components/Layouts/PageLayout.js +66 -0
  589. package/react/components/Layouts/Panel.d.ts +66 -0
  590. package/react/components/Layouts/Panel.js +168 -0
  591. package/react/components/Layouts/RightPanel.d.ts +9 -0
  592. package/react/components/Layouts/RightPanel.js +49 -0
  593. package/react/components/Layouts/index.d.ts +39 -0
  594. package/react/components/Layouts/index.js +86 -0
  595. package/react/components/LeftMenu.d.ts +13 -4
  596. package/react/components/LeftMenu.js +71 -18
  597. package/react/components/ListItemLoader.js +4 -2
  598. package/react/components/Lists/BoxedList.d.ts +44 -0
  599. package/react/components/Lists/BoxedList.js +160 -0
  600. package/react/components/Lists/ContentList.d.ts +51 -0
  601. package/react/components/Lists/ContentList.js +110 -0
  602. package/react/components/Lists/SimpleList.d.ts +21 -0
  603. package/react/components/Lists/SimpleList.js +80 -0
  604. package/react/components/Lists/TableList.d.ts +64 -0
  605. package/react/components/Lists/TableList.js +240 -0
  606. package/react/components/Lists/index.d.ts +2 -0
  607. package/react/components/Lists/index.js +10 -0
  608. package/react/components/Loader.js +4 -2
  609. package/react/components/Menu.d.ts +2 -1
  610. package/react/components/Menu.js +48 -12
  611. package/react/components/Modal.d.ts +7 -2
  612. package/react/components/Modal.js +35 -5
  613. package/react/components/MultiSelect.d.ts +40 -0
  614. package/react/components/MultiSelect.js +70 -0
  615. package/react/components/NavButton.d.ts +2 -1
  616. package/react/components/NavButton.js +9 -4
  617. package/react/components/Navigation/BottomNav.d.ts +24 -0
  618. package/react/components/Navigation/BottomNav.js +88 -0
  619. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  620. package/react/components/Navigation/QuickNavBar.js +117 -0
  621. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  622. package/react/components/Navigation/SideBarMenu.js +79 -0
  623. package/react/components/Navigation/SideBarTabs.d.ts +23 -0
  624. package/react/components/Navigation/SideBarTabs.js +88 -0
  625. package/react/components/Navigation/index.d.ts +3 -0
  626. package/react/components/Navigation/index.js +9 -0
  627. package/react/components/Popover.js +4 -2
  628. package/react/components/PropsList.js +4 -2
  629. package/react/components/RadioButtonGroup.d.ts +29 -0
  630. package/react/components/RadioButtonGroup.js +91 -0
  631. package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
  632. package/react/components/{Radio.js → RadioGroup.js} +20 -14
  633. package/react/components/SearchBar.d.ts +24 -0
  634. package/react/components/SearchBar.js +113 -0
  635. package/react/components/Select.d.ts +7 -2
  636. package/react/components/Select.js +9 -29
  637. package/react/components/SelectGrid.d.ts +1 -1
  638. package/react/components/SelectGrid.js +44 -23
  639. package/react/components/SelectWithTemplate.d.ts +11 -1
  640. package/react/components/SelectWithTemplate.js +23 -12
  641. package/react/components/Skeleton.d.ts +1 -1
  642. package/react/components/Skeleton.js +26 -5
  643. package/react/components/SlidingToolbar.d.ts +1 -1
  644. package/react/components/SlidingToolbar.js +15 -3
  645. package/react/components/Spinner.d.ts +0 -1
  646. package/react/components/Spinner.js +7 -6
  647. package/react/components/StrechBar.js +4 -2
  648. package/react/components/SubNav.d.ts +8 -1
  649. package/react/components/SubNav.js +28 -8
  650. package/react/components/Switch.d.ts +4 -1
  651. package/react/components/Switch.js +25 -11
  652. package/react/components/SwitchGroup.d.ts +1 -0
  653. package/react/components/SwitchGroup.js +6 -4
  654. package/react/components/TabCustom.d.ts +11 -22
  655. package/react/components/TabCustom.js +32 -57
  656. package/react/components/TabList.d.ts +2 -11
  657. package/react/components/TabList.js +17 -36
  658. package/react/components/Tag.d.ts +4 -4
  659. package/react/components/Tag.js +21 -9
  660. package/react/components/TagInput.d.ts +0 -1
  661. package/react/components/TagInput.js +7 -6
  662. package/react/components/TagInputTest.js +13 -9
  663. package/react/components/Text/Heading.d.ts +15 -0
  664. package/react/components/Text/Heading.js +79 -0
  665. package/react/components/Text/Text.d.ts +15 -0
  666. package/react/components/Text/Text.js +67 -0
  667. package/react/components/Text/Time.d.ts +15 -0
  668. package/react/components/Text/Time.js +65 -0
  669. package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
  670. package/react/components/ThemeSelector.js +114 -0
  671. package/react/components/TimePicker.d.ts +11 -1
  672. package/react/components/TimePicker.js +14 -5
  673. package/react/components/Toast.js +1 -1
  674. package/react/components/ToastMessage.js +6 -5
  675. package/react/components/ToastText.js +1 -1
  676. package/react/components/ToastWrapper.d.ts +2 -2
  677. package/react/components/ToastWrapper.js +14 -10
  678. package/react/components/Togglebox.d.ts +2 -1
  679. package/react/components/Togglebox.js +42 -14
  680. package/react/components/Tooltip.d.ts +1 -0
  681. package/react/components/Tooltip.js +14 -10
  682. package/react/components/TreeSelect.d.ts +82 -0
  683. package/react/components/TreeSelect.js +521 -0
  684. package/react/components/WithSizeObserver.d.ts +25 -0
  685. package/react/components/WithSizeObserver.js +95 -0
  686. package/react/components/_Positioner.js +4 -2
  687. package/react/helpers.d.ts +1 -0
  688. package/react/helpers.js +7 -0
  689. package/react/index.d.ts +26 -4
  690. package/react/index.js +62 -6
  691. package/app/styles/_editor-themes.scss +0 -326
  692. package/app/styles/variables/_design-tokens-general.scss +0 -76
  693. package/app-typescript/components/Radio.tsx +0 -57
  694. package/app-typescript/components/RadioButton.tsx +0 -57
  695. package/dist/react/Radios.tsx +0 -391
  696. package/examples/pages/react/Radios.tsx +0 -391
  697. package/patches/@superdesk+primereact+5.0.2-4.patch +0 -13
  698. package/react/components/RadioButton.js +0 -65
@@ -0,0 +1,134 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import { PropsList, Prop, Text } from '../../../app-typescript';
4
+
5
+ interface IProps {
6
+ children?: React.ReactNode;
7
+ }
8
+
9
+ export default class TextDoc extends React.Component<IProps> {
10
+ render() {
11
+ return (
12
+ <section className='docs-page__container'>
13
+ <h2 className='docs-page__h2'>Text</h2>
14
+
15
+ <Markup.ReactMarkupCodePreview>{`
16
+ <Text>Cum sociis natoque penatibus et magnis dis parturient...</Text>
17
+ `}
18
+ </Markup.ReactMarkupCodePreview>
19
+
20
+ <p className="docs-page__paragraph">Text component.</p>
21
+
22
+ <Markup.ReactMarkup>
23
+ <Markup.ReactMarkupPreview>
24
+ <p className="docs-page__paragraph">// Sizes and alignments</p>
25
+ <div className='docs-page__content-row sd-margin-b--5'>
26
+ <Text size='x-small' style='italic'>
27
+ Extra small size (x-small), default alignment (start), italic. Fusce dapibus, tellus ac cursus commodo,
28
+ tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis
29
+ ornare vel eu leo. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
30
+ </Text>
31
+ </div>
32
+ <div className='docs-page__content-row sd-margin-b--5'>
33
+ <Text align='end'>
34
+ Default size (small), align to end. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
35
+ Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
36
+ Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
37
+ posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent
38
+ commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Morbi leo
39
+ risus, porta ac consectetur ac, vestibulum at eros.
40
+ </Text>
41
+ </div>
42
+ <div className='docs-page__content-row sd-margin-b--5'>
43
+ <Text size='medium' align='center'>
44
+ Medium size, center aligned. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere
45
+ consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus,
46
+ porta ac consectetur ac, vestibulum at eros.
47
+ </Text>
48
+ </div>
49
+ <div className='docs-page__content-row sd-margin-b--5'>
50
+ <Text size='large' align='justify'>
51
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
52
+ est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
53
+ consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
54
+ sem lacinia quam venenatis vestibulum.
55
+ </Text>
56
+ </div>
57
+
58
+ <p className="docs-page__paragraph">// Variations</p>
59
+ <div className='docs-page__content-row sd-margin-b--5'>
60
+ <Text weight='light' size='medium'>
61
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
62
+ est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
63
+ consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
64
+ sem lacinia quam venenatis vestibulum.
65
+ </Text>
66
+ </div>
67
+ <div className='docs-page__content-row sd-margin-b--5'>
68
+ <Text fontStyle='serif' weight='strong' size='medium' color='light' align='center'>
69
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
70
+ est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
71
+ consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
72
+ sem lacinia quam venenatis vestibulum.
73
+ </Text>
74
+ </div>
75
+ <div className='docs-page__content-row sd-margin-b--5'>
76
+ <Text fontStyle='serif' weight='light' size='small' align='start'>
77
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
78
+ est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
79
+ consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
80
+ sem lacinia quam venenatis vestibulum.
81
+ </Text>
82
+ </div>
83
+
84
+ </Markup.ReactMarkupPreview>
85
+ <Markup.ReactMarkupCode>{`
86
+ // Sizes and alignments
87
+
88
+ <Text size='x-small' style='italic'>
89
+ Extra small size (x-small), default alignment (start), italic. Fusce dapibus, tellus...
90
+ </Text>
91
+
92
+ <Text align='end'>
93
+ Default size (small), align to end. Praesent commodo cursus magna...
94
+ </Text>
95
+
96
+ <Text size='medium' align='center'>
97
+ Medium size, center aligned. Praesent commodo cursus magna, vel scelerisque...
98
+ </Text>
99
+
100
+ <Text size='large' align='justify'>
101
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl...
102
+ </Text>
103
+
104
+ // Variations
105
+
106
+ <Text weight='light' size='medium'>
107
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
108
+ </Text>
109
+
110
+ <Text fontStyle='serif' weight='medium' size='medium' color='light' align='center'>
111
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
112
+ </Text>
113
+
114
+ <Text className='' fontStyle='serif' weight='medium' size='medium' color='light' align='center'>
115
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
116
+ </Text>
117
+ `}
118
+ </Markup.ReactMarkupCode>
119
+ </Markup.ReactMarkup>
120
+
121
+ <h3 className="docs-page__h3">Props</h3>
122
+ <PropsList>
123
+ <Prop name='weight' isRequired={false} type='light | normal | medium | strong' default='normal' description='Change the default font weight.'/>
124
+ <Prop name='size' isRequired={true} type='x-small | small | medium | large' default='small' description='Choose between four predefined font sizes.'/>
125
+ <Prop name='style' isRequired={false} type='normal | italic' default='normal' description='Change the default text style.'/>
126
+ <Prop name='align' isRequired={false} type='start | end | center | justify' default='start' description='Text-align'/>
127
+ <Prop name='fontStyle' isRequired={false} type='sans | serif' default='sans' description='Choose between the default – sans (Roboto) – and serif (Merriweather) font styles. '/>
128
+ <Prop name='color' isRequired={false} type='normal | light | lighter' default='normal' description='Choose a different text colour. Additional two lighter shades are available.'/>
129
+ <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
130
+ </PropsList>
131
+ </section>
132
+ )
133
+ }
134
+ }
@@ -15,10 +15,16 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
15
15
  render() {
16
16
  return (
17
17
  <TimePicker
18
- value={this.state.time}
19
- onChange={(time) => {
20
- this.setState({time});
21
- }}
18
+ value={this.state.time}
19
+ onChange={(time) => {
20
+ this.setState({time});
21
+ }}
22
+ required
23
+ tabindex={1}
24
+ label={'This is Label'}
25
+ info={'This is info'}
26
+ error={'This is error'}
27
+ allowSeconds
22
28
  />
23
29
  );
24
30
  }
@@ -38,10 +44,13 @@ export default class TimePickerDoc extends React.Component {
38
44
  render() {
39
45
  return (
40
46
  <TimePicker
41
- value={this.state.time}
42
- onChange={(time) => {
43
- this.setState({time});
44
- }}
47
+ value={this.state.time}
48
+ onChange={(time) => {
49
+ this.setState({time});
50
+ }}
51
+ label={'This is Label'}
52
+ info={'This is info'}
53
+ error={'This is error'}
45
54
  />
46
55
  );
47
56
  }
@@ -67,14 +76,15 @@ export default class TimePickerDoc extends React.Component {
67
76
 
68
77
  <h3 className='docs-page__h3'>Props</h3>
69
78
  <PropsList>
70
- <Prop name='value' isRequired={true} type='string' default='/' description='Item value' />
71
- <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required' />
72
- <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
79
+ <Prop name='value' isRequired={true} type='string' default='/' description='Item value.' />
80
+ <Prop name='allowSeconds' isRequired={true} type='string' default='/' description='Allow seconds.' />
81
+ <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required.' />
82
+ <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled.' />
73
83
  </PropsList>
74
84
 
75
85
  <h3 className='docs-page__h3'>Events</h3>
76
86
  <PropsList>
77
- <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of time input' />
87
+ <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of time input.' />
78
88
  </PropsList>
79
89
  </section>
80
90
  );
@@ -40,6 +40,7 @@ const ToggleboxDocs = () => {
40
40
  <Prop name='hideUsingCSS' isRequired={false} type='boolean' default='false' description='Usefull when working with forms. Content of togglebox will be hidden but remain rendered.' />
41
41
  <Prop name='initiallyOpen' isRequired={false} type='boolean' default='false' description='Opens togglebox on initial render' />
42
42
  <Prop name='className' isRequired={false} type='string' default='null' description='Style class of the component' />
43
+ <Prop name='margin' isRequired={false} type='none | small | normal | large' default='normal' description='Defines the bottom margin of the toggle box.' />
43
44
  <Prop name='onOpen' isRequired={false} type='function' default='null' description='Callback on open event' />
44
45
  <Prop name='onClose' isRequired={false} type='function' default='null' description='Callback on close event' />
45
46
  </PropsList>
@@ -47,5 +48,4 @@ const ToggleboxDocs = () => {
47
48
  )
48
49
  }
49
50
 
50
-
51
51
  export default ToggleboxDocs;
@@ -60,7 +60,7 @@ export default class TooltipDoc extends React.Component {
60
60
 
61
61
  <div className="docs-page__content-row docs-page__content-row--no-margin">
62
62
 
63
- <div className="docs-page__content-row docs-page__content-row--no-margin" style={{background: "#ebebeb", width: "100%", padding: "5px", overflow: "hidden"}}>
63
+ <div className="docs-page__content-row docs-page__content-row--no-margin">
64
64
  <Tooltip text="I'm appended to body" flow='top' appendToBody={true}>
65
65
  <Button text='top' onClick={() => false} />
66
66
  </Tooltip>
@@ -0,0 +1,422 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import { PropsList, Prop } from '../../../app-typescript';
4
+ import { MultiSelect } from '../../../app-typescript/components/MultiSelect';
5
+ import { ITreeNode, TreeSelect } from '../../../app-typescript/components/TreeSelect';
6
+
7
+ interface IState {
8
+ value: any;
9
+ value2: any;
10
+ options: any;
11
+ options2: any;
12
+ inputValue: string;
13
+ arr: any;
14
+ }
15
+
16
+ let options = [
17
+ {
18
+ value: {name: 'Category1'},
19
+ children: [
20
+ {
21
+ value: {name: 'Sub-category1'},
22
+ children: [
23
+ {value: {name: 'Item20'}}
24
+ ]
25
+ },
26
+ {
27
+ value: {name: 'Sub-category2'},
28
+ children: [
29
+ {value: {name: 'Item21'}}
30
+ ]
31
+ }
32
+ ,
33
+ {
34
+ value: {name: 'Sub-category3'},
35
+ children: [
36
+ {value: {name: 'Item22'}}
37
+ ]
38
+ }
39
+ ,
40
+ {
41
+ value: {name: 'Sub-category4'},
42
+ children: [
43
+ {value: {name: 'Item23'}}
44
+ ]
45
+ }
46
+ ,
47
+ {
48
+ value: {name: 'Sub-category5'},
49
+ children: [
50
+ {value: {name: 'Item24'}}
51
+ ]
52
+ }
53
+ ,
54
+ {
55
+ value: {name: 'Sub-category6'},
56
+ children: [
57
+ {value: {name: 'Item25'}}
58
+ ]
59
+ }
60
+ ]
61
+ },
62
+ {
63
+ value: {name: 'Category2'},
64
+ children: [
65
+ {
66
+ value: {name: 'Item8'}
67
+ },
68
+ {
69
+ value: {name: 'Item9'}
70
+ }
71
+ ]
72
+ },
73
+ {
74
+ value: {name: 'Category3', bgColor: 'red'},
75
+ children: [
76
+ {
77
+ value: {name: 'Item10'}
78
+ },
79
+ {
80
+ value: {name: 'Item11'}
81
+ }
82
+ ]
83
+ },
84
+ ]
85
+
86
+ let options2 = [
87
+ {
88
+ value: {name: 'Category1', border: 'red'},
89
+ children: [
90
+ {
91
+ value: {name: 'Sub-category1'},
92
+ children: [
93
+ {value: {name: 'Item20'}}
94
+ ]
95
+ },
96
+ {
97
+ value: {name: 'Sub-category2'},
98
+ children: [
99
+ {value: {name: 'Item21'}}
100
+ ]
101
+ }
102
+ ,
103
+ {
104
+ value: {name: 'Sub-category3'},
105
+ children: [
106
+ {value: {name: 'Item22'}}
107
+ ]
108
+ }
109
+ ,
110
+ {
111
+ value: {name: 'Sub-category4'},
112
+ children: [
113
+ {value: {name: 'Item23'}}
114
+ ]
115
+ }
116
+ ,
117
+ {
118
+ value: {name: 'Sub-category5'},
119
+ children: [
120
+ {value: {name: 'Item24'}}
121
+ ]
122
+ }
123
+ ,
124
+ {
125
+ value: {name: 'Sub-category6'},
126
+ children: [
127
+ {value: {name: 'Item25'}}
128
+ ]
129
+ }
130
+ ]
131
+ },
132
+ {
133
+ value: {name: 'Category2', border: 'green'},
134
+ children: [
135
+ {
136
+ value: {name: 'Item8'}
137
+ },
138
+ {
139
+ value: {name: 'Item9'}
140
+ }
141
+ ]
142
+ },
143
+ {
144
+ value: {name: 'Category3', border: 'yellow'},
145
+ children: [
146
+ {
147
+ value: {name: 'Item10'}
148
+ },
149
+ {
150
+ value: {name: 'Item11'}
151
+ }
152
+ ]
153
+ },
154
+ ]
155
+
156
+ let fetchedArr = [];
157
+ fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(response => response.json()).then(data => fetchedArr = data
158
+ );
159
+
160
+ type ICancelFn = () => void;
161
+
162
+ function searchOptions(
163
+ term: string,
164
+ callback: (res: any) => void,
165
+ ): ICancelFn {
166
+ let timeout = setTimeout(() => {
167
+
168
+ callback(
169
+ fetchedArr
170
+ .filter((item: any) => item.display_name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
171
+ .map((item) => ({value: item})),
172
+ );
173
+ }, 1000);
174
+
175
+ return () => {
176
+ clearTimeout(timeout);
177
+ }
178
+ }
179
+
180
+ export class TreeSelectDocs extends React.Component<{}, IState> {
181
+ constructor(props) {
182
+ super(props);
183
+ this.state = {
184
+ value: [],
185
+ value2: [],
186
+ options: options,
187
+ options2: options,
188
+ inputValue: '',
189
+ arr: []
190
+ }
191
+
192
+
193
+ this.handleChange = this.handleChange.bind(this);
194
+ }
195
+
196
+ handleChange(e, option) {
197
+ if(option.item) {
198
+ e.stopPropagation();
199
+ e.preventDefault();
200
+
201
+ this.setState({
202
+ options: option.item
203
+ })
204
+ }
205
+ }
206
+
207
+ render() {
208
+ return (
209
+ <section className='docs-page__container'>
210
+ <h2 className='docs-page__h2'>TreeSelect</h2>
211
+
212
+ <Markup.ReactMarkupCodePreview>{`
213
+ <TreeSelect
214
+ options={this.state.options2}
215
+ getLabel={'label'}
216
+ getMultilevelArray={'items'}
217
+ selectBranchWithChildren={true}
218
+ onChange={() => false}
219
+ />
220
+ `}
221
+ </Markup.ReactMarkupCodePreview>
222
+
223
+ <Markup.ReactMarkup>
224
+ <Markup.ReactMarkupPreview>
225
+ <div className='docs-page__content-row docs-page__content-row--no-margin'>
226
+ <div className='form__row'>
227
+ <TreeSelect
228
+ value={[{name: 'Item1'}, {name: 'Item2'}]}
229
+ getOptions={() => options}
230
+ kind={'synchronous'}
231
+ getId={(item) => item.name}
232
+ getLabel={(item) => item.name}
233
+ getBackgroundColor={(item: any) => item.bgColor}
234
+ selectBranchWithChildren={true}
235
+ allowMultiple
236
+ fullWidth
237
+ singleLevelSearch
238
+ required
239
+ info={'Info Message'}
240
+ error={'Error Message'}
241
+ label={'TreeSelect Label'}
242
+ searchPlaceholder='Search...'
243
+ onChange={(e) => false}
244
+ valueTemplate={(item, Wrapper) => {
245
+ return (
246
+ <Wrapper backgroundColor={item.bgColor}>
247
+ <span>{item.name}</span>
248
+ </Wrapper>
249
+ );
250
+ }}
251
+ />
252
+ </div>
253
+ </div>
254
+ </Markup.ReactMarkupPreview>
255
+
256
+ <Markup.ReactMarkupCode>{`
257
+ <TreeSelect
258
+ value={[{name: 'Item1'}, {name: 'Item2'}]}
259
+ getOptions={() => options}
260
+ kind={'synchronous'}
261
+ getId={(item) => item.name}
262
+ getLabel={(item) => item.name}
263
+ getBackgroundColor={(item: any) => item.bgColor}
264
+ selectBranchWithChildren={true}
265
+ allowMultiple
266
+ fullWidth
267
+ singleLevelSearch
268
+ required
269
+ info={'Info Message'}
270
+ error={'Error Message'}
271
+ label={'TreeSelect Label'}
272
+ searchPlaceholder='Search...'
273
+ onChange={(e) => false}
274
+ valueTemplate={(item, Wrapper) => {
275
+ return (
276
+ <Wrapper backgroundColor={item.bgColor}>
277
+ <span>{item.name}</span>
278
+ </Wrapper>
279
+ );
280
+ }}
281
+ />
282
+ `}</Markup.ReactMarkupCode>
283
+
284
+ </Markup.ReactMarkup>
285
+
286
+ <p className='docs-page__paragraph'>Asynchronous mode in TreeSelect component.</p>
287
+ <Markup.ReactMarkup>
288
+ <Markup.ReactMarkupPreview>
289
+ <div className='docs-page__content-row docs-page__content-row--no-margin'>
290
+ <div className='form__row'>
291
+ <TreeSelect
292
+ kind="asynchronous"
293
+ searchOptions={searchOptions}
294
+ value={this.state.value}
295
+ onChange={(val) => {
296
+ this.setState({value: val});
297
+ }}
298
+ getLabel={({display_name}) => display_name
299
+ }
300
+ getId={({qcode}) => qcode.display_name}
301
+ selectBranchWithChildren={false}
302
+ allowMultiple={true}
303
+ />
304
+ </div>
305
+ </div>
306
+ </Markup.ReactMarkupPreview>
307
+
308
+ <Markup.ReactMarkupCode>{`
309
+ <TreeSelect
310
+ kind="asynchronous"
311
+ searchOptions={searchOptions}
312
+ value={this.state.value}
313
+ onChange={(val) => {
314
+ this.setState({value: val});
315
+ }}
316
+ getLabel={({name}) => name}
317
+ getId={({qcode}) => qcode}
318
+ selectBranchWithChildren={false}
319
+ optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
320
+ allowMultiple={true}
321
+ />
322
+ `}</Markup.ReactMarkupCode>
323
+
324
+ </Markup.ReactMarkup>
325
+
326
+ <p className='docs-page__paragraph'>TreeSelect with custom template.</p>
327
+ <Markup.ReactMarkup>
328
+ <Markup.ReactMarkupPreview>
329
+ <div className='docs-page__content-row docs-page__content-row--no-margin'>
330
+ <div className='form__row'>
331
+ <TreeSelect
332
+ getOptions={() => options2}
333
+ kind={'synchronous'}
334
+ getId={(item) => item.name}
335
+ getLabel={(item) => item.name}
336
+ getBackgroundColor={(item) => item.bgColor}
337
+ getBorderColor={(item) => item.border}
338
+ placeholder='Select one'
339
+ selectBranchWithChildren={true}
340
+ onChange={(e) => false}
341
+ optionTemplate={(item: any) => {
342
+ return <div>Label: {item.name}</div>
343
+ }}
344
+ valueTemplate={(item: any, Wrapper) => {
345
+ return <Wrapper borderColor={item.border}>
346
+ <span>{item.name}</span>
347
+ </Wrapper>
348
+ }}
349
+ />
350
+ </div>
351
+ </div>
352
+ </Markup.ReactMarkupPreview>
353
+
354
+ <Markup.ReactMarkupCode>{`
355
+ <TreeSelect
356
+ getOptions={() => options2}
357
+ kind={'synchronous'}
358
+ getId={(item) => item.name}
359
+ getLabel={(item) => item.name}
360
+ getBackgroundColor={(item) => item.bgColor}
361
+ getBorderColor={(item) => item.border}
362
+ placeholder='Select one'
363
+ selectBranchWithChildren={true}
364
+ onChange={(e) => false}
365
+ optionTemplate={(item: any) => {
366
+ return <div>Label: {item.name}</div>
367
+ }}
368
+ valueTemplate={(item: any, Wrapper) => {
369
+ return <Wrapper borderColor={item.border}>
370
+ <span>{item.name}</span>
371
+ </Wrapper>
372
+ }}
373
+ />
374
+ `}</Markup.ReactMarkupCode>
375
+
376
+ </Markup.ReactMarkup>
377
+
378
+ <h3 className="docs-page__h3">Props</h3>
379
+ <PropsList>
380
+ <Prop name='value' isRequired={false} type='Array<T>' default='/' description='Value of the component.'/>
381
+ <Prop name='getOptions' isRequired={true} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
382
+ <Prop name='kind' isRequired={true} type='synchronous | asynchronous' default='/' description='Type of TreeSelect component.'/>
383
+ <Prop name='width' isRequired={false} type='medium | full-width (100%)' default='100%' description='Dropdown width.'/>
384
+ <Prop name='selectBranchWithChildren' isRequired={false} type='boolean' default='false' description='When specified, select branch with children is enabled.'/>
385
+ <Prop name='readonly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.'/>
386
+ <Prop name='loading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator in dropdown.'/>
387
+ <Prop name='allowMultiple' isRequired={false} type='boolean' default='/' description='Enable multi-select mode.'/>
388
+ <Prop name='singleLevelSearch' isRequired={false} type='boolean' default='/' description='Limit search to only the level that is displayed.'/>
389
+ <Prop name='placeholder' isRequired={false} type='string' default='/' description='Placeholder of component in single select mode.'/>
390
+ <Prop name='searchPlaceholder' isRequired={false} type='string' default='/' description='Filter input placeholder.'/>
391
+ <Prop name='getLabel' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
392
+ <Prop name='getId' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
393
+ <Prop name='getBackgroundColor' isRequired={true} type='Function' default='/' description='Function to return background color of individual item in options.'/>
394
+ <Prop name='getBorderColor' isRequired={true} type='Function' default='/' description='Function to return border color of individual item in options in single-select mode.'/>
395
+ <Prop name='valueTemplate' isRequired={false} type='Function(item, Wrapper)' default='/' description='Function that gets an item in the value and returns the content for it.'/>
396
+ <Prop name='optionTemplate' isRequired={false} type='Function(item)' default='/' description='Function that gets the option and returns the content for it.'/>
397
+ <Prop name='searchOptions' isRequired={false} type='Function' default='/' description='The function will be called when a search is initiated from UI in asynchronous mode.'/>
398
+ <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
399
+ <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
400
+ <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
401
+ <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
402
+ <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
403
+ <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
404
+ <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
405
+ <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
406
+ </PropsList>
407
+
408
+ <p className='docs-page__paragraph'>synchronous:</p>
409
+ <PropsList>
410
+ <Prop name='getOptions' isRequired={false} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
411
+ </PropsList>
412
+
413
+ <p className='docs-page__paragraph'>asynchronous:</p>
414
+ <PropsList>
415
+ <Prop name='getOptions' isRequired={false} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
416
+ <Prop name='searchOptions' isRequired={false} type='Function' default='/' description='function will be called when a search is initiated from UI.'/>
417
+ </PropsList>
418
+
419
+ </section>
420
+ )
421
+ }
422
+ }