# Changelog

*Category:* Getting started
*Section:* Welcome
*Source:* https://uikit.developers.rio.cloud/#/start/changelog
*Captured:* 2026-04-27T14:57:04.818Z

## Version 2.4.0 (2026-04-27)

- **Update** Select and Multiselect Added a new variant prop with a blank variant to remove the wrapper shadow and toggle border/shadow.

- **Fixed** Forms Fixed sized inputs with form-control so they use the correct font size again.

- **New** Map viewport history Added viewport history for maps, including MapPreviousViewportButton for jumping back to previous map position states.

- **Fixed** Map settings Fixed map settings dropdowns so they are displayed properly when opened.

- **New** Table Added TableExpandAllGroupsButton for grouped tables and new grouped-row demos showing row selection across expandable groups and selectable group rows.

- **Update** Table Added a new selectionCheckboxVerticalAlignment prop so checkboxes can be aligned independently.

- **Update** Table Moved vertical alignment styling to the cell level for table head and body cells, which avoids header pixel jumping and keeps row-spanned headers aligned correctly.

- **Fixed** Table Fixed table rows collapsing in overflow state when no rows with columns are available to define the table width.

- **Fixed** Table Fixed header rendering for interactive header content and updated selection logic so selectable expanded group rows and selectable group rows work correctly with table selection.

## 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.

## Version 2.2.0 (2026-02-23)

- **Fixed** Map utils Fixed getRoutePolylines to return the correct HERE map Polyline list. Also corrected the return types for getGroups, getMarkers, and getRoutePolylines to use the proper map object types.

- **Fixed** RadialBarCharts Fixed RadialBarCharts responsive container to remove the fixed initial dimension, allowing charts to take the available width of the parent container.

- **Fixed** Select Prevent double box-shadow on Select and Multiselect inside input groups with icon addons.

- **Fixed** labels Fixed label heights for condensed filled labels to align with default condensed labels.

- **Fixed** Map settings Fixed the map settings options animation so dropdowns/panels now fade in and slide up when opened.

- **Update** MapTypeSettings Added visibleMapTypes for map-type visibility control via a single prop. The enableNightMap prop is now deprecated. Please control night visibility via visibleMapTypes instead.

- **Update** TimePicker Add a new disabled prop to disable the TimePicker input and its control buttons. If you previously set disabled via inputProps, you can now use the dedicated component prop instead. The TimePicker now also calls onChange when the input is cleared. Added a new dropdown prop for selecting times from a dropdown, and a minuteOffset prop to define the dropdown interval and button step size.

- **Update** Button Added support for rendering Button as an anchor element via the new as prop. Use as='a' together with a required href to render a link button while keeping native button type values for button elements.

- **Update** Notification Improved notification message readability by balancing line wraps in notification text content.

- **Update** Switch Added a new autoMinWidth prop. When minWidth is not set and autoMinWidth is true, the switch width uses the longer one of enabledText and disabledText.

- **New** CircularProgress Added new CircularProgress component.

- **New** Tracker Added a new Tracker component for compact status visualization with tooltip support, automatic block compression, and optional collapsing when the minimum block width is reached.

- **New** RadioCardGroup Added a new RadioCardGroup component for custom card-style radio selection, including inline, stacked, and stacked-horizontal variants with both options-based and compound-item APIs.

- **New** Pills condensed Added a nav-pills-filled-condensed version of filled nav-pills for use next to form elements like buttons and selects. This keeps heights aligned and provides a clearer way to indicate different views. Prefer these over the toggle button group for view switching.

- **New** Shadows Added configurable hover-shadow-* utility classes with built-in transition support and a new shadow-focused utility class for a focused shadow preset.

- **New** useSearchHighlight / SearchHighlightText Added the useSearchHighlight hook and SearchHighlightText component for native CSS highlight-based search results.

- **New** useCookies Added a new useCookies hook for setting, deleting, and checking browser cookies.

- **New** useRioCookieConsent Added a dedicated useRioCookieConsent hook for parsing the RIO cookie_settings consent cookie and returning typed RioCookieConsentInfo.

- **New** useUrlState, routeUtils Added the new useUrlState hook and updated routeUtils for simpler state-in-URL parsing/serialization with native URLSearchParams and typed URL config support.

- **New** classNames, mergeClassNameOverrides Added new utility helpers for CSS class handling: classNames for composing optional class tokens and mergeClassNameOverrides for overriding utility-class groups while keeping unrelated defaults.

- **New** ellipsis-middle Added new ellipsis-middle utility class for truncating text in the middle while keeping the suffix visible.

- **New** TextTruncateMiddle Added a new TextTruncateMiddle component for rendering middle-truncated text with a configurable suffix length.

- **New** New icons rioglyph- trailer-standard rioglyph- trailer-tipping rioglyph- trailer-liquid rioglyph- palette-empty rioglyph- box rioglyph- box-open rioglyph- mesh-box

- **Guideline** State in URL guideline Added a dedicated guideline page for deep linking and URL state, including best practices for what to store in URLs and pushState vs replaceState usage.

## 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)

- **Fixed** DatePicker Fixed DatePicker compatibility in ESM builds by unwrapping the CommonJS default export.

- **Fixed** Area, Line Fixed chart components type definition for prop "dataKey".

## Version 2.0.0 (2025-12-12)

- **Removed** We’ve modernized our build setup by removing CommonJS support and switching entirely to ESM. If your project still depends on CommonJS (for example, with older tooling like Webpack), your build may fail. Please update your development environment to support ESM.

- **Removed** Removed the root index.js barrel file that re-exported all components. This change eliminates multiple import paths, improves IntelliSense auto-import behavior, and prevents importing the entire UIKIT, ensuring proper tree shaking. Please update your imports to use default imports, for example: import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout'.

- **Removed** CalendarStripe Removed deprecated prop "render". Please use "renderDay" instead.

- **Removed** Collapse Removed deprecated prop "in". Please use "open" instead.

- **Removed** ClearableInput Removed deprecated prop "alwaysShowMask". Please use "maskVisibility='always'" instead.

- **Removed** Dialog Removed deprecated prop "onHide". Please use "onClose" instead.

- **Removed** SingleMapMarker Removed deprecated prop "size". Please use "anchorSize" instead. Removed deprecated prop "visibleOnHover". Please use "markerOnHover" instead.

- **Removed** DataTab Removed the internal "fade in" class names from the DataTab component, which were previously kept for backward compatibility with CSS transitions used in older service tests. Please use the new onAnimationStart and onAnimationEnd callbacks instead.

- **Renamed** Animations Renamed "framer-motion" component to "motion" as we have migrated to the latest motion library that was formerly known as Framer Motion.

- **Removed** NotificationsContainer Removed deprecated prop "stacked" since it is not supported anymore. Removed legacy usage documentation.

- **Breaking** Notification Removed deprecated prop "priority" since it is not supported anymore. Removed old notification API in favor of the notifications options object. If you still use the legacy API "Notification.info(message, title, timeOut, callback, priority)", please migrate to the format "Notification.info(message, options)".

- **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.

- **Removed** Removed old class "invisible". Please use "visibility-hidden" instead.

