@rio-cloud/rio-uikit 0.16.4-beta.7 → 1.0.0

package/lib/es/components/rules/RuleContainer.js

@@ -2,42 +2,26 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const framer_motion_1 = require("framer-motion");
 const RuleConnector_1 = tslib_1.__importDefault(require("./RuleConnector"));
-const RuleContainer = props => {
-    const { show, unchecked, background, borderColor, hideConnector, customConnector, className, children } = props, remainingProps = tslib_1.__rest(props, ["show", "unchecked", "background", "borderColor", "hideConnector", "customConnector", "className", "children"]);
+const RuleContainer = (props) => {
+    const { show = true, unchecked = false, background = 'bg-lightest', borderColor = '', hideConnector = false, customConnector, className = '', children } = props, remainingProps = tslib_1.__rest(props, ["show", "unchecked", "background", "borderColor", "hideConnector", "customConnector", "className", "children"]);
     if (!show) {
         return null;
     }
     const boxClassNames = (0, classnames_1.default)('RuleContainerBox', 'position-relative', 'rounded padding-20', background, unchecked && `border border-width border-style-dashed ${borderColor}`, className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'RuleContainer' }, remainingProps, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: boxClassNames, "data-testid": 'ruleContainerBox' }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ exitBeforeEnter: true }, { children: react_1.default.Children.map(children, child => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'RuleContainer' }, remainingProps, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: boxClassNames, "data-testid": 'ruleContainerBox' }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ exitBeforeEnter: true }, { children: react_1.Children.map(children, child => {
                         var _a;
                         if (!child) {
                             return null;
                         }
+                        // just bending the type system a bit so that it matches the existing implementation :)
+                        const childAsElement = child;
                         // In case there are multiple children of RuleContainer, use the
                         // type name or the type itself as a key to animate between the two children
-                        return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, { children: child }), ((_a = child.type) === null || _a === void 0 ? void 0 : _a.name) || child.type));
+                        return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, { children: child }), ((_a = childAsElement.type) === null || _a === void 0 ? void 0 : _a.name) || childAsElement.type));
                     }) })) })), customConnector ? customConnector : (0, jsx_runtime_1.jsx)(RuleConnector_1.default, { hidden: unchecked || hideConnector })] })));
 };
-RuleContainer.defaultProps = {
-    show: true,
-    unchecked: false,
-    background: 'bg-lightest',
-    borderColor: '',
-    hideConnector: false,
-    className: '',
-};
-RuleContainer.propTypes = {
-    show: prop_types_1.default.bool,
-    unchecked: prop_types_1.default.bool,
-    background: prop_types_1.default.string,
-    borderColor: prop_types_1.default.string,
-    hideConnector: prop_types_1.default.bool,
-    customConnector: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    className: prop_types_1.default.string,
-};
 exports.default = RuleContainer;

package/lib/es/components/rules/RulesWrapper.d.ts

@@ -1,8 +1,4 @@
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
+type RulesWrapperProps = HTMLAttributes<HTMLDivElement>;
+declare const RulesWrapper: ({ children, ...remainingProps }: PropsWithChildren<RulesWrapperProps>) => import("react/jsx-runtime").JSX.Element;
 export default RulesWrapper;
-declare function RulesWrapper({ children, ...remainigProps }: {
-    [x: string]: any;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace RulesWrapper {
-    const defaultProps: {};
-}

package/lib/es/components/rules/RulesWrapper.js

@@ -2,11 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const framer_motion_1 = require("framer-motion");
 const RulesWrapper = (_a) => {
-    var { children } = _a, remainigProps = tslib_1.__rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ initial: false, layout: true }, remainigProps, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ layout: 'position' }, { children: children })) }) })));
+    var { children } = _a, remainingProps = tslib_1.__rest(_a, ["children"]);
+    return (
+    // @ts-ignore-next-line
+    (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ initial: false, layout: true }, remainingProps, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ layout: 'position' }, { children: children })) }) })));
 };
-RulesWrapper.defaultProps = {};
 exports.default = RulesWrapper;

package/lib/es/components/saveableInput/SaveableInput.d.ts

