@rio-cloud/rio-uikit 1.7.1 → 1.8.0

package/hooks/useTableSelection.js

@@ -0,0 +1,196 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+/**
+ * CSS class applied to the currently active row.
+ */
+export const ACTIVE_CLASS = 'active';
+/**
+ * Default HTML data attribute name used to store the unique ID on table row elements.
+ */
+export const DEFAULT_DATA_ATTRIBUTE = 'data-id';
+// Default classes for the checkbox and action cells
+export const DEFAULT_TABLE_CHECKBOX_CELL_CLASS = '.table-checkbox';
+export const DEFAULT_TABLE_ACTION_CELL_CLASS = '.table-action';
+/**
+ * A React hook to manage row selection and active row state for an HTML table,
+ * including DOM manipulations for visual feedback to optimize performance by
+ * preventing individual row re-renders.
+ *
+ * @param {UseTableSelectionOptions<TData>} options The configuration properties for the hook.
+ * @returns {UseTableSelectionReturn} The state and handlers for managing table selection and active row.
+ */
+const useTableSelection = (props) => {
+    const { tableData, idKey, initialSelectedRowIds = [], initialActiveRowId = '', checkboxQuerySelector = '.table-checkbox input[type="checkbox"]', dataAttributeName = DEFAULT_DATA_ATTRIBUTE, ref, } = props;
+    const [selectedRowIds, setSelectedRowIds] = useState(initialSelectedRowIds);
+    const [activeRowId, setActiveRowId] = useState(initialActiveRowId);
+    const [lastActiveRowId, setLastActiveRowId] = useState(initialActiveRowId);
+    const tableRef = ref ?? useRef(null);
+    // --- DOM Manipulation Effect (The performance workaround) ---
+    /**
+     * Effect to handle DOM manipulations for active row highlighting and ensuring
+     * checkboxes for selected rows are visually checked.
+     * This effect runs when active row state or selection state changes.
+     * Note: This effect currently only *selects* rows based on `selectedRowIds`.
+     * Deselection in the DOM is handled directly by `onSelection` and `onToggleAll` handlers.
+     * For a more centralized DOM update, this effect could be expanded to handle deselection as well.
+     */
+    useEffect(() => {
+        updateRowSelection();
+    }, [activeRowId, lastActiveRowId, selectedRowIds]); // Rerun when these change
+    const updateRowSelection = () => {
+        if (!tableRef.current) {
+            return;
+        }
+        const rows = [...tableRef.current.rows];
+        if (lastActiveRowId !== activeRowId) {
+            // Due to performance reasons the individual rows should not re-render when the
+            // selected driver changes, hence we need to avoid passing that information as props
+            // to the row component otherwise it would re-render as the props have changed.
+            // Instead, we check here which row to highlight.
+            removeHighlightFromRow(rows, lastActiveRowId, dataAttributeName);
+            highlightRow(rows, activeRowId, dataAttributeName);
+        }
+        // handle multi-selection
+        selectedRowIds.forEach(rowId => selectRow(rows, rowId, dataAttributeName, checkboxQuerySelector));
+    };
+    const handleActiveRowChange = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const targetRow = event.currentTarget;
+        const rowId = targetRow.getAttribute(dataAttributeName) ?? '';
+        // Avoid activation if click is on checkbox/action area (more robust check needed if complex row structure)
+        const clickedElement = event.target;
+        const isCheckboxCell = clickedElement.closest(DEFAULT_TABLE_CHECKBOX_CELL_CLASS);
+        const isActionCell = clickedElement.closest(DEFAULT_TABLE_ACTION_CELL_CLASS);
+        if (isCheckboxCell || isActionCell) {
+            return;
+        }
+        setActiveRowId(currentActiveRow => {
+            const newActiveRowId = currentActiveRow === rowId ? '' : rowId;
+            setLastActiveRowId(currentActiveRow); // Update lastActive for the effect
+            return newActiveRowId;
+        });
+    }, []);
+    const handleSelection = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        // Find the correct row element containing the data attribute
+        const rowElement = event.target.closest(`tr[${dataAttributeName}]`);
+        const selectedRowId = rowElement?.getAttribute(dataAttributeName);
+        if (!selectedRowId) {
+            console.warn('Could not find row ID for selection event.');
+            return;
+        }
+        setSelectedRowIds(prevSelectedRowIds => {
+            if (prevSelectedRowIds.includes(selectedRowId)) {
+                deselectRows([selectedRowId]);
+                return prevSelectedRowIds.filter(id => id !== selectedRowId);
+            }
+            return [...prevSelectedRowIds, selectedRowId];
+        });
+    }, []);
+    const handleToggleAll = useCallback((shouldSelect) => {
+        const allRowIds = tableData.map(row => `${row[idKey]}`);
+        setSelectedRowIds(shouldSelect ? allRowIds : []);
+        // Deselect all rows when there is at least one row selected, else select all rows
+        if (shouldSelect) {
+            setSelectedRowIds(allRowIds);
+        }
+        else {
+            setSelectedRowIds([]);
+            deselectRows(allRowIds);
+            for (const id in allRowIds) {
+                const rows = tableRef.current ? [...tableRef.current.rows] : [];
+                deselectRow([...rows], id, dataAttributeName, checkboxQuerySelector);
+            }
+        }
+        // DOM updates are handled by useEffect -> updateRowsDOM
+    }, [tableData]);
+    const deselectRows = (rowIds) => {
+        const rows = tableRef.current ? [...tableRef.current.rows] : [];
+        rowIds.forEach(rowId => deselectRow(rows, rowId, dataAttributeName, checkboxQuerySelector));
+    };
+    const hasSelection = selectedRowIds.length > 0;
+    const isAllSelected = hasSelection && selectedRowIds.length === tableData.length && tableData.length > 0;
+    // --- Return hook state and handlers ---
+    return {
+        tableRef,
+        selectedRowIds,
+        activeRowId,
+        onSelection: handleSelection,
+        onActiveRowChange: handleActiveRowChange,
+        onToggleAll: handleToggleAll,
+        updateRowSelection,
+        hasSelection,
+        isAllSelected,
+    };
+};
+/**
+ * Finds a table row element by its data attribute value.
+ *
+ * @param rows Array of HTMLTableRowElements to search within.
+ * @param value The value of the data attribute to find.
+ * @param attribute The name of the data attribute (e.g., 'data-id').
+ * @returns The found HTMLTableRowElement or undefined.
+ */
+export const getRowByDataAttribute = (rows, value, attribute) => {
+    if (!value) {
+        return undefined;
+    }
+    return rows.find(row => row.getAttribute(attribute) === value);
+};
+/**
+ * Adds an "active" class to a specified table row.
+ *
+ * @param rows Array of HTMLTableRowElements to search within.
+ * @param rowId The ID of the row to highlight.
+ * @param dataAttributeName The data attribute used to identify the row.
+ */
+export const highlightRow = (rows, rowId, dataAttributeName) => {
+    const row = getRowByDataAttribute(rows, rowId, dataAttributeName);
+    row?.classList.add(ACTIVE_CLASS);
+};
+/**
+ * Removes the "active" class from a specified table row.
+ *
+ * @param rows Array of HTMLTableRowElements to search within.
+ * @param rowId The ID of the row to unhighlight.
+ * @param dataAttributeName The data attribute used to identify the row.
+ */
+export const removeHighlightFromRow = (rows, rowId, dataAttributeName) => {
+    const row = getRowByDataAttribute(rows, rowId, dataAttributeName);
+    row?.classList.remove(ACTIVE_CLASS);
+};
+// Helper to get the checkbox input for a single row
+const getCheckboxFromRow = (row, checkboxQuerySelector) => {
+    return row.querySelector(checkboxQuerySelector);
+};
+/**
+ * Sets the checked state of a checkbox within a specific table row.
+ * @param rows Array of HTMLTableRowElements to search within.
+ * @param rowId The ID of the row to target (value of dataAttribute).
+ * @param dataAttribute The data attribute used to identify the row.
+ * @param checkboxQuerySelector A CSS selector to find the checkbox input within the row.
+ * @param isChecked The desired checked state (true for checked, false for unchecked).
+ */
+export const setRowCheckboxState = (rows, rowId, dataAttribute, checkboxQuerySelector, isChecked) => {
+    const row = getRowByDataAttribute(rows, rowId, dataAttribute);
+    if (row) {
+        const checkbox = getCheckboxFromRow(row, checkboxQuerySelector);
+        if (checkbox) {
+            checkbox.checked = isChecked;
+        }
+    }
+};
+/**
+ * Marks a specific row as selected by checking its checkbox.
+ */
+export const selectRow = (rows, rowId, dataAttribute, checkboxQuerySelector) => {
+    setRowCheckboxState(rows, rowId, dataAttribute, checkboxQuerySelector, true);
+};
+/**
+ * Marks a specific row as deselected by unchecking its checkbox.
+ */
+export const deselectRow = (rows, rowId, dataAttribute, checkboxQuerySelector) => {
+    setRowCheckboxState(rows, rowId, dataAttribute, checkboxQuerySelector, false);
+};
+export default useTableSelection;