- **Icons** Renamed icon rioglyph- retweet rioglyph- repeat-square Renamed icon rioglyph- cost-efficency rioglyph- cost-efficiency Renamed icon rioglyph- eye-option rioglyph- eye-open Removed icon as it was a duplicate of rioglyph- component rioglyph- maintenance-components

- **Breaking** BarChart, RadialBarChart, PieChart, Legend With this release, the internal Recharts dependency has been migrated to version 3.x. This upgrade introduces a breaking change related to the Legend component: the payload prop, which was previously used internally to inject custom legend data, has been removed from Recharts. As a result, the legend behavior in BarChart and RadialBarChart has been updated. The default legend position is now correctly rendered vertically in the top-right corner. Previously, it appeared at the bottom despite the default settings. Please review your charts to ensure the legend position remains as intended. If you use colors defined inside your data objects for BarCharts, you must now provide both the items (your data array) and a custom content render function to the Legend. This replaces the old payload-based legend behavior. Series-based legends using a formatter continue to work as before. Recharts 2.x also used to have a prop named activeIndex that was setting which item the user was interacting with. In version 3.0, this prop has been removed. For more details, see the Recharts activeIndex guide https://recharts.github.io/en-US/guide/activeIndex/ If your PieChart uses an activeShape render callback, you should now use the ChartTooltip component and set its defaultIndex to replace the previous activeIndex behavior. See the whole Recharts migration guide for more details: https://github.com/recharts/recharts/wiki/3.0-migration-guide#breaking-code-changes

- **Fixed** FilePicker Fixed the type of the "files" parameter from FileList to File[] of the "onPick" callback.

- **Fixed** Rioglyph Fixed Rioglyph icon typing to expose a concrete IconType union of all icon names, improving autocomplete and safety for consumers.

- **Update** AssetTree Added new asset type "car" to AssetType type definition and to built-in type counter of the AssetSummary for the Tree component.

- **Update** VolkswagenApplicationHeader Updated VolkswagenApplicationHeader with new VW Group logo. This single group logo also replaces the logo for "VW Aktiengesellschaft" and "Group Logistics" resulting in an overall smaller header height.

- **Update** Migrated entire codebase from lodash to es-toolkit to leverage modern JavaScript.

- **New** AnimatedTextReveal Added new AnimatedTextReveal component emphasize text through motion for showing incremental updates or loading states.

- **New** useAutoAnimate Added a lightweight hook to animate add/remove/reorder operations of children with zero configuration.

- **New** fit-content Added new "min-width-fit-content" utility classes. See detailed explanation and comparison to other content-based min-width classes.

- **New** text-box Added new "text-box" utility classes to trimming off extra spacing from the block-start edge and block-end edge of a text element's block container.

- **New** icons Added new rioglyph style for disabled icons with a line

- **New** useIncomingPostMessages and usePostMessageSender New tooling for sending and receiving postMessage events. We recommend utilizing "action-style" events if you control both ends of the communication. This simply means to send event objects with a type property and an optional payload - very similar to Redux actions. To receive messages, the new useIncomingPostMessages can be used. It allows a declarative style of registering action-style event handlers in your application. You can still use the "simple" event handler variants, when you're interested in receiving events that don't follow the action-style approach. The usePostMessageSender hook provides easy access to methods used to send message events either to a dedicated destination or to "broadcast" events to all iframes. Note that the existing usePostMessage hook will be deprecated in a future release.

- **Icons** New icons rioglyph- ai rioglyph- arrows-collapse rioglyph- arrows-combine rioglyph- arrows-expand rioglyph- arrows-horizontal rioglyph- arrows-split rioglyph- assigned rioglyph- axis-x rioglyph- axis-y rioglyph- axis-z rioglyph- bar-chart-box rioglyph- battery-charging rioglyph- brain rioglyph- branch-horizontal rioglyph- branch-remove rioglyph- branch-vertical rioglyph- broadcast rioglyph- bulb rioglyph- chip rioglyph- cloud-progress rioglyph- coffee rioglyph- compass rioglyph- crown rioglyph- discount-badge rioglyph- emergency-stop rioglyph- eye-closed rioglyph- eye-open rioglyph- filter-reset rioglyph- get rioglyph- give rioglyph- globe-alt rioglyph- hierarchy rioglyph- history rioglyph- insert rioglyph- leafs rioglyph- magic-wand rioglyph- note rioglyph- progression rioglyph- satellite-radar rioglyph- stack-add rioglyph- stack-iso rioglyph- stats-high rioglyph- stats-line-dots rioglyph- stats-low rioglyph- stats-medium rioglyph- time-incomplete rioglyph- unassigned rioglyph- unavailable rioglyph- variable rioglyph- workflow-step rioglyph- workflow Updated icons rioglyph- arrow-down rioglyph- arrow-left rioglyph- arrow-right rioglyph- arrow-up rioglyph- battery-level-empty rioglyph- battery-level-full rioglyph- battery-level-low rioglyph- cloud-download rioglyph- cloud-not-saved rioglyph- cloud-upload rioglyph- compare rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- cost-efficency rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- error-sign rioglyph- flash rioglyph- info rioglyph- maintenance-components rioglyph- merge rioglyph- missing rioglyph- off rioglyph- refresh rioglyph- repeat rioglyph- resize-full rioglyph- resize-horizontal rioglyph- resize-small rioglyph- resize-vertical rioglyph- save rioglyph- trash rioglyph- volume rioglyph- workshop rioglyph- wrench Removed icons rioglyph- video-off rioglyph- wifi-off

## Version 1.13.2 (2025-11-19)

- **Fixed** Obfuscate data Fixed a bug that triggered an infinite loop when data-pii was applied to a nested child element.

- **Update** Button Added new "unstyled" buttons style

## Version 1.13.1 (2025-10-20)

- **Fixed** Fixed bundling npm package. Resolve nested folder structure in npm package build.

## Version 1.13.0 (2025-10-20)

- **Fixed** fuel type utils Fixed missing root export for fuel type utils.

- **Fixed** Action button style Fixed the muted style for action buttons.

- **Fixed** MapMarker Fixed the active styling for the map marker active state to visually balance the state icon.

- **Update** Rioglyph Added the missing feature to use external SVGs as a rioglyph icon.

- **Update** FilePicker Added new "fullHeight" flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow.

- **New** max-content Added new "min-width-max-content" and "min-width-min-content" utility classes. The first prevents content from breaking by expanding to fit its full width, while the second allows content to shrink to the smallest width possible without overflowing.

- **New** Grid Added new "grid-template-end--1" utility class. This class allows grid items to span until the last grid line, effectively positioning them to extend to the end of the grid.

- **New** Obfuscate data Added new "data-hide-pii" attribute to the <html> element to obfuscate sensitive data directly in the frontend. Obfuscate names, emails, or phone numbers — without needing backend filtering or extra code changes.

- **Icons** New icons rioglyph- circle-dashed rioglyph- square-dashed rioglyph- cube-dashed rioglyph- cube rioglyph- group-blocks rioglyph- dashboard-view rioglyph- ok-dashed rioglyph- prompt rioglyph- recycle rioglyph- warehouse rioglyph- status-change rioglyph- status-change-horizontal rioglyph- transition-right rioglyph- transition-push-right rioglyph- migrate rioglyph- convert rioglyph- shelve rioglyph- conveyor-belt rioglyph- tracking-package rioglyph- issue-tracking Updated icons rioglyph- ok-sign rioglyph- ok-circle

