superdesk-ui-framework 4.0.46 → 4.0.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (563) hide show
  1. package/.eslintrc.js +0 -1
  2. package/.eslintrc.json +2 -5
  3. package/.github/workflows/test.yml +22 -26
  4. package/.prettierignore +3 -0
  5. package/.prettierrc.js +9 -0
  6. package/.travis.yml +4 -4
  7. package/README.md +14 -1
  8. package/app/styles/form-elements/_forms-general.scss +0 -4
  9. package/app-typescript/components/Alert.tsx +12 -16
  10. package/app-typescript/components/Autocomplete.tsx +53 -42
  11. package/app-typescript/components/Badge.tsx +1 -1
  12. package/app-typescript/components/Button.tsx +5 -11
  13. package/app-typescript/components/ButtonGroup.tsx +15 -10
  14. package/app-typescript/components/Carousel.tsx +25 -26
  15. package/app-typescript/components/CheckButtonGroup.tsx +6 -10
  16. package/app-typescript/components/Checkbox.tsx +16 -10
  17. package/app-typescript/components/CheckboxButton.tsx +22 -13
  18. package/app-typescript/components/ContentDivider.tsx +6 -7
  19. package/app-typescript/components/CreateButton.tsx +8 -6
  20. package/app-typescript/components/DatePicker.tsx +59 -55
  21. package/app-typescript/components/DateTimePicker.tsx +175 -117
  22. package/app-typescript/components/Divider.tsx +2 -4
  23. package/app-typescript/components/DonutChart.tsx +11 -6
  24. package/app-typescript/components/DragHandle.tsx +10 -6
  25. package/app-typescript/components/DragHandleDots.tsx +1 -3
  26. package/app-typescript/components/DropZone.tsx +27 -25
  27. package/app-typescript/components/Dropdown.tsx +61 -102
  28. package/app-typescript/components/DropdownFirst.tsx +57 -69
  29. package/app-typescript/components/DurationInput.tsx +64 -54
  30. package/app-typescript/components/Editor/EditorButton.tsx +4 -3
  31. package/app-typescript/components/EmptyState.tsx +10 -14
  32. package/app-typescript/components/Form/FormGroup.tsx +9 -16
  33. package/app-typescript/components/Form/FormItem.tsx +1 -5
  34. package/app-typescript/components/Form/FormLabel.tsx +0 -1
  35. package/app-typescript/components/Form/FormRow.tsx +12 -19
  36. package/app-typescript/components/Form/FormRowNew.tsx +9 -16
  37. package/app-typescript/components/Form/FormText.tsx +1 -5
  38. package/app-typescript/components/Form/InputBase.tsx +12 -11
  39. package/app-typescript/components/Form/InputNew.tsx +11 -12
  40. package/app-typescript/components/Form/InputWrapper.tsx +9 -18
  41. package/app-typescript/components/Form/index.tsx +9 -9
  42. package/app-typescript/components/FormLabel.tsx +1 -5
  43. package/app-typescript/components/GridItem.tsx +38 -69
  44. package/app-typescript/components/GridList.tsx +2 -6
  45. package/app-typescript/components/HeadingText.tsx +4 -5
  46. package/app-typescript/components/IconButton.tsx +4 -10
  47. package/app-typescript/components/IconLabel.tsx +5 -5
  48. package/app-typescript/components/IconPicker.tsx +128 -126
  49. package/app-typescript/components/IllustrationButton.tsx +2 -8
  50. package/app-typescript/components/Input.tsx +2 -2
  51. package/app-typescript/components/Label.tsx +11 -7
  52. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +1 -5
  53. package/app-typescript/components/Layouts/AuthoringContainer.tsx +4 -6
  54. package/app-typescript/components/Layouts/AuthoringFrame.tsx +4 -20
  55. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +1 -5
  56. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +1 -5
  57. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +1 -5
  58. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +1 -5
  59. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +1 -5
  60. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +1 -5
  61. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +1 -5
  62. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +1 -3
  63. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +3 -6
  64. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +5 -5
  65. package/app-typescript/components/Layouts/AuthoringMain.tsx +3 -4
  66. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +1 -5
  67. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +1 -5
  68. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +1 -6
  69. package/app-typescript/components/Layouts/BottomBarAction.tsx +8 -10
  70. package/app-typescript/components/Layouts/Container.tsx +13 -8
  71. package/app-typescript/components/Layouts/ContentSplitter.tsx +2 -6
  72. package/app-typescript/components/Layouts/CoreLayout.tsx +5 -12
  73. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +1 -1
  74. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +1 -5
  75. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -4
  76. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +1 -5
  77. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +2 -4
  78. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +8 -9
  79. package/app-typescript/components/Layouts/HamburgerButton.tsx +13 -14
  80. package/app-typescript/components/Layouts/HeaderPanel.tsx +1 -5
  81. package/app-typescript/components/Layouts/Layout.tsx +10 -16
  82. package/app-typescript/components/Layouts/LayoutContainer.tsx +2 -7
  83. package/app-typescript/components/Layouts/LeftPanel.tsx +4 -11
  84. package/app-typescript/components/Layouts/MainMenu.tsx +18 -32
  85. package/app-typescript/components/Layouts/MainPanel.tsx +10 -11
  86. package/app-typescript/components/Layouts/NotificationPanel.tsx +20 -29
  87. package/app-typescript/components/Layouts/OverlayPanel.tsx +3 -5
  88. package/app-typescript/components/Layouts/PageLayout.tsx +4 -21
  89. package/app-typescript/components/Layouts/Panel.tsx +45 -81
  90. package/app-typescript/components/Layouts/index.tsx +39 -39
  91. package/app-typescript/components/LeftMenu.tsx +51 -53
  92. package/app-typescript/components/ListItemLoader.tsx +1 -1
  93. package/app-typescript/components/Lists/BoxedList.tsx +16 -41
  94. package/app-typescript/components/Lists/CalendarWeekDayItem.tsx +2 -10
  95. package/app-typescript/components/Lists/ContentList.tsx +68 -62
  96. package/app-typescript/components/Lists/SimpleList.tsx +13 -12
  97. package/app-typescript/components/Lists/TableList.tsx +169 -217
  98. package/app-typescript/components/Lists/index.tsx +2 -2
  99. package/app-typescript/components/Loader.tsx +1 -3
  100. package/app-typescript/components/Menu.tsx +2 -4
  101. package/app-typescript/components/Modal.tsx +21 -21
  102. package/app-typescript/components/MultiSelect.tsx +6 -6
  103. package/app-typescript/components/NavButton.tsx +10 -8
  104. package/app-typescript/components/Navigation/BottomNav.tsx +21 -17
  105. package/app-typescript/components/Navigation/QuickNavBar.tsx +40 -37
  106. package/app-typescript/components/Navigation/SideBarMenu.tsx +21 -17
  107. package/app-typescript/components/Navigation/SideBarTabs.tsx +13 -19
  108. package/app-typescript/components/Navigation/index.tsx +3 -3
  109. package/app-typescript/components/Popover.tsx +19 -21
  110. package/app-typescript/components/PropsList.tsx +2 -4
  111. package/app-typescript/components/RadioButtonGroup.tsx +48 -45
  112. package/app-typescript/components/RadioGroup.tsx +9 -8
  113. package/app-typescript/components/ResizablePanels.tsx +2 -3
  114. package/app-typescript/components/ResizeObserverComponent.tsx +1 -5
  115. package/app-typescript/components/SearchBar.tsx +53 -45
  116. package/app-typescript/components/Select.tsx +6 -8
  117. package/app-typescript/components/SelectGrid.tsx +32 -40
  118. package/app-typescript/components/SelectPreview.tsx +31 -25
  119. package/app-typescript/components/SelectWithTemplate.tsx +10 -11
  120. package/app-typescript/components/ShowPopup.tsx +30 -46
  121. package/app-typescript/components/SidebarMenu.tsx +19 -18
  122. package/app-typescript/components/Skeleton.tsx +12 -11
  123. package/app-typescript/components/SlidingToolbar.tsx +1 -6
  124. package/app-typescript/components/Spinner.tsx +2 -6
  125. package/app-typescript/components/StrechBar.tsx +1 -5
  126. package/app-typescript/components/SubNav.tsx +10 -8
  127. package/app-typescript/components/SvgIconIllustration.tsx +477 -105
  128. package/app-typescript/components/Switch.tsx +14 -12
  129. package/app-typescript/components/SwitchGroup.tsx +10 -10
  130. package/app-typescript/components/TabCustom.tsx +28 -35
  131. package/app-typescript/components/TabList.tsx +13 -10
  132. package/app-typescript/components/Tag.tsx +21 -24
  133. package/app-typescript/components/TagInput.tsx +4 -11
  134. package/app-typescript/components/Text/Heading.tsx +21 -41
  135. package/app-typescript/components/Text/Text.tsx +16 -12
  136. package/app-typescript/components/Text/Time.tsx +14 -10
  137. package/app-typescript/components/ThemeSelector.tsx +15 -14
  138. package/app-typescript/components/TimePicker.tsx +2 -2
  139. package/app-typescript/components/TimePickerV2.tsx +20 -20
  140. package/app-typescript/components/Toast.tsx +11 -7
  141. package/app-typescript/components/ToastMessage.tsx +3 -14
  142. package/app-typescript/components/ToastText.tsx +30 -32
  143. package/app-typescript/components/ToastWrapper.tsx +76 -74
  144. package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +30 -45
  145. package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx +31 -33
  146. package/app-typescript/components/ToggleBox/index.tsx +3 -7
  147. package/app-typescript/components/Tooltip.tsx +1 -1
  148. package/app-typescript/components/TreeMenu.tsx +72 -81
  149. package/app-typescript/components/TreeSelect/KeyboardNavigation.tsx +1 -5
  150. package/app-typescript/components/TreeSelect/TreeSelect.tsx +221 -238
  151. package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +20 -24
  152. package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +12 -15
  153. package/app-typescript/components/WithPagination.tsx +34 -39
  154. package/app-typescript/components/WithPopover.tsx +0 -1
  155. package/app-typescript/components/WithPortal.tsx +4 -7
  156. package/app-typescript/components/WithSizeObserver.tsx +2 -6
  157. package/app-typescript/components/_Positioner.tsx +26 -26
  158. package/app-typescript/components/avatar/avatar-action-add.tsx +1 -6
  159. package/app-typescript/components/avatar/avatar-group.tsx +49 -68
  160. package/app-typescript/components/avatar/avatar-image.tsx +18 -12
  161. package/app-typescript/components/avatar/avatar-placeholder.tsx +3 -15
  162. package/app-typescript/components/avatar/avatar-text.tsx +1 -4
  163. package/app-typescript/components/avatar/avatar-wrapper.tsx +18 -30
  164. package/app-typescript/components/avatar/avatar.tsx +5 -8
  165. package/app-typescript/components/with-pagination.spec.tsx +8 -27
  166. package/app-typescript/helpers.tsx +2 -2
  167. package/app-typescript/index.ts +111 -100
  168. package/declarations.d.ts +1 -1
  169. package/dist/components/Alerts.tsx +171 -78
  170. package/dist/components/Autocomplete.tsx +187 -78
  171. package/dist/components/Avatar.tsx +52 -112
  172. package/dist/components/Badges.tsx +111 -67
  173. package/dist/components/BigIconFont.tsx +29 -17
  174. package/dist/components/BoxedList.tsx +244 -114
  175. package/dist/components/ButtonGroups.tsx +213 -147
  176. package/dist/components/Buttons.tsx +409 -137
  177. package/dist/components/Card.tsx +6 -7
  178. package/dist/components/Carousel.tsx +126 -39
  179. package/dist/components/Checkboxs.tsx +446 -105
  180. package/dist/components/Container.tsx +95 -48
  181. package/dist/components/ContentDivider.tsx +110 -63
  182. package/dist/components/ContentList.tsx +577 -253
  183. package/dist/components/CreateButton.tsx +71 -21
  184. package/dist/components/DatePicker.tsx +102 -26
  185. package/dist/components/DateTimePicker.tsx +46 -10
  186. package/dist/components/DragHandleDocs.tsx +56 -26
  187. package/dist/components/DropZone.tsx +67 -29
  188. package/dist/components/Dropdowns.tsx +220 -131
  189. package/dist/components/DurationInput.tsx +92 -32
  190. package/dist/components/EmptyStates.tsx +61 -26
  191. package/dist/components/GridItem.tsx +190 -91
  192. package/dist/components/GridList.tsx +37 -17
  193. package/dist/components/Heading.tsx +81 -35
  194. package/dist/components/IconButtons.tsx +125 -32
  195. package/dist/components/IconFont.tsx +24 -12
  196. package/dist/components/IconLabels.tsx +146 -39
  197. package/dist/components/IconPicker.tsx +30 -13
  198. package/dist/components/IllustrationButton.tsx +40 -20
  199. package/dist/components/Index.tsx +128 -114
  200. package/dist/components/Inputs.tsx +153 -51
  201. package/dist/components/Labels.tsx +191 -117
  202. package/dist/components/LeftNavigations.tsx +327 -100
  203. package/dist/components/ListItems.tsx +8 -9
  204. package/dist/components/Loader.tsx +5 -4
  205. package/dist/components/Menu.tsx +48 -26
  206. package/dist/components/Modal.tsx +298 -104
  207. package/dist/components/MultiSelect.tsx +189 -53
  208. package/dist/components/NavButtons.tsx +86 -30
  209. package/dist/components/Panel.tsx +367 -120
  210. package/dist/components/Popover.tsx +37 -17
  211. package/dist/components/QuickNavigationBar.tsx +222 -86
  212. package/dist/components/RadioGroup.tsx +375 -137
  213. package/dist/components/ResizablePanels.tsx +8 -14
  214. package/dist/components/SelectGrid.tsx +79 -38
  215. package/dist/components/SelectWithTemplate.tsx +23 -14
  216. package/dist/components/Selects.tsx +94 -29
  217. package/dist/components/SimpleList.tsx +91 -41
  218. package/dist/components/SubNav.tsx +57 -37
  219. package/dist/components/Switch.tsx +168 -42
  220. package/dist/components/TableList.tsx +220 -66
  221. package/dist/components/Tabs.tsx +149 -64
  222. package/dist/components/TagInputDocs.tsx +73 -17
  223. package/dist/components/Tags.tsx +104 -73
  224. package/dist/components/Text.tsx +108 -58
  225. package/dist/components/TimePicker.tsx +74 -20
  226. package/dist/components/Toasts.tsx +162 -80
  227. package/dist/components/Togglebox.tsx +164 -62
  228. package/dist/components/Tooltips.tsx +27 -15
  229. package/dist/components/TreeMenu.tsx +95 -59
  230. package/dist/components/TreeSelect.tsx +297 -162
  231. package/dist/components/WithPaginationDocs.tsx +15 -16
  232. package/dist/components/WithSizeObserver.tsx +9 -9
  233. package/dist/components/tree-select/TreeSelect.tsx +126 -77
  234. package/dist/components/tree-select/example-1.tsx +8 -12
  235. package/dist/components/tree-select/example-2.tsx +2 -5
  236. package/dist/components/utilities/BorderRadiusUtilities.tsx +28 -13
  237. package/dist/components/utilities/BorderUtilities.tsx +31 -32
  238. package/dist/components/utilities/DisplayUtilities.tsx +4 -5
  239. package/dist/components/utilities/FlexAndGridUtilities.tsx +38 -38
  240. package/dist/components/utilities/ObjectFitUtilities.tsx +4 -6
  241. package/dist/components/utilities/ObjectPositionUtilities.tsx +3 -4
  242. package/dist/components/utilities/OpacityUtilities.tsx +4 -7
  243. package/dist/components/utilities/OverflowUtilities.tsx +4 -5
  244. package/dist/components/utilities/PositionUtilities.tsx +4 -5
  245. package/dist/components/utilities/ShadowUtilities.tsx +15 -16
  246. package/dist/components/utilities/SpacingUtilities.tsx +483 -178
  247. package/dist/components/utilities/TextUtilities.tsx +109 -60
  248. package/dist/design-patterns/Index.tsx +8 -11
  249. package/dist/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  250. package/dist/examples.bundle.css +1257 -1155
  251. package/dist/examples.bundle.js +6246 -5620
  252. package/dist/playgrounds/dummy-data/items.ts +9 -8
  253. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  254. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  255. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  256. package/dist/playgrounds/react-playgrounds/Index.tsx +11 -11
  257. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  258. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  259. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  260. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  261. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  262. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  263. package/dist/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  264. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  265. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  266. package/dist/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  267. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  268. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  269. package/dist/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  270. package/dist/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  271. package/dist/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  272. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  273. package/dist/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  274. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  275. package/dist/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  276. package/dist/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  277. package/dist/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  278. package/dist/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  279. package/dist/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  280. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  281. package/dist/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  282. package/dist/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  283. package/dist/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  284. package/dist/playgrounds/react-playgrounds/tsconfig.json +1 -1
  285. package/dist/superdesk-ui.bundle.css +0 -3
  286. package/dist/superdesk-ui.bundle.js +1791 -1865
  287. package/dist/vendor.bundle.js +2 -2
  288. package/examples/css/docs-page.css +1135 -1116
  289. package/examples/css/reset.css +124 -43
  290. package/examples/css/vendor.css +125 -125
  291. package/examples/index.js +138 -139
  292. package/examples/js/doc.js +41 -40
  293. package/examples/js/react.js +82 -48
  294. package/examples/pages/components/Alerts.tsx +171 -78
  295. package/examples/pages/components/Autocomplete.tsx +187 -78
  296. package/examples/pages/components/Avatar.tsx +52 -112
  297. package/examples/pages/components/Badges.tsx +111 -67
  298. package/examples/pages/components/BigIconFont.tsx +29 -17
  299. package/examples/pages/components/BoxedList.tsx +244 -114
  300. package/examples/pages/components/ButtonGroups.tsx +213 -147
  301. package/examples/pages/components/Buttons.tsx +409 -137
  302. package/examples/pages/components/Card.tsx +6 -7
  303. package/examples/pages/components/Carousel.tsx +126 -39
  304. package/examples/pages/components/Checkboxs.tsx +446 -105
  305. package/examples/pages/components/Container.tsx +95 -48
  306. package/examples/pages/components/ContentDivider.tsx +110 -63
  307. package/examples/pages/components/ContentList.tsx +577 -253
  308. package/examples/pages/components/CreateButton.tsx +71 -21
  309. package/examples/pages/components/DatePicker.tsx +102 -26
  310. package/examples/pages/components/DateTimePicker.tsx +46 -10
  311. package/examples/pages/components/DragHandleDocs.tsx +56 -26
  312. package/examples/pages/components/DropZone.tsx +67 -29
  313. package/examples/pages/components/Dropdowns.tsx +220 -131
  314. package/examples/pages/components/DurationInput.tsx +92 -32
  315. package/examples/pages/components/EmptyStates.tsx +61 -26
  316. package/examples/pages/components/GridItem.tsx +190 -91
  317. package/examples/pages/components/GridList.tsx +37 -17
  318. package/examples/pages/components/Heading.tsx +81 -35
  319. package/examples/pages/components/IconButtons.tsx +125 -32
  320. package/examples/pages/components/IconFont.tsx +24 -12
  321. package/examples/pages/components/IconLabels.tsx +146 -39
  322. package/examples/pages/components/IconPicker.tsx +30 -13
  323. package/examples/pages/components/IllustrationButton.tsx +40 -20
  324. package/examples/pages/components/Index.tsx +128 -114
  325. package/examples/pages/components/Inputs.tsx +153 -51
  326. package/examples/pages/components/Labels.tsx +191 -117
  327. package/examples/pages/components/LeftNavigations.tsx +327 -100
  328. package/examples/pages/components/ListItems.tsx +8 -9
  329. package/examples/pages/components/Loader.tsx +5 -4
  330. package/examples/pages/components/Menu.tsx +48 -26
  331. package/examples/pages/components/Modal.tsx +298 -104
  332. package/examples/pages/components/MultiSelect.tsx +189 -53
  333. package/examples/pages/components/NavButtons.tsx +86 -30
  334. package/examples/pages/components/Panel.tsx +367 -120
  335. package/examples/pages/components/Popover.tsx +37 -17
  336. package/examples/pages/components/QuickNavigationBar.tsx +222 -86
  337. package/examples/pages/components/RadioGroup.tsx +375 -137
  338. package/examples/pages/components/ResizablePanels.tsx +8 -14
  339. package/examples/pages/components/SelectGrid.tsx +79 -38
  340. package/examples/pages/components/SelectWithTemplate.tsx +23 -14
  341. package/examples/pages/components/Selects.tsx +94 -29
  342. package/examples/pages/components/SimpleList.tsx +91 -41
  343. package/examples/pages/components/SubNav.tsx +57 -37
  344. package/examples/pages/components/Switch.tsx +168 -42
  345. package/examples/pages/components/TableList.tsx +220 -66
  346. package/examples/pages/components/Tabs.tsx +149 -64
  347. package/examples/pages/components/TagInputDocs.tsx +73 -17
  348. package/examples/pages/components/Tags.tsx +104 -73
  349. package/examples/pages/components/Text.tsx +108 -58
  350. package/examples/pages/components/TimePicker.tsx +74 -20
  351. package/examples/pages/components/Toasts.tsx +162 -80
  352. package/examples/pages/components/Togglebox.tsx +164 -62
  353. package/examples/pages/components/Tooltips.tsx +27 -15
  354. package/examples/pages/components/TreeMenu.tsx +95 -59
  355. package/examples/pages/components/TreeSelect.tsx +297 -162
  356. package/examples/pages/components/WithPaginationDocs.tsx +15 -16
  357. package/examples/pages/components/WithSizeObserver.tsx +9 -9
  358. package/examples/pages/components/tree-select/TreeSelect.tsx +126 -77
  359. package/examples/pages/components/tree-select/example-1.tsx +8 -12
  360. package/examples/pages/components/tree-select/example-2.tsx +2 -5
  361. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +28 -13
  362. package/examples/pages/components/utilities/BorderUtilities.tsx +31 -32
  363. package/examples/pages/components/utilities/DisplayUtilities.tsx +4 -5
  364. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +38 -38
  365. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +4 -6
  366. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +3 -4
  367. package/examples/pages/components/utilities/OpacityUtilities.tsx +4 -7
  368. package/examples/pages/components/utilities/OverflowUtilities.tsx +4 -5
  369. package/examples/pages/components/utilities/PositionUtilities.tsx +4 -5
  370. package/examples/pages/components/utilities/ShadowUtilities.tsx +15 -16
  371. package/examples/pages/components/utilities/SpacingUtilities.tsx +483 -178
  372. package/examples/pages/components/utilities/TextUtilities.tsx +109 -60
  373. package/examples/pages/design-patterns/Index.tsx +8 -11
  374. package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  375. package/examples/pages/playgrounds/dummy-data/items.ts +9 -8
  376. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  377. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  378. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  379. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +11 -11
  380. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  381. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  382. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  383. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  384. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  385. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  386. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  387. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  388. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  389. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  390. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  391. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  392. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  393. package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  394. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  395. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  396. package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  397. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  398. package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  399. package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  400. package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  401. package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  402. package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  403. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  404. package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  405. package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  406. package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  407. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +1 -1
  408. package/globals.d.ts +1 -1
  409. package/mocha-setup.ts +3 -3
  410. package/package.json +119 -117
  411. package/react/components/Alert.js +6 -9
  412. package/react/components/Autocomplete.js +15 -23
  413. package/react/components/Badge.js +1 -1
  414. package/react/components/Button.js +4 -6
  415. package/react/components/ButtonGroup.js +1 -1
  416. package/react/components/Carousel.js +3 -3
  417. package/react/components/CheckButtonGroup.js +3 -6
  418. package/react/components/CheckboxButton.js +2 -4
  419. package/react/components/ContentDivider.js +1 -1
  420. package/react/components/DatePicker.js +29 -26
  421. package/react/components/DateTimePicker.d.ts +26 -4
  422. package/react/components/DateTimePicker.js +82 -27
  423. package/react/components/Divider.js +1 -1
  424. package/react/components/DonutChart.js +1 -1
  425. package/react/components/DragHandle.js +1 -1
  426. package/react/components/DragHandleDots.js +1 -1
  427. package/react/components/DropZone.js +6 -8
  428. package/react/components/Dropdown.d.ts +1 -1
  429. package/react/components/Dropdown.js +34 -38
  430. package/react/components/DropdownFirst.d.ts +11 -11
  431. package/react/components/DropdownFirst.js +20 -24
  432. package/react/components/DurationInput.js +37 -34
  433. package/react/components/EmptyState.js +5 -5
  434. package/react/components/Form/FormGroup.js +1 -1
  435. package/react/components/Form/FormItem.js +1 -1
  436. package/react/components/Form/FormRow.js +1 -1
  437. package/react/components/Form/FormRowNew.js +3 -3
  438. package/react/components/Form/FormText.js +1 -1
  439. package/react/components/Form/InputNew.js +3 -3
  440. package/react/components/Form/InputWrapper.js +7 -10
  441. package/react/components/GridItem.d.ts +1 -1
  442. package/react/components/GridItem.js +16 -16
  443. package/react/components/GridList.js +1 -1
  444. package/react/components/HeadingText.js +4 -5
  445. package/react/components/IconLabel.js +3 -5
  446. package/react/components/IconPicker.d.ts +1 -1
  447. package/react/components/IconPicker.js +111 -104
  448. package/react/components/IllustrationButton.js +1 -1
  449. package/react/components/Input.js +1 -1
  450. package/react/components/Layouts/AuthorinInnerSideBar.js +1 -1
  451. package/react/components/Layouts/AuthoringContainer.js +1 -1
  452. package/react/components/Layouts/AuthoringFrame.js +4 -4
  453. package/react/components/Layouts/AuthoringFrameContainer.js +1 -1
  454. package/react/components/Layouts/AuthoringFrameLeftBar.js +1 -1
  455. package/react/components/Layouts/AuthoringFrameMain.js +1 -1
  456. package/react/components/Layouts/AuthoringFrameNavBar.js +1 -1
  457. package/react/components/Layouts/AuthoringFrameOverlay.js +1 -1
  458. package/react/components/Layouts/AuthoringFrameRightBar.js +1 -1
  459. package/react/components/Layouts/AuthoringFrameSidePanel.js +1 -1
  460. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +1 -1
  461. package/react/components/Layouts/AuthoringMainContainer.js +1 -1
  462. package/react/components/Layouts/AuthoringMainContent.js +1 -1
  463. package/react/components/Layouts/AuthoringMainToolBar.js +1 -1
  464. package/react/components/Layouts/BottomBarAction.js +2 -2
  465. package/react/components/Layouts/ContentSplitter.js +1 -1
  466. package/react/components/Layouts/CoreLayout.js +2 -2
  467. package/react/components/Layouts/CoreLayoutContainer.js +1 -1
  468. package/react/components/Layouts/CoreLayoutFooter.js +1 -1
  469. package/react/components/Layouts/CoreLayoutOverlay.js +1 -1
  470. package/react/components/Layouts/CoreLayoutSlideInMenu.js +2 -2
  471. package/react/components/Layouts/CoreLayoutTopMenu.js +3 -3
  472. package/react/components/Layouts/HamburgerButton.js +1 -1
  473. package/react/components/Layouts/HeaderPanel.js +1 -1
  474. package/react/components/Layouts/Layout.d.ts +1 -1
  475. package/react/components/Layouts/Layout.js +9 -9
  476. package/react/components/Layouts/LayoutContainer.js +1 -1
  477. package/react/components/Layouts/LeftPanel.js +1 -1
  478. package/react/components/Layouts/MainMenu.js +8 -10
  479. package/react/components/Layouts/MainPanel.js +1 -1
  480. package/react/components/Layouts/NotificationPanel.d.ts +1 -1
  481. package/react/components/Layouts/NotificationPanel.js +7 -7
  482. package/react/components/Layouts/OverlayPanel.js +3 -3
  483. package/react/components/Layouts/PageLayout.js +2 -2
  484. package/react/components/Layouts/Panel.d.ts +1 -1
  485. package/react/components/Layouts/Panel.js +12 -18
  486. package/react/components/LeftMenu.d.ts +3 -3
  487. package/react/components/LeftMenu.js +11 -13
  488. package/react/components/Lists/BoxedList.js +6 -6
  489. package/react/components/Lists/CalendarWeekDayItem.js +2 -2
  490. package/react/components/Lists/ContentList.js +24 -26
  491. package/react/components/Lists/TableList.d.ts +1 -1
  492. package/react/components/Lists/TableList.js +59 -79
  493. package/react/components/Loader.js +1 -1
  494. package/react/components/Menu.js +1 -1
  495. package/react/components/Modal.d.ts +1 -1
  496. package/react/components/MultiSelect.d.ts +1 -1
  497. package/react/components/MultiSelect.js +2 -2
  498. package/react/components/NavButton.js +2 -4
  499. package/react/components/Navigation/BottomNav.js +9 -8
  500. package/react/components/Navigation/QuickNavBar.js +17 -20
  501. package/react/components/Navigation/SideBarMenu.js +11 -9
  502. package/react/components/Navigation/SideBarTabs.js +9 -8
  503. package/react/components/Popover.js +1 -1
  504. package/react/components/RadioButtonGroup.js +15 -23
  505. package/react/components/ResizablePanels.js +1 -3
  506. package/react/components/ResizeObserverComponent.js +1 -3
  507. package/react/components/SearchBar.js +14 -16
  508. package/react/components/Select.js +3 -3
  509. package/react/components/SelectGrid.js +15 -20
  510. package/react/components/SelectPreview.js +13 -13
  511. package/react/components/SelectWithTemplate.js +3 -5
  512. package/react/components/ShowPopup.js +7 -10
  513. package/react/components/Skeleton.js +1 -1
  514. package/react/components/SlidingToolbar.js +1 -1
  515. package/react/components/Spinner.js +1 -1
  516. package/react/components/StrechBar.js +1 -1
  517. package/react/components/SubNav.js +1 -1
  518. package/react/components/Switch.js +4 -6
  519. package/react/components/SwitchGroup.js +1 -1
  520. package/react/components/TabCustom.js +6 -4
  521. package/react/components/TabList.js +4 -8
  522. package/react/components/Tag.js +13 -17
  523. package/react/components/TagInput.js +1 -1
  524. package/react/components/Text/Heading.js +6 -6
  525. package/react/components/ThemeSelector.js +1 -1
  526. package/react/components/TimePickerV2.js +17 -17
  527. package/react/components/Toast.js +3 -3
  528. package/react/components/ToastMessage.d.ts +1 -1
  529. package/react/components/ToastMessage.js +1 -1
  530. package/react/components/ToastText.js +5 -8
  531. package/react/components/ToastWrapper.js +3 -5
  532. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -1
  533. package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -7
  534. package/react/components/ToggleBox/SimpleToggleBox.d.ts +1 -1
  535. package/react/components/ToggleBox/SimpleToggleBox.js +5 -5
  536. package/react/components/ToggleBox/index.js +3 -3
  537. package/react/components/TreeMenu.d.ts +1 -1
  538. package/react/components/TreeMenu.js +38 -44
  539. package/react/components/TreeSelect/TreeSelect.d.ts +2 -2
  540. package/react/components/TreeSelect/TreeSelect.js +105 -127
  541. package/react/components/TreeSelect/TreeSelectItem.d.ts +1 -1
  542. package/react/components/TreeSelect/TreeSelectItem.js +10 -13
  543. package/react/components/TreeSelect/TreeSelectPill.d.ts +1 -1
  544. package/react/components/TreeSelect/TreeSelectPill.js +8 -9
  545. package/react/components/WithPagination.js +18 -21
  546. package/react/components/WithPortal.d.ts +1 -1
  547. package/react/components/WithPortal.js +2 -1
  548. package/react/components/WithSizeObserver.js +1 -3
  549. package/react/components/_Positioner.js +11 -11
  550. package/react/components/avatar/avatar-action-add.js +1 -1
  551. package/react/components/avatar/avatar-group.js +11 -14
  552. package/react/components/avatar/avatar-image.js +6 -4
  553. package/react/components/avatar/avatar-placeholder.js +1 -1
  554. package/react/components/avatar/avatar-wrapper.js +2 -4
  555. package/react/components/avatar/avatar.js +4 -3
  556. package/react/helpers.js +2 -2
  557. package/react/index.d.ts +1 -1
  558. package/tasks/webpack.dev.js +1 -1
  559. package/tasks/webpack.js +5 -5
  560. package/tasks/webpack.prod.js +1 -5
  561. package/tsconfig.json +2 -5
  562. package/tslint.json +6 -12
  563. package/webpack.config.js +2 -5
