@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

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 (388) hide show
  1. package/README.md +75 -40
  2. package/dist/doc-metadata.json +1872 -0
  3. package/dist/docs/components/accentBar.md +582 -0
  4. package/dist/docs/components/activity.md +330 -0
  5. package/dist/docs/components/animatedNumber.md +88 -0
  6. package/dist/docs/components/animatedTextReveal.md +381 -0
  7. package/dist/docs/components/animations.md +459 -0
  8. package/dist/docs/components/appHeader.md +737 -0
  9. package/dist/docs/components/appLayout.md +2016 -0
  10. package/dist/docs/components/appNavigationBar.md +274 -0
  11. package/dist/docs/components/areaCharts.md +828 -0
  12. package/dist/docs/components/aspectRatioPlaceholder.md +106 -0
  13. package/dist/docs/components/assetTree.md +3223 -0
  14. package/dist/docs/components/autosuggests.md +1177 -0
  15. package/dist/docs/components/avatar.md +206 -0
  16. package/dist/docs/components/banner.md +668 -0
  17. package/dist/docs/components/barCharts.md +2785 -0
  18. package/dist/docs/components/barList.md +517 -0
  19. package/dist/docs/components/basicMap.md +167 -0
  20. package/dist/docs/components/bottomSheet.md +721 -0
  21. package/dist/docs/components/button.md +775 -0
  22. package/dist/docs/components/buttonToolbar.md +134 -0
  23. package/dist/docs/components/calendarStripe.md +525 -0
  24. package/dist/docs/components/card.md +86 -0
  25. package/dist/docs/components/carousel.md +128 -0
  26. package/dist/docs/components/chartColors.md +716 -0
  27. package/dist/docs/components/chartsGettingStarted.md +28 -0
  28. package/dist/docs/components/chat.md +932 -0
  29. package/dist/docs/components/checkbox.md +996 -0
  30. package/dist/docs/components/clearableInput.md +806 -0
  31. package/dist/docs/components/collapse.md +189 -0
  32. package/dist/docs/components/composedCharts.md +424 -0
  33. package/dist/docs/components/contentLoader.md +674 -0
  34. package/dist/docs/components/dataTabs.md +1251 -0
  35. package/dist/docs/components/datepickers.md +2543 -0
  36. package/dist/docs/components/dialogs.md +2244 -0
  37. package/dist/docs/components/divider.md +219 -0
  38. package/dist/docs/components/dropdowns.md +17550 -0
  39. package/dist/docs/components/editableContent.md +1127 -0
  40. package/dist/docs/components/expander.md +970 -0
  41. package/dist/docs/components/fade.md +836 -0
  42. package/dist/docs/components/fadeExpander.md +180 -0
  43. package/dist/docs/components/fadeUp.md +396 -0
  44. package/dist/docs/components/feedback.md +758 -0
  45. package/dist/docs/components/filePickers.md +370 -0
  46. package/dist/docs/components/formLabel.md +251 -0
  47. package/dist/docs/components/fullscreenMap.md +10 -0
  48. package/dist/docs/components/groupedItemList.md +1001 -0
  49. package/dist/docs/components/iconList.md +306 -0
  50. package/dist/docs/components/imagePreloader.md +167 -0
  51. package/dist/docs/components/labeledElement.md +115 -0
  52. package/dist/docs/components/licensePlate.md +412 -0
  53. package/dist/docs/components/lineCharts.md +2014 -0
  54. package/dist/docs/components/listMenu.md +392 -0
  55. package/dist/docs/components/loadMore.md +219 -0
  56. package/dist/docs/components/mainNavigation.md +129 -0
  57. package/dist/docs/components/mapCircle.md +93 -0
  58. package/dist/docs/components/mapCluster.md +337 -0
  59. package/dist/docs/components/mapContext.md +284 -0
  60. package/dist/docs/components/mapDraggableMarker.md +150 -0
  61. package/dist/docs/components/mapGettingStarted.md +39 -0
  62. package/dist/docs/components/mapInfoBubble.md +135 -0
  63. package/dist/docs/components/mapLayerGroup.md +94 -0
  64. package/dist/docs/components/mapMarker.md +1814 -0
  65. package/dist/docs/components/mapPolygon.md +959 -0
  66. package/dist/docs/components/mapRoute.md +3816 -0
  67. package/dist/docs/components/mapRouteGenerator.md +6 -0
  68. package/dist/docs/components/mapSettings.md +1040 -0
  69. package/dist/docs/components/mapUtils.md +132 -0
  70. package/dist/docs/components/multiselects.md +1921 -0
  71. package/dist/docs/components/noData.md +210 -0
  72. package/dist/docs/components/notifications.md +314 -0
  73. package/dist/docs/components/numbercontrol.md +706 -0
  74. package/dist/docs/components/onboarding.md +297 -0
  75. package/dist/docs/components/page.md +241 -0
  76. package/dist/docs/components/pager.md +133 -0
  77. package/dist/docs/components/pieCharts.md +1284 -0
  78. package/dist/docs/components/popover.md +222 -0
  79. package/dist/docs/components/position.md +50 -0
  80. package/dist/docs/components/radialBarCharts.md +3663 -0
  81. package/dist/docs/components/radiobutton.md +1271 -0
  82. package/dist/docs/components/releaseNotes.md +135 -0
  83. package/dist/docs/components/resizer.md +162 -0
  84. package/dist/docs/components/responsiveColumnStripe.md +435 -0
  85. package/dist/docs/components/responsiveVideo.md +71 -0
  86. package/dist/docs/components/rioglyph.md +331 -0
  87. package/dist/docs/components/rules.md +965 -0
  88. package/dist/docs/components/saveableInput.md +1721 -0
  89. package/dist/docs/components/selects.md +1993 -0
  90. package/dist/docs/components/sidebar.md +332 -0
  91. package/dist/docs/components/sliders.md +376 -0
  92. package/dist/docs/components/smoothScrollbars.md +1180 -0
  93. package/dist/docs/components/spinners.md +506 -0
  94. package/dist/docs/components/states.md +1176 -0
  95. package/dist/docs/components/statsWidgets.md +636 -0
  96. package/dist/docs/components/statusBar.md +644 -0
  97. package/dist/docs/components/stepButton.md +61 -0
  98. package/dist/docs/components/steppedProgressBars.md +1064 -0
  99. package/dist/docs/components/subNavigation.md +470 -0
  100. package/dist/docs/components/supportMarker.md +115 -0
  101. package/dist/docs/components/svgImage.md +248 -0
  102. package/dist/docs/components/switch.md +554 -0
  103. package/dist/docs/components/tables.md +8 -0
  104. package/dist/docs/components/tagManager.md +476 -0
  105. package/dist/docs/components/tags.md +785 -0
  106. package/dist/docs/components/teaser.md +925 -0
  107. package/dist/docs/components/timeline.md +514 -0
  108. package/dist/docs/components/timepicker.md +262 -0
  109. package/dist/docs/components/toggleButton.md +178 -0
  110. package/dist/docs/components/tooltip.md +454 -0
  111. package/dist/docs/components/virtualList.md +483 -0
  112. package/dist/docs/foundations.md +20901 -0
  113. package/dist/docs/start/changelog.md +439 -0
  114. package/dist/docs/start/goodtoknow.md +14 -0
  115. package/dist/docs/start/guidelines/color-combinations.md +678 -0
  116. package/dist/docs/start/guidelines/custom-css.md +42 -0
  117. package/dist/docs/start/guidelines/custom-rioglyph.md +35 -0
  118. package/dist/docs/start/guidelines/formatting.md +587 -0
  119. package/dist/docs/start/guidelines/iframe.md +323 -0
  120. package/dist/docs/start/guidelines/obfuscate-data.md +30 -0
  121. package/dist/docs/start/guidelines/print-css.md +36 -0
  122. package/dist/docs/start/guidelines/spinner.md +710 -0
  123. package/dist/docs/start/guidelines/supported-browsers.md +10 -0
  124. package/dist/docs/start/guidelines/writing.md +635 -0
  125. package/dist/docs/start/howto.md +187 -0
  126. package/dist/docs/start/intro.md +43 -0
  127. package/dist/docs/start/responsiveness.md +98 -0
  128. package/dist/docs/templates/common-table.md +1111 -0
  129. package/dist/docs/templates/detail-views.md +942 -0
  130. package/dist/docs/templates/expandable-details.md +228 -0
  131. package/dist/docs/templates/feature-cards.md +549 -0
  132. package/dist/docs/templates/form-summary.md +199 -0
  133. package/dist/docs/templates/form-toggle.md +367 -0
  134. package/dist/docs/templates/list-blocks.md +1021 -0
  135. package/dist/docs/templates/loading-progress.md +109 -0
  136. package/dist/docs/templates/options-panel.md +152 -0
  137. package/dist/docs/templates/panel-variants.md +164 -0
  138. package/dist/docs/templates/progress-cards.md +607 -0
  139. package/dist/docs/templates/progress-success.md +142 -0
  140. package/dist/docs/templates/settings-form.md +434 -0
  141. package/dist/docs/templates/stats-blocks.md +1381 -0
  142. package/dist/docs/templates/table-panel.md +184 -0
  143. package/dist/docs/templates/table-row-animation.md +317 -0
  144. package/dist/docs/templates/usage-cards.md +227 -0
  145. package/dist/docs/utilities/deviceUtils.md +123 -0
  146. package/dist/docs/utilities/featureToggles.md +90 -0
  147. package/dist/docs/utilities/fuelTypeUtils.md +186 -0
  148. package/dist/docs/utilities/routeUtils.md +138 -0
  149. package/dist/docs/utilities/useAfterMount.md +66 -0
  150. package/dist/docs/utilities/useAutoAnimate.md +193 -0
  151. package/dist/docs/utilities/useAverage.md +95 -0
  152. package/dist/docs/utilities/useClickOutside.md +61 -0
  153. package/dist/docs/utilities/useClipboard.md +93 -0
  154. package/dist/docs/utilities/useCount.md +178 -0
  155. package/dist/docs/utilities/useDarkMode.md +49 -0
  156. package/dist/docs/utilities/useDebugInfo.md +126 -0
  157. package/dist/docs/utilities/useEffectOnce.md +58 -0
  158. package/dist/docs/utilities/useElapsedTime.md +58 -0
  159. package/dist/docs/utilities/useElementSize.md +71 -0
  160. package/dist/docs/utilities/useEsc.md +58 -0
  161. package/dist/docs/utilities/useEvent.md +64 -0
  162. package/dist/docs/utilities/useFocusTrap.md +85 -0
  163. package/dist/docs/utilities/useFullscreen.md +198 -0
  164. package/dist/docs/utilities/useHover.md +55 -0
  165. package/dist/docs/utilities/useIncomingPostMessages.md +237 -0
  166. package/dist/docs/utilities/useInterval.md +85 -0
  167. package/dist/docs/utilities/useIsFocusWithin.md +114 -0
  168. package/dist/docs/utilities/useKey.md +151 -0
  169. package/dist/docs/utilities/useLocalStorage.md +91 -0
  170. package/dist/docs/utilities/useLocationSuggestions.md +114 -0
  171. package/dist/docs/utilities/useMax.md +62 -0
  172. package/dist/docs/utilities/useMin.md +78 -0
  173. package/dist/docs/utilities/useMutationObserver.md +113 -0
  174. package/dist/docs/utilities/useOnScreen.md +138 -0
  175. package/dist/docs/utilities/useOnlineStatus.md +49 -0
  176. package/dist/docs/utilities/usePostMessage.md +117 -0
  177. package/dist/docs/utilities/usePostMessageSender.md +257 -0
  178. package/dist/docs/utilities/usePrevious.md +101 -0
  179. package/dist/docs/utilities/useResizeObserver.md +151 -0
  180. package/dist/docs/utilities/useScrollPosition.md +252 -0
  181. package/dist/docs/utilities/useSearch.md +228 -0
  182. package/dist/docs/utilities/useSorting.md +389 -0
  183. package/dist/docs/utilities/useStateWithValidation.md +83 -0
  184. package/dist/docs/utilities/useSum.md +155 -0
  185. package/dist/docs/utilities/useTableExport.md +404 -0
  186. package/dist/docs/utilities/useTableSelection.md +1120 -0
  187. package/dist/docs/utilities/useTimeout.md +55 -0
  188. package/dist/docs/utilities/useToggle.md +115 -0
  189. package/dist/docs/utilities/useWindowResize.md +70 -0
  190. package/dist/index.mjs +271 -0
  191. package/dist/search-synonyms.json +134 -0
  192. package/dist/version.json +4 -0
  193. package/package.json +23 -19
  194. package/bin/uikit-mcp.mjs +0 -23
  195. package/data/pages/Components/components/accentbar.json +0 -207
  196. package/data/pages/Components/components/activity.json +0 -87
  197. package/data/pages/Components/components/animatednumber.json +0 -99
  198. package/data/pages/Components/components/animations.json +0 -87
  199. package/data/pages/Components/components/appheader.json +0 -291
  200. package/data/pages/Components/components/applayout.json +0 -1198
  201. package/data/pages/Components/components/appnavigationbar.json +0 -327
  202. package/data/pages/Components/components/areacharts.json +0 -563
  203. package/data/pages/Components/components/aspectratioplaceholder.json +0 -75
  204. package/data/pages/Components/components/assettree.json +0 -3080
  205. package/data/pages/Components/components/autosuggests.json +0 -710
  206. package/data/pages/Components/components/avatar.json +0 -157
  207. package/data/pages/Components/components/banner.json +0 -599
  208. package/data/pages/Components/components/barcharts.json +0 -1507
  209. package/data/pages/Components/components/barlist.json +0 -223
  210. package/data/pages/Components/components/basicmap.json +0 -68
  211. package/data/pages/Components/components/bottomsheet.json +0 -601
  212. package/data/pages/Components/components/button.json +0 -583
  213. package/data/pages/Components/components/buttontoolbar.json +0 -63
  214. package/data/pages/Components/components/calendarstripe.json +0 -235
  215. package/data/pages/Components/components/card.json +0 -69
  216. package/data/pages/Components/components/carousel.json +0 -39
  217. package/data/pages/Components/components/chartcolors.json +0 -34
  218. package/data/pages/Components/components/chartsgettingstarted.json +0 -32
  219. package/data/pages/Components/components/chat.json +0 -39
  220. package/data/pages/Components/components/checkbox.json +0 -847
  221. package/data/pages/Components/components/clearableinput.json +0 -789
  222. package/data/pages/Components/components/collapse.json +0 -175
  223. package/data/pages/Components/components/composedcharts.json +0 -159
  224. package/data/pages/Components/components/contentloader.json +0 -233
  225. package/data/pages/Components/components/datatabs.json +0 -680
  226. package/data/pages/Components/components/datepickers.json +0 -287
  227. package/data/pages/Components/components/dialogs.json +0 -1492
  228. package/data/pages/Components/components/divider.json +0 -93
  229. package/data/pages/Components/components/dropdowns.json +0 -936
  230. package/data/pages/Components/components/editablecontent.json +0 -1117
  231. package/data/pages/Components/components/expander.json +0 -377
  232. package/data/pages/Components/components/fade.json +0 -403
  233. package/data/pages/Components/components/fadeexpander.json +0 -75
  234. package/data/pages/Components/components/fadeup.json +0 -127
  235. package/data/pages/Components/components/feedback.json +0 -269
  236. package/data/pages/Components/components/filepickers.json +0 -269
  237. package/data/pages/Components/components/formlabel.json +0 -115
  238. package/data/pages/Components/components/fullscreenmap.json +0 -22
  239. package/data/pages/Components/components/groupeditemlist.json +0 -323
  240. package/data/pages/Components/components/iconlist.json +0 -45
  241. package/data/pages/Components/components/imagepreloader.json +0 -81
  242. package/data/pages/Components/components/labeledelement.json +0 -75
  243. package/data/pages/Components/components/licenseplate.json +0 -69
  244. package/data/pages/Components/components/linecharts.json +0 -987
  245. package/data/pages/Components/components/listmenu.json +0 -313
  246. package/data/pages/Components/components/loadmore.json +0 -175
  247. package/data/pages/Components/components/mainnavigation.json +0 -39
  248. package/data/pages/Components/components/mapcircle.json +0 -34
  249. package/data/pages/Components/components/mapcluster.json +0 -51
  250. package/data/pages/Components/components/mapcontext.json +0 -105
  251. package/data/pages/Components/components/mapdraggablemarker.json +0 -34
  252. package/data/pages/Components/components/mapgettingstarted.json +0 -27
  253. package/data/pages/Components/components/mapgroup.json +0 -1198
  254. package/data/pages/Components/components/mapinfobubble.json +0 -34
  255. package/data/pages/Components/components/maplayergroup.json +0 -34
  256. package/data/pages/Components/components/mapmarker.json +0 -700
  257. package/data/pages/Components/components/mappolygon.json +0 -45
  258. package/data/pages/Components/components/maproute.json +0 -623
  259. package/data/pages/Components/components/maproutegenerator.json +0 -16
  260. package/data/pages/Components/components/mapsettings.json +0 -51
  261. package/data/pages/Components/components/maputils.json +0 -34
  262. package/data/pages/Components/components/multiselects.json +0 -1451
  263. package/data/pages/Components/components/nodata.json +0 -139
  264. package/data/pages/Components/components/notifications.json +0 -65
  265. package/data/pages/Components/components/numbercontrol.json +0 -301
  266. package/data/pages/Components/components/onboarding.json +0 -302
  267. package/data/pages/Components/components/page.json +0 -197
  268. package/data/pages/Components/components/pager.json +0 -93
  269. package/data/pages/Components/components/piecharts.json +0 -731
  270. package/data/pages/Components/components/popover.json +0 -251
  271. package/data/pages/Components/components/position.json +0 -69
  272. package/data/pages/Components/components/radialbarcharts.json +0 -1304
  273. package/data/pages/Components/components/radiobutton.json +0 -1105
  274. package/data/pages/Components/components/releasenotes.json +0 -44
  275. package/data/pages/Components/components/resizer.json +0 -93
  276. package/data/pages/Components/components/responsivecolumnstripe.json +0 -123
  277. package/data/pages/Components/components/responsivevideo.json +0 -75
  278. package/data/pages/Components/components/rioglyph.json +0 -93
  279. package/data/pages/Components/components/rules.json +0 -410
  280. package/data/pages/Components/components/saveableinput.json +0 -703
  281. package/data/pages/Components/components/selects.json +0 -701
  282. package/data/pages/Components/components/sidebar.json +0 -243
  283. package/data/pages/Components/components/sliders.json +0 -235
  284. package/data/pages/Components/components/smoothscrollbars.json +0 -335
  285. package/data/pages/Components/components/spinners.json +0 -343
  286. package/data/pages/Components/components/states.json +0 -1705
  287. package/data/pages/Components/components/statswidgets.json +0 -314
  288. package/data/pages/Components/components/statusbar.json +0 -177
  289. package/data/pages/Components/components/stepbutton.json +0 -57
  290. package/data/pages/Components/components/steppedprogressbars.json +0 -417
  291. package/data/pages/Components/components/subnavigation.json +0 -107
  292. package/data/pages/Components/components/supportmarker.json +0 -45
  293. package/data/pages/Components/components/svgimage.json +0 -81
  294. package/data/pages/Components/components/switch.json +0 -111
  295. package/data/pages/Components/components/tables.json +0 -144
  296. package/data/pages/Components/components/tagmanager.json +0 -86
  297. package/data/pages/Components/components/tags.json +0 -146
  298. package/data/pages/Components/components/teaser.json +0 -188
  299. package/data/pages/Components/components/timeline.json +0 -45
  300. package/data/pages/Components/components/timepicker.json +0 -163
  301. package/data/pages/Components/components/togglebutton.json +0 -247
  302. package/data/pages/Components/components/tooltip.json +0 -270
  303. package/data/pages/Components/components/virtuallist.json +0 -175
  304. package/data/pages/Foundations/foundations.json +0 -2475
  305. package/data/pages/Getting-started/start/changelog.json +0 -22
  306. package/data/pages/Getting-started/start/goodtoknow.json +0 -32
  307. package/data/pages/Getting-started/start/guidelines/color-combinations.json +0 -58
  308. package/data/pages/Getting-started/start/guidelines/custom-css.json +0 -27
  309. package/data/pages/Getting-started/start/guidelines/custom-rioglyph.json +0 -22
  310. package/data/pages/Getting-started/start/guidelines/formatting.json +0 -97
  311. package/data/pages/Getting-started/start/guidelines/iframe.json +0 -93
  312. package/data/pages/Getting-started/start/guidelines/obfuscate-data.json +0 -22
  313. package/data/pages/Getting-started/start/guidelines/print-css.json +0 -37
  314. package/data/pages/Getting-started/start/guidelines/spinner.json +0 -144
  315. package/data/pages/Getting-started/start/guidelines/supported-browsers.json +0 -22
  316. package/data/pages/Getting-started/start/guidelines/writing.json +0 -242
  317. package/data/pages/Getting-started/start/howto.json +0 -72
  318. package/data/pages/Getting-started/start/intro.json +0 -37
  319. package/data/pages/Getting-started/start/responsiveness.json +0 -52
  320. package/data/pages/Templates/templates/common-table.json +0 -39
  321. package/data/pages/Templates/templates/detail-views.json +0 -71
  322. package/data/pages/Templates/templates/expandable-details.json +0 -39
  323. package/data/pages/Templates/templates/feature-cards.json +0 -103
  324. package/data/pages/Templates/templates/form-summary.json +0 -39
  325. package/data/pages/Templates/templates/form-toggle.json +0 -39
  326. package/data/pages/Templates/templates/list-blocks.json +0 -119
  327. package/data/pages/Templates/templates/loading-progress.json +0 -39
  328. package/data/pages/Templates/templates/options-panel.json +0 -39
  329. package/data/pages/Templates/templates/panel-variants.json +0 -39
  330. package/data/pages/Templates/templates/progress-cards.json +0 -71
  331. package/data/pages/Templates/templates/progress-success.json +0 -39
  332. package/data/pages/Templates/templates/settings-form.json +0 -39
  333. package/data/pages/Templates/templates/stats-blocks.json +0 -135
  334. package/data/pages/Templates/templates/table-panel.json +0 -39
  335. package/data/pages/Templates/templates/table-row-animation.json +0 -39
  336. package/data/pages/Templates/templates/usage-cards.json +0 -39
  337. package/data/pages/Utilities/utilities/deviceutils.json +0 -39
  338. package/data/pages/Utilities/utilities/featuretoggles.json +0 -42
  339. package/data/pages/Utilities/utilities/fueltypeutils.json +0 -118
  340. package/data/pages/Utilities/utilities/routeutils.json +0 -34
  341. package/data/pages/Utilities/utilities/useaftermount.json +0 -63
  342. package/data/pages/Utilities/utilities/useaverage.json +0 -86
  343. package/data/pages/Utilities/utilities/useclickoutside.json +0 -69
  344. package/data/pages/Utilities/utilities/useclipboard.json +0 -57
  345. package/data/pages/Utilities/utilities/usecount.json +0 -92
  346. package/data/pages/Utilities/utilities/usedarkmode.json +0 -50
  347. package/data/pages/Utilities/utilities/usedebuginfo.json +0 -63
  348. package/data/pages/Utilities/utilities/useeffectonce.json +0 -57
  349. package/data/pages/Utilities/utilities/useelapsedtime.json +0 -57
  350. package/data/pages/Utilities/utilities/useelementsize.json +0 -63
  351. package/data/pages/Utilities/utilities/useesc.json +0 -57
  352. package/data/pages/Utilities/utilities/useevent.json +0 -75
  353. package/data/pages/Utilities/utilities/usefocustrap.json +0 -57
  354. package/data/pages/Utilities/utilities/usefullscreen.json +0 -197
  355. package/data/pages/Utilities/utilities/usehover.json +0 -57
  356. package/data/pages/Utilities/utilities/useinterval.json +0 -63
  357. package/data/pages/Utilities/utilities/useisfocuswithin.json +0 -75
  358. package/data/pages/Utilities/utilities/usekey.json +0 -75
  359. package/data/pages/Utilities/utilities/uselocalstorage.json +0 -69
  360. package/data/pages/Utilities/utilities/uselocationsuggestions.json +0 -110
  361. package/data/pages/Utilities/utilities/usemax.json +0 -86
  362. package/data/pages/Utilities/utilities/usemin.json +0 -86
  363. package/data/pages/Utilities/utilities/usemutationobserver.json +0 -69
  364. package/data/pages/Utilities/utilities/useonlinestatus.json +0 -39
  365. package/data/pages/Utilities/utilities/useonscreen.json +0 -63
  366. package/data/pages/Utilities/utilities/usepostmessage.json +0 -80
  367. package/data/pages/Utilities/utilities/useprevious.json +0 -63
  368. package/data/pages/Utilities/utilities/useresizeobserver.json +0 -65
  369. package/data/pages/Utilities/utilities/usescrollposition.json +0 -103
  370. package/data/pages/Utilities/utilities/usesearch.json +0 -197
  371. package/data/pages/Utilities/utilities/usesorting.json +0 -139
  372. package/data/pages/Utilities/utilities/usestatewithvalidation.json +0 -69
  373. package/data/pages/Utilities/utilities/usesum.json +0 -86
  374. package/data/pages/Utilities/utilities/usetableexport.json +0 -87
  375. package/data/pages/Utilities/utilities/usetableselection.json +0 -311
  376. package/data/pages/Utilities/utilities/usetimeout.json +0 -63
  377. package/data/pages/Utilities/utilities/usetoggle.json +0 -75
  378. package/data/pages/Utilities/utilities/usewindowresize.json +0 -63
  379. package/data/version.json +0 -4
  380. package/docs/content-schema.md +0 -147
  381. package/docs/navigation-inventory.json +0 -1310
  382. package/docs/search-synonyms.json +0 -43
  383. package/server/index.mjs +0 -268
  384. package/server/lib/load-docs.mjs +0 -48
  385. package/server/lib/normalise-doc.mjs +0 -220
  386. package/server/lib/render-markdown.mjs +0 -82
  387. package/server/lib/search-index.mjs +0 -49
  388. package/server/lib/types.js +0 -99