## Version 1.12.0 (2025-09-22)

- **Fixed** Select Fixed an issue in the Select component where clearing the filter input after a no-results search caused the option list to remain incomplete. The dropdown now correctly restores the full option set when the filter is cleared.

- **Fixed** AssetTree Fixed an issue where clicking the checkbox on a tree group would also toggle its expanded state. Now, selecting a tree group via its checkbox only triggers selection and no longer expands or collapses the group. This prevents unintended virtualization behavior where expanding a node could cause the tree to switch into virtualized mode, resulting in the loss of tree group selections.

- **Fixed** Callout Removed overflow hidden from callouts so dropdowns can be shown correctly.

- **Fixed** Ellipsis Fixed "ellipsis-1" class.

- **New** Rioglyph, fuel type utils Added a new component for rendering Rioglyph icons as a span element. The component also supports paired icons, allowing two glyphs to be displayed together as a combined symbol. In addition, a "getFuelIcon" helper function was introduced that maps fuel types to their corresponding icons, ensuring consistent and correct icon usage across the application.

- **Update** FormLabel Added missing "Node" type info for supportingText the props table and changed the handling of supportingText styling so that the text-italic class is only applied when the supportingText is a string. If you provide a string wrapped in a div or span, you have to set the italic class manually.

- **Update** Tree Added a new "pairIcon" prop to TreeItem allowing pair icons to be individually specified in the Tree component.

- **Update** ClearableInput Added new input mask related props "maskOverwrite", "maskDefinitions", and "maskDispatch" to support dynamic masking for more complicated use cases and to give more control over the masking.

- **Update** useOnboardingTour Updated the typings and documentation for the useOnboardingTour hook.

- **style** Pills Updated the hover style for the application header navigation as well as for the nav pills.

- **Icons** As RIO will support more fuel types in the future, and because of inconsistencies in existing naming conventions, we introduced a new icon: "rioglyph-fuel-liquid". This icon replaces "rioglyph-fuel-diesel" to better represent a broader range of liquid fuels. With this change, there are now four dedicated fuel icons available, plus one for a mixed fuel type. rioglyph- fuel-liquid rioglyph- fuel-electric rioglyph- fuel-hydrogen rioglyph- fuel-gas rioglyph- fuel-mix With this approach, frontends can use the same icon for diesel or gasoline and also for CNG and natural gas by simply using the new "getFuelIcon" function form the Rioglyph component. The old “rioglyph-fuel-diesel” icon will continue to work, but it will no longer be listed in the UIKIT demo page icon list. Additional new icons: rioglyph- video rioglyph- video-off

- **Demo** Service-specific settings Updated the ApplicationHeader demo to include an example of service-specific settings, establishing a consistent approach for presenting unique configurations that cannot be included in the global user profile settings. It helps ensure a familiar user experience across different services while keeping global settings clean and focused.

## Version 1.11.0 (2025-08-11)

- **Fixed** Map settings Updated implementation for map satellite view to support zoom limits by using a hybrid map layer approach.

- **Fixed** SteppedProgressBar Fixed styling issue in circular variant of the SteppedProgressBar when an item is active.

- **Fixed** SplitDialog Fixed left side width for larger dialogs. Added new prop to hide the split divider.

- **Fixed** FormLabel Fixed usage of HTML tag label only when part "htmlFor" is set and has a value.

- **Update** Tree Added a new "expandedIcon" prop to the TreeGroups to support showing a different icon when the group is expanded.

- **Update** Sticky table columns Renamed "table-sticky-cell-first" and "table-sticky-cell-last" to "table-sticky-column-first" and "table-sticky-column-last" for improved clarity. Updated the styles to respect the table header and prevent content from peeking through when horizontally scrolled.

- **New** useAverage, useCount, useMin, useMax, useSum Added useAverage, useCount, useMin, and useMax, and useSum hooks for locale-aware numeric aggregation of object lists. Supports specifying a dot-separated path to the target property.

- **New** Table grid lines Added new table class "table-grid-lines" that is useful when building data heavy tables.

- **New** Table row span and Table double row header Added new table examples showcasing row span and double header layouts to demonstrate table design capabilities for data heavy tables.

- **New** Progress bars indeterminate style Added new indeterminate style to show a progress bar even when you not know how long it will take.

- **Demo** Templates Added new template sections and several UI block examples. Updated the template menu structure to improve navigation and discoverability.

- **Demo** Email generator We’ve built a neat little email editor that helps you compose emails and copy the HTML code.

- **Demo** Route generator There is a new route generator with a JSON export of the LAT/LNG coordinates.

## Version 1.10.1 (2025-01-08)

- **Fixed** Map settings Changed implementation for map satellite view as the old implementation relied on deprecated Here APIs.

## Version 1.10.0 (2025-07-28)

- **Fixed** Fixed an issue where clicking the "Scroll to Top" arrow button would block further scrolling down the page. The scroll behavior is now fully restored after returning to the top, ensuring smooth navigation throughout.

- **Fixed** DatePicker Fixed styling issue in DatePicker inputs with error feedback where input text was unnecessarily cut off due to padding for the clear icon, even when no clear button was rendered.

- **Fixed** ApplicationHeader Fixed an issue where the application header rendered in mobile style on initial page load when the container width could not be determined in time. This resolves visual jumping between mobile and desktop header layouts during mount.

- **Fixed** SavableInput / SavableDateInput Moved error handling into the components to simplify feedback styling. Added two new props, "errorMessage" and "hideErrorIcon", to control the visual appearance of error feedback.

- **Fixed** Panels, Pills, Badges Fixed various element styles for brand themes.

- **Update** Tree Added a new "icon" prop to TreeItem allowing icons to be individually specified or explicitly omitted in the Tree component. Also updated the TreeGroups to support icon values with or without the rioglyph- prefix for improved flexibility.

- **New** CSS Container queries Introduced new utility classes to make use of container queries, enabling responsive spacing and layout adjustments based on container width rather than viewport size. For more details, please check out our responsiveness guidelines.

- **New** Rounded table Added new utility classes "table-bottom-rounded" and "table-rounded" for use when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners.

- **Icons** Added icons icons rioglyph- train rioglyph- cargo rioglyph- design

- **Style** We migrated our codebase from Less to Sass to modernize our tooling and take advantage of the latest CSS capabilities, as Less is no longer actively maintained.

- **Demo** Renamed the main navigation items to improve clarity and consistency. “Design” is now called Foundations, and “UI Templates” has been simplified to Templates to better reflect their purpose.

- **Demo** Added new sections and examples to UI templates that serve as a quick starting point for developing your own layouts and interfaces. See Expandable details, Details views, and Progress cards. Moved the panel example from the foundations tab to Panel variants.

## Version 1.9.0 (2025-06-30)

- **Fixed** Tooltip / SimpleTooltip Fixed delaying tooltips using a single delay number. Tooltip delay now only applies to showing, not hiding. To configure both show and hide delays, use the object format instead of a single delay number.

- **Fixed** ClearableInput Properly pass external ref to underlying masked input component using its inputRef prop.

- **Fixed** DatePicker Fixed an issue where the DatePicker would render incorrectly when used as a child inside a table cell.

- **Update** TableHead, TableCol Extended table components to pass additional props to the underlying tag.

- **Update** useTableSelection Extended useTableSelection hook to allow setting the selected rows and change the active row from the outside using the "setSelectedRowIds" and "setActiveRowId" setter functions.

- **Update** Select, Multiselect We’ve reverted the max-width of the Select, and Multiselect dropdown to 100% to stay consistent with other components and to prevent unnecessary line breaks within dropdown items. If the dropdown appears too wide, you can use the dropdownClassName prop to apply a shorter max-width-x utility class as needed.

- **Update** AssetTree Extend the Tree component to virtualize tree items when a certain threshold is reached. The number of items rendered beyond the visible area can be controlled using the "overscan" prop. This change improves performance for large trees and long lists.

- **Update** Map Extend the Map component to allow specifying minimum and maximum zoom levels. By default, the minimum zoom level is set to 3, defining the furthest zoomed-out view. The maximum zoom level, representing the closest zoomed-in view, is set to 20. Improved zoom behavior to reduce momentum and allow for more controlled zooming.

- **Update** FormLabel Extend the FormLabel component to allow passing in a React element as supporting text, making it easier to add question mark icons with tooltips.

- **New** SavableDateInput Added new dedicated savable input component that wraps the DatePicker.

- **New** BarList Added BarList component to display customizable, animated horizontal bars for comparative data.

- **New** useTableExport Added new custom hook to easily export table data as CSV.

- **New** useIsFocusWithin Added new custom hook to easily detect if the focus is inside a defined document node.

- **Docu** Pagination Added usage documentation for pagination and explained why the load more button is preferred for tables.

- **Demo** UI Templates Added new sections showcasing various UI templates and blocks that serve as a quick starting points for developing your own layouts and interfaces.

## Version 1.8.0 (2025-05-19)

- **Fixed** Map Fixed issue with satellite view layer not rendering correctly when Norwegian language is selected.

- **Fixed** usePostMessage Remove logging of triggered events to the console.

- **Fixed** Height classes Corrected height calculation when using ""...-height-100vh" classes inside module-content; vertical padding was not properly subtracted.

- **Update** URL feature toggles Made the feature toggle value types more precise. Added new feature toggle definition functions that allow you to specify a default value.

- **Update** AssetTree Extended the Tree component with an onTypeFilterChange callback, allowing the service to filter selected assets accordingly.

- **Update** Multiselect Added a maximum width of 200px for the Multiselect dropdown component. Additionally, there are two new props "dropdownClassName" and "btnClassName" to allow further customization similar to the Select component.

- **Update** ButtonToolbar Extend alignment prop to center buttons.

- **Update** Switch Added new "className" prop to the Switch.

- **Update** ButtonDropdown Added new prop "toggleButtonType" to ButtonDropdown component to allow using a button, a tag or a label as toggle element.

- **Update** ClearableInput Added a new prop "maskVisibility" to control when the mask pattern is visible. Deprecated the prop "alwaysShowMask". in favor of maskVisibility.

- **Update** useOnboardingTour Expose internal onDestroyed callback. Add "disableActiveInteraction" prop to disable interaction of highlighted elements.

- **Update** useSorting Added new callback function "setSortDirection" allowing to set sort direction when used with table card sorting.

- **New** useLocationSuggestions Added new custom hook to fetch locations from Here API that can be used for search inputs.

- **New** useSearch Added new custom hook to filter a list of objects by a search value.

- **New** useTableSelection Added new custom hook to handle both single and multiple row selection in tables, optimized for large datasets.

- **New** TableHead, TableCol Added new table components "TableHead" and "TableCol" to simplify table structures especially when used with custom hooks like "useTableSelect" and "useSorting".

- **New** SvgImage Added new component that helps rendering SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes.

- **Icons** New icons rioglyph- envelope-open rioglyph- envelope-indicator

- **Replaced** Replaced react-input-mask with react-imask in TimePicker and ClearableInput components. The mask prop format has changed and is no longer fully compatible with the old react-input-mask syntax. The main difference is the number placeholder, which has changed from "9" to "0". Please update the mask prop accordingly when using the ClearableInput with an input mask.

## Version 1.7.1 (2025-02-14)

- **Fixed** Banner Fixed height animation of the Banner component when expanding. Added prop "initialAnimation" to disable initial content animation.

- **Fixed** FormLabel Check for various input group sizes to render respective label text sizes.

- **Fixed** SplitDialog / ListMenu Fixed the issue where a ListMenu dropdown was rendering all menu items on mobile upon mount. Now, only the dropdown is rendered initially.

- **Fixed** RIOglyph Removed default aspect ration of 1/1 because of problems in flex/grid layouts.

- **Fixed** Checkbox Fixed broken indeterminate state

- **Update** RIOglyph Added new rioglyph-align-top, rioglyph-align-bottom and rioglyph-align-baseline classes for proper alignment width texts. Replaced previously introduced has-inline-icon with new rioglyph-align classes.

## Version 1.7.0 (2025-02-10)

- **Fixed** Collapse Fixed visible content overflow in the Collapse and Expander components during content animations.

- **Fixed** ApplicationLayout Fixed the issue with passing a ref to the ApplicationLayout by exposing the underlying wrapper element. When merging the external ref with the internal ref, the wrapper is now properly exposed, eliminating the need for accessing ref.current.current in the invoking component.

- **Fixed** ButtonDropdown / useClickOutside Fixed performance of rendering many dropdowns in a large table by introducing an "isActive" flag to the useClickOutside hook so that events are only registered and listening when the dropdown is actually open.

- **Fixed** Route Fixed rendering of dashed routes via the "lineDash" prop.

- **Fixed** List groups Fixed list group buttons active style.

- **Icons** RIOGlyph We've transitioned the RIOGlyph icon font to an SVG-based system and allowing support for custom SVGs. Please read our guidelines Almost all RIOGlyph implementations will work out of the box. However, in certain cases, adjustments are required because RIOGlyph icons no longer behave as a font. What has changed? Previously, icons acted like text, inheriting line-height and vertical-align naturally. Now, as SVG elements, icons better have layout adjustments in inline text scenarios. The HTML structure for MapMarkers has been changed to accommodate the new icons. Please update the DOM selectors in your tests accordingly if they rely on the markup. All icons can now also be displayed as filled icons by adding rioglyph-filled Recommended solution < span className = " has-inline-icon " > Lorem ipsum dolor sit amet < span className = " rioglyph rioglyph-face-smile " > </ span > </ span > Lorem ipsum dolor

- **Update** Dialog Changed dialog footer to use flex layout to ensure proper button positioning. No more need to add "pull-right" or custom flex classes.

- **Update** Dialog animation Add support for the browser's "prefers-reduced-motion" flag. When this flag is enabled, dialog animations are disabled. This can be helpful for customers experiencing performance issues while running the application.

- **Update** ListMenu Added new props to ListMenuItem to allow adding a badge for the list menu group header.

- **Update** AppNavigationBar Added new props to AppNavigationBar to support a back button title, a subtitle, and a title size. The title is now always centered.

- **Update** Notifications Replaced the underlying notification library with "react-toastify", introducing new options while maintaining the same API for backward compatibility. This update also includes a refreshed notification style.

- **Update** Charts Updated internal Recharts library to latest version 2.15.0 to remove some warnings.

- **style** Labels Updated the design of standard labels for a more modern look and added documentation on when to use them.

- **New** Button Added new "muted-filled" button for occasions where the default button is to prominent and the muted button is to subtle.

- **New** StepButton Added new "StepButton" component for convenience and to ensure consistent styling of this type of button.

- **New** ButtonToolbar Added new "ButtonToolbar" component for convenience and to ensure consistent spacing of buttons.

- **New** FormLabel Added new "FormLabel" component for convenience to be used on form elements that utilizes a "htmlFor" prop and a label or other form elements.

- **New** LabeledElement Added a simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements

- **New** Card Added new "Card" component for convenience to apply default styling for a card like element. This component aims to simplify and align common card styling.

- **New** Avatar Added new "Avatar" component for showing the user name initials, a user image, or a user icon.

- **New** Banner Added new "Banner" component for rendering informational content on a page.

- **New** AccentBar Added new "AccentBar" component for visual cues.

- **New** VirtualList Added new "VirtualList" component for rendering large lists using a windowing approach.

- **New** useToggle Added new "useToggle" component to simplify boolean state handling. Use it to handle toggle-based logic like switches, modals, or content visibility.

- **New** Chart colors Added new chart colors to the chart color map.

- **Demo** Draggable map marker Added new map demo to showcase draggable map marker.

- **Icons** New icons rioglyph- light-bulb Renamed icons rioglyph- filled-chart rioglyph- area-chart Updated icons rioglyph- am rioglyph- angle-double-down rioglyph- angle-double-left rioglyph- angle-double-right rioglyph- angle-double-up rioglyph- area-in rioglyph- area-out rioglyph- beacon rioglyph- bookable-poi rioglyph- bookmark-square rioglyph- brake rioglyph- businessman rioglyph- car-wash rioglyph- carrier rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- construction rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- document-out rioglyph- download rioglyph- driver-card rioglyph- driver rioglyph- drivercard-in rioglyph- drivercard-out rioglyph- erase rioglyph- file-signature rioglyph- fill rioglyph- folder-open rioglyph- home rioglyph- inbox-in rioglyph- inbox-out rioglyph- log-in rioglyph- logout rioglyph- map-location rioglyph- map-marker rioglyph- pencil-square rioglyph- pm rioglyph- retrofit rioglyph- role-management rioglyph- tachograph-download rioglyph- tms rioglyph- trailer rioglyph- user rioglyph- volume rioglyph- warning-sign rioglyph- weight

- **Update** Dependencies Updated the minimum React version requirement to 18 to ensure compatibility with the latest features and optimizations. If you are using older versions of React, please update.

- **Removed** Removed the outdated cross-browser style documentation.

- **Update** Notifications Extended the writing style guide for guidance for using different notification types

- **Update** Commonly misspelled words Extend the writing style guide for a list of commonly misspelled or misformatted words

- **Update** Formatting numbers with units Extended the list of formats for examples of "kilowatt-hour" and "megawatt-hour". Please note that these units are not yet officially supported by TC39.

## Version 1.6.1 (2024-12-09)

- **Fixed** ApplicationLayout Fixed the application layout to ensure the body contains only a single child, addressing issues with the recently introduced grid layout for the body scrollbar element.

## Version 1.6.0 (2024-12-02)

- **Fixed** SplitDialog Fixed the SplitDialog prop documentation for "useOverflow" to clarify that its default value is "true," unlike other dialogs.

- **Fixed** Multiselect Fixed the Multiselect component to correctly manage the dropdown state and filter value when used in multiline mode with an active filter.

- **Update** Tree Added "treeHeaderContent" prop to the Tree component for rendering additional custom content at the top of the tree, useful for navigation pills.

- **Update** Dialog Extended dialog sizes for "fullheight-lg" and "fullheight-xl".

- **New** useOnboardingTour Introducing a new way to onboard users via an onboarding tour by using the "useOnboardingTour" custom hook. Note that weh have deprecated the "clickflow" prop for the OnboardingTip component with this new feature.

- **New** OnboardingDialog Added new OnboardingDialog to initiate a onboarding tour and acts as the welcome dialog for the user of a service.

- **New** Grid rows Added new grid helper class "grid-rows-auto-1fr-auto" to support a 3 row layout with expandable middle row.

- **Icons** Updated icons rioglyph- cost-efficency Added icons rioglyph- newspaper rioglyph- rocket rioglyph- trophy rioglyph- check-badge rioglyph- check-shield rioglyph- sparkles rioglyph- academic-cap rioglyph- onboarding rioglyph- bookmark rioglyph- bookmark-square

## Version 1.5.3 (2024-11-05)

- **Fixed** AssetTree Fixed asset tree height by setting the "scrollbar-content-wrapper" to display flex and let the tree wrapper grow in the flex column direction.

## Version 1.5.2 (2024-11-04)

- **Fixed** SmoothScrollbars Changed height-100pct to min-height-100pct because of height side-effects in chrome.

- **Icons** Added icons icons rioglyph- oil-can

## Version 1.5.1 (2024-10-22)

- **Fixed** Pills Fix rendering icons in justified filled pills when there is an icon only.

- **Fixed** SmoothScrollbars Added height-100pct to the recently introduced smooth scrollbar content wrapper. This also fixes a side-effect on the AssetTree component.

- **Fixed** MapMarker Tone down the POI marker color to better match the new Geofence color and to work better on a large satellite map.

## Version 1.5.0 (2024-10-21)

- **Fixed** Route Fix setting route arrow style. Added color constants for using status colors for routes. Extend demo examples to showcase usage of route styles and colors.

- **Fixed** SmoothScrollbars Fix updating the scrollbar handle when the content height changes. This fix introduces a new wrapper div to check the children's height. Please check your tests and update them in case you rely on the old structure.

- **Fixed** Select Fixed an issue with updating the dropdown menu options after the initial render, ensuring that the filter utilizes the updated DOM nodes.

- **Update** LineChart Extended charts to render additional axis. The demos have been extended for interactive legends to highlight active lines.

- **Update** Route Extended Route component to allow storing custom data to it which can be used when clicking on the routes polyline to set the route active.

- **Update** Map isoline Extended the Polygon component to import the RIO colors to use it for an isoline or other polygons. Extended the demo to also include isoline colors.

- **Update** Colors Adapted the "gray-decent" slightly and with that all derived classes like "bg-decent" and "hover-bg-decent"

- **Update** Forms All form inputs have a subtle shadow now.

- **New** Map marker A new map marker color has been added for road restrictions. The geofence color has been updated to avoid confusion with the restriction color used by HERE maps for their road restrictions. The new geofence color provides significantly better contrast and is clearer to see on the satellite map type.

- **New** Chat Added new pure CSS chat component

- **New** FadeUp Added new components to fade in from the bottom when an element appears on screen. This can be used to stagger elements on scroll.