@@ -1,4 +1,4 @@
-import { type Attributes } from 'react';
+import React, { type HTMLAttributes } from 'react';
 export type SaveableInputProps = {
     /**
      * The input placeholder.
@@ -18,6 +18,13 @@ export type SaveableInputProps = {
      * 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;
     /**
      * Callback function triggered when the value changes.
      * @param value
@@ -25,6 +32,26 @@ export type SaveableInputProps = {
      * @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`.
      */
@@ -32,7 +59,20 @@ export type SaveableInputProps = {
     /**
      * Additional HTML attributes to be set on the input element.
      */
-    inputProps?: Attributes;
+    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.
      */

package/lib/es/components/saveableInput/SaveableInput.js

@@ -11,15 +11,28 @@ const Button_1 = tslib_1.__importDefault(require("../../Button"));
 const useKey_1 = tslib_1.__importDefault(require("../../hooks/useKey"));
 const useEsc_1 = tslib_1.__importDefault(require("../../hooks/useEsc"));
 const DEFAULT_BUTTON_STYLE = 'primary';
-// TODO:
+const useFocus = (isEditable) => {
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.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 = '', onValueChanged = noop_1.default, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, className, inputProps } = props, remainingProps = tslib_1.__rest(props, ["placeholder", "fixedPreviousValue", "previousValue", "value", "onValueChanged", "buttonStyle", "inputClassName", "className", "inputProps"]);
+    const { placeholder, fixedPreviousValue = '', previousValue = '', value: externalValue = '', isValid = true, onValueChanged = noop_1.default, onInputChange, onEsc = noop_1.default, onEnterEdit = noop_1.default, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, icon, unit, disabled = false, className } = props, remainingProps = tslib_1.__rest(props, ["placeholder", "fixedPreviousValue", "previousValue", "value", "isValid", "onValueChanged", "onInputChange", "onEsc", "onEnterEdit", "buttonStyle", "inputClassName", "inputProps", "icon", "unit", "disabled", "className"]);
     const externalOldValue = previousValue || fixedPreviousValue;
     const [inputValue, setInputValue] = (0, react_1.useState)(externalValue);
     const [oldInputValue, setOldInputValue] = (0, react_1.useState)(externalOldValue);
@@ -40,15 +53,10 @@ const SaveableInput = (props) => {
         setPreviousExternalOldValue(externalOldValue);
     }
     // Set focus on input when being in edit mode
-    const inputRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (inputRef.current && editInput) {
-            inputRef.current.focus();
-        }
-    }, [inputRef.current, editInput]);
+    const inputRef = useFocus(editInput);
     // Allow to exit "edit" mode with "Enter" to accept changes
     (0, useKey_1.default)((event) => {
-        if (isFocused && editInput && event.key === 'Enter') {
+        if (isFocused && editInput && isValid && event.key === 'Enter') {
             handleToggleInput();
         }
     });
@@ -59,6 +67,7 @@ const SaveableInput = (props) => {
             setInputValue(initialInputValueRef.current);
             setOldInputValue(initialOldInputValueRef.current);
             setEditInput(false);
+            onEsc();
         }
     });
     const handleToggleInput = () => {
@@ -67,26 +76,46 @@ const SaveableInput = (props) => {
             // Temporarily store values of input and oldInput to be used when
             // discarding changes on "esc" or to avoid saving without changes
             if (!fixedPreviousValue) {
-                initialInputValueRef.current = inputValue;
                 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(initialInputValueRef.current);
+                setOldInputValue(fixedPreviousValue || initialInputValueRef.current);
                 onValueChanged(inputValue, oldInputValue);
             }
         }
     };
-    const handleInputChange = (event) => setInputValue(event.target.value);
+    const handleInputChange = (event) => {
+        var _a;
+        // 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 = (_a = event.nativeEvent) === null || _a === void 0 ? void 0 : _a.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 !== null && nativeEventData !== void 0 ? nativeEventData : currentInputValue, event.currentTarget.value);
+            return;
+        }
+        setInputValue(event.target.value);
+    };
     const handleFocus = () => setIsFocused(true);
     const handleBlur = () => setIsFocused(false);
     const showOldValue = !(0, isEmpty_1.default)(oldInputValue) && oldInputValue !== inputValue && !editInput;
     const wrapperClasses = (0, classnames_1.default)('form-group', className);
