@rio-cloud/rio-uikit 1.12.0 → 1.13.1

package/components/selects/Select.js

@@ -50,7 +50,8 @@ const Select = (props) => {
         setPreviousValue(value);
     }
     const updateDOMValues = (itemDOMValuesToUpdated = []) => {
-        setItemDOMValues(itemDOMValuesToUpdated);
+        // preserve previous DOM values when empty
+        setItemDOMValues(prev => (itemDOMValuesToUpdated.length ? itemDOMValuesToUpdated : prev));
     };
     const handleClearSelectedItem = () => {
         setSelectedItem(null);
@@ -83,6 +84,16 @@ const Select = (props) => {
     const handleFilterChange = (event) => {
         event.preventDefault();
         const targetFilterValue = event.currentTarget.value;
+        // if cleared: reset to defaults and bail early
+        if (targetFilterValue === '') {
+            setIsFilterActive(false);
+            setFilterValue('');
+            setFilteredOptions(options);
+            setKeyboardUsed(false);
+            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);
+            return;
+        }
+        // otherwise: filter against the last known non-empty DOM snapshot
         const currentFilteredOptions = filterOptions(itemDOMValues, targetFilterValue, options);
         // highlight the first item of the search result if at least one item was found
         const newFocusedItemIndex = currentFilteredOptions.length > 0 ? 0 : DEFAULT_FOCUSED_ITEM_INDEX;

package/components/smoothScrollbars/SmoothScrollbars.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { forwardRef, useEffect, useImperativeHandle, useRef, } from 'react';
-import { Scrollbars } from 'react-custom-scrollbars-2';
+import { Scrollbars } from 'react-custom-scrollbars-4';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
 import debounce from 'lodash/fp/debounce';

package/components/states/CustomState.js

@@ -25,8 +25,8 @@ const renderButtons = (buttons) => {
 };
 const CustomState = (props) => {
     const { icon, icons = [], image, headline, message, buttons = [], alignment = 'center', fullWidth = false, condensed = false, outerClassName = '', innerClassName = '', children, ...remainingProps } = props;
-    const wrapperClasses = classNames('margin-0', 'width-100pct', !fullWidth && 'max-width-600', 'panel-default', 'panel', !hasPaddingClass(outerClassName) && condensed ? 'padding-10' : 'padding-15', outerClassName);
-    const innerClassNames = classNames('display-flex', 'flex-column', 'align-items-center', 'text-center', !hasPaddingClass(innerClassName) && condensed ? 'padding-15' : 'padding-25', innerClassName);
+    const wrapperClasses = classNames('margin-0', 'width-100pct', !fullWidth && 'max-width-600', 'panel-default', 'panel', !hasPaddingClass(outerClassName) ? (condensed ? 'padding-10' : 'padding-15') : '', outerClassName);
+    const innerClassNames = classNames('display-flex', 'flex-column', 'align-items-center', 'text-center', !hasPaddingClass(innerClassName) ? (condensed ? 'padding-15' : 'padding-25') : '', innerClassName);
     const iconClasses = classNames(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20');
     const iconsClasses = classNames(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20', 'display-flex', 'align-items-center', 'max-width-100pct');
     const headlineClassNames = classNames(condensed ? 'text-size-h4' : 'text-size-h3 text-size-h2-xl', 'line-height-125rel', 'text-color-dark', 'text-medium', 'width-500', 'max-width-100pct', 'text-wrap-balance');

package/components/table/TableSettingsListItem.js

@@ -33,7 +33,7 @@ const TableSettingsListItem = (props) => {
     const isFiltered = filterColumns(columnSearchValue, column, columnLabelStrings) && !updateColumnLabelStrings;
     const itemClassNames = classNames('table-settings-item', updateColumnLabelStrings && 'opacity-0', isFiltered && 'position-offscreen', className);
     const columnDetails = columnsDetails[column];
-    return (_jsxs("div", { className: itemClassNames, ref: setNodeRef, style: style, children: [_jsxs("div", { className: 'table-settings-item-header user-select-none', ref: setActivatorNodeRef, children: [_jsx("div", { className: 'CheckboxWrapper display-flex align-items-center padding-left-2', children: _jsx(Checkbox, { checked: !hiddenColumns.includes(column), onClick: event => {
+    return (_jsxs("div", { className: itemClassNames, ref: setNodeRef, style: style, children: [_jsxs("div", { className: 'table-settings-item-header user-select-none', ref: setActivatorNodeRef, children: [_jsx("div", { className: 'CheckboxWrapper display-flex align-items-center padding-left-2 margin-top--3', children: _jsx(Checkbox, { checked: !hiddenColumns.includes(column), onClick: event => {
                                 onToggleHideColumn(column);
                                 event.stopPropagation();
                             }, disabled: disabledColumns.includes(column) }) }), _jsx("div", { className: `table-settings-item-label ${isSortingDisabled ? 'no-drag' : ''}`, "data-key": column, ...attributes, ...listeners, children: columnLabels[column] }), columnDetails && (_jsx("div", { className: 'column-width-label', children: columnDetails.width ? `${columnDetails.width}px` : autoLabel })), _jsx(TableSettingsColumnButtons, { column: column, index: orderIndex, columnDetails: columnDetails, columnOrder: columnOrder, openColumnsDetails: openColumnsDetails, disabled: isSortingDisabled, onMoveColumn: onMoveColumn, onOpenDetails: onOpenDetails })] }), columnDetails && !isActive && (_jsx(Collapse, { open: !!openColumnsDetails[column], children: _jsx("div", { children: _jsx(TableSettingsColumnDetails, { ...columnDetails, column: column, maxColumnWidth: MAX_COLUMN_WIDTH, onColumnWidthChange: onColumnWidthChange, onResetColumnWidth: onResetColumnWidth }) }) }))] }, `table-settings-item-${column}`));

package/hooks/useFreezePiiData.d.ts

@@ -0,0 +1,2 @@
+declare const useFreezePiiData: () => void;
+export default useFreezePiiData;

package/hooks/useFreezePiiData.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+const useFreezePiiData = () => {
+    useEffect(() => {
+        // Für alle Elemente mit data-pii='visible'
+        const elems = document.querySelectorAll("[data-pii='visible']");
+        for (const el of elems) {
+            let currentValue = null;
+            if ('value' in el && el.value) {
+                currentValue = el.value;
+                el.setAttribute('data-frozen-pii-data', currentValue);
+                el.value = currentValue;
+            }
+            else if (el.textContent) {
+                currentValue = el.textContent;
+                el.setAttribute('data-frozen-pii-data', currentValue);
+                // biome-ignore lint/correctness/noSelfAssign: <explanation>
+                el.textContent = currentValue;
+            }
+        }
+    }, []);
+};
+export default useFreezePiiData;

package/hooks/useOnboarding.d.ts

@@ -1,41 +1,176 @@
-import { type PopoverDOM as DriverPopoverDOM, type State as DriverState, type AllowedButtons, type DriveStep } from 'driver.js';
+import { type PopoverDOM as DriverPopoverDOM, type State as DriverState, type AllowedButtons, type DriveStep, type DriverHook } from 'driver.js';
 import 'driver.js/dist/driver.css';
 export type PopoverDOM = DriverPopoverDOM;
 export type OnboardingState = DriverState;
+type DriverCallbackOptions = Parameters<DriverHook>[2];
+/**
+ * Describes a single step in an Onboarding Tour.
+ *
+ * Is based on the underlying {@link DriveStep driver.js step configuration object}.
+ *
+ * @see https://driverjs.com/docs/configuration
+ */
 export type OnboardingStep = DriveStep & {
+    /**
+     * The target element to highlight.
+     *
+     * This can be a DOM element (ref), a function that returns a DOM element, or a CSS selector (most likely, you want
+     * to go with a selector as it's the easiest one to implement).
+     *
+     * If this is a selector, the first matching element will be highlighted.
+     *
+     * If no element is given, the popover will simply be centered on the screen.
+     *
+     * @example '[data-onboarding-walkthrough-step="2"]'
+     */
     element?: string | Element;
-    onHighlightStarted?: (element: Element | undefined, step: OnboardingStep, opts: any) => void;
-    onHighlighted?: (element: Element | undefined, step: OnboardingStep, opts: any) => void;
-    onDeselected?: (element: Element | undefined, step: OnboardingStep, opts: any) => void;
-    popover?: {
+    /**
+     * Defines the content and appearance of the popover.
+     */
+    popover: {
+        /**
+         * Title text to be shown.
+         *
+         * You can use HTML here, but maybe you shouldn't.
+         */
         title?: string;
+        /**
+         * Description text to be shown.
+         *
+         * You can use HTML here, but maybe you shouldn't.
+         */
         description?: string;
+        /**
+         * The position of the popover relative to the target element.
+         *
+         * @default 'left'
+         */
         side?: 'top' | 'right' | 'bottom' | 'left' | 'over';
+        /**
+         * Where the popover is anchored to the target element.
+         *
+         * @default 'start'
+         */
         align?: 'start' | 'center' | 'end';
-        showButtons?: ('next' | 'previous' | 'close')[];
-        disableButtons?: ('next' | 'previous' | 'close')[];
+        /**
+         * The buttons that should be shown in the popover - for this step only.
+         *
+         * When highlighting a single element (there is just a single step), there are no buttons by default. When
+         * showing a step of a multi-step tour, all buttons are shown by default.
+         *
+         * The "close" button is a simple "X" in the popover.
+         * The "previous" and "next" buttons are actual text buttons. can define the text contents of those buttons via
+         * the {@link prevBtnText}, {@link nextBtnText} and {@link doneBtnText} properties.
+         *
+         * This overrides the showButtons array on the {@link OnboardingOptions}.
+         */
+        showButtons?: AllowedButtons[];
+        /**
+         * The buttons that should be disabled in the popover - for this step only.
+         *
+         * This is useful when you want to show some of the buttons, but disable them anyway.
+         *
+         * This overrides the disableButtons array on the {@link OnboardingOptions}.
+         */
+        disableButtons?: AllowedButtons[];
+        /**
+         * Whether to disable interaction with the highlighted element.
+         *
+         * @default false
+         */
         disableActiveInteraction?: boolean;
+        /**
+         * Custom class to add to the popover element.
+         *
+         * This can be used to style the popover.
+         */
         popoverClass?: string;
-        doneBtnText?: string;
-        nextBtnText?: string;
+        /**
+         * Text to use for the "previous" button - specific for this step only.
+         *
+         * This overrides the prevBtnText on the {@link OnboardingOptions}.
+         */
         prevBtnText?: string;
+        /**
+         * Text to use for the "next" button - specific for this step only.
+         *
+         * This overrides the nextBtnText on the {@link OnboardingOptions}.
+         */
+        nextBtnText?: string;
+        /**
+         * Text to use for the "done" (a.k.a. the final "next") button - specific for this step only.
+         *
+         * This overrides the doneBtnText on the {@link OnboardingOptions}.
+         */
+        doneBtnText?: string;
     };
+    /**
+     * Callback triggered when the highlighting is about to become visible.
+     *
+     * @param element The target DOM element of the step.
+     * @param step The {@link DriveStep driver.js step object} configured for the step.
+     * @param opts The configuration options and current state of the driver object as well as the driver object itself.
+     */
+    onHighlightStarted?: (element: Element | undefined, step: OnboardingStep, opts: DriverCallbackOptions) => void;
+    /**
+     * Callback triggered when the highlight is visible.
+     *
+     * @param element The target DOM element of the step.
+     * @param step The {@link DriveStep driver.js step object} configured for the step.
+     * @param opts The configuration options and current state of the driver object as well as the driver object itself.
+     */
+    onHighlighted?: (element: Element | undefined, step: OnboardingStep, opts: DriverCallbackOptions) => void;
+    /**
+     * Callback triggered when the highlight is about to become invisible.
+     *
+     * @param element The target DOM element of the step.
+     * @param step The {@link DriveStep driver.js step object} configured for the step.
+     * @param opts The configuration options and current state of the driver object as well as the driver object itself.
+     */
+    onDeselected?: (element: Element | undefined, step: OnboardingStep, opts: DriverCallbackOptions) => void;
 };
 type OnboardingOptions = {
     /**
-     *  Array of steps to highlight. You should pass this when you want to setup a product tour.
+     * Array of steps to highlight.
+     *
+     * You should pass this when you want to set up a tour.
      */
     steps?: OnboardingStep[];
     /**
-     * Text for the previous button in the onboarding popover.
+     * The buttons that should be shown in popovers.
+     *
+     * When highlighting a single element (there is just a single step), there are no buttons by default. When showing
+     * a step of a multi-step tour, all buttons are shown by default.
+     *
+     * The "close" button is a simple "X" in the popover.
+     * The "previous" and "next" buttons are actual text buttons. can define the text contents of those buttons via
+     * the {@link prevBtnText}, {@link nextBtnText} and {@link doneBtnText} properties.
+     */
+    showButtons?: AllowedButtons[];
+    /**
+     * The buttons that should be disabled in popovers.
+     *
+     * This is useful when you want to show some of the buttons, but disable them anyway.
+     */
+    disableButtons?: AllowedButtons[];
+    /**
+     * Text to use for the "previous" button.
+     *
+     * @default 'Previous'
      */
     prevBtnText?: string;
     /**
-     * Text for the next button in the onboarding popover.
+     * Text to use for the "next" button.
+     *
+     * @default 'Next'
      */
     nextBtnText?: string;
     /**
-     * Text for the done button in the onboarding popover.
+     * Text to use for the "done" (a.k.a. the final "next") button.
+     *
+     * When given, this overrides the {@link nextBtnText} in the final popover of a tour.
+     *
+     * @default 'Done'
      */
     doneBtnText?: string;
     /**
@@ -46,8 +181,8 @@ type OnboardingOptions = {
     showProgress?: boolean;
     /**
      * Whether to allow closing the popover by clicking on the backdrop.
-     * This should be disabled during the tour to ensure th user completes the tour.
-     * But can be enabled on the last step.
+     *
+     * This should be disabled during a tour to ensure the user completes the tour, but can be enabled on the last step.
      *
      * @default false
      */
@@ -70,15 +205,6 @@ type OnboardingOptions = {
      * @default true
      */
     allowKeyboardControl?: boolean;
-    /**
-     * Array of buttons to show in the popover. Defaults to ["next", "previous", "close"]
-     * for product tours and [] for single element highlighting.
-     */
-    showButtons?: AllowedButtons[];
-    /**
-     * 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.
@@ -98,15 +224,14 @@ type OnboardingOptions = {
      */
     popoverClass?: string;
     /**
-     * Callback triggered when the onboarding popover renders.
+     * Callback triggered when an onboarding popover renders.
      *
-     * @param popover
-     * @param state
-     * @returns
+     * @param element The target DOM element of the step.
+     * @param opts The configuration options and current state of the driver object as well as the driver object itself.
      */
-    onPopoverRender?: (popover: PopoverDOM, state: OnboardingState) => void;
+    onPopoverRender?: (popover: PopoverDOM, opts: OnboardingState) => void;
     /**
-     * Callback triggered when the onboarding tour is destroyed
+     * Callback triggered when the onboarding tour is destroyed.
      */
     onDestroyed?: () => void;
 };
@@ -131,6 +256,15 @@ type OnboardingTipOptions = {
     stageRadius?: number;
     noBackdrop?: boolean;
 };
+/**
+ * Note: please use the {@link import('../components/onboarding/OnboardingTip')#default OnboardingTip} instead of this
+ * hook!
+ *
+ * This is kept only for future development of driver.js with the hope to solve the global driver styling issue and to
+ * eventually replace the OnboardingTooltip also with driver.js.
+ *
+ * @experimental
+ */
 export declare const useOnboardingTip: (options?: OnboardingTipOptions) => {
     highlight: (step: OnboardingStep) => void;
     destroy: () => void;

package/hooks/useOnboarding.js

@@ -1,7 +1,6 @@
 import { driver, } from 'driver.js';
 import 'driver.js/dist/driver.css';
 export const useOnboardingTour = (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);
@@ -63,6 +62,15 @@ export const useOnboardingTour = (params) => {
         getActiveIndex: () => driverInstance.getActiveIndex(),
     };
 };
+/**
+ * Note: please use the {@link import('../components/onboarding/OnboardingTip')#default OnboardingTip} instead of this
+ * hook!
+ *
+ * This is kept only for future development of driver.js with the hope to solve the global driver styling issue and to
+ * eventually replace the OnboardingTooltip also with driver.js.
+ *
+ * @experimental
+ */
 export const useOnboardingTip = (options) => {
     const { allowClose = true, stagePadding = 0, stageRadius = 5, noBackdrop = true } = options || {};
     const driverInstance = driver({

package/lib/es/components/assetTree/Tree.d.ts

@@ -73,10 +73,19 @@ export type TreeItem = {
      * Optional sub-type of the item.
      *
      * This refers to the name of an additional rioglyph icon (excluding the `rioglyph-` prefix),
-     * typically used to render a secondary icon next to the primary one (e.g. for fuel type or
-     * equipment variations).
+     * typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop).
      */
     subType?: string;
+    /**
+     * Optional pair icon override for the subType.
+     *
+     * - If set to a string (e.g. `'fuel-gas'`), this icon will be used explicitly.
+     * - If set to `undefined`, the `subType` property will be used as the fallback icon.
+     * - If set to `null`, no icon will be rendered, even if `subType` is defined.
+     *
+     * This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons.
+     */
+    pairIcon?: string | null;
     /**
      * List of group ids the items is associated with.
      *

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 const react_1 = tslib_1.__importDefault(require("react"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isObject_1 = tslib_1.__importDefault(require("lodash/fp/isObject"));
 const Checkbox_1 = tslib_1.__importDefault(require("../checkbox/Checkbox"));
 const RadioButton_1 = tslib_1.__importDefault(require("../radiobutton/RadioButton"));
+const treeUtils_1 = require("./treeUtils");
 const getIconRenderInfo = (item) => {
     if (item.icon === null) {
         // explicit opt-out
@@ -15,14 +15,14 @@ const getIconRenderInfo = (item) => {
     }
     // fallback to type
     const primaryIcon = item.icon ?? item.type;
-    // treat subType as pair icon name
-    const subIcon = item.subType ?? null;
-    return { primaryIcon, subIcon };
+    // pairIcon with fallback to subType
+    const subIcon = item.pairIcon === null ? null : (item.pairIcon ?? item.subType ?? null);
+    return { primaryIcon: (0, treeUtils_1.withRioglyphPrefix)(primaryIcon), subIcon: (0, treeUtils_1.withRioglyphPrefix)(subIcon) };
 };
 const TreeLeaf = react_1.default.memo((props) => {
     const { item, hasMultiselect, showRadioButtons, isSelected, onSelectItem, onActiveItem } = props;
     const treeNodeClassNames = (0, classnames_1.default)('TreeLeaf', 'form-group margin-bottom-0', isSelected && 'active', item.className && item.className);
     const { primaryIcon, subIcon } = getIconRenderInfo(item);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: treeNodeClassNames, "data-key": item.id, children: [hasMultiselect && (0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), (0, jsx_runtime_1.jsxs)("span", { className: 'TreeLabel TreeLabelName', onClick: onActiveItem, children: [primaryIcon && !subIcon && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${primaryIcon}` }), primaryIcon && subIcon && ((0, jsx_runtime_1.jsxs)("span", { className: 'rioglyph-icon-pair', children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${primaryIcon}` }), (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${subIcon}` })] })), (0, jsx_runtime_1.jsxs)("span", { className: 'TreeLabelNameText', children: [(0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameTextHeadline', children: (0, isObject_1.default)(item.name) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-light margin-right-3', children: item.name.firstName }), (0, jsx_runtime_1.jsx)("span", { children: item.name.lastName })] })) : (item.name) }), item.info && (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameTextSubline', children: item.info })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: treeNodeClassNames, "data-key": item.id, children: [hasMultiselect && (0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), (0, jsx_runtime_1.jsxs)("span", { className: 'TreeLabel TreeLabelName', onClick: onActiveItem, children: [primaryIcon && !subIcon && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${primaryIcon}` }), primaryIcon && subIcon && ((0, jsx_runtime_1.jsxs)("span", { className: 'rioglyph-icon-pair', children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${primaryIcon}` }), (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${subIcon}` })] })), (0, jsx_runtime_1.jsxs)("span", { className: 'TreeLabelNameText', children: [(0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameTextHeadline', children: (0, isObject_1.default)(item.name) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-light margin-right-3', children: item.name.firstName }), (0, jsx_runtime_1.jsx)("span", { children: item.name.lastName })] })) : (item.name) }), item.info && (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameTextSubline', children: item.info })] })] })] }));
 });
 exports.default = TreeLeaf;

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

@@ -5,19 +5,26 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Checkbox_1 = tslib_1.__importDefault(require("../checkbox/Checkbox"));
-// Add prefix `rioglyph-` if icon is given and does not start with the prefix
-const withRioglyphPrefix = (name) => {
-    if (!name) {
-        return null;
-    }
-    return name.startsWith('rioglyph-') ? name : `rioglyph-${name}`;
-};
+const treeUtils_1 = require("./treeUtils");
 const TreeNode = react_1.default.memo((props) => {
     const { node, hasMultiselect = false, isSelected = false, isOpen = false, isIndeterminate = false, onToggleNode, onSelect, } = props;
     const treeNodeClassNames = (0, classnames_1.default)('TreeNode', 'from-group', isSelected && 'checked', node.className && node.className);
     const hasChildren = !!node.items.length;
     const expandedIcon = node.expandedIcon || node.icon;
-    const iconName = isOpen ? withRioglyphPrefix(expandedIcon) : withRioglyphPrefix(node.icon);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: treeNodeClassNames, "data-key": node.id, onClick: () => hasChildren && onToggleNode(node.id), children: [hasMultiselect && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: () => onSelect(node, isIndeterminate) })), (0, jsx_runtime_1.jsxs)("span", { className: 'TreeLabel TreeLabelName', children: [iconName && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${iconName}` }), (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameText', children: (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameTextHeadline', children: node.name }) }), (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelCount label label-muted label-filled label-condensed', children: node.items.length }), (0, jsx_runtime_1.jsx)("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] })] }));
+    const iconName = isOpen ? (0, treeUtils_1.withRioglyphPrefix)(expandedIcon) : (0, treeUtils_1.withRioglyphPrefix)(node.icon);
+    const handleNodeSelection = () => {
+        onSelect(node, isIndeterminate);
+    };
+    const handleContainerClick = (event) => {
+        // Ignore clicks on checkboxes and don't expand or collapse on checkbox clicks
+        const isCheckbox = event.target.closest('.TreeCheckbox');
+        if (isCheckbox) {
+            return;
+        }
+        if (hasChildren) {
+            onToggleNode(node.id);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: treeNodeClassNames, "data-key": node.id, onClick: handleContainerClick, children: [hasMultiselect && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: handleNodeSelection })), (0, jsx_runtime_1.jsxs)("span", { className: 'TreeLabel TreeLabelName', children: [iconName && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${iconName}` }), (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameText', children: (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameTextHeadline', children: node.name }) }), (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelCount label label-muted label-filled label-condensed', children: node.items.length }), (0, jsx_runtime_1.jsx)("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] })] }));
 });
 exports.default = TreeNode;

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 const react_1 = tslib_1.__importDefault(require("react"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));

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

@@ -8,6 +8,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const useHover_1 = tslib_1.__importDefault(require("../../hooks/useHover"));
 const mergeRefs_1 = tslib_1.__importDefault(require("../../utils/mergeRefs"));
+const treeUtils_1 = require("./treeUtils");
 const TypeCounter = (0, react_1.forwardRef)((props, ref) => {
     const { icon, value, isActive, hasFilter = false, enableActivity = false, onClick = noop_1.default, type, hideOnZero = false, ...remainingProps } = props;
     const internalRef = (0, react_1.useRef)(null);
@@ -19,6 +20,7 @@ const TypeCounter = (0, react_1.forwardRef)((props, ref) => {
     if (hideOnZero && !value) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: mergedRef, ...remainingProps, className: wrapperClassName, onClick: handleClick, children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${icon} text-size-16 margin-right-2` }), (0, jsx_runtime_1.jsx)("span", { className: counterClassNames, children: value || 0 })] }));
+    const iconName = (0, treeUtils_1.withRioglyphPrefix)(icon);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: mergedRef, ...remainingProps, className: wrapperClassName, onClick: handleClick, children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${iconName} text-size-16 margin-right-2` }), (0, jsx_runtime_1.jsx)("span", { className: counterClassNames, children: value || 0 })] }));
 });
 exports.default = TypeCounter;

package/lib/es/components/assetTree/treeUtils.d.ts

@@ -16,3 +16,4 @@ export declare const sortGroupsByName: (groups: GroupedItems) => TreeItem[];
 export declare const sortGroupItemsByName: (groups: GroupedItems) => GroupedItems;
 export declare const getMappedItemsToGroups: (groups: TreeGroup[], items: TreeItem[]) => GroupedItems;
 export declare const addOrRemoveFromList: <T>(list: T[], item: T) => T[];
+export declare const withRioglyphPrefix: (name?: string | null) => string | null;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addOrRemoveFromList = exports.getMappedItemsToGroups = exports.sortGroupItemsByName = exports.sortGroupsByName = exports.excludeFromList = exports.filterAssetByType = exports.filterEmptyGroups = exports.getFlatItems = exports.getFullName = exports.debounceFn = exports.getSubTypeCounts = exports.getTypeCounts = exports.getListIds = exports.containsItemById = exports.filterOutByItemId = exports.notEmpty = exports.notEqual = void 0;
+exports.withRioglyphPrefix = exports.addOrRemoveFromList = exports.getMappedItemsToGroups = exports.sortGroupItemsByName = exports.sortGroupsByName = exports.excludeFromList = exports.filterAssetByType = exports.filterEmptyGroups = exports.getFlatItems = exports.getFullName = exports.debounceFn = exports.getSubTypeCounts = exports.getTypeCounts = exports.getListIds = exports.containsItemById = exports.filterOutByItemId = exports.notEmpty = exports.notEqual = void 0;
 const tslib_1 = require("tslib");
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
@@ -107,3 +107,11 @@ const addOrRemoveFromList = (list, item) => {
     return [...listSet];
 };
 exports.addOrRemoveFromList = addOrRemoveFromList;
+// Add prefix `rioglyph-` if icon is given and does not start with the prefix
+const withRioglyphPrefix = (name) => {
+    if (!name) {
+        return null;
+    }
+    return name.startsWith('rioglyph-') ? name : `rioglyph-${name}`;
+};
+exports.withRioglyphPrefix = withRioglyphPrefix;

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

@@ -57,7 +57,7 @@ const useTreeVirtualization = (groupedItems, flatItems, hasSearchValue, hasGroup
                 // SmoothScrollbars exposes the scroll container through its view
                 const scrollbarsInstance = scrollElementRef.current;
                 // Access the internal scroll container
-                // This depends on how react-custom-scrollbars-2 exposes its internals
+                // This depends on how react-custom-scrollbars-4 exposes its internals
                 return scrollbarsInstance?.view;
             }
             return null;

package/lib/es/components/clearableInput/ClearableInput.d.ts

@@ -1,7 +1,14 @@
+/** biome-ignore-all lint/complexity/noBannedTypes: <explanation> */
 import React from 'react';
 export declare const DEFAULT_TYPE = "text";
 export declare const SUPPORTED_TYPES: string[];
 export type MaskVisibility = 'always' | 'onFocus' | 'never';
+export type MaskDefinition = {
+    mask: string;
+    definitions?: Record<string, string | RegExp>;
+    startsWith?: string;
+    [key: string]: any;
+};
 export type ClearableInputProps = {
     /**
      * Gives the input element the id.
@@ -100,24 +107,30 @@ export type ClearableInputProps = {
      *
      * The following characters will define mask format:
      *
-     * Character: "0" = allowed input: "0-9" (digit)
+     * "0" = allowed input: "0-9" (digit)
      *
-     * Character: "a" = allowed input: "a-z, A-Z" (letter)
+     * "a" = allowed input: "a-z, A-Z" (letter)
      *
-     * Character: "*" = allowed input: any character
+     * "*" = allowed input: any character
      *
-     * Character: "#" = allowed input: "0-9, a-z, A-Z" (digit or letter)
+     * "#" = allowed input: "0-9, a-z, A-Z" (digit or letter)
      *
-     * Any other character in the mask is considered a fixed value.
+     * Other chars which is not in custom definitions supposed to be fixed:
      *
-     * @example
-     * '-- ### ### ###' or '+49 00 000 00'
+     * [] - make input optional
      *
-     * @example
-     * ['0', '0', /[0-9]/, ' ', /[a-zA-Z]/]
+     * {} - include fixed part in unmasked value
+     *
+     * ` - prevent symbols shift back
+     *
+     * If definition character should be treated as fixed it should be escaped by \\ (E.g. \\0).
+     *
+     * Additionally you can provide custom definitions.
      *
+     * @example
+     * '-- ### ### ###' or '+49 00 000 00'
      */
-    mask?: string | (string | RegExp)[];
+    mask?: string | (string | RegExp)[] | RegExp | DateConstructor | number | Function | MaskDefinition[];
     /**
      * Placeholder to cover unfilled parts of the mask.
      *
@@ -125,11 +138,16 @@ export type ClearableInputProps = {
      */
     maskPlaceholder?: string | null;
     /**
-     * Disabled the input component.
+     * Enable characters overwriting
      *
-     * @default false
+     * @default true
      */
-    disabled?: boolean;
+    maskOverwrite?: boolean | 'shift' | undefined;
+    /**
+     * Chooses the mask for dynamic masking depending on input value.
+     * Note, this function may not be an empty function, otherwise the mask selection won't work
+     */
+    maskDispatch?: (appended: string, dynamicMasked: any) => any;
     /**
      * Controls when the mask pattern is visible.
      * - 'always': Mask is always visible
@@ -139,6 +157,24 @@ export type ClearableInputProps = {
      * @default 'always'
      */
     maskVisibility?: MaskVisibility;
+    /**
+     * Custom definitions to have more control over your mask. The defined character will be replaced in your mask.
+     *
+     * @example
+     * mask='AAA AAA.AA'
+     * maskDefinitions={{ A: /[A-Z0-9]/ }}
+     */
+    maskDefinitions?: Record<string, string | RegExp>;
+    /**
+     * Minimum value to be entered. This prop is extended to accept a Date
+     * when used with an input mask.
+     */
+    min?: string | number | undefined | Date;
+    /**
+     * Maximum value to be entered. This prop is extended to accept a Date
+     * when used with an input mask.
+     */
+    max?: string | number | undefined | Date;
     /**
      * Whether mask prefix and placeholder should be displayed when input is empty and
      * has no focus.
@@ -147,6 +183,12 @@ export type ClearableInputProps = {
      * @deprecated please use maskVisibility='always' instead
      */
     alwaysShowMask?: boolean;
+    /**
+     * Disabled the input component.
+     *
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Additional classes to be set on the input element.
      */