@rio-cloud/uikit-mcp 1.1.4 → 1.1.6
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/README.md +1 -0
- package/dist/doc-metadata.json +188 -88
- package/dist/docs/components/accentBar.md +35 -3
- package/dist/docs/components/activity.md +14 -3
- package/dist/docs/components/animatedNumber.md +17 -4
- package/dist/docs/components/animatedTextReveal.md +54 -8
- package/dist/docs/components/animations.md +33 -33
- package/dist/docs/components/appHeader.md +65 -9
- package/dist/docs/components/appLayout.md +566 -61
- package/dist/docs/components/appNavigationBar.md +55 -3
- package/dist/docs/components/areaCharts.md +14 -14
- package/dist/docs/components/aspectRatioPlaceholder.md +11 -3
- package/dist/docs/components/assetTree.md +1174 -328
- package/dist/docs/components/autosuggests.md +2 -2
- package/dist/docs/components/avatar.md +25 -3
- package/dist/docs/components/banner.md +3 -3
- package/dist/docs/components/barCharts.md +38 -38
- package/dist/docs/components/barList.md +22 -10
- package/dist/docs/components/basicMap.md +2 -2
- package/dist/docs/components/bottomSheet.md +100 -3
- package/dist/docs/components/button.md +549 -36
- package/dist/docs/components/buttonToolbar.md +10 -3
- package/dist/docs/components/calendarStripe.md +127 -85
- package/dist/docs/components/card.md +11 -3
- package/dist/docs/components/carousel.md +2 -2
- package/dist/docs/components/chartColors.md +2 -2
- package/dist/docs/components/chartsGettingStarted.md +2 -2
- package/dist/docs/components/chat.md +3 -3
- package/dist/docs/components/checkbox.md +67 -45
- package/dist/docs/components/circularProgress.md +465 -0
- package/dist/docs/components/clearableInput.md +18 -18
- package/dist/docs/components/collapse.md +28 -4
- package/dist/docs/components/composedCharts.md +20 -20
- package/dist/docs/components/contentLoader.md +126 -105
- package/dist/docs/components/dataTabs.md +191 -11
- package/dist/docs/components/datepickers.md +735 -723
- package/dist/docs/components/dialogs.md +362 -2
- package/dist/docs/components/divider.md +15 -3
- package/dist/docs/components/dropdowns.md +4548 -4355
- package/dist/docs/components/editableContent.md +187 -3
- package/dist/docs/components/expander.md +52 -5
- package/dist/docs/components/fade.md +42 -7
- package/dist/docs/components/fadeExpander.md +13 -4
- package/dist/docs/components/fadeUp.md +22 -4
- package/dist/docs/components/feedback.md +44 -3
- package/dist/docs/components/filePickers.md +45 -3
- package/dist/docs/components/formLabel.md +20 -5
- package/dist/docs/components/groupedItemList.md +54 -3
- package/dist/docs/components/iconList.md +5 -5
- package/dist/docs/components/imagePreloader.md +7 -3
- package/dist/docs/components/labeledElement.md +13 -3
- package/dist/docs/components/licensePlate.md +11 -3
- package/dist/docs/components/lineCharts.md +10 -10
- package/dist/docs/components/listMenu.md +78 -8
- package/dist/docs/components/loadMore.md +29 -3
- package/dist/docs/components/mainNavigation.md +5 -5
- package/dist/docs/components/mapCircle.md +2 -2
- package/dist/docs/components/mapCluster.md +2 -2
- package/dist/docs/components/mapContext.md +2 -2
- package/dist/docs/components/mapDraggableMarker.md +2 -2
- package/dist/docs/components/mapGettingStarted.md +2 -2
- package/dist/docs/components/mapInfoBubble.md +2 -2
- package/dist/docs/components/mapLayerGroup.md +2 -2
- package/dist/docs/components/mapMarker.md +2 -2
- package/dist/docs/components/mapPolygon.md +2 -2
- package/dist/docs/components/mapRoute.md +2 -2
- package/dist/docs/components/mapRouteGenerator.md +2 -2
- package/dist/docs/components/mapSettings.md +9 -9
- package/dist/docs/components/mapUtils.md +2 -2
- package/dist/docs/components/multiselects.md +2 -2
- package/dist/docs/components/noData.md +23 -3
- package/dist/docs/components/notifications.md +2 -2
- package/dist/docs/components/numbercontrol.md +54 -5
- package/dist/docs/components/onboarding.md +26 -2
- package/dist/docs/components/page.md +33 -3
- package/dist/docs/components/pager.md +15 -3
- package/dist/docs/components/pieCharts.md +89 -78
- package/dist/docs/components/popover.md +40 -2
- package/dist/docs/components/position.md +11 -3
- package/dist/docs/components/radialBarCharts.md +2054 -2012
- package/dist/docs/components/radioCardGroup.md +487 -0
- package/dist/docs/components/radiobutton.md +138 -10
- package/dist/docs/components/releaseNotes.md +19 -2
- package/dist/docs/components/resizer.md +14 -3
- package/dist/docs/components/responsiveColumnStripe.md +20 -3
- package/dist/docs/components/responsiveVideo.md +12 -3
- package/dist/docs/components/rioglyph.md +13 -3
- package/dist/docs/components/rules.md +95 -5
- package/dist/docs/components/saveableInput.md +400 -276
- package/dist/docs/components/selects.md +2 -2
- package/dist/docs/components/sidebar.md +39 -3
- package/dist/docs/components/sliders.md +38 -3
- package/dist/docs/components/smoothScrollbars.md +93 -3
- package/dist/docs/components/spinners.md +51 -3
- package/dist/docs/components/states.md +217 -2
- package/dist/docs/components/statsWidgets.md +123 -3
- package/dist/docs/components/statusBar.md +29 -3
- package/dist/docs/components/stepButton.md +9 -3
- package/dist/docs/components/steppedProgressBars.md +67 -3
- package/dist/docs/components/subNavigation.md +24 -17
- package/dist/docs/components/supportMarker.md +2 -2
- package/dist/docs/components/svgImage.md +13 -3
- package/dist/docs/components/switch.md +218 -82
- package/dist/docs/components/tables.md +2 -2
- package/dist/docs/components/tagManager.md +56 -2
- package/dist/docs/components/tags.md +33 -3
- package/dist/docs/components/teaser.md +30 -3
- package/dist/docs/components/textTruncateMiddle.md +151 -0
- package/dist/docs/components/timeline.md +2 -2
- package/dist/docs/components/timepicker.md +687 -63
- package/dist/docs/components/toggleButton.md +96 -10
- package/dist/docs/components/tooltip.md +30 -21
- package/dist/docs/components/tracker.md +631 -0
- package/dist/docs/components/virtualList.md +107 -84
- package/dist/docs/foundations.md +647 -275
- package/dist/docs/start/changelog.md +2 -738
- package/dist/docs/start/goodtoknow.md +2 -2
- package/dist/docs/start/guidelines/color-combinations.md +2 -2
- package/dist/docs/start/guidelines/custom-css.md +2 -2
- package/dist/docs/start/guidelines/custom-rioglyph.md +2 -2
- package/dist/docs/start/guidelines/formatting.md +2 -2
- package/dist/docs/start/guidelines/iframe.md +2 -2
- package/dist/docs/start/guidelines/obfuscate-data.md +2 -2
- package/dist/docs/start/guidelines/print-css.md +2 -2
- package/dist/docs/start/guidelines/spinner.md +82 -82
- package/dist/docs/start/guidelines/state-in-url.md +263 -0
- package/dist/docs/start/guidelines/supported-browsers.md +2 -2
- package/dist/docs/start/guidelines/writing.md +2 -2
- package/dist/docs/start/howto.md +10 -10
- package/dist/docs/start/intro.md +2 -2
- package/dist/docs/start/responsiveness.md +2 -2
- package/dist/docs/templates/common-table.md +15 -14
- package/dist/docs/templates/detail-views.md +3 -3
- package/dist/docs/templates/expandable-details.md +2 -2
- package/dist/docs/templates/feature-cards.md +56 -56
- package/dist/docs/templates/form-summary.md +23 -23
- package/dist/docs/templates/form-toggle.md +2 -2
- package/dist/docs/templates/list-blocks.md +204 -204
- package/dist/docs/templates/loading-progress.md +2 -2
- package/dist/docs/templates/options-panel.md +2 -2
- package/dist/docs/templates/panel-variants.md +2 -2
- package/dist/docs/templates/progress-cards.md +2 -2
- package/dist/docs/templates/progress-success.md +2 -2
- package/dist/docs/templates/settings-form.md +24 -24
- package/dist/docs/templates/stats-blocks.md +18 -18
- package/dist/docs/templates/table-panel.md +2 -2
- package/dist/docs/templates/table-row-animation.md +2 -2
- package/dist/docs/templates/usage-cards.md +2 -2
- package/dist/docs/utilities/classNames.md +191 -0
- package/dist/docs/utilities/deviceUtils.md +2 -2
- package/dist/docs/utilities/featureToggles.md +2 -2
- package/dist/docs/utilities/fuelTypeUtils.md +2 -2
- package/dist/docs/utilities/routeUtils.md +326 -90
- package/dist/docs/utilities/useAfterMount.md +2 -2
- package/dist/docs/utilities/useAutoAnimate.md +2 -2
- package/dist/docs/utilities/useAverage.md +2 -2
- package/dist/docs/utilities/useClickOutside.md +2 -2
- package/dist/docs/utilities/useClipboard.md +3 -3
- package/dist/docs/utilities/useCookies.md +188 -0
- package/dist/docs/utilities/useCount.md +2 -2
- package/dist/docs/utilities/useDarkMode.md +2 -2
- package/dist/docs/utilities/useDebugInfo.md +5 -5
- package/dist/docs/utilities/useEffectOnce.md +2 -2
- package/dist/docs/utilities/useElapsedTime.md +2 -2
- package/dist/docs/utilities/useElementSize.md +2 -2
- package/dist/docs/utilities/useEsc.md +2 -2
- package/dist/docs/utilities/useEvent.md +2 -2
- package/dist/docs/utilities/useFocusTrap.md +2 -2
- package/dist/docs/utilities/useFullscreen.md +2 -2
- package/dist/docs/utilities/useHover.md +2 -2
- package/dist/docs/utilities/useIncomingPostMessages.md +2 -2
- package/dist/docs/utilities/useInterval.md +2 -2
- package/dist/docs/utilities/useIsFocusWithin.md +2 -2
- package/dist/docs/utilities/useKey.md +2 -2
- package/dist/docs/utilities/useLocalStorage.md +2 -2
- package/dist/docs/utilities/useLocationSuggestions.md +2 -2
- package/dist/docs/utilities/useMax.md +2 -2
- package/dist/docs/utilities/useMin.md +2 -2
- package/dist/docs/utilities/useMutationObserver.md +2 -2
- package/dist/docs/utilities/useOnScreen.md +2 -2
- package/dist/docs/utilities/useOnlineStatus.md +2 -2
- package/dist/docs/utilities/usePostMessage.md +3 -3
- package/dist/docs/utilities/usePostMessageSender.md +2 -2
- package/dist/docs/utilities/usePrevious.md +2 -2
- package/dist/docs/utilities/useResizeObserver.md +2 -2
- package/dist/docs/utilities/useRioCookieConsent.md +90 -0
- package/dist/docs/utilities/useScrollPosition.md +2 -2
- package/dist/docs/utilities/useSearch.md +2 -2
- package/dist/docs/utilities/useSearchHighlight.md +815 -0
- package/dist/docs/utilities/useSorting.md +2 -2
- package/dist/docs/utilities/useStateWithValidation.md +2 -2
- package/dist/docs/utilities/useSum.md +2 -2
- package/dist/docs/utilities/useTableExport.md +53 -53
- package/dist/docs/utilities/useTableSelection.md +90 -90
- package/dist/docs/utilities/useTimeout.md +2 -2
- package/dist/docs/utilities/useToggle.md +3 -3
- package/dist/docs/utilities/useUrlState.md +418 -0
- package/dist/docs/utilities/useWindowResize.md +2 -2
- package/dist/index.mjs +8 -8
- package/dist/version.json +2 -2
- package/package.json +9 -9
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Map
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/mapContext
|
|
6
|
+
*Captured:* 2026-02-23T13:42:49.815Z
|
|
7
7
|
|
|
8
8
|
## Map
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Map
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/mapDraggableMarker
|
|
6
|
+
*Captured:* 2026-02-23T13:42:37.712Z
|
|
7
7
|
|
|
8
8
|
## Draggable marker
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Map
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/mapGettingStarted
|
|
6
|
+
*Captured:* 2026-02-23T13:42:35.437Z
|
|
7
7
|
|
|
8
8
|
HERE Maps credentials used in the UIKIT demo are not allowed to be used in any production environment!
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Map
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/mapInfoBubble
|
|
6
|
+
*Captured:* 2026-02-23T13:42:47.376Z
|
|
7
7
|
|
|
8
8
|
## InfoBubble
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Map
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/mapLayerGroup
|
|
6
|
+
*Captured:* 2026-02-23T13:42:47.308Z
|
|
7
7
|
|
|
8
8
|
## MapLayerGroup
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Map
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/mapMarker
|
|
6
|
+
*Captured:* 2026-02-23T13:42:46.221Z
|
|
7
7
|
|
|
8
8
|
Markers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Map
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/mapPolygon
|
|
6
|
+
*Captured:* 2026-02-23T13:42:53.892Z
|
|
7
7
|
|
|
8
8
|
## Polygon
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Map
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/mapRoute
|
|
6
|
+
*Captured:* 2026-02-23T13:43:06.955Z
|
|
7
7
|
|
|
8
8
|
There are currently 3 different route styles built-in into the map component.
|
|
9
9
|
|
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Map
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/mapRouteGenerator
|
|
6
|
+
*Captured:* 2026-02-23T13:42:49.971Z
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Map
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/mapSettings
|
|
6
|
+
*Captured:* 2026-02-23T13:42:45.487Z
|
|
7
7
|
|
|
8
8
|
## Map settings
|
|
9
9
|
|
|
@@ -96,8 +96,7 @@ import type React from 'react';
|
|
|
96
96
|
import { useState, useRef, useMemo } from 'react';
|
|
97
97
|
import { isEqual, without } from 'es-toolkit/compat';
|
|
98
98
|
|
|
99
|
-
import classNames from '
|
|
100
|
-
|
|
99
|
+
import classNames from '@rio-cloud/rio-uikit/classNames';
|
|
101
100
|
import Notification from '@rio-cloud/rio-uikit/Notification';
|
|
102
101
|
import Map from '@rio-cloud/rio-uikit/Map';
|
|
103
102
|
import Polygon from '@rio-cloud/rio-uikit/Polygon';
|
|
@@ -822,7 +821,7 @@ Terrain
|
|
|
822
821
|
|
|
823
822
|
Show traffic incidents
|
|
824
823
|
|
|
825
|
-
Without cluster and map layer settings
|
|
824
|
+
Without cluster and custom map layer settings
|
|
826
825
|
|
|
827
826
|
Terms of use© 1987–2026 HERE
|
|
828
827
|
|
|
@@ -876,7 +875,7 @@ Terrain
|
|
|
876
875
|
|
|
877
876
|
Show traffic incidents
|
|
878
877
|
|
|
879
|
-
Without cluster and map layer settings
|
|
878
|
+
Without cluster and custom map layer settings
|
|
880
879
|
|
|
881
880
|
Terms of use© 1987–2026 HERE
|
|
882
881
|
|
|
@@ -970,7 +969,7 @@ const SettingsExample = () => {
|
|
|
970
969
|
/>
|
|
971
970
|
</div>
|
|
972
971
|
<div>
|
|
973
|
-
<label>Without cluster and map layer settings</label>
|
|
972
|
+
<label>Without cluster and custom map layer settings</label>
|
|
974
973
|
<Map
|
|
975
974
|
credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
|
|
976
975
|
center={position}
|
|
@@ -983,11 +982,11 @@ const SettingsExample = () => {
|
|
|
983
982
|
<MapTypeSettings
|
|
984
983
|
key='mapTypeSettings'
|
|
985
984
|
tooltip='Change map type'
|
|
985
|
+
dropdownHeaderText='Map views'
|
|
986
|
+
visibleMapTypes={[Map.TYPE_DEFAULT, Map.TYPE_FLEET_STYLE, Map.TYPE_SATELLITE]}
|
|
986
987
|
defaultTypeLabel='Default view'
|
|
987
988
|
truckTypeLabel='Truck view'
|
|
988
|
-
terrainTypeLabel='Terrain view'
|
|
989
989
|
satelliteTypeLabel='Satellite view'
|
|
990
|
-
nightTypeLabel='Night view'
|
|
991
990
|
/>,
|
|
992
991
|
]}
|
|
993
992
|
/>
|
|
@@ -1010,6 +1009,7 @@ const SettingsExample = () => {
|
|
|
1010
1009
|
<MapTypeSettings
|
|
1011
1010
|
key='mapTypeSettings'
|
|
1012
1011
|
tooltip='Change map type'
|
|
1012
|
+
dropdownHeaderText='Map views'
|
|
1013
1013
|
defaultTypeLabel='Default view'
|
|
1014
1014
|
truckTypeLabel='Truck view'
|
|
1015
1015
|
terrainTypeLabel='Terrain view'
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Map
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/mapUtils
|
|
6
|
+
*Captured:* 2026-02-23T13:42:48.665Z
|
|
7
7
|
|
|
8
8
|
## Map utils
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Selection
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/multiselects
|
|
6
|
+
*Captured:* 2026-02-23T13:41:57.688Z
|
|
7
7
|
|
|
8
8
|
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.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/noData
|
|
6
|
+
*Captured:* 2026-02-23T13:42:13.303Z
|
|
7
7
|
|
|
8
8
|
## NoData
|
|
9
9
|
|
|
@@ -83,6 +83,16 @@ export default () => (
|
|
|
83
83
|
</div>
|
|
84
84
|
```
|
|
85
85
|
|
|
86
|
+
#### Props
|
|
87
|
+
|
|
88
|
+
| Name | Type | Default | Description |
|
|
89
|
+
| --- | --- | --- | --- |
|
|
90
|
+
| text | string \| React.ReactNode | — | The actual translated "No data" text. |
|
|
91
|
+
| tooltip | string \| React.ReactNode | — | Additional explanation shown inside a tooltip. |
|
|
92
|
+
| tooltipPlacement | ObjectValues<typeof PLACEMENT> | — | Sets the direction the Tooltip is positioned towards. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left, left-end |
|
|
93
|
+
| tooltipWidth | TooltipWidth | — | The width of the tooltip. Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500 |
|
|
94
|
+
| className | string | — | Additional class names to be added to the wrapping element. |
|
|
95
|
+
|
|
86
96
|
### Example: Example 2
|
|
87
97
|
|
|
88
98
|
NoData in tablesColumn 1Column 2Column 3
|
|
@@ -187,4 +197,14 @@ export default () => (
|
|
|
187
197
|
</tr>
|
|
188
198
|
</tbody>
|
|
189
199
|
</table>
|
|
190
|
-
```
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
#### Props
|
|
203
|
+
|
|
204
|
+
| Name | Type | Default | Description |
|
|
205
|
+
| --- | --- | --- | --- |
|
|
206
|
+
| text | string \| React.ReactNode | — | The actual translated "No data" text. |
|
|
207
|
+
| tooltip | string \| React.ReactNode | — | Additional explanation shown inside a tooltip. |
|
|
208
|
+
| tooltipPlacement | ObjectValues<typeof PLACEMENT> | — | Sets the direction the Tooltip is positioned towards. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left, left-end |
|
|
209
|
+
| tooltipWidth | TooltipWidth | — | The width of the tooltip. Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500 |
|
|
210
|
+
| className | string | — | Additional class names to be added to the wrapping element. |
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/notifications
|
|
6
|
+
*Captured:* 2026-02-23T13:42:26.036Z
|
|
7
7
|
|
|
8
8
|
Hint:Notifications need to be wrapped by a NotificationsContainer inside your application layout body.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Interaction
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/numbercontrol
|
|
6
|
+
*Captured:* 2026-02-23T13:41:41.711Z
|
|
7
7
|
|
|
8
8
|
## NumberInput
|
|
9
9
|
|
|
@@ -179,12 +179,13 @@ export default () => {
|
|
|
179
179
|
<div>
|
|
180
180
|
<div class="">
|
|
181
181
|
<div class="uikit-switch">
|
|
182
|
-
<label class="switch-label label-position-left">
|
|
182
|
+
<label class="switch-label uikit-switch label-position-left display-inline-flex height-20">
|
|
183
183
|
<input type="checkbox" class="switch-input">
|
|
184
184
|
<div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
|
|
185
185
|
<div class="switch-handle">
|
|
186
186
|
</div>
|
|
187
|
-
</div>
|
|
187
|
+
</div>
|
|
188
|
+
<div class="switch-text-wrapper user-select-none padding-top-1">No default values</div>
|
|
188
189
|
</label>
|
|
189
190
|
</div>
|
|
190
191
|
</div>
|
|
@@ -321,6 +322,30 @@ export default () => {
|
|
|
321
322
|
</div>
|
|
322
323
|
```
|
|
323
324
|
|
|
325
|
+
#### Props
|
|
326
|
+
|
|
327
|
+
| Name | Type | Default | Description |
|
|
328
|
+
| --- | --- | --- | --- |
|
|
329
|
+
| id | string | — | A native input id attribute. Passed through as HTML attribute to the input element. |
|
|
330
|
+
| min | number | 0 | The minimum value of the input. |
|
|
331
|
+
| max | number | Number.MAX_VALUE | The maximum value of the input. |
|
|
332
|
+
| value | number | 0 | The initial value of the input. Used to control the component from the outside. |
|
|
333
|
+
| noDefault | boolean | false | Lets you omit the default value of "0" when the vale is not defined. The input will be empty in this case. |
|
|
334
|
+
| step | number | 1 | The size of increment or decrement (only works with number type). |
|
|
335
|
+
| disabled | boolean | false | Enables or disabled the input. |
|
|
336
|
+
| onChange | (value?: number) => void | — | Callback function triggered when the input value changes. When the value is removed by the user, the input is kept empty, but it triggers the callback without any value since the user has finished his input. |
|
|
337
|
+
| onKeyDown | (event: React.KeyboardEvent<HTMLInputElement>) => void | — | Callback function that gets triggered after filtering out invalid keystrokes. |
|
|
338
|
+
| bsSize | 'sm' \| 'md' \| 'lg' | 'md' | Defines the size of the input to be rendered. |
|
|
339
|
+
| unit | string \| React.ReactNode | — | A unit for this value. This will be shown in a dedicated input addon. |
|
|
340
|
+
| inputAddon | string | — | A rioglyph icon tio be shown in front of the input. |
|
|
341
|
+
| errorMessage | string \| React.ReactNode | — | Input error message. |
|
|
342
|
+
| warningMessage | string \| React.ReactNode | — | Input warning message. |
|
|
343
|
+
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Feedback message width. |
|
|
344
|
+
| controls | React.ReactNode | — | This prop is used by the NumberControl component to pass on the +/- spinner controls. |
|
|
345
|
+
| placeholder | string | — | The input placeholder if no value is given. |
|
|
346
|
+
| digitPrecision | number | 3 | Number of digits after the comma the value should be fixed to. |
|
|
347
|
+
| className | string | — | Additional classes to be set on the component. |
|
|
348
|
+
|
|
324
349
|
## NumberControl
|
|
325
350
|
|
|
326
351
|
### Example: Example 2
|
|
@@ -657,4 +682,28 @@ export default () => (
|
|
|
657
682
|
</div>
|
|
658
683
|
</div>
|
|
659
684
|
</div>
|
|
660
|
-
```
|
|
685
|
+
```
|
|
686
|
+
|
|
687
|
+
#### Props
|
|
688
|
+
|
|
689
|
+
| Name | Type | Default | Description |
|
|
690
|
+
| --- | --- | --- | --- |
|
|
691
|
+
| id | string | — | A native input id attribute. Passed through as HTML attribute to the input element. |
|
|
692
|
+
| min | number | 0 | The minimum value of the input. |
|
|
693
|
+
| max | number | Number.MAX_VALUE | The maximum value of the input. |
|
|
694
|
+
| value | number | 0 | The initial value of the input. Used to control the component from the outside. |
|
|
695
|
+
| noDefault | boolean | false | Lets you omit the default value of "0" when the vale is not defined. The input will be empty in this case. |
|
|
696
|
+
| step | number | 1 | The size of increment or decrement (only works with number type). |
|
|
697
|
+
| disabled | boolean | false | Enables or disabled the input. |
|
|
698
|
+
| onChange | (value?: number) => void | — | Callback function triggered when the input value changes. When the value is removed by the user, the input is kept empty, but it triggers the callback without any value since the user has finished his input. |
|
|
699
|
+
| onKeyDown | (event: React.KeyboardEvent<HTMLInputElement>) => void | — | Callback function that gets triggered after filtering out invalid keystrokes. |
|
|
700
|
+
| bsSize | 'sm' \| 'md' \| 'lg' | 'md' | Defines the size of the input to be rendered. |
|
|
701
|
+
| unit | string \| React.ReactNode | — | A unit for this value. This will be shown in a dedicated input addon. |
|
|
702
|
+
| inputAddon | string | — | A rioglyph icon tio be shown in front of the input. |
|
|
703
|
+
| errorMessage | string \| React.ReactNode | — | Input error message. |
|
|
704
|
+
| warningMessage | string \| React.ReactNode | — | Input warning message. |
|
|
705
|
+
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Feedback message width. |
|
|
706
|
+
| controls | React.ReactNode | — | This prop is used by the NumberControl component to pass on the +/- spinner controls. |
|
|
707
|
+
| placeholder | string | — | The input placeholder if no value is given. |
|
|
708
|
+
| digitPrecision | number | 3 | Number of digits after the comma the value should be fixed to. |
|
|
709
|
+
| className | string | — | Additional classes to be set on the component. |
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/onboarding
|
|
6
|
+
*Captured:* 2026-02-23T13:42:26.587Z
|
|
7
7
|
|
|
8
8
|
Useful when you want to control a single tooltip that highlights a portion of the UI.
|
|
9
9
|
|
|
@@ -83,6 +83,24 @@ export default () => {
|
|
|
83
83
|
};
|
|
84
84
|
```
|
|
85
85
|
|
|
86
|
+
#### Props
|
|
87
|
+
|
|
88
|
+
| Name | Type | Default | Description |
|
|
89
|
+
| --- | --- | --- | --- |
|
|
90
|
+
| id | string | — | The ID of the DOM element. |
|
|
91
|
+
| show | boolean | false | Indicates whether the onboarding tip is shown. |
|
|
92
|
+
| showCloseIcon | boolean | true | Defines whether to show a close icon. |
|
|
93
|
+
| textAlignment | TextAlignment | 'left' | Define how the text should be aligned. Possible values are: left center right |
|
|
94
|
+
| width | TooltipWidth | — | The tooltip's width. Possible values are: auto 100 150 200 250 300 350 400 450 500 |
|
|
95
|
+
| onHide | VoidFunction | () => {} | Callback function for when the component shall be hidden. |
|
|
96
|
+
| useInDialog | boolean | false | Changes the z-index. |
|
|
97
|
+
| className | string | — | Additional classes to be set on the wrapper element. |
|
|
98
|
+
| title | string \| ReactNode | — | The title of the onboarding tip. |
|
|
99
|
+
| content | string \| ReactNode | — | The content of the onboarding tip. |
|
|
100
|
+
| preventOverflow | boolean | true | Prevents onboarding tips from being cut off horizontally at screen borders. |
|
|
101
|
+
| popperConfig | PopperConfig | — | A Popper.js config object passed to the underlying popper instance. |
|
|
102
|
+
| placement | Placement | 'bottom' | Define how the component should be placed. Possible values are: auto-start auto auto-end top-start top top-end right-start right right-end bottom-start bottom bottom-end left-start left left-end |
|
|
103
|
+
|
|
86
104
|
## Onboarding tour
|
|
87
105
|
|
|
88
106
|
When you want to guide the user through a "tour" with multiple steps explaining individual features or UI elements. The behavior of the whole tour and individual steps can be controlled declaratively.
|
|
@@ -250,4 +268,10 @@ export default () => {
|
|
|
250
268
|
</div>
|
|
251
269
|
);
|
|
252
270
|
};
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
#### Props (json)
|
|
274
|
+
|
|
275
|
+
```json
|
|
276
|
+
'[data-onboarding-walkthrough-step="2"]'
|
|
253
277
|
```
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/page
|
|
6
|
+
*Captured:* 2026-02-23T13:42:14.648Z
|
|
7
7
|
|
|
8
8
|
## Page
|
|
9
9
|
|
|
@@ -93,6 +93,16 @@ export default () => (
|
|
|
93
93
|
</div>
|
|
94
94
|
```
|
|
95
95
|
|
|
96
|
+
#### Props
|
|
97
|
+
|
|
98
|
+
| Name | Type | Default | Description |
|
|
99
|
+
| --- | --- | --- | --- |
|
|
100
|
+
| width | number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page. Please make sure the element does not get stretched when using flexbox. |
|
|
101
|
+
| orientation | 'portrait' \| 'landscape' | 'portrait' | Defines the layout of the page |
|
|
102
|
+
| shadow | boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |
|
|
103
|
+
| border | boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |
|
|
104
|
+
| className | string | — | Additional classes to be set on the wrapper element |
|
|
105
|
+
|
|
96
106
|
### Example: Page 1
|
|
97
107
|
|
|
98
108
|
Page 1
|
|
@@ -168,6 +178,16 @@ export default () => (
|
|
|
168
178
|
</div>
|
|
169
179
|
```
|
|
170
180
|
|
|
181
|
+
#### Props
|
|
182
|
+
|
|
183
|
+
| Name | Type | Default | Description |
|
|
184
|
+
| --- | --- | --- | --- |
|
|
185
|
+
| width | number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page. Please make sure the element does not get stretched when using flexbox. |
|
|
186
|
+
| orientation | 'portrait' \| 'landscape' | 'portrait' | Defines the layout of the page |
|
|
187
|
+
| shadow | boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |
|
|
188
|
+
| border | boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |
|
|
189
|
+
| className | string | — | Additional classes to be set on the wrapper element |
|
|
190
|
+
|
|
171
191
|
### Example: Portrait
|
|
172
192
|
|
|
173
193
|
Portrait
|
|
@@ -208,4 +228,14 @@ export default () => (
|
|
|
208
228
|
<div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">Landscape</div>
|
|
209
229
|
</div>
|
|
210
230
|
</div>
|
|
211
|
-
```
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
#### Props
|
|
234
|
+
|
|
235
|
+
| Name | Type | Default | Description |
|
|
236
|
+
| --- | --- | --- | --- |
|
|
237
|
+
| width | number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page. Please make sure the element does not get stretched when using flexbox. |
|
|
238
|
+
| orientation | 'portrait' \| 'landscape' | 'portrait' | Defines the layout of the page |
|
|
239
|
+
| shadow | boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |
|
|
240
|
+
| border | boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |
|
|
241
|
+
| className | string | — | Additional classes to be set on the wrapper element |
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Navigation
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/components/pager
|
|
6
|
+
*Captured:* 2026-02-23T13:41:35.000Z
|
|
7
7
|
|
|
8
8
|
## Pager
|
|
9
9
|
|
|
@@ -118,4 +118,16 @@ export default () => (
|
|
|
118
118
|
</div>
|
|
119
119
|
</div>
|
|
120
120
|
</div>
|
|
121
|
-
```
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
#### Props
|
|
124
|
+
|
|
125
|
+
| Name | Type | Default | Description |
|
|
126
|
+
| --- | --- | --- | --- |
|
|
127
|
+
| title | string \| React.ReactNode | — | The title or name of the section next/previous section. |
|
|
128
|
+
| label | string \| React.ReactNode | — | The optional label for the full variant. |
|
|
129
|
+
| alignRight | boolean | false | Set right alignment for "previous" pager content to be aligned to the right side of the pager and the arrow on the left side. |
|
|
130
|
+
| variant | ObjectValues<typeof PagerVariant> | `full` | Define how large the component should be rendered. Possible values are: Pager.VARIANT_FULL, Pager.VARIANT_COMPACT or full, compact. |
|
|
131
|
+
| disabled | boolean | false | Sets the pager disabled. |
|
|
132
|
+
| onClick | (event: React.MouseEvent<HTMLDivElement>) => void | — | Callback function for when the component is clicked. |
|
|
133
|
+
| className | string | — | Additional classes for the wrapper element. |
|