@rio-cloud/uikit-mcp 1.1.11 → 1.1.12
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.
- package/dist/doc-metadata.json +26 -26
- package/dist/docs/components/accentBar.md +1 -1
- package/dist/docs/components/activity.md +1 -1
- package/dist/docs/components/analyticsAnalysisOverlay.md +1 -1
- package/dist/docs/components/animatedNumber.md +2 -2
- package/dist/docs/components/animatedTextReveal.md +6 -6
- package/dist/docs/components/animations.md +21 -21
- package/dist/docs/components/appHeader.md +1 -1
- package/dist/docs/components/appLayout.md +39 -23
- package/dist/docs/components/appNavigationBar.md +1 -1
- package/dist/docs/components/areaCharts.md +4 -4
- package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
- package/dist/docs/components/assetTree.md +384 -420
- package/dist/docs/components/autosuggests.md +1 -1
- package/dist/docs/components/avatar.md +1 -1
- package/dist/docs/components/banner.md +2 -2
- package/dist/docs/components/barCharts.md +13 -13
- package/dist/docs/components/barList.md +10 -10
- package/dist/docs/components/basicMap.md +1 -1
- package/dist/docs/components/bottomSheet.md +1 -1
- package/dist/docs/components/button.md +1 -1
- package/dist/docs/components/buttonToolbar.md +1 -1
- package/dist/docs/components/calendarStripe.md +45 -49
- package/dist/docs/components/card.md +1 -1
- package/dist/docs/components/carousel.md +1 -1
- package/dist/docs/components/chartColors.md +1 -1
- package/dist/docs/components/chartsGettingStarted.md +1 -1
- package/dist/docs/components/chat.md +2 -2
- package/dist/docs/components/checkbox.md +1 -1
- package/dist/docs/components/circularProgress.md +8 -8
- package/dist/docs/components/clearableInput.md +1 -1
- package/dist/docs/components/collapse.md +2 -2
- package/dist/docs/components/composedCharts.md +15 -15
- package/dist/docs/components/contentLoader.md +1 -1
- package/dist/docs/components/dataTabs.md +1 -1
- package/dist/docs/components/datepickers.md +660 -660
- package/dist/docs/components/dayPicker.md +5 -5
- package/dist/docs/components/dayPickerCalendar.md +469 -469
- package/dist/docs/components/dialogs.md +1 -1
- package/dist/docs/components/divider.md +1 -1
- package/dist/docs/components/dropdowns.md +3270 -3256
- package/dist/docs/components/editableContent.md +1 -1
- package/dist/docs/components/expander.md +1 -1
- package/dist/docs/components/fade.md +1 -1
- package/dist/docs/components/fadeExpander.md +1 -1
- package/dist/docs/components/fadeUp.md +2 -2
- package/dist/docs/components/feedback.md +1 -1
- package/dist/docs/components/filePickers.md +1 -1
- package/dist/docs/components/formLabel.md +1 -1
- package/dist/docs/components/groupedItemList.md +1 -1
- package/dist/docs/components/htmlTable.md +111 -113
- package/dist/docs/components/iconList.md +3 -3
- package/dist/docs/components/imagePreloader.md +1 -1
- package/dist/docs/components/labeledElement.md +1 -1
- package/dist/docs/components/licensePlate.md +1 -1
- package/dist/docs/components/lineCharts.md +3 -3
- package/dist/docs/components/listMenu.md +1 -1
- package/dist/docs/components/loadMore.md +1 -1
- package/dist/docs/components/mainNavigation.md +1 -1
- package/dist/docs/components/mapCircle.md +1 -1
- package/dist/docs/components/mapCluster.md +1 -1
- package/dist/docs/components/mapContext.md +1 -1
- package/dist/docs/components/mapDraggableMarker.md +1 -1
- package/dist/docs/components/mapGettingStarted.md +1 -1
- package/dist/docs/components/mapInfoBubble.md +1 -1
- package/dist/docs/components/mapLayerGroup.md +1 -1
- package/dist/docs/components/mapMarker.md +1 -1
- package/dist/docs/components/mapPolygon.md +1 -1
- package/dist/docs/components/mapRoute.md +1 -1
- package/dist/docs/components/mapSettings.md +31 -9
- package/dist/docs/components/mapUtils.md +65 -2
- package/dist/docs/components/mapViewportHistory.md +1 -1
- package/dist/docs/components/multiselects.md +165 -1
- package/dist/docs/components/noData.md +1 -1
- package/dist/docs/components/notifications.md +1 -1
- package/dist/docs/components/numbercontrol.md +1 -1
- package/dist/docs/components/onboarding.md +1 -1
- package/dist/docs/components/page.md +1 -1
- package/dist/docs/components/pager.md +1 -1
- package/dist/docs/components/pieCharts.md +36 -36
- package/dist/docs/components/popover.md +1 -1
- package/dist/docs/components/position.md +1 -1
- package/dist/docs/components/radialBarCharts.md +25 -25
- package/dist/docs/components/radioCardGroup.md +1 -1
- package/dist/docs/components/radiobutton.md +1 -1
- package/dist/docs/components/releaseNotes.md +1 -1
- package/dist/docs/components/resizer.md +1 -1
- package/dist/docs/components/responsiveColumnStripe.md +1 -1
- package/dist/docs/components/responsiveVideo.md +1 -1
- package/dist/docs/components/rioglyph.md +1 -1
- package/dist/docs/components/rules.md +1 -1
- package/dist/docs/components/saveableInput.md +247 -247
- package/dist/docs/components/selects.md +1 -1
- package/dist/docs/components/sidebar.md +1 -1
- package/dist/docs/components/sliders.md +1 -1
- package/dist/docs/components/smoothScrollbars.md +1 -1
- package/dist/docs/components/spinners.md +1 -1
- package/dist/docs/components/states.md +1 -1
- package/dist/docs/components/statsWidgets.md +1 -1
- package/dist/docs/components/statusBar.md +1 -1
- package/dist/docs/components/stepButton.md +1 -1
- package/dist/docs/components/steppedProgressBars.md +1 -1
- package/dist/docs/components/subNavigation.md +1 -1
- package/dist/docs/components/supportMarker.md +1 -1
- package/dist/docs/components/svgImage.md +1 -1
- package/dist/docs/components/switch.md +1 -1
- package/dist/docs/components/table.md +14 -14
- package/dist/docs/components/tableControls.md +51 -51
- package/dist/docs/components/tagManager.md +1 -1
- package/dist/docs/components/tags.md +1 -1
- package/dist/docs/components/teaser.md +1 -1
- package/dist/docs/components/textTruncateMiddle.md +1 -1
- package/dist/docs/components/timeline.md +1 -1
- package/dist/docs/components/timepicker.md +1 -1
- package/dist/docs/components/toggleButton.md +1 -1
- package/dist/docs/components/tooltip.md +1 -1
- package/dist/docs/components/tracker.md +1 -1
- package/dist/docs/components/virtualList.md +55 -53
- package/dist/docs/foundations.md +105 -105
- package/dist/docs/start/changelog.md +25 -213
- package/dist/docs/start/goodtoknow.md +1 -1
- package/dist/docs/start/guidelines/color-combinations.md +1 -1
- package/dist/docs/start/guidelines/custom-css.md +1 -1
- package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
- package/dist/docs/start/guidelines/formatting.md +1 -1
- package/dist/docs/start/guidelines/iframe.md +1 -1
- package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
- package/dist/docs/start/guidelines/print-css.md +1 -1
- package/dist/docs/start/guidelines/spinner.md +1 -1
- package/dist/docs/start/guidelines/state-in-url.md +1 -1
- package/dist/docs/start/guidelines/supported-browsers.md +1 -1
- package/dist/docs/start/guidelines/writing.md +1 -1
- package/dist/docs/start/howto.md +16 -16
- package/dist/docs/start/intro.md +2 -2
- package/dist/docs/start/responsiveness.md +1 -1
- package/dist/docs/templates/ai-assistant.md +1 -1
- package/dist/docs/templates/common-table.md +55 -55
- package/dist/docs/templates/detail-views.md +2 -2
- package/dist/docs/templates/expandable-details.md +1 -1
- package/dist/docs/templates/feature-cards.md +37 -37
- package/dist/docs/templates/form-summary.md +15 -15
- package/dist/docs/templates/form-toggle.md +1 -1
- package/dist/docs/templates/list-blocks.md +137 -137
- package/dist/docs/templates/loading-progress.md +1 -1
- package/dist/docs/templates/options-panel.md +1 -1
- package/dist/docs/templates/panel-variants.md +1 -1
- package/dist/docs/templates/progress-cards.md +1 -1
- package/dist/docs/templates/progress-success.md +1 -1
- package/dist/docs/templates/settings-form.md +18 -18
- package/dist/docs/templates/stats-blocks.md +12 -12
- package/dist/docs/templates/table-panel.md +1 -1
- package/dist/docs/templates/usage-cards.md +1 -1
- package/dist/docs/utilities/classNames.md +1 -1
- package/dist/docs/utilities/deviceUtils.md +1 -1
- package/dist/docs/utilities/featureToggles.md +1 -1
- package/dist/docs/utilities/fuelTypeUtils.md +1 -1
- package/dist/docs/utilities/getTrackingAttributes.md +1 -1
- package/dist/docs/utilities/routeUtils.md +1 -1
- package/dist/docs/utilities/useAfterMount.md +1 -1
- package/dist/docs/utilities/useAutoAnimate.md +1 -1
- package/dist/docs/utilities/useAverage.md +1 -1
- package/dist/docs/utilities/useClickOutside.md +1 -1
- package/dist/docs/utilities/useClipboard.md +2 -2
- package/dist/docs/utilities/useCookies.md +1 -1
- package/dist/docs/utilities/useCount.md +1 -1
- package/dist/docs/utilities/useDarkMode.md +1 -1
- package/dist/docs/utilities/useDebugInfo.md +3 -3
- package/dist/docs/utilities/useDraggableElement.md +1 -1
- package/dist/docs/utilities/useEffectOnce.md +1 -1
- package/dist/docs/utilities/useElapsedTime.md +1 -1
- package/dist/docs/utilities/useElementSize.md +1 -1
- package/dist/docs/utilities/useEsc.md +1 -1
- package/dist/docs/utilities/useEvent.md +1 -1
- package/dist/docs/utilities/useFocusTrap.md +1 -1
- package/dist/docs/utilities/useFullscreen.md +1 -1
- package/dist/docs/utilities/useHover.md +1 -1
- package/dist/docs/utilities/useIncomingPostMessages.md +1 -1
- package/dist/docs/utilities/useInterval.md +1 -1
- package/dist/docs/utilities/useIsFocusWithin.md +1 -1
- package/dist/docs/utilities/useKey.md +1 -1
- package/dist/docs/utilities/useLocalStorage.md +1 -1
- package/dist/docs/utilities/useLocationSuggestions.md +1 -1
- package/dist/docs/utilities/useMax.md +1 -1
- package/dist/docs/utilities/useMin.md +1 -1
- package/dist/docs/utilities/useMutationObserver.md +1 -1
- package/dist/docs/utilities/useOnScreen.md +1 -1
- package/dist/docs/utilities/useOnlineStatus.md +1 -1
- package/dist/docs/utilities/usePostMessage.md +1 -1
- package/dist/docs/utilities/usePostMessageSender.md +1 -1
- package/dist/docs/utilities/usePrevious.md +1 -1
- package/dist/docs/utilities/useResizeObserver.md +1 -1
- package/dist/docs/utilities/useRioCookieConsent.md +1 -1
- package/dist/docs/utilities/useScrollPosition.md +1 -1
- package/dist/docs/utilities/useSearch.md +1 -1
- package/dist/docs/utilities/useSearchHighlight.md +1 -1
- package/dist/docs/utilities/useSorting.md +1 -1
- package/dist/docs/utilities/useStateWithValidation.md +1 -1
- package/dist/docs/utilities/useSum.md +1 -1
- package/dist/docs/utilities/useTableExport.md +61 -61
- package/dist/docs/utilities/useTableSelection.md +72 -72
- package/dist/docs/utilities/useTimeout.md +1 -1
- package/dist/docs/utilities/useToggle.md +1 -1
- package/dist/docs/utilities/useUrlState.md +1 -1
- package/dist/docs/utilities/useWindowResize.md +1 -1
- package/dist/index.mjs +1 -1
- package/dist/version.json +2 -2
- package/package.json +7 -4
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Templates
|
|
4
4
|
*Section:* Forms
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/templates/settings-form
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:19.361Z
|
|
7
7
|
|
|
8
8
|
## Form blocks
|
|
9
9
|
|
|
@@ -15,7 +15,7 @@ This name will appear on your team profile page
|
|
|
15
15
|
About the team
|
|
16
16
|
Write a short summary about your organization or group (max 240 characters).
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
Polarised eco-centric neural-net
|
|
19
19
|
|
|
20
20
|
Company email
|
|
21
21
|
Your contact email address for customer communication
|
|
@@ -25,11 +25,11 @@ Display email on team page
|
|
|
25
25
|
Office location
|
|
26
26
|
Primary business address used for official correspondence
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
North Dakota North Dakota
|
|
29
|
+
Texas
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
Cayman Islands Cayman Islands
|
|
32
|
+
Guinea-Bissau
|
|
33
33
|
|
|
34
34
|
Preferred currency
|
|
35
35
|
All pricing and payouts will be shown in this currency
|
|
@@ -194,7 +194,7 @@ export default () => (
|
|
|
194
194
|
</div>
|
|
195
195
|
<div class="form-group">
|
|
196
196
|
<div class="ClearableInput input-group">
|
|
197
|
-
<input class="form-control withClearButton" type="text" tabindex="0" value="
|
|
197
|
+
<input class="form-control withClearButton" type="text" tabindex="0" value="Schuppe - Gleason">
|
|
198
198
|
<span class="clearButton">
|
|
199
199
|
<span class="clearButtonIcon rioglyph rioglyph-remove-sign">
|
|
200
200
|
</span>
|
|
@@ -214,7 +214,7 @@ export default () => (
|
|
|
214
214
|
<p class="text-wrap-balance text-color-dark">Write a short summary about your organization or group (max 240 characters).</p>
|
|
215
215
|
</div>
|
|
216
216
|
<div class="form-group">
|
|
217
|
-
<textarea class="form-control" rows="4">
|
|
217
|
+
<textarea class="form-control" rows="4">Polarised eco-centric neural-net</textarea>
|
|
218
218
|
</div>
|
|
219
219
|
</section>
|
|
220
220
|
<div class="grid-colspan-2">
|
|
@@ -230,7 +230,7 @@ export default () => (
|
|
|
230
230
|
</div>
|
|
231
231
|
<div class="form-group">
|
|
232
232
|
<div class="ClearableInput input-group">
|
|
233
|
-
<input class="form-control withClearButton" type="email" tabindex="0" value="
|
|
233
|
+
<input class="form-control withClearButton" type="email" tabindex="0" value="Cora66@hotmail.com">
|
|
234
234
|
<span class="clearButton">
|
|
235
235
|
<span class="clearButtonIcon rioglyph rioglyph-remove-sign">
|
|
236
236
|
</span>
|
|
@@ -257,14 +257,14 @@ export default () => (
|
|
|
257
257
|
</div>
|
|
258
258
|
<div class="form-group display-flex flex-column gap-15">
|
|
259
259
|
<div class="ClearableInput input-group">
|
|
260
|
-
<input placeholder="Street address" class="form-control withClearButton" type="text" tabindex="0" value="
|
|
260
|
+
<input placeholder="Street address" class="form-control withClearButton" type="text" tabindex="0" value="934 Hermiston Village">
|
|
261
261
|
<span class="clearButton">
|
|
262
262
|
<span class="clearButtonIcon rioglyph rioglyph-remove-sign">
|
|
263
263
|
</span>
|
|
264
264
|
</span>
|
|
265
265
|
</div>
|
|
266
266
|
<div class="ClearableInput input-group">
|
|
267
|
-
<input placeholder="City" class="form-control withClearButton" type="text" tabindex="0" value="
|
|
267
|
+
<input placeholder="City" class="form-control withClearButton" type="text" tabindex="0" value="Ebbahaven">
|
|
268
268
|
<span class="clearButton">
|
|
269
269
|
<span class="clearButtonIcon rioglyph rioglyph-remove-sign">
|
|
270
270
|
</span>
|
|
@@ -273,7 +273,7 @@ export default () => (
|
|
|
273
273
|
<div class="display-flex gap-15">
|
|
274
274
|
<div class="select dropdown dropup">
|
|
275
275
|
<button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
|
|
276
|
-
<span class="selected-option-text">
|
|
276
|
+
<span class="selected-option-text">North Dakota</span>
|
|
277
277
|
<span class="select-toggle-actions">
|
|
278
278
|
<span class="clearButton hide pointer-events-none">
|
|
279
279
|
<span class="clearButtonIcon rioglyph rioglyph-remove-sign">
|
|
@@ -286,20 +286,20 @@ export default () => (
|
|
|
286
286
|
<ul class="dropdown-menu" role="menu">
|
|
287
287
|
<li class="" role="listitem">
|
|
288
288
|
<a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="1" data-item-index="0">
|
|
289
|
-
<span class="selected-option-dropdown-item">
|
|
289
|
+
<span class="selected-option-dropdown-item">North Dakota</span>
|
|
290
290
|
<input type="hidden" value="1">
|
|
291
291
|
</a>
|
|
292
292
|
</li>
|
|
293
293
|
<li class="" role="listitem">
|
|
294
294
|
<a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2" data-item-index="1">
|
|
295
|
-
<span class="selected-option-dropdown-item">
|
|
295
|
+
<span class="selected-option-dropdown-item">Texas</span>
|
|
296
296
|
<input type="hidden" value="2">
|
|
297
297
|
</a>
|
|
298
298
|
</li>
|
|
299
299
|
</ul>
|
|
300
300
|
</div>
|
|
301
301
|
<div class="ClearableInput input-group">
|
|
302
|
-
<input placeholder="Zip code" class="form-control withClearButton" type="text" tabindex="0" value="
|
|
302
|
+
<input placeholder="Zip code" class="form-control withClearButton" type="text" tabindex="0" value="69775-3559">
|
|
303
303
|
<span class="clearButton">
|
|
304
304
|
<span class="clearButtonIcon rioglyph rioglyph-remove-sign">
|
|
305
305
|
</span>
|
|
@@ -308,7 +308,7 @@ export default () => (
|
|
|
308
308
|
</div>
|
|
309
309
|
<div class="select dropdown dropup">
|
|
310
310
|
<button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
|
|
311
|
-
<span class="selected-option-text">
|
|
311
|
+
<span class="selected-option-text">Cayman Islands</span>
|
|
312
312
|
<span class="select-toggle-actions">
|
|
313
313
|
<span class="clearButton hide pointer-events-none">
|
|
314
314
|
<span class="clearButtonIcon rioglyph rioglyph-remove-sign">
|
|
@@ -321,13 +321,13 @@ export default () => (
|
|
|
321
321
|
<ul class="dropdown-menu" role="menu">
|
|
322
322
|
<li class="" role="listitem">
|
|
323
323
|
<a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="1" data-item-index="0">
|
|
324
|
-
<span class="selected-option-dropdown-item">
|
|
324
|
+
<span class="selected-option-dropdown-item">Cayman Islands</span>
|
|
325
325
|
<input type="hidden" value="1">
|
|
326
326
|
</a>
|
|
327
327
|
</li>
|
|
328
328
|
<li class="" role="listitem">
|
|
329
329
|
<a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2" data-item-index="1">
|
|
330
|
-
<span class="selected-option-dropdown-item">
|
|
330
|
+
<span class="selected-option-dropdown-item">Guinea-Bissau</span>
|
|
331
331
|
<input type="hidden" value="2">
|
|
332
332
|
</a>
|
|
333
333
|
</li>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Templates
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/templates/stats-blocks
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:22.235Z
|
|
7
7
|
|
|
8
8
|
## Stats blocks
|
|
9
9
|
|
|
@@ -13,22 +13,22 @@ Stats page
|
|
|
13
13
|
Overview of your supply chain operations
|
|
14
14
|
|
|
15
15
|
Total inventory
|
|
16
|
-
|
|
16
|
+
1086 units
|
|
17
17
|
|
|
18
18
|
12% from last month
|
|
19
19
|
|
|
20
20
|
Open orders
|
|
21
|
-
|
|
21
|
+
68
|
|
22
22
|
|
|
23
23
|
5% from last month
|
|
24
24
|
|
|
25
25
|
In transit
|
|
26
|
-
|
|
26
|
+
21
|
|
27
27
|
|
|
28
28
|
-3% from last month
|
|
29
29
|
|
|
30
30
|
Issues
|
|
31
|
-
|
|
31
|
+
0
|
|
32
32
|
|
|
33
33
|
#### React (tsx)
|
|
34
34
|
|
|
@@ -145,7 +145,7 @@ export default () => {
|
|
|
145
145
|
</div>
|
|
146
146
|
<div>
|
|
147
147
|
<div class="text-color-dark">Total inventory</div>
|
|
148
|
-
<div class="text-size-h3 text-color-darkest line-height-125rel">
|
|
148
|
+
<div class="text-size-h3 text-color-darkest line-height-125rel">1086 units</div>
|
|
149
149
|
</div>
|
|
150
150
|
</div>
|
|
151
151
|
<div class="text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5">
|
|
@@ -163,7 +163,7 @@ export default () => {
|
|
|
163
163
|
</div>
|
|
164
164
|
<div>
|
|
165
165
|
<div class="text-color-dark">Open orders</div>
|
|
166
|
-
<div class="text-size-h3 text-color-darkest line-height-125rel">
|
|
166
|
+
<div class="text-size-h3 text-color-darkest line-height-125rel">68</div>
|
|
167
167
|
</div>
|
|
168
168
|
</div>
|
|
169
169
|
<div class="text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5">
|
|
@@ -181,7 +181,7 @@ export default () => {
|
|
|
181
181
|
</div>
|
|
182
182
|
<div>
|
|
183
183
|
<div class="text-color-dark">In transit</div>
|
|
184
|
-
<div class="text-size-h3 text-color-darkest line-height-125rel">
|
|
184
|
+
<div class="text-size-h3 text-color-darkest line-height-125rel">21</div>
|
|
185
185
|
</div>
|
|
186
186
|
</div>
|
|
187
187
|
<div class="text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5">
|
|
@@ -199,7 +199,7 @@ export default () => {
|
|
|
199
199
|
</div>
|
|
200
200
|
<div>
|
|
201
201
|
<div class="text-color-dark">Issues</div>
|
|
202
|
-
<div class="text-size-h3 text-color-darkest line-height-125rel">
|
|
202
|
+
<div class="text-size-h3 text-color-darkest line-height-125rel">0</div>
|
|
203
203
|
</div>
|
|
204
204
|
</div>
|
|
205
205
|
</div>
|
|
@@ -907,7 +907,7 @@ const getStatusColor = (status: string) => {
|
|
|
907
907
|
<div class="text-medium text-size-16">Lorem ipsum dolor</div>
|
|
908
908
|
<div>
|
|
909
909
|
<div class="dropdown btn-group">
|
|
910
|
-
<button type="button" id="
|
|
910
|
+
<button type="button" id="h6hddmb181a" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
|
|
911
911
|
<span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
|
|
912
912
|
</span>
|
|
913
913
|
</button>
|
|
@@ -1106,7 +1106,7 @@ const getStatusColor = (status: string) => {
|
|
|
1106
1106
|
</div>
|
|
1107
1107
|
<div>
|
|
1108
1108
|
<div class="dropdown btn-group">
|
|
1109
|
-
<button type="button" id="
|
|
1109
|
+
<button type="button" id="umj1ca6ke7" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
|
|
1110
1110
|
<span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
|
|
1111
1111
|
</span>
|
|
1112
1112
|
</button>
|
|
@@ -1174,7 +1174,7 @@ const getStatusColor = (status: string) => {
|
|
|
1174
1174
|
</div>
|
|
1175
1175
|
<div>
|
|
1176
1176
|
<div class="dropdown btn-group">
|
|
1177
|
-
<button type="button" id="
|
|
1177
|
+
<button type="button" id="hws3roodn4v" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
|
|
1178
1178
|
<span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
|
|
1179
1179
|
</span>
|
|
1180
1180
|
</button>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Helper
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/classNames
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:23.827Z
|
|
7
7
|
|
|
8
8
|
Small utility for composing CSS classes from optional string arguments. It keeps the common case readable without adding third-party runtime behavior.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Helper
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/deviceUtils
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:23.353Z
|
|
7
7
|
|
|
8
8
|
Set of utility functions which helps detecting certain devices or functionality.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Helper
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/featureToggles
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:24.519Z
|
|
7
7
|
|
|
8
8
|
URL-based feature toggles (also known as feature flags) are a powerful development technique that allows you to enable or disable features in your application dynamically, without deploying new code.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Helper
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/fuelTypeUtils
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:23.736Z
|
|
7
7
|
|
|
8
8
|
There is a wide variety of standardized fuel types, and on top of that, some projects or systems introduce their own custom definitions. While the naming can differ, many of these values carry the same semantic meaning. To avoid confusion and ensure consistent visual representation, we provide a centralized mapping of fuel types to icons.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Helper
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/getTrackingAttributes
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:25.050Z
|
|
7
7
|
|
|
8
8
|
Utility helpers for Google Analytics integration, including attribute generation and push helpers.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Helper
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/routeUtils
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:23.940Z
|
|
7
7
|
|
|
8
8
|
Utility helpers for parsing and serializing URL state. These are low-level building blocks for service-specific mapping.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Lifecycle & execution hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useAfterMount
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:25.263Z
|
|
7
7
|
|
|
8
8
|
The useAfterMount hook allows to use a side effect after the component has been mounted and rendered. The effect will not be triggered on mount and only when the dependencies change.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useAutoAnimate
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:27.892Z
|
|
7
7
|
|
|
8
8
|
The useAutoAnimate hook is a thin re-export of the @formkit/auto-animate utility to quickly add enter/leave animations to a container. This page shows a simple example; for full configuration options, check the official documentation.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Data aggregation hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useAverage
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:40.159Z
|
|
7
7
|
|
|
8
8
|
Calculates the arithmetic mean of numeric values extracted from a list of objects using a dot-separated path. Supports localized number formats through optional locale configuration.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useClickOutside
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:28.309Z
|
|
7
7
|
|
|
8
8
|
The useClickOutside hook allows to easily detect events outside a referenced element.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useClipboard
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:33.855Z
|
|
7
7
|
|
|
8
8
|
The useClipboard hook allows to easily copy something to the browsers clipboard.
|
|
9
9
|
|
|
@@ -71,7 +71,7 @@ export default () => {
|
|
|
71
71
|
<span>Random UUID</span>
|
|
72
72
|
</label>
|
|
73
73
|
<div class="input-group">
|
|
74
|
-
<input id="random-uuid" class="form-control" type="text" value="
|
|
74
|
+
<input id="random-uuid" class="form-control" type="text" value="e8fe963c-2bdc-4225-bbbb-1a7368769772">
|
|
75
75
|
<div class="input-group-addon">
|
|
76
76
|
<button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component position-absolute top-1 right-1" tabindex="0">
|
|
77
77
|
<span class="rioglyph rioglyph-duplicate">
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useCookies
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:34.692Z
|
|
7
7
|
|
|
8
8
|
The useCookies hook allows you to set cookies, delete cookies and check whether a cookie exists in the browser.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Data aggregation hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useCount
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:40.508Z
|
|
7
7
|
|
|
8
8
|
useCount is a utility hook for counting how many objects in a list contain a specific value or match a custom condition at a given property path. It supports exact value matching (e.g. true, 0, 'PENDING') or predicate-based logic using a match function. By default, all values that are not null or undefined are counted.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useDarkMode
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:34.911Z
|
|
7
7
|
|
|
8
8
|
The useDarkMode hook enables you to listen for the color scheme change and react accordingly.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* UI state & input hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useDebugInfo
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:37.547Z
|
|
7
7
|
|
|
8
8
|
The useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.
|
|
9
9
|
|
|
@@ -18,7 +18,7 @@ Debug Info: {
|
|
|
18
18
|
"renderCount": 1,
|
|
19
19
|
"changedProps": {},
|
|
20
20
|
"timeSinceLastRender": 0,
|
|
21
|
-
"lastRenderTimestamp":
|
|
21
|
+
"lastRenderTimestamp": 1778069736848
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
Toggle Increment
|
|
@@ -93,7 +93,7 @@ export default () => {
|
|
|
93
93
|
"renderCount": 1,
|
|
94
94
|
"changedProps": {},
|
|
95
95
|
"timeSinceLastRender": 0,
|
|
96
|
-
"lastRenderTimestamp":
|
|
96
|
+
"lastRenderTimestamp": 1778069736848
|
|
97
97
|
}</pre>
|
|
98
98
|
</div>
|
|
99
99
|
</div>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useDraggableElement
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:29.128Z
|
|
7
7
|
|
|
8
8
|
The useDraggableElement hook provides drag behavior for an element. It manages pointer events, viewport clamping and draggable position state for UI elements like floating panels or overlays. Viewport mode renders through the shared portal root, while container mode is intended for absolutely positioned elements that must stay aligned with a scrollable boundary. The hook can also apply an initial position, including centered placement. The renderElement helper is mainly relevant for viewport mode; in container mode it simply returns the element unchanged.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Lifecycle & execution hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useEffectOnce
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:25.379Z
|
|
7
7
|
|
|
8
8
|
The useEffectOnce hook allows to use a side effect only once after the component has been mounted.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useElementSize
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:28.837Z
|
|
7
7
|
|
|
8
8
|
The useElementSize hook allows to easily detect an elements dimension.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useEsc
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:29.338Z
|
|
7
7
|
|
|
8
8
|
The useEsc hook allows to easily detect keydown events for escape key to to react on. This comes in handy when closing something or aborting some operation on esc.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* UI state & input hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useEvent
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:37.680Z
|
|
7
7
|
|
|
8
8
|
The useEvent hook allows to easily detect given events registered on the document.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useFocusTrap
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:29.744Z
|
|
7
7
|
|
|
8
8
|
This custom hook allows to keep the focus inside a defined wrapper element. This might be a dialog or a custom overlay.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useFullscreen
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:31.001Z
|
|
7
7
|
|
|
8
8
|
The cross-browser useFullscreen hook allows to easily switch to fullscreen mode for the document or a dedicated element like a map or a certain part of a service.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useIncomingPostMessages
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:35.146Z
|
|
7
7
|
|
|
8
8
|
For handling postMessage events in React components.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Lifecycle & execution hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useInterval
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:26.457Z
|
|
7
7
|
|
|
8
8
|
The useInterval hook allows for executing some code after a specified amount of time.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useIsFocusWithin
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:30.755Z
|
|
7
7
|
|
|
8
8
|
The useIsFocusWithin hook allows you to detect whether the focus is currently within a specific element or any of its children. This is useful for managing focus-based behavior like showing or hiding UI elements, styling active areas, or triggering accessibility behavior.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useKey
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:31.154Z
|
|
7
7
|
|
|
8
8
|
The useKey hook allows to easily detect key events. It can be used in two ways, either to specify a specific key to listen for or with a callback to listen for all keys.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useLocalStorage
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:36.140Z
|
|
7
7
|
|
|
8
8
|
The useLocalStorage and the useSessionStorage hook allows to save custom data in the respective storage locations.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* UI state & input hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useLocationSuggestions
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:37.874Z
|
|
7
7
|
|
|
8
8
|
The useLocationSuggestions hook allows to use a side effect after the component has been mounted and rendered. The effect will not be triggered on mount and only when the dependencies change.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Data aggregation hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useMax
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:40.805Z
|
|
7
7
|
|
|
8
8
|
Returns the largest valid numeric value found at the specified path within a list of objects. Supports localized formats and gracefully skips unparsable values.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Data aggregation hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useMin
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:41.534Z
|
|
7
7
|
|
|
8
8
|
Returns the smallest valid numeric value found at the specified path within a list of objects. Handles localized number strings and safely ignores invalid values.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useMutationObserver
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:32.075Z
|
|
7
7
|
|
|
8
8
|
The useMutationObserver hook enables you to listen for changes on the given element or on its children. For more details, check out https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useOnScreen
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:32.413Z
|
|
7
7
|
|
|
8
8
|
The useOnScreen hook tells you when an element is visible on screen.
|
|
9
9
|
|