superdesk-ui-framework 4.0.47 → 4.0.49

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 (575) 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/_time.scss +28 -0
  9. package/app/styles/app.scss +1 -0
  10. package/app/styles/design-tokens/_design-tokens-general.scss +6 -3
  11. package/app/styles/form-elements/_forms-general.scss +0 -4
  12. package/app-typescript/components/Alert.tsx +12 -16
  13. package/app-typescript/components/Autocomplete.tsx +53 -42
  14. package/app-typescript/components/Badge.tsx +1 -1
  15. package/app-typescript/components/Button.tsx +5 -11
  16. package/app-typescript/components/ButtonGroup.tsx +15 -10
  17. package/app-typescript/components/Carousel.tsx +25 -26
  18. package/app-typescript/components/CheckButtonGroup.tsx +6 -10
  19. package/app-typescript/components/Checkbox.tsx +16 -10
  20. package/app-typescript/components/CheckboxButton.tsx +22 -13
  21. package/app-typescript/components/ContentDivider.tsx +6 -7
  22. package/app-typescript/components/CreateButton.tsx +8 -6
  23. package/app-typescript/components/DatePicker.tsx +59 -55
  24. package/app-typescript/components/DateTimePicker.tsx +51 -48
  25. package/app-typescript/components/Divider.tsx +2 -4
  26. package/app-typescript/components/DonutChart.tsx +11 -6
  27. package/app-typescript/components/DragHandle.tsx +10 -6
  28. package/app-typescript/components/DragHandleDots.tsx +1 -3
  29. package/app-typescript/components/DropZone.tsx +27 -25
  30. package/app-typescript/components/Dropdown.tsx +61 -102
  31. package/app-typescript/components/DropdownFirst.tsx +57 -69
  32. package/app-typescript/components/DurationInput.tsx +64 -54
  33. package/app-typescript/components/Editor/EditorButton.tsx +4 -3
  34. package/app-typescript/components/EmptyState.tsx +10 -14
  35. package/app-typescript/components/Form/FormGroup.tsx +9 -16
  36. package/app-typescript/components/Form/FormItem.tsx +1 -5
  37. package/app-typescript/components/Form/FormLabel.tsx +0 -1
  38. package/app-typescript/components/Form/FormRow.tsx +12 -19
  39. package/app-typescript/components/Form/FormRowNew.tsx +9 -16
  40. package/app-typescript/components/Form/FormText.tsx +1 -5
  41. package/app-typescript/components/Form/InputBase.tsx +12 -11
  42. package/app-typescript/components/Form/InputNew.tsx +11 -12
  43. package/app-typescript/components/Form/InputWrapper.tsx +9 -18
  44. package/app-typescript/components/Form/index.tsx +9 -9
  45. package/app-typescript/components/FormLabel.tsx +1 -5
  46. package/app-typescript/components/GridItem.tsx +38 -69
  47. package/app-typescript/components/GridList.tsx +2 -6
  48. package/app-typescript/components/HeadingText.tsx +4 -5
  49. package/app-typescript/components/IconButton.tsx +4 -10
  50. package/app-typescript/components/IconLabel.tsx +5 -5
  51. package/app-typescript/components/IconPicker.tsx +128 -126
  52. package/app-typescript/components/IllustrationButton.tsx +2 -8
  53. package/app-typescript/components/Input.tsx +2 -2
  54. package/app-typescript/components/Label.tsx +11 -7
  55. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +1 -5
  56. package/app-typescript/components/Layouts/AuthoringContainer.tsx +4 -6
  57. package/app-typescript/components/Layouts/AuthoringFrame.tsx +4 -20
  58. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +1 -5
  59. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +1 -5
  60. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +1 -5
  61. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +1 -5
  62. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +1 -5
  63. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +1 -5
  64. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +1 -5
  65. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +1 -3
  66. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +3 -6
  67. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +5 -5
  68. package/app-typescript/components/Layouts/AuthoringMain.tsx +3 -4
  69. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +1 -5
  70. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +1 -5
  71. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +1 -6
  72. package/app-typescript/components/Layouts/BottomBarAction.tsx +8 -10
  73. package/app-typescript/components/Layouts/Container.tsx +13 -8
  74. package/app-typescript/components/Layouts/ContentSplitter.tsx +2 -6
  75. package/app-typescript/components/Layouts/CoreLayout.tsx +5 -12
  76. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +1 -1
  77. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +1 -5
  78. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -4
  79. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +1 -5
  80. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +2 -4
  81. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +8 -9
  82. package/app-typescript/components/Layouts/HamburgerButton.tsx +13 -14
  83. package/app-typescript/components/Layouts/HeaderPanel.tsx +1 -5
  84. package/app-typescript/components/Layouts/Layout.tsx +10 -16
  85. package/app-typescript/components/Layouts/LayoutContainer.tsx +2 -7
  86. package/app-typescript/components/Layouts/LeftPanel.tsx +4 -11
  87. package/app-typescript/components/Layouts/MainMenu.tsx +18 -32
  88. package/app-typescript/components/Layouts/MainPanel.tsx +10 -11
  89. package/app-typescript/components/Layouts/NotificationPanel.tsx +20 -29
  90. package/app-typescript/components/Layouts/OverlayPanel.tsx +3 -5
  91. package/app-typescript/components/Layouts/PageLayout.tsx +4 -21
  92. package/app-typescript/components/Layouts/Panel.tsx +45 -81
  93. package/app-typescript/components/Layouts/index.tsx +39 -39
  94. package/app-typescript/components/LeftMenu.tsx +51 -53
  95. package/app-typescript/components/ListItemLoader.tsx +1 -1
  96. package/app-typescript/components/Lists/BoxedList.tsx +16 -41
  97. package/app-typescript/components/Lists/CalendarWeekDayItem.tsx +2 -10
  98. package/app-typescript/components/Lists/ContentList.tsx +68 -62
  99. package/app-typescript/components/Lists/SimpleList.tsx +13 -12
  100. package/app-typescript/components/Lists/TableList.tsx +169 -217
  101. package/app-typescript/components/Lists/index.tsx +2 -2
  102. package/app-typescript/components/Loader.tsx +1 -3
  103. package/app-typescript/components/Menu.tsx +2 -4
  104. package/app-typescript/components/Modal.tsx +21 -21
  105. package/app-typescript/components/MultiSelect.tsx +6 -6
  106. package/app-typescript/components/NavButton.tsx +10 -8
  107. package/app-typescript/components/Navigation/BottomNav.tsx +21 -17
  108. package/app-typescript/components/Navigation/QuickNavBar.tsx +40 -37
  109. package/app-typescript/components/Navigation/SideBarMenu.tsx +21 -17
  110. package/app-typescript/components/Navigation/SideBarTabs.tsx +13 -19
  111. package/app-typescript/components/Navigation/index.tsx +3 -3
  112. package/app-typescript/components/Popover.tsx +19 -21
  113. package/app-typescript/components/PropsList.tsx +2 -4
  114. package/app-typescript/components/RadioButtonGroup.tsx +48 -45
  115. package/app-typescript/components/RadioGroup.tsx +9 -8
  116. package/app-typescript/components/ResizablePanels.tsx +2 -3
  117. package/app-typescript/components/ResizeObserverComponent.tsx +1 -5
  118. package/app-typescript/components/SearchBar.tsx +53 -45
  119. package/app-typescript/components/Select.tsx +6 -8
  120. package/app-typescript/components/SelectGrid.tsx +32 -40
  121. package/app-typescript/components/SelectPreview.tsx +31 -25
  122. package/app-typescript/components/SelectWithTemplate.tsx +10 -11
  123. package/app-typescript/components/ShowPopup.tsx +32 -46
  124. package/app-typescript/components/SidebarMenu.tsx +19 -18
  125. package/app-typescript/components/Skeleton.tsx +12 -11
  126. package/app-typescript/components/SlidingToolbar.tsx +1 -6
  127. package/app-typescript/components/Spinner.tsx +2 -6
  128. package/app-typescript/components/StrechBar.tsx +1 -5
  129. package/app-typescript/components/SubNav.tsx +10 -8
  130. package/app-typescript/components/SvgIconIllustration.tsx +477 -105
  131. package/app-typescript/components/Switch.tsx +14 -12
  132. package/app-typescript/components/SwitchGroup.tsx +10 -10
  133. package/app-typescript/components/TabCustom.tsx +28 -35
  134. package/app-typescript/components/TabList.tsx +13 -10
  135. package/app-typescript/components/Tag.tsx +21 -24
  136. package/app-typescript/components/TagInput.tsx +4 -11
  137. package/app-typescript/components/Text/Heading.tsx +21 -41
  138. package/app-typescript/components/Text/Text.tsx +16 -12
  139. package/app-typescript/components/Text/Time.tsx +14 -10
  140. package/app-typescript/components/ThemeSelector.tsx +15 -14
  141. package/app-typescript/components/TimePicker.tsx +60 -6
  142. package/app-typescript/components/TimePickerPopover.tsx +274 -0
  143. package/app-typescript/components/TimePickerV2.tsx +20 -20
  144. package/app-typescript/components/Toast.tsx +11 -7
  145. package/app-typescript/components/ToastMessage.tsx +3 -14
  146. package/app-typescript/components/ToastText.tsx +30 -32
  147. package/app-typescript/components/ToastWrapper.tsx +76 -74
  148. package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +30 -45
  149. package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx +31 -33
  150. package/app-typescript/components/ToggleBox/index.tsx +3 -7
  151. package/app-typescript/components/Tooltip.tsx +1 -1
  152. package/app-typescript/components/TreeMenu.tsx +72 -81
  153. package/app-typescript/components/TreeSelect/KeyboardNavigation.tsx +1 -5
  154. package/app-typescript/components/TreeSelect/TreeSelect.tsx +221 -238
  155. package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +20 -24
  156. package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +12 -15
  157. package/app-typescript/components/WithPagination.tsx +34 -39
  158. package/app-typescript/components/WithPopover.tsx +0 -1
  159. package/app-typescript/components/WithPortal.tsx +4 -7
  160. package/app-typescript/components/WithSizeObserver.tsx +2 -6
  161. package/app-typescript/components/_Positioner.tsx +26 -26
  162. package/app-typescript/components/avatar/avatar-action-add.tsx +1 -6
  163. package/app-typescript/components/avatar/avatar-group.tsx +49 -68
  164. package/app-typescript/components/avatar/avatar-image.tsx +18 -12
  165. package/app-typescript/components/avatar/avatar-placeholder.tsx +3 -15
  166. package/app-typescript/components/avatar/avatar-text.tsx +1 -4
  167. package/app-typescript/components/avatar/avatar-wrapper.tsx +18 -30
  168. package/app-typescript/components/avatar/avatar.tsx +5 -8
  169. package/app-typescript/components/with-pagination.spec.tsx +8 -27
  170. package/app-typescript/helpers.tsx +2 -2
  171. package/app-typescript/index.ts +111 -100
  172. package/app-typescript/utils/time.tsx +31 -0
  173. package/declarations.d.ts +1 -1
  174. package/dist/components/Alerts.tsx +171 -78
  175. package/dist/components/Autocomplete.tsx +187 -78
  176. package/dist/components/Avatar.tsx +52 -112
  177. package/dist/components/Badges.tsx +111 -67
  178. package/dist/components/BigIconFont.tsx +29 -17
  179. package/dist/components/BoxedList.tsx +244 -114
  180. package/dist/components/ButtonGroups.tsx +213 -147
  181. package/dist/components/Buttons.tsx +409 -137
  182. package/dist/components/Card.tsx +6 -7
  183. package/dist/components/Carousel.tsx +126 -39
  184. package/dist/components/Checkboxs.tsx +446 -105
  185. package/dist/components/Container.tsx +95 -48
  186. package/dist/components/ContentDivider.tsx +110 -63
  187. package/dist/components/ContentList.tsx +577 -253
  188. package/dist/components/CreateButton.tsx +71 -21
  189. package/dist/components/DatePicker.tsx +102 -26
  190. package/dist/components/DateTimePicker.tsx +49 -11
  191. package/dist/components/DragHandleDocs.tsx +56 -26
  192. package/dist/components/DropZone.tsx +67 -29
  193. package/dist/components/Dropdowns.tsx +220 -131
  194. package/dist/components/DurationInput.tsx +92 -32
  195. package/dist/components/EmptyStates.tsx +61 -26
  196. package/dist/components/GridItem.tsx +190 -91
  197. package/dist/components/GridList.tsx +37 -17
  198. package/dist/components/Heading.tsx +81 -35
  199. package/dist/components/IconButtons.tsx +125 -32
  200. package/dist/components/IconFont.tsx +24 -12
  201. package/dist/components/IconLabels.tsx +146 -39
  202. package/dist/components/IconPicker.tsx +30 -13
  203. package/dist/components/IllustrationButton.tsx +40 -20
  204. package/dist/components/Index.tsx +128 -114
  205. package/dist/components/Inputs.tsx +153 -51
  206. package/dist/components/Labels.tsx +191 -117
  207. package/dist/components/LeftNavigations.tsx +327 -100
  208. package/dist/components/ListItems.tsx +8 -9
  209. package/dist/components/Loader.tsx +5 -4
  210. package/dist/components/Menu.tsx +48 -26
  211. package/dist/components/Modal.tsx +298 -104
  212. package/dist/components/MultiSelect.tsx +189 -53
  213. package/dist/components/NavButtons.tsx +86 -30
  214. package/dist/components/Panel.tsx +367 -120
  215. package/dist/components/Popover.tsx +37 -17
  216. package/dist/components/QuickNavigationBar.tsx +222 -86
  217. package/dist/components/RadioGroup.tsx +375 -137
  218. package/dist/components/ResizablePanels.tsx +8 -14
  219. package/dist/components/SelectGrid.tsx +79 -38
  220. package/dist/components/SelectWithTemplate.tsx +23 -14
  221. package/dist/components/Selects.tsx +94 -29
  222. package/dist/components/SimpleList.tsx +91 -41
  223. package/dist/components/SubNav.tsx +57 -37
  224. package/dist/components/Switch.tsx +168 -42
  225. package/dist/components/TableList.tsx +220 -66
  226. package/dist/components/Tabs.tsx +149 -64
  227. package/dist/components/TagInputDocs.tsx +73 -17
  228. package/dist/components/Tags.tsx +104 -73
  229. package/dist/components/Text.tsx +108 -58
  230. package/dist/components/TimePicker.tsx +76 -22
  231. package/dist/components/Toasts.tsx +162 -80
  232. package/dist/components/Togglebox.tsx +164 -62
  233. package/dist/components/Tooltips.tsx +27 -15
  234. package/dist/components/TreeMenu.tsx +95 -59
  235. package/dist/components/TreeSelect.tsx +297 -162
  236. package/dist/components/WithPaginationDocs.tsx +15 -16
  237. package/dist/components/WithSizeObserver.tsx +9 -9
  238. package/dist/components/tree-select/TreeSelect.tsx +126 -77
  239. package/dist/components/tree-select/example-1.tsx +8 -12
  240. package/dist/components/tree-select/example-2.tsx +2 -5
  241. package/dist/components/utilities/BorderRadiusUtilities.tsx +28 -13
  242. package/dist/components/utilities/BorderUtilities.tsx +31 -32
  243. package/dist/components/utilities/DisplayUtilities.tsx +4 -5
  244. package/dist/components/utilities/FlexAndGridUtilities.tsx +38 -38
  245. package/dist/components/utilities/ObjectFitUtilities.tsx +4 -6
  246. package/dist/components/utilities/ObjectPositionUtilities.tsx +3 -4
  247. package/dist/components/utilities/OpacityUtilities.tsx +4 -7
  248. package/dist/components/utilities/OverflowUtilities.tsx +4 -5
  249. package/dist/components/utilities/PositionUtilities.tsx +4 -5
  250. package/dist/components/utilities/ShadowUtilities.tsx +15 -16
  251. package/dist/components/utilities/SpacingUtilities.tsx +483 -178
  252. package/dist/components/utilities/TextUtilities.tsx +109 -60
  253. package/dist/design-patterns/Index.tsx +8 -11
  254. package/dist/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  255. package/dist/examples.bundle.css +1257 -1155
  256. package/dist/examples.bundle.js +7904 -7035
  257. package/dist/playgrounds/dummy-data/items.ts +9 -8
  258. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  259. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  260. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  261. package/dist/playgrounds/react-playgrounds/Index.tsx +11 -11
  262. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  263. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  264. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  265. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  266. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  267. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  268. package/dist/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  269. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  270. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  271. package/dist/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  272. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  273. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  274. package/dist/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  275. package/dist/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  276. package/dist/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  277. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  278. package/dist/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  279. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  280. package/dist/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  281. package/dist/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  282. package/dist/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  283. package/dist/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  284. package/dist/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  285. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  286. package/dist/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  287. package/dist/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  288. package/dist/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  289. package/dist/playgrounds/react-playgrounds/tsconfig.json +1 -1
  290. package/dist/superdesk-ui.bundle.css +25 -4
  291. package/dist/superdesk-ui.bundle.js +3072 -2903
  292. package/dist/vendor.bundle.js +18 -18
  293. package/examples/css/docs-page.css +1135 -1116
  294. package/examples/css/reset.css +124 -43
  295. package/examples/css/vendor.css +125 -125
  296. package/examples/index.js +138 -139
  297. package/examples/js/doc.js +41 -40
  298. package/examples/js/react.js +82 -48
  299. package/examples/pages/components/Alerts.tsx +171 -78
  300. package/examples/pages/components/Autocomplete.tsx +187 -78
  301. package/examples/pages/components/Avatar.tsx +52 -112
  302. package/examples/pages/components/Badges.tsx +111 -67
  303. package/examples/pages/components/BigIconFont.tsx +29 -17
  304. package/examples/pages/components/BoxedList.tsx +244 -114
  305. package/examples/pages/components/ButtonGroups.tsx +213 -147
  306. package/examples/pages/components/Buttons.tsx +409 -137
  307. package/examples/pages/components/Card.tsx +6 -7
  308. package/examples/pages/components/Carousel.tsx +126 -39
  309. package/examples/pages/components/Checkboxs.tsx +446 -105
  310. package/examples/pages/components/Container.tsx +95 -48
  311. package/examples/pages/components/ContentDivider.tsx +110 -63
  312. package/examples/pages/components/ContentList.tsx +577 -253
  313. package/examples/pages/components/CreateButton.tsx +71 -21
  314. package/examples/pages/components/DatePicker.tsx +102 -26
  315. package/examples/pages/components/DateTimePicker.tsx +49 -11
  316. package/examples/pages/components/DragHandleDocs.tsx +56 -26
  317. package/examples/pages/components/DropZone.tsx +67 -29
  318. package/examples/pages/components/Dropdowns.tsx +220 -131
  319. package/examples/pages/components/DurationInput.tsx +92 -32
  320. package/examples/pages/components/EmptyStates.tsx +61 -26
  321. package/examples/pages/components/GridItem.tsx +190 -91
  322. package/examples/pages/components/GridList.tsx +37 -17
  323. package/examples/pages/components/Heading.tsx +81 -35
  324. package/examples/pages/components/IconButtons.tsx +125 -32
  325. package/examples/pages/components/IconFont.tsx +24 -12
  326. package/examples/pages/components/IconLabels.tsx +146 -39
  327. package/examples/pages/components/IconPicker.tsx +30 -13
  328. package/examples/pages/components/IllustrationButton.tsx +40 -20
  329. package/examples/pages/components/Index.tsx +128 -114
  330. package/examples/pages/components/Inputs.tsx +153 -51
  331. package/examples/pages/components/Labels.tsx +191 -117
  332. package/examples/pages/components/LeftNavigations.tsx +327 -100
  333. package/examples/pages/components/ListItems.tsx +8 -9
  334. package/examples/pages/components/Loader.tsx +5 -4
  335. package/examples/pages/components/Menu.tsx +48 -26
  336. package/examples/pages/components/Modal.tsx +298 -104
  337. package/examples/pages/components/MultiSelect.tsx +189 -53
  338. package/examples/pages/components/NavButtons.tsx +86 -30
  339. package/examples/pages/components/Panel.tsx +367 -120
  340. package/examples/pages/components/Popover.tsx +37 -17
  341. package/examples/pages/components/QuickNavigationBar.tsx +222 -86
  342. package/examples/pages/components/RadioGroup.tsx +375 -137
  343. package/examples/pages/components/ResizablePanels.tsx +8 -14
  344. package/examples/pages/components/SelectGrid.tsx +79 -38
  345. package/examples/pages/components/SelectWithTemplate.tsx +23 -14
  346. package/examples/pages/components/Selects.tsx +94 -29
  347. package/examples/pages/components/SimpleList.tsx +91 -41
  348. package/examples/pages/components/SubNav.tsx +57 -37
  349. package/examples/pages/components/Switch.tsx +168 -42
  350. package/examples/pages/components/TableList.tsx +220 -66
  351. package/examples/pages/components/Tabs.tsx +149 -64
  352. package/examples/pages/components/TagInputDocs.tsx +73 -17
  353. package/examples/pages/components/Tags.tsx +104 -73
  354. package/examples/pages/components/Text.tsx +108 -58
  355. package/examples/pages/components/TimePicker.tsx +76 -22
  356. package/examples/pages/components/Toasts.tsx +162 -80
  357. package/examples/pages/components/Togglebox.tsx +164 -62
  358. package/examples/pages/components/Tooltips.tsx +27 -15
  359. package/examples/pages/components/TreeMenu.tsx +95 -59
  360. package/examples/pages/components/TreeSelect.tsx +297 -162
  361. package/examples/pages/components/WithPaginationDocs.tsx +15 -16
  362. package/examples/pages/components/WithSizeObserver.tsx +9 -9
  363. package/examples/pages/components/tree-select/TreeSelect.tsx +126 -77
  364. package/examples/pages/components/tree-select/example-1.tsx +8 -12
  365. package/examples/pages/components/tree-select/example-2.tsx +2 -5
  366. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +28 -13
  367. package/examples/pages/components/utilities/BorderUtilities.tsx +31 -32
  368. package/examples/pages/components/utilities/DisplayUtilities.tsx +4 -5
  369. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +38 -38
  370. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +4 -6
  371. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +3 -4
  372. package/examples/pages/components/utilities/OpacityUtilities.tsx +4 -7
  373. package/examples/pages/components/utilities/OverflowUtilities.tsx +4 -5
  374. package/examples/pages/components/utilities/PositionUtilities.tsx +4 -5
  375. package/examples/pages/components/utilities/ShadowUtilities.tsx +15 -16
  376. package/examples/pages/components/utilities/SpacingUtilities.tsx +483 -178
  377. package/examples/pages/components/utilities/TextUtilities.tsx +109 -60
  378. package/examples/pages/design-patterns/Index.tsx +8 -11
  379. package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  380. package/examples/pages/playgrounds/dummy-data/items.ts +9 -8
  381. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  382. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  383. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  384. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +11 -11
  385. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  386. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  387. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  388. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  389. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  390. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  391. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  392. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  393. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  394. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  395. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  396. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  397. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  398. package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  399. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  400. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  401. package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  402. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  403. package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  404. package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  405. package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  406. package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  407. package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  408. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  409. package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  410. package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  411. package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  412. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +1 -1
  413. package/globals.d.ts +1 -1
  414. package/mocha-setup.ts +3 -3
  415. package/package.json +119 -117
  416. package/react/components/Alert.js +6 -9
  417. package/react/components/Autocomplete.js +15 -23
  418. package/react/components/Badge.js +1 -1
  419. package/react/components/Button.js +4 -6
  420. package/react/components/ButtonGroup.js +1 -1
  421. package/react/components/Carousel.js +3 -3
  422. package/react/components/CheckButtonGroup.js +3 -6
  423. package/react/components/CheckboxButton.js +2 -4
  424. package/react/components/ContentDivider.js +1 -1
  425. package/react/components/DatePicker.js +29 -26
  426. package/react/components/DateTimePicker.d.ts +8 -4
  427. package/react/components/DateTimePicker.js +6 -8
  428. package/react/components/Divider.js +1 -1
  429. package/react/components/DonutChart.js +1 -1
  430. package/react/components/DragHandle.js +1 -1
  431. package/react/components/DragHandleDots.js +1 -1
  432. package/react/components/DropZone.js +6 -8
  433. package/react/components/Dropdown.d.ts +1 -1
  434. package/react/components/Dropdown.js +34 -38
  435. package/react/components/DropdownFirst.d.ts +11 -11
  436. package/react/components/DropdownFirst.js +20 -24
  437. package/react/components/DurationInput.js +37 -34
  438. package/react/components/EmptyState.js +5 -5
  439. package/react/components/Form/FormGroup.js +1 -1
  440. package/react/components/Form/FormItem.js +1 -1
  441. package/react/components/Form/FormRow.js +1 -1
  442. package/react/components/Form/FormRowNew.js +3 -3
  443. package/react/components/Form/FormText.js +1 -1
  444. package/react/components/Form/InputNew.js +3 -3
  445. package/react/components/Form/InputWrapper.js +7 -10
  446. package/react/components/GridItem.d.ts +1 -1
  447. package/react/components/GridItem.js +16 -16
  448. package/react/components/GridList.js +1 -1
  449. package/react/components/HeadingText.js +4 -5
  450. package/react/components/IconLabel.js +3 -5
  451. package/react/components/IconPicker.d.ts +1 -1
  452. package/react/components/IconPicker.js +111 -104
  453. package/react/components/IllustrationButton.js +1 -1
  454. package/react/components/Input.js +1 -1
  455. package/react/components/Layouts/AuthorinInnerSideBar.js +1 -1
  456. package/react/components/Layouts/AuthoringContainer.js +1 -1
  457. package/react/components/Layouts/AuthoringFrame.js +4 -4
  458. package/react/components/Layouts/AuthoringFrameContainer.js +1 -1
  459. package/react/components/Layouts/AuthoringFrameLeftBar.js +1 -1
  460. package/react/components/Layouts/AuthoringFrameMain.js +1 -1
  461. package/react/components/Layouts/AuthoringFrameNavBar.js +1 -1
  462. package/react/components/Layouts/AuthoringFrameOverlay.js +1 -1
  463. package/react/components/Layouts/AuthoringFrameRightBar.js +1 -1
  464. package/react/components/Layouts/AuthoringFrameSidePanel.js +1 -1
  465. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +1 -1
  466. package/react/components/Layouts/AuthoringMainContainer.js +1 -1
  467. package/react/components/Layouts/AuthoringMainContent.js +1 -1
  468. package/react/components/Layouts/AuthoringMainToolBar.js +1 -1
  469. package/react/components/Layouts/BottomBarAction.js +2 -2
  470. package/react/components/Layouts/ContentSplitter.js +1 -1
  471. package/react/components/Layouts/CoreLayout.js +2 -2
  472. package/react/components/Layouts/CoreLayoutContainer.js +1 -1
  473. package/react/components/Layouts/CoreLayoutFooter.js +1 -1
  474. package/react/components/Layouts/CoreLayoutOverlay.js +1 -1
  475. package/react/components/Layouts/CoreLayoutSlideInMenu.js +2 -2
  476. package/react/components/Layouts/CoreLayoutTopMenu.js +3 -3
  477. package/react/components/Layouts/HamburgerButton.js +1 -1
  478. package/react/components/Layouts/HeaderPanel.js +1 -1
  479. package/react/components/Layouts/Layout.d.ts +1 -1
  480. package/react/components/Layouts/Layout.js +9 -9
  481. package/react/components/Layouts/LayoutContainer.js +1 -1
  482. package/react/components/Layouts/LeftPanel.js +1 -1
  483. package/react/components/Layouts/MainMenu.js +8 -10
  484. package/react/components/Layouts/MainPanel.js +1 -1
  485. package/react/components/Layouts/NotificationPanel.d.ts +1 -1
  486. package/react/components/Layouts/NotificationPanel.js +7 -7
  487. package/react/components/Layouts/OverlayPanel.js +3 -3
  488. package/react/components/Layouts/PageLayout.js +2 -2
  489. package/react/components/Layouts/Panel.d.ts +1 -1
  490. package/react/components/Layouts/Panel.js +12 -18
  491. package/react/components/LeftMenu.d.ts +3 -3
  492. package/react/components/LeftMenu.js +11 -13
  493. package/react/components/Lists/BoxedList.js +6 -6
  494. package/react/components/Lists/CalendarWeekDayItem.js +2 -2
  495. package/react/components/Lists/ContentList.js +24 -26
  496. package/react/components/Lists/TableList.d.ts +1 -1
  497. package/react/components/Lists/TableList.js +59 -79
  498. package/react/components/Loader.js +1 -1
  499. package/react/components/Menu.js +1 -1
  500. package/react/components/Modal.d.ts +1 -1
  501. package/react/components/MultiSelect.d.ts +1 -1
  502. package/react/components/MultiSelect.js +2 -2
  503. package/react/components/NavButton.js +2 -4
  504. package/react/components/Navigation/BottomNav.js +9 -8
  505. package/react/components/Navigation/QuickNavBar.js +17 -20
  506. package/react/components/Navigation/SideBarMenu.js +11 -9
  507. package/react/components/Navigation/SideBarTabs.js +9 -8
  508. package/react/components/Popover.js +1 -1
  509. package/react/components/RadioButtonGroup.js +15 -23
  510. package/react/components/ResizablePanels.js +1 -3
  511. package/react/components/ResizeObserverComponent.js +1 -3
  512. package/react/components/SearchBar.js +14 -16
  513. package/react/components/Select.js +3 -3
  514. package/react/components/SelectGrid.js +15 -20
  515. package/react/components/SelectPreview.js +13 -13
  516. package/react/components/SelectWithTemplate.js +3 -5
  517. package/react/components/ShowPopup.d.ts +1 -0
  518. package/react/components/ShowPopup.js +7 -10
  519. package/react/components/Skeleton.js +1 -1
  520. package/react/components/SlidingToolbar.js +1 -1
  521. package/react/components/Spinner.js +1 -1
  522. package/react/components/StrechBar.js +1 -1
  523. package/react/components/SubNav.js +1 -1
  524. package/react/components/Switch.js +4 -6
  525. package/react/components/SwitchGroup.js +1 -1
  526. package/react/components/TabCustom.js +6 -4
  527. package/react/components/TabList.js +4 -8
  528. package/react/components/Tag.js +13 -17
  529. package/react/components/TagInput.js +1 -1
  530. package/react/components/Text/Heading.js +6 -6
  531. package/react/components/ThemeSelector.js +1 -1
  532. package/react/components/TimePicker.d.ts +9 -2
  533. package/react/components/TimePicker.js +29 -4
  534. package/react/components/TimePickerPopover.d.ts +19 -0
  535. package/react/components/TimePickerPopover.js +225 -0
  536. package/react/components/TimePickerV2.js +17 -17
  537. package/react/components/Toast.js +3 -3
  538. package/react/components/ToastMessage.d.ts +1 -1
  539. package/react/components/ToastMessage.js +1 -1
  540. package/react/components/ToastText.js +5 -8
  541. package/react/components/ToastWrapper.js +3 -5
  542. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -1
  543. package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -7
  544. package/react/components/ToggleBox/SimpleToggleBox.d.ts +1 -1
  545. package/react/components/ToggleBox/SimpleToggleBox.js +5 -5
  546. package/react/components/ToggleBox/index.js +3 -3
  547. package/react/components/TreeMenu.d.ts +1 -1
  548. package/react/components/TreeMenu.js +38 -44
  549. package/react/components/TreeSelect/TreeSelect.d.ts +2 -2
  550. package/react/components/TreeSelect/TreeSelect.js +105 -127
  551. package/react/components/TreeSelect/TreeSelectItem.d.ts +1 -1
  552. package/react/components/TreeSelect/TreeSelectItem.js +10 -13
  553. package/react/components/TreeSelect/TreeSelectPill.d.ts +1 -1
  554. package/react/components/TreeSelect/TreeSelectPill.js +8 -9
  555. package/react/components/WithPagination.js +18 -21
  556. package/react/components/WithPortal.d.ts +1 -1
  557. package/react/components/WithPortal.js +2 -1
  558. package/react/components/WithSizeObserver.js +1 -3
  559. package/react/components/_Positioner.js +11 -11
  560. package/react/components/avatar/avatar-action-add.js +1 -1
  561. package/react/components/avatar/avatar-group.js +11 -14
  562. package/react/components/avatar/avatar-image.js +6 -4
  563. package/react/components/avatar/avatar-placeholder.js +1 -1
  564. package/react/components/avatar/avatar-wrapper.js +2 -4
  565. package/react/components/avatar/avatar.js +4 -3
  566. package/react/helpers.js +2 -2
  567. package/react/index.d.ts +1 -1
  568. package/react/utils/time.d.ts +5 -0
  569. package/react/utils/time.js +36 -0
  570. package/tasks/webpack.dev.js +1 -1
  571. package/tasks/webpack.js +5 -5
  572. package/tasks/webpack.prod.js +1 -5
  573. package/tsconfig.json +2 -5
  574. package/tslint.json +6 -12
  575. package/webpack.config.js +2 -5
