@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

package/dist/docs/utilities/useElementSize.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* DOM behavior hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useElementSize
-*Captured:* 2026-03-06T10:41:38.089Z
+*Captured:* 2026-04-27T14:59:33.593Z
 
 The useElementSize hook allows to easily detect an elements dimension.
 

package/dist/docs/utilities/useEsc.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* DOM behavior hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useEsc
-*Captured:* 2026-03-06T10:41:39.113Z
+*Captured:* 2026-04-27T14:59:34.674Z
 
 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.
 

package/dist/docs/utilities/useEvent.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* UI state & input hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useEvent
-*Captured:* 2026-03-06T10:41:51.160Z
+*Captured:* 2026-04-27T14:59:43.176Z
 
 The useEvent hook allows to easily detect given events registered on the document.
 

package/dist/docs/utilities/useFocusTrap.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* DOM behavior hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useFocusTrap
-*Captured:* 2026-03-06T10:41:39.661Z
+*Captured:* 2026-04-27T14:59:34.932Z
 
 This custom hook allows to keep the focus inside a defined wrapper element. This might be a dialog or a custom overlay.
 

package/dist/docs/utilities/useFullscreen.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* DOM behavior hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useFullscreen
-*Captured:* 2026-03-06T10:41:43.215Z
+*Captured:* 2026-04-27T14:59:35.793Z
 
 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.
 

package/dist/docs/utilities/useHover.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* DOM behavior hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useHover
-*Captured:* 2026-03-06T10:41:40.955Z
+*Captured:* 2026-04-27T14:59:35.844Z
 
 ## useHover
 

package/dist/docs/utilities/useIncomingPostMessages.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* Browser & device hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useIncomingPostMessages
-*Captured:* 2026-03-06T10:41:47.230Z
+*Captured:* 2026-04-27T14:59:39.988Z
 
 For handling postMessage events in React components.
 

package/dist/docs/utilities/useInterval.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* Lifecycle & execution hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useInterval
-*Captured:* 2026-03-06T10:41:35.430Z
+*Captured:* 2026-04-27T14:59:31.082Z
 
 The useInterval hook allows for executing some code after a specified amount of time.
 

package/dist/docs/utilities/useIsFocusWithin.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* DOM behavior hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useIsFocusWithin
-*Captured:* 2026-03-06T10:41:40.739Z
+*Captured:* 2026-04-27T14:59:36.144Z
 
 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.
 

package/dist/docs/utilities/useKey.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* DOM behavior hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useKey
-*Captured:* 2026-03-06T10:41:41.456Z
+*Captured:* 2026-04-27T14:59:36.468Z
 
 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.
 
@@ -94,15 +94,13 @@ const Usage3 = () => {
     );
 };
 
-const UseKeyExample = () => {
-    return (
-        <div className='display-flex flex-column justify-content-center align-items-center'>
-            <Usage1 />
-            <Usage2 />
-            <Usage3 />
-        </div>
-    );
-};
+const UseKeyExample = () => (
+    <div className='display-flex flex-column justify-content-center align-items-center'>
+        <Usage1 />
+        <Usage2 />
+        <Usage3 />
+    </div>
+);
 
 export default UseKeyExample;
 ```

package/dist/docs/utilities/useLocalStorage.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* Browser & device hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useLocalStorage
-*Captured:* 2026-03-06T10:41:50.097Z
+*Captured:* 2026-04-27T14:59:41.668Z
 
 The useLocalStorage and the useSessionStorage hook allows to save custom data in the respective storage locations.
 

package/dist/docs/utilities/useLocationSuggestions.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* UI state & input hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useLocationSuggestions
-*Captured:* 2026-03-06T10:41:51.833Z
+*Captured:* 2026-04-27T14:59:43.359Z
 
 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.
 

package/dist/docs/utilities/useMax.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* Data aggregation hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useMax
-*Captured:* 2026-03-06T10:41:56.465Z
+*Captured:* 2026-04-27T14:59:46.367Z
 
 Returns the largest valid numeric value found at the specified path within a list of objects. Supports localized formats and gracefully skips unparsable values.
 

package/dist/docs/utilities/useMin.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* Data aggregation hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useMin
-*Captured:* 2026-03-06T10:41:56.398Z
+*Captured:* 2026-04-27T14:59:46.997Z
 
 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.
 

package/dist/docs/utilities/useMutationObserver.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* DOM behavior hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useMutationObserver
-*Captured:* 2026-03-06T10:41:42.777Z
+*Captured:* 2026-04-27T14:59:37.240Z
 
 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
 

package/dist/docs/utilities/useOnScreen.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* DOM behavior hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useOnScreen
-*Captured:* 2026-03-06T10:41:43.357Z
+*Captured:* 2026-04-27T14:59:37.297Z
 
 The useOnScreen hook tells you when an element is visible on screen.
 

package/dist/docs/utilities/useOnlineStatus.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* Browser & device hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useOnlineStatus
-*Captured:* 2026-03-06T10:41:49.569Z
+*Captured:* 2026-04-27T14:59:41.667Z
 
 The useOnlineStatus hook tells you when there is a network connection or not.
 

package/dist/docs/utilities/usePostMessage.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* Browser & device hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/usePostMessage
-*Captured:* 2026-03-06T10:41:49.551Z
+*Captured:* 2026-04-27T14:59:41.796Z
 
 The usePostMessage hook allows to easily exchange events and data between the parent window and embedded iframes.
 
@@ -88,7 +88,7 @@ export default () => {
         </div>
     </div>
     <div class="iframe-wrapper">
-        <iframe title="iframe" id="postMessageExample" src="/#postMessageExample" class="unstyled width-100pct" style="width: 1px; min-width: 100%; overflow: hidden; height: 150px;" scrolling="no">
+        <iframe title="iframe" id="postMessageExample" src="/#postMessageExample" class="unstyled width-100pct" style="width: 1px; min-width: 100%; overflow: hidden; height: 200px;" scrolling="no">
         </iframe>
     </div>
 </div>

package/dist/docs/utilities/usePostMessageSender.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* Browser & device hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/usePostMessageSender
-*Captured:* 2026-03-06T10:41:50.191Z
+*Captured:* 2026-04-27T14:59:41.816Z
 
 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.
 

package/dist/docs/utilities/usePrevious.md

@@ -3,12 +3,14 @@
 *Category:* Utilities
 *Section:* Lifecycle & execution hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/usePrevious
-*Captured:* 2026-03-06T10:41:36.456Z
+*Captured:* 2026-04-27T14:59:31.535Z
 
 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.
 
 ## usePrevious
 
+Quoting from the React documentation:
+
 - If the value you need can be computed entirely from the current props or other state, remove that redundant state altogether. If you’re worried about recomputing too often, the useMemo Hook can help.
 - If you want to reset the entire component tree’s state, pass a different key to your component.
 - If you can, update all the relevant state in the event handlers.
@@ -28,6 +30,112 @@ setSelection(null);
 }
 ```
 
