@rio-cloud/rio-uikit 1.2.2 → 1.4.0

package/components/charts/LineChart.d.ts

@@ -3,6 +3,7 @@ import { LineChart as RechartsLineChart, type XAxisProps, type YAxisProps } from
 import { ChartTooltipProps } from './ChartTooltip';
 import { type LegendProps } from './Legend';
 import type { LineProps } from './Line';
+import type { ReferenceLineProps } from './ReferenceLine';
 import type { GridProps } from './ChartGrid';
 import type { ResponsiveContainerProps } from './ResponsiveContainer';
 type RechartsLineChartProps = React.ComponentProps<typeof RechartsLineChart>;
@@ -13,6 +14,7 @@ export type LineChartProps<T extends object> = Omit<RechartsLineChartProps, 'dat
     dataUnit?: string;
     dataKey?: string | number | ((obj: T) => any);
     lines: React.ReactElement<LineProps>[];
+    referenceLines?: React.ReactElement<ReferenceLineProps>[];
     xAxisOptions?: XAxisProps;
     yAxisOptions?: YAxisProps;
     gridOptions?: GridProps;

package/components/charts/LineChart.js

@@ -3,18 +3,21 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
-import { LineChart as RechartsLineChart, Line as RechartsLine, XAxis, YAxis, Brush, CartesianGrid, ResponsiveContainer, } from 'recharts';
+import { LineChart as RechartsLineChart, Line as RechartsLine, ReferenceLine as RechartsReferenceLine, Legend as RechartsLegend, XAxis, YAxis, Brush, CartesianGrid, ResponsiveContainer, } from 'recharts';
 import isObject from 'lodash/fp/isObject';
 import { getColor, mapGridOptions } from './chartHelper';
 import ChartTooltip from './ChartTooltip';
-import Legend from './Legend';
+import { getLegendDefaultProps } from './Legend';
 const LineChart = (props) => {
-    const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "lines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
+    const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], referenceLines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "lines", "referenceLines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
-    const legendProps = isObject(legend) ? legend.props : {};
-    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsLineChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(ChartTooltip, Object.assign({}, tooltipProps)), legend && _jsx(Legend, Object.assign({}, legendProps)), lines.map(line => {
+    const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
+    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsLineChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(ChartTooltip, Object.assign({}, tooltipProps)), legend && _jsx(RechartsLegend, Object.assign({}, legendProps)), lines.map(line => {
                     const _a = line.props, { strokeColor } = _a, remainingLineProps = __rest(_a, ["strokeColor"]);
                     return _createElement(RechartsLine, Object.assign({}, remainingLineProps, { key: line.key, stroke: getColor(strokeColor) }));
+                }), referenceLines.map(referenceLine => {
+                    const _a = referenceLine.props, { stroke } = _a, remainingReferenceLineProps = __rest(_a, ["stroke"]);
+                    return (_createElement(RechartsReferenceLine, Object.assign({}, remainingReferenceLineProps, { key: referenceLine.key, stroke: getColor(stroke) })));
                 }), brush && _jsx(Brush, { stroke: getColor('gray') })] })) })));
 };
 export default LineChart;

package/components/charts/PieChart.js

@@ -2,11 +2,11 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
-import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, } from 'recharts';
+import { PieChart as RechartsPieChart, Legend as RechartsLegend, Pie, Cell, ResponsiveContainer, } from 'recharts';
 import isFunction from 'lodash/fp/isFunction';
 import isObject from 'lodash/fp/isObject';
 import { getFromDefaultColors, getColor } from './chartHelper';
-import Legend from './Legend';
+import { getLegendDefaultProps } from './Legend';
 import ChartTooltip, { defaultFormatter } from './ChartTooltip';
 const RADIAN = Math.PI / 180;
 const renderCustomInnerLabel = (dataUnit) => ({ cx, cy, midAngle, innerRadius, outerRadius, value }) => {
@@ -16,13 +16,13 @@ const renderCustomInnerLabel = (dataUnit) => ({ cx, cy, midAngle, innerRadius, o
     return (_jsx("text", Object.assign({ x: x, y: y, fill: 'white', textAnchor: x > cx ? 'start' : 'end', dominantBaseline: 'central' }, { children: `${value} ${dataUnit}` })));
 };
 const PieChart = (props) => {
-    const { width, height, innerRadius, outerRadius, data = [], dataKey = 'value', dataUnit = '', nameKey = 'name', color, filled = false, labels = true, innerLabels = false, paddingAngle = 3, legend = _jsx(Legend, {}), tooltip = true, pieOptions, containerOptions } = props, remainingProps = __rest(props, ["width", "height", "innerRadius", "outerRadius", "data", "dataKey", "dataUnit", "nameKey", "color", "filled", "labels", "innerLabels", "paddingAngle", "legend", "tooltip", "pieOptions", "containerOptions"]);
+    const { width, height, innerRadius, outerRadius, data = [], dataKey = 'value', dataUnit = '', nameKey = 'name', color, filled = false, labels = true, innerLabels = false, paddingAngle = 3, legend = _jsx(RechartsLegend, {}), tooltip = true, pieOptions, containerOptions } = props, remainingProps = __rest(props, ["width", "height", "innerRadius", "outerRadius", "data", "dataKey", "dataUnit", "nameKey", "color", "filled", "labels", "innerLabels", "paddingAngle", "legend", "tooltip", "pieOptions", "containerOptions"]);
     // biome-ignore lint/suspicious/noExplicitAny:
     const renderLabels = (entry) => `${isFunction(dataKey) ? dataKey(entry) : entry[dataKey]} ${dataUnit}`;
     const pieLabel = labels && (innerLabels ? renderCustomInnerLabel(dataUnit) : renderLabels);
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
-    const legendProps = isObject(legend) ? legend.props : {};
-    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsPieChart, Object.assign({ width: width, height: height }, remainingProps, { children: [legend && (_jsx(Legend, Object.assign({ formatter: (value, entry) => (_jsx("span", Object.assign({ className: 'text-color-darker' }, { children: value }))) }, legendProps))), _jsx(Pie, Object.assign({ data: data, isAnimationActive: true, nameKey: nameKey, dataKey: dataKey, label: pieLabel, 
+    const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
+    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsPieChart, Object.assign({ width: width, height: height }, remainingProps, { children: [legend && (_jsx(RechartsLegend, Object.assign({ formatter: (value, entry) => (_jsx("span", Object.assign({ className: 'text-color-darker' }, { children: value }))) }, legendProps))), _jsx(Pie, Object.assign({ data: data, isAnimationActive: true, nameKey: nameKey, dataKey: dataKey, label: pieLabel, 
                     // cx={Math.max(outerRadius, width / 3)}
                     // cy={height / 2}
                     innerRadius: filled ? 0 : innerRadius, outerRadius: outerRadius, paddingAngle: filled ? 0 : paddingAngle, labelLine: !innerLabels }, pieOptions, { children: data.map((entry, index) => {

package/components/charts/RadialBarChart.js

@@ -2,14 +2,14 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
-import { RadialBarChart as RechartsRadialBarChart, RadialBar as RechartsRadialBar, PolarAngleAxis, Cell, ResponsiveContainer, } from 'recharts';
+import { RadialBarChart as RechartsRadialBarChart, RadialBar as RechartsRadialBar, Legend as RechartsLegend, PolarAngleAxis, Cell, ResponsiveContainer, } from 'recharts';
 import isFunction from 'lodash/fp/isFunction';
 import isObject from 'lodash/fp/isObject';
 import { getColor, getFromDefaultColors, CURSOR_BACKGROUND_COLOR } from './chartHelper';
-import Legend from './Legend';
+import { getLegendDefaultProps } from './Legend';
 import ChartTooltip from './ChartTooltip';
 const RadialBarChart = (props) => {
-    const { width, height, data = [], dataKey = 'value', startAngle = 180, endAngle = 0, innerRadius = '30%', outerRadius = '100%', legend = _jsx(Legend, {}), textOptions, radialBarOptions, containerOptions, showBarLabel = false, cornerRadius = 30, background = true, range, tooltip = false } = props, remainingProps = __rest(props, ["width", "height", "data", "dataKey", "startAngle", "endAngle", "innerRadius", "outerRadius", "legend", "textOptions", "radialBarOptions", "containerOptions", "showBarLabel", "cornerRadius", "background", "range", "tooltip"]);
+    const { width, height, data = [], dataKey = 'value', startAngle = 180, endAngle = 0, innerRadius = '30%', outerRadius = '100%', legend = _jsx(RechartsLegend, {}), textOptions, radialBarOptions, containerOptions, showBarLabel = false, cornerRadius = 30, background = true, range, tooltip = false } = props, remainingProps = __rest(props, ["width", "height", "data", "dataKey", "startAngle", "endAngle", "innerRadius", "outerRadius", "legend", "textOptions", "radialBarOptions", "containerOptions", "showBarLabel", "cornerRadius", "background", "range", "tooltip"]);
     const _a = textOptions || {}, { text, size = '500%', weight = 'normal', color = 'gray-darkest' } = _a, remainingTextOptions = __rest(_a, ["text", "size", "weight", "color"]);
     const textStyle = {
         fontSize: size,
@@ -17,10 +17,10 @@ const RadialBarChart = (props) => {
         fill: color && getColor(color),
     };
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
-    const legendProps = isObject(legend) ? legend.props : {};
+    const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
     return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsRadialBarChart, Object.assign({ width: width, height: height, data: data, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle }, remainingProps, { children: [_jsx(RechartsRadialBar, Object.assign({ label: showBarLabel && { fill: '#666', position: 'insideStart' }, background: background, dataKey: dataKey, cornerRadius: cornerRadius }, radialBarOptions, { children: data.map((entry, index) => {
                         const cellColor = getColor(entry.color) || getFromDefaultColors(index);
                         return (_jsx(Cell, { fill: isFunction(color) ? color(entry, index) : cellColor }, `cell-${index}`));
-                    }) })), range && _jsx(PolarAngleAxis, { type: 'number', domain: range, angleAxisId: 0, tick: false }), textOptions && (_jsx("text", Object.assign({ x: width ? width / 2 : '50%', y: height ? height / 2 : '50%', textAnchor: 'middle', dominantBaseline: 'middle', className: 'radialbarchart-text', style: textStyle }, remainingTextOptions, { children: text }))), legend && (_jsx(Legend, Object.assign({ formatter: (value, entry) => (_jsx("span", Object.assign({ className: 'text-color-darker' }, { children: value }))) }, legendProps))), tooltip && _jsx(ChartTooltip, Object.assign({ cursor: { fill: CURSOR_BACKGROUND_COLOR } }, tooltipProps))] })) })));
+                    }) })), range && _jsx(PolarAngleAxis, { type: 'number', domain: range, angleAxisId: 0, tick: false }), textOptions && (_jsx("text", Object.assign({ x: width ? width / 2 : '50%', y: height ? height / 2 : '50%', textAnchor: 'middle', dominantBaseline: 'middle', className: 'radialbarchart-text', style: textStyle }, remainingTextOptions, { children: text }))), legend && (_jsx(RechartsLegend, Object.assign({ formatter: (value, entry) => (_jsx("span", Object.assign({ className: 'text-color-darker' }, { children: value }))) }, legendProps))), tooltip && _jsx(ChartTooltip, Object.assign({ cursor: { fill: CURSOR_BACKGROUND_COLOR } }, tooltipProps))] })) })));
 };
 export default RadialBarChart;

package/components/charts/ReferenceLine.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ReferenceLineProps as RechartsReferenceLineProps } from 'recharts';
+export type ReferenceLineProps = Omit<RechartsReferenceLineProps, 'ref'> & {
+    stroke?: string;
+};
+declare const Line: React.FC<ReferenceLineProps>;
+export default Line;

package/components/charts/ReferenceLine.js

@@ -0,0 +1,2 @@
+const Line = ({ stroke = 'color-coldplay-fountain' }) => null;
+export default Line;

package/components/dataTabs/DataTab.js

@@ -5,7 +5,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import 'react';
 import { motion } from 'framer-motion';
 const DataTab = (props) => {
-    const { active = false, tabKey, disableTransition = false, className = '', children } = props, remainingProps = __rest(props, ["active", "tabKey", "disableTransition", "className", "children"]);
+    const { active = false, title, // exclude from remainingProps to avoid being set to the div element
+    tabKey, disableTransition = false, className = '', children } = props, remainingProps = __rest(props, ["active", "title", "tabKey", "disableTransition", "className", "children"]);
     if (disableTransition) {
         return _jsx("div", { children: active && children });
     }

package/components/dialog/Dialog.d.ts

@@ -3,6 +3,7 @@ export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth'
 export type BaseDialogProps = {
     /**
      * Opens the dialog when set to `true`.
+     *
      * @default false
      */
     show: boolean;
@@ -16,6 +17,7 @@ export type BaseDialogProps = {
     subtitle?: React.ReactNode;
     /**
      * Shows a close button when set to `true`.
+     *
      * @default true
      */
     showCloseButton?: boolean;
@@ -25,24 +27,29 @@ export type BaseDialogProps = {
     onClose?: () => void;
     /**
      * Defined how large the dialog will be rendered.
-     * By default, the dialog has a medium size and thus it can be omitted.
+     *
+     * By default, the dialog has a medium size, and thus it can be omitted.
      *
      * Possible values are: `xs`, `sm`, `lg` `xl` `fullwidth` `fullheight` `fullscreen`
+     *
      * @default 'md'
      */
     bsSize?: DialogSize;
     /**
      * Enables or disabled closing the dialog via esc key.
+     *
      * @default false
      */
     disableEsc?: boolean;
     /**
      * Enables the modal body to overflow and use inline scrolling if needed.
+     *
      * @default false
      */
     useOverflow?: boolean;
     /**
      * Show Header and Footer Borders for the "xs" dialog
+     *
      * @default false
      */
     showXsDialogBorders?: boolean;
@@ -74,6 +81,7 @@ export type DialogProps = BaseDialogProps & {
     headerButtons?: React.ReactNode;
     /**
      * Deprecate to align with other dialog callbacks.
+     *
      * @deprecated please use `onClose`
      */
     onHide?: VoidFunction;
@@ -82,9 +90,9 @@ export type DialogProps = BaseDialogProps & {
      */
     onEsc?: VoidFunction;
     /**
-     * A callback function to be executed before closing the dialog. If the function returns
-     * `false` the dialog will not be closed
-     * @returns
+     * A callback function to be executed before closing the dialog.
+     *
+     * If the function returns `false`, the dialog will not be closed
      */
     onCloseValidation?: () => boolean;
 };

package/components/dialog/SimpleDialog.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { type BaseDialogProps } from './Dialog';
-export type SimpleDialogProps = BaseDialogProps & {
+import { type DialogProps } from './Dialog';
+export type SimpleDialogProps = Omit<DialogProps, 'body'> & {
     /**
      * The content of the dialog body itself.
      */

package/components/dialog/SplitDialog.d.ts

@@ -25,6 +25,12 @@ export type SplitDialogProps = BaseDialogProps & {
      * Additional classes for the modal-footer element.
      */
     footerClassName?: string;
+    /**
+     * A callback function to be executed before closing the dialog.
+     *
+     * If the function returns `false`, the dialog will not be closed
+     */
+    onCloseValidation?: () => boolean;
 };
 declare const SplitDialog: (props: SplitDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default SplitDialog;

package/components/expander/ExpanderList.js

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import isEqual from 'lodash/fp/isEqual';
 import classNames from 'classnames';
 import Collapse from '../collapse/Collapse';
+import { hasBorderClass, hasRoundedClass } from '../../utils/hasUtilityClass';
 const getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);
 // Generate a unique id (if not present) instead of using the index for the key as it will create
 // side effects when removing items from the list and re-render the ExpanderList.
@@ -38,7 +39,7 @@ const ExpanderList = (props) => {
         });
         setListItems(updatedListItems);
     };
-    const listClassNames = classNames('expander-list list-group', rounded && 'rounded', bordered && 'border', className);
+    const listClassNames = classNames('expander-list list-group', rounded && !hasRoundedClass(className) && 'rounded', bordered && !hasBorderClass(className) && 'border', className);
     return (_jsx("ul", Object.assign({ className: listClassNames }, { children: listItems.map(item => {
             const isOpen = item.open;
             const itemClassNames = classNames('list-group-item', item.className && item.className, item.body && 'expandable', isOpen && 'open');

package/components/groupedItemList/GroupedItemList.d.ts

@@ -0,0 +1,79 @@
+import React from 'react';
+import { SortDirectionType } from '../../SortUtils';
+export type Group = {
+    groupKey: string;
+    items: any[];
+};
+export type GroupedItemListProps<T> = {
+    /**
+     * The list of items to be grouped and rendered.
+     *
+     * By default, the component assumes an item object containing an 'id' and 'name' property
+     * plus some other attributes.
+     */
+    items: T[];
+    /**
+     * The property of the items to group by as a string, or a custom group function.
+     * Defaults to 'name' if not provided.
+     *
+     * @default 'name'
+     */
+    groupBy?: keyof T | ((item: T) => string);
+    /**
+     * The order in which to sort the groups. Accepts 'asc' for ascending or 'desc' for descending.
+     * @default 'asc'.
+     */
+    groupSortOrder?: SortDirectionType;
+    /**
+     * The order in which to sort the items inside a group. Accepts 'asc' for ascending or 'desc' for descending.
+     * @default 'asc'.
+     */
+    itemSortOrder?: SortDirectionType;
+    /**
+     * Sorting function for the groups.
+     */
+    groupSortFunction?: (groups: Group[]) => Group[];
+    /**
+     * Sorting function for the items within each group.
+     */
+    itemSortFunction?: (items: T[]) => T[];
+    /**
+     * A custom render function for the group divider.
+     * Receives the group key (e.g., letter or date) as a parameter.
+     */
+    renderDivider?: (groupKey: string) => React.ReactNode;
+    /**
+     * A custom render function for individual list items.
+     * Receives an item as a parameter.
+     */
+    renderItem?: (item: T) => React.ReactNode;
+    /**
+     * Specifies the HTML element to use for the list inside each group.
+     * Default is 'div'. Use 'ul' for rendering the list items as `<li>` elements.
+     */
+    listElement?: 'div' | 'ul';
+    /**
+     * Optional class name for the list element inside each group.
+     * Applied to the `div` or `ul` wrapping the items.
+     */
+    listElementClassName?: string;
+    /**
+     * Optional class name for the divider element in each group.
+     * Applied to the `div` wrapping each group divider.
+     */
+    dividerElementClassName?: string;
+    /**
+     * Optional class name for the outer wrapper element.
+     * Applied to the outer `div` wrapping the entire component.
+     */
+    className?: string;
+};
+/**
+ * A React component that groups and renders a list of items based on a specified property.
+ * The component can be customized to render dividers and list items in different styles.
+ *
+ * @param {GroupedItemListProps} props - The props for the component.
+ * @returns {JSX.Element} The grouped and rendered list component.
+ */
+declare const GroupedItemList: <T>(props: GroupedItemListProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default GroupedItemList;

package/components/groupedItemList/GroupedItemList.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { naturalSortByProperty, sortByProperty } from '../../SortUtils';
+/**
+ * A React component that groups and renders a list of items based on a specified property.
+ * The component can be customized to render dividers and list items in different styles.
+ *
+ * @param {GroupedItemListProps} props - The props for the component.
+ * @returns {JSX.Element} The grouped and rendered list component.
+ */
+const GroupedItemList = (props) => {
+    const { items, groupBy = 'name', groupSortOrder = 'asc', // Default to ascending order if not specified
+    groupSortFunction, itemSortFunction, itemSortOrder = 'asc', // Default to ascending order if not specified
+    renderDivider, renderItem, listElement = 'div', // Default to 'div' if not specified
+    listElementClassName, dividerElementClassName, className, } = props;
+    // Default group sorting function or specific function provided
+    const groupSortFn = groupSortFunction
+        ? groupSortFunction
+        : (groups) => naturalSortByProperty(groups, 'groupKey', groupSortOrder);
+    // Default item sorting within groups or specific function provided
+    const itemSortFn = itemSortFunction
+        ? itemSortFunction
+        : (itemsToSort) => sortByProperty(itemsToSort, groupBy, itemSortOrder);
+    // Determine the grouping function based on the type of groupBy
+    // const getGroupKey = (item: T): string => {
+    //     if (typeof groupBy === 'string') {
+    //         if (groupBy === 'name') {
+    //             return (item as any).name?.[0]?.toUpperCase() ?? '';
+    //         }
+    //         return (item as any)[groupBy]?.toString() ?? '';
+    //     } else if (typeof groupBy === 'function') {
+    //         return groupBy(item);
+    //     }
+    //     throw new Error('Please define a "groupBy" property as a string or function.');
+    // };
+    const getGroupKey = typeof groupBy === 'function'
+        ? groupBy
+        : (item) => { var _a, _b, _c; return (_c = (_b = (_a = item[groupBy]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''; };
+    // Group items by the specified property
+    // const allGroups = useMemo(
+    //     () =>
+    //         items.reduce<Record<string, T[]>>((acc, item) => {
+    //             const groupKey = getGroupKey(item);
+    //             if (!acc[groupKey]) {
+    //                 acc[groupKey] = [];
+    //             }
+    //             acc[groupKey].push(item);
+    //             return acc;
+    //         }, {}),
+    //     [items, getGroupKey]
+    // );
+    // Group items by the specified property
+    const groupedItems = useMemo(() => {
+        // Explicitly typing the accumulator as Record<string, T[]>
+        const groups = items.reduce((acc, item) => {
+            const groupKey = getGroupKey(item);
+            if (!acc[groupKey]) {
+                acc[groupKey] = [];
+            }
+            acc[groupKey].push(item);
+            return acc;
+        }, {});
+        return Object.keys(groups).map(groupKey => ({
+            groupKey,
+            items: groups[groupKey],
+        }));
+    }, [items, getGroupKey]);
+    // Assign the specified list element ('div' or 'ul')
+    const ListElement = listElement;
+    // Sort groups using the provided sort function
+    const sortedGroups = useMemo(() => groupSortFn(groupedItems), [groupedItems, groupSortFn]);
+    return (_jsx("div", Object.assign({ className: `grouped-item-list ${className !== null && className !== void 0 ? className : ''}` }, { children: sortedGroups.map(group => (_jsxs(React.Fragment, { children: [_jsx("div", Object.assign({ className: `group-divider ${dividerElementClassName !== null && dividerElementClassName !== void 0 ? dividerElementClassName : ''}` }, { children: renderDivider ? renderDivider(group.groupKey) : group.groupKey })), _jsx(ListElement, Object.assign({ className: listElementClassName }, { children: itemSortFn(group.items).map(item => {
+                        var _a;
+                        return renderItem ? (renderItem(item)) : (_jsx(React.Fragment, { children: _jsx("div", Object.assign({ className: 'item-name' }, { children: item.name })) }, (_a = item.id) !== null && _a !== void 0 ? _a : crypto.randomUUID()));
+                    }) }))] }, group.groupKey))) })));
+};
+export default GroupedItemList;

package/components/licensePlate/LicensePlate.d.ts

@@ -0,0 +1,19 @@
+import { type PropsWithChildren } from 'react';
+export type LicensePlateProps = {
+    /**
+     * The country code.
+     *
+     * Should be a string with 1-3 capital letters.
+     */
+    countryCode?: string;
+    /**
+     * Whether the EU stars should be hidden.
+     */
+    hideStars?: boolean;
+    /**
+     * Additional classes added to the wrapping element.
+     */
+    className?: string;
+};
+declare const LicensePlate: (props: PropsWithChildren<LicensePlateProps>) => import("react/jsx-runtime").JSX.Element;
+export default LicensePlate;

package/components/licensePlate/LicensePlate.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+const euStars = (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: '10', height: '10' }, { children: _jsx("path", { fill: '#FFC200', fillRule: 'nonzero', d: 'M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z' }) })));
+const LicensePlate = (props) => {
+    const { countryCode, hideStars, className = '', children } = props;
+    let letterCount = '';
+    if ((countryCode === null || countryCode === void 0 ? void 0 : countryCode.length) === 2)
+        letterCount = 'two-letters';
+    if ((countryCode === null || countryCode === void 0 ? void 0 : countryCode.length) === 3)
+        letterCount = 'three-letters';
+    return (_jsx("div", Object.assign({ className: `license-plate ${className}` }, { children: _jsxs("div", Object.assign({ className: 'plate-content' }, { children: [countryCode && (_jsxs("div", Object.assign({ className: 'plate-country' }, { children: [!hideStars && _jsx("span", Object.assign({ className: 'stars' }, { children: euStars })), _jsx("span", Object.assign({ className: `plate-country-code ${letterCount}` }, { children: countryCode }))] }))), _jsx("div", Object.assign({ className: 'plate-number' }, { children: children }))] })) })));
+};
+export default LicensePlate;

package/components/listMenu/ListMenu.js

@@ -66,7 +66,7 @@ const ListMenu = (props) => {
             setIsExpanderOpen(false);
         }
     };
-    const formClassNames = classNames('form-group', 'margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0');
+    const formClassNames = classNames('form-group', 'margin-top-5', 'margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0');
     const listMenu = (_jsxs("div", Object.assign({}, remainingProps, { className: `ListMenu ${className}`, ref: listRef }, { children: [enableFilter && (_jsx("div", Object.assign({ className: formClassNames }, { children: _jsxs("div", Object.assign({ className: 'input-group width-100pct' }, { children: [_jsx("span", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: 'rioglyph rioglyph-search', "aria-hidden": 'true' }) })), _jsx(ClearableInput, { value: filterValue, inputRef: inputRef, placeholder: filterPlaceholder, onChange: handleFilterChange, onClear: handleClear }), trailingInputAddon && trailingInputAddon] })) }))), !hasMenuItems(filteredMenuItems) && (_jsx("div", Object.assign({ className: 'padding-top-25 text-center text-color-gray' }, { children: notFoundMessage }))), filteredMenuItems.map(menuGroup => (_jsx(ListMenuGroup, { className: groupClassName, menuGroup: menuGroup }, crypto.randomUUID())))] })));
     if (responsive && isMobileMode) {
         return (_jsx(ExpanderPanel, Object.assign({ title: mobileHeader, bsStyle: 'default', open: isExpanderOpen, onToggle: () => setIsExpanderOpen(!isExpanderOpen), unmountOnExit: false, className: 'shadow-default' }, { children: _jsx("div", Object.assign({ onClick: handleExpanderBodyClick }, { children: listMenu })) })));

package/components/onboarding/OnboardingTip.d.ts

@@ -1,14 +1,14 @@
 import React, { type PropsWithChildren, type ReactNode } from 'react';
-import type { OverlayProps } from 'react-bootstrap';
+import type { Options } from '@popperjs/core';
 import { type TooltipWidth } from '../tooltip/Tooltip';
 import { type TextAlignment } from '../../values/TextAlignment';
 import { type Placement } from '../../values/Placement';
-type PopperConfig = OverlayProps['popperConfig'];
 export type OnboardingButton = {
     text: string | React.ReactNode;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     iconName?: string;
 };
+type PopperConfig = Partial<Options>;
 export type OnboardingTipProps = {
     /**
      * The ID of the DOM element.

package/components/onboarding/OnboardingTip.js

@@ -21,6 +21,8 @@ const OnboardingTip = (props) => {
                 // Popper.js default is false but we enable it by default
                 options: { altAxis: preventOverflow },
             },
+            // Use an arrow modifier, the arrow ref will be injected in OverlayTrigger with the right props
+            { name: 'arrow', options: {} },
         ],
     };
     const trigger = (_jsx(OverlayTrigger, Object.assign({ placement: placement, trigger: 'click', overlay: overlay, onToggle: onHide, show: show, rootClose: false, popperConfig: actualPopperConfig }, { children: children })));

package/components/overlay/OverlayTrigger.d.ts

@@ -1,6 +1,95 @@
-import { type PropsWithChildren } from 'react';
-import { type OverlayTriggerProps as BSOverlayTriggerProps } from 'react-bootstrap/OverlayTrigger';
-export type OverlayTriggerProps = Omit<BSOverlayTriggerProps, 'children'>;
+import React, { type PropsWithChildren } from 'react';
+import type { Options } from '@popperjs/core';
+import { type Placement } from '../../values/Placement';
+import { type TriggerType } from '../../values/Trigger';
+type PopperConfig = Partial<Options>;
+export type OverlayTriggerProps = {
+    /**
+     * The visibility of the Overlay. `show` is a _controlled_ prop so should be paired
+     * with `onToggle` to avoid breaking user interactions.
+     *
+     * Manually toggling `show` does **not** wait for `delay` to change the visibility.
+     *
+     * @controllable onToggle
+     * @default: false
+     */
+    show?: boolean;
+    /**
+     * The initial visibility state of the Overlay.
+     *
+     * @default false
+     */
+    defaultShow?: boolean;
+    /**
+     * Defines the usage of React Portal.
+     *
+     * @default true
+     */
+    enablePortal?: boolean;
+    /**
+     * Specify which action or actions trigger Overlay visibility
+     *
+     * The `click` trigger ignores the configured `delay`.
+     *
+     * @default 'hover'
+     */
+    trigger?: TriggerType;
+    /**
+     * A millisecond delay amount to show and hide the Overlay once triggered
+     */
+    delay?: number | {
+        show?: number;
+        hide?: number;
+    };
+    /**
+     * An element or text to overlay next to the target.
+     */
+    overlay: React.ReactElement;
+    /**
+     * The placement of the Overlay in relation to it's `target`.
+     *
+     * @default 'top'
+     */
+    placement?: Placement;
+    /**
+     * A Popper.js config object passed to the underlying popper instance.
+     * If no custom config is provided, a default config will be used. This default config
+     * includes an arrow element. In case you want to use a custom config and an arrow, include the arrow
+     * modifier so the correct arrow element can be injected for the arrow modifier.
+     *
+     * @example
+     * popperConfig={{
+     *     modifiers: [
+     *          {
+     *              name: 'offset',
+     *              options: {
+     *                  offset: [0, 5],
+     *              },
+     *          },
+     *          {
+     *              name: 'arrow',
+     *              options: {},
+     *          },
+     *      ],
+     *  }}
+     */
+    popperConfig?: PopperConfig;
+    /**
+     * Specify whether the overlay should trigger onHide when the user clicks outside the overlay.
+     *
+     * @default true
+     */
+    rootClose?: boolean;
+    /**
+     * A callback that fires when the user triggers a change in tooltip visibility.
+     *
+     * `onToggle` is called with the desired next `show`, and generally should be passed
+     * back to the `show` prop. `onToggle` fires _after_ the configured `delay`
+     *
+     * @controllable `show`
+     */
+    onToggle?: (show: boolean) => void;
+};
 declare const OverlayTrigger: {
     (props: PropsWithChildren<OverlayTriggerProps>): import("react/jsx-runtime").JSX.Element;
     TRIGGER_CLICK: "click";