-    const inputClasses = (0, classnames_1.default)('form-control', showOldValue && 'padding-bottom-0 padding-top-10 text-size-12', inputClassName);
+    const inputClasses = (0, classnames_1.default)('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
+    inputClassName);
+    const oldValueClasses = (0, classnames_1.default)('position-absolute', 'top-2', 'left-10', 'margin-left-3', 'text-size-10', 'text-decoration-line-through', icon && 'padding-left-20');
     const buttonIconClasses = (0, classnames_1.default)('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: wrapperClasses }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'input-group' }, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput }, inputProps)), showOldValue && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'position-absolute top-2 left-10 ' +
-                        'margin-left-3 text-size-10 text-decoration-line-through' }, { children: oldInputValue }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'input-group-btn' }, { children: (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput }, { children: (0, jsx_runtime_1.jsx)("span", { className: buttonIconClasses }) })) }))] })) })));
+    const disableButton = (editInput && !isValid) || disabled;
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: wrapperClasses }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'input-group' }, { children: [icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true', "aria-label": 'input icon' }) }))), (0, jsx_runtime_1.jsx)("input", Object.assign({ type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput }, inputProps)), unit && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'position-absolute right-0 margin-right-50', "aria-label": 'unit' }, { children: unit }))), showOldValue && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: oldValueClasses, "aria-label": 'previous value' }, { children: oldInputValue }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'input-group-btn' }, { children: (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton }, { children: (0, jsx_runtime_1.jsx)("span", { className: buttonIconClasses }) })) }))] })) })));
 };
 exports.default = SaveableInput;

package/lib/es/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;
+    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;
+    requestItemDOMValues?: boolean;
+    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/lib/es/components/selects/BaseSelectDropdown.js

@@ -0,0 +1,180 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterOptions = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const useDropDirection_1 = require("../../utils/useDropDirection");
+const scrollItemIntoView_1 = require("../../utils/scrollItemIntoView");
+const useEffectOnce_1 = tslib_1.__importDefault(require("../../hooks/useEffectOnce"));
+const useKey_1 = tslib_1.__importDefault(require("../../useKey"));
+const DropdownHeader_1 = tslib_1.__importDefault(require("./DropdownHeader"));
+const NoItemMessage_1 = tslib_1.__importDefault(require("./NoItemMessage"));
+const DATA_ATTRIBUTE_ID = 'data-item-id';
+const DEFAULT_FOCUSED_ITEM_INDEX = 0;
+const HIGHLIGHT_CLASS = 'focus';
+const BaseSelectDropdown = (props) => {
+    const { isOpen = false, updateDOMValues = noop_1.default, onOpen = noop_1.default, onSelect = noop_1.default, onClose = noop_1.default, options = [], autoDropDirection = true, dropup = false, pullRight = false, useActiveClass = false, focusedItemIndex: externalFocusedItemIndex, keyboardUsed: externalKeyboardUsed, noItemMessage, dropdownClassName, } = props;
+    const [focusedItemIndex, setFocusedItemIndex] = (0, react_1.useState)(externalFocusedItemIndex || DEFAULT_FOCUSED_ITEM_INDEX);
+    const [keyboardUsed, setKeyboardUsed] = (0, react_1.useState)(externalKeyboardUsed);
+    const dropdownMenuRef = (0, react_1.useRef)(null);
+    (0, useEffectOnce_1.default)(() => {
+        // 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 = (0, useDropDirection_1.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
+    (0, react_1.useLayoutEffect)(() => {
+        if (dropdownMenuRef.current) {
+            const parent = dropdownMenuRef.current.parentElement;
+            if (dropDirection.dropup) {
+                parent === null || parent === void 0 ? void 0 : parent.classList.add('dropup');
+            }
+            else {
+                parent === null || parent === void 0 ? void 0 : parent.classList.remove('dropup');
+            }
+        }
+    }, [dropDirection, dropdownMenuRef]);
+    // update internal state for isOpen
+    const [previousIsOpen, setPreviousIsOpen] = (0, react_1.useState)(isOpen);
+    if (isOpen && !previousIsOpen) {
+        onOpen(dropDirection.dropup);
+        setPreviousIsOpen(isOpen);
+    }
+    else if (!isOpen && previousIsOpen) {
+        onClose();
+        setPreviousIsOpen(isOpen);
+    }
+    (0, useKey_1.default)(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(scrollItemIntoView_1.UP);
+                    (0, scrollItemIntoView_1.scrollItemIntoView)(scrollItemIntoView_1.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(scrollItemIntoView_1.DOWN);
+                    (0, scrollItemIntoView_1.scrollItemIntoView)(scrollItemIntoView_1.DOWN, dropdownMenuRef.current, getFocusedOptionNode());
+                    break;
+                }
+                default:
+                    break;
+            }
+        }
+    });
+    const focusOption = (direction) => {
+        let nextFocusedItem = 0;
+        switch (direction) {
+            case scrollItemIntoView_1.UP: {
+                nextFocusedItem = focusedItemIndex <= 0 ? focusedItemIndex : focusedItemIndex - 1;
+                break;
+            }
+            case scrollItemIntoView_1.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 === scrollItemIntoView_1.UP ? options.length - 1 : 0;
+        setFocusedItemIndex(nextFocusedItem < 0 ? indexLimit : nextFocusedItem);
+        setKeyboardUsed(true);
+    };
+    const getOptionNodes = () => {
+        const node = dropdownMenuRef.current;
+        return (node === null || node === void 0 ? void 0 : 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 ((0, isEmpty_1.default)(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 = (0, classnames_1.default)('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 ((0, isEmpty_1.default)(options)) {
+        return (0, jsx_runtime_1.jsx)(NoItemMessage_1.default, { noItemMessage: noItemMessage, className: dropdownMenuClasses });
+    }
+    return ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: dropdownMenuClasses, ref: dropdownMenuRef, role: 'menu' }, { children: options.map((option, index) => {
+            if (option.header) {
+                return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { icon: option.icon, label: option.label }, option.id);
+            }
+            // Show focused style only when keyboard is in use
+            const anchorClassNames = (0, classnames_1.default)('display-flex align-items-center', keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '', option.disabled && 'pointer-events-none');
+            const wrapperClassNames = (0, classnames_1.default)(option.disabled && 'disabled', useActiveClass && option.selected && 'active');
+            return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: wrapperClassNames, role: 'listitem' }, { children: (0, jsx_runtime_1.jsxs)("a", Object.assign({ role: 'menuitem', className: anchorClassNames, "data-item-id": option.id, "data-item-index": index, 
+                    // Note, we need to assign the click callback only when it's not disabled
+                    // otherwise the functions is still triggered
+                    // biome-ignore lint/a11y/useValidAnchor: due to old structure and backwards compatibility
+                    onClick: option.disabled ? undefined : handleOptionChange }, { children: [(0, jsx_runtime_1.jsxs)("span", { children: [option.icon && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-right-5' }, { children: option.icon })), option.label] }), (0, jsx_runtime_1.jsx)("input", { type: 'hidden', value: option.id })] })) }), option.id));
+        }) })));
+};
+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);
+    });
+};
+exports.filterOptions = filterOptions;
+exports.default = BaseSelectDropdown;

package/lib/es/components/selects/ClearButton.d.ts

@@ -0,0 +1,8 @@
+import type { SelectOption } from './Select';
+export type ClearButtonProps = {
+    showClear: boolean;
+    selectedItem: SelectOption | null;
+    onClear: () => void;
+};
+declare const ClearButton: (props: ClearButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default ClearButton;

package/lib/es/components/selects/ClearButton.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
+const ClearButton = (props) => {
+    const { showClear, selectedItem, onClear } = props;
+    const clearButtonClassNames = (0, classnames_1.default)('clearButton', (!showClear || (0, isNil_1.default)(selectedItem)) && 'hide pointer-events-none');
+    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: clearButtonClassNames, onClick: onClear }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })));
+};
+exports.default = ClearButton;