@@ -2,15 +2,16 @@ import * as React from 'react';
2
2
 
3
3
  import * as Markup from '../../js/react';
4
4
 
5
- import { SubNav, NavButton, ButtonGroup, Tooltip, CreateButton, PropsList, Prop } from '../../../app-typescript';
5
+ import {SubNav, NavButton, ButtonGroup, Tooltip, CreateButton, PropsList, Prop} from '../../../app-typescript';
6
6
 
7
7
  export default class CreateButtonDoc extends React.Component {
8
8
  render() {
9
9
  return (
10
- <section className='docs-page__container'>
11
- <h2 className='docs-page__h2'>Navigation button</h2>
10
+ <section className="docs-page__container">
11
+ <h2 className="docs-page__h2">Navigation button</h2>
12
12
  <p></p>
13
- <Markup.ReactMarkupCodePreview>{`
13
+ <Markup.ReactMarkupCodePreview>
14
+ {`
14
15
  <NavButton type='default' icon='home' onClick={()=> false} />
15
16
  `}
16
17
  </Markup.ReactMarkupCodePreview>
@@ -18,22 +19,29 @@ export default class CreateButtonDoc extends React.Component {
18
19
  <Markup.ReactMarkup>
19
20
  <Markup.ReactMarkupPreview>
20
21
  <SubNav>
21
- <ButtonGroup align='start' spaces='no-space'>
22
- <Tooltip text='Filters' flow='right'>
23
- <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
22
+ <ButtonGroup align="start" spaces="no-space">
23
+ <Tooltip text="Filters" flow="right">
24
+ <NavButton
25
+ icon="filter-large"
26
+ type="darker"
27
+ state="active"
28
+ text="Filter"
29
+ onClick={() => false}
30
+ />
24
31
  </Tooltip>
25
- <NavButton icon='search' text="Search" onClick={() => false} />
32
+ <NavButton icon="search" text="Search" onClick={() => false} />
26
33
  </ButtonGroup>
27
- <ButtonGroup align='end' spaces='no-space'>
28
- <NavButton icon='list-plus' text="Add to list" onClick={() => false} />
29
- <Tooltip text='More actions' flow='down'>
30
- <NavButton icon='dots-vertical' text="More actions" onClick={() => false} />
34
+ <ButtonGroup align="end" spaces="no-space">
35
+ <NavButton icon="list-plus" text="Add to list" onClick={() => false} />
36
+ <Tooltip text="More actions" flow="down">
37
+ <NavButton icon="dots-vertical" text="More actions" onClick={() => false} />
31
38
  </Tooltip>
32
- <CreateButton ariaValue='Create' onClick={() => false} />
39
+ <CreateButton ariaValue="Create" onClick={() => false} />
33
40
  </ButtonGroup>
34
41
  </SubNav>
35
42
  </Markup.ReactMarkupPreview>
36
- <Markup.ReactMarkupCode>{`
43
+ <Markup.ReactMarkupCode>
44
+ {`
37
45
  <SubNav>
38
46
  <ButtonGroup align='start' spaces='no-space'>
39
47
  <Tooltip text='Filters' flow='right'>
@@ -57,13 +65,55 @@ export default class CreateButtonDoc extends React.Component {
57
65
 
58
66
  <h3 className="docs-page__h3">Props</h3>
59
67
  <PropsList>
60
- <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.' />
61
- <Prop name='text' isRequired={false} type='string' default='/' description='Defines the value for aria-label, for screen-readers accessibility.' />
62
- <Prop name='iconSize' isRequired={false} type='small | big' default='small' description='Specifies a small or big button' />
63
- <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).' />
64
- <Prop name='state' isRequired={false} type='normal | active' default='normal' description='Defines the optional state of the button (e.g. active)' />
65
- <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Styles nav button for diffrent background.' />
66
- <Prop name='value' isRequired={false} type='button | submit | reset' default='button' description='Specifies a value of nav button' />
68
+ <Prop
69
+ name="icon"
70
+ isRequired={false}
71
+ type="string"
72
+ default="/"
73
+ description="Icon class name without the icon- part."
74
+ />
75
+ <Prop
76
+ name="text"
77
+ isRequired={false}
78
+ type="string"
79
+ default="/"
80
+ description="Defines the value for aria-label, for screen-readers accessibility."
81
+ />
82
+ <Prop
83
+ name="iconSize"
84
+ isRequired={false}
85
+ type="small | big"
86
+ default="small"
87
+ description="Specifies a small or big button"
88
+ />
89
+ <Prop
90
+ name="type"
91
+ isRequired={false}
92
+ type="default | primary | success | warning | alert | highlight | sd-green"
93
+ default="default"
94
+ description="Default + semantic colour variations (e.g. primary, success etc.)."
95
+ />
96
+ <Prop
97
+ name="state"
98
+ isRequired={false}
99
+ type="normal | active"
100
+ default="normal"
101
+ description="Defines the optional state of the button (e.g. active)"
102
+ />
103
+ <Prop
104
+ name="theme"
105
+ isRequired={false}
106
+ type="light | dark"
107
+ default="light"
108
+ description="Styles nav button for diffrent background."
109
+ />
110
+ <Prop
111
+ name="value"
112
+ isRequired={false}
113
+ type="button | submit | reset"
114
+ default="button"
115
+ description="Specifies a value of nav button"
116
+ />
67
117
  </PropsList>
68
118
  </section>
69
119
  );
@@ -19,8 +19,8 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date | null}> {
19
19
  onChange={(date) => {
20
20
  this.setState({date});
21
21
  }}
22
- label='This is Label'
23
- info='This is info'
22
+ label="This is Label"
23
+ info="This is info"
24
24
  />
25
25
  );
26
26
  }
@@ -29,7 +29,7 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date | null}> {
29
29
  interface IState {
30
30
  today: string;
31
31
  date: Date | null;
32
- }
32
+ }
33
33
 
34
34
  export default class DatePickerDoc extends React.Component<{}, IState> {
35
35
  constructor(props) {
@@ -56,20 +56,20 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
56
56
  `}</Markup.ReactMarkupCodePreview>
57
57
  <Markup.ReactMarkup>
58
58
  <Markup.ReactMarkupPreview>
59
- <div className='docs-page__content-row'>
59
+ <div className="docs-page__content-row">
60
60
  <DatePickerExample />
61
61
  </div>
62
62
 
63
63
  <p className="docs-page__paragraph">// DatePickerISO</p>
64
- <div className='docs-page__content-row'>
64
+ <div className="docs-page__content-row">
65
65
  <DatePickerISO
66
66
  value={'2019-01-01'}
67
67
  dateFormat="YYYY-MM-DD"
68
68
  onChange={(date) => {
69
69
  this.setState({today: date});
70
70
  }}
71
- label='This is Label'
72
- info='This is info'
71
+ label="This is Label"
72
+ info="This is info"
73
73
  />
74
74
  </div>
75
75
  </Markup.ReactMarkupPreview>
@@ -116,16 +116,20 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
116
116
  <p className="docs-page__paragraph">DatePicker with headerButtonBar:</p>
117
117
  <Markup.ReactMarkup>
118
118
  <Markup.ReactMarkupPreview>
119
- <div className='docs-page__content-row'>
119
+ <div className="docs-page__content-row">
120
120
  <DatePicker
121
121
  value={this.state.date}
122
122
  dateFormat="YYYY-MM-DD"
123
123
  onChange={(date) => {
124
124
  this.setState({date});
125
125
  }}
126
- label='This is Label'
127
- info='This is info'
128
- headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}
126
+ label="This is Label"
127
+ info="This is info"
128
+ headerButtonBar={[
129
+ {days: 0, label: 'today'},
130
+ {days: 1, label: 'tomorow'},
131
+ {days: 2, label: 'in 2 days'},
132
+ ]}
129
133
  />
130
134
  </div>
131
135
  </Markup.ReactMarkupPreview>
@@ -143,25 +147,97 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
143
147
  `}</Markup.ReactMarkupCode>
144
148
  </Markup.ReactMarkup>
145
149
 
146
- <h3 className='docs-page__h3'>Props</h3>
150
+ <h3 className="docs-page__h3">Props</h3>
147
151
  <PropsList>
148
- <Prop name='value' isRequired={false} type='Date' default='/' description='Value of the component.' />
149
- <Prop name='dateFormat' isRequired={true} type='string' default='/' description='Date format to use, i.e. "MM/DD/YYYY".' />
150
- <Prop name='locale' isRequired={false} type='string' default='/' description='see: https://primefaces.org/primereact/showcase/#/calendar.' />
151
- <Prop name='headerButtonBar' isRequired={false} type='Array' default='/' description='Aditional button in header, ex. [{label: "today", days: 0}, {label: "tomorrow", days: 1}].' />
152
- <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
153
- <Prop name='label' isRequired={false} type='string' default='/' description='Label of component.' />
154
- <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline.' />
155
- <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.'/>
156
- <Prop name='info' isRequired={false} type='string' default='/' description='Info message of component.' />
157
- <Prop name='error' isRequired={false} type='string' default='/' description='Error message of component.' />
158
- <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required.' />
159
- <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled.' />
152
+ <Prop
153
+ name="value"
154
+ isRequired={false}
155
+ type="Date"
156
+ default="/"
157
+ description="Value of the component."
158
+ />
159
+ <Prop
160
+ name="dateFormat"
161
+ isRequired={true}
162
+ type="string"
163
+ default="/"
164
+ description='Date format to use, i.e. "MM/DD/YYYY".'
165
+ />
166
+ <Prop
167
+ name="locale"
168
+ isRequired={false}
169
+ type="string"
170
+ default="/"
171
+ description="see: https://primefaces.org/primereact/showcase/#/calendar."
172
+ />
173
+ <Prop
174
+ name="headerButtonBar"
175
+ isRequired={false}
176
+ type="Array"
177
+ default="/"
178
+ description='Aditional button in header, ex. [{label: "today", days: 0}, {label: "tomorrow", days: 1}].'
179
+ />
180
+ <Prop
181
+ name="onChange"
182
+ isRequired={true}
183
+ type="Function"
184
+ default="/"
185
+ description="Callback to invoke when value changes."
186
+ />
187
+ <Prop name="label" isRequired={false} type="string" default="/" description="Label of component." />
188
+ <Prop
189
+ name="inlineLabel"
190
+ isRequired={false}
191
+ type="boolean"
192
+ default="false"
193
+ description="Position labels as inline."
194
+ />
195
+ <Prop
196
+ name="tabindex"
197
+ isRequired={false}
198
+ type="number"
199
+ default="/"
200
+ description="Indicates an element can be focused on, and determines how that focus is handled."
201
+ />
202
+ <Prop
203
+ name="info"
204
+ isRequired={false}
205
+ type="string"
206
+ default="/"
207
+ description="Info message of component."
208
+ />
209
+ <Prop
210
+ name="error"
211
+ isRequired={false}
212
+ type="string"
213
+ default="/"
214
+ description="Error message of component."
215
+ />
216
+ <Prop
217
+ name="required"
218
+ isRequired={false}
219
+ type="boolean"
220
+ default="false"
221
+ description="Mark field as required."
222
+ />
223
+ <Prop
224
+ name="disabled"
225
+ isRequired={false}
226
+ type="boolean"
227
+ default="false"
228
+ description="Mark field as disabled."
229
+ />
160
230
  </PropsList>
161
231
 
162
- <h3 className='docs-page__h3'>Events</h3>
232
+ <h3 className="docs-page__h3">Events</h3>
163
233
  <PropsList>
164
- <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of date input' />
234
+ <Prop
235
+ name="onChange"
236
+ isRequired={true}
237
+ type="function"
238
+ default="/"
239
+ description="Returns value of date input"
240
+ />
165
241
  </PropsList>
166
242
  </section>
167
243
  );
@@ -64,7 +64,7 @@ export default class DateTimePickerDoc extends React.Component<{}, IState> {
64
64
  `}</Markup.ReactMarkupCodePreview>
65
65
  <Markup.ReactMarkup>
66
66
  <Markup.ReactMarkupPreview>
67
- <div className='docs-page__content-row'>
67
+ <div className="docs-page__content-row">
68
68
  <DateTimePickerExample />
69
69
  </div>
70
70
  </Markup.ReactMarkupPreview>
@@ -83,19 +83,55 @@ export default class DateTimePickerDoc extends React.Component<{}, IState> {
83
83
  `}</Markup.ReactMarkupCode>
84
84
  </Markup.ReactMarkup>
85
85
 
86
- <h3 className='docs-page__h3'>Props</h3>
86
+ <h3 className="docs-page__h3">Props</h3>
87
87
  <PropsList>
88
- <Prop name='value' isRequired={false} type='Date' default='null' description='Value of the component.' />
89
- <Prop name='dateFormat' isRequired={true} type='string' default='/' description='Date format to use, i.e. "MM/DD/YYYY".' />
90
- <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
91
- <Prop name='label' isRequired={false} type='string' default='/' description='Label of component.' />
92
- <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required.' />
93
- <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled.' />
88
+ <Prop
89
+ name="value"
90
+ isRequired={false}
91
+ type="Date"
92
+ default="null"
93
+ description="Value of the component."
94
+ />
95
+ <Prop
96
+ name="dateFormat"
97
+ isRequired={true}
98
+ type="string"
99
+ default="/"
100
+ description='Date format to use, i.e. "MM/DD/YYYY".'
101
+ />
102
+ <Prop
103
+ name="onChange"
104
+ isRequired={true}
105
+ type="Function"
106
+ default="/"
107
+ description="Callback to invoke when value changes."
108
+ />
109
+ <Prop name="label" isRequired={false} type="string" default="/" description="Label of component." />
110
+ <Prop
111
+ name="required"
112
+ isRequired={false}
113
+ type="boolean"
114
+ default="false"
115
+ description="Mark field as required."
116
+ />
117
+ <Prop
118
+ name="disabled"
119
+ isRequired={false}
120
+ type="boolean"
121
+ default="false"
122
+ description="Mark field as disabled."
123
+ />
94
124
  </PropsList>
95
125
 
96
- <h3 className='docs-page__h3'>Events</h3>
126
+ <h3 className="docs-page__h3">Events</h3>
97
127
  <PropsList>
98
- <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of date input' />
128
+ <Prop
129
+ name="onChange"
130
+ isRequired={true}
131
+ type="function"
132
+ default="/"
133
+ description="Returns value of date input"
134
+ />
99
135
  </PropsList>
100
136
  </section>
101
137
  );
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import {DragHandle, Prop, PropsList } from '../../../app-typescript';
2
+ import {DragHandle, Prop, PropsList} from '../../../app-typescript';
3
3
  import * as Markup from '../../js/react';
4
4
 
5
5
  export default class DragHandleDocs extends React.Component {
@@ -7,7 +7,8 @@ export default class DragHandleDocs extends React.Component {
7
7
  return (
8
8
  <section className="docs-page__container">
9
9
  <h2 className="docs-page__h2">Drag handle</h2>
10
- <Markup.ReactMarkupCodePreview>{`
10
+ <Markup.ReactMarkupCodePreview>
11
+ {`
11
12
  <DragHandle />
12
13
  `}
13
14
  </Markup.ReactMarkupCodePreview>
@@ -19,37 +20,36 @@ export default class DragHandleDocs extends React.Component {
19
20
  </div>
20
21
  <p className="mt-2 docs-page__paragraph">// Some size examples</p>
21
22
  <p className="docs-page__paragraph--small">
22
- The number of dotted rows and dots in each row can be adjusted independently,
23
- offering a wide range of size options.
23
+ The number of dotted rows and dots in each row can be adjusted independently, offering a
24
+ wide range of size options.
24
25
  </p>
25
26
  <div className="docs-page__content-row">
26
- <div className='d-flex items-start sd-gap--medium'>
27
- <DragHandle dotsInRow='2' dotRows='5' />
28
- <DragHandle dotsInRow='2' dotRows='8' />
29
- <DragHandle dotsInRow='3' dotRows='6' />
30
- <DragHandle dotsInRow='3' dotRows='8' />
31
- <DragHandle dotsInRow='3' dotRows='10' />
32
- <DragHandle dotsInRow='5' dotRows='4' />
27
+ <div className="d-flex items-start sd-gap--medium">
28
+ <DragHandle dotsInRow="2" dotRows="5" />
29
+ <DragHandle dotsInRow="2" dotRows="8" />
30
+ <DragHandle dotsInRow="3" dotRows="6" />
31
+ <DragHandle dotsInRow="3" dotRows="8" />
32
+ <DragHandle dotsInRow="3" dotRows="10" />
33
+ <DragHandle dotsInRow="5" dotRows="4" />
33
34
  </div>
34
-
35
35
  </div>
36
36
  <p className="docs-page__paragraph">// Blank</p>
37
37
  <p className="docs-page__paragraph--small">
38
- This option will remove all default styles from the components container, like padding and background color.
39
- To be used within list items, draggable labels, and similar contexts.
38
+ This option will remove all default styles from the components container, like padding and
39
+ background color. To be used within list items, draggable labels, and similar contexts.
40
40
  </p>
41
41
  <div className="docs-page__content-row">
42
- <div className='d-flex items-start sd-gap--medium'>
42
+ <div className="d-flex items-start sd-gap--medium">
43
43
  <DragHandle blank={true} />
44
- <DragHandle dotsInRow='2' dotRows='10' blank={true} />
45
- <DragHandle dotsInRow='4' dotRows='10' blank={true} />
46
- <DragHandle dotsInRow='5' dotRows='4' blank={true} />
47
- <DragHandle dotsInRow='3' dotRows='4' blank={true} />
48
-
44
+ <DragHandle dotsInRow="2" dotRows="10" blank={true} />
45
+ <DragHandle dotsInRow="4" dotRows="10" blank={true} />
46
+ <DragHandle dotsInRow="5" dotRows="4" blank={true} />
47
+ <DragHandle dotsInRow="3" dotRows="4" blank={true} />
49
48
  </div>
50
49
  </div>
51
50
  </Markup.ReactMarkupPreview>
52
- <Markup.ReactMarkupCode>{`
51
+ <Markup.ReactMarkupCode>
52
+ {`
53
53
  // Default
54
54
  <DragHandle />
55
55
 
@@ -80,11 +80,41 @@ export default class DragHandleDocs extends React.Component {
80
80
 
81
81
  <h3 className="docs-page__h3">Props</h3>
82
82
  <PropsList>
83
- <Prop name='blank' isRequired={false} type='boolean' default='false' description='Set to true to remove all the default styling from the wrapper, leaving only the dots exposed. This should be applied if the drag handle is used in list items, draggable labels, or similar contexts.'/>
84
- <Prop name='dotRows' isRequired={false} type='4 | 5 | 6 | 7 | 8 | 10' default='4' description='Set the number of dotted rows and, as a result, the height of the drag handle.'/>
85
- <Prop name='dotsInRow' isRequired={false} type='2 | 3 | 4 | 5' default='2' description='Set the number of dots in the row. This will also affect the overall wdth of the component.'/>
86
- <Prop name='dotColor' isRequired={false} type='light | dark' default='currentColor' description='The dots are using the theme text color by default, so this option should be used in rare cases where there is a need to explicitly change this.'/>
87
- <Prop name='className' isRequired={false} type='string' default='/' description='Add custom classes to modify or override the default styles of the component.'/>
83
+ <Prop
84
+ name="blank"
85
+ isRequired={false}
86
+ type="boolean"
87
+ default="false"
88
+ description="Set to true to remove all the default styling from the wrapper, leaving only the dots exposed. This should be applied if the drag handle is used in list items, draggable labels, or similar contexts."
89
+ />
90
+ <Prop
91
+ name="dotRows"
92
+ isRequired={false}
93
+ type="4 | 5 | 6 | 7 | 8 | 10"
94
+ default="4"
95
+ description="Set the number of dotted rows and, as a result, the height of the drag handle."
96
+ />
97
+ <Prop
98
+ name="dotsInRow"
99
+ isRequired={false}
100
+ type="2 | 3 | 4 | 5"
101
+ default="2"
102
+ description="Set the number of dots in the row. This will also affect the overall wdth of the component."
103
+ />
104
+ <Prop
105
+ name="dotColor"
106
+ isRequired={false}
107
+ type="light | dark"
108
+ default="currentColor"
109
+ description="The dots are using the theme text color by default, so this option should be used in rare cases where there is a need to explicitly change this."
110
+ />
111
+ <Prop
112
+ name="className"
113
+ isRequired={false}
114
+ type="string"
115
+ default="/"
116
+ description="Add custom classes to modify or override the default styles of the component."
117
+ />
88
118
  </PropsList>
89
119
  </section>
90
120
  );