npm - @rio-cloud/rio-uikit - Versions diffs - 1.7.0 → 1.8.0 - Mend

@rio-cloud/rio-uikit 1.7.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (176) hide show

package/README.md +4 -0
package/SvgImage.d.ts +2 -0
package/SvgImage.js +2 -0
package/TableCol.d.ts +2 -0
package/TableCol.js +2 -0
package/TableHead.d.ts +2 -0
package/TableHead.js +2 -0
package/components/actionBarItem/ActionBarItemIcon.js +1 -1
package/components/actionBarItem/ActionBarOverlay.js +1 -1
package/components/applicationHeader/CollapsedNavItem.js +1 -0
package/components/assetTree/Tree.d.ts +8 -0
package/components/assetTree/Tree.js +4 -2
package/components/assetTree/TreeLeaf.js +1 -1
package/components/assetTree/TreeSearch.js +1 -1
package/components/assetTree/TreeSummary.js +1 -1
package/components/assetTree/TypeCounter.d.ts +2 -0
package/components/assetTree/TypeCounter.js +1 -1
package/components/autosuggest/AutoSuggest.js +2 -1
package/components/banner/Banner.d.ts +6 -0
package/components/banner/Banner.js +33 -8
package/components/button/ButtonToolbar.d.ts +1 -1
package/components/button/ButtonToolbar.js +1 -1
package/components/button/ToggleButton.js +0 -1
package/components/clearableInput/ClearableInput.d.ts +20 -7
package/components/clearableInput/ClearableInput.js +68 -8
package/components/dialog/Dialog.js +1 -1
package/components/dialog/FrameDialog.js +1 -1
package/components/dropdown/ButtonDropdown.d.ts +11 -3
package/components/dropdown/ButtonDropdown.js +79 -64
package/components/dropdown/DropdownToggleButton.d.ts +7 -4
package/components/dropdown/DropdownToggleButton.js +11 -3
package/components/formLabel/FormLabel.js +24 -4
package/components/listMenu/ListMenu.js +8 -4
package/components/map/components/Map.js +1 -1
package/components/map/components/features/basics/InfoBubble.js +1 -1
package/components/map/components/features/layers/overlayLayers/IncidentsLayer.js +1 -1
package/components/mapMarker/SingleMapMarker.js +1 -1
package/components/menuItems/MenuItem.js +1 -1
package/components/notification/Notification.js +1 -1
package/components/overlay/OverlayTrigger.js +1 -1
package/components/selects/BaseSelectDropdown.js +1 -1
package/components/selects/Multiselect.d.ts +8 -0
package/components/selects/Multiselect.js +4 -4
package/components/smoothScrollbars/SmoothScrollbars.js +1 -1
package/components/svgImage/SvgElement.d.ts +8 -0
package/components/svgImage/SvgElement.js +11 -0
package/components/svgImage/SvgImage.d.ts +30 -0
package/components/svgImage/SvgImage.js +20 -0
package/components/svgImage/svgConverter.d.ts +17 -0
package/components/svgImage/svgConverter.js +78 -0
package/components/svgImage/useSvgLoader.d.ts +9 -0
package/components/svgImage/useSvgLoader.js +43 -0
package/components/switch/Switch.d.ts +4 -0
package/components/switch/Switch.js +5 -6
package/components/table/TableCardsSorting.d.ts +0 -1
package/components/table/TableCol.d.ts +18 -0
package/components/table/TableCol.js +11 -0
package/components/table/TableHead.d.ts +33 -0
package/components/table/TableHead.js +11 -0
package/components/table/TableSettingsDialog.js +1 -1
package/components/tag/Tag.js +1 -1
package/components/timepicker/TimePicker.d.ts +1 -2
package/components/timepicker/TimePicker.js +35 -8
package/components/virtualList/VirtualList.js +1 -1
package/hooks/useLocationSuggestions.d.ts +27 -0
package/hooks/useLocationSuggestions.js +94 -0
package/hooks/useOnboarding.d.ts +17 -5
package/hooks/useOnboarding.js +7 -1
package/hooks/usePostMessage.js +0 -1
package/hooks/useSearch.d.ts +63 -0
package/hooks/useSearch.js +73 -0
package/hooks/useSorting.d.ts +6 -0
package/hooks/useSorting.js +7 -4
package/hooks/useTableSelection.d.ts +151 -0
package/hooks/useTableSelection.js +196 -0
package/lib/es/SvgImage.d.ts +2 -0
package/lib/es/SvgImage.js +7 -0
package/lib/es/TableCol.d.ts +2 -0
package/lib/es/TableCol.js +7 -0
package/lib/es/TableHead.d.ts +2 -0
package/lib/es/TableHead.js +7 -0
package/lib/es/components/actionBarItem/ActionBarItemIcon.js +1 -1
package/lib/es/components/actionBarItem/ActionBarOverlay.js +1 -1
package/lib/es/components/applicationHeader/CollapsedNavItem.js +1 -0
package/lib/es/components/assetTree/Tree.d.ts +8 -0
package/lib/es/components/assetTree/Tree.js +4 -2
package/lib/es/components/assetTree/TreeLeaf.js +1 -1
package/lib/es/components/assetTree/TreeSearch.js +1 -1
package/lib/es/components/assetTree/TreeSummary.js +1 -1
package/lib/es/components/assetTree/TypeCounter.d.ts +2 -0
package/lib/es/components/assetTree/TypeCounter.js +1 -1
package/lib/es/components/autosuggest/AutoSuggest.js +2 -1
package/lib/es/components/banner/Banner.d.ts +6 -0
package/lib/es/components/banner/Banner.js +31 -6
package/lib/es/components/button/ButtonToolbar.d.ts +1 -1
package/lib/es/components/button/ButtonToolbar.js +1 -1
package/lib/es/components/button/ToggleButton.js +0 -1
package/lib/es/components/clearableInput/ClearableInput.d.ts +20 -7
package/lib/es/components/clearableInput/ClearableInput.js +67 -7
package/lib/es/components/dialog/Dialog.js +1 -1
package/lib/es/components/dialog/FrameDialog.js +1 -1
package/lib/es/components/dropdown/ButtonDropdown.d.ts +11 -3
package/lib/es/components/dropdown/ButtonDropdown.js +79 -64
package/lib/es/components/dropdown/DropdownToggleButton.d.ts +7 -4
package/lib/es/components/dropdown/DropdownToggleButton.js +11 -3
package/lib/es/components/formLabel/FormLabel.js +24 -4
package/lib/es/components/listMenu/ListMenu.js +7 -3
package/lib/es/components/map/components/Map.js +1 -1
package/lib/es/components/map/components/features/basics/InfoBubble.js +1 -1
package/lib/es/components/map/components/features/layers/overlayLayers/IncidentsLayer.js +1 -1
package/lib/es/components/mapMarker/SingleMapMarker.js +1 -1
package/lib/es/components/menuItems/MenuItem.js +1 -1
package/lib/es/components/notification/Notification.js +1 -1
package/lib/es/components/overlay/OverlayTrigger.js +1 -1
package/lib/es/components/selects/BaseSelectDropdown.js +1 -1
package/lib/es/components/selects/Multiselect.d.ts +8 -0
package/lib/es/components/selects/Multiselect.js +4 -4
package/lib/es/components/smoothScrollbars/SmoothScrollbars.js +1 -1
package/lib/es/components/svgImage/SvgElement.d.ts +8 -0
package/lib/es/components/svgImage/SvgElement.js +14 -0
package/lib/es/components/svgImage/SvgImage.d.ts +30 -0
package/lib/es/components/svgImage/SvgImage.js +25 -0
package/lib/es/components/svgImage/svgConverter.d.ts +17 -0
package/lib/es/components/svgImage/svgConverter.js +84 -0
package/lib/es/components/svgImage/useSvgLoader.d.ts +9 -0
package/lib/es/components/svgImage/useSvgLoader.js +48 -0
package/lib/es/components/switch/Switch.d.ts +4 -0
package/lib/es/components/switch/Switch.js +5 -6
package/lib/es/components/table/TableCardsSorting.d.ts +0 -1
package/lib/es/components/table/TableCol.d.ts +18 -0
package/lib/es/components/table/TableCol.js +13 -0
package/lib/es/components/table/TableHead.d.ts +33 -0
package/lib/es/components/table/TableHead.js +14 -0
package/lib/es/components/table/TableSettingsDialog.js +1 -1
package/lib/es/components/tag/Tag.js +1 -1
package/lib/es/components/timepicker/TimePicker.d.ts +1 -2
package/lib/es/components/timepicker/TimePicker.js +35 -8
package/lib/es/components/virtualList/VirtualList.js +1 -1
package/lib/es/hooks/useLocationSuggestions.d.ts +27 -0
package/lib/es/hooks/useLocationSuggestions.js +97 -0
package/lib/es/hooks/useOnboarding.d.ts +17 -5
package/lib/es/hooks/useOnboarding.js +7 -1
package/lib/es/hooks/usePostMessage.js +0 -1
package/lib/es/hooks/useSearch.d.ts +63 -0
package/lib/es/hooks/useSearch.js +75 -0
package/lib/es/hooks/useSorting.d.ts +6 -0
package/lib/es/hooks/useSorting.js +7 -4
package/lib/es/hooks/useTableSelection.d.ts +151 -0
package/lib/es/hooks/useTableSelection.js +205 -0
package/lib/es/themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader.js +1 -1
package/lib/es/useLocationSuggestions.d.ts +2 -0
package/lib/es/useLocationSuggestions.js +7 -0
package/lib/es/useSearch.d.ts +2 -0
package/lib/es/useSearch.js +7 -0
package/lib/es/useTableSelection.d.ts +2 -0
package/lib/es/useTableSelection.js +7 -0
package/lib/es/utils/storageUtils.d.ts +2 -2
package/lib/es/utils/storageUtils.js +2 -0
package/lib/es/utils/urlFeatureToggles.d.ts +12 -6
package/lib/es/utils/urlFeatureToggles.js +14 -8
package/lib/es/utils/useDropDirection.js +1 -0
package/lib/es/version.json +1 -1
package/package.json +36 -39
package/themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader.js +1 -1
package/useLocationSuggestions.d.ts +2 -0
package/useLocationSuggestions.js +2 -0
package/useSearch.d.ts +2 -0
package/useSearch.js +2 -0
package/useTableSelection.d.ts +2 -0
package/useTableSelection.js +2 -0
package/utils/storageUtils.d.ts +2 -2
package/utils/storageUtils.js +2 -0
package/utils/urlFeatureToggles.d.ts +12 -6
package/utils/urlFeatureToggles.js +10 -7
package/utils/useDropDirection.js +1 -0
package/version.json +1 -1

