@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/src/components/saveableInput/SaveableDateInput.d.ts

@@ -0,0 +1,91 @@
+import { type HTMLAttributes } from 'react';
+import type { Moment } from 'moment';
+import { type DatePickerProps } from '../datepicker/DatePicker';
+export type SaveableDateInputProps = {
+    /**
+     * The input placeholder.
+     */
+    placeholder?: string;
+    /**
+     * The actual input value.
+     */
+    value?: Date | Moment | string;
+    /**
+     * Used to control the save button from the outside to disable it in case
+     * the entered value is not valid.
+     *
+     * @default true
+     */
+    isValid?: boolean;
+    /**
+     * This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the "isValid" prop is set to false.
+     */
+    errorMessage?: string | React.ReactNode;
+    /**
+     * Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false.
+     */
+    hideErrorIcon?: boolean;
+    /**
+     * Callback function triggered when the value changes and is saved.
+     * @param value
+     * @param previousValue
+     * @returns
+     */
+    onValueChanged?: (value: Moment | string, previousValue: Moment | string | Date) => void;
+    /**
+     * Callback function that gets triggered on every input change. Use this to control the component
+     * or when implementing key validation.
+     * @param keyValue the key value that has been entered
+     * @returns
+     */
+    onInputChange?: (value: Moment | string, isValid: boolean) => void;
+    /**
+     * Callback function that gets triggered when the input is in edit mode. Use this
+     * to control the component and to handle the previous value on the outside.
+     * @returns
+     */
+    onEnterEdit?: () => void;
+    /**
+     * Callback function that gets triggered when edit mode is exited (either saved or cancelled).
+     * @param wasSaved - true if value was saved, false if cancelled/reset
+     * @returns
+     */
+    onExitEdit?: (wasSaved: boolean) => void;
+    /**
+     * Callback function that gets triggered when the user aborts the edit mode. Use this
+     * to control the component and handle the resetting of previous value on the outside.
+     * @returns
+     */
+    onCancel?: () => void;
+    /**
+     * Behavior when trying to exit edit mode with invalid input:
+     * - 'stay-open': Keep edit mode open until valid input is provided
+     * - 'reset-and-close': Close edit mode and reset to initial value
+     *
+     * @default 'stay-open'
+     */
+    invalidExitBehavior?: 'stay-open' | 'reset-and-close';
+    /**
+     * Defines the button style: `default` or `primary`.
+     */
+    buttonStyle?: 'primary' | 'default';
+    /**
+     * Additional HTML attributes to be set on the input element.
+     */
+    inputProps?: HTMLAttributes<HTMLInputElement>;
+    datePickerProps?: DatePickerProps;
+    /**
+     * Disables the component so the user cannot enter the edit mode.
+     */
+    disabled?: boolean;
+    /**
+     * Additional classes to be set on the input itself.
+     */
+    inputClassName?: string;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const SaveableDateInput: (props: SaveableDateInputProps) => import("react/jsx-runtime").JSX.Element;
+export default SaveableDateInput;

package/src/components/saveableInput/SaveableDateInput.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
+import Button from '../../Button';
+import DatePicker from '../datepicker/DatePicker';
+import useIsFocusWithin from '../../hooks/useIsFocusWithin';
+import useEsc from '../../hooks/useEsc';
+const DEFAULT_BUTTON_STYLE = 'primary';
+// Validate date outside the component (via form library) if controlled usage
+// Use as controlled component: value, is Valid, and change callback
+// - if is valid, on save, call callback "onValueChanged"
+// - if not valid, keep edit mode open, outside is showing error message
+// - close edit mode only if date is valid - or close edit mode and reset to initial value -> customizable via prop
+// Keep picker open until user has clicked save, otherwise he might forget to click save if the dropdown closes automatically
+const SaveableDateInput = (props) => {
+    const { placeholder, value: externalValue = '', isValid = true, errorMessage, hideErrorIcon = false, onValueChanged = noop, onInputChange, // for controlled usage
+    onEnterEdit = noop, onExitEdit = noop, onCancel = noop, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, invalidExitBehavior = 'stay-open', datePickerProps = {}, disabled = false, className, ...remainingProps } = props;
+    // if callback is provided, assume it is controlled case
+    const isControlledCase = onInputChange !== undefined;
+    const [inputValue, setInputValue] = useState(externalValue);
+    const [editInput, setEditInput] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const [isPickerOpen, setIsPickerOpen] = useState(false);
+    const wrapperRef = useRef(null);
+    const buttonRef = useRef(null);
+    const initialInputValueRef = useRef(inputValue);
+    useIsFocusWithin({
+        ref: wrapperRef,
+        onFocusWithin: () => {
+            setIsFocused(true);
+        },
+        onBlurWithin: () => {
+            setIsFocused(false);
+        },
+    });
+    // Handle escape key to cancel edit mode
+    useEsc(() => {
+        if (isFocused && editInput) {
+            handleCancelEdit();
+        }
+    });
+    // Update internal state in a controlled environment
+    const [previousExternalValue, setPreviousExternalValue] = useState(externalValue);
+    if (previousExternalValue !== externalValue) {
+        setInputValue(externalValue);
+        setPreviousExternalValue(externalValue);
+        // Update initial value ref when external value changes while not in edit mode
+        if (!editInput) {
+            initialInputValueRef.current = externalValue;
+        }
+    }
+    const handleToggleInput = () => {
+        if (!editInput) {
+            // Enter edit mode
+            setEditInput(true);
+            initialInputValueRef.current = inputValue;
+            // open the dropdown
+            setIsPickerOpen(true);
+            onEnterEdit();
+        }
+        else {
+            // Try to exit edit mode
+            handleSaveAttempt();
+        }
+    };
+    const handleSaveAttempt = () => {
+        if (isValid) {
+            // Save the value (only if valid)
+            setEditInput(false);
+            onValueChanged(inputValue, initialInputValueRef.current);
+            onExitEdit(true);
+            // close the dropdown
+            setIsPickerOpen(false);
+        }
+        else {
+            // Handle invalid input based on behavior setting
+            if (invalidExitBehavior === 'reset-and-close') {
+                handleCancelEdit();
+            }
+            // If 'stay-open', do nothing - keep edit mode open
+        }
+    };
+    const handleCancelEdit = () => {
+        setEditInput(false);
+        // Reset to initial value
+        if (isControlledCase) {
+            // In controlled mode, trigger change to reset to initial value
+            onInputChange(initialInputValueRef.current, true);
+        }
+        else {
+            setInputValue(initialInputValueRef.current);
+        }
+        // Close the dropdown
+        setIsPickerOpen(false);
+        onCancel();
+        onExitEdit(false);
+    };
+    const handleDateChange = (value, isValid) => {
+        if (isControlledCase) {
+            onInputChange(value, isValid);
+        }
+        else {
+            setInputValue(value);
+        }
+    };
+    const handleCloseDropdown = () => setIsPickerOpen(false);
+    const wrapperClasses = classNames('form-group', !isValid && 'has-feedback has-error', className);
+    const buttonIconClasses = classNames('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');
+    const dateInputClasses = classNames('margin-0 width-100pct', inputClassName);
+    // Button should be disabled if:
+    // - Component is disabled, OR
+    // - In edit mode and invalid input (and behavior is stay-open)
+    const disableButton = disabled || (editInput && !isValid && invalidExitBehavior === 'stay-open');
+    let inputStyle = {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+    };
+    if (!isValid && hideErrorIcon) {
+        // If the error icon shall not be shown, remove the input padding to avoid cutting of the date value
+        inputStyle = { ...inputStyle, paddingRight: '10px' };
+    }
+    return (_jsxs("div", { ref: wrapperRef, ...remainingProps, className: wrapperClasses, children: [_jsxs("div", { className: 'input-group', children: [_jsx(DatePicker, { ...datePickerProps, open: isPickerOpen, className: dateInputClasses, inputProps: {
+                            ...inputProps,
+                            placeholder,
+                            disabled: !editInput,
+                            style: inputStyle,
+                        }, value: inputValue, onChange: handleDateChange, onClose: handleCloseDropdown }), !isValid && !hideErrorIcon && (_jsx("span", { className: 'right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign' })), _jsx("div", { className: 'input-group-btn', children: _jsx(Button, { ref: buttonRef, bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton, children: _jsx("span", { className: buttonIconClasses }) }) })] }), !isValid && errorMessage && (_jsx("span", { className: 'help-block z-index-max', children: _jsx("span", { children: errorMessage }) }))] }));
+};
+export default SaveableDateInput;

package/src/components/saveableInput/SaveableInput.d.ts

@@ -0,0 +1,94 @@
+import React, { type HTMLAttributes } from 'react';
+export type SaveableInputProps = {
+    /**
+     * The input placeholder.
+     */
+    placeholder?: string;
+    /**
+     * The previous or old value shown above the input value.
+     * This value will *not* be changed for new input values.
+     */
+    fixedPreviousValue?: string;
+    /**
+     * The previous or old value shown above the input value.
+     * This value *changes* when a new input value is accepted.
+     */
+    previousValue?: string;
+    /**
+     * The actual input value.
+     */
+    value?: string;
+    /**
+     * Used to control the save button from the outside to disable it in case
+     * the entered value is not valid.
+     *
+     * @default true
+     */
+    isValid?: boolean;
+    /**
+     * This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the "isValid" prop is set to false.
+     */
+    errorMessage?: string | React.ReactNode;
+    /**
+     * Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false.
+     */
+    hideErrorIcon?: boolean;
+    /**
+     * Callback function triggered when the value changes.
+     * @param value
+     * @param previousValue
+     * @returns
+     */
+    onValueChanged?: (value: string, previousValue: string) => void;
+    /**
+     * Callback function that gets triggered on every input change. Use this to control the component
+     * or when implementing key validation.
+     * @param keyValue the key value that has been entered
+     * @param inputValue the current complete value of the input
+     * @returns
+     */
+    onInputChange?: (keyValue: string, inputValue: string) => void;
+    /**
+     * Callback function that gets triggered when the user aborts the edit mode. Use this
+     * to control the component and handle the resetting of previous value on the outside.
+     * @returns
+     */
+    onEsc?: () => void;
+    /**
+     * Callback function that gets triggered when the input is in edit mode. Use this
+     * to control the component dna to handle the previous value on the outside.
+     * @returns
+     */
+    onEnterEdit?: () => void;
+    /**
+     * Defines the button style: `default` or `primary`.
+     */
+    buttonStyle?: 'primary' | 'default';
+    /**
+     * Additional HTML attributes to be set on the input element.
+     */
+    inputProps?: HTMLAttributes<HTMLInputElement>;
+    /**
+     * Adds a given unit to the input.
+     */
+    unit?: string | React.ReactNode;
+    /**
+     * Icon class name that shall be used. If defined, the input element is wrapped in an input-group
+     * and the icon will be set in an input-addon. Example: `rioglyph-search`.
+     */
+    icon?: string;
+    /**
+     * Disables the component so the user cannot enter the edit mode.
+     */
+    disabled?: boolean;
+    /**
+     * Additional classes to be set on the input itself.
+     */
+    inputClassName?: string;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const SaveableInput: (props: SaveableInputProps) => import("react/jsx-runtime").JSX.Element;
+export default SaveableInput;

package/src/components/saveableInput/SaveableInput.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import isEmpty from 'lodash/fp/isEmpty';
+import noop from 'lodash/fp/noop';
+// @ts-ignore
+import Button from '../../Button';
+import useKey from '../../hooks/useKey';
+import useEsc from '../../hooks/useEsc';
+const DEFAULT_BUTTON_STYLE = 'primary';
+const useFocus = (isEditable) => {
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (inputRef.current && isEditable) {
+            inputRef.current.focus();
+        }
+    }, [inputRef.current, isEditable]);
+    return inputRef;
+};
+// Features:
+// [ ] what shall happen when user leaves component while in edit mode (click outside or tab) - close on blur?
+// [x] avoid save without change
+// [x] use fixed previous value
+// [x] enter = save
+// [x] esc key to abort and leave edit mode
+// [x] tab focus + enter = go into edit mode
+// [x] validate after each key, i.e for number inputs - use onInputChange callback
+// [x] support form feedback error - wrap it with form-group and feedback classes
+// [x] allow for unit and icon
+// [x] disabled input
+const SaveableInput = (props) => {
+    const { placeholder, fixedPreviousValue = '', previousValue = '', value: externalValue = '', isValid = true, errorMessage, hideErrorIcon = false, onValueChanged = noop, onInputChange, onEsc = noop, onEnterEdit = noop, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, icon, unit, disabled = false, className, ...remainingProps } = props;
+    const externalOldValue = previousValue || fixedPreviousValue;
+    const [inputValue, setInputValue] = useState(externalValue);
+    const [oldInputValue, setOldInputValue] = useState(externalOldValue);
+    const [editInput, setEditInput] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const initialInputValueRef = useRef(inputValue);
+    const initialOldInputValueRef = useRef(oldInputValue);
+    // Update internal state in a controlled environment
+    const [previousExternalValue, setPreviousExternalValue] = useState(externalValue);
+    if (previousExternalValue !== externalValue) {
+        setInputValue(externalValue);
+        setPreviousExternalValue(externalValue);
+    }
+    // Update internal state in a controlled environment
+    const [previousExternalOldValue, setPreviousExternalOldValue] = useState(externalOldValue);
+    if (previousExternalOldValue !== externalOldValue) {
+        setOldInputValue(externalOldValue);
+        setPreviousExternalOldValue(externalOldValue);
+    }
+    // Set focus on input when being in edit mode
+    const inputRef = useFocus(editInput);
+    // Allow to exit "edit" mode with "Enter" to accept changes
+    useKey((event) => {
+        if (isFocused && editInput && isValid && event.key === 'Enter') {
+            handleToggleInput();
+        }
+    });
+    // Allow to exit "edit" mode with "Esc" to ignore changes
+    useEsc(() => {
+        if (isFocused) {
+            // Restore local state to initial vales as it was when entering edit mode
+            setInputValue(initialInputValueRef.current);
+            setOldInputValue(initialOldInputValueRef.current);
+            setEditInput(false);
+            onEsc();
+        }
+    });
+    const handleToggleInput = () => {
+        if (editInput === false) {
+            setEditInput(true);
+            // Temporarily store values of input and oldInput to be used when
+            // discarding changes on "esc" or to avoid saving without changes
+            if (!fixedPreviousValue) {
+                initialOldInputValueRef.current = oldInputValue;
+            }
+            initialInputValueRef.current = inputValue;
+            onEnterEdit();
+        }
+        else {
+            setEditInput(false);
+            // In case the new input value has not changed to the initial value
+            // reset the internal old value to the initial
+            if (initialInputValueRef.current !== inputValue) {
+                setOldInputValue(fixedPreviousValue || initialInputValueRef.current);
+                onValueChanged(inputValue, oldInputValue);
+            }
+        }
+    };
+    const handleInputChange = (event) => {
+        // Only update internal value if the external "onInputChange" callback function is not defined
+        // as it will be used in a controlled way
+        if (onInputChange) {
+            // Use type assertion to access nativeEvent.data
+            const nativeEventData = event.nativeEvent?.data;
+            // Whe "backspace" is used to remove a value, the nativeEventData is undefined. In this case
+            // we need to use the target value for the callback otherwise the user will not be able to
+            // remove a character from the input
+            const currentInputValue = event.target.value;
+            onInputChange(nativeEventData ?? currentInputValue, event.currentTarget.value);
+            return;
+        }
+        setInputValue(event.target.value);
+    };
+    const handleFocus = () => setIsFocused(true);
+    const handleBlur = () => setIsFocused(false);
+    const showOldValue = !isEmpty(oldInputValue) && oldInputValue !== inputValue && !editInput;
+    const wrapperClasses = classNames('form-group', !isValid && 'has-feedback has-error', className);
+    const inputClasses = classNames('form-control', showOldValue && 'padding-bottom-0 padding-top-10 text-size-12', unit && 'padding-right-50', // This value is not perfect as with longer units it might conflict with the value
+    !unit && !isValid && hideErrorIcon && 'padding-right-10', // remove the padding for the error icon if not needed
+    inputClassName);
+    const oldValueClasses = classNames('position-absolute', 'top-2', 'left-10', 'margin-left-3', 'text-size-10', 'text-decoration-line-through', icon && 'padding-left-20');
+    const buttonIconClasses = classNames('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');
+    const disableButton = (editInput && !isValid) || disabled;
+    return (_jsxs("div", { ...remainingProps, className: wrapperClasses, children: [_jsxs("div", { className: 'input-group', children: [icon && (_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true', "aria-label": 'input icon' }) })), _jsx("input", { type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput, ...inputProps }), unit && (_jsx("div", { className: 'position-absolute right-0 margin-right-50', "aria-label": 'unit', children: unit })), showOldValue && (_jsx("div", { className: oldValueClasses, "aria-label": 'previous value', children: oldInputValue })), _jsx("div", { className: 'input-group-btn', children: _jsx(Button, { bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton, children: _jsx("span", { className: buttonIconClasses }) }) })] }), !isValid && !hideErrorIcon && !unit && (_jsx("span", { className: 'right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign' })), !isValid && errorMessage && (_jsx("span", { className: 'help-block z-index-max', children: _jsx("span", { children: errorMessage }) }))] }));
+};
+export default SaveableInput;

package/src/components/selects/BaseSelectDropdown.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+export type OptionDOMValue = {
+    id: string;
+    text: string;
+};
+export type SelectOption = {
+    /**
+     * Used to identify an option.
+     */
+    id: string;
+    /**
+     * The option item text.
+     */
+    label: string | React.ReactNode;
+    /**
+     * Icon to be displayed in front of the label.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Defines whether the menu item is selected.
+     *
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Setting "disabled" to true will disable the respective item.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Will treat the given value as a menu header
+     */
+    header?: boolean;
+};
+export type BaseSelectDropdownProps<T extends SelectOption> = {
+    options?: T[];
+    isOpen?: boolean;
+    isLoading?: boolean;
+    updateDOMValues?: (values: OptionDOMValue[] | undefined) => void;
+    onOpen?: (hasDropup: boolean) => void;
+    onSelect?: (selectedItem: T | undefined) => void;
+    onClose?: () => void;
+    placeholder?: string | React.ReactNode;
+    dropup?: boolean;
+    pullRight?: boolean;
+    autoDropDirection?: boolean;
+    noItemMessage?: string | React.ReactNode;
+    focusedItemIndex?: number;
+    dropdownClassName?: string;
+    keyboardUsed?: boolean;
+    useActiveClass?: boolean;
+};
+declare const BaseSelectDropdown: <T extends SelectOption>(props: BaseSelectDropdownProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const filterOptions: <T extends SelectOption>(itemDOMValues: OptionDOMValue[], filterValue: string, options: T[]) => T[];
+export default BaseSelectDropdown;

package/src/components/selects/BaseSelectDropdown.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import isEmpty from 'lodash/fp/isEmpty';
+import noop from 'lodash/fp/noop';
+import { useDropDirection } from '../../utils/useDropDirection';
+import { DOWN, scrollItemIntoView, UP } from '../../utils/scrollItemIntoView';
+import useEffectOnce from '../../hooks/useEffectOnce';
+import useKey from '../../useKey';
+import DropdownHeader from './DropdownHeader';
+import NoItemMessage from './NoItemMessage';
+import Spinner from '../spinner/Spinner';
+const DATA_ATTRIBUTE_ID = 'data-item-id';
+const DEFAULT_FOCUSED_ITEM_INDEX = 0;
+const HIGHLIGHT_CLASS = 'focus';
+const BaseSelectDropdown = (props) => {
+    const { isOpen = false, isLoading = false, updateDOMValues = noop, onOpen = noop, onSelect = noop, onClose = noop, options = [], autoDropDirection = true, dropup = false, pullRight = false, useActiveClass = false, focusedItemIndex: externalFocusedItemIndex, keyboardUsed: externalKeyboardUsed, noItemMessage, dropdownClassName, } = props;
+    const [focusedItemIndex, setFocusedItemIndex] = useState(externalFocusedItemIndex || DEFAULT_FOCUSED_ITEM_INDEX);
+    const [keyboardUsed, setKeyboardUsed] = useState(externalKeyboardUsed);
+    const dropdownMenuRef = useRef(null);
+    useEffectOnce(() => {
+        // all available items need to be rendered in order to know their DOM value
+        // which will be used for filtering in the parent component
+        const currentItemDOMValues = updateItemDOMValues();
+        updateDOMValues(currentItemDOMValues);
+    });
+    // Overwrite position of dropdown menu in case auto drop is enabled
+    const dropDirection = useDropDirection({ pullRight, dropup, autoDropDirection, dropdownMenuRef }, [isOpen]);
+    // Add or remove the "dropup" class from the parent Select/Multiselect component to position
+    // the dropdown element accordingly via CSS
+    useLayoutEffect(() => {
+        if (dropdownMenuRef.current) {
+            const parent = dropdownMenuRef.current.parentElement;
+            if (dropDirection.dropup) {
+                parent?.classList.add('dropup');
+            }
+            else {
+                parent?.classList.remove('dropup');
+            }
+        }
+    }, [dropDirection, dropdownMenuRef]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => {
+        if (dropdownMenuRef.current) {
+            updateDOMValues(updateItemDOMValues());
+        }
+    }, [dropdownMenuRef.current]);
+    // update internal state for isOpen
+    const [previousIsOpen, setPreviousIsOpen] = useState(isOpen);
+    if (isOpen && !previousIsOpen) {
+        onOpen(dropDirection.dropup);
+        setPreviousIsOpen(isOpen);
+    }
+    else if (!isOpen && previousIsOpen) {
+        onClose();
+        setPreviousIsOpen(isOpen);
+    }
+    useKey(event => {
+        if (isOpen) {
+            switch (event.key) {
+                case 'Escape': {
+                    // close dropdown on esc
+                    onClose();
+                    break;
+                }
+                case 'Tab': {
+                    // close dropdown on tab
+                    onClose();
+                    break;
+                }
+                case 'Enter': {
+                    // select item on enter
+                    selectOptionOnEnter(event);
+                    break;
+                }
+                case 'ArrowUp': {
+                    // prevent scrolling the page when dropdown menu is open
+                    event.preventDefault();
+                    // select item above on arrow up key
+                    focusOption(UP);
+                    scrollItemIntoView(UP, dropdownMenuRef.current, getFocusedOptionNode());
+                    break;
+                }
+                case 'ArrowDown': {
+                    // prevent scrolling the page when dropdown menu is open
+                    event.preventDefault();
+                    // select item below on arrow down key
+                    focusOption(DOWN);
+                    scrollItemIntoView(DOWN, dropdownMenuRef.current, getFocusedOptionNode());
+                    break;
+                }
+                default:
+                    break;
+            }
+        }
+    });
+    const focusOption = (direction) => {
+        let nextFocusedItem = 0;
+        switch (direction) {
+            case UP: {
+                nextFocusedItem = focusedItemIndex <= 0 ? focusedItemIndex : focusedItemIndex - 1;
+                break;
+            }
+            case DOWN: {
+                nextFocusedItem = focusedItemIndex === options.length - 1 ? focusedItemIndex : focusedItemIndex + 1;
+                break;
+            }
+            default:
+                break;
+        }
+        // In case the next item index is negative, means outside the bounds of the items,
+        // reset it depending on the current direction
+        const indexLimit = direction === UP ? options.length - 1 : 0;
+        setFocusedItemIndex(nextFocusedItem < 0 ? indexLimit : nextFocusedItem);
+        setKeyboardUsed(true);
+    };
+    const getOptionNodes = () => {
+        const node = dropdownMenuRef.current;
+        return node?.getElementsByTagName('a') || [];
+    };
+    const updateItemDOMValues = () => {
+        if (dropdownMenuRef.current) {
+            const optionNodes = getOptionNodes();
+            return [...optionNodes].map(item => {
+                return {
+                    id: item.getAttribute(DATA_ATTRIBUTE_ID),
+                    text: item.textContent,
+                };
+            });
+        }
+    };
+    const getFocusedOptionNode = () => {
+        const optionNodes = getOptionNodes();
+        return [...optionNodes].find(item => item.className.includes(HIGHLIGHT_CLASS));
+    };
+    const selectOptionOnEnter = (event) => {
+        event.preventDefault();
+        // When no filter result was found, avoid selecting anything
+        if (isEmpty(options)) {
+            return;
+        }
+        const match = getFocusedOptionNode();
+        if (match) {
+            const selectedItem = options.find(option => option.id === match.getAttribute(DATA_ATTRIBUTE_ID));
+            onSelect(selectedItem);
+        }
+    };
+    const handleOptionChange = (event) => {
+        event.preventDefault();
+        const optionId = event.currentTarget.getElementsByTagName('input')[0].value;
+        const selectedItem = options.find(option => option.id === optionId);
+        onSelect(selectedItem);
+    };
+    const dropdownMenuClasses = classNames('dropdown-menu', dropDirection.pullRight && 'pull-right', dropdownClassName);
+    // Don't show the dropdown, when no match are found when filtering unless there is a not found message
+    if (isEmpty(options)) {
+        return _jsx(NoItemMessage, { noItemMessage: noItemMessage, className: dropdownMenuClasses });
+    }
+    return (_jsxs("ul", { className: dropdownMenuClasses, ref: dropdownMenuRef, role: 'menu', children: [isLoading && (_jsx("div", { className: 'display-flex justify-content-center padding-10', children: _jsx(Spinner, {}) })), !isLoading &&
+                options.map((option, index) => {
+                    if (option.header) {
+                        return _jsx(DropdownHeader, { icon: option.icon, label: option.label }, option.id);
+                    }
+                    // Show focused style only when keyboard is in use
+                    const anchorClassNames = classNames(keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '', option.disabled && 'pointer-events-none', 'display-flex align-items-center gap-3');
+                    const wrapperClassNames = classNames(option.disabled && 'disabled', useActiveClass && option.selected && 'active');
+                    return (_jsx("li", { className: wrapperClassNames, role: 'listitem', children: _jsxs("a", { role: 'menuitem', className: anchorClassNames, "data-item-id": option.id, "data-item-index": index, 
+                            // Note, we need to assign the click callback only when it's not disabled
+                            // otherwise the functions is still triggered
+                            // biome-ignore lint/a11y/useValidAnchor: due to old structure + backwards compatibility
+                            onClick: option.disabled ? undefined : handleOptionChange, children: [_jsxs("span", { className: 'selected-option-dropdown-item', children: [option.icon && _jsx(_Fragment, { children: option.icon }), option.label] }), _jsx("input", { type: 'hidden', value: option.id })] }) }, option.id));
+                })] }));
+};
+export const filterOptions = (itemDOMValues, filterValue, options) => {
+    const filteredDOMValues = itemDOMValues.filter(item => item.text.toLowerCase().includes(filterValue.toLowerCase()));
+    // Filter the options according to the filtered DOM values and map the IDs since the filter cannot be done
+    // on the options itself as they might contain arbitrary components
+    return options.filter(option => {
+        return filteredDOMValues.find(domValue => domValue.id === option.id);
+    });
+};
+export default BaseSelectDropdown;