@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.
Files changed (191) hide show
  1. package/README.md +1 -0
  2. package/dist/doc-metadata.json +97 -97
  3. package/dist/docs/components/accentBar.md +5 -5
  4. package/dist/docs/components/activity.md +7 -7
  5. package/dist/docs/components/animatedNumber.md +10 -10
  6. package/dist/docs/components/animatedTextReveal.md +42 -43
  7. package/dist/docs/components/animations.md +42 -34
  8. package/dist/docs/components/appHeader.md +20 -35
  9. package/dist/docs/components/appLayout.md +198 -221
  10. package/dist/docs/components/appNavigationBar.md +21 -21
  11. package/dist/docs/components/areaCharts.md +38 -38
  12. package/dist/docs/components/aspectRatioPlaceholder.md +4 -5
  13. package/dist/docs/components/assetTree.md +887 -614
  14. package/dist/docs/components/autosuggests.md +4 -4
  15. package/dist/docs/components/avatar.md +7 -7
  16. package/dist/docs/components/banner.md +2 -2
  17. package/dist/docs/components/barCharts.md +173 -173
  18. package/dist/docs/components/barList.md +19 -41
  19. package/dist/docs/components/basicMap.md +1 -1
  20. package/dist/docs/components/bottomSheet.md +74 -74
  21. package/dist/docs/components/button.md +161 -71
  22. package/dist/docs/components/buttonToolbar.md +3 -3
  23. package/dist/docs/components/calendarStripe.md +71 -123
  24. package/dist/docs/components/card.md +4 -4
  25. package/dist/docs/components/carousel.md +1 -1
  26. package/dist/docs/components/chartColors.md +1 -1
  27. package/dist/docs/components/chartsGettingStarted.md +1 -1
  28. package/dist/docs/components/chat.md +2 -2
  29. package/dist/docs/components/checkbox.md +56 -131
  30. package/dist/docs/components/clearableInput.md +23 -127
  31. package/dist/docs/components/collapse.md +14 -16
  32. package/dist/docs/components/composedCharts.md +31 -31
  33. package/dist/docs/components/contentLoader.md +125 -122
  34. package/dist/docs/components/dataTabs.md +103 -93
  35. package/dist/docs/components/datepickers.md +734 -764
  36. package/dist/docs/components/dialogs.md +299 -186
  37. package/dist/docs/components/divider.md +4 -4
  38. package/dist/docs/components/dropdowns.md +4555 -4498
  39. package/dist/docs/components/editableContent.md +97 -97
  40. package/dist/docs/components/expander.md +56 -56
  41. package/dist/docs/components/fade.md +41 -41
  42. package/dist/docs/components/fadeExpander.md +4 -4
  43. package/dist/docs/components/fadeUp.md +8 -10
  44. package/dist/docs/components/feedback.md +22 -21
  45. package/dist/docs/components/filePickers.md +25 -25
  46. package/dist/docs/components/formLabel.md +5 -7
  47. package/dist/docs/components/groupedItemList.md +37 -37
  48. package/dist/docs/components/iconList.md +4 -4
  49. package/dist/docs/components/imagePreloader.md +6 -6
  50. package/dist/docs/components/labeledElement.md +4 -3
  51. package/dist/docs/components/licensePlate.md +2 -2
  52. package/dist/docs/components/lineCharts.md +58 -58
  53. package/dist/docs/components/listMenu.md +63 -41
  54. package/dist/docs/components/loadMore.md +17 -17
  55. package/dist/docs/components/mainNavigation.md +1 -1
  56. package/dist/docs/components/mapCircle.md +1 -1
  57. package/dist/docs/components/mapCluster.md +1 -1
  58. package/dist/docs/components/mapContext.md +1 -1
  59. package/dist/docs/components/mapDraggableMarker.md +1 -1
  60. package/dist/docs/components/mapGettingStarted.md +1 -1
  61. package/dist/docs/components/mapInfoBubble.md +1 -1
  62. package/dist/docs/components/mapLayerGroup.md +1 -1
  63. package/dist/docs/components/mapMarker.md +339 -345
  64. package/dist/docs/components/mapPolygon.md +16 -20
  65. package/dist/docs/components/mapRoute.md +14 -20
  66. package/dist/docs/components/mapRouteGenerator.md +1 -1
  67. package/dist/docs/components/mapSettings.md +263 -274
  68. package/dist/docs/components/mapUtils.md +3 -5
  69. package/dist/docs/components/multiselects.md +1 -1
  70. package/dist/docs/components/noData.md +11 -11
  71. package/dist/docs/components/notifications.md +1 -1
  72. package/dist/docs/components/numbercontrol.md +39 -37
  73. package/dist/docs/components/onboarding.md +18 -38
  74. package/dist/docs/components/page.md +16 -16
  75. package/dist/docs/components/pager.md +8 -8
  76. package/dist/docs/components/pieCharts.md +124 -124
  77. package/dist/docs/components/popover.md +37 -53
  78. package/dist/docs/components/position.md +4 -4
  79. package/dist/docs/components/radialBarCharts.md +506 -506
  80. package/dist/docs/components/radiobutton.md +209 -191
  81. package/dist/docs/components/releaseNotes.md +9 -3
  82. package/dist/docs/components/resizer.md +7 -8
  83. package/dist/docs/components/responsiveColumnStripe.md +11 -11
  84. package/dist/docs/components/responsiveVideo.md +5 -5
  85. package/dist/docs/components/rioglyph.md +11 -11
  86. package/dist/docs/components/rules.md +118 -92
  87. package/dist/docs/components/saveableInput.md +366 -356
  88. package/dist/docs/components/selects.md +9996 -15
  89. package/dist/docs/components/sidebar.md +22 -23
  90. package/dist/docs/components/sliders.md +26 -26
  91. package/dist/docs/components/smoothScrollbars.md +61 -25
  92. package/dist/docs/components/spinners.md +32 -30
  93. package/dist/docs/components/states.md +236 -245
  94. package/dist/docs/components/statsWidgets.md +37 -28
  95. package/dist/docs/components/statusBar.md +22 -22
  96. package/dist/docs/components/stepButton.md +2 -2
  97. package/dist/docs/components/steppedProgressBars.md +45 -45
  98. package/dist/docs/components/subNavigation.md +3 -3
  99. package/dist/docs/components/supportMarker.md +1 -1
  100. package/dist/docs/components/svgImage.md +2 -38
  101. package/dist/docs/components/switch.md +11 -11
  102. package/dist/docs/components/tables.md +1 -1
  103. package/dist/docs/components/tagManager.md +40 -40
  104. package/dist/docs/components/tags.md +21 -20
  105. package/dist/docs/components/teaser.md +22 -23
  106. package/dist/docs/components/timeline.md +1 -1
  107. package/dist/docs/components/timepicker.md +17 -13
  108. package/dist/docs/components/toggleButton.md +65 -29
  109. package/dist/docs/components/tooltip.md +27 -50
  110. package/dist/docs/components/virtualList.md +75 -75
  111. package/dist/docs/foundations.md +167 -167
  112. package/dist/docs/start/changelog.md +23 -1
  113. package/dist/docs/start/goodtoknow.md +1 -1
  114. package/dist/docs/start/guidelines/color-combinations.md +1 -1
  115. package/dist/docs/start/guidelines/custom-css.md +1 -1
  116. package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
  117. package/dist/docs/start/guidelines/formatting.md +1 -1
  118. package/dist/docs/start/guidelines/iframe.md +80 -27
  119. package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
  120. package/dist/docs/start/guidelines/print-css.md +1 -1
  121. package/dist/docs/start/guidelines/spinner.md +81 -81
  122. package/dist/docs/start/guidelines/supported-browsers.md +1 -1
  123. package/dist/docs/start/guidelines/writing.md +1 -1
  124. package/dist/docs/start/howto.md +9 -9
  125. package/dist/docs/start/intro.md +1 -1
  126. package/dist/docs/start/responsiveness.md +1 -1
  127. package/dist/docs/templates/common-table.md +11 -11
  128. package/dist/docs/templates/detail-views.md +2 -2
  129. package/dist/docs/templates/expandable-details.md +1 -1
  130. package/dist/docs/templates/feature-cards.md +55 -55
  131. package/dist/docs/templates/form-summary.md +22 -22
  132. package/dist/docs/templates/form-toggle.md +1 -1
  133. package/dist/docs/templates/list-blocks.md +197 -197
  134. package/dist/docs/templates/loading-progress.md +1 -1
  135. package/dist/docs/templates/options-panel.md +1 -1
  136. package/dist/docs/templates/panel-variants.md +1 -1
  137. package/dist/docs/templates/progress-cards.md +1 -1
  138. package/dist/docs/templates/progress-success.md +1 -1
  139. package/dist/docs/templates/settings-form.md +23 -23
  140. package/dist/docs/templates/stats-blocks.md +41 -41
  141. package/dist/docs/templates/table-panel.md +1 -1
  142. package/dist/docs/templates/table-row-animation.md +1 -1
  143. package/dist/docs/templates/usage-cards.md +1 -1
  144. package/dist/docs/utilities/deviceUtils.md +6 -3
  145. package/dist/docs/utilities/featureToggles.md +1 -1
  146. package/dist/docs/utilities/fuelTypeUtils.md +1 -1
  147. package/dist/docs/utilities/routeUtils.md +59 -23
  148. package/dist/docs/utilities/useAfterMount.md +1 -1
  149. package/dist/docs/utilities/useAutoAnimate.md +1 -1
  150. package/dist/docs/utilities/useAverage.md +1 -1
  151. package/dist/docs/utilities/useClickOutside.md +1 -1
  152. package/dist/docs/utilities/useClipboard.md +2 -2
  153. package/dist/docs/utilities/useCount.md +1 -1
  154. package/dist/docs/utilities/useDarkMode.md +1 -1
  155. package/dist/docs/utilities/useDebugInfo.md +4 -4
  156. package/dist/docs/utilities/useEffectOnce.md +1 -1
  157. package/dist/docs/utilities/useElapsedTime.md +1 -1
  158. package/dist/docs/utilities/useElementSize.md +1 -1
  159. package/dist/docs/utilities/useEsc.md +1 -1
  160. package/dist/docs/utilities/useEvent.md +1 -1
  161. package/dist/docs/utilities/useFocusTrap.md +1 -1
  162. package/dist/docs/utilities/useFullscreen.md +1 -1
  163. package/dist/docs/utilities/useHover.md +1 -1
  164. package/dist/docs/utilities/useIncomingPostMessages.md +1 -1
  165. package/dist/docs/utilities/useInterval.md +1 -1
  166. package/dist/docs/utilities/useIsFocusWithin.md +1 -1
  167. package/dist/docs/utilities/useKey.md +7 -5
  168. package/dist/docs/utilities/useLocalStorage.md +1 -1
  169. package/dist/docs/utilities/useLocationSuggestions.md +1 -1
  170. package/dist/docs/utilities/useMax.md +1 -1
  171. package/dist/docs/utilities/useMin.md +1 -1
  172. package/dist/docs/utilities/useMutationObserver.md +1 -1
  173. package/dist/docs/utilities/useOnScreen.md +1 -1
  174. package/dist/docs/utilities/useOnlineStatus.md +1 -1
  175. package/dist/docs/utilities/usePostMessage.md +58 -2
  176. package/dist/docs/utilities/usePostMessageSender.md +1 -1
  177. package/dist/docs/utilities/usePrevious.md +1 -1
  178. package/dist/docs/utilities/useResizeObserver.md +1 -1
  179. package/dist/docs/utilities/useScrollPosition.md +1 -1
  180. package/dist/docs/utilities/useSearch.md +1 -1
  181. package/dist/docs/utilities/useSorting.md +1 -1
  182. package/dist/docs/utilities/useStateWithValidation.md +1 -1
  183. package/dist/docs/utilities/useSum.md +1 -1
  184. package/dist/docs/utilities/useTableExport.md +54 -54
  185. package/dist/docs/utilities/useTableSelection.md +93 -93
  186. package/dist/docs/utilities/useTimeout.md +1 -1
  187. package/dist/docs/utilities/useToggle.md +1 -1
  188. package/dist/docs/utilities/useWindowResize.md +1 -1
  189. package/dist/index.mjs +8 -8
  190. package/dist/version.json +2 -2
  191. 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-01-07T12:12:37.160Z
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
- export const parseRoute = (router: any) => {
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 sorting = sort && parseSorting(sort);
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: sorting?.sortBy,
56
- sortDir: sorting?.sortDir,
57
- columns: columns && parseColumnsSettingsStrings(columns, tableConfig.defaultColumnsDetails),
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
- export const parseRoute = (router: any) => {
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 sorting = sort && parseSorting(sort);
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: sorting?.sortBy,
118
- sortDir: sorting?.sortDir,
119
- columns: columns && parseColumnsSettingsStrings(columns, tableConfig.defaultColumnsDetails),
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-01-07T12:12:38.093Z
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-01-07T12:12:40.145Z
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-01-07T12:12:49.438Z
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-01-07T12:12:40.724Z
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-01-07T12:12:45.545Z
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="dae809e8-beae-4c0b-aff9-6ca872232eb2">
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-01-07T12:12:50.121Z
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-01-07T12:12:46.272Z
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-01-07T12:12:47.951Z
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": 1767787967247
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": 1767787967247
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": 1767787967247
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-01-07T12:12:38.463Z
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:* Lifecycle & execution hooks
5
5
  *Source:* https://uikit.developers.rio.cloud/#utilities/useElapsedTime
6
- *Captured:* 2026-01-07T12:12:38.546Z
6
+ *Captured:* 2026-02-03T14:05:52.346Z
7
7
 
8
8
  ## useElapsedTime
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-01-07T12:12:41.173Z
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-01-07T12:12:41.283Z
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-01-07T12:12:48.128Z
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-01-07T12:12:41.539Z
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-01-07T12:12:42.945Z
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:* DOM behavior hooks
5
5
  *Source:* https://uikit.developers.rio.cloud/#utilities/useHover
6
- *Captured:* 2026-01-07T12:12:42.594Z
6
+ *Captured:* 2026-02-03T14:05:57.877Z
7
7
 
8
8
  ## useHover
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-01-07T12:12:46.109Z
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-01-07T12:12:38.820Z
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-01-07T12:12:42.814Z
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-01-07T12:12:42.920Z
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', event => {
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
- export default () => {
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-01-07T12:12:46.654Z
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-01-07T12:12:48.816Z
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-01-07T12:12:50.621Z
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-01-07T12:12:50.771Z
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-01-07T12:12:43.945Z
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-01-07T12:12:44.194Z
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-01-07T12:12:46.834Z
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-01-07T12:12:47.464Z
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: 200px;" scrolling="no">
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-01-07T12:12:47.612Z
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-01-07T12:12:39.413Z
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-01-07T12:12:44.964Z
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-01-07T12:12:45.034Z
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-01-07T12:12:49.668Z
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-01-07T12:12:52.170Z
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