@rio-cloud/rio-uikit 2.5.1 → 3.0.0-beta.1

package/components/selects/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/selects/Select.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty, noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport BaseSelectDropdown, { filterOptions, type OptionDOMValue, type SelectOption } from './BaseSelectDropdown';\nimport useClickOutside from '../../useClickOutside';\nimport useEffectOnce from '../../hooks/useEffectOnce';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport type { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';\nimport ClearButton from './ClearButton';\nimport SelectFilter from './SelectFilter';\nimport SelectedOption from './SelectedOption';\nimport WithFeedbackAndAddon, { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';\n\nexport type { SelectOption } from './BaseSelectDropdown';\n\nconst DEFAULT_FOCUSED_ITEM_INDEX = -1;\n\n/**\n * Note: Even with a pre-selected item, when it first opens the dropdown it renders the full options list,\n * not just the selected one. The filter is only usable while the dropdown is open.\n */\nexport type SelectProps<T extends SelectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {\n    /**\n     * Passed through as HTML attribute to the toggle button.\n     */\n    name?: string;\n\n    /**\n     * Passed through as HTML attribute to the toggle button.\n     *\n     * @default Uses the value given to `name` if not provided explicitly.\n     */\n    id?: string;\n\n    /**\n     * The toggle label in front of the selected text.\n     */\n    label?: string | React.ReactNode;\n\n    /**\n     * Items to display in the dropdown menu.\n     *\n     * @default []\n     */\n    options?: T[];\n\n    /**\n     * Sets the ids of the selected options when the component is already mounted.\n     */\n    value?: string[];\n\n    /**\n     * Callback function triggered when an item is selected.\n     *\n     * @param selectedOption The option that was selected (or undefined if none was).\n     *\n     * @default () => {}\n     */\n    onChange?: (selectOption: T | undefined) => void;\n\n    /**\n     * Text to display when nothing is selected.\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Defines whether the dropdown opens upwards.\n     *\n     * Set to `true` additionally disables autoDrop feature.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned to the dropdown toggle.\n     *\n     * Set to 'true' additionally disables autoDrop feature.\n     *\n     * @default false\n     */\n    pullRight?: boolean;\n\n    /**\n     * Enables or disables the autoDrop positioning feature.\n     *\n     * When enabled, the option list opens below or above the input depending on the surrounding space.\n     *\n     * @default true\n     */\n    autoDropDirection?: boolean;\n\n    /**\n     * Defines the size of the select to be rendered.\n     *\n     * @default 'md'\n     */\n    bsSize?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Defines the visual variant of the select.\n     *\n     * @default 'default'\n     */\n    variant?: 'default' | 'blank';\n\n    /**\n     * Option to disable the opening of the option list.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Sets the input's tabindex attribute.\n     *\n     * The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being\n     * sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for\n     * sequential focus navigation.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Defines whether the Bootstrap error classes shall be added to the toggle element.\n     *\n     * @default false\n     */\n    hasError?: boolean;\n\n    /**\n     * Defines whether the component should be filterable.\n     *\n     * @default false\n     */\n    useFilter?: boolean;\n\n    /**\n     * Set to show a clear button.\n     *\n     * @default false\n     */\n    useClear?: boolean;\n\n    /**\n     * Shows a loading spinner instead of the menu items if set to true.\n     *\n     * @default false\n     */\n    isLoading?: boolean;\n\n    /**\n     * Text that shall be shown when not match was found when filtering.\n     */\n    noItemMessage?: string | React.ReactNode;\n\n    /**\n     * Text or node to be rendered on the toggle select instead of the selected item label.\n     */\n    selectedOptionText?: string | React.ReactNode;\n\n    /**\n     * Set to show only the icon and not the label of selected item.\n     *\n     * @default false\n     */\n    showSelectedItemIcon?: boolean;\n\n    /**\n     * Set to show all item icons within the toggle element.\n     *\n     * Selected items are highlighted and unselected items are shown as inactive.\n     *\n     * @default false\n     */\n    showUnselectedItemIcons?: boolean;\n\n    /**\n     * Additional classes to be set to the dropdown.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional classes to be set to the select/input.\n     */\n    btnClassName?: string;\n\n    /**\n     * Additional classes to be set to the select wrapper.\n     */\n    className?: string;\n\n    /**\n     * Optional tracking attributes added to the toggle button.\n     */\n    trackingAttributes?: TrackingAttributes;\n};\n\nconst Select = <T extends SelectOption>(props: SelectProps<T>) => {\n    const {\n        name,\n        id = name,\n        label,\n        options = [],\n        value,\n        onChange = noop,\n        placeholder,\n        isLoading = false,\n        dropup = false,\n        pullRight = false,\n        autoDropDirection = true,\n        bsSize = 'md',\n        variant = 'default',\n        disabled = false,\n        tabIndex = 0,\n        hasError = false,\n        useFilter = false,\n        useClear = false,\n        noItemMessage,\n        selectedOptionText,\n        showSelectedItemIcon = false,\n        showUnselectedItemIcons = false,\n        dropdownClassName,\n        btnClassName,\n        className,\n        trackingAttributes,\n\n        inputAddon,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n    const [selectedItem, setSelectedItem] = useState<SelectOption | null>(null);\n    const [isFilterActive, setIsFilterActive] = useState(false);\n    const [filterValue, setFilterValue] = useState('');\n    const [filteredOptions, setFilteredOptions] = useState(options);\n    const [itemDOMValues, setItemDOMValues] = useState<OptionDOMValue[]>([]);\n    const [focusedItemIndex, setFocusedItemIndex] = useState(DEFAULT_FOCUSED_ITEM_INDEX);\n    const [keyboardUsed, setKeyboardUsed] = useState(false);\n\n    const refSelect = useRef();\n    const refToggle = useRef<HTMLButtonElement>(null);\n\n    const ref = useClickOutside(() => closeMenu());\n    const mergedSelectRefs = useMergeRefs(refSelect, ref);\n\n    const updateSelectedItem = (selectOptions: SelectOption[], updatedValue: string[] | undefined) => {\n        if (updatedValue && !isEmpty(updatedValue)) {\n            setSelectedItem(selectOptions.find(item => item.id === updatedValue[0]) || null);\n        } else if (selectOptions) {\n            setSelectedItem(selectOptions.find(item => item.selected) || null);\n        }\n    };\n\n    useEffectOnce(() => {\n        updateSelectedItem(options, value);\n    });\n\n    const [previousOptions, setPreviousOptions] = useState(options);\n    if (!isEqual(options, previousOptions)) {\n        updateSelectedItem(options, value);\n        setFilteredOptions(options);\n        setPreviousOptions(options);\n    }\n\n    const [previousValue, setPreviousValue] = useState(value);\n    if (!isEqual(value, previousValue)) {\n        updateSelectedItem(options, value);\n        setPreviousValue(value);\n    }\n\n    const updateDOMValues = (itemDOMValuesToUpdated: OptionDOMValue[] = []) => {\n        // Skip updates when we have nothing new, or when filtering is active and we already hold a full snapshot.\n        if (!itemDOMValuesToUpdated.length) {\n            return;\n        }\n\n        const shouldKeepPreviousSnapshot = (isFilterActive || filterValue) && itemDOMValues.length > 0;\n        if (shouldKeepPreviousSnapshot) {\n            return;\n        }\n\n        setItemDOMValues(itemDOMValuesToUpdated);\n    };\n\n    const handleClearSelectedItem = () => {\n        setSelectedItem(null);\n        setIsFilterActive(false);\n        setFilterValue('');\n        setFilteredOptions(options);\n        setKeyboardUsed(false);\n        setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n\n        onChange(undefined);\n    };\n\n    const renderToggle = () => {\n        const toggleClasses = classNames(\n            'dropdown-toggle',\n            'form-control',\n            'text-left',\n            btnClassName && btnClassName,\n            bsSize === 'sm' && 'input-sm',\n            bsSize === 'lg' && 'input-lg',\n            disabled && 'disabled'\n        );\n\n        const toggleButton = (\n            <button\n                type='button'\n                id={id}\n                name={name}\n                className={toggleClasses}\n                {...trackingAttributes}\n                data-toggle='dropdown'\n                tabIndex={tabIndex}\n                aria-haspopup='true'\n                aria-expanded={isOpen}\n                onClick={onToggle}\n                ref={refToggle}\n            >\n                {useFilter && isOpen && (\n                    <SelectFilter\n                        isFilterActive={isFilterActive}\n                        filterValue={filterValue}\n                        onChange={handleFilterChange}\n                    />\n                )}\n                {selectedOptionText ? (\n                    selectedOptionText\n                ) : (\n                    <SelectedOption\n                        label={label}\n                        placeholder={placeholder}\n                        selectedItem={selectedItem}\n                        options={options}\n                        showSelectedItemIcon={showSelectedItemIcon}\n                        showUnselectedItemIcons={showUnselectedItemIcons}\n                    />\n                )}\n                <span className='select-toggle-actions'>\n                    <ClearButton showClear={useClear} selectedItem={selectedItem} onClear={handleClearSelectedItem} />\n                    <span className='caret' />\n                </span>\n            </button>\n        );\n\n        if (!inputAddon && !errorMessage && !warningMessage) {\n            return toggleButton;\n        }\n\n        return (\n            <WithFeedbackAndAddon\n                bsSize={bsSize}\n                inputAddon={inputAddon}\n                errorMessage={errorMessage}\n                warningMessage={warningMessage}\n                messageWhiteSpace={messageWhiteSpace}\n            >\n                {toggleButton}\n            </WithFeedbackAndAddon>\n        );\n    };\n\n    const renderDropdownMenu = () => {\n        // Start from the last tracked focus; only default to the first item when opened via keyboard and nothing is selected.\n        let currentFocusedItemIndex = focusedItemIndex;\n\n        // Do not auto-highlight a selected item on open; let keyboard navigation start from \"no focus\".\n        // Only default to the first item when opened via keyboard and nothing was selected.\n        if (keyboardUsed && !selectedItem) {\n            currentFocusedItemIndex = 0;\n        }\n\n        return (\n            <BaseSelectDropdown\n                isOpen={isOpen}\n                isLoading={isLoading}\n                options={filteredOptions}\n                focusedItemIndex={currentFocusedItemIndex}\n                keyboardUsed={keyboardUsed}\n                updateDOMValues={updateDOMValues}\n                onSelect={onOptionChange}\n                onClose={closeMenu}\n                noItemMessage={noItemMessage}\n                pullRight={pullRight}\n                dropup={dropup}\n                autoDropDirection={autoDropDirection}\n                dropdownClassName={dropdownClassName}\n            />\n        );\n    };\n\n    const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        event.preventDefault();\n\n        const targetFilterValue = event.currentTarget.value;\n\n        // if cleared: reset to defaults and bail early\n        if (targetFilterValue === '') {\n            setIsFilterActive(false);\n            setFilterValue('');\n            setFilteredOptions(options);\n            setKeyboardUsed(false);\n            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n            return;\n        }\n\n        // otherwise: filter against the last known non-empty DOM snapshot\n        const currentFilteredOptions = filterOptions(itemDOMValues, targetFilterValue, options);\n\n        // highlight the first item of the search result if at least one item was found\n        const newFocusedItemIndex = currentFilteredOptions.length > 0 ? 0 : DEFAULT_FOCUSED_ITEM_INDEX;\n\n        setIsFilterActive(true);\n        setFilterValue(targetFilterValue);\n        setFilteredOptions(currentFilteredOptions);\n        setKeyboardUsed(true);\n        setFocusedItemIndex(newFocusedItemIndex);\n    };\n\n    const onOptionChange = (currentSelectedItem: T | undefined) => {\n        setSelectedItem(currentSelectedItem || null);\n        setIsFilterActive(false);\n        setFilterValue('');\n        setFilteredOptions(options);\n\n        onChange(currentSelectedItem);\n\n        closeMenu();\n    };\n\n    const onToggle = (event: React.MouseEvent<HTMLButtonElement>) => {\n        // Don't toggle when component is disabled or\n        // when filter is active, means entering some filter value\n        // in order to avoid closing menu on space but allow to use it for filtering\n        if (disabled || isFilterActive) {\n            return;\n        }\n\n        // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of\n        // type submit by default in HTML. In order to differentiate between real click and a synthetic event\n        // caused by they keyboard, use the event details. A synthetic event is always 0.\n        const isKeyboardUsed = event.detail === 0;\n\n        setIsOpen(!isOpen);\n        setKeyboardUsed(isKeyboardUsed);\n    };\n\n    const closeMenu = () => {\n        if (isOpen) {\n            setIsOpen(false);\n            setIsFilterActive(false);\n            setFilterValue('');\n            setFilteredOptions(options);\n            setKeyboardUsed(false);\n            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n            refToggle.current?.focus();\n        }\n    };\n\n    const classes = classNames(\n        'select',\n        'dropdown',\n        isOpen && 'open',\n        hasError && 'has-error',\n        variant === 'blank' && 'select-blank',\n        className && className\n    );\n\n    return (\n        <div {...remainingProps} className={classes} ref={mergedSelectRefs}>\n            {renderToggle()}\n            {renderDropdownMenu()}\n        </div>\n    );\n};\n\nexport default Select;\n"],"names":["DEFAULT_FOCUSED_ITEM_INDEX","Select","props","name","id","label","options","value","onChange","noop","placeholder","isLoading","dropup","pullRight","autoDropDirection","bsSize","variant","disabled","tabIndex","hasError","useFilter","useClear","noItemMessage","selectedOptionText","showSelectedItemIcon","showUnselectedItemIcons","dropdownClassName","btnClassName","className","trackingAttributes","inputAddon","errorMessage","warningMessage","messageWhiteSpace","remainingProps","isOpen","setIsOpen","useState","selectedItem","setSelectedItem","isFilterActive","setIsFilterActive","filterValue","setFilterValue","filteredOptions","setFilteredOptions","itemDOMValues","setItemDOMValues","focusedItemIndex","setFocusedItemIndex","keyboardUsed","setKeyboardUsed","refSelect","useRef","refToggle","ref","useClickOutside","closeMenu","mergedSelectRefs","useMergeRefs","updateSelectedItem","selectOptions","updatedValue","isEmpty","item","useEffectOnce","previousOptions","setPreviousOptions","isEqual","previousValue","setPreviousValue","updateDOMValues","itemDOMValuesToUpdated","handleClearSelectedItem","renderToggle","toggleClasses","classNames","toggleButton","jsxs","onToggle","jsx","SelectFilter","handleFilterChange","SelectedOption","ClearButton","WithFeedbackAndAddon","renderDropdownMenu","currentFocusedItemIndex","BaseSelectDropdown","onOptionChange","event","targetFilterValue","currentFilteredOptions","filterOptions","newFocusedItemIndex","currentSelectedItem","isKeyboardUsed","classes"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/selects/Select.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState, type CSSProperties } from 'react';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty, noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport BaseSelectDropdown, { filterOptions, type OptionDOMValue, type SelectOption } from './BaseSelectDropdown';\nimport useClickOutside from '../../useClickOutside';\nimport useEffectOnce from '../../hooks/useEffectOnce';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport type { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';\nimport ClearButton from './ClearButton';\nimport SelectFilter from './SelectFilter';\nimport SelectedOption from './SelectedOption';\nimport WithFeedbackAndAddon, { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';\nimport { useAnchorName } from '../../hooks/useAnchoredPopover';\n\nexport type { SelectOption } from './BaseSelectDropdown';\n\nconst DEFAULT_FOCUSED_ITEM_INDEX = -1;\n\n/**\n * Note: Even with a pre-selected item, when it first opens the dropdown it renders the full options list,\n * not just the selected one. The filter is only usable while the dropdown is open.\n */\nexport type SelectProps<T extends SelectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {\n    /**\n     * Passed through as HTML attribute to the toggle button.\n     */\n    name?: string;\n\n    /**\n     * Passed through as HTML attribute to the toggle button.\n     *\n     * @default Uses the value given to `name` if not provided explicitly.\n     */\n    id?: string;\n\n    /**\n     * The toggle label in front of the selected text.\n     */\n    label?: string | React.ReactNode;\n\n    /**\n     * Items to display in the dropdown menu.\n     *\n     * @default []\n     */\n    options?: T[];\n\n    /**\n     * Sets the ids of the selected options when the component is already mounted.\n     */\n    value?: string[];\n\n    /**\n     * Callback function triggered when an item is selected.\n     *\n     * @param selectedOption The option that was selected (or undefined if none was).\n     *\n     * @default () => {}\n     */\n    onChange?: (selectOption: T | undefined) => void;\n\n    /**\n     * Defines whether the dropdown closes after selecting an option.\n     *\n     * @default true\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Text to display when nothing is selected.\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Defines whether the dropdown opens upwards.\n     *\n     * The dropdown can still fall back to another position when there is not enough space.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned to the dropdown toggle.\n     *\n     * @default false\n     */\n    pullRight?: boolean;\n\n    /**\n     * Defines the size of the select to be rendered.\n     *\n     * @default 'md'\n     */\n    bsSize?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Defines the visual variant of the select.\n     *\n     * @default 'default'\n     */\n    variant?: 'default' | 'blank';\n\n    /**\n     * Option to disable the opening of the option list.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Sets the input's tabindex attribute.\n     *\n     * The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being\n     * sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for\n     * sequential focus navigation.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Defines whether the Bootstrap error classes shall be added to the toggle element.\n     *\n     * @default false\n     */\n    hasError?: boolean;\n\n    /**\n     * Defines whether the component should be filterable.\n     *\n     * @default false\n     */\n    useFilter?: boolean;\n\n    /**\n     * Set to show a clear button.\n     *\n     * @default false\n     */\n    useClear?: boolean;\n\n    /**\n     * Shows a loading spinner instead of the menu items if set to true.\n     *\n     * @default false\n     */\n    isLoading?: boolean;\n\n    /**\n     * Text that shall be shown when not match was found when filtering.\n     */\n    noItemMessage?: string | React.ReactNode;\n\n    /**\n     * Text or node to be rendered on the toggle select instead of the selected item label.\n     */\n    selectedOptionText?: string | React.ReactNode;\n\n    /**\n     * Set to show only the icon and not the label of selected item.\n     *\n     * @default false\n     */\n    showSelectedItemIcon?: boolean;\n\n    /**\n     * Set to show all item icons within the toggle element.\n     *\n     * Selected items are highlighted and unselected items are shown as inactive.\n     *\n     * @default false\n     */\n    showUnselectedItemIcons?: boolean;\n\n    /**\n     * Additional classes to be set to the dropdown.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional classes to be set to the select/input.\n     */\n    btnClassName?: string;\n\n    /**\n     * Additional classes to be set to the select wrapper.\n     */\n    className?: string;\n\n    /**\n     * Optional tracking attributes added to the toggle button.\n     */\n    trackingAttributes?: TrackingAttributes;\n};\n\nconst Select = <T extends SelectOption>(props: SelectProps<T>) => {\n    const {\n        name,\n        id = name,\n        label,\n        options = [],\n        value,\n        onChange = noop,\n        closeOnSelect = true,\n        placeholder,\n        isLoading = false,\n        dropup = false,\n        pullRight = false,\n        bsSize = 'md',\n        variant = 'default',\n        disabled = false,\n        tabIndex = 0,\n        hasError = false,\n        useFilter = false,\n        useClear = false,\n        noItemMessage,\n        selectedOptionText,\n        showSelectedItemIcon = false,\n        showUnselectedItemIcons = false,\n        dropdownClassName,\n        btnClassName,\n        className,\n        trackingAttributes,\n\n        inputAddon,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n    const [selectedItem, setSelectedItem] = useState<SelectOption | null>(null);\n    const [isFilterActive, setIsFilterActive] = useState(false);\n    const [filterValue, setFilterValue] = useState('');\n    const [filteredOptions, setFilteredOptions] = useState(options);\n    const [itemDOMValues, setItemDOMValues] = useState<OptionDOMValue[]>([]);\n    const [focusedItemIndex, setFocusedItemIndex] = useState(DEFAULT_FOCUSED_ITEM_INDEX);\n    const [keyboardUsed, setKeyboardUsed] = useState(false);\n\n    const refSelect = useRef<HTMLDivElement>(null);\n    const refToggle = useRef<HTMLButtonElement>(null);\n    const anchorName = useAnchorName('select');\n\n    const wrapperStyle = {\n        anchorName,\n    } as CSSProperties;\n\n    const ref = useClickOutside(() => closeMenu());\n    const mergedSelectRefs = useMergeRefs(refSelect, ref);\n\n    const updateSelectedItem = (selectOptions: SelectOption[], updatedValue: string[] | undefined) => {\n        if (updatedValue && !isEmpty(updatedValue)) {\n            setSelectedItem(selectOptions.find(item => item.id === updatedValue[0]) || null);\n        } else if (selectOptions) {\n            setSelectedItem(selectOptions.find(item => item.selected) || null);\n        }\n    };\n\n    useEffectOnce(() => {\n        updateSelectedItem(options, value);\n    });\n\n    const [previousOptions, setPreviousOptions] = useState(options);\n    if (!isEqual(options, previousOptions)) {\n        updateSelectedItem(options, value);\n        setFilteredOptions(options);\n        setPreviousOptions(options);\n    }\n\n    const [previousValue, setPreviousValue] = useState(value);\n    if (!isEqual(value, previousValue)) {\n        updateSelectedItem(options, value);\n        setPreviousValue(value);\n    }\n\n    const updateDOMValues = (itemDOMValuesToUpdated: OptionDOMValue[] = []) => {\n        // Skip updates when we have nothing new, or when filtering is active and we already hold a full snapshot.\n        if (!itemDOMValuesToUpdated.length) {\n            return;\n        }\n\n        const shouldKeepPreviousSnapshot = (isFilterActive || filterValue) && itemDOMValues.length > 0;\n        if (shouldKeepPreviousSnapshot) {\n            return;\n        }\n\n        setItemDOMValues(itemDOMValuesToUpdated);\n    };\n\n    const handleClearSelectedItem = () => {\n        setSelectedItem(null);\n        setIsFilterActive(false);\n        setFilterValue('');\n        setFilteredOptions(options);\n        setKeyboardUsed(false);\n        setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n\n        onChange(undefined);\n    };\n\n    const renderToggle = () => {\n        const toggleClasses = classNames(\n            'dropdown-toggle',\n            'form-control',\n            'text-left',\n            btnClassName && btnClassName,\n            bsSize === 'sm' && 'input-sm',\n            bsSize === 'lg' && 'input-lg',\n            disabled && 'disabled'\n        );\n\n        const toggleButton = (\n            <button\n                type='button'\n                id={id}\n                name={name}\n                className={toggleClasses}\n                {...trackingAttributes}\n                data-toggle='dropdown'\n                tabIndex={tabIndex}\n                aria-haspopup='true'\n                aria-expanded={isOpen}\n                onClick={onToggle}\n                ref={refToggle}\n            >\n                {useFilter && isOpen && (\n                    <SelectFilter\n                        isFilterActive={isFilterActive}\n                        filterValue={filterValue}\n                        onChange={handleFilterChange}\n                    />\n                )}\n                <SelectedOption\n                    label={label}\n                    placeholder={placeholder}\n                    selectedOptionText={selectedOptionText}\n                    selectedItem={selectedItem}\n                    options={options}\n                    showSelectedItemIcon={showSelectedItemIcon}\n                    showUnselectedItemIcons={showUnselectedItemIcons}\n                />\n                <span className='select-toggle-actions'>\n                    <ClearButton showClear={useClear} selectedItem={selectedItem} onClear={handleClearSelectedItem} />\n                    <span className='caret' />\n                </span>\n            </button>\n        );\n\n        if (!inputAddon && !errorMessage && !warningMessage) {\n            return toggleButton;\n        }\n\n        return (\n            <WithFeedbackAndAddon\n                bsSize={bsSize}\n                inputAddon={inputAddon}\n                errorMessage={errorMessage}\n                warningMessage={warningMessage}\n                messageWhiteSpace={messageWhiteSpace}\n            >\n                {toggleButton}\n            </WithFeedbackAndAddon>\n        );\n    };\n\n    const renderDropdownMenu = () => {\n        // Start from the last tracked focus; only default to the first item when opened via keyboard and nothing is selected.\n        let currentFocusedItemIndex = focusedItemIndex;\n\n        // Do not auto-highlight a selected item on open; let keyboard navigation start from \"no focus\".\n        // Only default to the first item when opened via keyboard and nothing was selected.\n        if (keyboardUsed && !selectedItem) {\n            currentFocusedItemIndex = 0;\n        }\n\n        return (\n            <BaseSelectDropdown\n                isOpen={isOpen}\n                isLoading={isLoading}\n                options={filteredOptions}\n                focusedItemIndex={currentFocusedItemIndex}\n                keyboardUsed={keyboardUsed}\n                updateDOMValues={updateDOMValues}\n                onSelect={onOptionChange}\n                onClose={closeMenu}\n                noItemMessage={noItemMessage}\n                pullRight={pullRight}\n                dropup={dropup}\n                dropdownClassName={dropdownClassName}\n                anchorName={anchorName}\n            />\n        );\n    };\n\n    const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        event.preventDefault();\n\n        const targetFilterValue = event.currentTarget.value;\n\n        // if cleared: reset to defaults and bail early\n        if (targetFilterValue === '') {\n            setIsFilterActive(false);\n            setFilterValue('');\n            setFilteredOptions(options);\n            setKeyboardUsed(false);\n            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n            return;\n        }\n\n        // otherwise: filter against the last known non-empty DOM snapshot\n        const currentFilteredOptions = filterOptions(itemDOMValues, targetFilterValue, options);\n\n        // highlight the first item of the search result if at least one item was found\n        const newFocusedItemIndex = currentFilteredOptions.length > 0 ? 0 : DEFAULT_FOCUSED_ITEM_INDEX;\n\n        setIsFilterActive(true);\n        setFilterValue(targetFilterValue);\n        setFilteredOptions(currentFilteredOptions);\n        setKeyboardUsed(true);\n        setFocusedItemIndex(newFocusedItemIndex);\n    };\n\n    const onOptionChange = (currentSelectedItem: T | undefined) => {\n        setSelectedItem(currentSelectedItem || null);\n        setIsFilterActive(false);\n        setFilterValue('');\n        setFilteredOptions(options);\n\n        onChange(currentSelectedItem);\n\n        if (closeOnSelect) {\n            closeMenu();\n        }\n    };\n\n    const onToggle = (event: React.MouseEvent<HTMLButtonElement>) => {\n        // Don't toggle when component is disabled or\n        // when filter is active, means entering some filter value\n        // in order to avoid closing menu on space but allow to use it for filtering\n        if (disabled || isFilterActive) {\n            return;\n        }\n\n        // using the enter key on the toggle button will trigger a synthetic click event as all buttons are of\n        // type submit by default in HTML. In order to differentiate between real click and a synthetic event\n        // caused by they keyboard, use the event details. A synthetic event is always 0.\n        const isKeyboardUsed = event.detail === 0;\n\n        setIsOpen(!isOpen);\n        setKeyboardUsed(isKeyboardUsed);\n    };\n\n    const closeMenu = () => {\n        if (isOpen) {\n            setIsOpen(false);\n            setIsFilterActive(false);\n            setFilterValue('');\n            setFilteredOptions(options);\n            setKeyboardUsed(false);\n            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n            refToggle.current?.focus();\n        }\n    };\n\n    const classes = classNames(\n        'select',\n        'dropdown',\n        // TODO(anchor-positioning): Move this placement state to the popover menu once the legacy wrapper dropup\n        // selectors have been removed.\n        dropup && 'dropup',\n        isOpen && 'open',\n        hasError && 'has-error',\n        variant === 'blank' && 'select-blank',\n        className && className\n    );\n\n    return (\n        <div {...remainingProps} className={classes} ref={mergedSelectRefs} style={wrapperStyle}>\n            {renderToggle()}\n            {renderDropdownMenu()}\n        </div>\n    );\n};\n\nexport default Select;\n"],"mappings":"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"}

package/components/selects/SelectFilter.js

@@ -1,13 +1,17 @@
-import { jsx as r } from "react/jsx-runtime";
-import a from "../../utils/classNames.js";
-const u = (e) => {
-  const { isFilterActive: s, filterValue: t, onChange: i } = e, l = a(
-    "select-filter-input",
-    (s || t) && "select-filter-input-active"
-  );
-  return /* @__PURE__ */ r("input", { type: "text", className: l, autoFocus: !0, onChange: i, value: t });
+import e from "../../utils/classNames.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/selects/SelectFilter.tsx
+var n = (n) => {
+	let { isFilterActive: r, filterValue: i, onChange: a } = n;
+	return /* @__PURE__ */ t("input", {
+		type: "text",
+		className: e("select-filter-input", (r || i) && "select-filter-input-active"),
+		autoFocus: !0,
+		onChange: a,
+		value: i
+	});
 };
-export {
-  u as default
-};
-//# sourceMappingURL=SelectFilter.js.map
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=SelectFilter.js.map

package/components/selects/SelectFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectFilter.js","sources":["../../../src/components/selects/SelectFilter.tsx"],"sourcesContent":["import type React from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type SelectFilterProps = {\n    isFilterActive: boolean;\n    filterValue: string;\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nconst SelectFilter = (props: SelectFilterProps) => {\n    const { isFilterActive, filterValue, onChange } = props;\n\n    const inputClasses = classNames(\n        'select-filter-input',\n        (isFilterActive || filterValue) && 'select-filter-input-active'\n    );\n\n    // biome-ignore lint/a11y/noAutofocus: autofocus is intentionally set to allow instant typing to filter\n    return <input type='text' className={inputClasses} autoFocus onChange={onChange} value={filterValue} />;\n};\n\nexport default SelectFilter;\n"],"names":["SelectFilter","props","isFilterActive","filterValue","onChange","inputClasses","classNames","jsx"],"mappings":";;AAUA,MAAMA,IAAe,CAACC,MAA6B;AAC/C,QAAM,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,EAAA,IAAaH,GAE5CI,IAAeC;AAAA,IACjB;AAAA,KACCJ,KAAkBC,MAAgB;AAAA,EAAA;AAIvC,SAAO,gBAAAI,EAAC,SAAA,EAAM,MAAK,QAAO,WAAWF,GAAc,WAAS,IAAC,UAAAD,GAAoB,OAAOD,EAAA,CAAa;AACzG;"}
+{"version":3,"file":"SelectFilter.js","names":[],"sources":["../../../src/components/selects/SelectFilter.tsx"],"sourcesContent":["import type React from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type SelectFilterProps = {\n    isFilterActive: boolean;\n    filterValue: string;\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nconst SelectFilter = (props: SelectFilterProps) => {\n    const { isFilterActive, filterValue, onChange } = props;\n\n    const inputClasses = classNames(\n        'select-filter-input',\n        (isFilterActive || filterValue) && 'select-filter-input-active'\n    );\n\n    // biome-ignore lint/a11y/noAutofocus: autofocus is intentionally set to allow instant typing to filter\n    return <input type='text' className={inputClasses} autoFocus onChange={onChange} value={filterValue} />;\n};\n\nexport default SelectFilter;\n"],"mappings":";;;AAUA,IAAM,KAAgB,MAA6B;CAC/C,IAAM,EAAE,mBAAgB,gBAAa,gBAAa;CAQlD,OAAO,kBAAC,SAAD;EAAO,MAAK;EAAO,WANL,EACjB,wBACC,KAAkB,MAAgB,4BAIF;EAAc,WAAA;EAAoB;EAAU,OAAO;CAAc,CAAA;AAC1G"}

package/components/selects/SelectedOption.d.ts

@@ -3,6 +3,7 @@ import { SelectOption } from './Select';
 export type SelectedOptionProps = {
     label: string | React.ReactNode;
     placeholder?: string | React.ReactNode;
+    selectedOptionText?: string | React.ReactNode;
     selectedItem: SelectOption | null;
     showSelectedItemIcon: boolean;
     showUnselectedItemIcons: boolean;

package/components/selects/SelectedOption.js

@@ -1,28 +1,37 @@
-import { jsxs as c, jsx as t, Fragment as a } from "react/jsx-runtime";
-const x = (r) => {
-  const { label: l, placeholder: o, selectedItem: d, options: i, showSelectedItemIcon: p, showUnselectedItemIcons: h } = r, m = (e, n) => {
-    const I = e.filter((s) => !s.header).map((s) => /* @__PURE__ */ t(
-      "span",
-      {
-        className: `${n && n.id === s.id ? "" : "inactiveIcon"}`,
-        children: s.icon
-      },
-      s.id
-    ));
-    return /* @__PURE__ */ t(a, { children: I });
-  };
-  return /* @__PURE__ */ c("span", { className: "selected-option-text", children: [
-    l && /* @__PURE__ */ c("span", { className: "selected-option-text-label", children: [
-      l,
-      ":"
-    ] }),
-    ((e, n) => h ? m(i, e) : e ? /* @__PURE__ */ c(a, { children: [
-      e.icon && /* @__PURE__ */ t("span", { children: e.icon }),
-      !p && e.label
-    ] }) : n ? /* @__PURE__ */ t("span", { className: "placeholder", children: n }) : " ")(d, o)
-  ] });
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/selects/SelectedOption.tsx
+var r = (r) => {
+	let { label: i, placeholder: a, selectedOptionText: o, selectedItem: s, options: c, showSelectedItemIcon: l, showUnselectedItemIcons: u } = r, d = (n, r) => /* @__PURE__ */ t(e, { children: n.filter((e) => !e.header).map((e) => /* @__PURE__ */ t("span", {
+		className: `selected-option-icon ${r && r.id === e.id ? "" : "inactiveIcon"}`,
+		children: e.icon
+	}, e.id)) });
+	return /* @__PURE__ */ n("span", {
+		className: "selected-option",
+		children: [!o && i && /* @__PURE__ */ n("span", {
+			className: "selected-option-label",
+			children: [i, ":"]
+		}), /* @__PURE__ */ t("span", {
+			className: "selected-option-content",
+			children: o ? /* @__PURE__ */ t("span", {
+				className: "selected-option-text",
+				children: o
+			}) : ((r, i) => u ? d(c, r) : r ? /* @__PURE__ */ n(e, { children: [r.icon && /* @__PURE__ */ t("span", {
+				className: "selected-option-icon",
+				children: r.icon
+			}), !l && /* @__PURE__ */ t("span", {
+				className: "selected-option-text",
+				children: r.label
+			})] }) : /* @__PURE__ */ t("span", {
+				className: "selected-option-text",
+				children: i ? /* @__PURE__ */ t("span", {
+					className: "placeholder",
+					children: i
+				}) : "\xA0"
+			}))(s, a)
+		})]
+	});
 };
-export {
-  x as default
-};
-//# sourceMappingURL=SelectedOption.js.map
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=SelectedOption.js.map

package/components/selects/SelectedOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectedOption.js","sources":["../../../src/components/selects/SelectedOption.tsx"],"sourcesContent":["import type React from 'react';\n\nimport type { SelectOption } from './Select';\n\nexport type SelectedOptionProps = {\n    label: string | React.ReactNode;\n    placeholder?: string | React.ReactNode;\n    selectedItem: SelectOption | null;\n    showSelectedItemIcon: boolean;\n    showUnselectedItemIcons: boolean;\n    options: SelectOption[];\n};\n\nconst SelectedOption = (props: SelectedOptionProps) => {\n    const { label, placeholder, selectedItem, options, showSelectedItemIcon, showUnselectedItemIcons } = props;\n\n    const renderUnselectedItemIcons = (optionsToRender: SelectOption[], currentSelectedItem: SelectOption | null) => {\n        const optionSpans = optionsToRender\n            .filter(option => !option.header)\n            .map(option => (\n                <span\n                    key={option.id}\n                    className={`${currentSelectedItem && currentSelectedItem.id === option.id ? '' : 'inactiveIcon'}`}\n                >\n                    {option.icon}\n                </span>\n            ));\n\n        return <>{optionSpans}</>;\n    };\n\n    const getSelectedItemLabel = (\n        item: SelectOption | null,\n        placeholderValue: string | React.ReactNode | undefined\n    ) => {\n        if (showUnselectedItemIcons) {\n            return renderUnselectedItemIcons(options, item);\n        }\n\n        if (!item) {\n            // render a placeholder or if there is none render a non-breaking space \"&nbsp;\"\n            return placeholderValue ? <span className='placeholder'>{placeholderValue}</span> : '\\u00a0';\n        }\n\n        return (\n            <>\n                {item.icon && <span>{item.icon}</span>}\n                {!showSelectedItemIcon && item.label}\n            </>\n        );\n    };\n\n    return (\n        <span className='selected-option-text'>\n            {label && <span className='selected-option-text-label'>{label}:</span>}\n            {getSelectedItemLabel(selectedItem, placeholder)}\n        </span>\n    );\n};\n\nexport default SelectedOption;\n"],"names":["SelectedOption","props","label","placeholder","selectedItem","options","showSelectedItemIcon","showUnselectedItemIcons","renderUnselectedItemIcons","optionsToRender","currentSelectedItem","optionSpans","option","jsx","jsxs","item","placeholderValue","Fragment"],"mappings":";AAaA,MAAMA,IAAiB,CAACC,MAA+B;AACnD,QAAM,EAAE,OAAAC,GAAO,aAAAC,GAAa,cAAAC,GAAc,SAAAC,GAAS,sBAAAC,GAAsB,yBAAAC,MAA4BN,GAE/FO,IAA4B,CAACC,GAAiCC,MAA6C;AAC7G,UAAMC,IAAcF,EACf,OAAO,CAAAG,MAAU,CAACA,EAAO,MAAM,EAC/B,IAAI,CAAAA,MACD,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,WAAW,GAAGH,KAAuBA,EAAoB,OAAOE,EAAO,KAAK,KAAK,cAAc;AAAA,QAE9F,UAAAA,EAAO;AAAA,MAAA;AAAA,MAHHA,EAAO;AAAA,IAAA,CAKnB;AAEL,kCAAU,UAAAD,EAAA,CAAY;AAAA,EAC1B;AAuBA,SACI,gBAAAG,EAAC,QAAA,EAAK,WAAU,wBACX,UAAA;AAAA,IAAAZ,KAAS,gBAAAY,EAAC,QAAA,EAAK,WAAU,8BAA8B,UAAA;AAAA,MAAAZ;AAAA,MAAM;AAAA,IAAA,GAAC;AAAA,KAvB1C,CACzBa,GACAC,MAEIT,IACOC,EAA0BH,GAASU,CAAI,IAG7CA,IAMD,gBAAAD,EAAAG,GAAA,EACK,UAAA;AAAA,MAAAF,EAAK,QAAQ,gBAAAF,EAAC,QAAA,EAAM,UAAAE,EAAK,MAAK;AAAA,MAC9B,CAACT,KAAwBS,EAAK;AAAA,IAAA,GACnC,IAPOC,IAAmB,gBAAAH,EAAC,QAAA,EAAK,WAAU,eAAe,aAAiB,IAAU,KAc9DT,GAAcD,CAAW;AAAA,EAAA,GACnD;AAER;"}
+{"version":3,"file":"SelectedOption.js","names":[],"sources":["../../../src/components/selects/SelectedOption.tsx"],"sourcesContent":["import type React from 'react';\n\nimport type { SelectOption } from './Select';\n\nexport type SelectedOptionProps = {\n    label: string | React.ReactNode;\n    placeholder?: string | React.ReactNode;\n    selectedOptionText?: string | React.ReactNode;\n    selectedItem: SelectOption | null;\n    showSelectedItemIcon: boolean;\n    showUnselectedItemIcons: boolean;\n    options: SelectOption[];\n};\n\nconst SelectedOption = (props: SelectedOptionProps) => {\n    const {\n        label,\n        placeholder,\n        selectedOptionText,\n        selectedItem,\n        options,\n        showSelectedItemIcon,\n        showUnselectedItemIcons,\n    } = props;\n\n    const renderUnselectedItemIcons = (optionsToRender: SelectOption[], currentSelectedItem: SelectOption | null) => {\n        const optionSpans = optionsToRender\n            .filter(option => !option.header)\n            .map(option => (\n                <span\n                    key={option.id}\n                    className={`selected-option-icon ${\n                        currentSelectedItem && currentSelectedItem.id === option.id ? '' : 'inactiveIcon'\n                    }`}\n                >\n                    {option.icon}\n                </span>\n            ));\n\n        return <>{optionSpans}</>;\n    };\n\n    const getSelectedItemLabel = (\n        item: SelectOption | null,\n        placeholderValue: string | React.ReactNode | undefined\n    ) => {\n        if (showUnselectedItemIcons) {\n            return renderUnselectedItemIcons(options, item);\n        }\n\n        if (!item) {\n            // render a placeholder or if there is none render a non-breaking space \"&nbsp;\"\n            return (\n                <span className='selected-option-text'>\n                    {placeholderValue ? <span className='placeholder'>{placeholderValue}</span> : '\\u00a0'}\n                </span>\n            );\n        }\n\n        return (\n            <>\n                {item.icon && <span className='selected-option-icon'>{item.icon}</span>}\n                {!showSelectedItemIcon && <span className='selected-option-text'>{item.label}</span>}\n            </>\n        );\n    };\n\n    return (\n        <span className='selected-option'>\n            {!selectedOptionText && label && <span className='selected-option-label'>{label}:</span>}\n            <span className='selected-option-content'>\n                {selectedOptionText ? (\n                    <span className='selected-option-text'>{selectedOptionText}</span>\n                ) : (\n                    getSelectedItemLabel(selectedItem, placeholder)\n                )}\n            </span>\n        </span>\n    );\n};\n\nexport default SelectedOption;\n"],"mappings":";;AAcA,IAAM,KAAkB,MAA+B;CACnD,IAAM,EACF,UACA,gBACA,uBACA,iBACA,YACA,yBACA,+BACA,GAEE,KAA6B,GAAiC,MAczD,kBAAA,GAAA,EAAA,UAba,EACf,QAAO,MAAU,CAAC,EAAO,MAAM,CAAC,CAChC,KAAI,MACD,kBAAC,QAAD;EAEI,WAAW,wBACP,KAAuB,EAAoB,OAAO,EAAO,KAAK,KAAK;YAGtE,EAAO;CACN,GANG,EAAO,EAMV,CAGJ,EAAc,CAAA;CA4B5B,OACI,kBAAC,QAAD;EAAM,WAAU;YAAhB,CACK,CAAC,KAAsB,KAAS,kBAAC,QAAD;GAAM,WAAU;aAAhB,CAAyC,GAAM,GAAO;MACvF,kBAAC,QAAD;GAAM,WAAU;aACX,IACG,kBAAC,QAAD;IAAM,WAAU;cAAwB;GAAyB,CAAA,MA7B7E,GACA,MAEI,IACO,EAA0B,GAAS,CAAI,IAG7C,IAUD,kBAAA,GAAA,EAAA,UAAA,CACK,EAAK,QAAQ,kBAAC,QAAD;IAAM,WAAU;cAAwB,EAAK;GAAW,CAAA,GACrE,CAAC,KAAwB,kBAAC,QAAD;IAAM,WAAU;cAAwB,EAAK;GAAY,CAAA,CACrF,EAAA,CAAA,IAVE,kBAAC,QAAD;IAAM,WAAU;cACX,IAAmB,kBAAC,QAAD;KAAM,WAAU;eAAe;IAAuB,CAAA,IAAI;GAC5E,CAAA,EAmBF,CAAqB,GAAc,CAAW;EAEhD,CAAA,CACJ;;AAEd"}

package/components/selects/WithFeedbackAndAddon.js

@@ -1,29 +1,30 @@
-import { jsx as s, jsxs as r, Fragment as t } from "react/jsx-runtime";
-import c from "../../utils/classNames.js";
-const f = (i) => {
-  const { bsSize: n = "md", inputAddon: o, errorMessage: e, warningMessage: a, messageWhiteSpace: l = "normal", children: p } = i, d = c(
-    "form-group margin-bottom-0",
-    (e || a) && "has-feedback",
-    e && "has-error",
-    a && "has-warning"
-  ), m = c(
-    "input-group",
-    n === "sm" && "input-group-sm",
-    n === "lg" && "input-group-lg"
-  );
-  return /* @__PURE__ */ s("div", { className: d, children: /* @__PURE__ */ r("div", { className: m, children: [
-    o && /* @__PURE__ */ s("div", { className: "input-group-addon", children: /* @__PURE__ */ s("span", { className: o }) }),
-    /* @__PURE__ */ r("div", { className: "form-control-feedback-wrapper", children: [
-      p,
-      (e || a) && /* @__PURE__ */ r(t, { children: [
-        e && /* @__PURE__ */ s("span", { className: "form-control-feedback rioglyph rioglyph-error-sign" }),
-        a && /* @__PURE__ */ s("span", { className: "form-control-feedback rioglyph rioglyph-warning-sign" }),
-        /* @__PURE__ */ s("span", { className: `help-block white-space-${l}`, children: /* @__PURE__ */ s("span", { children: e || a }) })
-      ] })
-    ] })
-  ] }) });
+import e from "../../utils/classNames.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/selects/WithFeedbackAndAddon.tsx
+var i = (i) => {
+	let { bsSize: a = "md", inputAddon: o, errorMessage: s, warningMessage: c, messageWhiteSpace: l = "normal", children: u } = i;
+	return /* @__PURE__ */ n("div", {
+		className: e("form-group margin-bottom-0", !!(s || c) && "has-feedback", !!s && "has-error", !!c && "has-warning"),
+		children: /* @__PURE__ */ r("div", {
+			className: e("input-group", a === "sm" && "input-group-sm", a === "lg" && "input-group-lg"),
+			children: [o && /* @__PURE__ */ n("div", {
+				className: "input-group-addon",
+				children: /* @__PURE__ */ n("span", { className: o })
+			}), /* @__PURE__ */ r("div", {
+				className: "form-control-feedback-wrapper",
+				children: [u, (s || c) && /* @__PURE__ */ r(t, { children: [
+					s && /* @__PURE__ */ n("span", { className: "form-control-feedback uikit-icon icon-error-sign" }),
+					c && /* @__PURE__ */ n("span", { className: "form-control-feedback uikit-icon icon-warning-sign" }),
+					/* @__PURE__ */ n("span", {
+						className: `help-block white-space-${l}`,
+						children: /* @__PURE__ */ n("span", { children: s || c })
+					})
+				] })]
+			})]
+		})
+	});
 };
-export {
-  f as default
-};
-//# sourceMappingURL=WithFeedbackAndAddon.js.map
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=WithFeedbackAndAddon.js.map

package/components/selects/WithFeedbackAndAddon.js.map

@@ -1 +1 @@
-{"version":3,"file":"WithFeedbackAndAddon.js","sources":["../../../src/components/selects/WithFeedbackAndAddon.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type WithFeedbackAndAddonProps = {\n    /**\n     * Defines the size of the select to be rendered.\n     *\n     * @default 'md'\n     */\n    bsSize?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Option to add an icon as a leading input addon to the select or multiselect component.\n     */\n    inputAddon?: string;\n\n    /**\n     * Input error message.\n     */\n    errorMessage?: string | React.ReactNode;\n\n    /**\n     * Input warning message.\n     */\n    warningMessage?: string | React.ReactNode;\n\n    /**\n     * Optional warning message white-space setting.\n     *\n     * @default 'normal'\n     */\n    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';\n};\n\nconst WithFeedbackAndAddon = (props: PropsWithChildren<WithFeedbackAndAddonProps>) => {\n    const { bsSize = 'md', inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', children } = props;\n\n    const formGroupClassName = classNames(\n        'form-group margin-bottom-0',\n        (errorMessage || warningMessage) && 'has-feedback',\n        errorMessage && 'has-error',\n        warningMessage && 'has-warning'\n    );\n\n    const inputGroupClassNames = classNames(\n        'input-group',\n        bsSize === 'sm' && 'input-group-sm',\n        bsSize === 'lg' && 'input-group-lg'\n    );\n\n    const hasFeedbackMessage = errorMessage || warningMessage;\n\n    return (\n        <div className={formGroupClassName}>\n            <div className={inputGroupClassNames}>\n                {inputAddon && (\n                    <div className='input-group-addon'>\n                        <span className={inputAddon} />\n                    </div>\n                )}\n                <div className='form-control-feedback-wrapper'>\n                    {children}\n                    {hasFeedbackMessage && (\n                        <>\n                            {errorMessage && <span className='form-control-feedback rioglyph rioglyph-error-sign' />}\n                            {warningMessage && (\n                                <span className='form-control-feedback rioglyph rioglyph-warning-sign' />\n                            )}\n                            <span className={`help-block white-space-${messageWhiteSpace}`}>\n                                <span>{errorMessage || warningMessage}</span>\n                            </span>\n                        </>\n                    )}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default WithFeedbackAndAddon;\n"],"names":["WithFeedbackAndAddon","props","bsSize","inputAddon","errorMessage","warningMessage","messageWhiteSpace","children","formGroupClassName","classNames","inputGroupClassNames","jsxs","jsx","Fragment"],"mappings":";;AAoCA,MAAMA,IAAuB,CAACC,MAAwD;AAClF,QAAM,EAAE,QAAAC,IAAS,MAAM,YAAAC,GAAY,cAAAC,GAAc,gBAAAC,GAAgB,mBAAAC,IAAoB,UAAU,UAAAC,EAAA,IAAaN,GAEtGO,IAAqBC;AAAA,IACvB;AAAA,KACCL,KAAgBC,MAAmB;AAAA,IACpCD,KAAgB;AAAA,IAChBC,KAAkB;AAAA,EAAA,GAGhBK,IAAuBD;AAAA,IACzB;AAAA,IACAP,MAAW,QAAQ;AAAA,IACnBA,MAAW,QAAQ;AAAA,EAAA;AAKvB,2BACK,OAAA,EAAI,WAAWM,GACZ,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWD,GACX,UAAA;AAAA,IAAAP,KACG,gBAAAS,EAAC,SAAI,WAAU,qBACX,4BAAC,QAAA,EAAK,WAAWT,GAAY,EAAA,CACjC;AAAA,IAEJ,gBAAAQ,EAAC,OAAA,EAAI,WAAU,iCACV,UAAA;AAAA,MAAAJ;AAAA,OAXUH,KAAgBC,MAavB,gBAAAM,EAAAE,GAAA,EACK,UAAA;AAAA,QAAAT,KAAgB,gBAAAQ,EAAC,QAAA,EAAK,WAAU,qDAAA,CAAqD;AAAA,QACrFP,KACG,gBAAAO,EAAC,QAAA,EAAK,WAAU,uDAAA,CAAuD;AAAA,QAE3E,gBAAAA,EAAC,QAAA,EAAK,WAAW,0BAA0BN,CAAiB,IACxD,UAAA,gBAAAM,EAAC,QAAA,EAAM,UAAAR,KAAgBC,EAAA,CAAe,EAAA,CAC1C;AAAA,MAAA,EAAA,CACJ;AAAA,IAAA,EAAA,CAER;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAER;"}
+{"version":3,"file":"WithFeedbackAndAddon.js","names":[],"sources":["../../../src/components/selects/WithFeedbackAndAddon.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type WithFeedbackAndAddonProps = {\n    /**\n     * Defines the size of the select to be rendered.\n     *\n     * @default 'md'\n     */\n    bsSize?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Option to add an icon as a leading input addon to the select or multiselect component.\n     */\n    inputAddon?: string;\n\n    /**\n     * Input error message.\n     */\n    errorMessage?: string | React.ReactNode;\n\n    /**\n     * Input warning message.\n     */\n    warningMessage?: string | React.ReactNode;\n\n    /**\n     * Optional warning message white-space setting.\n     *\n     * @default 'normal'\n     */\n    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';\n};\n\nconst WithFeedbackAndAddon = (props: PropsWithChildren<WithFeedbackAndAddonProps>) => {\n    const { bsSize = 'md', inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', children } = props;\n\n    const formGroupClassName = classNames(\n        'form-group margin-bottom-0',\n        Boolean(errorMessage || warningMessage) && 'has-feedback',\n        Boolean(errorMessage) && 'has-error',\n        Boolean(warningMessage) && 'has-warning'\n    );\n\n    const inputGroupClassNames = classNames(\n        'input-group',\n        bsSize === 'sm' && 'input-group-sm',\n        bsSize === 'lg' && 'input-group-lg'\n    );\n\n    const hasFeedbackMessage = errorMessage || warningMessage;\n\n    return (\n        <div className={formGroupClassName}>\n            <div className={inputGroupClassNames}>\n                {inputAddon && (\n                    <div className='input-group-addon'>\n                        <span className={inputAddon} />\n                    </div>\n                )}\n                <div className='form-control-feedback-wrapper'>\n                    {children}\n                    {hasFeedbackMessage && (\n                        <>\n                            {errorMessage && <span className='form-control-feedback uikit-icon icon-error-sign' />}\n                            {warningMessage && <span className='form-control-feedback uikit-icon icon-warning-sign' />}\n                            <span className={`help-block white-space-${messageWhiteSpace}`}>\n                                <span>{errorMessage || warningMessage}</span>\n                            </span>\n                        </>\n                    )}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default WithFeedbackAndAddon;\n"],"mappings":";;;AAoCA,IAAM,KAAwB,MAAwD;CAClF,IAAM,EAAE,YAAS,MAAM,eAAY,iBAAc,mBAAgB,uBAAoB,UAAU,gBAAa;CAiB5G,OACI,kBAAC,OAAD;EAAK,WAhBkB,EACvB,8BACA,GAAQ,KAAgB,MAAmB,gBAC3C,EAAQ,KAAiB,aACzB,EAAQ,KAAmB,aAYX;YACZ,kBAAC,OAAD;GAAK,WAVgB,EACzB,eACA,MAAW,QAAQ,kBACnB,MAAW,QAAQ,gBAOC;aAAhB,CACK,KACG,kBAAC,OAAD;IAAK,WAAU;cACX,kBAAC,QAAD,EAAM,WAAW,EAAa,CAAA;GAC7B,CAAA,GAET,kBAAC,OAAD;IAAK,WAAU;cAAf,CACK,IAXU,KAAgB,MAavB,kBAAA,GAAA,EAAA,UAAA;KACK,KAAgB,kBAAC,QAAD,EAAM,WAAU,mDAAoD,CAAA;KACpF,KAAkB,kBAAC,QAAD,EAAM,WAAU,qDAAsD,CAAA;KACzF,kBAAC,QAAD;MAAM,WAAW,0BAA0B;gBACvC,kBAAC,QAAD,EAAA,UAAO,KAAgB,EAAqB,CAAA;KAC1C,CAAA;IACR,EAAA,CAAA,CAEL;KACJ;;CACJ,CAAA;AAEb"}