@rio-cloud/rio-uikit 2.1.0 → 2.2.1

package/components/selects/ClearButton.js

@@ -1,10 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
-import a from "classnames";
-import { isNil as l } from "es-toolkit/predicate";
+import { isNil as a } from "es-toolkit/predicate";
+import l from "../../utils/classNames.js";
 const p = (o) => {
-  const { showClear: s, selectedItem: t, onClear: r } = o, n = a(
+  const { showClear: s, selectedItem: t, onClear: r } = o, n = l(
     "clearButton",
-    (!s || l(t)) && "hide pointer-events-none"
+    (!s || a(t)) && "hide pointer-events-none"
   );
   return /* @__PURE__ */ e("span", { className: n, onClick: r, children: /* @__PURE__ */ e("span", { className: "clearButtonIcon rioglyph rioglyph-remove-sign" }) });
 };

package/components/selects/ClearButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClearButton.js","sources":["../../../src/components/selects/ClearButton.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport type { SelectOption } from './Select';\n\nexport type ClearButtonProps = {\n    showClear: boolean;\n    selectedItem: SelectOption | null;\n    onClear: () => void;\n};\n\nconst ClearButton = (props: ClearButtonProps) => {\n    const { showClear, selectedItem, onClear } = props;\n\n    const clearButtonClassNames = classNames(\n        'clearButton',\n        (!showClear || isNil(selectedItem)) && 'hide pointer-events-none'\n    );\n\n    return (\n        <span className={clearButtonClassNames} onClick={onClear}>\n            <span className='clearButtonIcon rioglyph rioglyph-remove-sign' />\n        </span>\n    );\n};\n\nexport default ClearButton;\n"],"names":["ClearButton","props","showClear","selectedItem","onClear","clearButtonClassNames","classNames","isNil","jsx"],"mappings":";;;AAWA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,WAAAC,GAAW,cAAAC,GAAc,SAAAC,EAAA,IAAYH,GAEvCI,IAAwBC;AAAA,IAC1B;AAAA,KACC,CAACJ,KAAaK,EAAMJ,CAAY,MAAM;AAAA,EAAA;AAG3C,SACI,gBAAAK,EAAC,QAAA,EAAK,WAAWH,GAAuB,SAASD,GAC7C,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAU,gDAAA,CAAgD,EAAA,CACpE;AAER;"}
+{"version":3,"file":"ClearButton.js","sources":["../../../src/components/selects/ClearButton.tsx"],"sourcesContent":["import { isNil } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport type { SelectOption } from './Select';\n\nexport type ClearButtonProps = {\n    showClear: boolean;\n    selectedItem: SelectOption | null;\n    onClear: () => void;\n};\n\nconst ClearButton = (props: ClearButtonProps) => {\n    const { showClear, selectedItem, onClear } = props;\n\n    const clearButtonClassNames = classNames(\n        'clearButton',\n        (!showClear || isNil(selectedItem)) && 'hide pointer-events-none'\n    );\n\n    return (\n        <span className={clearButtonClassNames} onClick={onClear}>\n            <span className='clearButtonIcon rioglyph rioglyph-remove-sign' />\n        </span>\n    );\n};\n\nexport default ClearButton;\n"],"names":["ClearButton","props","showClear","selectedItem","onClear","clearButtonClassNames","classNames","isNil","jsx"],"mappings":";;;AAWA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,WAAAC,GAAW,cAAAC,GAAc,SAAAC,EAAA,IAAYH,GAEvCI,IAAwBC;AAAA,IAC1B;AAAA,KACC,CAACJ,KAAaK,EAAMJ,CAAY,MAAM;AAAA,EAAA;AAG3C,SACI,gBAAAK,EAAC,QAAA,EAAK,WAAWH,GAAuB,SAASD,GAC7C,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAU,gDAAA,CAAgD,EAAA,CACpE;AAER;"}

package/components/selects/Multiselect.js

@@ -1,9 +1,9 @@
 import { jsxs as C, jsx as c, Fragment as xe } from "react/jsx-runtime";
 import { useState as n, useRef as x } from "react";
-import L from "classnames";
-import { isEqual as q } from "es-toolkit/predicate";
+import { isEqual as L } from "es-toolkit/predicate";
 import { isEmpty as ve } from "es-toolkit/compat";
 import { noop as Ae } from "es-toolkit/function";
+import q from "../../utils/classNames.js";
 import Te, { filterOptions as ye } from "./BaseSelectDropdown.js";
 import Ne from "./MultiselectToggleCounter.js";
 import Re from "./MultiselectToggleSelection.js";
@@ -55,9 +55,9 @@ const z = -1, Ze = (X) => {
   }, W = x(!0);
   W.current && (O(o, a), W.current = !1);
   const [pe, me] = n(a);
-  q(a, pe) || (O(o, a), me(a));
+  L(a, pe) || (O(o, a), me(a));
   const [ge, he] = n(o);
-  q(o, ge) || (O(o, a), f(o), he(o));
+  L(o, ge) || (O(o, a), f(o), he(o));
   const Ie = (e = []) => {
     ae(e);
   }, D = () => /* @__PURE__ */ c(
@@ -89,7 +89,7 @@ const z = -1, Ze = (X) => {
       children: d && D()
     }
   ), Fe = () => {
-    const e = L(
+    const e = q(
       "dropdown-toggle",
       "form-control",
       "text-left",
@@ -188,7 +188,7 @@ const z = -1, Ze = (X) => {
     I((s) => !s), S(t);
   }, j = () => {
     r && (I(!1), w(!1), F(""), f(o), K(z), S(!1), B?.current?.focus());
-  }, Ce = L(
+  }, Ce = q(
     "select",
     "multiselect",
     "dropdown",

package/components/selects/Multiselect.js.map

@@ -1 +1 @@
-{"version":3,"file":"Multiselect.js","sources":["../../../src/components/selects/Multiselect.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\nimport BaseSelectDropdown, { filterOptions, type OptionDOMValue, type SelectOption } from './BaseSelectDropdown';\nimport MultiselectToggleCounter from './MultiselectToggleCounter';\nimport MultiselectToggleSelection from './MultiselectToggleSelection';\nimport MultiselectToggleFilter from './MultiselectToggleFilter';\nimport MultiselectTogglePlaceholder from './MultiselectTogglePlaceholder';\nimport useClickOutside from '../../useClickOutside';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport WithFeedbackAndAddon, { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';\n\nconst DEFAULT_FOCUSED_ITEM_INDEX = -1;\n\nexport type MultiselectCounterMessage = {\n    /**\n     * Text that will be used when a single item is selected.\n     */\n    one: string | React.ReactNode;\n\n    /**\n     * Text that will be used when multiple item are selected.\n     */\n    many: string | React.ReactNode;\n};\n\nexport type MultiselectOption = SelectOption & {};\n\nexport type MultiselectProps<T extends MultiselectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {\n    /**\n     * Passed through as HTML attribute to the toggle button.\n     */\n    name?: string;\n\n    /**\n     * Passed 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     * 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 selectedItemIds Array containing all the IDs that have been selected.\n     *\n     * @default () => {}\n     */\n    onChange?: (selectedItemIds: string[]) => 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     * Shows a loading spinner instead of the menu items if set to true.\n     * @default false\n     */\n    isLoading?: 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     * 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 selected items wrap around within the dropdown toggle.\n     *\n     * @default false\n     */\n    multiline?: boolean;\n\n    /**\n     * Defines whether the component should be filterable.\n     *\n     * @default false\n     */\n    useFilter?: 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     * Object that will render the number of selected items instead of individual items.\n     *\n     * Using this prop will disable the filter functionality.\n     */\n    counterMessage?: MultiselectCounterMessage;\n\n    /**\n     * Optional render function that is used to render the message how many items have been selected.\n     *\n     * Using this prop will disable the filter functionality.\n     *\n     * @param selectedAmount The total amount of selected items.\n     */\n    renderCounterMessage?: (selectedAmount: number) => 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\nconst Multiselect = (props: MultiselectProps<MultiselectOption>) => {\n    const {\n        name,\n        id = name,\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        disabled = false,\n        tabIndex = 0,\n        hasError = false,\n        useFilter = false,\n        multiline = false,\n        noItemMessage,\n        counterMessage,\n        renderCounterMessage,\n        showSelectedItemIcon = false,\n        showUnselectedItemIcons = false,\n        className,\n        inputAddon,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n        btnClassName,\n        dropdownClassName,\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n    const [selectedItemIds, setSelectedItemIds] = useState<string[]>(value || []);\n    const [isFilterActive, setIsFilterActive] = useState(false);\n    const [filterValue, setFilterValue] = useState('');\n    const [filteredOptions, setFilteredOptions] = useState<MultiselectOption[]>(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 refToggle = useRef<HTMLButtonElement>(null);\n    const refMultiSelectWrapper = useRef<HTMLDivElement>(null);\n\n    const ref = useClickOutside(event => {\n        // Check if the click is truly outside the multiselect wrapper\n        if (refMultiSelectWrapper.current && !refMultiSelectWrapper.current.contains(event.target as Node)) {\n            closeMenu();\n        }\n    });\n\n    const mergedSelectRefs = useMergeRefs(refMultiSelectWrapper, ref);\n\n    const updateSelectedItems = (optionsToCheck: MultiselectOption[], selectedItem: string[] | undefined) => {\n        if (selectedItem) {\n            setSelectedItemIds(selectedItem);\n        } else if (optionsToCheck) {\n            const filteredBySelection = optionsToCheck.filter(item => item.selected);\n            setSelectedItemIds(filteredBySelection.map(option => option.id));\n        }\n    };\n\n    // Update the selectedItems on first render.\n    // Note, we use a ref instead of an effect as the effect is triggered too late\n    const firstRenderRef = useRef<boolean>(true);\n    if (firstRenderRef.current) {\n        updateSelectedItems(options, value);\n        firstRenderRef.current = false;\n    }\n\n    // Update selection based on changed value prop\n    const [previousValue, setPreviousValue] = useState(value);\n    if (!isEqual(value, previousValue)) {\n        updateSelectedItems(options, value);\n        setPreviousValue(value);\n    }\n\n    // Update options when they have changed from the outside\n    const [previousOptions, setPreviousOptions] = useState(options);\n    if (!isEqual(options, previousOptions)) {\n        updateSelectedItems(options, value);\n        setFilteredOptions(options);\n        setPreviousOptions(options);\n    }\n\n    const updateDOMValues = (updatedItemDOMValues: OptionDOMValue[] = []) => {\n        setItemDOMValues(updatedItemDOMValues);\n    };\n\n    const renderFilter = () => (\n        <MultiselectToggleFilter\n            isActive={isFilterActive || !!filterValue}\n            selectedItemIds={selectedItemIds}\n            filterValue={filterValue}\n            onFilterChange={handleFilterChange}\n        />\n    );\n\n    const renderSelection = () => {\n        if (counterMessage || renderCounterMessage) {\n            return (\n                <MultiselectToggleCounter\n                    selectedAmount={selectedItemIds.length}\n                    counterMessage={counterMessage}\n                    customRenderer={renderCounterMessage}\n                />\n            );\n        }\n\n        return (\n            <MultiselectToggleSelection\n                options={options}\n                selectedItemIds={selectedItemIds}\n                showSelectedItemIcon={showSelectedItemIcon}\n                showUnselectedItemIcons={showUnselectedItemIcons}\n                onRemoveItem={handleRemoveSelectedItem}\n                multiline={multiline}\n                hasInputAddon={!!inputAddon}\n                hasFilter={useFilter}\n            >\n                {multiline && renderFilter()}\n            </MultiselectToggleSelection>\n        );\n    };\n\n    const renderToggle = () => {\n        const wrapperClassNames = classNames(\n            'dropdown-toggle',\n            'form-control',\n            'text-left',\n            btnClassName && btnClassName,\n            bsSize === 'sm' && 'input-sm',\n            bsSize === 'lg' && 'input-lg',\n            multiline && 'height-auto',\n            disabled && 'disabled'\n        );\n\n        const showPlaceholder = isEmpty(selectedItemIds) && !showUnselectedItemIcons;\n        const showFilter = useFilter && isOpen && !counterMessage && !renderCounterMessage;\n\n        const toggleButton = (\n            <button\n                type='button'\n                id={id}\n                name={name}\n                className={wrapperClassNames}\n                data-toggle='dropdown'\n                tabIndex={tabIndex}\n                aria-haspopup='true'\n                aria-expanded={isOpen}\n                onClick={onToggle}\n                onKeyDown={handleToggleKeyDown}\n                ref={refToggle}\n            >\n                {showPlaceholder ? (\n                    <>\n                        <MultiselectTogglePlaceholder placeholder={placeholder} />\n                        {showFilter && renderFilter()}\n                    </>\n                ) : (\n                    renderSelection()\n                )}\n                {showFilter && !multiline && renderFilter()}\n                <span className='caret' />\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        const nonSelectedOptions = filteredOptions.map(option => {\n            option.selected = selectedItemIds.indexOf(option.id) !== -1;\n            return option;\n        });\n\n        return (\n            <BaseSelectDropdown\n                isOpen={isOpen}\n                isLoading={isLoading}\n                options={nonSelectedOptions}\n                focusedItemIndex={focusedItemIndex}\n                keyboardUsed={keyboardUsed}\n                updateDOMValues={updateDOMValues}\n                onSelect={onOptionChange}\n                onClose={closeMenu}\n                noItemMessage={noItemMessage}\n                pullRight={pullRight}\n                useActiveClass\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        const optionsFiltered = filterOptions(itemDOMValues, targetFilterValue, options);\n\n        if (!isOpen) {\n            // Ensure dropdown stays open when filtering\n            setIsOpen(true);\n        }\n\n        const newFocusedItemIndex = optionsFiltered.length > 0 ? 0 : -1;\n\n        setIsFilterActive(true);\n        setFilterValue(targetFilterValue);\n        setFilteredOptions(optionsFiltered);\n\n        if (optionsFiltered.length > 0) {\n            // Only set keyboard used if there are filtered options\n            setKeyboardUsed(true);\n        }\n\n        setFocusedItemIndex(newFocusedItemIndex);\n    };\n\n    const onOptionChange = (currentSelectedItem: MultiselectOption | undefined) => {\n        // prevent selecting disabled Items via keyboard\n        if (currentSelectedItem?.disabled) {\n            return;\n        }\n\n        const updatedSelectedItems = currentSelectedItem ? updateSelection(currentSelectedItem.id) : selectedItemIds;\n\n        // Reset everything after an option was selected. Remove the filter again.\n        setSelectedItemIds(updatedSelectedItems);\n        setIsFilterActive(false);\n        setFilterValue('');\n        setFilteredOptions(options);\n\n        onChange(updatedSelectedItems);\n    };\n\n    const updateSelection = (selectedItemId: string) => {\n        const newSelectedItems = [...selectedItemIds];\n        const itemIndex = selectedItemIds.indexOf(selectedItemId);\n\n        if (itemIndex !== -1) {\n            newSelectedItems.splice(itemIndex, 1);\n        } else {\n            newSelectedItems.push(selectedItemId);\n        }\n\n        return newSelectedItems;\n    };\n\n    const handleRemoveSelectedItem = (event: React.MouseEvent<HTMLSpanElement>, itemId: string) => {\n        event.stopPropagation();\n\n        const newSelectedItems = updateSelection(itemId);\n        setSelectedItemIds(newSelectedItems);\n\n        onChange(newSelectedItems);\n    };\n\n    const handleToggleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        switch (event.key) {\n            case 'Space':\n                if (!isOpen) {\n                    // open on space\n                    event.preventDefault();\n                    onToggle(event);\n                }\n                break;\n            case 'Enter':\n                if (!isOpen) {\n                    // open on enter\n                    event.preventDefault();\n                    onToggle(event);\n                }\n                break;\n            default:\n                break;\n        }\n    };\n\n    const onToggle = (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n        // Don't toggle when component is disabled or an item in the toggle was clicked in order to remove from\n        // selection neither close 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(prevValue => !prevValue);\n        setKeyboardUsed(isKeyboardUsed);\n    };\n\n    const closeMenu = () => {\n        if (isOpen) {\n            setIsOpen(false);\n            setIsFilterActive(false);\n            setFilterValue('');\n            setFilteredOptions(options);\n            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n            setKeyboardUsed(false);\n\n            refToggle?.current?.focus();\n        }\n    };\n\n    const wrapperClasses = classNames(\n        'select',\n        'multiselect',\n        'dropdown',\n        isOpen && 'open',\n        hasError && 'has-error',\n        className && className\n    );\n\n    return (\n        <div {...remainingProps} className={wrapperClasses} ref={mergedSelectRefs}>\n            {renderToggle()}\n            {renderDropdownMenu()}\n        </div>\n    );\n};\n\nexport default Multiselect;\n"],"names":["DEFAULT_FOCUSED_ITEM_INDEX","Multiselect","props","name","id","options","value","onChange","noop","placeholder","isLoading","dropup","pullRight","autoDropDirection","bsSize","disabled","tabIndex","hasError","useFilter","multiline","noItemMessage","counterMessage","renderCounterMessage","showSelectedItemIcon","showUnselectedItemIcons","className","inputAddon","errorMessage","warningMessage","messageWhiteSpace","btnClassName","dropdownClassName","remainingProps","isOpen","setIsOpen","useState","selectedItemIds","setSelectedItemIds","isFilterActive","setIsFilterActive","filterValue","setFilterValue","filteredOptions","setFilteredOptions","itemDOMValues","setItemDOMValues","focusedItemIndex","setFocusedItemIndex","keyboardUsed","setKeyboardUsed","refToggle","useRef","refMultiSelectWrapper","ref","useClickOutside","event","closeMenu","mergedSelectRefs","useMergeRefs","updateSelectedItems","optionsToCheck","selectedItem","filteredBySelection","item","option","firstRenderRef","previousValue","setPreviousValue","isEqual","previousOptions","setPreviousOptions","updateDOMValues","updatedItemDOMValues","renderFilter","jsx","MultiselectToggleFilter","handleFilterChange","renderSelection","MultiselectToggleCounter","MultiselectToggleSelection","handleRemoveSelectedItem","renderToggle","wrapperClassNames","classNames","showPlaceholder","isEmpty","showFilter","toggleButton","jsxs","onToggle","handleToggleKeyDown","Fragment","MultiselectTogglePlaceholder","WithFeedbackAndAddon","renderDropdownMenu","nonSelectedOptions","BaseSelectDropdown","onOptionChange","targetFilterValue","optionsFiltered","filterOptions","newFocusedItemIndex","currentSelectedItem","updatedSelectedItems","updateSelection","selectedItemId","newSelectedItems","itemIndex","itemId","isKeyboardUsed","prevValue","wrapperClasses"],"mappings":"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"}
+{"version":3,"file":"Multiselect.js","sources":["../../../src/components/selects/Multiselect.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport BaseSelectDropdown, { filterOptions, type OptionDOMValue, type SelectOption } from './BaseSelectDropdown';\nimport MultiselectToggleCounter from './MultiselectToggleCounter';\nimport MultiselectToggleSelection from './MultiselectToggleSelection';\nimport MultiselectToggleFilter from './MultiselectToggleFilter';\nimport MultiselectTogglePlaceholder from './MultiselectTogglePlaceholder';\nimport useClickOutside from '../../useClickOutside';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport WithFeedbackAndAddon, { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';\n\nconst DEFAULT_FOCUSED_ITEM_INDEX = -1;\n\nexport type MultiselectCounterMessage = {\n    /**\n     * Text that will be used when a single item is selected.\n     */\n    one: string | React.ReactNode;\n\n    /**\n     * Text that will be used when multiple item are selected.\n     */\n    many: string | React.ReactNode;\n};\n\nexport type MultiselectOption = SelectOption & {};\n\nexport type MultiselectProps<T extends MultiselectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {\n    /**\n     * Passed through as HTML attribute to the toggle button.\n     */\n    name?: string;\n\n    /**\n     * Passed 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     * 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 selectedItemIds Array containing all the IDs that have been selected.\n     *\n     * @default () => {}\n     */\n    onChange?: (selectedItemIds: string[]) => 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     * Shows a loading spinner instead of the menu items if set to true.\n     * @default false\n     */\n    isLoading?: 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     * 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 selected items wrap around within the dropdown toggle.\n     *\n     * @default false\n     */\n    multiline?: boolean;\n\n    /**\n     * Defines whether the component should be filterable.\n     *\n     * @default false\n     */\n    useFilter?: 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     * Object that will render the number of selected items instead of individual items.\n     *\n     * Using this prop will disable the filter functionality.\n     */\n    counterMessage?: MultiselectCounterMessage;\n\n    /**\n     * Optional render function that is used to render the message how many items have been selected.\n     *\n     * Using this prop will disable the filter functionality.\n     *\n     * @param selectedAmount The total amount of selected items.\n     */\n    renderCounterMessage?: (selectedAmount: number) => 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\nconst Multiselect = (props: MultiselectProps<MultiselectOption>) => {\n    const {\n        name,\n        id = name,\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        disabled = false,\n        tabIndex = 0,\n        hasError = false,\n        useFilter = false,\n        multiline = false,\n        noItemMessage,\n        counterMessage,\n        renderCounterMessage,\n        showSelectedItemIcon = false,\n        showUnselectedItemIcons = false,\n        className,\n        inputAddon,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n        btnClassName,\n        dropdownClassName,\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n    const [selectedItemIds, setSelectedItemIds] = useState<string[]>(value || []);\n    const [isFilterActive, setIsFilterActive] = useState(false);\n    const [filterValue, setFilterValue] = useState('');\n    const [filteredOptions, setFilteredOptions] = useState<MultiselectOption[]>(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 refToggle = useRef<HTMLButtonElement>(null);\n    const refMultiSelectWrapper = useRef<HTMLDivElement>(null);\n\n    const ref = useClickOutside(event => {\n        // Check if the click is truly outside the multiselect wrapper\n        if (refMultiSelectWrapper.current && !refMultiSelectWrapper.current.contains(event.target as Node)) {\n            closeMenu();\n        }\n    });\n\n    const mergedSelectRefs = useMergeRefs(refMultiSelectWrapper, ref);\n\n    const updateSelectedItems = (optionsToCheck: MultiselectOption[], selectedItem: string[] | undefined) => {\n        if (selectedItem) {\n            setSelectedItemIds(selectedItem);\n        } else if (optionsToCheck) {\n            const filteredBySelection = optionsToCheck.filter(item => item.selected);\n            setSelectedItemIds(filteredBySelection.map(option => option.id));\n        }\n    };\n\n    // Update the selectedItems on first render.\n    // Note, we use a ref instead of an effect as the effect is triggered too late\n    const firstRenderRef = useRef<boolean>(true);\n    if (firstRenderRef.current) {\n        updateSelectedItems(options, value);\n        firstRenderRef.current = false;\n    }\n\n    // Update selection based on changed value prop\n    const [previousValue, setPreviousValue] = useState(value);\n    if (!isEqual(value, previousValue)) {\n        updateSelectedItems(options, value);\n        setPreviousValue(value);\n    }\n\n    // Update options when they have changed from the outside\n    const [previousOptions, setPreviousOptions] = useState(options);\n    if (!isEqual(options, previousOptions)) {\n        updateSelectedItems(options, value);\n        setFilteredOptions(options);\n        setPreviousOptions(options);\n    }\n\n    const updateDOMValues = (updatedItemDOMValues: OptionDOMValue[] = []) => {\n        setItemDOMValues(updatedItemDOMValues);\n    };\n\n    const renderFilter = () => (\n        <MultiselectToggleFilter\n            isActive={isFilterActive || !!filterValue}\n            selectedItemIds={selectedItemIds}\n            filterValue={filterValue}\n            onFilterChange={handleFilterChange}\n        />\n    );\n\n    const renderSelection = () => {\n        if (counterMessage || renderCounterMessage) {\n            return (\n                <MultiselectToggleCounter\n                    selectedAmount={selectedItemIds.length}\n                    counterMessage={counterMessage}\n                    customRenderer={renderCounterMessage}\n                />\n            );\n        }\n\n        return (\n            <MultiselectToggleSelection\n                options={options}\n                selectedItemIds={selectedItemIds}\n                showSelectedItemIcon={showSelectedItemIcon}\n                showUnselectedItemIcons={showUnselectedItemIcons}\n                onRemoveItem={handleRemoveSelectedItem}\n                multiline={multiline}\n                hasInputAddon={!!inputAddon}\n                hasFilter={useFilter}\n            >\n                {multiline && renderFilter()}\n            </MultiselectToggleSelection>\n        );\n    };\n\n    const renderToggle = () => {\n        const wrapperClassNames = classNames(\n            'dropdown-toggle',\n            'form-control',\n            'text-left',\n            btnClassName && btnClassName,\n            bsSize === 'sm' && 'input-sm',\n            bsSize === 'lg' && 'input-lg',\n            multiline && 'height-auto',\n            disabled && 'disabled'\n        );\n\n        const showPlaceholder = isEmpty(selectedItemIds) && !showUnselectedItemIcons;\n        const showFilter = useFilter && isOpen && !counterMessage && !renderCounterMessage;\n\n        const toggleButton = (\n            <button\n                type='button'\n                id={id}\n                name={name}\n                className={wrapperClassNames}\n                data-toggle='dropdown'\n                tabIndex={tabIndex}\n                aria-haspopup='true'\n                aria-expanded={isOpen}\n                onClick={onToggle}\n                onKeyDown={handleToggleKeyDown}\n                ref={refToggle}\n            >\n                {showPlaceholder ? (\n                    <>\n                        <MultiselectTogglePlaceholder placeholder={placeholder} />\n                        {showFilter && renderFilter()}\n                    </>\n                ) : (\n                    renderSelection()\n                )}\n                {showFilter && !multiline && renderFilter()}\n                <span className='caret' />\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        const nonSelectedOptions = filteredOptions.map(option => {\n            option.selected = selectedItemIds.indexOf(option.id) !== -1;\n            return option;\n        });\n\n        return (\n            <BaseSelectDropdown\n                isOpen={isOpen}\n                isLoading={isLoading}\n                options={nonSelectedOptions}\n                focusedItemIndex={focusedItemIndex}\n                keyboardUsed={keyboardUsed}\n                updateDOMValues={updateDOMValues}\n                onSelect={onOptionChange}\n                onClose={closeMenu}\n                noItemMessage={noItemMessage}\n                pullRight={pullRight}\n                useActiveClass\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        const optionsFiltered = filterOptions(itemDOMValues, targetFilterValue, options);\n\n        if (!isOpen) {\n            // Ensure dropdown stays open when filtering\n            setIsOpen(true);\n        }\n\n        const newFocusedItemIndex = optionsFiltered.length > 0 ? 0 : -1;\n\n        setIsFilterActive(true);\n        setFilterValue(targetFilterValue);\n        setFilteredOptions(optionsFiltered);\n\n        if (optionsFiltered.length > 0) {\n            // Only set keyboard used if there are filtered options\n            setKeyboardUsed(true);\n        }\n\n        setFocusedItemIndex(newFocusedItemIndex);\n    };\n\n    const onOptionChange = (currentSelectedItem: MultiselectOption | undefined) => {\n        // prevent selecting disabled Items via keyboard\n        if (currentSelectedItem?.disabled) {\n            return;\n        }\n\n        const updatedSelectedItems = currentSelectedItem ? updateSelection(currentSelectedItem.id) : selectedItemIds;\n\n        // Reset everything after an option was selected. Remove the filter again.\n        setSelectedItemIds(updatedSelectedItems);\n        setIsFilterActive(false);\n        setFilterValue('');\n        setFilteredOptions(options);\n\n        onChange(updatedSelectedItems);\n    };\n\n    const updateSelection = (selectedItemId: string) => {\n        const newSelectedItems = [...selectedItemIds];\n        const itemIndex = selectedItemIds.indexOf(selectedItemId);\n\n        if (itemIndex !== -1) {\n            newSelectedItems.splice(itemIndex, 1);\n        } else {\n            newSelectedItems.push(selectedItemId);\n        }\n\n        return newSelectedItems;\n    };\n\n    const handleRemoveSelectedItem = (event: React.MouseEvent<HTMLSpanElement>, itemId: string) => {\n        event.stopPropagation();\n\n        const newSelectedItems = updateSelection(itemId);\n        setSelectedItemIds(newSelectedItems);\n\n        onChange(newSelectedItems);\n    };\n\n    const handleToggleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        switch (event.key) {\n            case 'Space':\n                if (!isOpen) {\n                    // open on space\n                    event.preventDefault();\n                    onToggle(event);\n                }\n                break;\n            case 'Enter':\n                if (!isOpen) {\n                    // open on enter\n                    event.preventDefault();\n                    onToggle(event);\n                }\n                break;\n            default:\n                break;\n        }\n    };\n\n    const onToggle = (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n        // Don't toggle when component is disabled or an item in the toggle was clicked in order to remove from\n        // selection neither close 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(prevValue => !prevValue);\n        setKeyboardUsed(isKeyboardUsed);\n    };\n\n    const closeMenu = () => {\n        if (isOpen) {\n            setIsOpen(false);\n            setIsFilterActive(false);\n            setFilterValue('');\n            setFilteredOptions(options);\n            setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);\n            setKeyboardUsed(false);\n\n            refToggle?.current?.focus();\n        }\n    };\n\n    const wrapperClasses = classNames(\n        'select',\n        'multiselect',\n        'dropdown',\n        isOpen && 'open',\n        hasError && 'has-error',\n        className && className\n    );\n\n    return (\n        <div {...remainingProps} className={wrapperClasses} ref={mergedSelectRefs}>\n            {renderToggle()}\n            {renderDropdownMenu()}\n        </div>\n    );\n};\n\nexport default Multiselect;\n"],"names":["DEFAULT_FOCUSED_ITEM_INDEX","Multiselect","props","name","id","options","value","onChange","noop","placeholder","isLoading","dropup","pullRight","autoDropDirection","bsSize","disabled","tabIndex","hasError","useFilter","multiline","noItemMessage","counterMessage","renderCounterMessage","showSelectedItemIcon","showUnselectedItemIcons","className","inputAddon","errorMessage","warningMessage","messageWhiteSpace","btnClassName","dropdownClassName","remainingProps","isOpen","setIsOpen","useState","selectedItemIds","setSelectedItemIds","isFilterActive","setIsFilterActive","filterValue","setFilterValue","filteredOptions","setFilteredOptions","itemDOMValues","setItemDOMValues","focusedItemIndex","setFocusedItemIndex","keyboardUsed","setKeyboardUsed","refToggle","useRef","refMultiSelectWrapper","ref","useClickOutside","event","closeMenu","mergedSelectRefs","useMergeRefs","updateSelectedItems","optionsToCheck","selectedItem","filteredBySelection","item","option","firstRenderRef","previousValue","setPreviousValue","isEqual","previousOptions","setPreviousOptions","updateDOMValues","updatedItemDOMValues","renderFilter","jsx","MultiselectToggleFilter","handleFilterChange","renderSelection","MultiselectToggleCounter","MultiselectToggleSelection","handleRemoveSelectedItem","renderToggle","wrapperClassNames","classNames","showPlaceholder","isEmpty","showFilter","toggleButton","jsxs","onToggle","handleToggleKeyDown","Fragment","MultiselectTogglePlaceholder","WithFeedbackAndAddon","renderDropdownMenu","nonSelectedOptions","BaseSelectDropdown","onOptionChange","targetFilterValue","optionsFiltered","filterOptions","newFocusedItemIndex","currentSelectedItem","updatedSelectedItems","updateSelection","selectedItemId","newSelectedItems","itemIndex","itemId","isKeyboardUsed","prevValue","wrapperClasses"],"mappings":"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"}

package/components/selects/MultiselectToggleFilter.js

@@ -1,10 +1,10 @@
 import { jsx as o } from "react/jsx-runtime";
-import u from "classnames";
-import { isEmpty as a } from "es-toolkit/compat";
+import { isEmpty as u } from "es-toolkit/compat";
+import a from "../../utils/classNames.js";
 const p = (e) => {
-  const { isActive: t, selectedItemIds: l, filterValue: s, onFilterChange: i } = e, r = u(
+  const { isActive: t, selectedItemIds: l, filterValue: s, onFilterChange: i } = e, r = a(
     "multiselect-filter-input",
-    a(l) && "multiselect-filter-input-placeholder",
+    u(l) && "multiselect-filter-input-placeholder",
     t && "multiselect-filter-input-active"
   );
   return /* @__PURE__ */ o(

package/components/selects/MultiselectToggleFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiselectToggleFilter.js","sources":["../../../src/components/selects/MultiselectToggleFilter.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\nimport { isEmpty } from 'es-toolkit/compat';\n\nexport type MultiselectToggleFilterProps = {\n    isActive: boolean;\n    selectedItemIds?: string[];\n    filterValue: string;\n    onFilterChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nconst MultiselectToggleFilter = (props: MultiselectToggleFilterProps) => {\n    const { isActive, selectedItemIds, filterValue, onFilterChange } = props;\n\n    const inputClasses = classNames(\n        'multiselect-filter-input',\n        isEmpty(selectedItemIds) && 'multiselect-filter-input-placeholder',\n        isActive && 'multiselect-filter-input-active'\n    );\n    return (\n        <input\n            type='text'\n            role='searchbox'\n            className={inputClasses}\n            // biome-ignore lint/a11y/noAutofocus: autofocus is intentionally set to allow instant typing to filter\n            autoFocus\n            onChange={onFilterChange}\n            value={filterValue}\n        />\n    );\n};\n\nexport default MultiselectToggleFilter;\n"],"names":["MultiselectToggleFilter","props","isActive","selectedItemIds","filterValue","onFilterChange","inputClasses","classNames","isEmpty","jsx"],"mappings":";;;AAWA,MAAMA,IAA0B,CAACC,MAAwC;AACrE,QAAM,EAAE,UAAAC,GAAU,iBAAAC,GAAiB,aAAAC,GAAa,gBAAAC,MAAmBJ,GAE7DK,IAAeC;AAAA,IACjB;AAAA,IACAC,EAAQL,CAAe,KAAK;AAAA,IAC5BD,KAAY;AAAA,EAAA;AAEhB,SACI,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAWH;AAAA,MAEX,WAAS;AAAA,MACT,UAAUD;AAAA,MACV,OAAOD;AAAA,IAAA;AAAA,EAAA;AAGnB;"}
+{"version":3,"file":"MultiselectToggleFilter.js","sources":["../../../src/components/selects/MultiselectToggleFilter.tsx"],"sourcesContent":["import type React from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\n\nexport type MultiselectToggleFilterProps = {\n    isActive: boolean;\n    selectedItemIds?: string[];\n    filterValue: string;\n    onFilterChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nconst MultiselectToggleFilter = (props: MultiselectToggleFilterProps) => {\n    const { isActive, selectedItemIds, filterValue, onFilterChange } = props;\n\n    const inputClasses = classNames(\n        'multiselect-filter-input',\n        isEmpty(selectedItemIds) && 'multiselect-filter-input-placeholder',\n        isActive && 'multiselect-filter-input-active'\n    );\n    return (\n        <input\n            type='text'\n            role='searchbox'\n            className={inputClasses}\n            // biome-ignore lint/a11y/noAutofocus: autofocus is intentionally set to allow instant typing to filter\n            autoFocus\n            onChange={onFilterChange}\n            value={filterValue}\n        />\n    );\n};\n\nexport default MultiselectToggleFilter;\n"],"names":["MultiselectToggleFilter","props","isActive","selectedItemIds","filterValue","onFilterChange","inputClasses","classNames","isEmpty","jsx"],"mappings":";;;AAYA,MAAMA,IAA0B,CAACC,MAAwC;AACrE,QAAM,EAAE,UAAAC,GAAU,iBAAAC,GAAiB,aAAAC,GAAa,gBAAAC,MAAmBJ,GAE7DK,IAAeC;AAAA,IACjB;AAAA,IACAC,EAAQL,CAAe,KAAK;AAAA,IAC5BD,KAAY;AAAA,EAAA;AAEhB,SACI,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAWH;AAAA,MAEX,WAAS;AAAA,MACT,UAAUD;AAAA,MACV,OAAOD;AAAA,IAAA;AAAA,EAAA;AAGnB;"}

package/components/selects/MultiselectToggleSelection.js

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as s } from "react/jsx-runtime";
-import r from "classnames";
 import { isEmpty as v } from "es-toolkit/compat";
+import r from "../../utils/classNames.js";
 const y = (d) => {
   const {
     options: n,

package/components/selects/MultiselectToggleSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiselectToggleSelection.js","sources":["../../../src/components/selects/MultiselectToggleSelection.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport type { SelectOption } from './BaseSelectDropdown';\n\nexport type MultiselectToggleSelectionProps = {\n    options: SelectOption[];\n    selectedItemIds: string[];\n    showSelectedItemIcon: boolean;\n    showUnselectedItemIcons: boolean;\n    multiline: boolean;\n    hasInputAddon: boolean;\n    hasFilter: boolean;\n    onRemoveItem: (event: React.MouseEvent<HTMLSpanElement>, itemId: string) => void;\n};\n\nconst MultiselectToggleSelection = (props: PropsWithChildren<MultiselectToggleSelectionProps>) => {\n    const {\n        options,\n        selectedItemIds,\n        showSelectedItemIcon,\n        showUnselectedItemIcons,\n        multiline,\n        hasInputAddon,\n        hasFilter,\n        onRemoveItem,\n        children,\n    } = props;\n\n    if (!options || isEmpty(options)) {\n        return null;\n    }\n\n    const isItemSelected = (item: SelectOption) => {\n        return selectedItemIds.indexOf(item.id) !== -1;\n    };\n\n    const renderSelectionItem = (item: SelectOption, index: number) => {\n        if (showSelectedItemIcon) {\n            const inactiveClassNames = classNames('margin-right-5', !isItemSelected(item) && 'inactiveIcon');\n\n            return (\n                <span key={item.id} className={inactiveClassNames}>\n                    {item.icon}\n                </span>\n            );\n        }\n\n        return (\n            <span key={index} className='selected-option'>\n                <span className='selected-label'>\n                    {item.icon && <span className='margin-right-5'>{item.icon}</span>}\n                    {item.label}\n                </span>\n                <span\n                    className='removeIcon'\n                    onClick={event => {\n                        onRemoveItem(event, item.id);\n                    }}\n                >\n                    <span className='rioglyph rioglyph-remove' />\n                </span>\n            </span>\n        );\n    };\n\n    const optionListClassNames = classNames(\n        !showSelectedItemIcon && !showUnselectedItemIcons && 'selected-option-list',\n        multiline && 'flex-wrap',\n        hasInputAddon && 'margin-left-0',\n        hasFilter && 'padding-left-1'\n    );\n\n    return (\n        <span className={optionListClassNames}>\n            {options\n                .filter(option => (showUnselectedItemIcons ? !option.header : isItemSelected(option)))\n                .map((option, index) => renderSelectionItem(option, index))}\n            {children}\n        </span>\n    );\n};\n\nexport default MultiselectToggleSelection;\n"],"names":["MultiselectToggleSelection","props","options","selectedItemIds","showSelectedItemIcon","showUnselectedItemIcons","multiline","hasInputAddon","hasFilter","onRemoveItem","children","isEmpty","isItemSelected","item","renderSelectionItem","index","inactiveClassNames","classNames","jsxs","jsx","event","optionListClassNames","option"],"mappings":";;;AAkBA,MAAMA,IAA6B,CAACC,MAA8D;AAC9F,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,yBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACAT;AAEJ,MAAI,CAACC,KAAWS,EAAQT,CAAO;AAC3B,WAAO;AAGX,QAAMU,IAAiB,CAACC,MACbV,EAAgB,QAAQU,EAAK,EAAE,MAAM,IAG1CC,IAAsB,CAACD,GAAoBE,MAAkB;AAC/D,QAAIX,GAAsB;AACtB,YAAMY,IAAqBC,EAAW,kBAAkB,CAACL,EAAeC,CAAI,KAAK,cAAc;AAE/F,+BACK,QAAA,EAAmB,WAAWG,GAC1B,UAAAH,EAAK,KAAA,GADCA,EAAK,EAEhB;AAAA,IAER;AAEA,WACI,gBAAAK,EAAC,QAAA,EAAiB,WAAU,mBACxB,UAAA;AAAA,MAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,kBACX,UAAA;AAAA,QAAAL,EAAK,QAAQ,gBAAAM,EAAC,QAAA,EAAK,WAAU,kBAAkB,YAAK,MAAK;AAAA,QACzDN,EAAK;AAAA,MAAA,GACV;AAAA,MACA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,SAAS,CAAAC,MAAS;AACd,YAAAX,EAAaW,GAAOP,EAAK,EAAE;AAAA,UAC/B;AAAA,UAEA,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,2BAAA,CAA2B;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/C,EAAA,GAZOJ,CAaX;AAAA,EAER,GAEMM,IAAuBJ;AAAA,IACzB,CAACb,KAAwB,CAACC,KAA2B;AAAA,IACrDC,KAAa;AAAA,IACbC,KAAiB;AAAA,IACjBC,KAAa;AAAA,EAAA;AAGjB,SACI,gBAAAU,EAAC,QAAA,EAAK,WAAWG,GACZ,UAAA;AAAA,IAAAnB,EACI,OAAO,CAAAoB,MAAWjB,IAA0B,CAACiB,EAAO,SAASV,EAAeU,CAAM,CAAE,EACpF,IAAI,CAACA,GAAQP,MAAUD,EAAoBQ,GAAQP,CAAK,CAAC;AAAA,IAC7DL;AAAA,EAAA,GACL;AAER;"}
+{"version":3,"file":"MultiselectToggleSelection.js","sources":["../../../src/components/selects/MultiselectToggleSelection.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport type { SelectOption } from './BaseSelectDropdown';\n\nexport type MultiselectToggleSelectionProps = {\n    options: SelectOption[];\n    selectedItemIds: string[];\n    showSelectedItemIcon: boolean;\n    showUnselectedItemIcons: boolean;\n    multiline: boolean;\n    hasInputAddon: boolean;\n    hasFilter: boolean;\n    onRemoveItem: (event: React.MouseEvent<HTMLSpanElement>, itemId: string) => void;\n};\n\nconst MultiselectToggleSelection = (props: PropsWithChildren<MultiselectToggleSelectionProps>) => {\n    const {\n        options,\n        selectedItemIds,\n        showSelectedItemIcon,\n        showUnselectedItemIcons,\n        multiline,\n        hasInputAddon,\n        hasFilter,\n        onRemoveItem,\n        children,\n    } = props;\n\n    if (!options || isEmpty(options)) {\n        return null;\n    }\n\n    const isItemSelected = (item: SelectOption) => {\n        return selectedItemIds.indexOf(item.id) !== -1;\n    };\n\n    const renderSelectionItem = (item: SelectOption, index: number) => {\n        if (showSelectedItemIcon) {\n            const inactiveClassNames = classNames('margin-right-5', !isItemSelected(item) && 'inactiveIcon');\n\n            return (\n                <span key={item.id} className={inactiveClassNames}>\n                    {item.icon}\n                </span>\n            );\n        }\n\n        return (\n            <span key={index} className='selected-option'>\n                <span className='selected-label'>\n                    {item.icon && <span className='margin-right-5'>{item.icon}</span>}\n                    {item.label}\n                </span>\n                <span\n                    className='removeIcon'\n                    onClick={event => {\n                        onRemoveItem(event, item.id);\n                    }}\n                >\n                    <span className='rioglyph rioglyph-remove' />\n                </span>\n            </span>\n        );\n    };\n\n    const optionListClassNames = classNames(\n        !showSelectedItemIcon && !showUnselectedItemIcons && 'selected-option-list',\n        multiline && 'flex-wrap',\n        hasInputAddon && 'margin-left-0',\n        hasFilter && 'padding-left-1'\n    );\n\n    return (\n        <span className={optionListClassNames}>\n            {options\n                .filter(option => (showUnselectedItemIcons ? !option.header : isItemSelected(option)))\n                .map((option, index) => renderSelectionItem(option, index))}\n            {children}\n        </span>\n    );\n};\n\nexport default MultiselectToggleSelection;\n"],"names":["MultiselectToggleSelection","props","options","selectedItemIds","showSelectedItemIcon","showUnselectedItemIcons","multiline","hasInputAddon","hasFilter","onRemoveItem","children","isEmpty","isItemSelected","item","renderSelectionItem","index","inactiveClassNames","classNames","jsxs","jsx","event","optionListClassNames","option"],"mappings":";;;AAkBA,MAAMA,IAA6B,CAACC,MAA8D;AAC9F,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,yBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACAT;AAEJ,MAAI,CAACC,KAAWS,EAAQT,CAAO;AAC3B,WAAO;AAGX,QAAMU,IAAiB,CAACC,MACbV,EAAgB,QAAQU,EAAK,EAAE,MAAM,IAG1CC,IAAsB,CAACD,GAAoBE,MAAkB;AAC/D,QAAIX,GAAsB;AACtB,YAAMY,IAAqBC,EAAW,kBAAkB,CAACL,EAAeC,CAAI,KAAK,cAAc;AAE/F,+BACK,QAAA,EAAmB,WAAWG,GAC1B,UAAAH,EAAK,KAAA,GADCA,EAAK,EAEhB;AAAA,IAER;AAEA,WACI,gBAAAK,EAAC,QAAA,EAAiB,WAAU,mBACxB,UAAA;AAAA,MAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,kBACX,UAAA;AAAA,QAAAL,EAAK,QAAQ,gBAAAM,EAAC,QAAA,EAAK,WAAU,kBAAkB,YAAK,MAAK;AAAA,QACzDN,EAAK;AAAA,MAAA,GACV;AAAA,MACA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,SAAS,CAAAC,MAAS;AACd,YAAAX,EAAaW,GAAOP,EAAK,EAAE;AAAA,UAC/B;AAAA,UAEA,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,2BAAA,CAA2B;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/C,EAAA,GAZOJ,CAaX;AAAA,EAER,GAEMM,IAAuBJ;AAAA,IACzB,CAACb,KAAwB,CAACC,KAA2B;AAAA,IACrDC,KAAa;AAAA,IACbC,KAAiB;AAAA,IACjBC,KAAa;AAAA,EAAA;AAGjB,SACI,gBAAAU,EAAC,QAAA,EAAK,WAAWG,GACZ,UAAA;AAAA,IAAAnB,EACI,OAAO,CAAAoB,MAAWjB,IAA0B,CAACiB,EAAO,SAASV,EAAeU,CAAM,CAAE,EACpF,IAAI,CAACA,GAAQP,MAAUD,EAAoBQ,GAAQP,CAAK,CAAC;AAAA,IAC7DL;AAAA,EAAA,GACL;AAER;"}

package/components/selects/Select.js

@@ -1,8 +1,8 @@
 import { jsxs as U, jsx as i } from "react/jsx-runtime";
 import { useState as o, useRef as V } from "react";
-import k from "classnames";
-import { isEqual as K } from "es-toolkit/predicate";
+import { isEqual as k } from "es-toolkit/predicate";
 import { noop as Oe, isEmpty as be } from "es-toolkit/compat";
+import K from "../../utils/classNames.js";
 import ve, { filterOptions as xe } from "./BaseSelectDropdown.js";
 import we from "../../hooks/useClickOutside.js";
 import De from "../../hooks/useEffectOnce.js";
@@ -49,15 +49,15 @@ const u = -1, ze = (R) => {
     C(t, n);
   });
   const [ie, ce] = o(t);
-  K(t, ie) || (C(t, n), l(t), ce(t));
+  k(t, ie) || (C(t, n), l(t), ce(t));
   const [de, fe] = o(n);
-  K(n, de) || (C(t, n), fe(n));
+  k(n, de) || (C(t, n), fe(n));
   const ue = (e = []) => {
     !e.length || (I || A) && T.length > 0 || oe(e);
   }, pe = () => {
     p(null), c(!1), d(""), l(t), f(!1), m(u), O(void 0);
   }, me = () => {
-    const e = k(
+    const e = K(
       "dropdown-toggle",
       "form-control",
       "text-left",
@@ -152,7 +152,7 @@ const u = -1, ze = (R) => {
     N(!r), f(s);
   }, S = () => {
     r && (N(!1), c(!1), d(""), l(t), f(!1), m(u), P.current?.focus());
-  }, Se = k("select", "dropdown", r && "open", G && "has-error", w && w);
+  }, Se = K("select", "dropdown", r && "open", G && "has-error", w && w);
   return /* @__PURE__ */ U("div", { ...te, className: Se, ref: ae, children: [
     me(),
     ge()

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 classNames from 'classnames';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty, noop } from 'es-toolkit/compat';\n\nimport BaseSelectDropdown, { filterOptions, type OptionDOMValue, type SelectOption } from './BaseSelectDropdown';\nimport useClickOutside from '../../useClickOutside';\nimport useEffectOnce from '../../hooks/useEffectOnce';\nimport useMergeRefs from '../../hooks/useMergeRefs';\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     * 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\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        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\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                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                <ClearButton showClear={useClear} selectedItem={selectedItem} onClear={handleClearSelectedItem} />\n                <span className='caret' />\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('select', 'dropdown', isOpen && 'open', hasError && 'has-error', className && className);\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","disabled","tabIndex","hasError","useFilter","useClear","noItemMessage","selectedOptionText","showSelectedItemIcon","showUnselectedItemIcons","dropdownClassName","btnClassName","className","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","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 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     * 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\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        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\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                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                <ClearButton showClear={useClear} selectedItem={selectedItem} onClear={handleClearSelectedItem} />\n                <span className='caret' />\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('select', 'dropdown', isOpen && 'open', hasError && 'has-error', className && className);\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","disabled","tabIndex","hasError","useFilter","useClear","noItemMessage","selectedOptionText","showSelectedItemIcon","showUnselectedItemIcons","dropdownClassName","btnClassName","className","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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"}

package/components/selects/SelectFilter.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import a from "classnames";
+import a from "../../utils/classNames.js";
 const u = (e) => {
   const { isFilterActive: s, filterValue: t, onChange: i } = e, l = a(
     "select-filter-input",

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';\nimport classNames from '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":";;AASA,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","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;"}

package/components/selects/WithFeedbackAndAddon.js

@@ -1,5 +1,5 @@
 import { jsx as s, jsxs as r, Fragment as t } from "react/jsx-runtime";
-import c from "classnames";
+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",

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';\nimport classNames from '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":";;AAmCA,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","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;"}