@@ -1,13 +1,14 @@
1
1
  import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
- import { SubNav, Dropdown, Prop, PropsList } from '../../../app-typescript';
3
+ import {SubNav, Dropdown, Prop, PropsList} from '../../../app-typescript';
4
4
 
5
5
  export default class DropdownDoc extends React.Component {
6
6
  render() {
7
7
  return (
8
8
  <section className="docs-page__container">
9
9
  <h2 className="docs-page__h2">Dropdown</h2>
10
- <Markup.ReactMarkupCodePreview>{`
10
+ <Markup.ReactMarkupCodePreview>
11
+ {`
11
12
  <Dropdown
12
13
  items={[
13
14
  { label: 'Action 1', onSelect: () => 1 },
@@ -19,29 +20,34 @@ export default class DropdownDoc extends React.Component {
19
20
 
20
21
  `}
21
22
  </Markup.ReactMarkupCodePreview>
22
- <p className='docs-page__paragraph'>By default dropdown menu is positioned left comparing to dropdown toggle button element. For right positioned menu (second example) add prop value <code>align = 'right'</code></p>
23
+ <p className="docs-page__paragraph">
24
+ By default dropdown menu is positioned left comparing to dropdown toggle button element. For right
25
+ positioned menu (second example) add prop value <code>align = 'right'</code>
26
+ </p>
23
27
  <Markup.ReactMarkup>
24
28
  <Markup.ReactMarkupPreview>
25
29
  <Dropdown
26
30
  items={[
27
- { label: 'Action 1', onSelect: () => 1 },
28
- { label: 'Action 2', onSelect: () => 1 },
29
- { label: 'Action 3', onSelect: () => 1 },
30
- ]}>
31
+ {label: 'Action 1', onSelect: () => 1},
32
+ {label: 'Action 2', onSelect: () => 1},
33
+ {label: 'Action 3', onSelect: () => 1},
34
+ ]}
35
+ >
31
36
  Left aligned (default)
32
- </Dropdown>
37
+ </Dropdown>
33
38
  <Dropdown
34
- align='right'
39
+ align="right"
35
40
  items={[
36
- { label: 'Action 1', onSelect: () => 1 },
37
- { label: 'Action 2', onSelect: () => 1 },
38
- { label: 'Action 3', onSelect: () => 1 },
39
- ]}>
41
+ {label: 'Action 1', onSelect: () => 1},
42
+ {label: 'Action 2', onSelect: () => 1},
43
+ {label: 'Action 3', onSelect: () => 1},
44
+ ]}
45
+ >
40
46
  Right aligned
41
- </Dropdown>
42
-
47
+ </Dropdown>
43
48
  </Markup.ReactMarkupPreview>
44
- <Markup.ReactMarkupCode>{`
49
+ <Markup.ReactMarkupCode>
50
+ {`
45
51
  <Dropdown
46
52
  items={[
47
53
  { label: 'Action 1', onSelect: () => 1 },
@@ -64,8 +70,10 @@ export default class DropdownDoc extends React.Component {
64
70
  </Markup.ReactMarkup>
65
71
 
66
72
  <h3 className="docs-page__h3">Multilevel dropdown</h3>
67
- <p className='docs-page__paragraph'>To create a second level in the dropdown menu add item with props <code>type = 'submenu'</code> and <code>item</code>.
68
- The submenu opens by default on the right side of the parent menu.</p>
73
+ <p className="docs-page__paragraph">
74
+ To create a second level in the dropdown menu add item with props <code>type = 'submenu'</code> and{' '}
75
+ <code>item</code>. The submenu opens by default on the right side of the parent menu.
76
+ </p>
69
77
  <Markup.ReactMarkup>
70
78
  <Markup.ReactMarkupPreview>
71
79
  <Dropdown
@@ -88,8 +96,8 @@ export default class DropdownDoc extends React.Component {
88
96
  type: 'submenu',
89
97
  label: 'Show 3',
90
98
  icon: 'plus-sign',
91
- items: []
92
- }
99
+ items: [],
100
+ },
93
101
  ],
94
102
  },
95
103
  {
@@ -107,8 +115,8 @@ export default class DropdownDoc extends React.Component {
107
115
  type: 'submenu',
108
116
  label: 'Show 5',
109
117
  icon: 'plus-sign',
110
- items: []
111
- }
118
+ items: [],
119
+ },
112
120
  ],
113
121
  },
114
122
  ],
@@ -118,47 +126,62 @@ export default class DropdownDoc extends React.Component {
118
126
  ],
119
127
  },
120
128
  {
121
- type: 'group', label: 'actions', items: [
129
+ type: 'group',
130
+ label: 'actions',
131
+ items: [
122
132
  'divider',
123
- { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
124
- { label: 'Copy', icon: 'copy', onSelect: () => 1 },
125
- { label: 'Delete', icon: 'trash', onSelect: () => 1 },
133
+ {label: 'Edit', icon: 'pencil', onSelect: () => 1},
134
+ {label: 'Copy', icon: 'copy', onSelect: () => 1},
135
+ {label: 'Delete', icon: 'trash', onSelect: () => 1},
126
136
  'divider',
127
- ]
137
+ ],
128
138
  },
129
139
  {
130
- type: 'submenu', label: 'Second level actions', icon: 'star', items: [
131
- { label: 'Action 1', onSelect: () => 1 },
132
- { label: 'Action 2', onSelect: () => 1 },
133
- { label: 'Action 3', onSelect: () => 1 },
134
- { label: 'Action 4', onSelect: () => 1 },
135
- ]
136
- }]}>
140
+ type: 'submenu',
141
+ label: 'Second level actions',
142
+ icon: 'star',
143
+ items: [
144
+ {label: 'Action 1', onSelect: () => 1},
145
+ {label: 'Action 2', onSelect: () => 1},
146
+ {label: 'Action 3', onSelect: () => 1},
147
+ {label: 'Action 4', onSelect: () => 1},
148
+ ],
149
+ },
150
+ ]}
151
+ >
137
152
  Multilevel dropdown
138
- </Dropdown>
153
+ </Dropdown>
139
154
  <Dropdown
140
155
  items={[
141
156
  {
142
- type: 'group', label: 'actions', items: [
157
+ type: 'group',
158
+ label: 'actions',
159
+ items: [
143
160
  'divider',
144
- { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
145
- { label: 'Copy', icon: 'copy', onSelect: () => 1 },
146
- { label: 'Delete', icon: 'trash', onSelect: () => 1 },
161
+ {label: 'Edit', icon: 'pencil', onSelect: () => 1},
162
+ {label: 'Copy', icon: 'copy', onSelect: () => 1},
163
+ {label: 'Delete', icon: 'trash', onSelect: () => 1},
147
164
  'divider',
148
- ]
165
+ ],
149
166
  },
150
167
  {
151
- type: 'submenu', label: 'Second level actions', icon: 'star', items: [
152
- { label: 'Action 1', onSelect: () => 1 },
153
- { label: 'Action 2', onSelect: () => 1 },
154
- { label: 'Action 3', onSelect: () => 1 },
155
- { label: 'Action 4', onSelect: () => 1 },
156
- ]
157
- }]}>
168
+ type: 'submenu',
169
+ label: 'Second level actions',
170
+ icon: 'star',
171
+ items: [
172
+ {label: 'Action 1', onSelect: () => 1},
173
+ {label: 'Action 2', onSelect: () => 1},
174
+ {label: 'Action 3', onSelect: () => 1},
175
+ {label: 'Action 4', onSelect: () => 1},
176
+ ],
177
+ },
178
+ ]}
179
+ >
158
180
  Submenu on the left
159
- </Dropdown>
181
+ </Dropdown>
160
182
  </Markup.ReactMarkupPreview>
161
- <Markup.ReactMarkupCode>{`
183
+ <Markup.ReactMarkupCode>
184
+ {`
162
185
  <Dropdown
163
186
  items={[
164
187
  {
@@ -206,70 +229,83 @@ export default class DropdownDoc extends React.Component {
206
229
  </Markup.ReactMarkup>
207
230
 
208
231
  <h3 className="docs-page__h3">Navigation dropdown</h3>
209
- <p className='docs-page__paragraph'>Example of a dropdown inside a subnavigation element.</p>
232
+ <p className="docs-page__paragraph">Example of a dropdown inside a subnavigation element.</p>
210
233
  <Markup.ReactMarkup>
211
234
  <Markup.ReactMarkupPreview>
212
- <SubNav color='darker'>
235
+ <SubNav color="darker">
213
236
  <h3 className="subnav__page-title">Subnav title</h3>
214
237
  <Dropdown
215
238
  //align='right'
216
239
  header={[
217
240
  {
218
- type: 'group', label: 'actions', items: [
241
+ type: 'group',
242
+ label: 'actions',
243
+ items: [
219
244
  'divider',
220
- { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
221
- { label: 'Copy', icon: 'copy', onSelect: () => 1 },
222
- { label: 'Delete', icon: 'trash', onSelect: () => 1 },
245
+ {label: 'Edit', icon: 'pencil', onSelect: () => 1},
246
+ {label: 'Copy', icon: 'copy', onSelect: () => 1},
247
+ {label: 'Delete', icon: 'trash', onSelect: () => 1},
223
248
  'divider',
224
- ]
249
+ ],
225
250
  },
226
251
  {
227
- type: 'submenu', label: 'Second level actions', icon: 'star', items: [
228
- { label: 'Action 1', onSelect: () => 1 },
229
- { label: 'Action 2', onSelect: () => 1 },
230
- { label: 'Action 3', onSelect: () => 1 },
231
- { label: 'Action 4', onSelect: () => 1 },
232
- ]
233
- }
252
+ type: 'submenu',
253
+ label: 'Second level actions',
254
+ icon: 'star',
255
+ items: [
256
+ {label: 'Action 1', onSelect: () => 1},
257
+ {label: 'Action 2', onSelect: () => 1},
258
+ {label: 'Action 3', onSelect: () => 1},
259
+ {label: 'Action 4', onSelect: () => 1},
260
+ ],
261
+ },
234
262
  ]}
235
263
  items={[
236
264
  {
237
- type: 'group', label: 'actions', items: [
265
+ type: 'group',
266
+ label: 'actions',
267
+ items: [
238
268
  'divider',
239
- { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
240
- { label: 'Copy', icon: 'copy', onSelect: () => 1 },
241
- { label: 'Delete', icon: 'trash', onSelect: () => 1 },
269
+ {label: 'Edit', icon: 'pencil', onSelect: () => 1},
270
+ {label: 'Copy', icon: 'copy', onSelect: () => 1},
271
+ {label: 'Delete', icon: 'trash', onSelect: () => 1},
242
272
  'divider',
243
- ]
273
+ ],
244
274
  },
245
275
  {
246
- type: 'submenu', label: 'Second level actions', icon: 'star', items: [
247
- { label: 'Action 1', onSelect: () => 1 },
248
- { label: 'Action 2', onSelect: () => 1 },
249
- { label: 'Action 3', onSelect: () => 1 },
250
- { label: 'Action 4', onSelect: () => 1 },
251
- ]
252
- }
276
+ type: 'submenu',
277
+ label: 'Second level actions',
278
+ icon: 'star',
279
+ items: [
280
+ {label: 'Action 1', onSelect: () => 1},
281
+ {label: 'Action 2', onSelect: () => 1},
282
+ {label: 'Action 3', onSelect: () => 1},
283
+ {label: 'Action 4', onSelect: () => 1},
284
+ ],
285
+ },
253
286
  ]}
254
- footer={[
255
-
256
- {
257
- type: 'submenu', label: 'Second level actions', icon: 'star', items: [
258
- { label: 'Action 1', onSelect: () => 1 },
259
- { label: 'Action 2', onSelect: () => 1 },
260
- { label: 'Action 3', onSelect: () => 1 },
261
- { label: 'Action 4', onSelect: () => 1 },
262
- ]
263
- }
264
- ]}
265
- >
266
- <button className='sd-navbtn'>
287
+ footer={[
288
+ {
289
+ type: 'submenu',
290
+ label: 'Second level actions',
291
+ icon: 'star',
292
+ items: [
293
+ {label: 'Action 1', onSelect: () => 1},
294
+ {label: 'Action 2', onSelect: () => 1},
295
+ {label: 'Action 3', onSelect: () => 1},
296
+ {label: 'Action 4', onSelect: () => 1},
297
+ ],
298
+ },
299
+ ]}
300
+ >
301
+ <button className="sd-navbtn">
267
302
  <i className="icon-dots-vertical"></i>
268
303
  </button>
269
304
  </Dropdown>
270
305
  </SubNav>
271
306
  </Markup.ReactMarkupPreview>
272
- <Markup.ReactMarkupCode>{`
307
+ <Markup.ReactMarkupCode>
308
+ {`
273
309
  <SubNav color='darker'>
274
310
  <h3 className="subnav__page-title">Subnav title</h3>
275
311
  <Dropdown
@@ -301,10 +337,10 @@ export default class DropdownDoc extends React.Component {
301
337
  </Markup.ReactMarkup>
302
338
 
303
339
  <h3 className="docs-page__h3">Navigation dropdown with fixed header and footer</h3>
304
- <p className='docs-page__paragraph'></p>
340
+ <p className="docs-page__paragraph"></p>
305
341
  <Markup.ReactMarkup>
306
342
  <Markup.ReactMarkupPreview>
307
- <SubNav color='darker'>
343
+ <SubNav color="darker">
308
344
  <h3 className="subnav__page-title">Subnav title</h3>
309
345
  <Dropdown
310
346
  header={[
@@ -325,17 +361,15 @@ export default class DropdownDoc extends React.Component {
325
361
  {
326
362
  type: 'submenu',
327
363
  label: 'Show 3',
328
- items:[]
329
- }
364
+ items: [],
365
+ },
330
366
  ],
331
367
  },
332
368
  {
333
369
  type: 'submenu',
334
370
  label: 'Show 2',
335
371
  icon: 'plus-sign',
336
- items: [
337
-
338
- ],
372
+ items: [],
339
373
  },
340
374
  ],
341
375
  },
@@ -344,7 +378,9 @@ export default class DropdownDoc extends React.Component {
344
378
  ]}
345
379
  items={[
346
380
  {
347
- type: 'group', label: 'body actions', items: [
381
+ type: 'group',
382
+ label: 'body actions',
383
+ items: [
348
384
  {
349
385
  type: 'group',
350
386
  label: 'Create new',
@@ -358,23 +394,19 @@ export default class DropdownDoc extends React.Component {
358
394
  type: 'submenu',
359
395
  label: 'Show 1',
360
396
  icon: 'plus-sign',
361
- items: [
362
-
363
- ],
397
+ items: [],
364
398
  },
365
399
  {
366
400
  type: 'submenu',
367
401
  label: 'Show 2',
368
402
  icon: 'plus-sign',
369
- items: [
370
-
371
- ],
403
+ items: [],
372
404
  },
373
405
  ],
374
406
  },
375
407
  ],
376
408
  },
377
- ]
409
+ ],
378
410
  },
379
411
  ]}
380
412
  footer={[
@@ -391,31 +423,28 @@ export default class DropdownDoc extends React.Component {
391
423
  type: 'submenu',
392
424
  label: 'Show 1',
393
425
  icon: 'plus-sign',
394
- items: [
395
-
396
- ],
426
+ items: [],
397
427
  },
398
428
  {
399
429
  type: 'submenu',
400
430
  label: 'Show 2',
401
431
  icon: 'plus-sign',
402
- items: [
403
-
404
- ],
432
+ items: [],
405
433
  },
406
434
  ],
407
435
  },
408
436
  ],
409
437
  },
410
438
  ]}
411
- >
412
- <button className='sd-navbtn'>
439
+ >
440
+ <button className="sd-navbtn">
413
441
  <i className="icon-dots-vertical"></i>
414
442
  </button>
415
443
  </Dropdown>
416
444
  </SubNav>
417
445
  </Markup.ReactMarkupPreview>
418
- <Markup.ReactMarkupCode>{`
446
+ <Markup.ReactMarkupCode>
447
+ {`
419
448
  <SubNav color='darker'>
420
449
  <h3 className="subnav__page-title">Subnav title</h3>
421
450
  <Dropdown
@@ -465,34 +494,94 @@ export default class DropdownDoc extends React.Component {
465
494
 
466
495
  <h3 className="docs-page__h3">Props</h3>
467
496
  <PropsList>
468
- <Prop name='label' isRequired={false} type='string' default='/' description='Text value of label.'/>
469
- <Prop name='align' isRequired={false} type='left | right' default='left' description='Position of dropdown menu based on button'/>
470
- <Prop name='items' isRequired={true} type='Array<menuitem | submenu | menugroup | "divider">' default='/' description='Items, divider, groups or submenu of dropdown menu'/>
471
- <Prop name='children' isRequired={true} type='React.ReactNode' default='/' description='If children is "string" type than button have default style with arrow, also children can be custom styled buttons'/>
497
+ <Prop
498
+ name="label"
499
+ isRequired={false}
500
+ type="string"
501
+ default="/"
502
+ description="Text value of label."
503
+ />
504
+ <Prop
505
+ name="align"
506
+ isRequired={false}
507
+ type="left | right"
508
+ default="left"
509
+ description="Position of dropdown menu based on button"
510
+ />
511
+ <Prop
512
+ name="items"
513
+ isRequired={true}
514
+ type='Array<menuitem | submenu | menugroup | "divider">'
515
+ default="/"
516
+ description="Items, divider, groups or submenu of dropdown menu"
517
+ />
518
+ <Prop
519
+ name="children"
520
+ isRequired={true}
521
+ type="React.ReactNode"
522
+ default="/"
523
+ description='If children is "string" type than button have default style with arrow, also children can be custom styled buttons'
524
+ />
472
525
  </PropsList>
473
526
 
474
- <p className='docs-page__paragraph'>Items: Menu item</p>
527
+ <p className="docs-page__paragraph">Items: Menu item</p>
475
528
  <PropsList>
476
- <Prop name='label' isRequired={true} type='string' default='/' description='Text value of label.'/>
477
- <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
478
- <Prop name='onSelect' isRequired={false} type='function' default='false' description='Callback fired when a item is select.'/>
529
+ <Prop name="label" isRequired={true} type="string" default="/" description="Text value of label." />
530
+ <Prop
531
+ name="icon"
532
+ isRequired={false}
533
+ type="string"
534
+ default="/"
535
+ description="Icon class name without the icon- part."
536
+ />
537
+ <Prop
538
+ name="onSelect"
539
+ isRequired={false}
540
+ type="function"
541
+ default="false"
542
+ description="Callback fired when a item is select."
543
+ />
479
544
  </PropsList>
480
545
 
481
- <p className='docs-page__paragraph'>Items: Menu group</p>
546
+ <p className="docs-page__paragraph">Items: Menu group</p>
482
547
  <PropsList>
483
- <Prop name='label' isRequired={false} type='string' default='/' description='Text value of label.'/>
484
- <Prop name='type' isRequired={true} type='group' default='group' description='/'/>
485
- <Prop name='items' isRequired={true} type='Array<menuitem | submenu | menugroup | "divider">' default='/' description='Items, divider, groups or submenu of group in dropdown menu'/>
548
+ <Prop
549
+ name="label"
550
+ isRequired={false}
551
+ type="string"
552
+ default="/"
553
+ description="Text value of label."
554
+ />
555
+ <Prop name="type" isRequired={true} type="group" default="group" description="/" />
556
+ <Prop
557
+ name="items"
558
+ isRequired={true}
559
+ type='Array<menuitem | submenu | menugroup | "divider">'
560
+ default="/"
561
+ description="Items, divider, groups or submenu of group in dropdown menu"
562
+ />
486
563
  </PropsList>
487
564
 
488
- <p className='docs-page__paragraph'>Items: Submenu</p>
565
+ <p className="docs-page__paragraph">Items: Submenu</p>
489
566
  <PropsList>
490
- <Prop name='label' isRequired={true} type='string' default='/' description='Text value of label.'/>
491
- <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
492
- <Prop name='type' isRequired={true} type='submenu' default='submenu' description='/'/>
493
- <Prop name='items' isRequired={true} type='Array<menuitem | submenu | menugroup | "divider">' default='/' description='Items, divider, groups or submenu of submenu in dropdown menu'/>
567
+ <Prop name="label" isRequired={true} type="string" default="/" description="Text value of label." />
568
+ <Prop
569
+ name="icon"
570
+ isRequired={false}
571
+ type="string"
572
+ default="/"
573
+ description="Icon class name without the icon- part."
574
+ />
575
+ <Prop name="type" isRequired={true} type="submenu" default="submenu" description="/" />
576
+ <Prop
577
+ name="items"
578
+ isRequired={true}
579
+ type='Array<menuitem | submenu | menugroup | "divider">'
580
+ default="/"
581
+ description="Items, divider, groups or submenu of submenu in dropdown menu"
582
+ />
494
583
  </PropsList>
495
584
  </section>
496
- )
585
+ );
497
586
  }
498
587
  }