@rio-cloud/uikit-mcp 1.1.9 → 1.1.10

package/dist/docs/start/changelog.md

@@ -3,9 +3,59 @@
 *Category:* Getting started
 *Section:* Welcome
 *Source:* https://uikit.developers.rio.cloud/#/start/changelog
-*Captured:* 2026-03-06T10:39:52.808Z
+*Captured:* 2026-04-20T12:53:30.187Z
 
-## Version 2.2.1 (2026-03-02)
+## Version 2.3.0 (2026-03-20)
+
+- **New** useDraggableElement Added a new useDraggableElement hook to make DOM elements draggable with pointer events, including support for dedicated drag handles.
+
+- **New** CSS Animations Added a new foundations demo page for CSS animations with interactive slide, fade, scale, and rotate examples, including controls for duration, delay, easing, repeat, looping, and playback.
+
+- **New** AI Assistant template Added a new template demo for AI-assisted service queries that turns a request into a structured response card with loading states and result tables.
+
+- **Update** Multiselect Added a new useClear prop to clear the current selection from the toggle, aligned with the existing Select API and documented in the multiselect demo page.
+
+- **Update** ButtonDropdown Added a new iconName prop and forward it to the underlying button toggle, so icon buttons no longer need custom title markup just to render a rioglyph with a button text.
+
+- **Update** Route Route interactions now show a pointer cursor for clickable routes and support an optional hoverStyle. Route clicks and hover now use an internal hit area to enlarge the clickable surface and make route interaction more reliable.
+
+- **Update** Polygon & Isoline Polygons and isolines now support click and hover interactions, including automatic pointer cursors for clickable shapes and an optional hoverStyle for hover feedback such as highlighted outlines.
+
+- **Update** Map performance Added marker icon caching for map markers and cluster markers, which avoids recreating identical marker icons, speeds up large marker sets, and can reduce memory usage by reusing shared DOM icon instances. Also added an optional zoom optimization to temporarily suppress marker pointer events during zoom interactions.
+
+- **Fixed** useResizeObserver Fixed repeated state updates when ResizeObserver reported the same size, which could trigger render loops under certain conditions.
+
+- **Fixed** routeUtils Fixed parseSorting to return the documented asc / desc sort direction values, so URL-based table sorting no longer resets after parsing in controlled integrations.
+
+- **Fixed** Fixed incorrect:focus-visible outlines on text links in Chrome 147 after the browser changed how outline-width and outline-style are computed.
+
+- **Fixed** InfoBubble Adjusted the HERE map InfoBubble to use the active theme font-family instead of HERE default font styles. Also added a new demo showing an InfoBubble opened from a POI map marker.
+
+- **New** DayPicker Added a new composable DayPicker component for date inputs with dropdown calendar, custom triggers, sidebars, footers, presets, validation, and composed date/time workflows.
+
+- **New** DayPickerCalendar Added a new standalone DayPickerCalendar component for embedded calendar use cases, including single, multiple, and range selection plus custom modifiers and day content.
+
+- **New** Table Added a new declarative Table component with compound subcomponents for headers, rows, cells, footers, grouped sticky rows, expandable rows, selection, sortable and resizable columns, column filters, disabled rows, row animations, and responsive card views.
+
+- **New** TableToolbar Added the new compound TableToolbarColumn API for declarative toolbar layouts with automatic left/right grouping via alignment, optional label and separator, plus per-column className support. Existing manual toolbar markup remains supported.
+
+- **Update** TableViewToggles Redesigned TableViewToggles to use a Select-based view switcher instead of the former toggle button group. Added dedicated label props for the dropdown items, while the older tooltip props are now deprecated and only kept as a fallback for item labels.
+
+- **Update** LoadMoreButton Added the new hideOnPrint prop, defaulting to true.
+
+- **New** AnalyticsAnalysisOverlay Added a new AnalyticsAnalysisOverlay component to visualize tracked elements on the page using uploaded analytics CSV data.
+
+- **New** googleAnalyticsUtils Added a new Utilities helper demo page for googleAnalyticsUtils with examples for getTrackingAttributes.
+
+- **Update** Button Added support for automatic GA tracking attributes via the new autoTrackingKey prop.
+
+- **Update** ExpanderPanel Added support for tracking attributes on panel headers, so getTrackingAttributes will be passed directly to ExpanderPanel.
+
+- **Update** ExpanderList Added support for tracking attributes on expander item, so getTrackingAttributes will be passed directly to ExpanderListItemHeader.
+
+- **New** New icons rioglyph- big-bag rioglyph- bulk-container rioglyph- coil rioglyph- roll-container rioglyph- shelve-empty rioglyph- stillage
+
+## Version 2.2.1 (2026-03-06)
 
 - **Fixed** TableSettingsDialog Fixed the TableSettingsDialog to prevent an endless loop under certain conditions.
 