package/components/svgImage/useSvgLoader.js ADDED Viewed

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { convertAttributes, defaultColorMap } from './svgConverter';
+import SvgElement from './SvgElement';
+export const useSvgLoader = (name, baseUrl, colorMap = defaultColorMap) => {
+    const [svgElement, setSvgElement] = useState(null);
+    const [error, setError] = useState(false);
+    useEffect(() => {
+        const fetchSvg = async () => {
+            try {
+                const url = `${baseUrl}/${name}.svg`;
+                const response = await fetch(url);
+                if (!response.ok) {
+                    throw new Error('Failed to load SVG');
+                }
+                const svgText = await response.text();
+                if (svgText.startsWith('<html>')) {
+                    // When fetching from RIO CDN, a default index page is returned when something cannot be found.
+                    // Hence, we need to check for this to throw a proper error message.
+                    throw new Error(`Could not load SVG with URL: ${url}`);
+                }
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(svgText, 'image/svg+xml');
+                const svgNode = doc.querySelector('svg');
+                if (!svgNode) {
+                    throw new Error('Invalid SVG format');
+                }
+                const attributes = convertAttributes(svgNode, colorMap);
+                const svgJsx = (_jsx("svg", { ...attributes, children: Array.from(svgNode.childNodes).map((node, idx) => node.nodeType === 1 ? (
+                    // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                    _jsx(SvgElement, { node: node, colorMap: colorMap }, idx)) : null) }));
+                setSvgElement(svgJsx);
+                setError(false);
+            }
+            catch (err) {
+                console.error(`Error loading SVG "${name}":`, err);
+                setError(true);
+            }
+        };
+        fetchSvg();
+    }, [name, baseUrl, colorMap]);
+    return { svgElement, error };
+};

package/components/switch/Switch.d.ts CHANGED Viewed

@@ -45,6 +45,10 @@ export type SwitchProps = {
      * Possible values are `left` and `right`.
      */
     labelPosition?: 'left' | 'right';
+    /**
+     * Additional class names added to the SVG element.
+     */
+    className?: string;
 };
 declare const Switch: React.ForwardRefExoticComponent<PropsWithChildren<SwitchProps> & React.RefAttributes<HTMLDivElement>> & {
     LABEL_POSITION_LEFT: "left";

package/components/switch/Switch.js CHANGED Viewed

@@ -1,22 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { forwardRef } from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
 import { getCurrentBackgroundColor } from '../../utils/currentColors';
 const Switch = forwardRef((props, ref) => {
-    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, color = 'primary', disabledText, children, labelPosition = children ? 'right' : undefined, onChange = noop, ...remainingProps } = props;
+    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, color = 'primary', disabledText, children, className = '', labelPosition = children ? 'right' : undefined, onChange = noop, ...remainingProps } = props;
     const handleChange = (event) => {
         onChange(event.target.checked);
     };
     const hasMultipleText = enabledText && disabledText;
     const hasSingleText = enabledText && !disabledText;
+    const switchClasses = classNames('uikit-switch', className);
     const switchLabelClasses = classNames('switch-label', disabled && 'cursor-not-allowed', labelPosition && `label-position-${labelPosition}`);
-    const switchContentClasses = classNames('switch-content'
-    // !hasMultipleText && !hasSingleText && 'width-40'
-    );
+    const switchContentClasses = classNames('switch-content');
     const switchBackgroundColor = getCurrentBackgroundColor(color);
-    return (_jsx("div", { ref: ref, ...remainingProps, className: 'uikit-switch', children: _jsxs("label", { className: switchLabelClasses, children: [_jsx("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), _jsxs("div", { className: switchContentClasses, style: { color: switchBackgroundColor, minWidth }, children: [hasMultipleText ? (_jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && _jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), _jsx("div", { className: 'switch-handle' })] }), children && children] }) }));
+    return (_jsx("div", { ref: ref, ...remainingProps, className: switchClasses, children: _jsxs("label", { className: switchLabelClasses, children: [_jsx("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), _jsxs("div", { className: switchContentClasses, style: { color: switchBackgroundColor, minWidth }, children: [hasMultipleText ? (_jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && _jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), _jsx("div", { className: 'switch-handle' })] }), children && children] }) }));
 });
 Switch.LABEL_POSITION_LEFT = 'left';
 Switch.LABEL_POSITION_RIGHT = 'right';

package/components/table/TableCardsSorting.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import React from 'react';
 type TableCardsSortingOption = {
     /**
      * ID to use for the select option.

package/components/table/TableCol.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+export type ColumnDetails = {
+    [key: string]: number;
+};
+export type ColumnDetailsMap = {
+    [key: string]: ColumnDetails;
+};
+type TableColProps = {
+    /**
+     * The width of the column as part of the column details object used for the TableSettingsDialog.
+     */
+    columnDetails?: ColumnDetails;
+    /**
+     * Additional classes added to the col tag element.
+     */
+    className?: string;
+};
+declare const TableCol: ({ columnDetails }: TableColProps) => import("react/jsx-runtime").JSX.Element;
+export default TableCol;

package/components/table/TableCol.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const TableCol = ({ columnDetails }) => {
+    const style = columnDetails?.width
+        ? {
+            minWidth: columnDetails.width,
+            width: columnDetails.width,
+        }
+        : {};
+    return _jsx("col", { style: style });
+};
+export default TableCol;

package/components/table/TableHead.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import type { PropsWithChildren } from 'react';
+type TableHeadProps = {
+    /**
+     * The unique name of the column used as identifier
+     */
+    column?: string;
+    /**
+     * The label that shall be rendered in the table head next to the sorting icons.
+     */
+    label?: string | React.ReactElement;
+    /**
+     * The string title of a column used as native title attribute on the th tag.
+     */
+    title?: string;
+    /**
+     * The sorting key stored as data attribute for later usage for click events.
+     */
+    sortBy?: string;
+    /**
+     * The column sorting direction.
+     */
+    sortDir?: string;
+    /**
+     * The click handler for the th tag.
+     */
+    onClick?: (event: React.MouseEvent<HTMLTableCellElement>) => void;
+    /**
+     * Additional class names assigned to the wrapper element.
+     */
+    className?: string;
+};
+declare const TableHead: (props: PropsWithChildren<TableHeadProps>) => import("react/jsx-runtime").JSX.Element;
+export default TableHead;

package/components/table/TableHead.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import SortArrows from './SortArrows';
+const TableHead = (props) => {
+    const { column, title, label, sortBy, sortDir, onClick = () => { }, className = '', children } = props;
+    const tableHeadClassNames = classNames('user-select-none', 'sort-column', className);
+    const labelString = typeof label === 'string' ? label : '';
+    const thTitle = title ?? labelString;
+    return (_jsxs("th", { className: tableHeadClassNames, onClick: onClick, "data-field": column, "data-sortby": column, title: thTitle, children: [label && (_jsxs("span", { children: [column !== undefined && sortBy === column ? _jsx(SortArrows, { direction: sortDir }) : _jsx(SortArrows, {}), _jsx("span", { children: label })] })), children] }));
+};
+export default TableHead;

package/components/table/TableSettingsDialog.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import isEqual from 'lodash/fp/isEqual';

package/components/tag/Tag.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { forwardRef } from 'react';
 import classNames from 'classnames';
 const Tag = forwardRef((props, ref) => {

package/components/timepicker/TimePicker.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import React from 'react';
-import { type Props as InputMaskProps } from 'react-input-mask';
 export type TimePickerProps = {
     /**
      * Value of the time as string. Note, when value is given the component is treated as controlled.
@@ -40,7 +39,7 @@ export type TimePickerProps = {
     /**
      * Additional properties to be set on the input element.
      */
-    inputProps?: Omit<InputMaskProps, 'mask' | 'maskPlaceholder' | 'value' | 'onChange' | 'alwaysShowMask'>;
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;
     /**
      * Additional classes to be set on the wrapper element.
      */

package/components/timepicker/TimePicker.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import InputMask from 'react-input-mask';
+import { IMask, IMaskInput } from 'react-imask';
 import classNames from 'classnames';
 import isNil from 'lodash/fp/isNil';
 import isEmpty from 'lodash/fp/isEmpty';
@@ -8,7 +8,7 @@ import moment from 'moment';
 import noop from 'lodash/fp/noop';
 import invariant from 'tiny-invariant';
 const MINUTES_OFFSET = 15;
-const mask = [/[0-2]/, /[0-9]/, ':', /[0-5]/, /[0-9]/];
+const mask = '00:00';
 const fullRegexp = /^(?:\d|[01]\d|2[0-3]):[0-5]\d$/;
 const getPadded = (value) => (value >= 10 ? `${value}` : `0${value}`);
 const formatTimeString = (hours, minutes) => `${getPadded(hours)}:${getPadded(minutes)}`;
@@ -39,11 +39,23 @@ const TimePicker = (props) => {
             onChange(value);
         }
     }, [value]);
-    const handleChangeTime = (event) => {
-        const currentValue = event.target.value;
-        setTimeValue(currentValue);
-        if (fullRegexp.test(currentValue)) {
-            onChange(currentValue);
+    const handleFocus = (event) => {
+        const input = event.target;
+        // Check if value is empty or partially filled
+        if (!input.value || input.value.startsWith('-')) {
+            // Move cursor to the first empty position (usually 0)
+            // Timeout needed to wait for IMask internal focus handling
+            setTimeout(() => {
+                input.setSelectionRange(0, 0);
+            }, 0);
+        }
+        // If you want to preserve custom onFocus from props
+        inputProps.onFocus?.(event);
+    };
+    const handleAcceptTime = (val, maskRef) => {
+        setTimeValue(val);
+        if (maskRef.masked.isComplete) {
+            onChange(val);
         }
     };
     const isValid = isTimeValid(timeValue);
@@ -67,6 +79,21 @@ const TimePicker = (props) => {
     };
     const { className: inputClassName, ...otherInputProps } = inputProps;
     const hasFeedback = errorMessage || warningMessage;
-    return (_jsxs("div", { ...remainingProps, className: classNames('TimePicker', 'input-group', className), children: [showIcon && (_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: 'rioglyph rioglyph-time-alt' }) })), _jsxs("div", { className: 'form-control-feedback-wrapper', children: [_jsx(InputMask, { ...otherInputProps, className: classNames('TimePickerInput', 'form-control', inputClassName), mask: mask, maskPlaceholder: '-', value: timeValue, onChange: handleChangeTime, alwaysShowMask: alwaysShowMask }), hasFeedback && (_jsxs(_Fragment, { children: [errorMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' }), _jsx("span", { className: `help-block white-space-${messageWhiteSpace}`, children: _jsx("span", { children: errorMessage || warningMessage }) })] }))] }), isValid && (_jsxs("div", { className: 'TimePickerIncreaseButton input-group-addon', children: [_jsx("div", { className: 'text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer', onClick: handleDecrease, children: _jsx("div", { className: 'rioglyph rioglyph-chevron-left scale-90' }) }), _jsx("div", { className: 'text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer', onClick: handleIncrease, children: _jsx("div", { className: 'rioglyph rioglyph-chevron-right scale-90' }) })] }))] }));
+    return (_jsxs("div", { ...remainingProps, className: classNames('TimePicker', 'input-group', className), children: [showIcon && (_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: 'rioglyph rioglyph-time-alt' }) })), _jsxs("div", { className: 'form-control-feedback-wrapper', children: [_jsx(IMaskInput, { ...otherInputProps, className: classNames('TimePickerInput', 'form-control', inputClassName),
+                        // mask={mask}
+                        mask: 'HH:MM', blocks: {
+                            HH: {
+                                mask: IMask.MaskedRange,
+                                from: 0,
+                                to: 23,
+                                maxLength: 2,
+                            },
+                            MM: {
+                                mask: IMask.MaskedRange,
+                                from: 0,
+                                to: 59,
+                                maxLength: 2,
+                            },
+                        }, value: timeValue, onAccept: handleAcceptTime, onFocus: handleFocus, lazy: !alwaysShowMask, placeholderChar: '-', overwrite: true }), hasFeedback && (_jsxs(_Fragment, { children: [errorMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' }), _jsx("span", { className: `help-block white-space-${messageWhiteSpace}`, children: _jsx("span", { children: errorMessage || warningMessage }) })] }))] }), isValid && (_jsxs("div", { className: 'TimePickerIncreaseButton input-group-addon', children: [_jsx("div", { className: 'text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer', onClick: handleDecrease, children: _jsx("div", { className: 'rioglyph rioglyph-chevron-left scale-90' }) }), _jsx("div", { className: 'text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer', onClick: handleIncrease, children: _jsx("div", { className: 'rioglyph rioglyph-chevron-right scale-90' }) })] }))] }));
 };
 export default TimePicker;

package/components/virtualList/VirtualList.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { useRef, useState, useEffect, useCallback } from 'react';
 import VirtualListItemWrapper from './VirtualListItemWrapper';
 import useWindowResize from '../../hooks/useWindowResize';

package/hooks/useLocationSuggestions.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+export type LocationSuggestion = {
+    id: string;
+    label: string;
+};
+export type LocationFetchOptions = Record<string, unknown> & {
+    apiKey?: string;
+    fetchUrl?: string;
+    limit?: number;
+};
+/**
+ * Custom React hook for fetching location suggestions using HERE Maps Autocomplete API.
+ *
+ * @param query - The user input string to search for location suggestions.
+ * @param options - Optional configuration:
+ *   - apiKey: Your HERE Maps API key (default is 'YOUR_API_KEY').
+ *   - fetchUrl: Optional override for the autocomplete endpoint URL.
+ * @returns An object containing:
+ *   - suggestions: Array of location suggestions with `id` and `label`.
+ *   - loading: Boolean indicating whether the fetch is in progress.
+ *   - error: Any error that occurred during fetching.
+ */
+declare const useLocationSuggestions: (query: string, options?: LocationFetchOptions) => {
+    suggestions: LocationSuggestion[];
+    loading: boolean;
+    error: Error | null;
+};
+export default useLocationSuggestions;

package/hooks/useLocationSuggestions.js ADDED Viewed

@@ -0,0 +1,94 @@
+import { useEffect, useRef, useState } from 'react';
+import debounce from 'lodash/fp/debounce';
+const DEFAULT_URL = 'https://autocomplete.search.hereapi.com/v1/autocomplete';
+const fetchLocationSuggestions = async (query, signal, options = {}) => {
+    const { apiKey, fetchUrl = DEFAULT_URL, limit = 5, ...restOptions } = options;
+    if (!query || !apiKey) {
+        return [];
+    }
+    const params = new URLSearchParams({
+        q: query,
+        apiKey,
+        limit: String(limit),
+        // Add any additional options dynamically
+        ...restOptions,
+    });
+    const response = await fetch(`${fetchUrl}?${params.toString()}`, { signal });
+    if (!response.ok) {
+        // Throw an error for bad responses (4xx, 5xx)
+        // This allows the hook's catch block to handle API errors
+        throw new Error(`API request failed with status ${response.status}`);
+    }
+    const data = await response.json();
+    // Ensure data.items exists and is an array before mapping
+    return Array.isArray(data?.items)
+        ? data.items.map((item) => ({
+            id: item.id,
+            label: item.title,
+        }))
+        : [];
+};
+const FETCH_DEBOUNCE_IN_MS = 300;
+/**
+ * Custom React hook for fetching location suggestions using HERE Maps Autocomplete API.
+ *
+ * @param query - The user input string to search for location suggestions.
+ * @param options - Optional configuration:
+ *   - apiKey: Your HERE Maps API key (default is 'YOUR_API_KEY').
+ *   - fetchUrl: Optional override for the autocomplete endpoint URL.
+ * @returns An object containing:
+ *   - suggestions: Array of location suggestions with `id` and `label`.
+ *   - loading: Boolean indicating whether the fetch is in progress.
+ *   - error: Any error that occurred during fetching.
+ */
+const useLocationSuggestions = (query, options = {}) => {
+    const [suggestions, setSuggestions] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const abortRef = useRef(null);
+    // React re-renders the component every time state or props change. If we define the debounce() call
+    // directly inside the component without useRef, we'll create a new debounced function on every render,
+    // which defeats the purpose of debouncing.
+    // By wrapping it in useRef, we ensure the debounced function is created only once and persists between renders
+    const debouncedFetch = useRef(debounce(FETCH_DEBOUNCE_IN_MS, async (currentQuery, currentOptions) => {
+        // Abort any ongoing request from previous calls
+        abortRef.current?.abort();
+        const controller = new AbortController();
+        abortRef.current = controller;
+        // Reset error before a new fetch attempt
+        setError(null);
+        try {
+            const results = await fetchLocationSuggestions(currentQuery, controller.signal, currentOptions);
+            setSuggestions(results);
+        }
+        catch (fetchError) {
+            if (fetchError.name !== 'AbortError') {
+                setError(fetchError);
+            }
+            setSuggestions([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    })).current;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => {
+        if (!query || !options.apiKey) {
+            setSuggestions([]);
+            setLoading(false);
+            // Abort if there was an ongoing request
+            abortRef.current?.abort();
+            return;
+        }
+        setLoading(true);
+        debouncedFetch(query, options);
+    }, [query, debouncedFetch, options.apiKey, options.fetchUrl]); // `debouncedFetch` is stable due to useRef
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            abortRef.current?.abort();
+        };
+    }, []);
+    return { suggestions, loading, error };
+};
+export default useLocationSuggestions;

package/hooks/useOnboarding.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
-import { type PopoverDOM as DriverPopoverDOM, type State as DriverState, type AllowedButtons } from 'driver.js';
+import { type PopoverDOM as DriverPopoverDOM, type State as DriverState, type AllowedButtons, type DriveStep } from 'driver.js';
 import 'driver.js/dist/driver.css';
 export type PopoverDOM = DriverPopoverDOM;
 export type OnboardingState = DriverState;
-export type OnboardingStep = {
+export type OnboardingStep = DriveStep & {
     element?: string | Element;
     onHighlightStarted?: (element: Element | undefined, step: OnboardingStep, opts: any) => void;
     onHighlighted?: (element: Element | undefined, step: OnboardingStep, opts: any) => void;
@@ -14,6 +14,7 @@ export type OnboardingStep = {
         align?: 'start' | 'center' | 'end';
         showButtons?: ('next' | 'previous' | 'close')[];
         disableButtons?: ('next' | 'previous' | 'close')[];
+        disableActiveInteraction?: boolean;
         popoverClass?: string;
         doneBtnText?: string;
         nextBtnText?: string;
@@ -78,6 +79,13 @@ type OnboardingOptions = {
      * Array of buttons to disable. This is useful when you want to show some of the buttons, but disable some of them.
      */
     disableButtons?: AllowedButtons[];
+    /**
+     * Whether to disable interaction with the highlighted element.
+     * Can be configured at the step level as well.
+     *
+     * @default false
+     */
+    disableActiveInteraction?: boolean;
     /**
      * Option to disable the backdrop. Note, the backdrop element is still there but with 100% opacity
      * and the close on the backdrop is disabled.
@@ -97,18 +105,22 @@ type OnboardingOptions = {
      * @returns
      */
     onPopoverRender?: (popover: PopoverDOM, state: OnboardingState) => void;
+    /**
+     * Callback triggered when the onboarding tour is destroyed
+     */
+    onDestroyed?: () => void;
 };
 export declare const useOnboardingTour: (params: OnboardingOptions) => {
     run: () => void;
     destroy: () => void;
-    onboardingState: () => DriverState;
+    onboardingState: () => any;
     refresh: () => void;
     isActive: () => boolean;
     moveNext: () => void;
     movePrevious: () => void;
     moveTo: (stepNumber: number) => void;
-    hasNextStep: () => false | import("driver.js").DriveStep;
-    hasPreviousStep: () => false | import("driver.js").DriveStep;
+    hasNextStep: () => boolean;
+    hasPreviousStep: () => boolean;
     isFirstStep: () => boolean;
     isLastStep: () => boolean;
     getActiveIndex: () => number | undefined;

package/hooks/useOnboarding.js CHANGED Viewed

@@ -1,10 +1,14 @@
 import { driver, } from 'driver.js';
 import 'driver.js/dist/driver.css';
 export const useOnboardingTour = (params) => {
-    const { steps, prevBtnText = 'Previous', nextBtnText = 'Next', doneBtnText = 'Done', showProgress = true, allowClose = false, stagePadding = 10, stageRadius = 5, allowKeyboardControl = true, showButtons, disableButtons, popoverClass, noBackdrop = false, onPopoverRender = () => { }, } = params;
+    console.log({ params });
+    const { steps, prevBtnText = 'Previous', nextBtnText = 'Next', doneBtnText = 'Done', showProgress = true, allowClose = false, stagePadding = 10, stageRadius = 5, allowKeyboardControl = true, showButtons, disableButtons, popoverClass, noBackdrop = false, onPopoverRender = () => { }, onDestroyed = () => { }, ...driverProps } = params;
     const handlePopoverRender = (popover, options) => {
         onPopoverRender(popover, options.state);
     };
+    const handleDestroyed = () => {
+        onDestroyed();
+    };
     const isSingleStep = !steps || steps.length === 1;
     // This configuration is applied to all steps.
     // Driver.js allows also for individual customization for single steps too.
@@ -25,6 +29,8 @@ export const useOnboardingTour = (params) => {
         allowKeyboardControl,
         popoverClass,
         onPopoverRender: handlePopoverRender,
+        onDestroyed: handleDestroyed,
+        ...driverProps,
     });
     return {
         // Use for onboarding tours. Pass in all steps as "steps" parameter for initial configuration.

package/hooks/usePostMessage.js CHANGED Viewed

@@ -33,7 +33,6 @@ const usePostMessage = (messagePrefix, onReceiveMessage) => {
         if (!actionType) {
             return;
         }
-        console.log(event);
         if (actionType.startsWith(messagePrefix)) {
             callback(event.data);
         }

package/hooks/useSearch.d.ts ADDED Viewed

@@ -0,0 +1,63 @@
+/**
+ * Options for configuring the `useSearch` hook.
+ */
+type UseSearchOptions<T> = {
+    /**
+     * List of object fields to search within. Dot notation (e.g. `'address.city'`) is supported for nested properties.
+     * If omitted, all top-level string and number fields will be used.
+     */
+    fields?: (keyof T | string)[];
+    /**
+     * Optional custom filtering function.
+     * If provided, this takes precedence over field-based filtering.
+     *
+     * @param item - The current item in the list.
+     * @param query - The current search query string.
+     * @returns `true` if the item should be included in the filtered list.
+     */
+    customFilter?: (item: T, query: string) => boolean;
+    /**
+     * Number of milliseconds to debounce the search input.
+     * If omitted, debounce is disabled.
+     */
+    debounceMs?: number;
+    /**
+     * Whether to perform a case-sensitive match.
+     * Default is `false` (case-insensitive).
+     *
+     * @default false
+     */
+    caseSensitive?: boolean;
+};
+/**
+ * A hook to filter a list of objects by a search value.
+ * Supports field-based filtering, custom filtering logic, debounce, and case sensitivity.
+ *
+ * @template T - The type of items in the list (must be an object).
+ *
+ * @param list - The array of objects to search through.
+ * @param options - Configuration options for the search behavior.
+ * @param options.fields - Fields to search through. If omitted, all top-level string/number fields are used.
+ * @param options.customFilter - Optional custom filter function overriding field-based filtering.
+ * @param options.debounceMs - Debounce time in milliseconds.
+ * @param options.caseSensitive - Whether the search should be case-sensitive.
+ *
+ * @returns An object containing:
+ * - `searchValue`: The current search input string.
+ * - `setSearchValue`: A setter function to update the search query.
+ * - `filteredList`: The list of items matching the current search query.
+ *
+ * @example
+ * ```ts
+ * const { searchValue, setSearchValue, filteredList } = useSearch(users, {
+ *   fields: ['name', 'email'],
+ *   debounceMs: 300,
+ * });
+ * ```
+ */
+declare const useSearch: <T extends object>(list: T[], options?: UseSearchOptions<T>) => {
+    searchValue: string;
+    setSearchValue: import("react").Dispatch<import("react").SetStateAction<string>> | import("lodash").DebouncedFunc<(q: string) => void>;
+    filteredList: T[];
+};
+export default useSearch;

package/hooks/useSearch.js ADDED Viewed

@@ -0,0 +1,73 @@
+import { useMemo, useState, useCallback } from 'react';
+import { debounce } from 'lodash/fp';
+/**
+ * Gets the value of a nested field from an object using dot notation.
+ *
+ * @param obj - The object to traverse.
+ * @param path - The dot-notated path string.
+ * @returns The value at the specified path, or undefined.
+ */
+const getNestedValue = (obj, path) => path.split('.').reduce((val, key) => (val ? val[key] : undefined), obj);
+const inferSearchableFields = (item) => Object.keys(item).filter(key => {
+    const value = item[key];
+    return typeof value === 'string' || typeof value === 'number';
+});
+/**
+ * A hook to filter a list of objects by a search value.
+ * Supports field-based filtering, custom filtering logic, debounce, and case sensitivity.
+ *
+ * @template T - The type of items in the list (must be an object).
+ *
+ * @param list - The array of objects to search through.
+ * @param options - Configuration options for the search behavior.
+ * @param options.fields - Fields to search through. If omitted, all top-level string/number fields are used.
+ * @param options.customFilter - Optional custom filter function overriding field-based filtering.
+ * @param options.debounceMs - Debounce time in milliseconds.
+ * @param options.caseSensitive - Whether the search should be case-sensitive.
+ *
+ * @returns An object containing:
+ * - `searchValue`: The current search input string.
+ * - `setSearchValue`: A setter function to update the search query.
+ * - `filteredList`: The list of items matching the current search query.
+ *
+ * @example
+ * ```ts
+ * const { searchValue, setSearchValue, filteredList } = useSearch(users, {
+ *   fields: ['name', 'email'],
+ *   debounceMs: 300,
+ * });
+ * ```
+ */
+const useSearch = (list, options = {}) => {
+    const [searchValue, _setSearchValue] = useState('');
+    // Debounced setter
+    const setSearchValue = useCallback(options.debounceMs ? debounce(options.debounceMs, (q) => _setSearchValue(q)) : _setSearchValue, [options.debounceMs]);
+    const filteredList = useMemo(() => {
+        if (!searchValue) {
+            return list;
+        }
+        if (list.length === 0) {
+            return [];
+        }
+        const isCaseSensitive = options.caseSensitive ?? false;
+        const query = isCaseSensitive ? searchValue : searchValue.toLowerCase();
+        // Custom filter takes precedence
+        if (options.customFilter) {
+            return list.filter(item => options.customFilter?.(item, searchValue));
+        }
+        const fields = options.fields ?? inferSearchableFields(list[0]);
+        return list.filter(item => fields.some(field => {
+            const value = getNestedValue(item, field.toString());
+            if (typeof value === 'string') {
+                const target = isCaseSensitive ? value : value.toLowerCase();
+                return target.includes(query);
+            }
+            if (typeof value === 'number') {
+                return value.toString().includes(query);
+            }
+            return false;
+        }));
+    }, [list, options, searchValue]);
+    return { searchValue, setSearchValue, filteredList };
+};
+export default useSearch;

package/hooks/useSorting.d.ts CHANGED Viewed

@@ -19,6 +19,12 @@ type UseSortingResult<T> = {
      * @returns
      */
     setSortKey: (newKey: SortKey<T>) => void;
+    /**
+     * Function to change the sorting order afterwards
+     * @param newKey the new sorting key(s)
+     * @returns
+     */
+    setSortDirection: (newSortDirection: SortDirectionType) => void;
     /**
      * Function to toggle the sorting between ascending and descending order
      * @returns