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

package/components/selects/Select.d.ts

@@ -1,97 +1,142 @@
-export class Select extends React.Component<any, any, any> {
-    constructor(props: any);
-    state: {
-        isOpen: boolean;
-        selectedItem: null;
-        isFilterActive: boolean;
-        filterValue: string;
-        filteredOptions: any;
-        itemDOMValues: never[];
-        focusedItemIndex: number;
-        keyboardUsed: boolean;
-        requestItemDOMValues: boolean;
-    };
-    onToggle(event: any): void;
-    handleClickOutside(): void;
-    updateSelectedItem(options: any, value: any): void;
-    handleFilterChange(event: any): void;
-    onOptionChange(event: any, selectedItem: any): void;
-    updateDOMValues(itemDOMValues?: any[]): void;
-    closeMenu(): void;
-    onOpenMenu(dropup: any): void;
-    UNSAFE_componentWillMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: any): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-    refSelect: HTMLDivElement | null | undefined;
-    renderUnselectedItemIcons(options: any, selectedItem: any): import("react/jsx-runtime").JSX.Element;
-    getSelectedItemLabel(selectedItem: any, placeholder: any): import("react/jsx-runtime").JSX.Element | " ";
-    renderClearButton(): import("react/jsx-runtime").JSX.Element;
-    renderToggle(): import("react/jsx-runtime").JSX.Element;
-    refToggle: HTMLButtonElement | null | undefined;
-    renderDropdownMenu(): import("react/jsx-runtime").JSX.Element;
-    renderFilterInput(): import("react/jsx-runtime").JSX.Element;
-    filterOptions(itemDOMValues: any[] | undefined, filterValue: any, options: any): any;
-    isAutoDropActive(): boolean;
-}
-export namespace Select {
-    namespace defaultProps {
-        function onChange(): void;
-        const options: never[];
-        const disabled: boolean;
-        const pullRight: boolean;
-        const dropup: boolean;
-        const hasError: boolean;
-        const useFilter: boolean;
-        const tabIndex: number;
-        const showSelectedItemIcon: boolean;
-        const showUnselectedItemIcons: boolean;
-        const useClear: boolean;
-    }
-    namespace propTypes {
-        export const id: PropTypes.Requireable<string>;
-        export const name: PropTypes.Requireable<string>;
-        export const label: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const options_1: PropTypes.Requireable<(PropTypes.InferProps<{
-            id: PropTypes.Validator<string>;
-            label: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-            icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            selected: PropTypes.Requireable<boolean>;
-            disabled: PropTypes.Requireable<boolean>;
-            header: PropTypes.Requireable<boolean>;
-        }> | null | undefined)[]>;
-        export { options_1 as options };
-        const onChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onChange_1 as onChange };
-        export const selectedOptionText: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export const placeholder: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const dropup_1: PropTypes.Requireable<boolean>;
-        export { dropup_1 as dropup };
-        const pullRight_1: PropTypes.Requireable<boolean>;
-        export { pullRight_1 as pullRight };
-        export const autoDropDirection: PropTypes.Requireable<boolean>;
-        export const value: PropTypes.Requireable<any[]>;
-        export const bsSize: PropTypes.Requireable<string>;
-        const disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-        export const className: PropTypes.Requireable<string>;
-        export const btnClassName: PropTypes.Requireable<string>;
-        export const dropdownClassName: PropTypes.Requireable<string>;
-        const tabIndex_1: PropTypes.Requireable<number>;
-        export { tabIndex_1 as tabIndex };
-        const hasError_1: PropTypes.Requireable<boolean>;
-        export { hasError_1 as hasError };
-        const useFilter_1: PropTypes.Requireable<boolean>;
-        export { useFilter_1 as useFilter };
-        export const noItemMessage: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const showSelectedItemIcon_1: PropTypes.Requireable<boolean>;
-        export { showSelectedItemIcon_1 as showSelectedItemIcon };
-        const showUnselectedItemIcons_1: PropTypes.Requireable<boolean>;
-        export { showUnselectedItemIcons_1 as showUnselectedItemIcons };
-        const useClear_1: PropTypes.Requireable<boolean>;
-        export { useClear_1 as useClear };
-    }
-}
-declare const _default: any;
-export default _default;
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+import { type SelectOption } from './BaseSelectDropdown';
+import { WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';
+export type { SelectOption } from './BaseSelectDropdown';
+export type SelectProps<T extends SelectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {
+    /**
+     * Passed through as HTML attribute to the toggle button.
+     */
+    name?: string;
+    /**
+     * Passed through as HTML attribute to the toggle button.
+     *
+     * @default Uses the value given to `name` if not provided explicitly.
+     */
+    id?: string;
+    /**
+     * The toggle label in front of the selected text.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * Items to display in the dropdown menu.
+     *
+     * @default []
+     */
+    options?: T[];
+    /**
+     * Sets the ids of the selected options when the component is already mounted.
+     */
+    value?: string[];
+    /**
+     * Callback function triggered when an item is selected.
+     *
+     * @param selectedOption The option that was selected (or undefined if none was).
+     *
+     * @default () => {}
+     */
+    onChange?: (selectOption: T | undefined) => void;
+    /**
+     * Text to display when nothing is selected.
+     */
+    placeholder?: string | React.ReactNode;
+    /**
+     * Defines whether the dropdown opens upwards.
+     *
+     * Set to `true` additionally disables autoDrop feature.
+     *
+     * @default false
+     */
+    dropup?: boolean;
+    /**
+     * Defines whether the dropdown opens right aligned to the dropdown toggle.
+     *
+     * Set to 'true' additionally disables autoDrop feature.
+     *
+     * @default false
+     */
+    pullRight?: boolean;
+    /**
+     * Enables or disables the autoDrop positioning feature.
+     *
+     * When enabled, the option list opens below or above the input depending on the surrounding space.
+     *
+     * @default true
+     */
+    autoDropDirection?: boolean;
+    /**
+     * Defines the size of the select to be rendered.
+     *
+     * @default 'md'
+     */
+    bsSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Option to disable the opening of the option list.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Sets the input's tabindex attribute.
+     *
+     * The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being
+     * sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for
+     * sequential focus navigation.
+     *
+     * @default 0
+     */
+    tabIndex?: number;
+    /**
+     * Defines whether the Bootstrap error classes shall be added to the toggle element.
+     *
+     * @default false
+     */
+    hasError?: boolean;
+    /**
+     * Defines whether the component should be filterable.
+     *
+     * @default false
+     */
+    useFilter?: boolean;
+    /**
+     * Set to show a clear button.
+     *
+     * @default false
+     */
+    useClear?: boolean;
+    /**
+     * Text that shall be shown when not match was found when filtering.
+     */
+    noItemMessage?: string | React.ReactNode;
+    /**
+     * Text or node to be rendered on the toggle select instead of the selected item label.
+     */
+    selectedOptionText?: string | React.ReactNode;
+    /**
+     * Set to show only the icon and not the label of selected item.
+     *
+     * @default false
+     */
+    showSelectedItemIcon?: boolean;
+    /**
+     * Set to show all item icons within the toggle element.
+     *
+     * Selected items are highlighted and unselected items are shown as inactive.
+     *
+     * @default false
+     */
+    showUnselectedItemIcons?: boolean;
+    /**
+     * Additional classes to be set to the dropdown.
+     */
+    dropdownClassName?: string;
+    /**
+     * Additional classes to be set to the select/input.
+     */
+    btnClassName?: string;
+    /**
+     * Additional classes to be set to the select wrapper.
+     */
+    className?: string;
+};
+declare const Select: <T extends SelectOption>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default Select;

package/components/selects/Select.js

@@ -1,280 +1,136 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import onClickOutside from 'react-onclickoutside';
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
 import classNames from 'classnames';
 import isEqual from 'lodash/fp/isEqual';
-import logPropError from '../../utils/logPropError';
-import logDeprecatedWarnings from '../../utils/logDeprecatedWarnings';
-import isNil from 'lodash/fp/isNil';
-import { BaseDropdownMenu } from './BaseDropdownMenu';
-const errorProps = [
-    {
-        prop: 'toggleButtonLabel',
-        replacement: 'selectedOptionText',
-    },
-];
-const warningProps = [
-    {
-        prop: 'autoDropDirection',
-    },
-];
+import isEmpty from 'lodash/fp/isEmpty';
+import noop from 'lodash/fp/noop';
+import BaseSelectDropdown, { filterOptions } from './BaseSelectDropdown';
+import useClickOutside from '../../useClickOutside';
+import useEffectOnce from '../../hooks/useEffectOnce';
+import useMergeRefs from '../../hooks/useMergeRefs';
+import ClearButton from './ClearButton';
+import SelectFilter from './SelectFilter';
+import SelectedOption from './SelectedOption';
+import WithFeedbackAndAddon from './WithFeedbackAndAddon';
 const DEFAULT_FOCUSED_ITEM_INDEX = -1;
-export class Select extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isOpen: false,
-            selectedItem: null,
-            isFilterActive: false,
-            filterValue: '',
-            filteredOptions: props.options,
-            itemDOMValues: [],
-            focusedItemIndex: DEFAULT_FOCUSED_ITEM_INDEX,
-            keyboardUsed: false,
-            requestItemDOMValues: false,
-        };
-        this.onToggle = this.onToggle.bind(this);
-        this.handleClickOutside = this.handleClickOutside.bind(this);
-        this.updateSelectedItem = this.updateSelectedItem.bind(this);
-        this.handleFilterChange = this.handleFilterChange.bind(this);
-        this.onOptionChange = this.onOptionChange.bind(this);
-        this.updateDOMValues = this.updateDOMValues.bind(this);
-        this.closeMenu = this.closeMenu.bind(this);
-        this.onOpenMenu = this.onOpenMenu.bind(this);
-    }
-    UNSAFE_componentWillMount() {
-        this.updateSelectedItem(this.props.options, this.props.value);
-    }
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        this.updateSelectedItem(nextProps.options, nextProps.value);
-        if (!isEqual(nextProps.options, this.props.options)) {
-            this.setState({
-                filteredOptions: nextProps.options,
-                requestItemDOMValues: true,
-            });
+const Select = (props) => {
+    const { name, id = name, label, options = [], value, onChange = noop, placeholder, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, useClear = false, noItemMessage, selectedOptionText, showSelectedItemIcon = false, showUnselectedItemIcons = false, dropdownClassName, btnClassName, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal' } = props, remainingProps = __rest(props, ["name", "id", "label", "options", "value", "onChange", "placeholder", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "useClear", "noItemMessage", "selectedOptionText", "showSelectedItemIcon", "showUnselectedItemIcons", "dropdownClassName", "btnClassName", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedItem, setSelectedItem] = useState(null);
+    const [isFilterActive, setIsFilterActive] = useState(false);
+    const [filterValue, setFilterValue] = useState('');
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const [itemDOMValues, setItemDOMValues] = useState([]);
+    const [focusedItemIndex, setFocusedItemIndex] = useState(DEFAULT_FOCUSED_ITEM_INDEX);
+    const [requestItemDOMValues, setRequestItemDOMValues] = useState(false);
+    const [keyboardUsed, setKeyboardUsed] = useState(false);
+    const refSelect = useRef();
+    const refToggle = useRef(null);
+    const ref = useClickOutside(() => closeMenu());
+    const mergedSelectRefs = useMergeRefs(refSelect, ref);
+    const updateSelectedItem = (selectOptions, updatedValue) => {
+        if (updatedValue && !isEmpty(updatedValue)) {
+            setSelectedItem(selectOptions.find(item => item.id === updatedValue[0]) || null);
         }
-    }
-    updateSelectedItem(options, value) {
-        if (value) {
-            this.setState(() => ({
-                selectedItem: options.find(item => item.id === value[0]),
-            }));
-        }
-        else if (options) {
-            this.setState(() => ({
-                selectedItem: options.find(item => item.selected),
-            }));
-        }
-    }
-    updateDOMValues(itemDOMValues = []) {
-        this.setState(() => ({
-            itemDOMValues,
-            requestItemDOMValues: false,
-        }));
-    }
-    render() {
-        const { className, hasError, dropup } = this.props;
-        const classes = classNames('select', dropup && 'dropup', 'dropdown', hasError && 'has-error', this.state.isOpen && 'open', className && className);
-        return (_jsxs("div", Object.assign({ className: classes, ref: node => (this.refSelect = node) }, { children: [this.renderToggle(), this.renderDropdownMenu()] })));
-    }
-    renderUnselectedItemIcons(options, selectedItem) {
-        const optionSpans = options
-            .filter(option => !option.header)
-            .map(option => (_jsx("span", Object.assign({ className: `margin-right-5 ${selectedItem && selectedItem.id === option.id ? '' : 'inactiveIcon'}` }, { children: option.icon }), option.id)));
-        return _jsx("span", { children: optionSpans });
-    }
-    getSelectedItemLabel(selectedItem, placeholder) {
-        if (this.props.showUnselectedItemIcons) {
-            return this.renderUnselectedItemIcons(this.props.options, selectedItem);
+        else if (selectOptions) {
+            setSelectedItem(selectOptions.find(item => item.selected) || null);
         }
-        if (!selectedItem) {
-            // render a placeholder or if there is none render a non-breaking space " "
-            return placeholder ? _jsx("span", Object.assign({ className: 'placeholder' }, { children: placeholder })) : '\u00a0';
+    };
+    useEffectOnce(() => {
+        updateSelectedItem(options, value);
+    });
+    const [previousOptions, setPreviousOptions] = useState(options);
+    if (!isEqual(options, previousOptions)) {
+        updateSelectedItem(options, value);
+        setFilteredOptions(options);
+        setRequestItemDOMValues(true);
+        setPreviousOptions(options);
+    }
+    const [previousValue, setPreviousValue] = useState(value);
+    if (!isEqual(value, previousValue)) {
+        updateSelectedItem(options, value);
+        setPreviousValue(value);
+    }
+    const updateDOMValues = (itemDOMValuesToUpdated = []) => {
+        setItemDOMValues(itemDOMValuesToUpdated);
+        setRequestItemDOMValues(false);
+    };
+    const handleClearSelectedItem = () => {
+        setSelectedItem(null);
+        setIsFilterActive(false);
+        setFilterValue('');
+        onChange(undefined);
+    };
+    const renderToggle = () => {
+        const toggleClasses = classNames('dropdown-toggle', 'form-control', 'text-left', btnClassName && btnClassName, bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', disabled && 'disabled');
+        const toggleButton = (_jsxs("button", Object.assign({ type: 'button', id: id, name: name, className: toggleClasses, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, ref: refToggle }, { children: [useFilter && isOpen && (_jsx(SelectFilter, { isFilterActive: isFilterActive, filterValue: filterValue, onChange: handleFilterChange })), selectedOptionText ? (selectedOptionText) : (_jsx(SelectedOption, { label: label, placeholder: placeholder, selectedItem: selectedItem, options: options, showSelectedItemIcon: showSelectedItemIcon, showUnselectedItemIcons: showUnselectedItemIcons })), _jsx(ClearButton, { showClear: useClear, selectedItem: selectedItem, onClear: handleClearSelectedItem }), _jsx("span", { className: 'caret' })] })));
+        if (!inputAddon && !errorMessage && !warningMessage) {
+            return toggleButton;
         }
-        return (_jsxs("span", { children: [selectedItem.icon && _jsx("span", Object.assign({ className: 'margin-right-5' }, { children: selectedItem.icon })), !this.props.showSelectedItemIcon && selectedItem.label] }));
-    }
-    renderClearButton() {
-        const { onChange, useClear } = this.props;
-        const clearSelectedItem = () => {
-            this.setState(() => ({
-                selectedItem: undefined,
-                isFilterActive: false,
-                filterValue: '',
-            }));
-            onChange();
-        };
-        const clearButtonClassNames = classNames('clearButton', (!useClear || isNil(this.state.selectedItem)) && 'hide pointer-events-none');
-        return (_jsx("span", Object.assign({ className: clearButtonClassNames, onClick: clearSelectedItem }, { children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })));
-    }
-    renderToggle() {
-        const { bsSize, btnClassName, tabIndex, useFilter, placeholder, disabled, name, label, id = name, selectedOptionText, } = this.props;
-        logPropError(errorProps, this.props, 'Select');
-        logDeprecatedWarnings(warningProps, this.props, 'Select');
-        const { isOpen, selectedItem } = this.state;
-        const classes = classNames('dropdown-toggle', 'form-control', 'text-left', btnClassName && btnClassName, bsSize === 'large' && 'input-lg', // TODO: deprecte since it's not consistent
-        bsSize === 'small' && 'input-sm', // TODO: deprecte since it's not consistent
-        bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', disabled && 'disabled');
-        const selectedOption = (_jsxs("span", Object.assign({ className: 'selected-option-text' }, { children: [label && _jsxs("span", Object.assign({ className: 'selected-option-text-label' }, { children: [label, ":"] })), _jsx("span", { children: this.getSelectedItemLabel(selectedItem, placeholder) })] })));
-        return (_jsxs("button", Object.assign({ type: 'button', id: id, name: name, className: classes, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: this.onToggle, ref: node => (this.refToggle = node) }, { children: [useFilter && isOpen && this.renderFilterInput(), selectedOptionText ? selectedOptionText : selectedOption, this.renderClearButton(), _jsx("span", { className: 'caret' })] })));
-    }
-    renderDropdownMenu() {
-        // console.log('keyboardUsed=' + this.state.keyboardUsed)
-        const { pullRight, noItemMessage, dropdownClassName } = this.props;
+        return (_jsx(WithFeedbackAndAddon, Object.assign({ bsSize: bsSize, inputAddon: inputAddon, errorMessage: errorMessage, warningMessage: warningMessage, messageWhiteSpace: messageWhiteSpace }, { children: toggleButton })));
+    };
+    const renderDropdownMenu = () => {
         // When an option was already selected, highlight this option by setting the focusedItemIndex accordingly.
         // In case there was nothing preselected, set the focusedItemIndex to the first item if keyboard was used.
-        let focusedItemIndex = this.state.focusedItemIndex;
-        if (this.state.selectedItem) {
-            focusedItemIndex = this.props.options.findIndex(option => {
-                return option.id === this.state.selectedItem.id;
+        let currentFocusedItemIndex = focusedItemIndex;
+        if (selectedItem) {
+            currentFocusedItemIndex = options.findIndex(option => {
+                return option.id === selectedItem.id;
             });
         }
-        else if (this.state.keyboardUsed) {
-            focusedItemIndex = 0;
+        else if (keyboardUsed) {
+            currentFocusedItemIndex = 0;
         }
-        // console.log('focusedItemIndex=' + focusedItemIndex);
-        return (_jsx(BaseDropdownMenu, { isOpen: this.state.isOpen, options: this.state.filteredOptions, focusedItemIndex: focusedItemIndex, keyboardUsed: this.state.keyboardUsed, updateDOMValues: this.updateDOMValues, onOpen: this.onOpenMenu, onSelect: this.onOptionChange, onClose: this.closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, dropdownClassName: dropdownClassName, requestItemDOMValues: this.state.requestItemDOMValues }));
-    }
-    renderFilterInput() {
-        const inputClasses = classNames('select-filter-input', (this.state.isFilterActive || this.state.filterValue) && 'select-filter-input-active');
-        return (_jsx("input", { type: 'text', className: inputClasses, autoFocus: true, onChange: this.handleFilterChange, value: this.state.filterValue }));
-    }
-    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(value => value.id === option.id);
-        });
-    }
-    handleFilterChange(event) {
+        return (_jsx(BaseSelectDropdown, { isOpen: isOpen, options: filteredOptions, focusedItemIndex: currentFocusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, dropup: dropup, autoDropDirection: autoDropDirection, dropdownClassName: dropdownClassName, requestItemDOMValues: requestItemDOMValues }));
+    };
+    const handleFilterChange = (event) => {
         event.preventDefault();
-        const filterValue = event.currentTarget.value;
-        const filteredOptions = this.filterOptions(this.state.itemDOMValues, filterValue, this.props.options);
+        const targetFilterValue = event.currentTarget.value;
+        const currentFilteredOptions = filterOptions(itemDOMValues, targetFilterValue, options);
         // highlight the first item of the search result if at least one item was found
-        const newFocusedItemIndex = filteredOptions.length > 0 ? 0 : DEFAULT_FOCUSED_ITEM_INDEX;
-        this.setState(() => ({
-            isFilterActive: true,
-            filterValue,
-            filteredOptions,
-            keyboardUsed: true,
-            focusedItemIndex: newFocusedItemIndex,
-        }));
-    }
-    onOptionChange(event, selectedItem) {
-        this.setState(() => ({
-            selectedItem,
-            isFilterActive: false,
-            filterValue: '',
-            filteredOptions: this.props.options,
-        }));
-        // Needed? - was once added by a Service Team (guess it was Chat)
-        if (event.target) {
-            event.target.value = this.state.selectedItem;
-        }
-        this.props.onChange(selectedItem);
-        this.closeMenu();
-    }
-    isAutoDropActive() {
-        return !(!this.props.autoDropDirection || this.props.dropup || this.props.pullRight);
-    }
-    onToggle(event) {
-        // Dont toggle when component is disabled or
+        const newFocusedItemIndex = currentFilteredOptions.length > 0 ? 0 : DEFAULT_FOCUSED_ITEM_INDEX;
+        setIsFilterActive(true);
+        setFilterValue(targetFilterValue);
+        setFilteredOptions(currentFilteredOptions);
+        setKeyboardUsed(true);
+        setFocusedItemIndex(newFocusedItemIndex);
+    };
+    const onOptionChange = (currentSelectedItem) => {
+        setSelectedItem(currentSelectedItem || null);
+        setIsFilterActive(false);
+        setFilterValue('');
+        setFilteredOptions(options);
+        onChange(currentSelectedItem);
+        closeMenu();
+    };
+    const onToggle = (event) => {
+        // Don't toggle when component is disabled or
         // when filter is active, means entering some filter value
         // in order to avoid closing menu on space but allow to use it for filtering
-        if (this.props.disabled || this.state.isFilterActive) {
+        if (disabled || isFilterActive) {
             return;
         }
         // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of
         // type submit by default in HTML. In order to differentiate between real click and a synthetic event
         // caused by they keyboard, use the event details. A synthetic event is always 0.
-        const keyboardUsed = event.detail === 0;
-        this.setState({
-            isOpen: !this.state.isOpen,
-            keyboardUsed,
-        });
-    }
-    onOpenMenu(dropup) {
-        const node = ReactDOM.findDOMNode(this);
-        if (dropup) {
-            node.classList.add('dropup');
+        const isKeyboardUsed = event.detail === 0;
+        setIsOpen(!isOpen);
+        setKeyboardUsed(isKeyboardUsed);
+    };
+    const closeMenu = () => {
+        var _a;
+        if (isOpen) {
+            setIsOpen(false);
+            setIsFilterActive(false);
+            setFilterValue('');
+            setFilteredOptions(options);
+            setKeyboardUsed(false);
+            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);
+            (_a = refToggle.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
-        else {
-            node.classList.remove('dropup');
-        }
-    }
-    closeMenu() {
-        if (this.state.isOpen) {
-            this.setState(() => ({
-                isOpen: false,
-                isFilterActive: false,
-                filterValue: '',
-                filteredOptions: this.props.options,
-                keyboardUsed: false,
-                focusedItemIndex: DEFAULT_FOCUSED_ITEM_INDEX,
-            }));
-            this.refToggle.focus();
-        }
-    }
-    handleClickOutside() {
-        this.closeMenu();
-    }
-}
-Select.defaultProps = {
-    onChange: () => { },
-    options: [],
-    disabled: false,
-    pullRight: false,
-    dropup: false,
-    hasError: false,
-    useFilter: false,
-    tabIndex: 0,
-    showSelectedItemIcon: false,
-    showUnselectedItemIcons: false,
-    useClear: false,
-};
-Select.propTypes = {
-    id: PropTypes.string,
-    name: PropTypes.string,
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    options: PropTypes.arrayOf(PropTypes.shape({
-        // Identify an option
-        id: PropTypes.string.isRequired,
-        // A label to show in body
-        label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-        // An icon to show in body
-        icon: PropTypes.node,
-        selected: PropTypes.bool,
-        disabled: PropTypes.bool,
-        header: PropTypes.bool,
-    })),
-    onChange: PropTypes.func,
-    // Text that will be used instead of the selected item text
-    selectedOptionText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    // Text to display when no menu item is selected
-    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    dropup: PropTypes.bool,
-    pullRight: PropTypes.bool,
-    autoDropDirection: PropTypes.bool,
-    // the current "value" - alternatively use options.selected instead
-    value: PropTypes.array,
-    bsSize: PropTypes.oneOf(['sm', 'lg', 'small', 'large']),
-    disabled: PropTypes.bool,
-    className: PropTypes.string,
-    btnClassName: PropTypes.string,
-    dropdownClassName: PropTypes.string,
-    tabIndex: PropTypes.number,
-    hasError: PropTypes.bool,
-    useFilter: PropTypes.bool,
-    // Text to display when no menu item is selected
-    noItemMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    // shows icons as selected values
-    showSelectedItemIcon: PropTypes.bool,
-    // shows icons always with active or inactive state
-    showUnselectedItemIcons: PropTypes.bool,
-    // Adds a clear button
-    useClear: PropTypes.bool,
+    };
+    const classes = classNames('select', 'dropdown', isOpen && 'open', hasError && 'has-error', className && className);
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: classes, ref: mergedSelectRefs }, { children: [renderToggle(), renderDropdownMenu()] })));
 };
-export default onClickOutside(Select);
+export default Select;

package/components/selects/SelectFilter.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type SelectFilterProps = {
+    isFilterActive: boolean;
+    filterValue: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+declare const SelectFilter: (props: SelectFilterProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectFilter;