@rio-cloud/rio-uikit 1.3.0 → 1.4.0

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/selects/BaseSelectDropdown.d.ts

@@ -36,6 +36,7 @@ export type SelectOption = {
 export type BaseSelectDropdownProps<T extends SelectOption> = {
     options?: T[];
     isOpen?: boolean;
+    isLoading?: boolean;
     updateDOMValues?: (values: OptionDOMValue[] | undefined) => void;
     onOpen?: (hasDropup: boolean) => void;
     onSelect?: (selectedItem: T | undefined) => void;

package/components/selects/BaseSelectDropdown.js

@@ -10,11 +10,12 @@ import useEffectOnce from '../../hooks/useEffectOnce';
 import useKey from '../../useKey';
 import DropdownHeader from './DropdownHeader';
 import NoItemMessage from './NoItemMessage';
+import Spinner from '../spinner/Spinner';
 const DATA_ATTRIBUTE_ID = 'data-item-id';
 const DEFAULT_FOCUSED_ITEM_INDEX = 0;
 const HIGHLIGHT_CLASS = 'focus';
 const BaseSelectDropdown = (props) => {
-    const { isOpen = false, updateDOMValues = noop, onOpen = noop, onSelect = noop, onClose = noop, options = [], autoDropDirection = true, dropup = false, pullRight = false, useActiveClass = false, focusedItemIndex: externalFocusedItemIndex, keyboardUsed: externalKeyboardUsed, noItemMessage, dropdownClassName, } = props;
+    const { isOpen = false, isLoading = false, updateDOMValues = noop, onOpen = noop, onSelect = noop, onClose = noop, options = [], autoDropDirection = true, dropup = false, pullRight = false, useActiveClass = false, focusedItemIndex: externalFocusedItemIndex, keyboardUsed: externalKeyboardUsed, noItemMessage, dropdownClassName, } = props;
     const [focusedItemIndex, setFocusedItemIndex] = useState(externalFocusedItemIndex || DEFAULT_FOCUSED_ITEM_INDEX);
     const [keyboardUsed, setKeyboardUsed] = useState(externalKeyboardUsed);
     const dropdownMenuRef = useRef(null);
@@ -150,19 +151,20 @@ const BaseSelectDropdown = (props) => {
     if (isEmpty(options)) {
         return _jsx(NoItemMessage, { noItemMessage: noItemMessage, className: dropdownMenuClasses });
     }
-    return (_jsx("ul", Object.assign({ className: dropdownMenuClasses, ref: dropdownMenuRef, role: 'menu' }, { children: options.map((option, index) => {
-            if (option.header) {
-                return _jsx(DropdownHeader, { icon: option.icon, label: option.label }, option.id);
-            }
-            // Show focused style only when keyboard is in use
-            const anchorClassNames = classNames('display-flex align-items-center', keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '', option.disabled && 'pointer-events-none');
-            const wrapperClassNames = classNames(option.disabled && 'disabled', useActiveClass && option.selected && 'active');
-            return (_jsx("li", Object.assign({ className: wrapperClassNames, role: 'listitem' }, { children: _jsxs("a", Object.assign({ role: 'menuitem', className: anchorClassNames, "data-item-id": option.id, "data-item-index": index, 
-                    // Note, we need to assign the click callback only when it's not disabled
-                    // otherwise the functions is still triggered
-                    // biome-ignore lint/a11y/useValidAnchor: due to old structure and backwards compatibility
-                    onClick: option.disabled ? undefined : handleOptionChange }, { children: [_jsxs("span", { children: [option.icon && _jsx("span", Object.assign({ className: 'margin-right-5' }, { children: option.icon })), option.label] }), _jsx("input", { type: 'hidden', value: option.id })] })) }), option.id));
-        }) })));
+    return (_jsxs("ul", Object.assign({ className: dropdownMenuClasses, ref: dropdownMenuRef, role: 'menu' }, { children: [isLoading && (_jsx("div", Object.assign({ className: 'display-flex justify-content-center padding-10' }, { children: _jsx(Spinner, {}) }))), !isLoading &&
+                options.map((option, index) => {
+                    if (option.header) {
+                        return _jsx(DropdownHeader, { icon: option.icon, label: option.label }, option.id);
+                    }
+                    // Show focused style only when keyboard is in use
+                    const anchorClassNames = classNames('display-flex align-items-center', keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '', option.disabled && 'pointer-events-none');
+                    const wrapperClassNames = classNames(option.disabled && 'disabled', useActiveClass && option.selected && 'active');
+                    return (_jsx("li", Object.assign({ className: wrapperClassNames, role: 'listitem' }, { children: _jsxs("a", Object.assign({ role: 'menuitem', className: anchorClassNames, "data-item-id": option.id, "data-item-index": index, 
+                            // Note, we need to assign the click callback only when it's not disabled
+                            // otherwise the functions is still triggered
+                            // biome-ignore lint/a11y/useValidAnchor: due to old structure + backwards compatibility
+                            onClick: option.disabled ? undefined : handleOptionChange }, { children: [_jsxs("span", { children: [option.icon && _jsx("span", Object.assign({ className: 'margin-right-5' }, { children: option.icon })), option.label] }), _jsx("input", { type: 'hidden', value: option.id })] })) }), option.id));
+                })] })));
 };
 export const filterOptions = (itemDOMValues, filterValue, options) => {
     const filteredDOMValues = itemDOMValues.filter(item => item.text.toLowerCase().includes(filterValue.toLowerCase()));

package/components/selects/Multiselect.d.ts

@@ -69,6 +69,11 @@ export type MultiselectProps<T extends MultiselectOption> = Omit<WithFeedbackAnd
      * @default true
      */
     autoDropDirection?: boolean;
+    /**
+     * Shows a loading spinner instead of the menu items if set to true.
+     * @default false
+     */
+    isLoading?: boolean;
     /**
      * Defines the size of the select to be rendered.
      *

package/components/selects/Multiselect.js

@@ -16,7 +16,7 @@ import useMergeRefs from '../../hooks/useMergeRefs';
 import WithFeedbackAndAddon from './WithFeedbackAndAddon';
 const DEFAULT_FOCUSED_ITEM_INDEX = -1;
 const Multiselect = (props) => {
-    const { name, id = name, options = [], value, onChange = noop, placeholder, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, multiline = false, noItemMessage, counterMessage, renderCounterMessage, showSelectedItemIcon = false, showUnselectedItemIcons = false, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal' } = props, remainingProps = __rest(props, ["name", "id", "options", "value", "onChange", "placeholder", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "multiline", "noItemMessage", "counterMessage", "renderCounterMessage", "showSelectedItemIcon", "showUnselectedItemIcons", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
+    const { name, id = name, options = [], value, onChange = noop, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, multiline = false, noItemMessage, counterMessage, renderCounterMessage, showSelectedItemIcon = false, showUnselectedItemIcons = false, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal' } = props, remainingProps = __rest(props, ["name", "id", "options", "value", "onChange", "placeholder", "isLoading", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "multiline", "noItemMessage", "counterMessage", "renderCounterMessage", "showSelectedItemIcon", "showUnselectedItemIcons", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
     const [isOpen, setIsOpen] = useState(false);
     const [selectedItemIds, setSelectedItemIds] = useState(value || []);
     const [isFilterActive, setIsFilterActive] = useState(false);
@@ -86,7 +86,7 @@ const Multiselect = (props) => {
             option.selected = selectedItemIds.indexOf(option.id) !== -1;
             return option;
         });
-        return (_jsx(BaseSelectDropdown, { isOpen: isOpen, options: nonSelectedOptions, focusedItemIndex: focusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, useActiveClass: true, dropup: dropup, autoDropDirection: autoDropDirection, requestItemDOMValues: requestItemDOMValues }));
+        return (_jsx(BaseSelectDropdown, { isOpen: isOpen, isLoading: isLoading, options: nonSelectedOptions, focusedItemIndex: focusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, useActiveClass: true, dropup: dropup, autoDropDirection: autoDropDirection, requestItemDOMValues: requestItemDOMValues }));
     };
     const handleFilterChange = (event) => {
         event.preventDefault();

package/components/selects/Select.d.ts

@@ -103,6 +103,11 @@ export type SelectProps<T extends SelectOption> = Omit<WithFeedbackAndAddonProps
      * @default false
      */
     useClear?: boolean;
+    /**
+     * Shows a loading spinner instead of the menu items if set to true.
+     * @default false
+     */
+    isLoading?: boolean;
     /**
      * Text that shall be shown when not match was found when filtering.
      */

package/components/selects/Select.js

@@ -15,7 +15,7 @@ import SelectedOption from './SelectedOption';
 import WithFeedbackAndAddon from './WithFeedbackAndAddon';
 const DEFAULT_FOCUSED_ITEM_INDEX = -1;
 const Select = (props) => {
-    const { name, id = name, label, options = [], value, onChange = noop, placeholder, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, useClear = false, noItemMessage, selectedOptionText, showSelectedItemIcon = false, showUnselectedItemIcons = false, dropdownClassName, btnClassName, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal' } = props, remainingProps = __rest(props, ["name", "id", "label", "options", "value", "onChange", "placeholder", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "useClear", "noItemMessage", "selectedOptionText", "showSelectedItemIcon", "showUnselectedItemIcons", "dropdownClassName", "btnClassName", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
+    const { name, id = name, label, options = [], value, onChange = noop, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, useClear = false, noItemMessage, selectedOptionText, showSelectedItemIcon = false, showUnselectedItemIcons = false, dropdownClassName, btnClassName, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal' } = props, remainingProps = __rest(props, ["name", "id", "label", "options", "value", "onChange", "placeholder", "isLoading", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "useClear", "noItemMessage", "selectedOptionText", "showSelectedItemIcon", "showUnselectedItemIcons", "dropdownClassName", "btnClassName", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
     const [isOpen, setIsOpen] = useState(false);
     const [selectedItem, setSelectedItem] = useState(null);
     const [isFilterActive, setIsFilterActive] = useState(false);
@@ -82,7 +82,7 @@ const Select = (props) => {
         else if (keyboardUsed) {
             currentFocusedItemIndex = 0;
         }
-        return (_jsx(BaseSelectDropdown, { isOpen: isOpen, options: filteredOptions, focusedItemIndex: currentFocusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, dropup: dropup, autoDropDirection: autoDropDirection, dropdownClassName: dropdownClassName, requestItemDOMValues: requestItemDOMValues }));
+        return (_jsx(BaseSelectDropdown, { isOpen: isOpen, isLoading: isLoading, options: filteredOptions, focusedItemIndex: currentFocusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, dropup: dropup, autoDropDirection: autoDropDirection, dropdownClassName: dropdownClassName, requestItemDOMValues: requestItemDOMValues }));
     };
     const handleFilterChange = (event) => {
         event.preventDefault();

package/hooks/useKey.d.ts

@@ -2,9 +2,12 @@ type KeyboardEventType = 'keyup' | 'keydown' | 'keypress';
 /**
  * Custom hook to handle keyboard events.
  *
- * @param callback - The callback function to be executed when a keyboard event occurs.
- * @param [eventTypes=['keydown']] - The types of keyboard events to listen for.
- * @param [node=document] - The DOM node to attach the event listener to (defaults to document).
+ * @param keyOrCallback - Either a key string (e.g., 'Enter') or a callback function.
+ * @param callbackOrEventTypes - If the first argument is a key, this should be the callback function.
+ *                               If the first argument is a callback, this is an optional array of event types.
+ * @param [eventTypesOrNode=['keydown']] - If the first argument is a key, this should be an array of event types.
+ *                                         If the first argument is a callback, this is the node (defaults to document).
+ * @param [node=document] - Optional DOM node to attach the event listener to (defaults to document).
  */
-declare const useKey: (callback: (event: KeyboardEvent) => void, eventTypes?: KeyboardEventType[], node?: Document) => void;
+declare const useKey: (keyOrCallback: string | ((event: KeyboardEvent) => void), callbackOrEventTypes?: ((event: KeyboardEvent) => void | KeyboardEventType[]) | undefined, eventTypesOrNode?: KeyboardEventType[] | Document, node?: Document | HTMLElement) => void;
 export default useKey;

package/hooks/useKey.js

@@ -1,21 +1,49 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 /**
  * Custom hook to handle keyboard events.
  *
- * @param callback - The callback function to be executed when a keyboard event occurs.
- * @param [eventTypes=['keydown']] - The types of keyboard events to listen for.
- * @param [node=document] - The DOM node to attach the event listener to (defaults to document).
+ * @param keyOrCallback - Either a key string (e.g., 'Enter') or a callback function.
+ * @param callbackOrEventTypes - If the first argument is a key, this should be the callback function.
+ *                               If the first argument is a callback, this is an optional array of event types.
+ * @param [eventTypesOrNode=['keydown']] - If the first argument is a key, this should be an array of event types.
+ *                                         If the first argument is a callback, this is the node (defaults to document).
+ * @param [node=document] - Optional DOM node to attach the event listener to (defaults to document).
  */
-const useKey = (callback, eventTypes = ['keydown'], node = document) => {
+const useKey = (keyOrCallback, callbackOrEventTypes, eventTypesOrNode = ['keydown'], node = document) => {
+    const callbacksRef = useRef([]);
     useEffect(() => {
+        const isKeyMode = typeof keyOrCallback === 'string';
+        const callback = isKeyMode
+            ? callbackOrEventTypes
+            : keyOrCallback;
+        const keyHandler = (event) => {
+            if (isKeyMode) {
+                if (event.key === keyOrCallback) {
+                    callback(event);
+                }
+            }
+            else {
+                callback(event);
+            }
+        };
+        // Register the keyHandler
+        callbacksRef.current.push(keyHandler);
+        const genericHandler = (event) => {
+            for (const callBecky of callbacksRef.current) {
+                callBecky(event);
+            }
+        };
+        const eventTypes = Array.isArray(eventTypesOrNode) ? eventTypesOrNode : ['keydown'];
         for (const eventType of eventTypes) {
-            node.addEventListener(eventType, callback);
+            node.addEventListener(eventType, genericHandler);
         }
         return () => {
             for (const eventType of eventTypes) {
-                node.removeEventListener(eventType, callback);
+                node.removeEventListener(eventType, genericHandler);
             }
+            // Clean up callback reference
+            callbacksRef.current = callbacksRef.current.filter(singleCallback => singleCallback !== keyHandler);
         };
-    }, [callback]);
+    }, [keyOrCallback, callbackOrEventTypes, eventTypesOrNode, node]);
 };
 export default useKey;

package/lib/es/ChartLabel.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/charts/ChartLabel';
+export * from './components/charts/ChartLabel';

package/lib/es/ChartLabel.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var ChartLabel_1 = require("./components/charts/ChartLabel");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(ChartLabel_1).default; } });
+tslib_1.__exportStar(require("./components/charts/ChartLabel"), exports);

package/lib/es/ComposedChart.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/charts/ComposedChart';
+export * from './components/charts/ComposedChart';

package/lib/es/ComposedChart.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var ComposedChart_1 = require("./components/charts/ComposedChart");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(ComposedChart_1).default; } });
+tslib_1.__exportStar(require("./components/charts/ComposedChart"), exports);

package/lib/es/GroupedItemList.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/groupedItemList/GroupedItemList';
+export * from './components/groupedItemList/GroupedItemList';

package/lib/es/GroupedItemList.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var GroupedItemList_1 = require("./components/groupedItemList/GroupedItemList");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(GroupedItemList_1).default; } });
+tslib_1.__exportStar(require("./components/groupedItemList/GroupedItemList"), exports);

package/lib/es/LicensePlate.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/licensePlate/LicensePlate';
+export * from './components/licensePlate/LicensePlate';

package/lib/es/LicensePlate.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var LicensePlate_1 = require("./components/licensePlate/LicensePlate");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(LicensePlate_1).default; } });
+tslib_1.__exportStar(require("./components/licensePlate/LicensePlate"), exports);

package/lib/es/ReferenceLine.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/charts/ReferenceLine';
+export * from './components/charts/ReferenceLine';

package/lib/es/ReferenceLine.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var ReferenceLine_1 = require("./components/charts/ReferenceLine");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(ReferenceLine_1).default; } });
+tslib_1.__exportStar(require("./components/charts/ReferenceLine"), exports);

package/lib/es/components/assetTree/TreeOptions.js

@@ -17,16 +17,20 @@ const TreeOptions = (props) => {
     const customDropdown = (0, jsx_runtime_1.jsx)("div", Object.assign({ className: dropdownClasses }, { children: treeOptions }));
     const dropdown = ((0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, { title: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-option-vertical', "aria-hidden": 'true' }), bsStyle: 'default', bsSize: 'sm', customDropdown: customDropdown, toggleClassName: 'hover-bg-white border-none text-color-gray hover-text-color-dark', className: 'TreeHeaderOptions height-20', pullRight: true, iconOnly: true }));
     if (treeOptionsTooltip) {
-        return ((0, jsx_runtime_1.jsx)(SimpleTooltip_1.default, Object.assign({ content: treeOptionsTooltip, placement: 'bottom', delay: { show: 1000, hide: 0 }, popperConfig: {
+        return ((0, jsx_runtime_1.jsx)(SimpleTooltip_1.default, Object.assign({ content: treeOptionsTooltip, placement: 'bottom-end', delay: { show: 1000, hide: 0 }, popperConfig: {
                 modifiers: [
                     {
                         name: 'offset',
                         options: {
-                            offset: [-20, 10],
+                            offset: [10, 5],
                         },
                     },
+                    {
+                        name: 'arrow',
+                        options: {},
+                    },
                 ],
-            } }, { children: dropdown })));
+            } }, { children: (0, jsx_runtime_1.jsx)("div", { children: dropdown }) })));
     }
     return dropdown;
 };

package/lib/es/components/charts/Area.d.ts

@@ -2,6 +2,11 @@
 import type { AreaProps as RechartsAreaProps } from 'recharts';
 export type AreaProps = Omit<RechartsAreaProps, 'ref'> & {
     strokeColor?: string;
+    dataKey?: string;
+    unit?: string;
+    legendType?: string;
+    type?: string;
+    isAnimationActive?: boolean;
 };
 declare const Area: React.FC<AreaProps>;
 export default Area;

package/lib/es/components/charts/Area.js

@@ -1,12 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const Area = () => null;
-Area.defaultProps = {
-    dataKey: 'value',
-    unit: '',
-    strokeColor: 'color-coldplay-fountain',
-    legendType: 'square',
-    type: 'monotone',
-    isAnimationActive: true,
-};
+const Area = ({ dataKey = 'value', unit = '', strokeColor = 'color-coldplay-fountain', legendType = 'square', type = 'monotone', isAnimationActive = true, }) => null;
 exports.default = Area;

package/lib/es/components/charts/AreaChart.d.ts

@@ -6,6 +6,7 @@ import { type LegendProps } from './Legend';
 import type { AreaProps } from './Area';
 import type { GridProps } from './ChartGrid';
 import type { ResponsiveContainerProps } from './ResponsiveContainer';
+import type { ReferenceLineProps } from './ReferenceLine';
 type RechartsAreaChartProps = React.ComponentProps<typeof RechartsAreaChart>;
 export type AreaChartProps<T extends object> = Omit<RechartsAreaChartProps, 'data'> & {
     width?: number;
@@ -15,6 +16,7 @@ export type AreaChartProps<T extends object> = Omit<RechartsAreaChartProps, 'dat
     dataKey?: string | number | ((obj: T) => any);
     gradients?: React.ReactElement<AreaGradientProps>[];
     areas: React.ReactElement<AreaProps>[];
+    referenceLines?: React.ReactElement<ReferenceLineProps>[];
     xAxisOptions?: XAxisProps;
     yAxisOptions?: YAxisProps;
     gridOptions?: GridProps;

package/lib/es/components/charts/AreaChart.js

@@ -10,9 +10,9 @@ const isObject_1 = tslib_1.__importDefault(require("lodash/fp/isObject"));
 const chartHelper_1 = require("./chartHelper");
 const AreaGradient_1 = tslib_1.__importStar(require("./AreaGradient"));
 const ChartTooltip_1 = tslib_1.__importDefault(require("./ChartTooltip"));
-const Legend_1 = tslib_1.__importDefault(require("./Legend"));
+const Legend_1 = require("./Legend");
 const AreaChart = (props) => {
-    const { width, height, data = [], dataUnit = '', dataKey = 'value', gradients = [], areas = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "gradients", "areas", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
+    const { width, height, data = [], dataUnit = '', dataKey = 'value', gradients = [], areas = [], referenceLines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "gradients", "areas", "referenceLines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
     const areasWithGradient = areas.map(area => {
         const _a = area.props, { strokeColor } = _a, remainingAreaProps = tslib_1.__rest(_a, ["strokeColor"]);
         const gradientId = area.key;
@@ -23,7 +23,10 @@ const AreaChart = (props) => {
         };
     });
     const tooltipProps = (0, isObject_1.default)(tooltip) ? tooltip.props : {};
-    const legendProps = (0, isObject_1.default)(legend) ? legend.props : {};
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({}, containerOptions, { children: (0, jsx_runtime_1.jsxs)(recharts_1.AreaChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [(0, jsx_runtime_1.jsxs)("defs", { children: [gradients, areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)] }), showGrid && (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, (0, chartHelper_1.mapGridOptions)(gridOptions))), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, Object.assign({}, tooltipProps)), legend && (0, jsx_runtime_1.jsx)(Legend_1.default, Object.assign({}, legendProps)), areasWithGradient.map(areaWithGradient => areaWithGradient.area), brush && (0, jsx_runtime_1.jsx)(recharts_1.Brush, { stroke: (0, chartHelper_1.getColor)('gray') })] })) })));
+    const legendProps = (0, isObject_1.default)(legend) ? Object.assign(Object.assign({}, (0, Legend_1.getLegendDefaultProps)()), legend.props) : {};
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({}, containerOptions, { children: (0, jsx_runtime_1.jsxs)(recharts_1.AreaChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [(0, jsx_runtime_1.jsxs)("defs", { children: [gradients, areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)] }), showGrid && (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, (0, chartHelper_1.mapGridOptions)(gridOptions))), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, Object.assign({}, tooltipProps)), legend && legendProps && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(recharts_1.Legend, Object.assign({ wrapperStyle: legendProps.verticalAlign === 'bottom' ? { bottom: 0 } : legendProps.wrapperStyle }, legendProps)) })), areasWithGradient.map(areaWithGradient => areaWithGradient.area), referenceLines.map(referenceLine => {
+                    const _a = referenceLine.props, { stroke } = _a, remainingReferenceLineProps = tslib_1.__rest(_a, ["stroke"]);
+                    return ((0, react_1.createElement)(recharts_1.ReferenceLine, Object.assign({}, remainingReferenceLineProps, { key: referenceLine.key, stroke: (0, chartHelper_1.getColor)(stroke) })));
+                }), brush && (0, jsx_runtime_1.jsx)(recharts_1.Brush, { stroke: (0, chartHelper_1.getColor)('gray') })] })) })));
 };
 exports.default = AreaChart;

package/lib/es/components/charts/BarChart.js

@@ -9,11 +9,11 @@ const isFunction_1 = tslib_1.__importDefault(require("lodash/fp/isFunction"));
 const isObject_1 = tslib_1.__importDefault(require("lodash/fp/isObject"));
 const chartHelper_1 = require("./chartHelper");
 const ChartTooltip_1 = tslib_1.__importDefault(require("./ChartTooltip"));
-const Legend_1 = tslib_1.__importDefault(require("./Legend"));
+const Legend_1 = require("./Legend");
 const BarChart = (props) => {
     const { width, height, data = [], dataUnit, dataKey = 'value', layout = 'horizontal', legend = false, bars = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showGrid = false, showXAxis = true, showYAxis = true, useDataColors = false, brush = false, tooltip = true } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "layout", "legend", "bars", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showGrid", "showXAxis", "showYAxis", "useDataColors", "brush", "tooltip"]);
     const tooltipProps = (0, isObject_1.default)(tooltip) ? tooltip.props : {};
-    const legendProps = (0, isObject_1.default)(legend) ? legend.props : {};
+    const legendProps = (0, isObject_1.default)(legend) ? Object.assign(Object.assign({}, (0, Legend_1.getLegendDefaultProps)()), legend.props) : {};
     let legendPayload;
     if (useDataColors) {
         legendPayload = data.map((entry, index) => {
@@ -21,7 +21,7 @@ const BarChart = (props) => {
             return Object.assign(Object.assign({}, entry), { value: (0, isFunction_1.default)(dataKey) ? dataKey(entry) : entry[dataKey], color: legendColor });
         });
     }
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({}, containerOptions, { children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, Object.assign({ layout: layout, width: width, height: height, data: data }, remainingProps, { children: [showGrid && (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, (0, chartHelper_1.mapGridOptions)(gridOptions))), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), legend && (0, jsx_runtime_1.jsx)(Legend_1.default, Object.assign({}, legendProps, { payload: legendPayload })), tooltip && (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, Object.assign({ cursor: { fill: chartHelper_1.CURSOR_BACKGROUND_COLOR } }, tooltipProps)), bars.map(bar => {
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({}, containerOptions, { children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, Object.assign({ layout: layout, width: width, height: height, data: data }, remainingProps, { children: [showGrid && (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, (0, chartHelper_1.mapGridOptions)(gridOptions))), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, Object.assign({ cursor: { fill: chartHelper_1.CURSOR_BACKGROUND_COLOR } }, tooltipProps)), legend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, Object.assign({ payload: useDataColors ? legendPayload : undefined }, legendProps)), bars.map(bar => {
                     const _a = bar.props, { color } = _a, remainingBarProps = tslib_1.__rest(_a, ["color"]);
                     const cellColor = color && (0, chartHelper_1.getColor)(color);
                     return ((0, jsx_runtime_1.jsx)(recharts_1.Bar, Object.assign({ unit: dataUnit }, remainingBarProps, { fill: cellColor }, { children: useDataColors &&

package/lib/es/components/charts/ChartLabel.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { LabelProps as RechartsLabelProps } from 'recharts';
+export type LabelProps = Omit<RechartsLabelProps, 'ref'> & {};
+declare const ChartLabel: React.FC<LabelProps>;
+export default ChartLabel;