+function
+
+List
+
+(
+
+{ items }
+
+)
+
+{
+
+const
+
+[
+
+,
+
+]
+
+=
+
+useState
+
+(
+
+false
+
+)
+
+;
+
+const
+
+[
+
+,
+
+]
+
+=
+
+useState
+
+(
+
+null
+
+)
+
+;
+
+// Better: Adjust the state while rendering
+
+const
+
+[
+
+,
+
+]
+
+=
+
+useState
+
+(
+
+)
+
+;
+
+if
+
+(
+
+!==
+
+)
+
+{
+
+setPrevItems
+
+(
+
+)
+
+;
+
+setSelection
+
+(
+
+null
+
+)
+
+;
+
+}
+
+// ...
+
+}
+
 > Note: If you want to use this to update the internal state due to a prop change, you might run into a loop. Therefore, use the following snippet suggested by the React team here: https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
 
 ### Example: Example 1
@@ -69,7 +177,7 @@ export default () => {
     <div class="NumberControl margin-0 width-100">
         <div class="input-group">
             <div class="form-control-feedback-wrapper">
-                <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls" aria-label="number-input" value="1">
+                <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls padding-right-5" aria-label="number-input" value="1">
             </div>
             <div class="input-group-addon ">
                 <div class="display-flex padding-left-10">

package/dist/docs/utilities/useResizeObserver.md

@@ -3,15 +3,17 @@
 *Category:* Utilities
 *Section:* DOM behavior hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useResizeObserver
-*Captured:* 2026-03-06T10:41:44.548Z
+*Captured:* 2026-04-27T14:59:38.448Z
 
 The useResizeObserver hook allows to react on resize changes of a given element.
 
 ## useResizeObserver
 
+You can either attach the returned ref to the observed element or pass an existing DOM element directly as the optional first argument.
+
 > Note: that is important to consider the padding of the element to observe and to take it into consideration when working with its width and height. When using the contentRect from the observerEntry, keep in mind that this will not include the paddings.
 
-To include the target elements padding, please use the borderBoxSize instead.
+To include the target element padding, use the third return value with inlineSize and blockSize, or read borderBoxSize from the observer entry directly.
 
 ### Example: Example 1
 
@@ -28,9 +30,7 @@ import useResizeObserver from '@rio-cloud/rio-uikit/useResizeObserver';
 export default () => {
     const [boxWidth, setBoxWidth] = useState(200);
 
-    // To include target elements padding, use "borderBoxSize" or for convenience
-    // purpose, use the dedicated return object already containing "inlineSize" and "blockSize".
-    // const [ref, { borderBox }] = useResizeObserver();
+    // The third tuple item already exposes border-box based inline/block size values.
     const [ref, _, { inlineSize, blockSize }] = useResizeObserver();
 
     const handleResizeHorizontal = (diff: number) => setBoxWidth(previousValue => previousValue - diff);
@@ -47,7 +47,7 @@ export default () => {
                 ref={ref}
             >
                 <div className='text-color-white text-medium'>
-                    {inlineSize}x{blockSize}
+                    {inlineSize ?? 0}x{blockSize ?? 0}
                 </div>
                 <Resizer onResize={handleResizeHorizontal}>
                     <div className='width-5 height-100pct bg-light' />
@@ -71,11 +71,19 @@ export default () => {
 </div>
 ```
 
-#### Props (json)
+#### Props
 
-```json
-ref
-```
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| observedElement | HTMLElement \| null | — | Optional existing DOM element to observe directly instead of attaching the returned ref. |
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ref | MutableRefObject<T \| null> | — | Ref object for the observed element. When you pass observedElement directly, this ref can be ignored. |
+| observerEntry | ResizeObserverEntry \| null | — | The latest ResizeObserverEntry or null until the first observation. See https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry |
+| size | { inlineSize: number \| undefined; blockSize: number \| undefined } | — | Convenience object that prefers borderBoxSize and falls back to contentRect. |
 
 ### Example: Example 2
 
@@ -97,7 +105,11 @@ export default () => {
     const contentRect = observerEntry?.contentRect;
 
     const getContentRect = useCallback(
-        (key: keyof DOMRectReadOnly) => Math.round(contentRect?.[key] as number),
+        (key: keyof DOMRectReadOnly) => {
+            const value = contentRect?.[key];
+
+            return typeof value === 'number' ? Math.round(value) : 0;
+        },
         [contentRect]
     );
 
@@ -136,8 +148,16 @@ export default () => {
 </div>
 ```
 
-#### Props (json)
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| observedElement | HTMLElement \| null | — | Optional existing DOM element to observe directly instead of attaching the returned ref. |
+
+#### Props
 
-```json
-ref
-```
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ref | MutableRefObject<T \| null> | — | Ref object for the observed element. When you pass observedElement directly, this ref can be ignored. |
+| observerEntry | ResizeObserverEntry \| null | — | The latest ResizeObserverEntry or null until the first observation. See https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry |
+| size | { inlineSize: number \| undefined; blockSize: number \| undefined } | — | Convenience object that prefers borderBoxSize and falls back to contentRect. |

package/dist/docs/utilities/useRioCookieConsent.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* Browser & device hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useRioCookieConsent
-*Captured:* 2026-03-06T10:41:47.562Z
+*Captured:* 2026-04-27T14:59:40.030Z
 
 The useRioCookieConsent hook reads and parses RIO's cookie_settings cookie and returns a typed consent state.
 

package/dist/docs/utilities/useScrollPosition.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* DOM behavior hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useScrollPosition
-*Captured:* 2026-03-06T10:41:45.570Z
+*Captured:* 2026-04-27T14:59:38.575Z
 
 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.
 
@@ -143,10 +143,7 @@ export default () => {
     return (
         <>
             <label>Example for scroll position of a certain element</label>
-            <div
-                ref={contentRef}
-                className='height-200 position-relative overflow-auto height-200 position-relative overflow-auto'
-            >
+            <div ref={contentRef} className='height-200 position-relative overflow-auto'>
                 <div className='position-sticky top-0 well well-sm border shadow-default'>{`${scrollPosition} px`}</div>
                 <div className='text-size-14'>{dummyTextExtraLong}</div>
             </div>
@@ -159,7 +156,7 @@ export default () => {
 
 ```html
 <label>Example for scroll position of a certain element</label>
-<div class="height-200 position-relative overflow-auto height-200 position-relative overflow-auto">
+<div class="height-200 position-relative overflow-auto">
     <div class="position-sticky top-0 well well-sm border shadow-default">0 px</div>
     <div class="text-size-14">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

package/dist/docs/utilities/useSearch.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* UI state & input hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useSearch
-*Captured:* 2026-03-06T10:41:52.947Z
+*Captured:* 2026-04-27T14:59:44.024Z
 
 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.
 
@@ -23,8 +23,6 @@ import useSearch from '@rio-cloud/rio-uikit/useSearch';
 import ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';
 import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
 
-type ListType = { name: string };
-
 export default () => {
     const items = [{ name: 'Apple' }, { name: 'Banana' }, { name: 'Fig' }, { name: 'Pear' }, { name: 'Mango' }];
 

package/dist/docs/utilities/useSearchHighlight.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* UI state & input hooks
 *Source:* https://uikit.developers.rio.cloud/#/utilities/useSearchHighlight
-*Captured:* 2026-03-06T10:41:54.695Z
+*Captured:* 2026-04-27T14:59:46.152Z
 
 The useSearchHighlight hook applies native CSS Highlight API ranges to matching text in a referenced container. It progressively enhances supported browsers without mutating markup and can be scoped or made case-sensitive as needed.