@rio-cloud/uikit-mcp 1.1.2 → 1.1.4

package/dist/docs/start/changelog.md

@@ -3,7 +3,27 @@
 *Category:* Getting started
 *Section:* Welcome
 *Source:* https://uikit.developers.rio.cloud/#start/changelog
-*Captured:* 2025-12-15T15:01:59.911Z
+*Captured:* 2026-01-14T09:06:48.579Z
+
+## Version 2.1.0 (2026-01-13)
+
+- **Fixed** Map context menu Fixed the typing for the ContextMenuItem component.
+
+- **Fixed** Map route Fixed the typing for the arrowStyle prop of the Route component.
+
+- **Fixed** Map SimpleClusterLayer type Fixed the typings for the SimpleClusterLayer component’s simpleTheme prop. Please use the new SimpleClusterTheme type instead of the ClusterTheme.
+
+- **Fixed** Dialog Fixed broken fade animation of Dialogs in Firefox.
+
+- **Fixed** TableSettingsDialog Fixed TableSettingsDialog so reset to default remains available after reopening when settings differ from defaults.
+
+- **Fixed** Select Fixed select filter regressions where hitting ‘nothing found’ could leave the dropdown stuck or missing options. Backspacing or clearing now restores the full list and keeps keyboard focus/highlights in sync. Dropdown scroll now resets on reopen and keeps the keyboard-focused item in view when navigating up and down with the arrow keys.
+
+- **Update** URL feature toggles Replaced the internal "qs" library used for parsing URL search parameters with the native URLSearchParams API, allowing us to remove the external dependency. This also solves the vulnerability issue with the "qs" library for this version.
+
+- **Update** Tree Extended the Tree component to support custom external icon and logo URLs.
+
+- **Demo** Updated the component prop documentation for most components by deriving it directly from the component type definitions and source files. This ensures more accurate documentation and reduces maintenance effort for the demo pages.
 
 ## Version 2.0.1 (2025-12-15)
 
@@ -37,6 +57,8 @@
 
 - **Removed** OnboardingTip Removed deprecated prop "clickflow". Please use the "useOnboardingTour" hook instead.
 
+- **Removed** Radiobutton Changed the onChange callback so it is only used in the controlled use case, as already documented in earlier versions. For uncontrolled usage, please use the onClick callback instead.
+
 - **Removed** NumberInput / NumberControl Removed deprecated prop "onValueChanged". Please use "onChange" instead.
 
 - **Removed** Sidebar Removed deprecated prop "enableNavigationButtons". Please use "headerButtons" instead. Removed deprecated prop "disableFullscreen". Please use "enableFullscreenToggle" instead. Removed deprecated prop "fullscreen". Please use "openInFullscreen" instead.

package/dist/docs/start/goodtoknow.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#start/goodtoknow
-*Captured:* 2025-12-15T15:01:54.422Z
+*Captured:* 2026-01-14T09:06:48.448Z
 
 ## Good to know
 

package/dist/docs/start/guidelines/color-combinations.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#start/guidelines/color-combinations
-*Captured:* 2025-12-15T15:01:54.897Z
+*Captured:* 2026-01-14T09:06:49.309Z
 
 For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color. This contrast ensures people with moderately low vision can tell the colors apart and see your content.
 

package/dist/docs/start/guidelines/custom-css.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#start/guidelines/custom-css
-*Captured:* 2025-12-15T15:01:55.598Z
+*Captured:* 2026-01-14T09:06:48.974Z
 
 Maintaining CSS will become harder over time due to various reasons like growing amount of styles, old and unknown overwrites, exchange of Team members etc.
 

package/dist/docs/start/guidelines/custom-rioglyph.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#start/guidelines/custom-rioglyph
-*Captured:* 2025-12-15T15:01:55.642Z
+*Captured:* 2026-01-14T09:06:48.993Z
 
 To use a custom Rioglyph icon, there are two different approaches:
 

package/dist/docs/start/guidelines/formatting.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#start/guidelines/formatting
-*Captured:* 2025-12-15T15:01:58.951Z
+*Captured:* 2026-01-14T09:06:50.711Z
 
 Having a common date formatting guide is crucial to ensure consistency, clarity, and accuracy in documentation, making it easier to understand and interpret dates correctly across different contexts.
 

package/dist/docs/start/guidelines/iframe.md

@@ -3,29 +3,68 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#start/guidelines/iframe
-*Captured:* 2025-12-15T15:01:57.271Z
+*Captured:* 2026-01-14T09:06:50.652Z
 
-When having a widget, the widget class is-iframe-widget needs to be added to the document HTML element <html class="is-iframe-widget">
+Web applications can embed smaller SPAs as widgets using an <iframe> to enrich it's functionality provided by other services and teams. This page explains what the parent application (host) and the child application (widget) must do to ensure correct styling, sizing, and communication.
 
 ## Iframe guidelines
 
 ## Working with iframes
 
-The window-iframe class will be added by the RIO UIKIT automatically, but you have to add the RIO Pageloader to your SPA for that.
+## Terminology
 
