@rio-cloud/uikit-mcp 1.1.3 → 1.1.5
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 +97 -97
- package/dist/docs/components/accentBar.md +5 -5
- package/dist/docs/components/activity.md +7 -7
- package/dist/docs/components/animatedNumber.md +10 -10
- package/dist/docs/components/animatedTextReveal.md +42 -43
- package/dist/docs/components/animations.md +42 -34
- package/dist/docs/components/appHeader.md +20 -35
- package/dist/docs/components/appLayout.md +198 -221
- package/dist/docs/components/appNavigationBar.md +21 -21
- package/dist/docs/components/areaCharts.md +38 -38
- package/dist/docs/components/aspectRatioPlaceholder.md +4 -5
- package/dist/docs/components/assetTree.md +887 -614
- package/dist/docs/components/autosuggests.md +4 -4
- package/dist/docs/components/avatar.md +7 -7
- package/dist/docs/components/banner.md +2 -2
- package/dist/docs/components/barCharts.md +173 -173
- package/dist/docs/components/barList.md +19 -41
- package/dist/docs/components/basicMap.md +1 -1
- package/dist/docs/components/bottomSheet.md +74 -74
- package/dist/docs/components/button.md +161 -71
- package/dist/docs/components/buttonToolbar.md +3 -3
- package/dist/docs/components/calendarStripe.md +71 -123
- package/dist/docs/components/card.md +4 -4
- 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 +56 -131
- package/dist/docs/components/clearableInput.md +23 -127
- package/dist/docs/components/collapse.md +14 -16
- package/dist/docs/components/composedCharts.md +31 -31
- package/dist/docs/components/contentLoader.md +125 -122
- package/dist/docs/components/dataTabs.md +103 -93
- package/dist/docs/components/datepickers.md +734 -764
- package/dist/docs/components/dialogs.md +299 -186
- package/dist/docs/components/divider.md +4 -4
- package/dist/docs/components/dropdowns.md +4555 -4498
- package/dist/docs/components/editableContent.md +97 -97
- package/dist/docs/components/expander.md +56 -56
- package/dist/docs/components/fade.md +41 -41
- package/dist/docs/components/fadeExpander.md +4 -4
- package/dist/docs/components/fadeUp.md +8 -10
- package/dist/docs/components/feedback.md +22 -21
- package/dist/docs/components/filePickers.md +25 -25
- package/dist/docs/components/formLabel.md +5 -7
- package/dist/docs/components/groupedItemList.md +37 -37
- package/dist/docs/components/iconList.md +4 -4
- package/dist/docs/components/imagePreloader.md +6 -6
- package/dist/docs/components/labeledElement.md +4 -3
- package/dist/docs/components/licensePlate.md +2 -2
- package/dist/docs/components/lineCharts.md +58 -58
- package/dist/docs/components/listMenu.md +63 -41
- package/dist/docs/components/loadMore.md +17 -17
- 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 +339 -345
- package/dist/docs/components/mapPolygon.md +16 -20
- package/dist/docs/components/mapRoute.md +14 -20
- package/dist/docs/components/mapRouteGenerator.md +1 -1
- package/dist/docs/components/mapSettings.md +263 -274
- package/dist/docs/components/mapUtils.md +3 -5
- package/dist/docs/components/multiselects.md +1 -1
- package/dist/docs/components/noData.md +11 -11
- package/dist/docs/components/notifications.md +1 -1
- package/dist/docs/components/numbercontrol.md +39 -37
- package/dist/docs/components/onboarding.md +18 -38
- package/dist/docs/components/page.md +16 -16
- package/dist/docs/components/pager.md +8 -8
- package/dist/docs/components/pieCharts.md +124 -124
- package/dist/docs/components/popover.md +37 -53
- package/dist/docs/components/position.md +4 -4
- package/dist/docs/components/radialBarCharts.md +506 -506
- package/dist/docs/components/radiobutton.md +209 -191
- package/dist/docs/components/releaseNotes.md +9 -3
- package/dist/docs/components/resizer.md +7 -8
- package/dist/docs/components/responsiveColumnStripe.md +11 -11
- package/dist/docs/components/responsiveVideo.md +5 -5
- package/dist/docs/components/rioglyph.md +11 -11
- package/dist/docs/components/rules.md +118 -92
- package/dist/docs/components/saveableInput.md +366 -356
- package/dist/docs/components/selects.md +9996 -15
- package/dist/docs/components/sidebar.md +22 -23
- package/dist/docs/components/sliders.md +26 -26
- package/dist/docs/components/smoothScrollbars.md +61 -25
- package/dist/docs/components/spinners.md +32 -30
- package/dist/docs/components/states.md +236 -245
- package/dist/docs/components/statsWidgets.md +37 -28
- package/dist/docs/components/statusBar.md +22 -22
- package/dist/docs/components/stepButton.md +2 -2
- package/dist/docs/components/steppedProgressBars.md +45 -45
- package/dist/docs/components/subNavigation.md +3 -3
- package/dist/docs/components/supportMarker.md +1 -1
- package/dist/docs/components/svgImage.md +2 -38
- package/dist/docs/components/switch.md +11 -11
- package/dist/docs/components/tables.md +1 -1
- package/dist/docs/components/tagManager.md +40 -40
- package/dist/docs/components/tags.md +21 -20
- package/dist/docs/components/teaser.md +22 -23
- package/dist/docs/components/timeline.md +1 -1
- package/dist/docs/components/timepicker.md +17 -13
- package/dist/docs/components/toggleButton.md +65 -29
- package/dist/docs/components/tooltip.md +27 -50
- package/dist/docs/components/virtualList.md +75 -75
- package/dist/docs/foundations.md +167 -167
- package/dist/docs/start/changelog.md +23 -1
- 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 +80 -27
- 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 +81 -81
- 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 +9 -9
- package/dist/docs/start/intro.md +1 -1
- package/dist/docs/start/responsiveness.md +1 -1
- package/dist/docs/templates/common-table.md +11 -11
- 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 +55 -55
- package/dist/docs/templates/form-summary.md +22 -22
- package/dist/docs/templates/form-toggle.md +1 -1
- package/dist/docs/templates/list-blocks.md +197 -197
- 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 +23 -23
- package/dist/docs/templates/stats-blocks.md +41 -41
- package/dist/docs/templates/table-panel.md +1 -1
- package/dist/docs/templates/table-row-animation.md +1 -1
- package/dist/docs/templates/usage-cards.md +1 -1
- package/dist/docs/utilities/deviceUtils.md +6 -3
- package/dist/docs/utilities/featureToggles.md +1 -1
- package/dist/docs/utilities/fuelTypeUtils.md +1 -1
- package/dist/docs/utilities/routeUtils.md +59 -23
- 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/useCount.md +1 -1
- package/dist/docs/utilities/useDarkMode.md +1 -1
- package/dist/docs/utilities/useDebugInfo.md +4 -4
- 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 +7 -5
- 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 +58 -2
- 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/useScrollPosition.md +1 -1
- package/dist/docs/utilities/useSearch.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 +54 -54
- package/dist/docs/utilities/useTableSelection.md +93 -93
- package/dist/docs/utilities/useTimeout.md +1 -1
- package/dist/docs/utilities/useToggle.md +1 -1
- package/dist/docs/utilities/useWindowResize.md +1 -1
- package/dist/index.mjs +8 -8
- package/dist/version.json +2 -2
- package/package.json +6 -6
|
@@ -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-02-03T14:05:50.407Z
|
|
7
7
|
|
|
8
8
|
Set of utility functions which helps parsing and stringify state into and from the URL.
|
|
9
9
|
|
|
@@ -15,13 +15,9 @@ Example: http:/my-url/#demoService/table?sort=+userNickName&columns=itemId,userI
|
|
|
15
15
|
|
|
16
16
|
### Example: Example 1
|
|
17
17
|
|
|
18
|
-
// Note: this sample uses the "qs" library to parse and stringify data
|
|
19
|
-
|
|
20
18
|
import qs from 'qs';
|
|
21
19
|
import { get } from 'es-toolkit/compat';
|
|
22
20
|
|
|
23
|
-
import { tableConfig, BASE_PATH } from './yourTableConfig';
|
|
24
|
-
|
|
25
21
|
import {
|
|
26
22
|
parseColumnsSettingsStrings,
|
|
27
23
|
mapColumnsSettingsToStrings,
|
|
@@ -30,10 +26,19 @@ parseSorting,
|
|
|
30
26
|
type ColumnsSettings,
|
|
31
27
|
} from '@rio-cloud/rio-uikit/routeUtils';
|
|
32
28
|
|
|
29
|
+
// Adapt to your configuration
|
|
30
|
+
const BASE_PATH = 'my-service';
|
|
31
|
+
const defaultColumnsDetails: Record<string, { width: number; defaultWidth?: number }> = {
|
|
32
|
+
name: {
|
|
33
|
+
width: 250,
|
|
34
|
+
defaultWidth: 250,
|
|
35
|
+
},
|
|
36
|
+
};
|
|
37
|
+
|
|
33
38
|
// Options for the "qs" library
|
|
34
39
|
const OPTIONS = {
|
|
35
40
|
comma: true, // required to parse comma separated string into array
|
|
36
|
-
arrayFormat: 'comma', // required to stringify arrays into comma separated strings
|
|
41
|
+
arrayFormat: 'comma' as const, // required to stringify arrays into comma separated strings
|
|
37
42
|
indices: false, // don't use array indices
|
|
38
43
|
encode: false, // don't encode the entire string as it will be done individually for certain params
|
|
39
44
|
decode: false,
|
|
@@ -43,18 +48,31 @@ skipNulls: true, // required to remove empty params
|
|
|
43
48
|
// Sample code for parsing the route just for illustration how to use the utils functions
|
|
44
49
|
// Feel free to modify this to your needs.
|
|
45
50
|
// Note: the "parseRoute" and "makeRoute" functions may contain more props which are left out in this demo
|
|
46
|
-
|
|
51
|
+
type RouterLike = { location?: Location };
|
|
52
|
+
|
|
53
|
+
export const parseRoute = (router: RouterLike) => {
|
|
47
54
|
const location = get(router, 'location', {}) as Location;
|
|
48
55
|
const searchParams = location.search ? location.search.replace('?', '') : location.search;
|
|
49
56
|
|
|
50
|
-
const { sort, columns } = qs.parse(searchParams, OPTIONS)
|
|
57
|
+
const { sort, columns } = qs.parse(searchParams, OPTIONS) as {
|
|
58
|
+
sort?: string;
|
|
59
|
+
columns?: string[] | Record<string, string>;
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
const sorting = sort ? parseSorting(sort) : undefined;
|
|
51
63
|
|
|
52
|
-
const
|
|
64
|
+
const sortBy = sorting && typeof sorting !== 'string' ? sorting.sortBy : undefined;
|
|
65
|
+
const sortDir = sorting && typeof sorting !== 'string' ? sorting.sortDir : undefined;
|
|
53
66
|
|
|
54
67
|
return {
|
|
55
|
-
sortBy
|
|
56
|
-
sortDir
|
|
57
|
-
columns:
|
|
68
|
+
sortBy,
|
|
69
|
+
sortDir,
|
|
70
|
+
columns:
|
|
71
|
+
columns &&
|
|
72
|
+
parseColumnsSettingsStrings(
|
|
73
|
+
Array.isArray(columns) ? columns : Object.values(columns || {}),
|
|
74
|
+
defaultColumnsDetails
|
|
75
|
+
),
|
|
58
76
|
};
|
|
59
77
|
};
|
|
60
78
|
|
|
@@ -77,13 +95,9 @@ return `${BASE_PATH}/${searchFragment}`;
|
|
|
77
95
|
|
|
78
96
|
#### Summary
|
|
79
97
|
|
|
80
|
-
// Note: this sample uses the "qs" library to parse and stringify data
|
|
81
|
-
|
|
82
98
|
import qs from 'qs';
|
|
83
99
|
import { get } from 'es-toolkit/compat';
|
|
84
100
|
|
|
85
|
-
import { tableConfig, BASE_PATH } from './yourTableConfig';
|
|
86
|
-
|
|
87
101
|
import {
|
|
88
102
|
parseColumnsSettingsStrings,
|
|
89
103
|
mapColumnsSettingsToStrings,
|
|
@@ -92,10 +106,19 @@ parseSorting,
|
|
|
92
106
|
type ColumnsSettings,
|
|
93
107
|
} from '@rio-cloud/rio-uikit/routeUtils';
|
|
94
108
|
|
|
109
|
+
// Adapt to your configuration
|
|
110
|
+
const BASE_PATH = 'my-service';
|
|
111
|
+
const defaultColumnsDetails: Record<string, { width: number; defaultWidth?: number }> = {
|
|
112
|
+
name: {
|
|
113
|
+
width: 250,
|
|
114
|
+
defaultWidth: 250,
|
|
115
|
+
},
|
|
116
|
+
};
|
|
117
|
+
|
|
95
118
|
// Options for the "qs" library
|
|
96
119
|
const OPTIONS = {
|
|
97
120
|
comma: true, // required to parse comma separated string into array
|
|
98
|
-
arrayFormat: 'comma', // required to stringify arrays into comma separated strings
|
|
121
|
+
arrayFormat: 'comma' as const, // required to stringify arrays into comma separated strings
|
|
99
122
|
indices: false, // don't use array indices
|
|
100
123
|
encode: false, // don't encode the entire string as it will be done individually for certain params
|
|
101
124
|
decode: false,
|
|
@@ -105,18 +128,31 @@ skipNulls: true, // required to remove empty params
|
|
|
105
128
|
// Sample code for parsing the route just for illustration how to use the utils functions
|
|
106
129
|
// Feel free to modify this to your needs.
|
|
107
130
|
// Note: the "parseRoute" and "makeRoute" functions may contain more props which are left out in this demo
|
|
108
|
-
|
|
131
|
+
type RouterLike = { location?: Location };
|
|
132
|
+
|
|
133
|
+
export const parseRoute = (router: RouterLike) => {
|
|
109
134
|
const location = get(router, 'location', {}) as Location;
|
|
110
135
|
const searchParams = location.search ? location.search.replace('?', '') : location.search;
|
|
111
136
|
|
|
112
|
-
const { sort, columns } = qs.parse(searchParams, OPTIONS)
|
|
137
|
+
const { sort, columns } = qs.parse(searchParams, OPTIONS) as {
|
|
138
|
+
sort?: string;
|
|
139
|
+
columns?: string[] | Record<string, string>;
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
const sorting = sort ? parseSorting(sort) : undefined;
|
|
113
143
|
|
|
114
|
-
const
|
|
144
|
+
const sortBy = sorting && typeof sorting !== 'string' ? sorting.sortBy : undefined;
|
|
145
|
+
const sortDir = sorting && typeof sorting !== 'string' ? sorting.sortDir : undefined;
|
|
115
146
|
|
|
116
147
|
return {
|
|
117
|
-
sortBy
|
|
118
|
-
sortDir
|
|
119
|
-
columns:
|
|
148
|
+
sortBy,
|
|
149
|
+
sortDir,
|
|
150
|
+
columns:
|
|
151
|
+
columns &&
|
|
152
|
+
parseColumnsSettingsStrings(
|
|
153
|
+
Array.isArray(columns) ? columns : Object.values(columns || {}),
|
|
154
|
+
defaultColumnsDetails
|
|
155
|
+
),
|
|
120
156
|
};
|
|
121
157
|
};
|
|
122
158
|
|
|
@@ -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-02-03T14:05:51.815Z
|
|
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-02-03T14:05:53.870Z
|
|
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-02-03T14:06:05.379Z
|
|
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-02-03T14:05:54.888Z
|
|
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-02-03T14:06:00.211Z
|
|
7
7
|
|
|
8
8
|
The useClipboard hook allows to easily copy something to the browsers clipboard.
|
|
9
9
|
|
|
@@ -75,7 +75,7 @@ export default () => {
|
|
|
75
75
|
<span>Random UUID</span>
|
|
76
76
|
</label>
|
|
77
77
|
<div class="input-group">
|
|
78
|
-
<input id="random-uuid" class="form-control" type="text" value="
|
|
78
|
+
<input id="random-uuid" class="form-control" type="text" value="c5f27ecf-caa0-4313-975f-dbb8e329a7a1">
|
|
79
79
|
<div class="input-group-addon">
|
|
80
80
|
<button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component position-absolute top-1 right-1" tabindex="0">
|
|
81
81
|
<span class="rioglyph rioglyph-duplicate">
|
|
@@ -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-02-03T14:06:05.880Z
|
|
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-02-03T14:06:01.482Z
|
|
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-02-03T14:06:03.880Z
|
|
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": 1770127563175
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
ToggleIncrement
|
|
@@ -32,7 +32,7 @@ Debug Info:{
|
|
|
32
32
|
"renderCount": 1,
|
|
33
33
|
"changedProps": {},
|
|
34
34
|
"timeSinceLastRender": 0,
|
|
35
|
-
"lastRenderTimestamp":
|
|
35
|
+
"lastRenderTimestamp": 1770127563175
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
ToggleIncrement
|
|
@@ -107,7 +107,7 @@ export default () => {
|
|
|
107
107
|
"renderCount": 1,
|
|
108
108
|
"changedProps": {},
|
|
109
109
|
"timeSinceLastRender": 0,
|
|
110
|
-
"lastRenderTimestamp":
|
|
110
|
+
"lastRenderTimestamp": 1770127563175
|
|
111
111
|
}</pre>
|
|
112
112
|
</div>
|
|
113
113
|
</div>
|
|
@@ -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-02-03T14:05:52.211Z
|
|
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-02-03T14:05:55.543Z
|
|
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-02-03T14:05:55.805Z
|
|
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-02-03T14:06:03.660Z
|
|
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-02-03T14:05:55.819Z
|
|
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-02-03T14:05:57.250Z
|
|
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-02-03T14:06:01.555Z
|
|
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-02-03T14:05:52.454Z
|
|
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-02-03T14:05:57.379Z
|
|
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-02-03T14:05:57.497Z
|
|
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
|
|
|
@@ -48,7 +48,7 @@ const Usage1 = () => {
|
|
|
48
48
|
const [pressedKey, setPressedKey] = useState(' ');
|
|
49
49
|
|
|
50
50
|
// Use the useKey hook to listen for any key presses
|
|
51
|
-
useKey(event => {
|
|
51
|
+
useKey((event: KeyboardEvent) => {
|
|
52
52
|
console.log(event);
|
|
53
53
|
event.key === ' ' ? setPressedKey(event.code) : setPressedKey(event.key);
|
|
54
54
|
});
|
|
@@ -67,7 +67,7 @@ const Usage2 = () => {
|
|
|
67
67
|
|
|
68
68
|
// Use the useKey hook to listen for any key presses with optional event types
|
|
69
69
|
useKey(
|
|
70
|
-
event => {
|
|
70
|
+
(event: KeyboardEvent) => {
|
|
71
71
|
if (event.shiftKey) {
|
|
72
72
|
setPressedKey(`Shift + ${event.key}`);
|
|
73
73
|
} else if (event.metaKey) {
|
|
@@ -94,7 +94,7 @@ const Usage3 = () => {
|
|
|
94
94
|
const [pressedKey, setPressedKey] = useState(' ');
|
|
95
95
|
|
|
96
96
|
// Use the useKey hook to listen for the Enter key press
|
|
97
|
-
useKey('Enter',
|
|
97
|
+
useKey('Enter', (_event: KeyboardEvent) => {
|
|
98
98
|
console.log('Enter key pressed');
|
|
99
99
|
setPressedKey('Enter');
|
|
100
100
|
});
|
|
@@ -108,7 +108,7 @@ const Usage3 = () => {
|
|
|
108
108
|
);
|
|
109
109
|
};
|
|
110
110
|
|
|
111
|
-
|
|
111
|
+
const UseKeyExample = () => {
|
|
112
112
|
return (
|
|
113
113
|
<div className='display-flex flex-column justify-content-center align-items-center'>
|
|
114
114
|
<Usage1 />
|
|
@@ -117,6 +117,8 @@ export default () => {
|
|
|
117
117
|
</div>
|
|
118
118
|
);
|
|
119
119
|
};
|
|
120
|
+
|
|
121
|
+
export default UseKeyExample;
|
|
120
122
|
```
|
|
121
123
|
|
|
122
124
|
#### HTML (html)
|
|
@@ -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-02-03T14:06:01.735Z
|
|
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-02-03T14:06:04.364Z
|
|
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-02-03T14:06:06.452Z
|
|
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-02-03T14:06:07.196Z
|
|
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-02-03T14:05:58.598Z
|
|
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-02-03T14:05:58.896Z
|
|
7
7
|
|
|
8
8
|
The useOnScreen hook tells you when an element is visible on screen.
|
|
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/useOnlineStatus
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-02-03T14:06:01.743Z
|
|
7
7
|
|
|
8
8
|
The useOnlineStatus hook tells you when there is a network connection or not.
|
|
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/usePostMessage
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-02-03T14:06:02.821Z
|
|
7
7
|
|
|
8
8
|
The usePostMessage hook allows to easily exchange events and data between the parent window and embedded iframes.
|
|
9
9
|
|
|
@@ -23,6 +23,62 @@ Parent window
|
|
|
23
23
|
Send message to widget iframe
|
|
24
24
|
Message from widget:-
|
|
25
25
|
|
|
26
|
+
#### React (tsx)
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import { useState } from 'react';
|
|
30
|
+
import IframeResizer from 'iframe-resizer-react';
|
|
31
|
+
|
|
32
|
+
import Button from '@rio-cloud/rio-uikit/Button';
|
|
33
|
+
import usePostMessage, { type RemoteAction } from '@rio-cloud/rio-uikit/usePostMessage';
|
|
34
|
+
|
|
35
|
+
const PREFIX = 'EVENT';
|
|
36
|
+
const EVENT_TYPE = `${PREFIX}_POST_MESSAGE_EXAMPLE`;
|
|
37
|
+
|
|
38
|
+
export default () => {
|
|
39
|
+
const [messageFromWidget, setMessageFromWidget] = useState('-');
|
|
40
|
+
|
|
41
|
+
const { sendMessageToWidget } = usePostMessage(PREFIX, (remoteAction: RemoteAction) => {
|
|
42
|
+
if (remoteAction.type === EVENT_TYPE) {
|
|
43
|
+
setMessageFromWidget(remoteAction.payload);
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
const handleSentToWidget = () => {
|
|
48
|
+
sendMessageToWidget(
|
|
49
|
+
{
|
|
50
|
+
type: EVENT_TYPE,
|
|
51
|
+
payload: 'Hello from the parent',
|
|
52
|
+
},
|
|
53
|
+
document.getElementById('postMessageExample') as HTMLIFrameElement
|
|
54
|
+
);
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
return (
|
|
58
|
+
<div className='display-flex gap-25'>
|
|
59
|
+
<div className='border rounded padding-20 height-200'>
|
|
60
|
+
<div className='text-medium'>Parent window</div>
|
|
61
|
+
<div className='btn-toolbar margin-top-20'>
|
|
62
|
+
<Button onClick={handleSentToWidget}>Send message to widget iframe</Button>
|
|
63
|
+
</div>
|
|
64
|
+
<div className='margin-top-20'>
|
|
65
|
+
<label>Message from widget:</label>
|
|
66
|
+
<div>{messageFromWidget}</div>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
<div className='iframe-wrapper'>
|
|
70
|
+
<IframeResizer
|
|
71
|
+
id='postMessageExample'
|
|
72
|
+
src='/#postMessageExample'
|
|
73
|
+
className='unstyled width-100pct'
|
|
74
|
+
style={{ width: '1px', minWidth: '100%' }}
|
|
75
|
+
/>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
);
|
|
79
|
+
};
|
|
80
|
+
```
|
|
81
|
+
|
|
26
82
|
#### HTML (html)
|
|
27
83
|
|
|
28
84
|
```html
|
|
@@ -38,7 +94,7 @@ Message from widget:-
|
|
|
38
94
|
</div>
|
|
39
95
|
</div>
|
|
40
96
|
<div class="iframe-wrapper">
|
|
41
|
-
<iframe title="iframe" id="postMessageExample" src="/#postMessageExample" class="unstyled width-100pct" style="width: 1px; min-width: 100%; overflow: hidden; height:
|
|
97
|
+
<iframe title="iframe" id="postMessageExample" src="/#postMessageExample" class="unstyled width-100pct" style="width: 1px; min-width: 100%; overflow: hidden; height: 150px;" scrolling="no">
|
|
42
98
|
</iframe>
|
|
43
99
|
</div>
|
|
44
100
|
</div>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#utilities/usePostMessageSender
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-02-03T14:06:03.148Z
|
|
7
7
|
|
|
8
8
|
Helper hook to fire postMessage events to other windows: a specific target (including yourself), the parent or top window, or every iframe on the page. It uses the wildcard target origin (*) and no-ops when a target window is missing, so it is safe to call even when an iframe or parent is not present.
|
|
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/usePrevious
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-02-03T14:05:53.505Z
|
|
7
7
|
|
|
8
8
|
The usePrevious hook allows to easily access state from previous component render. Instead of using a React.ref and a useEffect, this hook uses a useState internally to keep track of the previous state value.
|
|
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/useResizeObserver
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-02-03T14:05:59.919Z
|
|
7
7
|
|
|
8
8
|
The useResizeObserver hook allows to react on resize changes of a given element.
|
|
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/useScrollPosition
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-02-03T14:05:59.957Z
|
|
7
7
|
|
|
8
8
|
The useScrollPosition hook allows to react on a desired scroll position of a given target. Use it when showing or hiding content based on the scroll position.
|
|
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/useSearch
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-02-03T14:06:05.279Z
|
|
7
7
|
|
|
8
8
|
The useSearch hook is a custom hook to filter a list of objects by a search value. Supports field-based filtering, custom filtering logic, debounce, and case sensitivity.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Table & data hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#utilities/useSorting
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-02-03T14:06:08.237Z
|
|
7
7
|
|
|
8
8
|
The useSorting hook provides an easy way to sort any list by a specified key using natural sort order. It offers flexible control over sorting direction and key selection, making it ideal for dynamic sorting use cases.
|
|
9
9
|
|