package/lib/es/components/selects/DropdownHeader.d.ts

@@ -1,14 +1,8 @@
+import React from 'react';
+export type DropdownHeaderProps = {
+    icon?: React.ReactNode;
+    center?: boolean;
+    label: string | React.ReactNode;
+};
+declare const DropdownHeader: (props: DropdownHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default DropdownHeader;
-declare function DropdownHeader(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace DropdownHeader {
-    namespace defaultProps {
-        const center: boolean;
-    }
-    namespace propTypes {
-        export const icon: PropTypes.Requireable<string>;
-        const center_1: PropTypes.Requireable<boolean>;
-        export { center_1 as center };
-        export const label: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/selects/DropdownHeader.js

@@ -1,19 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const DropdownHeader = props => {
-    const { icon, label, center } = props;
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const DropdownHeader = (props) => {
+    const { icon, label, center = true } = props;
     return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: `dropdown-header ${center ? 'center' : ''}` }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'dropdown-header-text' }, { children: [icon && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-right-5' }, { children: icon })), label] })) })));
 };
-DropdownHeader.defaultProps = {
-    center: true,
-};
-DropdownHeader.propTypes = {
-    icon: prop_types_1.default.string,
-    center: prop_types_1.default.bool,
-    label: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-};
 exports.default = DropdownHeader;