package/data/pages/Components/components/multiselects.json DELETED
@@ -1,1451 +0,0 @@
1
- {
2
- "metadata": {
3
- "captured_at": "2025-11-21T12:07:29.272Z",
4
- "source": "https://uikit.developers.rio.cloud/#components/multiselects",
5
- "category": "Components",
6
- "section": "Selection",
7
- "slug": "components/multiselects",
8
- "version": "v1.13.2",
9
- "hash_algorithm": "sha256",
10
- "hash": "35fd9caee7daf025161ab05d64cc3bf84ae42692ed16d2cd0b6e75c48f6b44fd"
11
- },
12
- "title": "Multiselect",
13
- "lead": "The Multiselect component is a form control and is intended to be used within forms. It's designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.",
14
- "content": [
15
- {
16
- "heading": "Multiselect",
17
- "body": "This component allows the selection of multiple items from a list.\n\nIf no item is selected in the list a default placeholder text is displayed in the box. Otherwise the items are listed in the box. If the item list is too long for the box, it is truncated and an ellipsis is displayed.\n\nA maximum of seven items is displayed in the list at a time. If the list contains more that 6 items, a scrollbar is added in order to limit the height of the list.\n\nThis component supports items with icons and labels.",
18
- "examples": [
19
- {
20
- "caption": "Example 1",
21
- "rendered_html": "<div class=\"playground-content bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"form-group max-width-400\"><label for=\"m1\">Default Multiselect</label><div class=\"select multiselect dropdown dropup\"><button type=\"button\" id=\"m1\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-list padding-left-1\"><span class=\"selected-option\"><span class=\"selected-label\">Option 1</span><span class=\"removeIcon\"><span class=\"rioglyph rioglyph-remove\"></span></span></span><span class=\"selected-option\"><span class=\"selected-label\">Option 4</span><span class=\"removeIcon\"><span class=\"rioglyph rioglyph-remove\"></span></span></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"active\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"active\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\">Option 4</span><input type=\"hidden\" value=\"4\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\"><span class=\"selected-option-dropdown-item\">Option 5</span><input type=\"hidden\" value=\"5\"></a></li><li class=\"disabled\" role=\"listitem\"><a role=\"menuitem\" class=\"pointer-events-none display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\"><span class=\"selected-option-dropdown-item\">Option 6</span><input type=\"hidden\" value=\"6\"></a></li><li class=\"dropdown-header center \"><span class=\"dropdown-header-text\">Group Header</span></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\"><span class=\"selected-option-dropdown-item\">Option 8</span><input type=\"hidden\" value=\"8\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\"><span class=\"selected-option-dropdown-item\"><i>Option 9</i></span><input type=\"hidden\" value=\"9\"></a></li></ul></div><br><label>Disabled</label><div class=\"select multiselect dropdown dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left disabled\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-list padding-left-1\"><span class=\"selected-option\"><span class=\"selected-label\">Option 1</span><span class=\"removeIcon\"><span class=\"rioglyph rioglyph-remove\"></span></span></span><span class=\"selected-option\"><span class=\"selected-label\">Option 4</span><span class=\"removeIcon\"><span class=\"rioglyph rioglyph-remove\"></span></span></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"active\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"active\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\">Option 4</span><input type=\"hidden\" value=\"4\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\"><span class=\"selected-option-dropdown-item\">Option 5</span><input type=\"hidden\" value=\"5\"></a></li><li class=\"disabled\" role=\"listitem\"><a role=\"menuitem\" class=\"pointer-events-none display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\"><span class=\"selected-option-dropdown-item\">Option 6</span><input type=\"hidden\" value=\"6\"></a></li><li class=\"dropdown-header center \"><span class=\"dropdown-header-text\">Group Header</span></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\"><span class=\"selected-option-dropdown-item\">Option 8</span><input type=\"hidden\" value=\"8\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\"><span class=\"selected-option-dropdown-item\"><i>Option 9</i></span><input type=\"hidden\" value=\"9\"></a></li></ul></div><hr><div class=\"form-group has-error has-feedback max-width-400\"><label for=\"m2\">with external error feedback</label><div class=\"select multiselect dropdown has-error dropup\"><button type=\"button\" id=\"m2\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-list\"><span class=\"selected-option\"><span class=\"selected-label\">Option 1</span><span class=\"removeIcon\"><span class=\"rioglyph rioglyph-remove\"></span></span></span><span class=\"selected-option\"><span class=\"selected-label\">Option 4</span><span class=\"removeIcon\"><span class=\"rioglyph rioglyph-remove\"></span></span></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"active\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"active\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\">Option 4</span><input type=\"hidden\" value=\"4\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\"><span class=\"selected-option-dropdown-item\">Option 5</span><input type=\"hidden\" value=\"5\"></a></li><li class=\"disabled\" role=\"listitem\"><a role=\"menuitem\" class=\"pointer-events-none display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\"><span class=\"selected-option-dropdown-item\">Option 6</span><input type=\"hidden\" value=\"6\"></a></li><li class=\"dropdown-header center \"><span class=\"dropdown-header-text\">Group Header</span></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\"><span class=\"selected-option-dropdown-item\">Option 8</span><input type=\"hidden\" value=\"8\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\"><span class=\"selected-option-dropdown-item\"><i>Option 9</i></span><input type=\"hidden\" value=\"9\"></a></li></ul></div><span class=\"form-control-feedback rioglyph rioglyph-error-sign\"></span><span class=\"help-block\"><span>This is an error message</span></span></div><hr><div class=\"max-width-400\"><label for=\"m3\">with built-in error feedback</label><div class=\"select multiselect dropdown dropup\"><div class=\"form-group margin-bottom-0 has-feedback has-error\"><div class=\"input-group\"><div class=\"input-group-addon\"><span class=\"rioglyph rioglyph-robot\"></span></div><div class=\"form-control-feedback-wrapper\"><button type=\"button\" id=\"m3\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-list margin-left-0\"><span class=\"selected-option\"><span class=\"selected-label\">Option 1</span><span class=\"removeIcon\"><span class=\"rioglyph rioglyph-remove\"></span></span></span><span class=\"selected-option\"><span class=\"selected-label\">Option 4</span><span class=\"removeIcon\"><span class=\"rioglyph rioglyph-remove\"></span></span></span></span><span class=\"caret\"></span></button><span class=\"form-control-feedback rioglyph rioglyph-error-sign\"></span><span class=\"help-block white-space-normal\"><span>This is an error message</span></span></div></div></div><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"active\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"active\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\">Option 4</span><input type=\"hidden\" value=\"4\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\"><span class=\"selected-option-dropdown-item\">Option 5</span><input type=\"hidden\" value=\"5\"></a></li><li class=\"disabled\" role=\"listitem\"><a role=\"menuitem\" class=\"pointer-events-none display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\"><span class=\"selected-option-dropdown-item\">Option 6</span><input type=\"hidden\" value=\"6\"></a></li><li class=\"dropdown-header center \"><span class=\"dropdown-header-text\">Group Header</span></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\"><span class=\"selected-option-dropdown-item\">Option 8</span><input type=\"hidden\" value=\"8\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\"><span class=\"selected-option-dropdown-item\"><i>Option 9</i></span><input type=\"hidden\" value=\"9\"></a></li></ul></div></div><hr></div></div>",
22
- "tabs": [
23
- {
24
- "label": "React",
25
- "language": "tsx",
26
- "code": "import Multiselect from '@rio-cloud/rio-uikit/Multiselect';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\n\nconst options = [\n { id: '1', label: 'Option 1', selected: true },\n { id: '2', label: 'Option 2' },\n { id: '3', label: 'Option 3' },\n { id: '4', label: 'Option 4', selected: true },\n { id: '5', label: 'Option 5' },\n { id: '6', label: 'Option 6', disabled: true },\n { id: '7', label: 'Group Header', header: true },\n { id: '8', label: 'Option 8' },\n { id: '9', label: <i>Option 9</i> },\n];\n\nexport default () => (\n <div className='form-group max-width-400'>\n <label htmlFor='m1'>Default Multiselect</label>\n <Multiselect\n id='m1'\n placeholder='Please select'\n options={options}\n useFilter\n noItemMessage='There must be something here, I know it. Try harder!'\n onChange={response => Notification.info(JSON.stringify(response))}\n />\n <br />\n <label>Disabled</label>\n <Multiselect\n options={options}\n useFilter\n disabled\n onChange={response => Notification.info(JSON.stringify(response))}\n />\n <hr />\n\n <div className='form-group has-error has-feedback max-width-400'>\n <label htmlFor='m2'>with external error feedback</label>\n <Multiselect id='m2' options={options} hasError />\n <span className='form-control-feedback rioglyph rioglyph-error-sign' />\n <span className='help-block'>\n <span>This is an error message</span>\n </span>\n </div>\n <hr />\n\n <div className='max-width-400'>\n <label htmlFor='m3'>with built-in error feedback</label>\n <Multiselect\n id='m3'\n options={options}\n inputAddon='rioglyph rioglyph-robot'\n errorMessage='This is an error message'\n />\n </div>\n <hr />\n </div>\n);"
27
- },
28
- {
29
- "label": "HTML",
30
- "language": "html",
31
- "code": "<div class=\"form-group max-width-400\">\n <label for=\"m1\">Default Multiselect</label>\n <div class=\"select multiselect dropdown dropup\">\n <button type=\"button\" id=\"m1\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"selected-option-list padding-left-1\">\n <span class=\"selected-option\">\n <span class=\"selected-label\">Option 1</span>\n <span class=\"removeIcon\">\n <span class=\"rioglyph rioglyph-remove\">\n </span>\n </span>\n </span>\n <span class=\"selected-option\">\n <span class=\"selected-label\">Option 4</span>\n <span class=\"removeIcon\">\n <span class=\"rioglyph rioglyph-remove\">\n </span>\n </span>\n </span>\n </span>\n <span class=\"caret\">\n </span>\n </button>\n <ul class=\"dropdown-menu\" role=\"menu\">\n <li class=\"active\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n <span class=\"selected-option-dropdown-item\">Option 1</span>\n <input type=\"hidden\" value=\"1\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n <span class=\"selected-option-dropdown-item\">Option 2</span>\n <input type=\"hidden\" value=\"2\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n <span class=\"selected-option-dropdown-item\">Option 3</span>\n <input type=\"hidden\" value=\"3\">\n </a>\n </li>\n <li class=\"active\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n <span class=\"selected-option-dropdown-item\">Option 4</span>\n <input type=\"hidden\" value=\"4\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\">\n <span class=\"selected-option-dropdown-item\">Option 5</span>\n <input type=\"hidden\" value=\"5\">\n </a>\n </li>\n <li class=\"disabled\" role=\"listitem\">\n <a role=\"menuitem\" class=\"pointer-events-none display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\">\n <span class=\"selected-option-dropdown-item\">Option 6</span>\n <input type=\"hidden\" value=\"6\">\n </a>\n </li>\n <li class=\"dropdown-header center \">\n <span class=\"dropdown-header-text\">Group Header</span>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\">\n <span class=\"selected-option-dropdown-item\">Option 8</span>\n <input type=\"hidden\" value=\"8\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\">\n <span class=\"selected-option-dropdown-item\">\n <i>Option 9</i>\n </span>\n <input type=\"hidden\" value=\"9\">\n </a>\n </li>\n </ul>\n </div>\n <br>\n <label>Disabled</label>\n <div class=\"select multiselect dropdown dropup\">\n <button type=\"button\" class=\"dropdown-toggle form-control text-left disabled\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"selected-option-list padding-left-1\">\n <span class=\"selected-option\">\n <span class=\"selected-label\">Option 1</span>\n <span class=\"removeIcon\">\n <span class=\"rioglyph rioglyph-remove\">\n </span>\n </span>\n </span>\n <span class=\"selected-option\">\n <span class=\"selected-label\">Option 4</span>\n <span class=\"removeIcon\">\n <span class=\"rioglyph rioglyph-remove\">\n </span>\n </span>\n </span>\n </span>\n <span class=\"caret\">\n </span>\n </button>\n <ul class=\"dropdown-menu\" role=\"menu\">\n <li class=\"active\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n <span class=\"selected-option-dropdown-item\">Option 1</span>\n <input type=\"hidden\" value=\"1\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n <span class=\"selected-option-dropdown-item\">Option 2</span>\n <input type=\"hidden\" value=\"2\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n <span class=\"selected-option-dropdown-item\">Option 3</span>\n <input type=\"hidden\" value=\"3\">\n </a>\n </li>\n <li class=\"active\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n <span class=\"selected-option-dropdown-item\">Option 4</span>\n <input type=\"hidden\" value=\"4\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\">\n <span class=\"selected-option-dropdown-item\">Option 5</span>\n <input type=\"hidden\" value=\"5\">\n </a>\n </li>\n <li class=\"disabled\" role=\"listitem\">\n <a role=\"menuitem\" class=\"pointer-events-none display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\">\n <span class=\"selected-option-dropdown-item\">Option 6</span>\n <input type=\"hidden\" value=\"6\">\n </a>\n </li>\n <li class=\"dropdown-header center \">\n <span class=\"dropdown-header-text\">Group Header</span>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\">\n <span class=\"selected-option-dropdown-item\">Option 8</span>\n <input type=\"hidden\" value=\"8\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\">\n <span class=\"selected-option-dropdown-item\">\n <i>Option 9</i>\n </span>\n <input type=\"hidden\" value=\"9\">\n </a>\n </li>\n </ul>\n </div>\n <hr>\n <div class=\"form-group has-error has-feedback max-width-400\">\n <label for=\"m2\">with external error feedback</label>\n <div class=\"select multiselect dropdown has-error dropup\">\n <button type=\"button\" id=\"m2\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"selected-option-list\">\n <span class=\"selected-option\">\n <span class=\"selected-label\">Option 1</span>\n <span class=\"removeIcon\">\n <span class=\"rioglyph rioglyph-remove\">\n </span>\n </span>\n </span>\n <span class=\"selected-option\">\n <span class=\"selected-label\">Option 4</span>\n <span class=\"removeIcon\">\n <span class=\"rioglyph rioglyph-remove\">\n </span>\n </span>\n </span>\n </span>\n <span class=\"caret\">\n </span>\n </button>\n <ul class=\"dropdown-menu\" role=\"menu\">\n <li class=\"active\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n <span class=\"selected-option-dropdown-item\">Option 1</span>\n <input type=\"hidden\" value=\"1\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n <span class=\"selected-option-dropdown-item\">Option 2</span>\n <input type=\"hidden\" value=\"2\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n <span class=\"selected-option-dropdown-item\">Option 3</span>\n <input type=\"hidden\" value=\"3\">\n </a>\n </li>\n <li class=\"active\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n <span class=\"selected-option-dropdown-item\">Option 4</span>\n <input type=\"hidden\" value=\"4\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\">\n <span class=\"selected-option-dropdown-item\">Option 5</span>\n <input type=\"hidden\" value=\"5\">\n </a>\n </li>\n <li class=\"disabled\" role=\"listitem\">\n <a role=\"menuitem\" class=\"pointer-events-none display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\">\n <span class=\"selected-option-dropdown-item\">Option 6</span>\n <input type=\"hidden\" value=\"6\">\n </a>\n </li>\n <li class=\"dropdown-header center \">\n <span class=\"dropdown-header-text\">Group Header</span>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\">\n <span class=\"selected-option-dropdown-item\">Option 8</span>\n <input type=\"hidden\" value=\"8\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\">\n <span class=\"selected-option-dropdown-item\">\n <i>Option 9</i>\n </span>\n <input type=\"hidden\" value=\"9\">\n </a>\n </li>\n </ul>\n </div>\n <span class=\"form-control-feedback rioglyph rioglyph-error-sign\">\n </span>\n <span class=\"help-block\">\n <span>This is an error message</span>\n </span>\n </div>\n <hr>\n <div class=\"max-width-400\">\n <label for=\"m3\">with built-in error feedback</label>\n <div class=\"select multiselect dropdown dropup\">\n <div class=\"form-group margin-bottom-0 has-feedback has-error\">\n <div class=\"input-group\">\n <div class=\"input-group-addon\">\n <span class=\"rioglyph rioglyph-robot\">\n </span>\n </div>\n <div class=\"form-control-feedback-wrapper\">\n <button type=\"button\" id=\"m3\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"selected-option-list margin-left-0\">\n <span class=\"selected-option\">\n <span class=\"selected-label\">Option 1</span>\n <span class=\"removeIcon\">\n <span class=\"rioglyph rioglyph-remove\">\n </span>\n </span>\n </span>\n <span class=\"selected-option\">\n <span class=\"selected-label\">Option 4</span>\n <span class=\"removeIcon\">\n <span class=\"rioglyph rioglyph-remove\">\n </span>\n </span>\n </span>\n </span>\n <span class=\"caret\">\n </span>\n </button>\n <span class=\"form-control-feedback rioglyph rioglyph-error-sign\">\n </span>\n <span class=\"help-block white-space-normal\">\n <span>This is an error message</span>\n </span>\n </div>\n </div>\n </div>\n <ul class=\"dropdown-menu\" role=\"menu\">\n <li class=\"active\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n <span class=\"selected-option-dropdown-item\">Option 1</span>\n <input type=\"hidden\" value=\"1\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n <span class=\"selected-option-dropdown-item\">Option 2</span>\n <input type=\"hidden\" value=\"2\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n <span class=\"selected-option-dropdown-item\">Option 3</span>\n <input type=\"hidden\" value=\"3\">\n </a>\n </li>\n <li class=\"active\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n <span class=\"selected-option-dropdown-item\">Option 4</span>\n <input type=\"hidden\" value=\"4\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\">\n <span class=\"selected-option-dropdown-item\">Option 5</span>\n <input type=\"hidden\" value=\"5\">\n </a>\n </li>\n <li class=\"disabled\" role=\"listitem\">\n <a role=\"menuitem\" class=\"pointer-events-none display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\">\n <span class=\"selected-option-dropdown-item\">Option 6</span>\n <input type=\"hidden\" value=\"6\">\n </a>\n </li>\n <li class=\"dropdown-header center \">\n <span class=\"dropdown-header-text\">Group Header</span>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\">\n <span class=\"selected-option-dropdown-item\">Option 8</span>\n <input type=\"hidden\" value=\"8\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\">\n <span class=\"selected-option-dropdown-item\">\n <i>Option 9</i>\n </span>\n <input type=\"hidden\" value=\"9\">\n </a>\n </li>\n </ul>\n </div>\n </div>\n <hr>\n</div>"
32
- },
33
- {
34
- "label": "Props",
35
- "language": "json",
36
- "code": null,
37
- "props": [
38
- {
39
- "heading": null,
40
- "rows": [
41
- {
42
- "name": "name",
43
- "type": "String",
44
- "default": "",
45
- "description": "Passed through as HTML attribute to the toggle button."
46
- },
47
- {
48
- "name": "id",
49
- "type": "String",
50
- "default": "",
51
- "description": "Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly."
52
- },
53
- {
54
- "name": "options",
55
- "type": "Array of Objects",
56
- "default": "[]",
57
- "description": "Items to display in the dropdown menu."
58
- },
59
- {
60
- "name": "└id",
61
- "type": "String",
62
- "default": "",
63
- "description": "Used to identify an option"
64
- },
65
- {
66
- "name": "└label",
67
- "type": "String / Node",
68
- "default": "",
69
- "description": "The option item text"
70
- },
71
- {
72
- "name": "└icon",
73
- "type": "Node",
74
- "default": "",
75
- "description": "Icon to be displayed in front of the label"
76
- },
77
- {
78
- "name": "└selected",
79
- "type": "Boolean",
80
- "default": "false",
81
- "description": "Defines whether the menu item is selected."
82
- },
83
- {
84
- "name": "└disabled",
85
- "type": "Boolean",
86
- "default": "false",
87
- "description": "Setting \"disabled\" to true will disable the respective item."
88
- },
89
- {
90
- "name": "└header",
91
- "type": "Boolean",
92
- "default": "false",
93
- "description": "Will treat the given value as a menu header."
94
- },
95
- {
96
- "name": "value",
97
- "type": "Array",
98
- "default": "",
99
- "description": "Sets the ids of the selected options when the component is already mounted."
100
- },
101
- {
102
- "name": "onChange",
103
- "type": "Function",
104
- "default": "() => {}",
105
- "description": "Callback function triggered when an item is selected."
106
- },
107
- {
108
- "name": "placeholder",
109
- "type": "String / Node",
110
- "default": "",
111
- "description": "Text to display when nothing is selected."
112
- },
113
- {
114
- "name": "dropup",
115
- "type": "Boolean",
116
- "default": "false",
117
- "description": "Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature."
118
- },
119
- {
120
- "name": "pullRight",
121
- "type": "Boolean",
122
- "default": "false",
123
- "description": "Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature."
124
- },
125
- {
126
- "name": "autoDropDirection",
127
- "type": "Boolean",
128
- "default": "true",
129
- "description": "Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space."
130
- },
131
- {
132
- "name": "bsSize",
133
- "type": "String",
134
- "default": "md",
135
- "description": "Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg'"
136
- },
137
- {
138
- "name": "disabled",
139
- "type": "Boolean",
140
- "default": "false",
141
- "description": "Option to disable the opening of the option list."
142
- },
143
- {
144
- "name": "tabIndex",
145
- "type": "Number",
146
- "default": "0",
147
- "description": "The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex"
148
- },
149
- {
150
- "name": "hasError",
151
- "type": "Boolean",
152
- "default": "false",
153
- "description": "Defines whether the Bootstrap error classes shall be added to the toggle element."
154
- },
155
- {
156
- "name": "useFilter",
157
- "type": "Boolean",
158
- "default": "false",
159
- "description": "Defines whether the component should be filterable."
160
- },
161
- {
162
- "name": "noItemMessage",
163
- "type": "String / Node",
164
- "default": "",
165
- "description": "Text that shall be shown when not match was found when filtering."
166
- },
167
- {
168
- "name": "counterMessage",
169
- "type": "Object",
170
- "default": "",
171
- "description": "Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' }"
172
- },
173
- {
174
- "name": "└one",
175
- "type": "String / Node",
176
- "default": "",
177
- "description": "Text that will be used when a single item is selected."
178
- },
179
- {
180
- "name": "└many",
181
- "type": "String / Node",
182
- "default": "",
183
- "description": "Text that will be used when multiple item are selected."
184
- },
185
- {
186
- "name": "renderCounterMessage",
187
- "type": "Function",
188
- "default": "",
189
- "description": "Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality."
190
- },
191
- {
192
- "name": "multiline",
193
- "type": "boolean",
194
- "default": "false",
195
- "description": "Defines whether the selected items wrap around within the dropdown toggle."
196
- },
197
- {
198
- "name": "showSelectedItemIcon",
199
- "type": "Boolean",
200
- "default": "false",
201
- "description": "Set to show only the icon and not the label of selected item."
202
- },
203
- {
204
- "name": "showUnselectedItemIcons",
205
- "type": "Boolean",
206
- "default": "false",
207
- "description": "Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive."
208
- },
209
- {
210
- "name": "inputAddon",
211
- "type": "String | ReactNode",
212
- "default": "",
213
- "description": "Option to add an icon as a leading input addon to the select component."
214
- },
215
- {
216
- "name": "errorMessage",
217
- "type": "String",
218
- "default": "",
219
- "description": "Input error message."
220
- },
221
- {
222
- "name": "warningMessage",
223
- "type": "String",
224
- "default": "",
225
- "description": "Input warning message."
226
- },
227
- {
228
- "name": "messageWhiteSpace",
229
- "type": "'normal' | 'prewrap' | 'nowrap'",
230
- "default": "'normal'",
231
- "description": "Optional warning message white-space setting."
232
- },
233
- {
234
- "name": "dropdownClassName",
235
- "type": "String",
236
- "default": "",
237
- "description": "Additional classes to be set to the dropdown."
238
- },
239
- {
240
- "name": "btnClassName",
241
- "type": "String",
242
- "default": "",
243
- "description": "Additional classes to be set to the select/input."
244
- },
245
- {
246
- "name": "className",
247
- "type": "String",
248
- "default": "",
249
- "description": "Additional classes to be set to the select wrapper."
250
- }
251
- ]
252
- }
253
- ]
254
- }
255
- ]
256
- },
257
- {
258
- "caption": "Example 2",
259
- "rendered_html": "<div class=\"playground-content bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"form-group max-width-400\"><label for=\"withLabel\">With label component</label><div class=\"select multiselect dropdown dropup\"><div class=\"form-group margin-bottom-0\"><div class=\"input-group\"><div class=\"input-group-addon\"><span class=\"rioglyph rioglyph-robot\"></span></div><div class=\"form-control-feedback-wrapper\"><button type=\"button\" id=\"withLabel\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"placeholder\">Please select vehicles</span><span class=\"caret\"></span></button></div></div></div><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\"><span class=\"display-flex gap-3 align-items-center\"><span class=\"rioglyph rioglyph-truck\"></span><span>Truck</span></span></span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\"><span class=\"display-flex gap-3 align-items-center\"><span class=\"rioglyph rioglyph-van\"></span><span>Van</span></span></span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\"><span class=\"display-flex gap-3 align-items-center\"><span class=\"rioglyph rioglyph-bus\"></span><span>Bus</span></span></span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div></div>",
260
- "tabs": [
261
- {
262
- "label": "React",
263
- "language": "tsx",
264
- "code": "import Multiselect from '@rio-cloud/rio-uikit/Multiselect';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\n\nconst options = [\n {\n id: '1',\n label: (\n <span className='display-flex gap-3 align-items-center'>\n <span className='rioglyph rioglyph-truck' />\n <span>Truck</span>\n </span>\n ),\n foo: 'Bar',\n },\n {\n id: '2',\n label: (\n <span className='display-flex gap-3 align-items-center'>\n <span className='rioglyph rioglyph-van' />\n <span>Van</span>\n </span>\n ),\n foo: 'Bar',\n },\n {\n id: '3',\n label: (\n <span className='display-flex gap-3 align-items-center'>\n <span className='rioglyph rioglyph-bus' />\n <span>Bus</span>\n </span>\n ),\n foo: 'Bar',\n },\n];\n\nexport default () => (\n <div className='form-group max-width-400'>\n <label htmlFor='withLabel'>With label component</label>\n <Multiselect\n id='withLabel'\n placeholder='Please select vehicles'\n options={options}\n inputAddon='rioglyph rioglyph-robot'\n useFilter\n onChange={response => Notification.info(JSON.stringify(response))}\n />\n </div>\n);"
265
- },
266
- {
267
- "label": "HTML",
268
- "language": "html",
269
- "code": "<div class=\"form-group max-width-400\">\n <label for=\"withLabel\">With label component</label>\n <div class=\"select multiselect dropdown dropup\">\n <div class=\"form-group margin-bottom-0\">\n <div class=\"input-group\">\n <div class=\"input-group-addon\">\n <span class=\"rioglyph rioglyph-robot\">\n </span>\n </div>\n <div class=\"form-control-feedback-wrapper\">\n <button type=\"button\" id=\"withLabel\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"placeholder\">Please select vehicles</span>\n <span class=\"caret\">\n </span>\n </button>\n </div>\n </div>\n </div>\n <ul class=\"dropdown-menu\" role=\"menu\">\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n <span class=\"selected-option-dropdown-item\">\n <span class=\"display-flex gap-3 align-items-center\">\n <span class=\"rioglyph rioglyph-truck\">\n </span>\n <span>Truck</span>\n </span>\n </span>\n <input type=\"hidden\" value=\"1\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n <span class=\"selected-option-dropdown-item\">\n <span class=\"display-flex gap-3 align-items-center\">\n <span class=\"rioglyph rioglyph-van\">\n </span>\n <span>Van</span>\n </span>\n </span>\n <input type=\"hidden\" value=\"2\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n <span class=\"selected-option-dropdown-item\">\n <span class=\"display-flex gap-3 align-items-center\">\n <span class=\"rioglyph rioglyph-bus\">\n </span>\n <span>Bus</span>\n </span>\n </span>\n <input type=\"hidden\" value=\"3\">\n </a>\n </li>\n </ul>\n </div>\n</div>"
270
- },
271
- {
272
- "label": "Props",
273
- "language": "json",
274
- "code": null,
275
- "props": [
276
- {
277
- "heading": null,
278
- "rows": [
279
- {
280
- "name": "name",
281
- "type": "String",
282
- "default": "",
283
- "description": "Passed through as HTML attribute to the toggle button."
284
- },
285
- {
286
- "name": "id",
287
- "type": "String",
288
- "default": "",
289
- "description": "Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly."
290
- },
291
- {
292
- "name": "options",
293
- "type": "Array of Objects",
294
- "default": "[]",
295
- "description": "Items to display in the dropdown menu."
296
- },
297
- {
298
- "name": "└id",
299
- "type": "String",
300
- "default": "",
301
- "description": "Used to identify an option"
302
- },
303
- {
304
- "name": "└label",
305
- "type": "String / Node",
306
- "default": "",
307
- "description": "The option item text"
308
- },
309
- {
310
- "name": "└icon",
311
- "type": "Node",
312
- "default": "",
313
- "description": "Icon to be displayed in front of the label"
314
- },
315
- {
316
- "name": "└selected",
317
- "type": "Boolean",
318
- "default": "false",
319
- "description": "Defines whether the menu item is selected."
320
- },
321
- {
322
- "name": "└disabled",
323
- "type": "Boolean",
324
- "default": "false",
325
- "description": "Setting \"disabled\" to true will disable the respective item."
326
- },
327
- {
328
- "name": "└header",
329
- "type": "Boolean",
330
- "default": "false",
331
- "description": "Will treat the given value as a menu header."
332
- },
333
- {
334
- "name": "value",
335
- "type": "Array",
336
- "default": "",
337
- "description": "Sets the ids of the selected options when the component is already mounted."
338
- },
339
- {
340
- "name": "onChange",
341
- "type": "Function",
342
- "default": "() => {}",
343
- "description": "Callback function triggered when an item is selected."
344
- },
345
- {
346
- "name": "placeholder",
347
- "type": "String / Node",
348
- "default": "",
349
- "description": "Text to display when nothing is selected."
350
- },
351
- {
352
- "name": "dropup",
353
- "type": "Boolean",
354
- "default": "false",
355
- "description": "Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature."
356
- },
357
- {
358
- "name": "pullRight",
359
- "type": "Boolean",
360
- "default": "false",
361
- "description": "Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature."
362
- },
363
- {
364
- "name": "autoDropDirection",
365
- "type": "Boolean",
366
- "default": "true",
367
- "description": "Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space."
368
- },
369
- {
370
- "name": "bsSize",
371
- "type": "String",
372
- "default": "md",
373
- "description": "Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg'"
374
- },
375
- {
376
- "name": "disabled",
377
- "type": "Boolean",
378
- "default": "false",
379
- "description": "Option to disable the opening of the option list."
380
- },
381
- {
382
- "name": "tabIndex",
383
- "type": "Number",
384
- "default": "0",
385
- "description": "The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex"
386
- },
387
- {
388
- "name": "hasError",
389
- "type": "Boolean",
390
- "default": "false",
391
- "description": "Defines whether the Bootstrap error classes shall be added to the toggle element."
392
- },
393
- {
394
- "name": "useFilter",
395
- "type": "Boolean",
396
- "default": "false",
397
- "description": "Defines whether the component should be filterable."
398
- },
399
- {
400
- "name": "noItemMessage",
401
- "type": "String / Node",
402
- "default": "",
403
- "description": "Text that shall be shown when not match was found when filtering."
404
- },
405
- {
406
- "name": "counterMessage",
407
- "type": "Object",
408
- "default": "",
409
- "description": "Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' }"
410
- },
411
- {
412
- "name": "└one",
413
- "type": "String / Node",
414
- "default": "",
415
- "description": "Text that will be used when a single item is selected."
416
- },
417
- {
418
- "name": "└many",
419
- "type": "String / Node",
420
- "default": "",
421
- "description": "Text that will be used when multiple item are selected."
422
- },
423
- {
424
- "name": "renderCounterMessage",
425
- "type": "Function",
426
- "default": "",
427
- "description": "Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality."
428
- },
429
- {
430
- "name": "multiline",
431
- "type": "boolean",
432
- "default": "false",
433
- "description": "Defines whether the selected items wrap around within the dropdown toggle."
434
- },
435
- {
436
- "name": "showSelectedItemIcon",
437
- "type": "Boolean",
438
- "default": "false",
439
- "description": "Set to show only the icon and not the label of selected item."
440
- },
441
- {
442
- "name": "showUnselectedItemIcons",
443
- "type": "Boolean",
444
- "default": "false",
445
- "description": "Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive."
446
- },
447
- {
448
- "name": "inputAddon",
449
- "type": "String | ReactNode",
450
- "default": "",
451
- "description": "Option to add an icon as a leading input addon to the select component."
452
- },
453
- {
454
- "name": "errorMessage",
455
- "type": "String",
456
- "default": "",
457
- "description": "Input error message."
458
- },
459
- {
460
- "name": "warningMessage",
461
- "type": "String",
462
- "default": "",
463
- "description": "Input warning message."
464
- },
465
- {
466
- "name": "messageWhiteSpace",
467
- "type": "'normal' | 'prewrap' | 'nowrap'",
468
- "default": "'normal'",
469
- "description": "Optional warning message white-space setting."
470
- },
471
- {
472
- "name": "dropdownClassName",
473
- "type": "String",
474
- "default": "",
475
- "description": "Additional classes to be set to the dropdown."
476
- },
477
- {
478
- "name": "btnClassName",
479
- "type": "String",
480
- "default": "",
481
- "description": "Additional classes to be set to the select/input."
482
- },
483
- {
484
- "name": "className",
485
- "type": "String",
486
- "default": "",
487
- "description": "Additional classes to be set to the select wrapper."
488
- }
489
- ]
490
- }
491
- ]
492
- }
493
- ]
494
- },
495
- {
496
- "caption": "Example 3",
497
- "rendered_html": "<div class=\"playground-content bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"form-group max-width-400\"><label for=\"multiline\">Multiline with wrapping items</label><div class=\"select multiselect dropdown dropup\"><div class=\"form-group margin-bottom-0\"><div class=\"input-group\"><div class=\"input-group-addon\"><span class=\"rioglyph rioglyph-filter\"></span></div><div class=\"form-control-feedback-wrapper\"><button type=\"button\" id=\"multiline\" class=\"dropdown-toggle form-control text-left height-auto\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-list flex-wrap margin-left-0 padding-left-1\"><span class=\"selected-option\"><span class=\"selected-label\">Option 1</span><span class=\"removeIcon\"><span class=\"rioglyph rioglyph-remove\"></span></span></span><span class=\"selected-option\"><span class=\"selected-label\">Option 2</span><span class=\"removeIcon\"><span class=\"rioglyph rioglyph-remove\"></span></span></span><span class=\"selected-option\"><span class=\"selected-label\">Option 3</span><span class=\"removeIcon\"><span class=\"rioglyph rioglyph-remove\"></span></span></span><span class=\"selected-option\"><span class=\"selected-label\">Option 4</span><span class=\"removeIcon\"><span class=\"rioglyph rioglyph-remove\"></span></span></span><span class=\"selected-option\"><span class=\"selected-label\">Option 5</span><span class=\"removeIcon\"><span class=\"rioglyph rioglyph-remove\"></span></span></span><span class=\"selected-option\"><span class=\"selected-label\">Option 6</span><span class=\"removeIcon\"><span class=\"rioglyph rioglyph-remove\"></span></span></span><span class=\"selected-option\"><span class=\"selected-label\">Option 8</span><span class=\"removeIcon\"><span class=\"rioglyph rioglyph-remove\"></span></span></span><input type=\"text\" role=\"searchbox\" class=\"multiselect-filter-input\" value=\"\"></span><span class=\"caret\"></span></button></div></div></div><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"active\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"active\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"active\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"active\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\">Option 4</span><input type=\"hidden\" value=\"4\"></a></li><li class=\"active\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\"><span class=\"selected-option-dropdown-item\">Option 5</span><input type=\"hidden\" value=\"5\"></a></li><li class=\"active\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\"><span class=\"selected-option-dropdown-item\">Option 6</span><input type=\"hidden\" value=\"6\"></a></li><li class=\"dropdown-header center \"><span class=\"dropdown-header-text\">Group Header</span></li><li class=\"active\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\"><span class=\"selected-option-dropdown-item\">Option 8</span><input type=\"hidden\" value=\"8\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\"><span class=\"selected-option-dropdown-item\">Option 9</span><input type=\"hidden\" value=\"9\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"10\" data-item-index=\"9\"><span class=\"selected-option-dropdown-item\">Option 10</span><input type=\"hidden\" value=\"10\"></a></li></ul></div></div></div>",
498
- "tabs": [
499
- {
500
- "label": "React",
501
- "language": "tsx",
502
- "code": "import Multiselect from '@rio-cloud/rio-uikit/Multiselect';\n\nconst options = [\n { id: '1', label: 'Option 1', selected: true },\n { id: '2', label: 'Option 2', selected: true },\n { id: '3', label: 'Option 3', selected: true },\n { id: '4', label: 'Option 4', selected: true },\n { id: '5', label: 'Option 5', selected: true },\n { id: '6', label: 'Option 6', selected: true },\n { id: '7', label: 'Group Header', header: true },\n { id: '8', label: 'Option 8', selected: true },\n { id: '9', label: 'Option 9' },\n { id: '10', label: 'Option 10' },\n];\n\nexport default () => (\n <div className='form-group max-width-400'>\n <label htmlFor='multiline'>Multiline with wrapping items</label>\n <Multiselect\n id='multiline'\n placeholder='Please select'\n noItemMessage='Nothing found'\n options={options}\n inputAddon='rioglyph rioglyph-filter'\n multiline\n useFilter\n />\n </div>\n);"
503
- },
504
- {
505
- "label": "HTML",
506
- "language": "html",
507
- "code": "<div class=\"form-group max-width-400\">\n <label for=\"multiline\">Multiline with wrapping items</label>\n <div class=\"select multiselect dropdown dropup\">\n <div class=\"form-group margin-bottom-0\">\n <div class=\"input-group\">\n <div class=\"input-group-addon\">\n <span class=\"rioglyph rioglyph-filter\">\n </span>\n </div>\n <div class=\"form-control-feedback-wrapper\">\n <button type=\"button\" id=\"multiline\" class=\"dropdown-toggle form-control text-left height-auto\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"selected-option-list flex-wrap margin-left-0 padding-left-1\">\n <span class=\"selected-option\">\n <span class=\"selected-label\">Option 1</span>\n <span class=\"removeIcon\">\n <span class=\"rioglyph rioglyph-remove\">\n </span>\n </span>\n </span>\n <span class=\"selected-option\">\n <span class=\"selected-label\">Option 2</span>\n <span class=\"removeIcon\">\n <span class=\"rioglyph rioglyph-remove\">\n </span>\n </span>\n </span>\n <span class=\"selected-option\">\n <span class=\"selected-label\">Option 3</span>\n <span class=\"removeIcon\">\n <span class=\"rioglyph rioglyph-remove\">\n </span>\n </span>\n </span>\n <span class=\"selected-option\">\n <span class=\"selected-label\">Option 4</span>\n <span class=\"removeIcon\">\n <span class=\"rioglyph rioglyph-remove\">\n </span>\n </span>\n </span>\n <span class=\"selected-option\">\n <span class=\"selected-label\">Option 5</span>\n <span class=\"removeIcon\">\n <span class=\"rioglyph rioglyph-remove\">\n </span>\n </span>\n </span>\n <span class=\"selected-option\">\n <span class=\"selected-label\">Option 6</span>\n <span class=\"removeIcon\">\n <span class=\"rioglyph rioglyph-remove\">\n </span>\n </span>\n </span>\n <span class=\"selected-option\">\n <span class=\"selected-label\">Option 8</span>\n <span class=\"removeIcon\">\n <span class=\"rioglyph rioglyph-remove\">\n </span>\n </span>\n </span>\n <input type=\"text\" role=\"searchbox\" class=\"multiselect-filter-input\" value=\"\">\n </span>\n <span class=\"caret\">\n </span>\n </button>\n </div>\n </div>\n </div>\n <ul class=\"dropdown-menu\" role=\"menu\">\n <li class=\"active\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n <span class=\"selected-option-dropdown-item\">Option 1</span>\n <input type=\"hidden\" value=\"1\">\n </a>\n </li>\n <li class=\"active\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n <span class=\"selected-option-dropdown-item\">Option 2</span>\n <input type=\"hidden\" value=\"2\">\n </a>\n </li>\n <li class=\"active\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n <span class=\"selected-option-dropdown-item\">Option 3</span>\n <input type=\"hidden\" value=\"3\">\n </a>\n </li>\n <li class=\"active\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n <span class=\"selected-option-dropdown-item\">Option 4</span>\n <input type=\"hidden\" value=\"4\">\n </a>\n </li>\n <li class=\"active\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\">\n <span class=\"selected-option-dropdown-item\">Option 5</span>\n <input type=\"hidden\" value=\"5\">\n </a>\n </li>\n <li class=\"active\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\">\n <span class=\"selected-option-dropdown-item\">Option 6</span>\n <input type=\"hidden\" value=\"6\">\n </a>\n </li>\n <li class=\"dropdown-header center \">\n <span class=\"dropdown-header-text\">Group Header</span>\n </li>\n <li class=\"active\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\">\n <span class=\"selected-option-dropdown-item\">Option 8</span>\n <input type=\"hidden\" value=\"8\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\">\n <span class=\"selected-option-dropdown-item\">Option 9</span>\n <input type=\"hidden\" value=\"9\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"10\" data-item-index=\"9\">\n <span class=\"selected-option-dropdown-item\">Option 10</span>\n <input type=\"hidden\" value=\"10\">\n </a>\n </li>\n </ul>\n </div>\n</div>"
508
- },
509
- {
510
- "label": "Props",
511
- "language": "json",
512
- "code": null,
513
- "props": [
514
- {
515
- "heading": null,
516
- "rows": [
517
- {
518
- "name": "name",
519
- "type": "String",
520
- "default": "",
521
- "description": "Passed through as HTML attribute to the toggle button."
522
- },
523
- {
524
- "name": "id",
525
- "type": "String",
526
- "default": "",
527
- "description": "Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly."
528
- },
529
- {
530
- "name": "options",
531
- "type": "Array of Objects",
532
- "default": "[]",
533
- "description": "Items to display in the dropdown menu."
534
- },
535
- {
536
- "name": "└id",
537
- "type": "String",
538
- "default": "",
539
- "description": "Used to identify an option"
540
- },
541
- {
542
- "name": "└label",
543
- "type": "String / Node",
544
- "default": "",
545
- "description": "The option item text"
546
- },
547
- {
548
- "name": "└icon",
549
- "type": "Node",
550
- "default": "",
551
- "description": "Icon to be displayed in front of the label"
552
- },
553
- {
554
- "name": "└selected",
555
- "type": "Boolean",
556
- "default": "false",
557
- "description": "Defines whether the menu item is selected."
558
- },
559
- {
560
- "name": "└disabled",
561
- "type": "Boolean",
562
- "default": "false",
563
- "description": "Setting \"disabled\" to true will disable the respective item."
564
- },
565
- {
566
- "name": "└header",
567
- "type": "Boolean",
568
- "default": "false",
569
- "description": "Will treat the given value as a menu header."
570
- },
571
- {
572
- "name": "value",
573
- "type": "Array",
574
- "default": "",
575
- "description": "Sets the ids of the selected options when the component is already mounted."
576
- },
577
- {
578
- "name": "onChange",
579
- "type": "Function",
580
- "default": "() => {}",
581
- "description": "Callback function triggered when an item is selected."
582
- },
583
- {
584
- "name": "placeholder",
585
- "type": "String / Node",
586
- "default": "",
587
- "description": "Text to display when nothing is selected."
588
- },
589
- {
590
- "name": "dropup",
591
- "type": "Boolean",
592
- "default": "false",
593
- "description": "Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature."
594
- },
595
- {
596
- "name": "pullRight",
597
- "type": "Boolean",
598
- "default": "false",
599
- "description": "Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature."
600
- },
601
- {
602
- "name": "autoDropDirection",
603
- "type": "Boolean",
604
- "default": "true",
605
- "description": "Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space."
606
- },
607
- {
608
- "name": "bsSize",
609
- "type": "String",
610
- "default": "md",
611
- "description": "Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg'"
612
- },
613
- {
614
- "name": "disabled",
615
- "type": "Boolean",
616
- "default": "false",
617
- "description": "Option to disable the opening of the option list."
618
- },
619
- {
620
- "name": "tabIndex",
621
- "type": "Number",
622
- "default": "0",
623
- "description": "The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex"
624
- },
625
- {
626
- "name": "hasError",
627
- "type": "Boolean",
628
- "default": "false",
629
- "description": "Defines whether the Bootstrap error classes shall be added to the toggle element."
630
- },
631
- {
632
- "name": "useFilter",
633
- "type": "Boolean",
634
- "default": "false",
635
- "description": "Defines whether the component should be filterable."
636
- },
637
- {
638
- "name": "noItemMessage",
639
- "type": "String / Node",
640
- "default": "",
641
- "description": "Text that shall be shown when not match was found when filtering."
642
- },
643
- {
644
- "name": "counterMessage",
645
- "type": "Object",
646
- "default": "",
647
- "description": "Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' }"
648
- },
649
- {
650
- "name": "└one",
651
- "type": "String / Node",
652
- "default": "",
653
- "description": "Text that will be used when a single item is selected."
654
- },
655
- {
656
- "name": "└many",
657
- "type": "String / Node",
658
- "default": "",
659
- "description": "Text that will be used when multiple item are selected."
660
- },
661
- {
662
- "name": "renderCounterMessage",
663
- "type": "Function",
664
- "default": "",
665
- "description": "Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality."
666
- },
667
- {
668
- "name": "multiline",
669
- "type": "boolean",
670
- "default": "false",
671
- "description": "Defines whether the selected items wrap around within the dropdown toggle."
672
- },
673
- {
674
- "name": "showSelectedItemIcon",
675
- "type": "Boolean",
676
- "default": "false",
677
- "description": "Set to show only the icon and not the label of selected item."
678
- },
679
- {
680
- "name": "showUnselectedItemIcons",
681
- "type": "Boolean",
682
- "default": "false",
683
- "description": "Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive."
684
- },
685
- {
686
- "name": "inputAddon",
687
- "type": "String | ReactNode",
688
- "default": "",
689
- "description": "Option to add an icon as a leading input addon to the select component."
690
- },
691
- {
692
- "name": "errorMessage",
693
- "type": "String",
694
- "default": "",
695
- "description": "Input error message."
696
- },
697
- {
698
- "name": "warningMessage",
699
- "type": "String",
700
- "default": "",
701
- "description": "Input warning message."
702
- },
703
- {
704
- "name": "messageWhiteSpace",
705
- "type": "'normal' | 'prewrap' | 'nowrap'",
706
- "default": "'normal'",
707
- "description": "Optional warning message white-space setting."
708
- },
709
- {
710
- "name": "dropdownClassName",
711
- "type": "String",
712
- "default": "",
713
- "description": "Additional classes to be set to the dropdown."
714
- },
715
- {
716
- "name": "btnClassName",
717
- "type": "String",
718
- "default": "",
719
- "description": "Additional classes to be set to the select/input."
720
- },
721
- {
722
- "name": "className",
723
- "type": "String",
724
- "default": "",
725
- "description": "Additional classes to be set to the select wrapper."
726
- }
727
- ]
728
- }
729
- ]
730
- }
731
- ]
732
- },
733
- {
734
- "caption": "Example 4",
735
- "rendered_html": "<div class=\"playground-content bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"form-group max-width-500\"><label for=\"withCounter\">With selected item counter</label><div class=\"select multiselect dropdown dropup\"><button type=\"button\" id=\"withCounter\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"placeholder\">Please select</span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li></ul></div><br><label for=\"withMessage\">With selected item counter render function - Note: \"counterMessage\" should be favored</label><div class=\"select multiselect dropdown dropup\"><button type=\"button\" id=\"withMessage\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"placeholder\">Please select</span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li></ul></div></div></div>",
736
- "tabs": [
737
- {
738
- "label": "React",
739
- "language": "tsx",
740
- "code": "import Multiselect from '@rio-cloud/rio-uikit/Multiselect';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\n\nconst options = [\n { id: '1', label: 'Option 1' },\n { id: '2', label: 'Option 2' },\n { id: '3', label: 'Option 3' },\n];\n\nexport default () => (\n <div className='form-group max-width-500'>\n <label htmlFor='withCounter'>With selected item counter</label>\n <Multiselect\n id='withCounter'\n placeholder='Please select'\n options={options}\n counterMessage={{ one: 'Asset selected', many: 'Assets selected' }}\n onChange={response => Notification.info(JSON.stringify(response))}\n />\n <br />\n <label htmlFor='withMessage'>\n With selected item counter render function - Note: \"counterMessage\" should be favored\n </label>\n <Multiselect\n id='withMessage'\n placeholder='Please select'\n options={options}\n renderCounterMessage={selectedAmount =>\n selectedAmount === 1 ? `${selectedAmount} Asset selected` : `${selectedAmount} Assets selected`\n }\n onChange={response => Notification.info(JSON.stringify(response))}\n />\n </div>\n);"
741
- },
742
- {
743
- "label": "HTML",
744
- "language": "html",
745
- "code": "<div class=\"form-group max-width-500\">\n <label for=\"withCounter\">With selected item counter</label>\n <div class=\"select multiselect dropdown dropup\">\n <button type=\"button\" id=\"withCounter\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"placeholder\">Please select</span>\n <span class=\"caret\">\n </span>\n </button>\n <ul class=\"dropdown-menu\" role=\"menu\">\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n <span class=\"selected-option-dropdown-item\">Option 1</span>\n <input type=\"hidden\" value=\"1\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n <span class=\"selected-option-dropdown-item\">Option 2</span>\n <input type=\"hidden\" value=\"2\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n <span class=\"selected-option-dropdown-item\">Option 3</span>\n <input type=\"hidden\" value=\"3\">\n </a>\n </li>\n </ul>\n </div>\n <br>\n <label for=\"withMessage\">With selected item counter render function - Note: \"counterMessage\" should be favored</label>\n <div class=\"select multiselect dropdown dropup\">\n <button type=\"button\" id=\"withMessage\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"placeholder\">Please select</span>\n <span class=\"caret\">\n </span>\n </button>\n <ul class=\"dropdown-menu\" role=\"menu\">\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n <span class=\"selected-option-dropdown-item\">Option 1</span>\n <input type=\"hidden\" value=\"1\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n <span class=\"selected-option-dropdown-item\">Option 2</span>\n <input type=\"hidden\" value=\"2\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n <span class=\"selected-option-dropdown-item\">Option 3</span>\n <input type=\"hidden\" value=\"3\">\n </a>\n </li>\n </ul>\n </div>\n</div>"
746
- },
747
- {
748
- "label": "Props",
749
- "language": "json",
750
- "code": null,
751
- "props": [
752
- {
753
- "heading": null,
754
- "rows": [
755
- {
756
- "name": "name",
757
- "type": "String",
758
- "default": "",
759
- "description": "Passed through as HTML attribute to the toggle button."
760
- },
761
- {
762
- "name": "id",
763
- "type": "String",
764
- "default": "",
765
- "description": "Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly."
766
- },
767
- {
768
- "name": "options",
769
- "type": "Array of Objects",
770
- "default": "[]",
771
- "description": "Items to display in the dropdown menu."
772
- },
773
- {
774
- "name": "└id",
775
- "type": "String",
776
- "default": "",
777
- "description": "Used to identify an option"
778
- },
779
- {
780
- "name": "└label",
781
- "type": "String / Node",
782
- "default": "",
783
- "description": "The option item text"
784
- },
785
- {
786
- "name": "└icon",
787
- "type": "Node",
788
- "default": "",
789
- "description": "Icon to be displayed in front of the label"
790
- },
791
- {
792
- "name": "└selected",
793
- "type": "Boolean",
794
- "default": "false",
795
- "description": "Defines whether the menu item is selected."
796
- },
797
- {
798
- "name": "└disabled",
799
- "type": "Boolean",
800
- "default": "false",
801
- "description": "Setting \"disabled\" to true will disable the respective item."
802
- },
803
- {
804
- "name": "└header",
805
- "type": "Boolean",
806
- "default": "false",
807
- "description": "Will treat the given value as a menu header."
808
- },
809
- {
810
- "name": "value",
811
- "type": "Array",
812
- "default": "",
813
- "description": "Sets the ids of the selected options when the component is already mounted."
814
- },
815
- {
816
- "name": "onChange",
817
- "type": "Function",
818
- "default": "() => {}",
819
- "description": "Callback function triggered when an item is selected."
820
- },
821
- {
822
- "name": "placeholder",
823
- "type": "String / Node",
824
- "default": "",
825
- "description": "Text to display when nothing is selected."
826
- },
827
- {
828
- "name": "dropup",
829
- "type": "Boolean",
830
- "default": "false",
831
- "description": "Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature."
832
- },
833
- {
834
- "name": "pullRight",
835
- "type": "Boolean",
836
- "default": "false",
837
- "description": "Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature."
838
- },
839
- {
840
- "name": "autoDropDirection",
841
- "type": "Boolean",
842
- "default": "true",
843
- "description": "Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space."
844
- },
845
- {
846
- "name": "bsSize",
847
- "type": "String",
848
- "default": "md",
849
- "description": "Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg'"
850
- },
851
- {
852
- "name": "disabled",
853
- "type": "Boolean",
854
- "default": "false",
855
- "description": "Option to disable the opening of the option list."
856
- },
857
- {
858
- "name": "tabIndex",
859
- "type": "Number",
860
- "default": "0",
861
- "description": "The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex"
862
- },
863
- {
864
- "name": "hasError",
865
- "type": "Boolean",
866
- "default": "false",
867
- "description": "Defines whether the Bootstrap error classes shall be added to the toggle element."
868
- },
869
- {
870
- "name": "useFilter",
871
- "type": "Boolean",
872
- "default": "false",
873
- "description": "Defines whether the component should be filterable."
874
- },
875
- {
876
- "name": "noItemMessage",
877
- "type": "String / Node",
878
- "default": "",
879
- "description": "Text that shall be shown when not match was found when filtering."
880
- },
881
- {
882
- "name": "counterMessage",
883
- "type": "Object",
884
- "default": "",
885
- "description": "Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' }"
886
- },
887
- {
888
- "name": "└one",
889
- "type": "String / Node",
890
- "default": "",
891
- "description": "Text that will be used when a single item is selected."
892
- },
893
- {
894
- "name": "└many",
895
- "type": "String / Node",
896
- "default": "",
897
- "description": "Text that will be used when multiple item are selected."
898
- },
899
- {
900
- "name": "renderCounterMessage",
901
- "type": "Function",
902
- "default": "",
903
- "description": "Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality."
904
- },
905
- {
906
- "name": "multiline",
907
- "type": "boolean",
908
- "default": "false",
909
- "description": "Defines whether the selected items wrap around within the dropdown toggle."
910
- },
911
- {
912
- "name": "showSelectedItemIcon",
913
- "type": "Boolean",
914
- "default": "false",
915
- "description": "Set to show only the icon and not the label of selected item."
916
- },
917
- {
918
- "name": "showUnselectedItemIcons",
919
- "type": "Boolean",
920
- "default": "false",
921
- "description": "Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive."
922
- },
923
- {
924
- "name": "inputAddon",
925
- "type": "String | ReactNode",
926
- "default": "",
927
- "description": "Option to add an icon as a leading input addon to the select component."
928
- },
929
- {
930
- "name": "errorMessage",
931
- "type": "String",
932
- "default": "",
933
- "description": "Input error message."
934
- },
935
- {
936
- "name": "warningMessage",
937
- "type": "String",
938
- "default": "",
939
- "description": "Input warning message."
940
- },
941
- {
942
- "name": "messageWhiteSpace",
943
- "type": "'normal' | 'prewrap' | 'nowrap'",
944
- "default": "'normal'",
945
- "description": "Optional warning message white-space setting."
946
- },
947
- {
948
- "name": "dropdownClassName",
949
- "type": "String",
950
- "default": "",
951
- "description": "Additional classes to be set to the dropdown."
952
- },
953
- {
954
- "name": "btnClassName",
955
- "type": "String",
956
- "default": "",
957
- "description": "Additional classes to be set to the select/input."
958
- },
959
- {
960
- "name": "className",
961
- "type": "String",
962
- "default": "",
963
- "description": "Additional classes to be set to the select wrapper."
964
- }
965
- ]
966
- }
967
- ]
968
- }
969
- ]
970
- },
971
- {
972
- "caption": "Example 5",
973
- "rendered_html": "<div class=\"playground-content bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"form-group\"><label>Inline:</label><div class=\"form-inline\"><div class=\"form-group\"><div class=\"select multiselect dropdown dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left input-lg\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"placeholder\">Please select vehicles</span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\">Option 4</span><input type=\"hidden\" value=\"4\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\"><span class=\"selected-option-dropdown-item\">Option 5</span><input type=\"hidden\" value=\"5\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\"><span class=\"selected-option-dropdown-item\">Option 6</span><input type=\"hidden\" value=\"6\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"7\" data-item-index=\"6\"><span class=\"selected-option-dropdown-item\">Option 7</span><input type=\"hidden\" value=\"7\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\"><span class=\"selected-option-dropdown-item\">Option 8</span><input type=\"hidden\" value=\"8\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\"><span class=\"selected-option-dropdown-item\">Option 9</span><input type=\"hidden\" value=\"9\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"10\" data-item-index=\"9\"><span class=\"selected-option-dropdown-item\">Option 10</span><input type=\"hidden\" value=\"10\"></a></li></ul></div></div><div class=\"form-group\"><div class=\"select multiselect dropdown dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"placeholder\">Please select vehicles</span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\">Option 4</span><input type=\"hidden\" value=\"4\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\"><span class=\"selected-option-dropdown-item\">Option 5</span><input type=\"hidden\" value=\"5\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\"><span class=\"selected-option-dropdown-item\">Option 6</span><input type=\"hidden\" value=\"6\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"7\" data-item-index=\"6\"><span class=\"selected-option-dropdown-item\">Option 7</span><input type=\"hidden\" value=\"7\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\"><span class=\"selected-option-dropdown-item\">Option 8</span><input type=\"hidden\" value=\"8\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\"><span class=\"selected-option-dropdown-item\">Option 9</span><input type=\"hidden\" value=\"9\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"10\" data-item-index=\"9\"><span class=\"selected-option-dropdown-item\">Option 10</span><input type=\"hidden\" value=\"10\"></a></li></ul></div></div><div class=\"form-group\"><div class=\"select multiselect dropdown min-width-100 dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left input-sm\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\">Option 4</span><input type=\"hidden\" value=\"4\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\"><span class=\"selected-option-dropdown-item\">Option 5</span><input type=\"hidden\" value=\"5\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\"><span class=\"selected-option-dropdown-item\">Option 6</span><input type=\"hidden\" value=\"6\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"7\" data-item-index=\"6\"><span class=\"selected-option-dropdown-item\">Option 7</span><input type=\"hidden\" value=\"7\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\"><span class=\"selected-option-dropdown-item\">Option 8</span><input type=\"hidden\" value=\"8\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\"><span class=\"selected-option-dropdown-item\">Option 9</span><input type=\"hidden\" value=\"9\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"10\" data-item-index=\"9\"><span class=\"selected-option-dropdown-item\">Option 10</span><input type=\"hidden\" value=\"10\"></a></li></ul></div></div></div><div class=\"form-group margin-top-20 max-width-500\"><label for=\"fullWidth\">Full width:</label><div class=\"select multiselect dropdown dropup\"><button type=\"button\" id=\"fullWidth\" class=\"dropdown-toggle form-control text-left input-sm\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\">Option 4</span><input type=\"hidden\" value=\"4\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\"><span class=\"selected-option-dropdown-item\">Option 5</span><input type=\"hidden\" value=\"5\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\"><span class=\"selected-option-dropdown-item\">Option 6</span><input type=\"hidden\" value=\"6\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"7\" data-item-index=\"6\"><span class=\"selected-option-dropdown-item\">Option 7</span><input type=\"hidden\" value=\"7\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\"><span class=\"selected-option-dropdown-item\">Option 8</span><input type=\"hidden\" value=\"8\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\"><span class=\"selected-option-dropdown-item\">Option 9</span><input type=\"hidden\" value=\"9\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"10\" data-item-index=\"9\"><span class=\"selected-option-dropdown-item\">Option 10</span><input type=\"hidden\" value=\"10\"></a></li></ul></div></div></div></div>",
974
- "tabs": [
975
- {
976
- "label": "React",
977
- "language": "tsx",
978
- "code": "import Multiselect from '@rio-cloud/rio-uikit/Multiselect';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\n\nconst options = [\n { id: '1', label: 'Option 1' },\n { id: '2', label: 'Option 2' },\n { id: '3', label: 'Option 3' },\n { id: '4', label: 'Option 4' },\n { id: '5', label: 'Option 5' },\n { id: '6', label: 'Option 6' },\n { id: '7', label: 'Option 7' },\n { id: '8', label: 'Option 8' },\n { id: '9', label: 'Option 9' },\n { id: '10', label: 'Option 10' },\n];\n\nexport default () => (\n <div className='form-group'>\n <label>Inline:</label>\n <div className='form-inline'>\n <div className='form-group'>\n <Multiselect\n placeholder='Please select vehicles'\n options={options}\n bsSize='lg'\n onChange={response => Notification.info(JSON.stringify(response))}\n useFilter\n />\n </div>\n <div className='form-group'>\n <Multiselect\n placeholder='Please select vehicles'\n options={options}\n onChange={response => Notification.info(JSON.stringify(response))}\n useFilter\n />\n </div>\n <div className='form-group'>\n <Multiselect\n options={options}\n bsSize='sm'\n onChange={response => Notification.info(JSON.stringify(response))}\n className='min-width-100'\n useFilter\n />\n </div>\n </div>\n <div className='form-group margin-top-20 max-width-500'>\n <label htmlFor='fullWidth'>Full width:</label>\n <Multiselect\n id='fullWidth'\n options={options}\n bsSize='sm'\n onChange={response => Notification.info(JSON.stringify(response))}\n />\n </div>\n </div>\n);"
979
- },
980
- {
981
- "label": "HTML",
982
- "language": "html",
983
- "code": "<div class=\"form-group\">\n <label>Inline:</label>\n <div class=\"form-inline\">\n <div class=\"form-group\">\n <div class=\"select multiselect dropdown dropup\">\n <button type=\"button\" class=\"dropdown-toggle form-control text-left input-lg\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"placeholder\">Please select vehicles</span>\n <span class=\"caret\">\n </span>\n </button>\n <ul class=\"dropdown-menu\" role=\"menu\">\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n <span class=\"selected-option-dropdown-item\">Option 1</span>\n <input type=\"hidden\" value=\"1\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n <span class=\"selected-option-dropdown-item\">Option 2</span>\n <input type=\"hidden\" value=\"2\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n <span class=\"selected-option-dropdown-item\">Option 3</span>\n <input type=\"hidden\" value=\"3\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n <span class=\"selected-option-dropdown-item\">Option 4</span>\n <input type=\"hidden\" value=\"4\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\">\n <span class=\"selected-option-dropdown-item\">Option 5</span>\n <input type=\"hidden\" value=\"5\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\">\n <span class=\"selected-option-dropdown-item\">Option 6</span>\n <input type=\"hidden\" value=\"6\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"7\" data-item-index=\"6\">\n <span class=\"selected-option-dropdown-item\">Option 7</span>\n <input type=\"hidden\" value=\"7\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\">\n <span class=\"selected-option-dropdown-item\">Option 8</span>\n <input type=\"hidden\" value=\"8\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\">\n <span class=\"selected-option-dropdown-item\">Option 9</span>\n <input type=\"hidden\" value=\"9\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"10\" data-item-index=\"9\">\n <span class=\"selected-option-dropdown-item\">Option 10</span>\n <input type=\"hidden\" value=\"10\">\n </a>\n </li>\n </ul>\n </div>\n </div>\n <div class=\"form-group\">\n <div class=\"select multiselect dropdown dropup\">\n <button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"placeholder\">Please select vehicles</span>\n <span class=\"caret\">\n </span>\n </button>\n <ul class=\"dropdown-menu\" role=\"menu\">\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n <span class=\"selected-option-dropdown-item\">Option 1</span>\n <input type=\"hidden\" value=\"1\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n <span class=\"selected-option-dropdown-item\">Option 2</span>\n <input type=\"hidden\" value=\"2\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n <span class=\"selected-option-dropdown-item\">Option 3</span>\n <input type=\"hidden\" value=\"3\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n <span class=\"selected-option-dropdown-item\">Option 4</span>\n <input type=\"hidden\" value=\"4\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\">\n <span class=\"selected-option-dropdown-item\">Option 5</span>\n <input type=\"hidden\" value=\"5\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\">\n <span class=\"selected-option-dropdown-item\">Option 6</span>\n <input type=\"hidden\" value=\"6\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"7\" data-item-index=\"6\">\n <span class=\"selected-option-dropdown-item\">Option 7</span>\n <input type=\"hidden\" value=\"7\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\">\n <span class=\"selected-option-dropdown-item\">Option 8</span>\n <input type=\"hidden\" value=\"8\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\">\n <span class=\"selected-option-dropdown-item\">Option 9</span>\n <input type=\"hidden\" value=\"9\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"10\" data-item-index=\"9\">\n <span class=\"selected-option-dropdown-item\">Option 10</span>\n <input type=\"hidden\" value=\"10\">\n </a>\n </li>\n </ul>\n </div>\n </div>\n <div class=\"form-group\">\n <div class=\"select multiselect dropdown min-width-100 dropup\">\n <button type=\"button\" class=\"dropdown-toggle form-control text-left input-sm\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span>\n </span>\n <span class=\"caret\">\n </span>\n </button>\n <ul class=\"dropdown-menu\" role=\"menu\">\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n <span class=\"selected-option-dropdown-item\">Option 1</span>\n <input type=\"hidden\" value=\"1\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n <span class=\"selected-option-dropdown-item\">Option 2</span>\n <input type=\"hidden\" value=\"2\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n <span class=\"selected-option-dropdown-item\">Option 3</span>\n <input type=\"hidden\" value=\"3\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n <span class=\"selected-option-dropdown-item\">Option 4</span>\n <input type=\"hidden\" value=\"4\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\">\n <span class=\"selected-option-dropdown-item\">Option 5</span>\n <input type=\"hidden\" value=\"5\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\">\n <span class=\"selected-option-dropdown-item\">Option 6</span>\n <input type=\"hidden\" value=\"6\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"7\" data-item-index=\"6\">\n <span class=\"selected-option-dropdown-item\">Option 7</span>\n <input type=\"hidden\" value=\"7\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\">\n <span class=\"selected-option-dropdown-item\">Option 8</span>\n <input type=\"hidden\" value=\"8\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\">\n <span class=\"selected-option-dropdown-item\">Option 9</span>\n <input type=\"hidden\" value=\"9\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"10\" data-item-index=\"9\">\n <span class=\"selected-option-dropdown-item\">Option 10</span>\n <input type=\"hidden\" value=\"10\">\n </a>\n </li>\n </ul>\n </div>\n </div>\n </div>\n <div class=\"form-group margin-top-20 max-width-500\">\n <label for=\"fullWidth\">Full width:</label>\n <div class=\"select multiselect dropdown dropup\">\n <button type=\"button\" id=\"fullWidth\" class=\"dropdown-toggle form-control text-left input-sm\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span>\n </span>\n <span class=\"caret\">\n </span>\n </button>\n <ul class=\"dropdown-menu\" role=\"menu\">\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n <span class=\"selected-option-dropdown-item\">Option 1</span>\n <input type=\"hidden\" value=\"1\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n <span class=\"selected-option-dropdown-item\">Option 2</span>\n <input type=\"hidden\" value=\"2\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n <span class=\"selected-option-dropdown-item\">Option 3</span>\n <input type=\"hidden\" value=\"3\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n <span class=\"selected-option-dropdown-item\">Option 4</span>\n <input type=\"hidden\" value=\"4\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\">\n <span class=\"selected-option-dropdown-item\">Option 5</span>\n <input type=\"hidden\" value=\"5\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\">\n <span class=\"selected-option-dropdown-item\">Option 6</span>\n <input type=\"hidden\" value=\"6\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"7\" data-item-index=\"6\">\n <span class=\"selected-option-dropdown-item\">Option 7</span>\n <input type=\"hidden\" value=\"7\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\">\n <span class=\"selected-option-dropdown-item\">Option 8</span>\n <input type=\"hidden\" value=\"8\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\">\n <span class=\"selected-option-dropdown-item\">Option 9</span>\n <input type=\"hidden\" value=\"9\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"10\" data-item-index=\"9\">\n <span class=\"selected-option-dropdown-item\">Option 10</span>\n <input type=\"hidden\" value=\"10\">\n </a>\n </li>\n </ul>\n </div>\n </div>\n</div>"
984
- },
985
- {
986
- "label": "Props",
987
- "language": "json",
988
- "code": null,
989
- "props": [
990
- {
991
- "heading": null,
992
- "rows": [
993
- {
994
- "name": "name",
995
- "type": "String",
996
- "default": "",
997
- "description": "Passed through as HTML attribute to the toggle button."
998
- },
999
- {
1000
- "name": "id",
1001
- "type": "String",
1002
- "default": "",
1003
- "description": "Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly."
1004
- },
1005
- {
1006
- "name": "options",
1007
- "type": "Array of Objects",
1008
- "default": "[]",
1009
- "description": "Items to display in the dropdown menu."
1010
- },
1011
- {
1012
- "name": "└id",
1013
- "type": "String",
1014
- "default": "",
1015
- "description": "Used to identify an option"
1016
- },
1017
- {
1018
- "name": "└label",
1019
- "type": "String / Node",
1020
- "default": "",
1021
- "description": "The option item text"
1022
- },
1023
- {
1024
- "name": "└icon",
1025
- "type": "Node",
1026
- "default": "",
1027
- "description": "Icon to be displayed in front of the label"
1028
- },
1029
- {
1030
- "name": "└selected",
1031
- "type": "Boolean",
1032
- "default": "false",
1033
- "description": "Defines whether the menu item is selected."
1034
- },
1035
- {
1036
- "name": "└disabled",
1037
- "type": "Boolean",
1038
- "default": "false",
1039
- "description": "Setting \"disabled\" to true will disable the respective item."
1040
- },
1041
- {
1042
- "name": "└header",
1043
- "type": "Boolean",
1044
- "default": "false",
1045
- "description": "Will treat the given value as a menu header."
1046
- },
1047
- {
1048
- "name": "value",
1049
- "type": "Array",
1050
- "default": "",
1051
- "description": "Sets the ids of the selected options when the component is already mounted."
1052
- },
1053
- {
1054
- "name": "onChange",
1055
- "type": "Function",
1056
- "default": "() => {}",
1057
- "description": "Callback function triggered when an item is selected."
1058
- },
1059
- {
1060
- "name": "placeholder",
1061
- "type": "String / Node",
1062
- "default": "",
1063
- "description": "Text to display when nothing is selected."
1064
- },
1065
- {
1066
- "name": "dropup",
1067
- "type": "Boolean",
1068
- "default": "false",
1069
- "description": "Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature."
1070
- },
1071
- {
1072
- "name": "pullRight",
1073
- "type": "Boolean",
1074
- "default": "false",
1075
- "description": "Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature."
1076
- },
1077
- {
1078
- "name": "autoDropDirection",
1079
- "type": "Boolean",
1080
- "default": "true",
1081
- "description": "Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space."
1082
- },
1083
- {
1084
- "name": "bsSize",
1085
- "type": "String",
1086
- "default": "md",
1087
- "description": "Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg'"
1088
- },
1089
- {
1090
- "name": "disabled",
1091
- "type": "Boolean",
1092
- "default": "false",
1093
- "description": "Option to disable the opening of the option list."
1094
- },
1095
- {
1096
- "name": "tabIndex",
1097
- "type": "Number",
1098
- "default": "0",
1099
- "description": "The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex"
1100
- },
1101
- {
1102
- "name": "hasError",
1103
- "type": "Boolean",
1104
- "default": "false",
1105
- "description": "Defines whether the Bootstrap error classes shall be added to the toggle element."
1106
- },
1107
- {
1108
- "name": "useFilter",
1109
- "type": "Boolean",
1110
- "default": "false",
1111
- "description": "Defines whether the component should be filterable."
1112
- },
1113
- {
1114
- "name": "noItemMessage",
1115
- "type": "String / Node",
1116
- "default": "",
1117
- "description": "Text that shall be shown when not match was found when filtering."
1118
- },
1119
- {
1120
- "name": "counterMessage",
1121
- "type": "Object",
1122
- "default": "",
1123
- "description": "Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' }"
1124
- },
1125
- {
1126
- "name": "└one",
1127
- "type": "String / Node",
1128
- "default": "",
1129
- "description": "Text that will be used when a single item is selected."
1130
- },
1131
- {
1132
- "name": "└many",
1133
- "type": "String / Node",
1134
- "default": "",
1135
- "description": "Text that will be used when multiple item are selected."
1136
- },
1137
- {
1138
- "name": "renderCounterMessage",
1139
- "type": "Function",
1140
- "default": "",
1141
- "description": "Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality."
1142
- },
1143
- {
1144
- "name": "multiline",
1145
- "type": "boolean",
1146
- "default": "false",
1147
- "description": "Defines whether the selected items wrap around within the dropdown toggle."
1148
- },
1149
- {
1150
- "name": "showSelectedItemIcon",
1151
- "type": "Boolean",
1152
- "default": "false",
1153
- "description": "Set to show only the icon and not the label of selected item."
1154
- },
1155
- {
1156
- "name": "showUnselectedItemIcons",
1157
- "type": "Boolean",
1158
- "default": "false",
1159
- "description": "Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive."
1160
- },
1161
- {
1162
- "name": "inputAddon",
1163
- "type": "String | ReactNode",
1164
- "default": "",
1165
- "description": "Option to add an icon as a leading input addon to the select component."
1166
- },
1167
- {
1168
- "name": "errorMessage",
1169
- "type": "String",
1170
- "default": "",
1171
- "description": "Input error message."
1172
- },
1173
- {
1174
- "name": "warningMessage",
1175
- "type": "String",
1176
- "default": "",
1177
- "description": "Input warning message."
1178
- },
1179
- {
1180
- "name": "messageWhiteSpace",
1181
- "type": "'normal' | 'prewrap' | 'nowrap'",
1182
- "default": "'normal'",
1183
- "description": "Optional warning message white-space setting."
1184
- },
1185
- {
1186
- "name": "dropdownClassName",
1187
- "type": "String",
1188
- "default": "",
1189
- "description": "Additional classes to be set to the dropdown."
1190
- },
1191
- {
1192
- "name": "btnClassName",
1193
- "type": "String",
1194
- "default": "",
1195
- "description": "Additional classes to be set to the select/input."
1196
- },
1197
- {
1198
- "name": "className",
1199
- "type": "String",
1200
- "default": "",
1201
- "description": "Additional classes to be set to the select wrapper."
1202
- }
1203
- ]
1204
- }
1205
- ]
1206
- }
1207
- ]
1208
- },
1209
- {
1210
- "caption": "Example 6",
1211
- "rendered_html": "<div class=\"playground-content bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"form-group\"><div class=\"form-inline\"><div class=\"form-group margin-bottom-5\"><div class=\"select multiselect dropdown dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"placeholder\">Please select</span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-available text-color-status-available\"></span>Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-driving text-color-status-driving\"></span>Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-resting text-color-status-resting\"></span>Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-working text-color-status-working\"></span>Option 4</span><input type=\"hidden\" value=\"4\"></a></li></ul></div></div><div class=\"form-group margin-bottom-5\"><div class=\"select multiselect dropdown dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"placeholder\">Please select</span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-available text-color-status-available\"></span>Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-driving text-color-status-driving\"></span>Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-resting text-color-status-resting\"></span>Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-working text-color-status-working\"></span>Option 4</span><input type=\"hidden\" value=\"4\"></a></li></ul></div></div><div class=\"form-group margin-bottom-5\"><div class=\"select multiselect dropdown dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"\"><span class=\"margin-right-5 inactiveIcon\"><span class=\"rioglyph rioglyph-status-available text-color-status-available\"></span></span><span class=\"margin-right-5 inactiveIcon\"><span class=\"rioglyph rioglyph-status-driving text-color-status-driving\"></span></span><span class=\"margin-right-5 inactiveIcon\"><span class=\"rioglyph rioglyph-status-resting text-color-status-resting\"></span></span><span class=\"margin-right-5 inactiveIcon\"><span class=\"rioglyph rioglyph-status-working text-color-status-working\"></span></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-available text-color-status-available\"></span>Option 1</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-driving text-color-status-driving\"></span>Option 2</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-resting text-color-status-resting\"></span>Option 3</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\"><span class=\"rioglyph rioglyph-status-working text-color-status-working\"></span>Option 4</span><input type=\"hidden\" value=\"4\"></a></li></ul></div></div></div></div></div>",
1212
- "tabs": [
1213
- {
1214
- "label": "React",
1215
- "language": "tsx",
1216
- "code": "import Multiselect from '@rio-cloud/rio-uikit/Multiselect';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\n\nconst options = [\n {\n id: '1',\n label: 'Option 1',\n icon: <span className='rioglyph rioglyph-status-available text-color-status-available' />,\n },\n {\n id: '2',\n label: 'Option 2',\n icon: <span className='rioglyph rioglyph-status-driving text-color-status-driving' />,\n },\n {\n id: '3',\n label: 'Option 3',\n icon: <span className='rioglyph rioglyph-status-resting text-color-status-resting' />,\n },\n {\n id: '4',\n label: 'Option 4',\n icon: <span className='rioglyph rioglyph-status-working text-color-status-working' />,\n },\n];\n\nexport default () => (\n <div className='form-group'>\n <div className='form-inline'>\n <div className='form-group margin-bottom-5'>\n <Multiselect\n placeholder='Please select'\n options={options}\n onChange={response => Notification.info(JSON.stringify(response))}\n />\n </div>\n <div className='form-group margin-bottom-5'>\n <Multiselect\n placeholder='Please select'\n options={options}\n showSelectedItemIcon\n onChange={response => Notification.info(JSON.stringify(response))}\n />\n </div>\n <div className='form-group margin-bottom-5'>\n <Multiselect\n placeholder='Please select'\n options={options}\n showSelectedItemIcon\n showUnselectedItemIcons\n onChange={response => Notification.info(JSON.stringify(response))}\n />\n </div>\n </div>\n </div>\n);"
1217
- },
1218
- {
1219
- "label": "HTML",
1220
- "language": "html",
1221
- "code": "<div class=\"form-group\">\n <div class=\"form-inline\">\n <div class=\"form-group margin-bottom-5\">\n <div class=\"select multiselect dropdown dropup\">\n <button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"placeholder\">Please select</span>\n <span class=\"caret\">\n </span>\n </button>\n <ul class=\"dropdown-menu\" role=\"menu\">\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n <span class=\"selected-option-dropdown-item\">\n <span class=\"rioglyph rioglyph-status-available text-color-status-available\">\n </span>Option 1</span>\n <input type=\"hidden\" value=\"1\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n <span class=\"selected-option-dropdown-item\">\n <span class=\"rioglyph rioglyph-status-driving text-color-status-driving\">\n </span>Option 2</span>\n <input type=\"hidden\" value=\"2\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n <span class=\"selected-option-dropdown-item\">\n <span class=\"rioglyph rioglyph-status-resting text-color-status-resting\">\n </span>Option 3</span>\n <input type=\"hidden\" value=\"3\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n <span class=\"selected-option-dropdown-item\">\n <span class=\"rioglyph rioglyph-status-working text-color-status-working\">\n </span>Option 4</span>\n <input type=\"hidden\" value=\"4\">\n </a>\n </li>\n </ul>\n </div>\n </div>\n <div class=\"form-group margin-bottom-5\">\n <div class=\"select multiselect dropdown dropup\">\n <button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"placeholder\">Please select</span>\n <span class=\"caret\">\n </span>\n </button>\n <ul class=\"dropdown-menu\" role=\"menu\">\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n <span class=\"selected-option-dropdown-item\">\n <span class=\"rioglyph rioglyph-status-available text-color-status-available\">\n </span>Option 1</span>\n <input type=\"hidden\" value=\"1\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n <span class=\"selected-option-dropdown-item\">\n <span class=\"rioglyph rioglyph-status-driving text-color-status-driving\">\n </span>Option 2</span>\n <input type=\"hidden\" value=\"2\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n <span class=\"selected-option-dropdown-item\">\n <span class=\"rioglyph rioglyph-status-resting text-color-status-resting\">\n </span>Option 3</span>\n <input type=\"hidden\" value=\"3\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n <span class=\"selected-option-dropdown-item\">\n <span class=\"rioglyph rioglyph-status-working text-color-status-working\">\n </span>Option 4</span>\n <input type=\"hidden\" value=\"4\">\n </a>\n </li>\n </ul>\n </div>\n </div>\n <div class=\"form-group margin-bottom-5\">\n <div class=\"select multiselect dropdown dropup\">\n <button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n <span class=\"\">\n <span class=\"margin-right-5 inactiveIcon\">\n <span class=\"rioglyph rioglyph-status-available text-color-status-available\">\n </span>\n </span>\n <span class=\"margin-right-5 inactiveIcon\">\n <span class=\"rioglyph rioglyph-status-driving text-color-status-driving\">\n </span>\n </span>\n <span class=\"margin-right-5 inactiveIcon\">\n <span class=\"rioglyph rioglyph-status-resting text-color-status-resting\">\n </span>\n </span>\n <span class=\"margin-right-5 inactiveIcon\">\n <span class=\"rioglyph rioglyph-status-working text-color-status-working\">\n </span>\n </span>\n </span>\n <span class=\"caret\">\n </span>\n </button>\n <ul class=\"dropdown-menu\" role=\"menu\">\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n <span class=\"selected-option-dropdown-item\">\n <span class=\"rioglyph rioglyph-status-available text-color-status-available\">\n </span>Option 1</span>\n <input type=\"hidden\" value=\"1\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n <span class=\"selected-option-dropdown-item\">\n <span class=\"rioglyph rioglyph-status-driving text-color-status-driving\">\n </span>Option 2</span>\n <input type=\"hidden\" value=\"2\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n <span class=\"selected-option-dropdown-item\">\n <span class=\"rioglyph rioglyph-status-resting text-color-status-resting\">\n </span>Option 3</span>\n <input type=\"hidden\" value=\"3\">\n </a>\n </li>\n <li class=\"\" role=\"listitem\">\n <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n <span class=\"selected-option-dropdown-item\">\n <span class=\"rioglyph rioglyph-status-working text-color-status-working\">\n </span>Option 4</span>\n <input type=\"hidden\" value=\"4\">\n </a>\n </li>\n </ul>\n </div>\n </div>\n </div>\n</div>"
1222
- },
1223
- {
1224
- "label": "Props",
1225
- "language": "json",
1226
- "code": null,
1227
- "props": [
1228
- {
1229
- "heading": null,
1230
- "rows": [
1231
- {
1232
- "name": "name",
1233
- "type": "String",
1234
- "default": "",
1235
- "description": "Passed through as HTML attribute to the toggle button."
1236
- },
1237
- {
1238
- "name": "id",
1239
- "type": "String",
1240
- "default": "",
1241
- "description": "Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly."
1242
- },
1243
- {
1244
- "name": "options",
1245
- "type": "Array of Objects",
1246
- "default": "[]",
1247
- "description": "Items to display in the dropdown menu."
1248
- },
1249
- {
1250
- "name": "└id",
1251
- "type": "String",
1252
- "default": "",
1253
- "description": "Used to identify an option"
1254
- },
1255
- {
1256
- "name": "└label",
1257
- "type": "String / Node",
1258
- "default": "",
1259
- "description": "The option item text"
1260
- },
1261
- {
1262
- "name": "└icon",
1263
- "type": "Node",
1264
- "default": "",
1265
- "description": "Icon to be displayed in front of the label"
1266
- },
1267
- {
1268
- "name": "└selected",
1269
- "type": "Boolean",
1270
- "default": "false",
1271
- "description": "Defines whether the menu item is selected."
1272
- },
1273
- {
1274
- "name": "└disabled",
1275
- "type": "Boolean",
1276
- "default": "false",
1277
- "description": "Setting \"disabled\" to true will disable the respective item."
1278
- },
1279
- {
1280
- "name": "└header",
1281
- "type": "Boolean",
1282
- "default": "false",
1283
- "description": "Will treat the given value as a menu header."
1284
- },
1285
- {
1286
- "name": "value",
1287
- "type": "Array",
1288
- "default": "",
1289
- "description": "Sets the ids of the selected options when the component is already mounted."
1290
- },
1291
- {
1292
- "name": "onChange",
1293
- "type": "Function",
1294
- "default": "() => {}",
1295
- "description": "Callback function triggered when an item is selected."
1296
- },
1297
- {
1298
- "name": "placeholder",
1299
- "type": "String / Node",
1300
- "default": "",
1301
- "description": "Text to display when nothing is selected."
1302
- },
1303
- {
1304
- "name": "dropup",
1305
- "type": "Boolean",
1306
- "default": "false",
1307
- "description": "Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature."
1308
- },
1309
- {
1310
- "name": "pullRight",
1311
- "type": "Boolean",
1312
- "default": "false",
1313
- "description": "Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature."
1314
- },
1315
- {
1316
- "name": "autoDropDirection",
1317
- "type": "Boolean",
1318
- "default": "true",
1319
- "description": "Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space."
1320
- },
1321
- {
1322
- "name": "bsSize",
1323
- "type": "String",
1324
- "default": "md",
1325
- "description": "Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg'"
1326
- },
1327
- {
1328
- "name": "disabled",
1329
- "type": "Boolean",
1330
- "default": "false",
1331
- "description": "Option to disable the opening of the option list."
1332
- },
1333
- {
1334
- "name": "tabIndex",
1335
- "type": "Number",
1336
- "default": "0",
1337
- "description": "The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex"
1338
- },
1339
- {
1340
- "name": "hasError",
1341
- "type": "Boolean",
1342
- "default": "false",
1343
- "description": "Defines whether the Bootstrap error classes shall be added to the toggle element."
1344
- },
1345
- {
1346
- "name": "useFilter",
1347
- "type": "Boolean",
1348
- "default": "false",
1349
- "description": "Defines whether the component should be filterable."
1350
- },
1351
- {
1352
- "name": "noItemMessage",
1353
- "type": "String / Node",
1354
- "default": "",
1355
- "description": "Text that shall be shown when not match was found when filtering."
1356
- },
1357
- {
1358
- "name": "counterMessage",
1359
- "type": "Object",
1360
- "default": "",
1361
- "description": "Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' }"
1362
- },
1363
- {
1364
- "name": "└one",
1365
- "type": "String / Node",
1366
- "default": "",
1367
- "description": "Text that will be used when a single item is selected."
1368
- },
1369
- {
1370
- "name": "└many",
1371
- "type": "String / Node",
1372
- "default": "",
1373
- "description": "Text that will be used when multiple item are selected."
1374
- },
1375
- {
1376
- "name": "renderCounterMessage",
1377
- "type": "Function",
1378
- "default": "",
1379
- "description": "Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality."
1380
- },
1381
- {
1382
- "name": "multiline",
1383
- "type": "boolean",
1384
- "default": "false",
1385
- "description": "Defines whether the selected items wrap around within the dropdown toggle."
1386
- },
1387
- {
1388
- "name": "showSelectedItemIcon",
1389
- "type": "Boolean",
1390
- "default": "false",
1391
- "description": "Set to show only the icon and not the label of selected item."
1392
- },
1393
- {
1394
- "name": "showUnselectedItemIcons",
1395
- "type": "Boolean",
1396
- "default": "false",
1397
- "description": "Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive."
1398
- },
1399
- {
1400
- "name": "inputAddon",
1401
- "type": "String | ReactNode",
1402
- "default": "",
1403
- "description": "Option to add an icon as a leading input addon to the select component."
1404
- },
1405
- {
1406
- "name": "errorMessage",
1407
- "type": "String",
1408
- "default": "",
1409
- "description": "Input error message."
1410
- },
1411
- {
1412
- "name": "warningMessage",
1413
- "type": "String",
1414
- "default": "",
1415
- "description": "Input warning message."
1416
- },
1417
- {
1418
- "name": "messageWhiteSpace",
1419
- "type": "'normal' | 'prewrap' | 'nowrap'",
1420
- "default": "'normal'",
1421
- "description": "Optional warning message white-space setting."
1422
- },
1423
- {
1424
- "name": "dropdownClassName",
1425
- "type": "String",
1426
- "default": "",
1427
- "description": "Additional classes to be set to the dropdown."
1428
- },
1429
- {
1430
- "name": "btnClassName",
1431
- "type": "String",
1432
- "default": "",
1433
- "description": "Additional classes to be set to the select/input."
1434
- },
1435
- {
1436
- "name": "className",
1437
- "type": "String",
1438
- "default": "",
1439
- "description": "Additional classes to be set to the select wrapper."
1440
- }
1441
- ]
1442
- }
1443
- ]
1444
- }
1445
- ]
1446
- }
1447
- ]
1448
- }
1449
- ],
1450
- "see_also": []
1451
- }