package/lib/es/SvgImage.d.ts

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

package/lib/es/SvgImage.js

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

package/lib/es/TableCol.d.ts

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

package/lib/es/TableCol.js

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

package/lib/es/TableHead.d.ts

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

package/lib/es/TableHead.js

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

package/lib/es/components/actionBarItem/ActionBarItemIcon.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const ActionBarItemIcon = (0, react_1.forwardRef)((props, ref) => {

package/lib/es/components/actionBarItem/ActionBarOverlay.js

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

package/lib/es/components/applicationHeader/CollapsedNavItem.js

@@ -2,6 +2,7 @@
 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 = require("react");
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const CollapsedNavItem = (0, react_1.forwardRef)((props, ref) => {

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

@@ -150,6 +150,14 @@ export type TreeProps = {
      * @default false
      */
     hideSummary?: boolean;
+    /**
+     * Callback triggered when the built-in asset type filter changes.
+     * This is only available when the default summary is used.
+     *
+     * @param type
+     * @returns
+     */
+    onTypeFilterChange?: (currentTypes: string[]) => void;
     /**
      * Defines whether the entire area below the search field is shown or not. Note: Disabling the
      * tree head will hide the select all checkbox and the tree options as well as the tree summary.

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

@@ -43,7 +43,7 @@ const filterProps = (0, omit_1.default)([
 ]);
 const customCompare = (prevProps, nextProps) => (0, isEqual_1.default)(filterProps(prevProps), filterProps(nextProps));
 const Tree = react_1.default.memo((props) => {
-    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop_1.default, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, treeHeaderContent, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop_1.default, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop_1.default, showEmptyGroups = true, treeOptions = [], treeOptionsTooltip, disableAnimation = false, ...remainingProps } = props;
+    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop_1.default, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, treeHeaderContent, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop_1.default, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop_1.default, showEmptyGroups = true, treeOptions = [], treeOptionsTooltip, disableAnimation = false, onTypeFilterChange = noop_1.default, ...remainingProps } = props;
     const [state, dispatch] = (0, react_1.useReducer)(treeReducer_1.treeReducer, {
         groupedItems: [],
         flatItems: [],
@@ -267,7 +267,9 @@ const Tree = react_1.default.memo((props) => {
         [stubTrue_1.default, () => renderFlatList()],
     ])();
     const handleFilterByType = (type) => {
-        dispatch((0, treeReducer_1.typeFilterChanged)((0, treeUtils_1.addOrRemoveFromList)(state.typeFilter, type)));
+        const updatedTypeFilter = (0, treeUtils_1.addOrRemoveFromList)(state.typeFilter, type);
+        dispatch((0, treeReducer_1.typeFilterChanged)(updatedTypeFilter));
+        onTypeFilterChange(updatedTypeFilter);
     };
     const enableActivity = (0, size_1.default)(state.visibleTypeCounters) !== 1;
     const isFilterActive = (0, treeUtils_1.notEmpty)(state.typeFilter);

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
+// 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"));

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
+// 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/TreeSummary.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
+// 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 TypeCounter_1 = tslib_1.__importDefault(require("./TypeCounter"));

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

@@ -33,6 +33,8 @@ export type TypeCounterProps = {
     hideOnZero?: boolean;
     /**
      * Callback function when the counter is clicked. It returns the type value.
+     * Make sure the "type" prop is defined to receive the value in the callback.
+     *
      * @param type
      * @returns
      */

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

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

package/lib/es/components/autosuggest/AutoSuggest.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoSuggest = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+// biome-ignore lint/style/useImportType: <explanation>
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
@@ -25,7 +26,7 @@ const AutoSuggest = (props) => {
         onClear: noop_1.default,
         onBlur: noop_1.default,
         onFocus: noop_1.default,
-        placeholder: 'Start typing ...',
+        placeholder: 'Start typing',
         hasError: false,
         tabIndex: 0,
         value: undefined,

package/lib/es/components/button/ButtonToolbar.d.ts

@@ -3,7 +3,7 @@ export type ButtonToolbarProps = ComponentProps<'div'> & {
     /**
      * Align buttons to a defined side or set them apart.
      */
-    alignment?: 'left' | 'right' | 'space-between';
+    alignment?: 'left' | 'right' | 'center' | 'space-between';
     /**
      * Additional classes set to the outer element.
      */

package/lib/es/components/button/ButtonToolbar.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const ButtonToolbar = (props) => {
     const { className = '', alignment, children, ...remainingProps } = props;
-    const classes = (0, classnames_1.default)(className, 'btn-toolbar', alignment === 'left' && 'justify-content-start', alignment === 'right' && 'justify-content-end', alignment === 'space-between' && 'justify-content-between');
+    const classes = (0, classnames_1.default)(className, 'btn-toolbar', alignment === 'left' && 'justify-content-start', alignment === 'right' && 'justify-content-end', alignment === 'center' && 'justify-content-center', alignment === 'space-between' && 'justify-content-between');
     return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: classes, children: children }));
 };
 exports.default = ButtonToolbar;

package/lib/es/components/button/ToggleButton.js

@@ -3,6 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = tslib_1.__importDefault(require("./Button"));
-// @ts-ignore - the Button throws TS error due to refs that may be checked at a later point in time
 const ToggleButton = (props) => (0, jsx_runtime_1.jsx)(Button_1.default, { ...props, asToggle: true });
 exports.default = ToggleButton;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const DEFAULT_TYPE = "text";
 export declare const SUPPORTED_TYPES: string[];
+export type MaskVisibility = 'always' | 'onFocus' | 'never';
 export type ClearableInputProps = {
     /**
      * Gives the input element the id.
@@ -69,7 +70,7 @@ export type ClearableInputProps = {
      * @param event
      * @returns
      */
-    onFocus?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
     /**
      * Callback function for when the value is cleared via the clear button.
      * @param event
@@ -93,22 +94,24 @@ export type ClearableInputProps = {
      * It defines the pattern that should be followed.
      *
      * For more details on masking, checkout the third party documentation for the
-     * input mask here: {@link https://github.com/sanniassin/react-input-mask}
+     * input mask here: {@link https://imask.js.org/guide.html}
      *
      * Simple masks can be defined as strings.
      *
      * The following characters will define mask format:
      *
-     * Character: "9" 	= allowed input: "0-9"
+     * Character: "0" = allowed input: "0-9" (digit)
      *
-     * Character: "a" 	= allowed input: "a-z, A-Z"
+     * Character: "a" = allowed input: "a-z, A-Z" (letter)
      *
-     * Character: "*" 	= allowed input: 0-9, a-z, A-Z
+     * Character: "*" = allowed input: any character
      *
-     * Any format character can be escaped with a backslash.
+     * Character: "#" = allowed input: "0-9, a-z, A-Z" (digit or letter)
+     *
+     * Any other character in the mask is considered a fixed value.
      *
      * @example
-     * '-- *** *** ***' or '+4\\9 99 999 99'
+     * '-- ### ### ###' or '+49 00 000 00'
      *
      * @example
      * ['0', '0', /[0-9]/, ' ', /[a-zA-Z]/]
@@ -127,11 +130,21 @@ export type ClearableInputProps = {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Controls when the mask pattern is visible.
+     * - 'always': Mask is always visible
+     * - 'onFocus': Mask is hidden but shown when input is focused (default)
+     * - 'never': Mask is never shown
+     *
+     * @default 'always'
+     */
+    maskVisibility?: MaskVisibility;
     /**
      * Whether mask prefix and placeholder should be displayed when input is empty and
      * has no focus.
      *
      * @default false
+     * @deprecated please use maskVisibility='always' instead
      */
     alwaysShowMask?: boolean;
     /**

package/lib/es/components/clearableInput/ClearableInput.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SUPPORTED_TYPES = exports.DEFAULT_TYPE = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+// biome-ignore lint/style/useImportType: <explanation>
 const react_1 = require("react");
 const omit_1 = tslib_1.__importDefault(require("lodash/fp/omit"));
 const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
@@ -10,18 +11,39 @@ const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isFunction_1 = tslib_1.__importDefault(require("lodash/fp/isFunction"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const react_input_mask_1 = tslib_1.__importDefault(require("react-input-mask"));
+const react_imask_1 = require("react-imask");
 const usePrevious_1 = tslib_1.__importDefault(require("../../hooks/usePrevious"));
+const useMergeRefs_1 = tslib_1.__importDefault(require("../../hooks/useMergeRefs"));
 exports.DEFAULT_TYPE = 'text';
 exports.SUPPORTED_TYPES = ['text', 'password', 'email'];
 const hasValue = (value) => !(0, isEmpty_1.default)(`${value}`);
 const ClearableInput = (0, react_1.forwardRef)((props, ref) => {
-    const { type = exports.DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop_1.default, onBlur = noop_1.default, onFocus = noop_1.default, onClear = noop_1.default, onKeyPress = noop_1.default, onClick = noop_1.default, mask, maskPlaceholder = '_', alwaysShowMask = false, inputClassName = '', disabled = false, className = '', children, ...remainingProps } = props;
+    const { type = exports.DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop_1.default, onBlur = noop_1.default, onFocus = noop_1.default, onClear = noop_1.default, onKeyPress = noop_1.default, onClick = noop_1.default, mask, maskPlaceholder = '_', maskVisibility = 'always', alwaysShowMask = false, inputClassName = '', disabled = false, className = '', children, ...remainingProps } = props;
     const initialValue = value || defaultValue || '';
     const [inputValue, setInputValue] = (0, react_1.useState)(initialValue);
     const [showClear, setShowClear] = (0, react_1.useState)(hasValue(initialValue));
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const isControlled = !(0, isNil_1.default)(value);
+    const internalMaskRef = (0, react_1.useRef)(null);
+    const mergedInternalMaskRef = (0, useMergeRefs_1.default)(internalMaskRef, inputRef, ref);
     const hasMask = !!mask;
+    // Calculate if mask should be visible (lazy=false means visible, lazy=true means hidden)
+    const shouldShowMask = () => {
+        // For backward compatibility
+        if (alwaysShowMask) {
+            return true;
+        }
+        switch (maskVisibility) {
+            case 'always':
+                return true;
+            case 'onFocus':
+                return isFocused;
+            case 'never':
+                return false;
+            default:
+                return isFocused;
+        }
+    };
     // Handles new input value and saves it in the local state.
     // The value stored in the state is used for rendering.
     const changeInternalValue = (newValue = '') => {
@@ -48,6 +70,45 @@ const ClearableInput = (0, react_1.forwardRef)((props, ref) => {
             onChange(newValue, event);
         }
     };
+    const handleAccept = (newValue, maskRef, event) => {
+        if (!internalMaskRef.current) {
+            return;
+        }
+        // Simulate a ChangeEvent for backwards compatibility since react-imask does not return a change event itself
+        const syntheticEvent = {
+            target: internalMaskRef.current,
+            currentTarget: internalMaskRef.current,
+            // Standard synthetic event props
+            bubbles: true,
+            cancelable: true,
+            defaultPrevented: false,
+            isTrusted: true,
+            preventDefault: () => { },
+            stopPropagation: () => { },
+            persist: () => { },
+            nativeEvent: {},
+            type: 'change',
+            timeStamp: Date.now(),
+        };
+        // Set unmasked value manually if needed
+        // (you can use data-attributes or attach it directly)
+        syntheticEvent.target.unmaskedValue = maskRef.unmaskedValue;
+        if (isControlled) {
+            onChange(newValue, syntheticEvent);
+        }
+        else {
+            changeInternalValue(newValue);
+            onChange(newValue, syntheticEvent);
+        }
+    };
+    const handleInputFocus = (event) => {
+        setIsFocused(true);
+        onFocus(event);
+    };
+    const handleInputBlur = (event) => {
+        setIsFocused(false);
+        onBlur(event);
+    };
     // Will be triggered on every key press but also when pressing 'Enter' for example
     const handleKeyPress = (event) => {
         onKeyPress(event);
@@ -70,17 +131,16 @@ const ClearableInput = (0, react_1.forwardRef)((props, ref) => {
         autoComplete,
         type: inputType,
         value: inputValue,
-        onChange: handleChange,
         onKeyPress: handleKeyPress,
-        onBlur,
-        onFocus,
+        onBlur: handleInputBlur,
+        onFocus: handleInputFocus,
+        onChange: hasMask ? undefined : handleChange, // In case of masked input, the onAccept callback is used
         onClick,
         disabled,
         maxLength: hasMask ? undefined : maxLength,
         tabIndex,
-        ref: inputRef || ref,
     };
-    const input = hasMask ? ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, { ...inputProps, disabled: disabled, mask: mask, maskPlaceholder: maskPlaceholder, alwaysShowMask: alwaysShowMask })) : ((0, jsx_runtime_1.jsx)("input", { ...inputProps }));
+    const input = hasMask ? ((0, jsx_runtime_1.jsx)(react_imask_1.IMaskInput, { ...inputProps, ref: mergedInternalMaskRef, mask: mask, placeholderChar: maskPlaceholder, onAccept: handleAccept, lazy: !shouldShowMask(), overwrite: true })) : ((0, jsx_runtime_1.jsx)("input", { ...inputProps, ref: inputRef || ref }));
     return ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [children && (0, isFunction_1.default)(children) ? children(inputProps) : input, (0, jsx_runtime_1.jsx)("span", { className: clearButtonClassNames, onClick: clearInputValue, children: (0, jsx_runtime_1.jsx)("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })] }));
 });
 exports.default = ClearableInput;

package/lib/es/components/dialog/Dialog.js

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

package/lib/es/components/dialog/FrameDialog.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CLOSE_DIALOG_EVENT = exports.OPEN_DIALOG_EVENT = exports.DEFAULT_PREFIX = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 const react_1 = require("react");
 const iframe_resizer_react_1 = tslib_1.__importDefault(require("iframe-resizer-react"));
 const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));