@@ -663,7 +713,7 @@
 
 - **breaking** Split SortArrows, SortArrowUp, and SortArrowDown in dedicated components. Change imports to default imports.
 
-- **Removed** useResizeObserver The "Observer Entry" object may now be null, so it can't reliably be destructured anymore. This doesn't work anymore: const [ ref, { borderBoxSize } ] = useResizeObserver ( ); console. log ( borderBoxSize ); Update your code like so: const [ ref, observerEntry ] = useResizeObserver ( ); console. log ( observerEntry ?. borderBoxSize ); Also, an option to specify the HTML element type of the generated ref was added (defaults do div).
+- **Removed** useResizeObserver The "Observer Entry" object may now be null, so it can't reliably be destructured anymore. This doesn't work anymore: const [ ref, { borderBoxSize } ] = useResizeObserver ( ); console. log ( borderBoxSize ); Update your code like so: const [ ref, observerEntry ] = useResizeObserver ( ); console. log ( observerEntry ?. borderBoxSize ); Also, an option to specify the HTML element type of the generated ref was added (defaults to div).
 
 - **Fixed** Blockquote Change default blockquote padding from percentage to pixel. Please add custom padding classes to change it to your needs.
 

package/dist/docs/start/goodtoknow.md

@@ -3,12 +3,10 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#/start/goodtoknow
-*Captured:* 2026-03-06T10:39:52.635Z
+*Captured:* 2026-04-20T12:53:30.060Z
 
 ## Good to know
 
 ## IntelliSense for CSS class names in HTML
 
-## CSS Hyphens
-
-> Note: Hyphens is language-sensitive. Its ability to find break opportunities depends on the language, defined in the lang attribute of a html element. Not all languages are supported yet, and support depends on the specific browser.
+## CSS Hyphens

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:* 2026-03-06T10:39:53.668Z
+*Captured:* 2026-04-20T12:53:30.905Z
 
 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:* 2026-03-06T10:39:53.474Z
+*Captured:* 2026-04-20T12:53:30.953Z
 
 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:* 2026-03-06T10:39:53.474Z
+*Captured:* 2026-04-20T12:53:31.025Z
 
 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:* 2026-03-06T10:39:56.069Z
+*Captured:* 2026-04-20T12:53:32.590Z
 
 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.
 
@@ -529,8 +529,6 @@ Here's an example of the correct usage:
 
 The unit symbol should always be in lowercase and a space should be used between the number and the unit symbol
 
-> Note: When formatting durations in a short format, ReactIntl does not follow the more common style defined in the section "Format durations" especially for locales like de-DE. In this case we need to combine the FormattedNumber with a custom unit.
-
 ```jsx
 <FormattedNumber value={2} />h <FormattedNumber value={45} />min
 ```

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

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#/start/guidelines/iframe
-*Captured:* 2026-03-06T10:39:54.972Z
+*Captured:* 2026-04-20T12:53:32.365Z
 
 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.
 
@@ -117,7 +117,7 @@ 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>
@@ -243,24 +243,22 @@ import IframeResizer from 'iframe-resizer-react';
 import FrameDialog from '@rio-cloud/rio-uikit/FrameDialog';
 import { PREFIX } from '../../../widgets/WidgetDemo';
 
-const IFrameWidgetExample = React.memo(() => {
-    return (
-        <>
-            <div className='iframe-wrapper'>
-                <IframeResizer
-                    id='widgetDialogFrame'
-                    src={`${window.location.origin}${window.location.pathname}#widgetDemo`}
-                    className='unstyled width-100pct'
-                    style={{ width: '1px', minWidth: '100%' }}
-                />
-            </div>
-            <FrameDialog
-                eventPrefix={PREFIX}
-                getSourceFrame={() => document.getElementById('widgetDialogFrame') as HTMLIFrameElement}
+const IFrameWidgetExample = React.memo(() => (
+    <>
+        <div className='iframe-wrapper'>
+            <IframeResizer
+                id='widgetDialogFrame'
+                src={`${window.location.origin}${window.location.pathname}#widgetDemo`}
+                className='unstyled width-100pct'
+                style={{ width: '1px', minWidth: '100%' }}
             />
-        </>
-    );
-});
+        </div>
+        <FrameDialog
+            eventPrefix={PREFIX}
+            getSourceFrame={() => document.getElementById('widgetDialogFrame') as HTMLIFrameElement}
+        />
+    </>
+));
 
 export default IFrameWidgetExample;
 

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:* 2026-03-06T10:39:54.841Z
+*Captured:* 2026-04-20T12:53:31.710Z
 
 This demo demonstrates how sensitive data marked with the data-pii="visible" attribute can be obfuscated directly in the frontend.
 