- **New** FadeExpander Added new components to expand content. This can be used to reveal or hide additional content triggered by all kinds of interaction.

- **New** Cursor Added more cursor-style utility classes

- **New** Shadows Added new shadow classes "shadow-subtle" and "shadow-muted", as well as directional classes "shadow-muted-down" and "shadow-default-down" to be used on light and white backgrounds. The hard shadow direction styles are now slightly more blurred to remove the hard line in the shadow. Note: the following shadow classes are deprecated: "shadow-smooth-to-top", "shadow-smooth-to-bottom", "shadow-hard-to-top", and "shadow-hard-to-bottom". Please use "shadow-smooth-up", "shadow-smooth-down", "shadow-hard-up", and "shadow-hard-down" instead.

- **New** useSorting Added new useSorting hook for easily sorting any list by specified key using natural sort order

- **New** URL feature toggles Added URL-based feature toggle handling and description of how to use them

- **Icons** Added icons icons rioglyph- bookable-poi rioglyph- car-wash Updated icons rioglyph- truck rioglyph- truck-baseline rioglyph- truck-breakdown rioglyph- truck-unit rioglyph- van rioglyph- van-baseline rioglyph- trailer rioglyph- trailer-baseline rioglyph- trailerposition rioglyph- car rioglyph- car-baseline rioglyph- bus rioglyph- bus-baseline rioglyph- bus-breakdown rioglyph- filling-e-station rioglyph- filling-station rioglyph- euro-note rioglyph- order rioglyph- palette rioglyph- palette-broken rioglyph- parcel rioglyph- parcel-broken rioglyph- empty

- **Update** Border radius and shadows The default border radius has been increased, and new shadow styles have been introduced, affecting various elements such as buttons, inputs, and panels. These updates collectively enhance the overall design, providing a more modern, refined, and visually appealing look and feel.

## Version 1.4.1 (2024-09-12)

- **Update** ButtonDropdown Added forwardRef to ButtonDropdown and pass it to the underlying dropdown toggle button. Fixed ButtonDropdown demo page examples.

- **Fixed** Tooltip Wrapped Tag and Switch component in forwardRef so they work with the OverlayTrigger and SimpleTooltip component

- **New** Map fullscreen demo Added a fullscreen map demo with rendering some metrics for inspection and customer feedback

## Version 1.4.0 (2024-09-06)

- **Fixed** Fixed dark mode listener when trying to read the theme from the colorScheme cookie

- **Fixed** Charts Fixed rendering of chart legends for all charts

- **Update** LineChart, AreaChart Extended LineChart and AreaChart components with reference lines

- **Update** Select Added "isLoading" prop to show a loading spinner inside the Select and Multiselect dropdown

- **Update** useKey Extend useKey hook to allow specifying specific keys to listen for

- **New** ComposedChart Added new simple ComposedChart component to render a combination of line, area, and bar charts

- **New** GroupedItemList Added new GroupedItemList component to render a list grouped by a specific key with the flexibility to customize the group header and the rendered items

- **New** LicensePlate Added new LicensePlate component to display license plate information with various customization options

- **Icons** Added and updated icons rioglyph- air-pay rioglyph- euro-note rioglyph- language rioglyph- calendar-parking rioglyph- engine

- **Update** Notifications Extended the writing style guide for notification and "copy to clipboard" guidelines

## Version 1.3.0 (2024-07-26)

- **Fixed** TreeOptions Fixed tree options tooltip position

- **Fixed** DataTab Fixed DataTab title to avoid being set to the div element and used as native tooltip

- **Fixed** SimpleDialog, SplitDialog Fixed typings of SimpleDialog and SplitDialog

- **Fixed** Select Fixed italic placeholders for Select and Multiselect

- **Fixed** Fixed DateRangePicker type for backwards compatibility

- **Update** Sliders Added new "color" prop

- **Update** Switch Added new "color" prop

- **Update** Forms Added new focus shadow for form inputs and changed the input border color

- **Update** OverlayTrigger, Tooltip, OnboardingTip, Popover The OverlayTrigger and Popover components are no longer based on react-bootstrap. They have been rewritten to remove the dependency and to fix some warnings when used with React 19.

- **New** useElapsedTime Added new useElapsedTime hook to get the time since a component was mounted or from a provided starting time

- **New** Flexbox Added class "flex-0" to flexbox utility classes

- **New** Rounded Added class "rounded-inherit" to rounded utility classes

- **Update** RIO Theme The danger color has been slightly adjusted to better match the other colors. Dark mode colors for danger, warning, and success have also been updated.

- **Update** VW Theme Adapt highlight colors to VWAG guidelines

- **Update** Formatting guide Extracted number and date formatting guidelines into a dedicated formatting guide page. This makes it easier to find and to keep the writing style guide shorter.

- **New** Form labels and placeholders Extended the writing style guide for form labels and placeholders

## Version 1.2.2 (2024-06-27)

- **Fixed** MapSettings Fixed rendering of map settings dropdown header items

- **Fixed** Checkbox Fixed the rendering position of the checkbox in the grid layout using align-baseline, ensuring it remains stable when checked and unchecked

## Version 1.2.1 (2024-06-27)

- **Fixed** MapSettings Fixed rendering of map settings dropdown when used in unit tests

- **Fixed** Tree Fixed Tree scrolling when used as a standalone component without the wrapping AssetTree and when a "scrollHeight" is defined

- **Fixed** AssetTree Merged the nested elements ".TreeLabel" and ".TreeLabelName" into a single element for TreeNode and TreeLeaf. This reduces the number of DOM elements and enhances performance. Note that you may need to update selector paths in integration tests if they reference tree items.

- **Fixed** Key Fixed key style for dark mode

## Version 1.2.0 (2024-06-26)

- **Fixed** SmoothScrollbars Added missing root export for SmoothScrollbars component

- **Fixed** ErrorState, EmptyState, CustomState Fixed button alignment for mobile screens

- **Fixed** Marker Fixed "list-group-item" style when using color indicators

- **Fixed** Multiselect Fixed filter input padding when Multiselect is used with a leading input addon

- **Fixed** useAfterMount Fixed hook useAfterMount functionality

- **Update** MapSettings Enhance MapSettings to include item labels. Substitute MapSettingsPanel with a Dropdown when labels are available. Please provide labels for users to improve usability. Note that providing labels will become mandatory in the future.

- **Update** Marker Added new mapMarker "cursor" props

- **Update** ListMenu Added new prop "trailingInputAddon" to allow adding additional elements to the filter input

- **Update** DeviceUtils Added new device utils helper function to check for Apple Mac OS to be used for showing mac specific keys

- **New** Feedback Added new feedback components to simplify requesting user feedback for various use cases

- **New** Key Added style for keys by using the "<kbd>" HTML tag

- **New** Visibility Added new "visibility-hidden" class to only target the visibility without setting display to none

- **New** Input resize Added new input resize classes

- **Icons** Added new Icon rioglyph- layer-pois

## Version 1.1.0 (2024-06-17)

- **Fixed** CalendarStripe Fixed CalendarStripe component when resizing and rendering different amounts of columns

- **Fixed** AssetTree Fixed rendering issue in AssetTree component when switching mode between "fly" and "fluid" externally

- **Fixed** Marker Fixed broken Marker component when using it without an icon