-To integrate a widget iframe seamlessly and to avoid scrolling within an iframe, we use the 3rd party lib iframe-resizer-react from https://www.npmjs.com/package/iframe-resizer-react. Both views, the parent (which displays the iframe) and the child (which is the iframe content) needs to import the iframe-resizer.
+- Parent application: the host SPA that renders the <iframe>.
+- Widget (child application): the small SPA running inside the iframe.
+- Iframe integration: layout, sizing, and communication between parent and widget.
 
-**Parent application**
+## Enable widget-specific styling
 
-Use this if you want to embed an iframe into your application.
+If an application is shipped as a widget (i.e., it is meant to be embedded into other applications via an iframe), the widget must mark itself accordingly by adding the classis-iframe-widget to the document’s <html> element.
+
+**Who needs to add this?**
+
+The child application (widget) must add <html class="is-iframe-widget">. The parent application typically cannot (and should not) modify the widget’s HTML root.
+
+## What the window-iframe is and why the RIO Pageloader matters
+
+The RIO UIKIT uses the class window-iframe on the <html> element to enable iframe-specific baseline styles. This helps widgets render cleanly when embedded (for example, ensuring the document background behaves correctly in an iframe context).
+
+**Who sets window-iframe?**
+
+This class is added automatically by the RIO UIKIT, but only if your SPA includes the RIO Pageloader (the initial loading animation shown until the application is ready).
+
+**What is the RIO Pageloader?**
+
+The RIO Pageloader is the initial loading animation displayed while the application bundles load and the SPA initializes. It is also the recommended place to bootstrap UIKIT early, so iframe-related classes can be applied before the first render to avoid visual flicker.
+
+The loader is already part of the RIO frontend template and added to the index.html page inside the body element.
+
+For reference:
+
+```html
+<link
+rel='stylesheet'
+type='text/css'
+href='https://cdn.rio.cloud/pageLoader/pageLoader.css'
+/>
+<script src='https://cdn.rio.cloud/pageLoader/pageLoader.js'></script>
+```
+
+## Auto-resizing the iframe (recommended)
+
+For widgets with dynamic height, scrolling inside the iframe often leads to a poor user experience. To avoid nested scrolling, we recommend using iframe-resizer-react from https://www.npmjs.com/package/iframe-resizer-react. This library adapts the iframe height automatically to the widgets content.
+
+**Parent application (host)**
+
+The parent initializes the resizer on the iframe element. Use this if you want to embed an iframe into your application.
 
 ```js
 import IframeResizer from 'iframe-resizer-react';
 ```
 
-**Child application**
+**Child application (widget)**
 
-Use this if your application is a widget and will be embedded into other applications via an iframe.
+The widget must include the resizer content script so it can report size changes to the parent.
 
 ```js
 npm install iframe-resizer --save
@@ -82,25 +121,33 @@ export default IFrameWidgetExample;
 ```html
 <div class="display-flex justify-content-center">
     <div class="iframe-wrapper width-400">