@@ -25,6 +25,4 @@ Dynamically added elements will immediately be obfuscated as long as the HTML at
 
 - Debug or demo environments, where you want realistic data structure but no real identities.
 - Screenshot or recording safety, ensuring you don’t leak PII in support sessions or analytics.
-- QA/testing, to verify UI behavior without showing live customer data.
-
-> Tip: Use the "Load more" button to dynamically reveal additional obfuscated employees.
+- QA/testing, to verify UI behavior without showing live customer data.

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:* 2026-03-06T10:39:54.600Z
+*Captured:* 2026-04-20T12:53:31.712Z
 
 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.
 

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

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#/start/guidelines/spinner
-*Captured:* 2026-03-06T10:39:56.777Z
+*Captured:* 2026-04-20T12:53:33.710Z
 
 There are various approaches when it comes to loading data and showing the user the different stages of the loading process.
 

package/dist/docs/start/guidelines/state-in-url.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#/start/guidelines/state-in-url
-*Captured:* 2026-03-06T10:39:53.019Z
+*Captured:* 2026-04-20T12:53:30.762Z
 
 Every service frontend should support deep linking and reflect meaningful UI state in the URL. This enables restoring state when links are shared, when they are stored as bookmarks, when users navigate with browser history, or when a service is opened from another app.
 

package/dist/docs/start/guidelines/supported-browsers.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#/start/guidelines/supported-browsers
-*Captured:* 2026-03-06T10:39:55.894Z
+*Captured:* 2026-04-20T12:53:31.760Z
 
 We currently support the following browsers:
 

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

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#/start/guidelines/writing
-*Captured:* 2026-03-06T10:39:55.679Z
+*Captured:* 2026-04-20T12:53:32.545Z
 
 UX writing doesn't receive as much attention as it should. In the past, digital experiences featured words written by different individuals - ranging from designers to engineers — at various times and in diverse styles, all without a centralized guide.
 

package/dist/docs/start/howto.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Welcome
 *Source:* https://uikit.developers.rio.cloud/#/start/howto
-*Captured:* 2026-03-06T10:39:52.572Z
+*Captured:* 2026-04-20T12:53:29.881Z
 
 Install the latest version of the UIKIT (that includes latest beta versions as well) via
 
@@ -33,15 +33,13 @@ npm install @rio-cloud/rio-uikit
 Or install a dedicated version via
 
 ```javascript
-npm install @rio-cloud/rio-uikit@2.2.1
+npm install @rio-cloud/rio-uikit@2.3.0
 ```
 
 ## TypeScript
 
 The UIKIT is built with TypeScript and defines the types inside the components.
 
-> Note: Do not import types from the ./types.ts file directly as this is an internal file and subject to change. Import enums, constants and types from the declaration file together with the component.
-
 ```javascript
 import AutoSuggest, { type AutoSuggestSuggestion } from "@rio-cloud/rio-uikit/AutoSuggest";
 import Select, { type SelectOption } from "@rio-cloud/rio-uikit/Select";
@@ -72,24 +70,20 @@ By specifying the initial scale and width, this tag guarantees that your content
 
 ## UIKIT CSS
 
-ManagedRecommended
+**Managed**
 
 When utilizing the ApplicationLayout component, the UIKIT automatically ensures the inclusion of the necessary CSS style tag within your index.html, providing seamless integration and enhanced functionality.
 
 You no longer need to manually add the CSS style tag to your index.html. Feel free to remove it if you prefer to manage it yourself.
 
-> Note: Please note that every application and every widget must be wrapped with the <ApplicationLayout />, as it executes our init function.
-
-ManualNot Recommended
+**Manual**
 
 Use the CSS Stylesheet as follows (specify your required version number in the URL) if you need more control on what style you want to use.
 
 ```html