- **Fixed** Pills Fixed disabled styles for stacked and filled nav-pills

- **Fixed** Traton Theme Fixed border radius for Dropdown, MapMarker, Slider, Tag, and Buttons

- **Update** Marker Updated marker style for active and inactive markers. Extend marker colors for status colors. Adapt default colors for map for better readability in light and dark mode. Added new prop "pinging" to SingleMapMarker to render a pinging animation. Another new prop "anchorIconName" was added to render an icon directly on the markers anchor. The map direction icon can now be replaced via the new "stateIconName" prop and the default moving state can be changed.

- **Update** AssetTree Added new prop "treeOptionsTooltip" to Tree component to show a tooltip for the tree options dropdown

- **Update** ActionBarItem Updated the "ActionBarItem.List" style used for the service info popover. Please make sure to use the "ActionBarItem.List" and "ActionBarItem.ListItem" components to design the service info for the application header.

- **Update** ErrorState, EmptyState, CustomState Added the prop "bsStyle" to the state components buttons to define other button styles like a default button. Also, when providing an href value, the button is rendered as a link. The headline size will increase now at the xl breakpoint to have a slightly smaller text size for smaller screens.

- **Update** NoData Improved readability by improving text color contrast. Removed text uppercase according to the writing style guide.

- **Update** Fieldset Update "fieldset" and "legend" style for grouping form elements. Added demo to showcase utility of using fieldsets in forms.

- **Icons** Icons Update icons optical center to work better within circles like the direction icon for the map marker rioglyph- direction rioglyph- parking rioglyph- antenna rioglyph- heart rioglyph- location-arrow

- **New** CSS Grid & Subgrid Added multiple CSS Subgrid utility classes and examples. Extended Grid classes and documentation

- **New** Added bg-none and hover-bg-none class

## Version 1.0.0 (2024-06-03)

- **Breaking** With this version, we have started migrating all components towards Typescript for better typing support and documentation. With this migration, we will remove the internal types.ts file. As it was not intended to be used by any service, please make sure you update your imports accordingly. Check out the How to for more details. Be aware of possible changed component types as well.

- **Breaking** Map With this version the HERE map implementation has changed significantly since we have migrated the map internally to the latest HERE APIs. This includes also the map rendering where the default render engine has changed from WebGL to HARP. Raster maps are rendered with the P2D engine. Due to this migration, the map types have a different design now. To make use of the new rendering engine, please add the following HERE dependency to your project. < script type = " text/javascript " src = " https://js.api.here.com/v3/3.1/mapsjs-harp.js " > </ script >

- **Removed** Fade Removed several deprecated props from the Fade component

- **Removed** Removed "BrowserWarning" component

- **Removed** Removed "text-muted" utility class. Use "text-color-gray" instead

- **Removed** Removed "GroupSelectionUtil" getNewGroupedSelected utility function

- **Removed** Removed getOffsetTopWholeScreen utility function

- **breaking** BottomSheet / Sidebar Renamed prop "useBackdrop" to "hasBackdrop" for BottomSheet and Sidebar component

- **breaking** CalendarStripe Deprecated "render" prop of "CalendarStripe" component in favor of new "renderDay" prop

- **breaking** Collapse / ExpanderPanel / ExpanderList Removed callbacks "onEnter", "onEntering", "onExit", and "onExiting" for ExpanderPanel and Collapse components. We introduced Framer Motions "onAnimationStart" callback instead. The ExpanderPanel header style underwent slight changes. The "in" class for the collapse is no longer used. Additionally, the "react-transition-group" library has been replaced with "framer-motion". The prop "mountOnEnter" has been removed from the ExpanderPanel, ExpanderList and Collapse components. Use "unmountOnExit" instead to control whether the collapsed content should be removed from the DOM when it is collapsed. The collapse prop "in" has been renamed to "open" to align with other components.

- **breaking** List Groups and Expanders List groups no longer have a border and a border-radius by default. This has the advantage that they can now be used within other elements without having to overwrite many CSS values. To get the same look as before, you need to set the classes "border" and "rounded". Expander lists now have props for these two CSS properties, which are set to true by default.

- **breaking** Resizer The Resizer component has been migrated from class component to functional component. With that the updated size value need to be set with a state setter function. Example: const handleResize = ( diff: number ) => setBoxWidth ( oldWidth => oldWidth - diff )

- **breaking** Select / Multiselect Changed roles of Select and Multiselect dropdown menu from "list" to "menu" and the role of the individual select options from "presentation" to "listitem" to be aligned with the ButtonDropdown component. Fixed automatic drop direction check to open the dropdown above the toggle when there is not enough space. Removed deprecated size values "small" and "large" in favor of "sm" and "lg".

- **breaking** Select The type definition for the Select component has changed. The more impactful change is the type for the "onChange" callback which has changed to handle the removal of a selection and therefor "undefined" will be returned. onChange = { ( selectedOption: SelectOption | undefined ) => handleChange ( selectedOption ?. id ) } Also important to note that the SelectOption type no longer can be imported via the "types.ts" file. Please adapt your import accordingly import Select, { type SelectOption } from "@rio-cloud/rio-uikit/Select";

- **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 to div).

- **Fixed** Blockquote Change default blockquote padding from percentage to pixel. Please add custom padding classes to change it to your needs.

- **Fixed** BottomSheet Fixed maximum width for BottomSheet component when using the "detach" prop. Allow defining the detach offset.

- **Fixed** Chart Colors Fixed export of shared colors for diagrams

- **Fixed** Loading Guidelines Fixed spinner size for buttons to avoid button size changes. Extended loading guidelines for spinner buttons in tables.

- **Fixed** Sidebar Automatically switch Sidebar mode from "fluid" to "fly" to be put above the content when the ApplicationBody's module-content width reaches a defined minimum. This avoids breaking the entire application layout for fluid Sidebars on smaller screens or when resizing Sidebars.

- **Fixed** SimpleTooltip Renamed SimpleTooltip prop "tooltipWidth" to "width" to align with underlying Tooltip component

- **Fixed** Spinner Outlined spinner buttons

- **Fixed** Spinner in Buttons Fixed style for spinner in button block

- **Fixed** Tags Fixed 1px offset of tag icons

- **Fixed** Tooltip Fixed tooltip arrow position on small elements

- **Update** AutoSuggest Migrated AutoSuggest component to Typescript and cleaned up its props

- **Update** AssetTree Added new TreeSummaryRow component to allow for more tree item type filter like fuel type. With this we also added a new "supType" property to the TreeItem to filter for it and to show a paired icon.

- **Update** Button Added "iconName" prop to Button component to reduce boilerplate code when using icons. Use native HTML "disabled" prop instead of separate class.

- **Update** ClearableInput Added an input mask to the ClearableInput to allow custom input formats to avoid user input mistakes

- **Update** Dialog Added focus trap to Dialog component. Deprecate "onHide" callback in favor of "onClose". Extended the dialog for compound components to allow wrapping title, body, and footer with forms. Replaced the Dialog animation with framer-motion. As a result, the class "modal-ender-done" has been removed. Added new "xs" dialog variant

- **Update** ExpanderPanel Added new "onOpen" and "onClose" callbacks to ExpanderList items