-        <iframe title="iframe" src="https://menu.rio.cloud" id="iFrameResizer0" scrolling="no" style="overflow: hidden;">
+        <iframe title="iframe" src="https://menu.rio.cloud" id="iFrameResizer0" scrolling="no" style="overflow: hidden; height: 250px;">
         </iframe>
     </div>
 </div>
 ```
 
-## iframe in Fullscreen Dialog
+## Embedding a widget (iframe) in a fullscreen dialog
+
+When a widget needs to be displayed as a full page inside a dialog (for example, showing a full-featured SPA), the iframe often requires additional layout and styling adjustments.
+
+Rendering a full fledged SPA, there is the need to hide it's main navigation. The best and cleanest way is to hide the navigation in the SPA, when it is loaded in an iframe. Another way is to use our no-application-header class. The iframe then has to be wrapped in a iframe-wrapper element on the host side.
 
-When having an iframe within a Dialog, for example to display a full fledged SPA, there are two ways to hide the SPA navigation. The best and cleanest way is to hide the navigation in the SPA, when it is loaded in an iframe. Another way is to use our no-application-header class. The iframe then has to be wrapped in a iframe-wrapper element.
+RIO iframes are transparent by default, also the SPA itself. Because of that you have to add the class bg-lighter to the iframe.
 
-RIO iframes are transparent by default, also the SPA itself. Because of that you have to add the class "bg-lighter" to the iframe.
+**Recommended pattern**
 
-## Additional iframe classes
+- Wrap the iframe in an .iframe-wrapper to control sizing and overflow.
+- Use utility classes to remove default iframe styling (borders, background) if needed.
+- Prefer hiding parent navigation by not rendering it in the dialog context (instead of compensating with offsets).
 
-- Use unstyled to remove default iframe styling (Not necessary for widgets when using the iframe-resizer)
-- Use full-width for a full width iframe (Not necessary for widgets when using the iframe-resizer)
-- Use full-window for a full window (height/width) iframe based in the parent container
-- Use no-application-header for adding a -50px offset to hide the SPA navigation. Better solution is to not render the navigation within the iframe!
-- Use bg-XXX for having a iframe background color, as the default is transparent
+**Common helper classes**
+
+- unstyled: removes default iframe border styling (not necessary for widgets when using the iframe-resizer).
+- full-width: makes the iframe take the full width of its container. (not necessary for widgets when using the iframe-resizer)
+- full-window: makes the iframe fill (height/width) the available container space (often for dialogs).
+- no-application-header: compensates for a missing header/navigation area (use carefully). It adds a -50px offset to move the SPA navigation outside the visible area.
+- bg-xxx: set the iframe background color, as the default is transparent.
 
 ### Example: Example 2
 
@@ -183,7 +230,13 @@ export default IFrameInDialogExample;
 
 When it comes to opening a modal dialog from within an iframe, there's flexibility in how it can be presented. Depending on the context, the dialog might overlay the iframe content itself or seamlessly cover the entire parent application.
 
-For opening a dialog in the parent application, the process typically involves sending a postMessage event from the iframe to the parent window. Upon receiving this event, the parent application responds by rendering a simple dialog, such as an InfoDialog, which includes another iframe pointing to a specific route within the widget. This embedded view then displays the dialog content and manages the dialog's close events. When it's time to close the dialog, the embedded view sends another postMessage to the parent application. This event allows the dialog view to send any necessary data back to the originating iframe.
+A widget can request the parent application to open a dialog (for example, to present the widget in fullscreen or show another part of it). This is done by sending an event via postMessage from the widget to the parent window.
+
+**Recommended event flow**
+
+1. Widget sends a message to the parent requesting the dialog to open.
+2. Upon receiving this event, the parent application responds by rendering a simple dialog, such as an InfoDialog, which includes another iframe pointing to a specific route within the widget. This embedded view then displays the dialog content and manages the dialog's close events.
+3. When it's time to close the dialog (via a close button inside the iframe), the embedded view sends another postMessage to the parent application. This event allows the dialog view to send any necessary data back to the originating iframe.
 
 ### Example: Example 3
 
@@ -199,7 +252,7 @@ For opening a dialog in the parent application, the process typically involves s
 import React from 'react';
 import IframeResizer from 'iframe-resizer-react';
 
-import FrameDialog from '../../../../../../src/FrameDialog';
+import FrameDialog from '@rio-cloud/rio-uikit/FrameDialog';
 import { PREFIX } from '../../../widgets/WidgetDemo';
 
 const IFrameWidgetExample = React.memo(() => {
@@ -226,9 +279,9 @@ export default IFrameWidgetExample;
 // ----------------------------------------------------------
 import { useState } from 'react';
 
-import Button from '../../../../src/Button';
-import { OPEN_DIALOG_EVENT, CLOSE_DIALOG_EVENT, type OPEN_DIALOG_EVENT_TYPE } from '../../../../src/FrameDialog';
-import usePostMessage, { type RemoteAction } from '../../../../src/usePostMessage';
+import Button from '@rio-cloud/rio-uikit/Button';
+import { OPEN_DIALOG_EVENT, CLOSE_DIALOG_EVENT, type OPEN_DIALOG_EVENT_TYPE } from '@rio-cloud/rio-uikit/FrameDialog';
+import usePostMessage, { type RemoteAction } from '@rio-cloud/rio-uikit/usePostMessage';
 
 export const PREFIX = 'EVENT_UIKIT_WIDGET_DEMO';
 
@@ -274,10 +327,10 @@ const WidgetDemo = () => {
 export default WidgetDemo;
 
 // ----------------------------------------------------------
-import Button from '../../../../src/Button';
-import Dialog from '../../../../src/Dialog';
-import usePostMessage from '../../../../src/usePostMessage';
-import { CLOSE_DIALOG_EVENT } from '../../../../src/FrameDialog';
+import Button from '@rio-cloud/rio-uikit/Button';
+import Dialog from '@rio-cloud/rio-uikit/Dialog';
+import usePostMessage from '@rio-cloud/rio-uikit/usePostMessage';
+import { CLOSE_DIALOG_EVENT } from '@rio-cloud/rio-uikit/FrameDialog';
 
 import { dummyText } from '../../utils/data';
 import { PREFIX } from './WidgetDemo';

package/dist/docs/start/guidelines/obfuscate-data.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#start/guidelines/obfuscate-data
-*Captured:* 2025-12-15T15:01:57.215Z
+*Captured:* 2026-01-14T09:06:49.679Z
 
 This demo demonstrates how sensitive data marked with the data-pii="visible" attribute can be obfuscated directly in the frontend.
 

package/dist/docs/start/guidelines/print-css.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#start/guidelines/print-css
-*Captured:* 2025-12-15T15:01:57.162Z
+*Captured:* 2026-01-14T09:06:49.661Z
 
 The UIKIT supports simple print stylings in order to have printable content. Those print styles are supposed to do basic printing and should not replace server side PDF`s.