-<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.2.1/rio-uikit.css">
+<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.3.0/rio-uikit.css">
 ```
 
-> Note: Please make sure to use the same UIKIT style version as the npm package, otherwise this will lead to inconsistency and UI bugs.
-
 ## Brand themes
 
 In addition to the RIO theme, the UIKIT offers other brand-specific themes.
@@ -99,18 +93,18 @@ These other themes may only be used for applications or services who don't run o
 In order to use such a brand theme, modify the URL in the &lt;link&gt; tag that loads the CSS
 
 ```html
-<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.2.1/vw-uikit.css">
+<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.3.0/vw-uikit.css">
 ```
 
 ```html
-<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.2.1/man-uikit.css">
+<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.3.0/man-uikit.css">
 ```
 
 ```html
-<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.2.1/scania-uikit.css">
+<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.3.0/scania-uikit.css">
 ```
 
-ManagedRecommended
+**Managed**
 
 You can simply omit the &lt;link&gt; tag in your index.html altogether. The UIKIT will automatically load the correct CSS file for you.
 
@@ -131,7 +125,7 @@ You can simply omit the &lt;link&gt; tag in your index.html altogether. The UIKI
 The UIKIT supports simple print stylings in order to have printable content. See Print CSS
 
 ```html
-<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.2.1/rio-uikit-print-utilities.css">
+<link rel="stylesheet" type="text/css" href="https://uikit.developers.rio.cloud/2.3.0/rio-uikit-print-utilities.css">
 ```
 
 ## Additional styling information
@@ -139,15 +133,13 @@ The UIKIT supports simple print stylings in order to have printable content. See
 In some cases like using D3 you may need the color variables as .json from the UIKIT provided via CDN. You can fetch the provided file from CDN via the following URL:
 
 ```html
-https://uikit.developers.rio.cloud/2.2.1/rio-uikit-colors.json
+https://uikit.developers.rio.cloud/2.3.0/rio-uikit-colors.json
 ```
 
 ## Dark mode
 
 The UIKIT is fully dark mode ready.
 
-> Note: Please note that every application and every widget must be wrapped with the <ApplicationLayout /> as it executes our init function.
-
 ```jsx
 <ApplicationLayout>
 <ApplicationLayout.Header>
@@ -168,7 +160,7 @@ The UIKIT is fully dark mode ready.
 In cases where the React ApplicationLayout component cannot be used, you can import the new darkmode.js from the UIKIT CDN and add it to your index.html. This script will take care of listening to the theme switch for you.
 
 ```html
-<script src="https://uikit.developers.rio.cloud/2.2.1/rio-darkmode.js"></script>
+<script src="https://uikit.developers.rio.cloud/2.3.0/rio-darkmode.js"></script>
 ```
 
 If you want to react on the dark mode for instance to exchange some images or apply some specific utility classes, you can use the custom hook useDarkMode to do so.

package/dist/docs/start/intro.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Welcome
 *Source:* https://uikit.developers.rio.cloud/#/start/intro
-*Captured:* 2026-03-06T10:39:52.425Z
+*Captured:* 2026-04-20T12:53:30.100Z
 
 Welcome! This UI library is designed to help you build beautiful, consistent, and maintainable user interfaces with minimal effort. Here’s how you can make the most of it:
 

package/dist/docs/start/responsiveness.md

@@ -3,7 +3,7 @@
 *Category:* Getting started
 *Section:* Guidelines
 *Source:* https://uikit.developers.rio.cloud/#/start/responsiveness
-*Captured:* 2026-03-06T10:39:52.288Z
+*Captured:* 2026-04-20T12:53:30.067Z
 
 The UIKIT considers all platforms — both desktop and mobile. We recognize that people work across many different products and often need to support multiple platforms and the UIKIT is a foundation for that with its many responsive building blocks and responsive components.
 
@@ -83,8 +83,6 @@ In this example:
 - It switches to a row layout when the container is at least 600px wide.
 - Padding is also conditionally applied based on container size.
 
-> Note: Make sure the container element has cq-container applied, as it sets up the container context required for the styles to react correctly.
-
 ## Device utils
 
 We also offer a set of device utility functions such as hasTouch, isMobile, and isDesktop. This allows to hide or show elements for mobile or to switch settings for some components how to behave. For instance, you might want to show the table card view when a page is rendered on mobile. Or you might want to expand or collapse information depending on your device.