- **Update** ExpanderPanel / Combined Tables in ExpandablePanel Added "iconClassName" prop to ExpanderPanel component to to allow for 100% width in the panel header. This comes in handy when using a table inside the header and the body that shall have the same column width. With that we also added a design demo to showcase the usage of the tow tables inside the expander panel.

- **Update** Forms Added horizontal form demo

- **Update** LoadMoreButton Extended LoadMoreButton component with props "isInteractive" and "progressBarStyle" to customize behavior and style

- **Update** Map Settings / Map Layer Migrated the Here Map traffic layers to use the new APIs when using the WebGL mode. For raster maps tiles, we still have to use the deprecated APIs as there is no alternative for now. We also fixed the map translations so other countries are also properly translated and don't show their city names in their native language.

- **Update** Multiselect Added prop "multiline" to allow wrapping selected item around within the multiline toggle. The style of the selected items has changed to be more muted so it better integrates with other form elements.

- **Update** NumberInput / NumberControl Migrated NumberInput and NumberControl to Typescript and updated their typings. Added check to avoid entering letters or special characters into the input field for Firefox and Safari. Added prop for warning and error messages. Added new prop "noDefault" to keep the input empty instead of using the default value of 0. Fixed the NumberControl spinner buttons when holding down the mouse button to increase and decrease the value and leaving the input field.

- **Update** TimePicker Added prop for rendering warning and error messages

- **Update** Onboarding Added props "previousButton" and "nextButton" to Onboarding component to enable a better onboarding click flow

- **Update** Print CSS Notifications are now hidden while printing the page when using our print.css

- **Update** Select Added prop "inputAddon" to Select component to allow for adding icons as addon to the toggle button Enhanced the background color of selected options for the Select and Multiselect component

- **Update** Sidebar Added prop "hasSmoothScrollbar" to Sidebar component to enable the built-in scrollbars instead of using the native browser scrollbars

- **Update** Slider or RangeSlider Added "valueLabelUnit" prop to Slider and RangeSlider to use a label for the slider values

- **Update** SplitDialog Added new "leftContentClassName" and "rightContentClassName" to the split dialog

- **Update** Buttons Add gray-lightest hover background color to muted, link, and action buttons

- **Update** Timeline Added new classes "timeline-date-thin" and "timeline-date-dashed" as well as color classes to change the timeline width and style. Updated Timeline examples to showcase variations as it's built with atomic classes.

- **New** EditableContent Added new EditableContent component that allows for inline text editing

- **New** DeviceUtils Added new "isRetinaDevice" to deviceUtils

- **New** Divider Added new Divider component for horizontal and vertical dividing lines

- **New** Forms New form "form-group-not-editable" style toggling editable forms

- **New** FrameDialog Added new FrameDialog component that can be used to open a dialog from a widget iframe in the parent window

- **New** Grid stack Added new grid stacking classes "grid-stack" and "grid-stack-item" as an alternative to position absolute

- **New** HTML Emails New guidelines demo for HTML emails created with react email

- **Icons** Icons rioglyph- drag-n-drop rioglyph- robot rioglyph- pin-range rioglyph- pin rioglyph- calendar-plus rioglyph- exclamation rioglyph- info rioglyph- question rioglyph- fuel-diesel rioglyph- fuel-electric rioglyph- fuel-hydrogen rioglyph- fuel-gas rioglyph- archive rioglyph- map rioglyph- map-location rioglyph- book rioglyph- face-frown rioglyph- face-neutral rioglyph- face-smile rioglyph- paper-clip rioglyph- share-nodes rioglyph- handshake rioglyph- stack rioglyph- building rioglyph- file-signature rioglyph- signature rioglyph- location-arrow rioglyph- wallet rioglyph- user-group rioglyph- window rioglyph- inbox rioglyph- inbox-stack rioglyph- inbox-in rioglyph- inbox-out rioglyph- id rioglyph- ruler rioglyph- cards-add rioglyph- truck-unit rioglyph- user-add rioglyph- user-ok rioglyph- user-remove rioglyph- pencil-square rioglyph- megaphone rioglyph- code-brackets rioglyph- code-braces rioglyph- hash rioglyph- server-stack rioglyph- shopping-bag rioglyph- search-list rioglyph- tasks rioglyph- fingerprint rioglyph- flag rioglyph- fire rioglyph- puzzle

- **New** Line Height Added new "line-height-150rel" class

- **New** Page Added new Page component for displaying documents

- **New** SaveableInput Added new SaveableInput component

- **New** TimedBottomSheet Added new TimedBottomSheet component to control a bottom sheets visibility with timers

- **New** SmoothScrollbars Added a new SmoothScrollbars component

- **New** Text Wrapping Added new "text-wrap-balance" class

- **New** useFocusTrap Added new useFocusTrap hook that can be used for custom overlays

- **New** useHover Added new useHover hook that can be used for style changes on hover for certain elements that can not be influenced by hover utility classes alone

- **New** usePostMessage Added new usePostMessage hook that can be used to exchange messages between an iframe and the parent window

- **CSS** With this version, the UIKIT adds its CSS link into the header automatically if it is not present. This should help to ease the update of the UIKIT library and the corresponding CSS. This means, you can remove the link from your index.html and only update the UIKIT dependency in your package.json. See Automatic loading of UIKIT CSS Files

- **Guideline** For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color, we have added a new "Color Combinations" section. See Color Combinations

- **Guideline** We have introduced some general writing guidelines to enhance consistency in UX writing and to maintain a unified voice. See Writing style guide

## Version 0.16.3 (2023-03-14)

- **Icons** Deleted Icons: fax

- **Fixed** Fixed alignment of collapsed header menu items. See ApplicationHeader

- **Fixed** Fixed fade in animation when the inital animation is set to false. See Fade

- **Fixed** Fixed close animation for BottomSheet when hight is set to window height. See BottomSheet

- **Fixed** Fixed AspectRatioPlaceholder declaration file name.

- **Fixed** Fixed text ellipsis of selects. See Selects

- **Update** Refactored DataTabs props. See DataTabs Merged hoverTextColor and hoverBgColor props to tabHoverClassName Merged activeTextColor and activeBgColor props to tabActiveClassName added arrowClassName prop added tabsWrapperClassName prop added tabClassName prop added new className prop to DataTab child component

- **Update** Added new "fullheight" Dialog Size and renamed "full" to "fullwidth". See Dialog

- **Update** MapSettings panels are now closing on click outside. See MapSettings

- **Update** Extended the SimpleTooltip component to pass the "delay" and "popperConfig" props to the underlying component. See SimpleTooltip

- **Update** Remove left padding from ReleaseNotes component to better work with images. Please add padding-left-15 manually, in case you want to work with lists. See ReleaseNotes

- **New** Added new CalendarStripe component. See CalendarStripe

- **New** Added new hook "usePrevious" to access state values of previous component render cycle. See usePrevious

- **Icons** Added or updated icons: rioglyph- card-reader rioglyph- card-hotel rioglyph- api rioglyph- currency-euro rioglyph- thumbs-up rioglyph- thumbs-down rioglyph- hand-up rioglyph- hand-down rioglyph- hand-left rioglyph- hand-right See Icons