@db-ux/react-core-components 4.9.0 → 4.10.0

package/dist/components/custom-select/custom-select.js

@@ -1,729 +1,511 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { DEFAULT_CLOSE_BUTTON, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_SELECTED, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
-import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getOptionKey, getSearchInput, hasVoiceOver, stringPropVisible, } from "../../utils";
-import { DocumentClickListener } from "../../utils/document-click-listener";
-import { DocumentScrollListener } from "../../utils/document-scroll-listener";
-import { handleFixedDropdown } from "../../utils/floating-components";
-import { addResetEventListener, } from "../../utils/form-components";
-import DBButton from "../button/button";
-import DBCustomSelectDropdown from "../custom-select-dropdown/custom-select-dropdown";
-import DBCustomSelectListItem from "../custom-select-list-item/custom-select-list-item";
-import DBCustomSelectList from "../custom-select-list/custom-select-list";
-import DBInfotext from "../infotext/infotext";
-import DBInput from "../input/input";
-import DBTag from "../tag/tag";
-import DBTooltip from "../tooltip/tooltip";
-import { useId } from "react";
-function DBCustomSelectFn(props, component) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    props = Object.assign({ clearSelectionText: "Clear selection", showClearSelection: true }, props);
-    const uuid = useId();
-    const _ref = component || useRef(component);
-    const detailsRef = useRef(null);
-    const selectRef = useRef(null);
-    const selectAllRef = useRef(null);
-    const searchInputRef = useRef(null);
-    const [_id, set_id] = useState(() => undefined);
-    const [_messageId, set_messageId] = useState(() => undefined);
-    const [_validMessageId, set_validMessageId] = useState(() => undefined);
-    const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
-    const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
-    const [_selectId, set_selectId] = useState(() => undefined);
-    const [_labelId, set_labelId] = useState(() => undefined);
-    const [_summaryId, set_summaryId] = useState(() => undefined);
-    const [_placeholderId, set_placeholderId] = useState(() => undefined);
-    const [_infoTextId, set_infoTextId] = useState(() => undefined);
-    const [_validity, set_validity] = useState(() => "no-validation");
-    const [_userInteraction, set_userInteraction] = useState(() => false);
-    const [abortController, setAbortController] = useState(() => undefined);
-    const [_descByIds, set_descByIds] = useState(() => undefined);
-    const [_selectedLabels, set_selectedLabels] = useState(() => "");
-    const [_selectedLabelsId, set_selectedLabelsId] = useState(() => undefined);
-    const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
-    const [_selectedOptions, set_selectedOptions] = useState(() => []);
-    const [selectAllEnabled, setSelectAllEnabled] = useState(() => false);
-    const [searchEnabled, setSearchEnabled] = useState(() => false);
-    const [amountOptions, setAmountOptions] = useState(() => 0);
-    const [_values, set_values] = useState(() => []);
-    const [_options, set_options] = useState(() => []);
-    const [_hasNoOptions, set_hasNoOptions] = useState(() => false);
-    const [_documentClickListenerCallbackId, set_documentClickListenerCallbackId,] = useState(() => undefined);
-    const [_internalChangeTimestamp, set_internalChangeTimestamp] = useState(() => 0);
-    const [_documentScrollListenerCallbackId, set_documentScrollListenerCallbackId,] = useState(() => undefined);
-    const [_observer, set_observer] = useState(() => undefined);
-    function handleDocumentScroll(event) {
-        var _a, _b;
-        if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.contains) &&
-            ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.contains(detailsRef.current))) {
-            handleAutoPlacement();
-        }
-    }
-    const [_searchValue, set_searchValue] = useState(() => undefined);
-    function hasValidState() {
-        var _a;
-        return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
-    }
-    function handleValidation() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (selectRef.current) {
-            selectRef.current.value = getNativeSelectValue();
-        }
-        /* For a11y reasons we need to map the correct message with the select */
-        if (!((_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.validity.valid) || props.validation === "invalid") {
-            setDescById(_invalidMessageId);
-            set_invalidMessage(props.invalidMessage ||
-                ((_b = selectRef.current) === null || _b === void 0 ? void 0 : _b.validationMessage) ||
-                DEFAULT_INVALID_MESSAGE);
-            if (hasVoiceOver()) {
-                set_voiceOverFallback(_invalidMessage);
-                delay(() => set_voiceOverFallback(""), 1000);
-            }
-            if (_userInteraction) {
-                set_validity((_c = props.validation) !== null && _c !== void 0 ? _c : "invalid");
-            }
-        }
-        else if (hasValidState() &&
-            ((_d = selectRef.current) === null || _d === void 0 ? void 0 : _d.validity.valid) &&
-            props.required) {
-            setDescById(_validMessageId);
-            if (hasVoiceOver()) {
-                set_voiceOverFallback((_e = props.validMessage) !== null && _e !== void 0 ? _e : DEFAULT_VALID_MESSAGE);
-                delay(() => set_voiceOverFallback(""), 1000);
-            }
-            set_validity((_f = props.validation) !== null && _f !== void 0 ? _f : "valid");
-        }
-        else if (stringPropVisible(props.message, props.showMessage)) {
-            setDescById(_messageId);
-            set_validity((_g = props.validation) !== null && _g !== void 0 ? _g : "no-validation");
-        }
-        else {
-            setDescById(_placeholderId);
-            set_validity((_h = props.validation) !== null && _h !== void 0 ? _h : "no-validation");
-        }
-    }
-    function handleDropdownToggle(event) {
-        if (props.onDropdownToggle) {
-            event.stopPropagation();
-            props.onDropdownToggle(event);
-        }
-        if (event.target instanceof HTMLDetailsElement && event.target.open) {
-            set_documentClickListenerCallbackId(new DocumentClickListener().addCallback((event) => handleDocumentClose(event)));
-            set_documentScrollListenerCallbackId(new DocumentScrollListener().addCallback((event) => handleDocumentScroll(event)));
-            handleAutoPlacement();
-            _observer === null || _observer === void 0 ? void 0 : _observer.observe(detailsRef.current);
-            if (!event.target.dataset["test"]) {
-                // We need this workaround for snapshot testing
-                handleOpenByKeyboardFocus();
-            }
-        }
-        else {
-            if (_documentClickListenerCallbackId) {
-                new DocumentClickListener().removeCallback(_documentClickListenerCallbackId);
-            }
-            if (_documentScrollListenerCallbackId) {
-                new DocumentScrollListener().removeCallback(_documentScrollListenerCallbackId);
-            }
-            _observer === null || _observer === void 0 ? void 0 : _observer.unobserve(detailsRef.current);
-        }
-    }
-    function getNativeSelectValue() {
-        var _a;
-        if (_values === null || _values === void 0 ? void 0 : _values.length) {
-            return (_a = _values.at(0)) !== null && _a !== void 0 ? _a : "";
-        }
-        return "";
-    }
-    function setDescById(descId) {
-        const descByIds = [];
-        if (descId) {
-            descByIds.push(descId);
-        }
-        if (_selectedLabelsId && (_selectedLabels === null || _selectedLabels === void 0 ? void 0 : _selectedLabels.length)) {
-            descByIds.push(_selectedLabelsId);
-        }
-        set_descByIds(descByIds.join(" "));
-    }
-    function getSelectAllLabel() {
-        var _a;
-        return (_a = props.selectAllLabel) !== null && _a !== void 0 ? _a : DEFAULT_LABEL;
-    }
-    function getOptionLabel(option) {
-        var _a, _b, _c;
-        return (_c = (_a = option.label) !== null && _a !== void 0 ? _a : (_b = option.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : "";
-    }
-    function getOptionChecked(value) {
-        if (value && (_values === null || _values === void 0 ? void 0 : _values.includes)) {
-            return _values === null || _values === void 0 ? void 0 : _values.includes(value);
-        }
-        return false;
-    }
-    function getTagRemoveLabel(option) {
-        const removeTexts = props.removeTagsTexts;
-        const options = props.options;
-        if (removeTexts && options) {
-            // Find the index of the option in the original options array
-            const optionIndex = options.findIndex((opt) => opt.value === option.value);
-            if (optionIndex >= 0 && optionIndex < removeTexts.length) {
-                return removeTexts[optionIndex];
-            }
-        }
-        // Fallback to default behavior
-        return `${DEFAULT_REMOVE} ${getOptionLabel(option)}`;
-    }
-    function handleTagRemove(option, event) {
-        if (event) {
-            event.stopPropagation();
-        }
-        handleSelect(option.value);
-        handleSummaryFocus();
-    }
-    function handleAutoPlacement() {
-        if (detailsRef.current) {
-            const dropdown = detailsRef.current.querySelector("article");
-            if (dropdown) {
-                // This is a workaround for Angular
-                delay(() => {
-                    var _a;
-                    handleFixedDropdown(dropdown, detailsRef.current, (_a = props.placement) !== null && _a !== void 0 ? _a : "bottom");
-                }, 1);
-            }
-        }
-    }
-    function handleArrowDownUp(event) {
-        var _a, _b, _c;
-        if ((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open) {
-            if (self.document) {
-                const activeElement = self.document.activeElement;
-                if (activeElement) {
-                    // 1. we check if we are currently focusing a checkbox in the dropdown
-                    const isCheckbox = activeElement.getAttribute("type") === "checkbox" ||
-                        activeElement.getAttribute("type") === "radio";
-                    if (isCheckbox) {
-                        const listElement = activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest("li");
-                        if (event.key === "ArrowDown" || event.key === "ArrowRight") {
-                            // Find next element with input, skipping group titles
-                            let nextElement = listElement === null || listElement === void 0 ? void 0 : listElement.nextElementSibling;
-                            while (nextElement) {
-                                const nextInput = nextElement.querySelector("input");
-                                if (nextInput) {
-                                    nextInput.focus();
-                                    break;
-                                }
-                                nextElement = nextElement.nextElementSibling;
-                            }
-                            if (!nextElement) {
-                                // We are on the last checkbox we move to the top checkbox
-                                handleFocusFirstDropdownCheckbox(activeElement);
-                            }
-                        }
-                        else {
-                            // Find previous element with input, skipping group titles
-                            let prevElement = listElement === null || listElement === void 0 ? void 0 : listElement.previousElementSibling;
-                            while (prevElement) {
-                                const prevInput = prevElement.querySelector("input");
-                                if (prevInput) {
-                                    prevInput.focus();
-                                    break;
-                                }
-                                prevElement = prevElement.previousElementSibling;
-                            }
-                            if (!prevElement) {
-                                // Check if we have a "select all" checkbox (only relevant for multi-select)
-                                const selectAllCheckbox = detailsRef.current.querySelector(`input[type="checkbox"]`);
-                                if (selectAllCheckbox && selectAllCheckbox !== activeElement) {
-                                    // We are on the top list checkbox but there is a select all checkbox as well
-                                    handleFocusFirstDropdownCheckbox(activeElement);
-                                }
-                                else {
-                                    // We are on the top checkbox, we need to move to the search
-                                    // or to the last checkbox
-                                    const search = getSearchInput(detailsRef.current);
-                                    if (search) {
-                                        delay(() => {
-                                            search.focus();
-                                        }, 100);
-                                    }
-                                    else {
-                                        const checkboxList = Array.from((_b = detailsRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll(`input[type="checkbox"],input[type="radio"]`));
-                                        if (checkboxList.length) {
-                                            (_c = checkboxList.at(-1)) === null || _c === void 0 ? void 0 : _c.focus();
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                    else {
-                        // 2. If we are on the search, and press up we go back to summary and close
-                        if (activeElement.getAttribute("type") === "search" &&
-                            (event.key === "ArrowUp" || event.key === "ArrowLeft")) {
-                            handleClose(undefined, true);
-                            handleSummaryFocus();
-                        }
-                        else {
-                            // 3. Otherwise, we need to move to the first checkbox
-                            handleFocusFirstDropdownCheckbox(activeElement);
-                        }
-                    }
-                }
-            }
-        }
-        else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
-            // Open dropdown with arrows see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboardinteraction
-            handleAutoPlacement();
-            if (detailsRef.current) {
-                detailsRef.current.open = true;
-            }
-            handleOpenByKeyboardFocus();
-        }
-        event.stopPropagation();
-        event.preventDefault();
-    }
-    function handleKeyboardPress(event) {
-        var _a, _b;
-        event.stopPropagation();
-        if (event.key === "Escape" && ((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open)) {
-            handleClose(undefined, true);
-            handleSummaryFocus();
-        }
-        else if (event.key === "Enter" && ((_b = detailsRef.current) === null || _b === void 0 ? void 0 : _b.open)) {
-            // Handle Enter key to select option like Space key
-            if (self.document) {
-                const activeElement = self.document.activeElement;
-                if (["checkbox", "radio"].includes(activeElement.getAttribute("type") || "")) {
-                    // Trigger click to simulate Space key behavior
-                    activeElement.click();
-                    event.preventDefault();
-                }
-                else if (activeElement.getAttribute("type") === "search") {
-                    // When Enter is pressed in search field, select the first available option
-                    const firstOption = _options === null || _options === void 0 ? void 0 : _options.find((opt) => !opt.isGroupTitle && !opt.disabled);
-                    if (firstOption === null || firstOption === void 0 ? void 0 : firstOption.value) {
-                        handleSelect(firstOption.value);
-                        event.preventDefault();
-                    }
-                }
-            }
-        }
-        else if (event.key === "ArrowDown" ||
-            event.key === "ArrowUp" ||
-            event.key === "ArrowLeft" ||
-            event.key === "ArrowRight") {
-            handleArrowDownUp(event);
-        }
-    }
-    function handleClose(event, forceClose) {
-        if (detailsRef.current) {
-            if (forceClose) {
-                detailsRef.current.open = false;
-                handleSummaryFocus();
-            }
-            else if (detailsRef.current.open && event) {
-                if (event.relatedTarget) {
-                    const relatedTarget = event.relatedTarget;
-                    // We close if the focus is on something like a <button> etc. which is not inside the <details> element
-                    // Inside a <dialog> there is some focus problem because of the top-layer
-                    // We do not want to focus <dialog> itself
-                    if (!detailsRef.current.contains(relatedTarget) &&
-                        relatedTarget.localName !== "dialog") {
-                        // We need to use delay here because the combination of `contains`
-                        // and changing the DOM element causes a race condition inside browser
-                        void delay(() => (detailsRef.current.open = false), 1);
-                    }
-                }
-            }
-        }
-    }
-    function handleDocumentClose(event) {
-        var _a;
-        if (event) {
-            // stencil is sending a custom event which wraps the pointer event into details
-            const target = event.target;
-            if (((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open) && !detailsRef.current.contains(target)) {
-                detailsRef.current.open = false;
-            }
-        }
-    }
-    function handleOptionSelected(values) {
-        const skip = new Date().getTime() - _internalChangeTimestamp < 200;
-        if (skip)
-            return;
-        set_values(values);
-        set_userInteraction(true);
-        if (props.onOptionSelected) {
-            props.onOptionSelected(values !== null && values !== void 0 ? values : []);
-        }
-        set_internalChangeTimestamp(new Date().getTime());
-    }
-    function handleSelect(value) {
-        if (value) {
-            if (props.multiple) {
-                if (_values === null || _values === void 0 ? void 0 : _values.includes(value)) {
-                    handleOptionSelected(_values.filter((v) => v !== value));
-                }
-                else {
-                    handleOptionSelected([...(_values || []), value]);
-                }
-            }
-            else {
-                handleOptionSelected([value]);
-                handleClose(undefined, true);
-            }
-        }
-    }
-    function handleSelectAll(event) {
-        event.stopPropagation();
-        if ((_values === null || _values === void 0 ? void 0 : _values.length) === amountOptions) {
-            handleOptionSelected([]);
-        }
-        else {
-            const searchValue = searchEnabled && searchInputRef.current
-                ? searchInputRef.current.value
-                : undefined;
-            handleOptionSelected(props.options
-                ? props
-                    .options.filter((option) => {
-                    var _a;
-                    return !option.isGroupTitle &&
-                        (!searchValue ||
-                            ((_a = option.value) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchValue.toLowerCase())));
-                })
-                    .map((option) => { var _a; return (_a = option.value) !== null && _a !== void 0 ? _a : ""; })
-                : []);
-        }
-    }
-    function handleFocusFirstDropdownCheckbox(activeElement) {
-        if (detailsRef.current) {
-            const checkboxes = Array.from(detailsRef.current.querySelectorAll(`input[type="checkbox"],input[type="radio"]`));
-            if (checkboxes.length) {
-                const first = checkboxes.at(0);
-                const checkbox = first === activeElement && checkboxes.length > 1
-                    ? checkboxes.at(1)
-                    : first;
-                if (checkbox) {
-                    delay(() => {
-                        // Takes some time until element can be focused
-                        checkbox.focus();
-                    }, 1);
-                }
-            }
-        }
-    }
-    function handleOpenByKeyboardFocus() {
-        if (detailsRef.current) {
-            // Focus search if possible
-            const search = getSearchInput(detailsRef.current);
-            if (search) {
-                delay(() => {
-                    // Takes some time until element can be focused
-                    search.focus();
-                }, 1);
-            }
-            else {
-                // Focus first checkbox otherwise
-                handleFocusFirstDropdownCheckbox();
-            }
-        }
-    }
-    function handleSearch(valueOrEvent) {
-        if (valueOrEvent === undefined) {
-            return;
-        }
-        let filterText;
-        if (typeof valueOrEvent === "string") {
-            filterText = valueOrEvent;
-        }
-        else {
-            const event = valueOrEvent;
-            event.stopPropagation();
-            if (props.onSearch) {
-                props.onSearch(event);
-            }
-            filterText = event.target.value;
-            set_searchValue(filterText);
-        }
-        if (!props.options || !filterText || filterText.length === 0) {
-            set_options(props.options);
-        }
-        else if (props.searchFilter) {
-            set_options(props.options.filter((option) => props.searchFilter(option, filterText)));
-        }
-        else {
-            set_options(props.options.filter((option) => !option.isGroupTitle &&
-                getOptionLabel(option)
-                    .toLowerCase()
-                    .includes(filterText.toLowerCase())));
-        }
-    }
-    function handleClearAll(event) {
-        event.stopPropagation();
-        handleOptionSelected([]);
-        handleSummaryFocus();
-    }
-    function handleSummaryFocus() {
-        var _a;
-        if (detailsRef.current) {
-            (_a = detailsRef.current
-                .querySelector("summary")) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    }
-    const [selectAllChecked, setSelectAllChecked] = useState(() => false);
-    const [selectAllIndeterminate, setSelectAllIndeterminate] = useState(() => false);
-    function resetIds() {
-        var _a, _b, _c;
-        const mId = (_c = (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `custom-select-${uuid}`;
-        set_id(mId);
-        set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
-        set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
-        set_invalidMessageId(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
-        set_selectId(mId + DEFAULT_SELECT_ID_SUFFIX);
-        set_labelId(mId + DEFAULT_LABEL_ID_SUFFIX);
-        set_summaryId(mId + "-summary");
-        set_placeholderId(mId + DEFAULT_PLACEHOLDER_ID_SUFFIX);
-        set_selectedLabelsId(mId + "-selected-labels");
-        set_infoTextId(mId + "-info");
-    }
-    function satisfyReact(event) {
-        // This is a function to satisfy React
-        event.stopPropagation();
-    }
-    useEffect(() => {
-        resetIds();
-        set_invalidMessage(props.invalidMessage || DEFAULT_INVALID_MESSAGE);
-        if (typeof window !== "undefined" && "IntersectionObserver" in window) {
-            set_observer(new IntersectionObserver((payload) => {
-                if (detailsRef.current) {
-                    const entry = payload.find(({ target }) => target === detailsRef.current);
-                    if (entry && !entry.isIntersecting && detailsRef.current.open) {
-                        detailsRef.current.open = false;
-                    }
-                }
-            }));
-        }
-    }, []);
-    useEffect(() => {
-        var _a, _b;
-        if ((_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) {
-            resetIds();
-        }
-    }, [props.id, (_a = props.propOverrides) === null || _a === void 0 ? void 0 : _a.id]);
-    useEffect(() => {
-        if (detailsRef.current) {
-            detailsRef.current.addEventListener("focusout", (event) => handleClose(event));
-        }
-    }, [detailsRef.current]);
-    useEffect(() => {
-        if (_id) {
-            const messageId = _id + DEFAULT_MESSAGE_ID_SUFFIX;
-            set_labelId(_id + DEFAULT_LABEL_ID_SUFFIX);
-            set_selectId(_id + DEFAULT_SELECT_ID_SUFFIX);
-            set_validMessageId(_id + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
-            set_invalidMessageId(_id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
-            set_placeholderId(_id + DEFAULT_PLACEHOLDER_ID_SUFFIX);
-            if (stringPropVisible(props.message, props.showMessage)) {
-                setDescById(messageId);
-            }
-            else {
-                setDescById();
-            }
-        }
-    }, [_id]);
-    useEffect(() => {
-        var _a;
-        if (detailsRef.current) {
-            const summary = detailsRef.current.querySelector("summary");
-            if (summary) {
-                summary.setAttribute("aria-describedby", (_a = props.ariaDescribedBy) !== null && _a !== void 0 ? _a : (_descByIds || ""));
-            }
-        }
-    }, [detailsRef.current, _descByIds]);
-    useEffect(() => {
-        if (props.showNoResults !== undefined) {
-            set_hasNoOptions(props.showNoResults);
-        }
-        else if (_options) {
-            set_hasNoOptions(_options.length === 0);
-        }
-    }, [props.showNoResults, props.showLoading, _options]);
-    useEffect(() => {
-        var _a;
-        setSelectAllEnabled(Boolean(props.multiple && ((_a = props.showSelectAll) !== null && _a !== void 0 ? _a : amountOptions > 5)));
-    }, [props.showSelectAll, amountOptions, props.multiple]);
-    useEffect(() => {
-        var _a;
-        setSearchEnabled((_a = props.showSearch) !== null && _a !== void 0 ? _a : amountOptions > 9);
-    }, [props.showSearch, amountOptions]);
-    useEffect(() => {
-        const v = props.values;
-        if (Array.isArray(v)) {
-            if (_values !== v) {
-                set_values(v);
-            }
-        }
-        else if (v == null && (_values === null || _values === void 0 ? void 0 : _values.length) !== 0) {
-            set_values([]);
-        }
-    }, [props.values]);
-    useEffect(() => {
-        if (selectRef.current) {
-            handleValidation();
-        }
-    }, [_values, selectRef.current]);
-    useEffect(() => {
-        if (selectRef.current) {
-            let controller = abortController;
-            if (!controller) {
-                controller = new AbortController();
-                setAbortController(controller);
-            }
-            const initialValues = props.values;
-            addResetEventListener(selectRef.current, () => {
-                const resetValue = initialValues
-                    ? initialValues
-                    : selectRef.current.value
-                        ? [selectRef.current.value]
-                        : [];
-                handleOptionSelected(resetValue);
-                handleValidation();
-            }, controller.signal);
-        }
-    }, [selectRef.current]);
-    useEffect(() => {
-        set_validity(props.validation);
-    }, [props.validation]);
-    useEffect(() => {
-        if ((_values === null || _values === void 0 ? void 0 : _values.length) === 0) {
-            setSelectAllChecked(false);
-            setSelectAllIndeterminate(false);
-        }
-        else if ((_values === null || _values === void 0 ? void 0 : _values.length) === amountOptions) {
-            setSelectAllIndeterminate(false);
-            setSelectAllChecked(true);
-        }
-        else if (_values) {
-            setSelectAllIndeterminate(true);
-        }
-    }, [_values, amountOptions]);
-    useEffect(() => {
-        var _a, _b;
-        set_options(props.options);
-        setAmountOptions((_b = (_a = props.options) === null || _a === void 0 ? void 0 : _a.filter((option) => !option.isGroupTitle).length) !== null && _b !== void 0 ? _b : 0);
-    }, [props.options]);
-    useEffect(() => {
-        set_searchValue(props.searchValue);
-        if (props.searchValue) {
-            const sValue = props.searchValue; // <- workaround for Angular
-            handleSearch(sValue);
-        }
-    }, [props.searchValue]);
-    useEffect(() => {
-        var _a, _b;
-        if ((_a = props.options) === null || _a === void 0 ? void 0 : _a.length) {
-            set_selectedOptions((_b = props.options) === null || _b === void 0 ? void 0 : _b.filter((option) => {
-                if (!option.value || !(_values === null || _values === void 0 ? void 0 : _values["includes"])) {
-                    return false;
-                }
-                return !option.isGroupTitle && (_values === null || _values === void 0 ? void 0 : _values.includes(option.value));
-            }));
-        }
-    }, [props.options, _values]);
-    useEffect(() => {
-        if (props.selectedLabels) {
-            set_selectedLabels(props.selectedLabels);
-            return;
-        }
-        if (_selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.length) {
-            if (props.transformSelectedLabels) {
-                // We need to add this to another ``const`` for Angular generated output to work
-                const selectedOptions = _selectedOptions;
-                const transformFn = props.transformSelectedLabels;
-                set_selectedLabels(transformFn(selectedOptions));
-                return;
-            }
-            if (props.selectedType === "amount") {
-                set_selectedLabels(props.amountText
-                    ? props.amountText
-                    : `${_selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.length} ${DEFAULT_SELECTED}`);
-            }
-            else {
-                set_selectedLabels(_selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.map((option) => getOptionLabel(option)).join(", "));
-            }
-        }
-        else {
-            set_selectedLabels("");
-        }
-    }, [
-        _selectedOptions,
-        props.selectedType,
-        props.amountText,
-        props.selectedLabels,
-        props.transformSelectedLabels,
-    ]);
-    useEffect(() => {
-        var _a;
-        if (props.onAmountChange) {
-            props.onAmountChange((_a = _selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.length) !== null && _a !== void 0 ? _a : 0);
-        }
-    }, [_selectedOptions]);
-    useEffect(() => {
-        if (selectAllRef.current) {
-            selectAllRef.current.indeterminate = Boolean(selectAllIndeterminate);
-        }
-    }, [selectAllIndeterminate, selectAllRef.current]);
-    useEffect(() => {
-        var _a;
-        set_invalidMessage(props.invalidMessage ||
-            ((_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
-            DEFAULT_INVALID_MESSAGE);
-    }, [selectRef.current, props.invalidMessage]);
-    useEffect(() => {
-        return () => {
-            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
-        };
-    }, []);
-    return (React.createElement("div", Object.assign({ id: _id, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density", "onOptionSelected", "onAmountChange", "onDropdownToggle"]), getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-custom-select", props.className), "aria-invalid": _validity === "invalid", "data-custom-validity": _validity, "data-width": props.formFieldWidth, "data-variant": props.variant === "floating" &&
-            props.selectedType === "tag" &&
-            props.multiple
-            ? "above"
-            : props.variant, "data-required": getBooleanAsString(props.required), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-placement": props.placement, "data-selected-type": props.multiple ? props.selectedType : "text", "data-hide-label": getHideProp(props.showLabel), "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon) }),
-        React.createElement("label", { id: _labelId }, (_b = props.label) !== null && _b !== void 0 ? _b : DEFAULT_LABEL,
-            React.createElement("select", { role: "none", hidden: true, id: _selectId, tabIndex: -1, ref: selectRef, form: props.form, name: props.name, "data-custom-validity": _validity, multiple: getBoolean(props.multiple, "multiple"), disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), onChange: (event) => satisfyReact(event) }, ((_c = props.options) === null || _c === void 0 ? void 0 : _c.length) ? (React.createElement(React.Fragment, null, (_d = props.options) === null || _d === void 0 ? void 0 : _d.map((option) => (React.createElement("option", { disabled: option.disabled, value: option.value, key: getOptionKey(option, "native-select-option-") }, getOptionLabel(option)))))) : null)),
-        React.createElement("details", { ref: detailsRef, open: props.open, onToggle: (event) => handleDropdownToggle(event), onKeyDown: (event) => handleKeyboardPress(event) },
-            props.children,
-            props.options ? (React.createElement(React.Fragment, null,
-                React.createElement("summary", { className: "db-custom-select-form-field", id: _summaryId, "aria-disabled": getBooleanAsString(props.disabled), tabIndex: props.disabled ? -1 : undefined, "aria-labelledby": _labelId },
-                    (_selectedLabels === null || _selectedLabels === void 0 ? void 0 : _selectedLabels.length) ? (React.createElement("span", { "data-visually-hidden": getBooleanAsString(props.selectedType === "tag"), id: _selectedLabelsId },
-                        props.selectedPrefix ? (React.createElement("span", { "data-visually-hidden": "true" }, props.selectedPrefix)) : null,
-                        _selectedLabels)) : null,
-                    props.selectedType === "tag" ? (React.createElement("div", null, _selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.map((option) => (React.createElement(DBTag, { emphasis: "strong", behavior: "removable", removeButton: getTagRemoveLabel(option), onRemove: (event) => handleTagRemove(option, event), key: getOptionKey(option, "tag-") }, getOptionLabel(option)))))) : null),
-                React.createElement(DBCustomSelectDropdown, { width: props.dropdownWidth },
-                    searchEnabled ? (React.createElement("div", null,
-                        React.createElement(DBInput, { type: "search", ref: searchInputRef, name: _id, form: _id, showLabel: false, value: _searchValue, label: (_e = props.searchLabel) !== null && _e !== void 0 ? _e : DEFAULT_LABEL, placeholder: (_f = props.searchPlaceholder) !== null && _f !== void 0 ? _f : props.searchLabel, ariaDescribedBy: _hasNoOptions || props.showLoading
-                                ? _infoTextId
-                                : undefined, onInput: (event) => handleSearch(event) }))) : null,
-                    _hasNoOptions || props.showLoading ? (React.createElement(DBInfotext, { id: _infoTextId, icon: props.showLoading ? "circular_arrows" : undefined, semantic: props.showLoading ? "informational" : "warning" }, (_g = (props.showLoading
-                        ? props.loadingText
-                        : props.noResultsText)) !== null && _g !== void 0 ? _g : DEFAULT_MESSAGE)) : (React.createElement(React.Fragment, null,
-                        React.createElement(React.Fragment, null,
-                            selectAllEnabled ? (React.createElement("div", null,
-                                React.createElement("div", { className: "db-checkbox db-custom-select-list-item" },
-                                    React.createElement("label", null,
-                                        React.createElement("input", { type: "checkbox", value: "select-all", ref: selectAllRef, form: _id, checked: selectAllChecked, onChange: (event) => handleSelectAll(event) }),
-                                        getSelectAllLabel())))) : null,
-                            React.createElement(DBCustomSelectList, { multiple: getBoolean(props.multiple, "multiple"), label: (_j = (_h = props.listLabel) !== null && _h !== void 0 ? _h : props.label) !== null && _j !== void 0 ? _j : DEFAULT_LABEL }, _options === null || _options === void 0 ? void 0 : _options.map((option) => (React.createElement(DBCustomSelectListItem, { type: props.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: getOptionLabel(option), name: _id, checked: getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: (event) => handleSelect(option.value), key: getOptionKey(option, "custom-select-list-item-") }, !option.isGroupTitle ? (React.createElement(React.Fragment, null, getOptionLabel(option))) : null))))))),
-                    React.createElement("div", null,
-                        React.createElement(DBButton, { variant: "ghost", width: "full", icon: "cross", size: "small", name: _id, form: _id, onClick: (event) => handleClose(undefined, true) }, (_k = props.mobileCloseButtonText) !== null && _k !== void 0 ? _k : DEFAULT_CLOSE_BUTTON))))) : null),
-        ((_l = props.showClearSelection) !== null && _l !== void 0 ? _l : true) && (_values === null || _values === void 0 ? void 0 : _values.length) ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", noText: true, name: _id, form: _id, disabled: getBoolean(props.disabled, "disabled"), onClick: (event) => handleClearAll(event) },
-            props.clearSelectionText,
-            React.createElement(DBTooltip, { placement: "top" }, props.clearSelectionText))) : null,
-        React.createElement("span", { className: "db-custom-select-placeholder", "aria-hidden": getBooleanAsString(true), id: _placeholderId }, (_m = props.placeholder) !== null && _m !== void 0 ? _m : props.label),
-        stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
-        hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
-        React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _invalidMessage),
-        React.createElement("span", { "data-visually-hidden": "true", role: "status" }, _voiceOverFallback)));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n, delay as r, getBoolean as i, getBooleanAsString as a, getHideProp as ee, getOptionKey as o, getSearchInput as te, hasVoiceOver as ne, stringPropVisible as s } from "../../utils/index.js";
+import { DEFAULT_INVALID_MESSAGE_ID_SUFFIX as re, DEFAULT_LABEL_ID_SUFFIX as ie, DEFAULT_MESSAGE_ID_SUFFIX as ae, DEFAULT_PLACEHOLDER_ID_SUFFIX as c, DEFAULT_REMOVE as oe, DEFAULT_SELECTED as se, DEFAULT_SELECT_ID_SUFFIX as ce, DEFAULT_VALID_MESSAGE_ID_SUFFIX as le } from "../../shared/constants.js";
+import ue from "../button/button.js";
+import { addResetEventListener as de } from "../../utils/form-components.js";
+import l from "../infotext/infotext.js";
+import { DocumentClickListener as fe } from "../../utils/document-click-listener.js";
+import { DocumentScrollListener as u } from "../../utils/document-scroll-listener.js";
+import { handleFixedDropdown as pe } from "../../utils/floating-components.js";
+import me from "../custom-select-dropdown/custom-select-dropdown.js";
+import he from "../custom-select-list-item/custom-select-list-item.js";
+import ge from "../custom-select-list/custom-select-list.js";
+import _e from "../input/input.js";
+import ve from "../tooltip/tooltip.js";
+import ye from "../tag/tag.js";
+import { forwardRef as d, useEffect as f, useId as be, useRef as p, useState as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/custom-select/custom-select.tsx
+function v(d, v) {
+	d = {
+		clearSelectionText: "Clear selection",
+		showClearSelection: !0,
+		...d
+	};
+	let xe = be(), Se = v || p(v), y = p(null), b = p(null), x = p(null), S = p(null), [C, Ce] = m(() => void 0), [w, we] = m(() => void 0), [T, E] = m(() => void 0), [D, O] = m(() => void 0), [k, A] = m(() => void 0), [Te, j] = m(() => void 0), [M, Ee] = m(() => void 0), [De, Oe] = m(() => void 0), [ke, Ae] = m(() => void 0), [je, Me] = m(() => void 0), [N, P] = m(() => "no-validation"), [Ne, Pe] = m(() => !1), [Fe, Ie] = m(() => void 0), [Le, Re] = m(() => void 0), [F, I] = m(() => ""), [L, ze] = m(() => void 0), [Be, R] = m(() => ""), [z, Ve] = m(() => []), [He, Ue] = m(() => !1), [We, Ge] = m(() => !1), [B, Ke] = m(() => 0), [V, H] = m(() => []), [U, W] = m(() => []), [qe, Je] = m(() => !1), [Ye, Xe] = m(() => void 0), [Ze, Qe] = m(() => 0), [$e, et] = m(() => void 0), [tt, nt] = m(() => void 0);
+	function rt(e) {
+		e?.target?.contains && e?.target?.contains(y.current) && q();
+	}
+	let [it, at] = m(() => void 0);
+	function ot() {
+		return !!(d.validMessage ?? d.validation === "valid");
+	}
+	function st() {
+		b.current && (b.current.value = lt()), !b.current?.validity.valid || d.validation === "invalid" ? (G(D), A(d.invalidMessage || b.current?.validationMessage || "TODO: Add an invalidMessage"), ne() && (R(k), r(() => R(""), 1e3)), Ne && P(d.validation ?? "invalid")) : ot() && b.current?.validity.valid && d.required ? (G(T), ne() && (R(d.validMessage ?? "TODO: Add a validMessage"), r(() => R(""), 1e3)), P(d.validation ?? "valid")) : s(d.message, d.showMessage) ? (G(w), P(d.validation ?? "no-validation")) : (G(ke), P(d.validation ?? "no-validation"));
+	}
+	function ct(e) {
+		d.onDropdownToggle && (e.stopPropagation(), d.onDropdownToggle(e)), e.target instanceof HTMLDetailsElement && e.target.open ? (Xe(new fe().addCallback((e) => gt(e))), et(new u().addCallback((e) => rt(e))), q(), tt?.observe(y.current), e.target.dataset.test || vt()) : (Ye && new fe().removeCallback(Ye), $e && new u().removeCallback($e), tt?.unobserve(y.current));
+	}
+	function lt() {
+		return V?.length ? V.at(0) ?? "" : "";
+	}
+	function G(e) {
+		let t = [];
+		e && t.push(e), L && F?.length && t.push(L), Re(t.join(" "));
+	}
+	function ut() {
+		return d.selectAllLabel ?? "LABEL SHOULD BE SET";
+	}
+	function K(e) {
+		return e.label ?? e.value?.toString() ?? "";
+	}
+	function dt(e) {
+		return e && V?.includes ? V?.includes(e) : !1;
+	}
+	function ft(e) {
+		let t = d.removeTagsTexts, n = d.options;
+		if (t && n) {
+			let r = n.findIndex((t) => t.value === e.value);
+			if (r >= 0 && r < t.length) return t[r];
+		}
+		return `${oe} ${K(e)}`;
+	}
+	function pt(e, t) {
+		t && t.stopPropagation(), X(e.value), Q();
+	}
+	function q() {
+		if (y.current) {
+			let e = y.current.querySelector("article");
+			e && r(() => {
+				pe(e, y.current, d.placement ?? "bottom");
+			}, 1);
+		}
+	}
+	function mt(e) {
+		if (y.current?.open) {
+			if (self.document) {
+				let t = self.document.activeElement;
+				if (t) if (t.getAttribute("type") === "checkbox" || t.getAttribute("type") === "radio") {
+					let n = t?.closest("li");
+					if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+						let e = n?.nextElementSibling;
+						for (; e;) {
+							let t = e.querySelector("input");
+							if (t) {
+								t.focus();
+								break;
+							}
+							e = e.nextElementSibling;
+						}
+						e || Z(t);
+					} else {
+						let e = n?.previousElementSibling;
+						for (; e;) {
+							let t = e.querySelector("input");
+							if (t) {
+								t.focus();
+								break;
+							}
+							e = e.previousElementSibling;
+						}
+						if (!e) {
+							let e = y.current.querySelector("input[type=\"checkbox\"]");
+							if (e && e !== t) Z(t);
+							else {
+								let e = te(y.current);
+								if (e) r(() => {
+									e.focus();
+								}, 100);
+								else {
+									let e = Array.from(y.current?.querySelectorAll("input[type=\"checkbox\"],input[type=\"radio\"]"));
+									e.length && e.at(-1)?.focus();
+								}
+							}
+						}
+					}
+				} else t.getAttribute("type") === "search" && (e.key === "ArrowUp" || e.key === "ArrowLeft") ? (J(void 0, !0), Q()) : Z(t);
+			}
+		} else (e.key === "ArrowDown" || e.key === "ArrowRight") && (q(), y.current && (y.current.open = !0), vt());
+		e.stopPropagation(), e.preventDefault();
+	}
+	function ht(e) {
+		if (e.stopPropagation(), e.key === "Escape" && y.current?.open) J(void 0, !0), Q();
+		else if (e.key === "Enter" && y.current?.open) {
+			if (self.document) {
+				let t = self.document.activeElement;
+				if (["checkbox", "radio"].includes(t.getAttribute("type") || "")) t.click(), e.preventDefault();
+				else if (t.getAttribute("type") === "search") {
+					let t = U?.find((e) => !e.isGroupTitle && !e.disabled);
+					t?.value && (X(t.value), e.preventDefault());
+				}
+			}
+		} else (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "ArrowRight") && mt(e);
+	}
+	function J(e, t) {
+		if (y.current) {
+			if (t) y.current.open = !1, Q();
+			else if (y.current.open && e && e.relatedTarget) {
+				let t = e.relatedTarget;
+				!y.current.contains(t) && t.localName !== "dialog" && r(() => y.current.open = !1, 1);
+			}
+		}
+	}
+	function gt(e) {
+		if (e) {
+			let t = e.target;
+			y.current?.open && !y.current.contains(t) && (y.current.open = !1);
+		}
+	}
+	function Y(e) {
+		(/* @__PURE__ */ new Date()).getTime() - Ze < 200 || (H(e), Pe(!0), d.onOptionSelected && d.onOptionSelected(e ?? []), Qe((/* @__PURE__ */ new Date()).getTime()));
+	}
+	function X(e) {
+		e && (d.multiple ? V?.includes(e) ? Y(V.filter((t) => t !== e)) : Y([...V || [], e]) : (Y([e]), J(void 0, !0)));
+	}
+	function _t(e) {
+		if (e.stopPropagation(), V?.length === B) Y([]);
+		else {
+			let e = We && S.current ? S.current.value : void 0;
+			Y(d.options ? d.options.filter((t) => !t.isGroupTitle && (!e || t.value?.toLowerCase().includes(e.toLowerCase()))).map((e) => e.value ?? "") : []);
+		}
+	}
+	function Z(e) {
+		if (y.current) {
+			let t = Array.from(y.current.querySelectorAll("input[type=\"checkbox\"],input[type=\"radio\"]"));
+			if (t.length) {
+				let n = t.at(0), i = n === e && t.length > 1 ? t.at(1) : n;
+				i && r(() => {
+					i.focus();
+				}, 1);
+			}
+		}
+	}
+	function vt() {
+		if (y.current) {
+			let e = te(y.current);
+			e ? r(() => {
+				e.focus();
+			}, 1) : Z();
+		}
+	}
+	function yt(e) {
+		if (e === void 0) return;
+		let t;
+		if (typeof e == "string") t = e;
+		else {
+			let n = e;
+			n.stopPropagation(), d.onSearch && d.onSearch(n), t = n.target.value, at(t);
+		}
+		!d.options || !t || t.length === 0 ? W(d.options) : d.searchFilter ? W(d.options.filter((e) => d.searchFilter(e, t))) : W(d.options.filter((e) => !e.isGroupTitle && K(e).toLowerCase().includes(t.toLowerCase())));
+	}
+	function bt(e) {
+		e.stopPropagation(), Y([]), Q();
+	}
+	function Q() {
+		y.current && y.current.querySelector("summary")?.focus();
+	}
+	let [xt, St] = m(() => !1), [Ct, $] = m(() => !1);
+	function wt() {
+		let e = d.id ?? d.propOverrides?.id ?? `custom-select-${xe}`;
+		Ce(e), we(e + ae), E(e + le), O(e + re), j(e + ce), Ee(e + ie), Oe(e + "-summary"), Ae(e + c), ze(e + "-selected-labels"), Me(e + "-info");
+	}
+	function Tt(e) {
+		e.stopPropagation();
+	}
+	return f(() => {
+		wt(), A(d.invalidMessage || "TODO: Add an invalidMessage"), typeof window < "u" && "IntersectionObserver" in window && nt(new IntersectionObserver((e) => {
+			if (y.current) {
+				let t = e.find(({ target: e }) => e === y.current);
+				t && !t.isIntersecting && y.current.open && (y.current.open = !1);
+			}
+		}));
+	}, []), f(() => {
+		(d.id ?? d.propOverrides?.id) && wt();
+	}, [d.id, d.propOverrides?.id]), f(() => {
+		y.current && y.current.addEventListener("focusout", (e) => J(e));
+	}, [y.current]), f(() => {
+		if (C) {
+			let e = C + ae;
+			Ee(C + ie), j(C + ce), E(C + le), O(C + re), Ae(C + c), s(d.message, d.showMessage) ? G(e) : G();
+		}
+	}, [C]), f(() => {
+		if (y.current) {
+			let e = y.current.querySelector("summary");
+			e && e.setAttribute("aria-describedby", d.ariaDescribedBy ?? (Le || ""));
+		}
+	}, [y.current, Le]), f(() => {
+		d.showNoResults === void 0 ? U && Je(U.length === 0) : Je(d.showNoResults);
+	}, [
+		d.showNoResults,
+		d.showLoading,
+		U
+	]), f(() => {
+		Ue(!!(d.multiple && (d.showSelectAll ?? B > 5)));
+	}, [
+		d.showSelectAll,
+		B,
+		d.multiple
+	]), f(() => {
+		Ge(d.showSearch ?? B > 9);
+	}, [d.showSearch, B]), f(() => {
+		let e = d.values;
+		Array.isArray(e) ? V !== e && H(e) : e == null && V?.length !== 0 && H([]);
+	}, [d.values]), f(() => {
+		b.current && st();
+	}, [V, b.current]), f(() => {
+		if (b.current) {
+			let e = Fe;
+			e || (e = new AbortController(), Ie(e));
+			let t = d.values;
+			de(b.current, () => {
+				Y(t || (b.current.value ? [b.current.value] : [])), st();
+			}, e.signal);
+		}
+	}, [b.current]), f(() => {
+		P(d.validation);
+	}, [d.validation]), f(() => {
+		V?.length === 0 ? (St(!1), $(!1)) : V?.length === B ? ($(!1), St(!0)) : V && $(!0);
+	}, [V, B]), f(() => {
+		W(d.options), Ke(d.options?.filter((e) => !e.isGroupTitle).length ?? 0);
+	}, [d.options]), f(() => {
+		if (at(d.searchValue), d.searchValue) {
+			let e = d.searchValue;
+			yt(e);
+		}
+	}, [d.searchValue]), f(() => {
+		d.options?.length && Ve(d.options?.filter((e) => !e.value || !V?.includes ? !1 : !e.isGroupTitle && V?.includes(e.value)));
+	}, [d.options, V]), f(() => {
+		if (d.selectedLabels) {
+			I(d.selectedLabels);
+			return;
+		}
+		if (z?.length) {
+			if (d.transformSelectedLabels) {
+				let e = z, t = d.transformSelectedLabels;
+				I(t(e));
+				return;
+			}
+			d.selectedType === "amount" ? I(d.amountText ? d.amountText : `${z?.length} ${se}`) : I(z?.map((e) => K(e)).join(", "));
+		} else I("");
+	}, [
+		z,
+		d.selectedType,
+		d.amountText,
+		d.selectedLabels,
+		d.transformSelectedLabels
+	]), f(() => {
+		d.onAmountChange && d.onAmountChange(z?.length ?? 0);
+	}, [z]), f(() => {
+		x.current && (x.current.indeterminate = !!Ct);
+	}, [Ct, x.current]), f(() => {
+		A(d.invalidMessage || b.current?.validationMessage || "TODO: Add an invalidMessage");
+	}, [b.current, d.invalidMessage]), f(() => () => {
+		Fe?.abort();
+	}, []), /* @__PURE__ */ _("div", {
+		id: C,
+		ref: Se,
+		...e(d, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density",
+			"onOptionSelected",
+			"onAmountChange",
+			"onDropdownToggle"
+		]),
+		...t(d, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		className: n("db-custom-select", d.className),
+		"aria-invalid": N === "invalid",
+		"data-custom-validity": N,
+		"data-width": d.formFieldWidth,
+		"data-variant": d.variant === "floating" && d.selectedType === "tag" && d.multiple ? "above" : d.variant,
+		"data-required": a(d.required),
+		"data-hide-asterisk": ee(d.showRequiredAsterisk),
+		"data-placement": d.placement,
+		"data-selected-type": d.multiple ? d.selectedType : "text",
+		"data-hide-label": ee(d.showLabel),
+		"data-icon": d.icon,
+		"data-show-icon": a(d.showIcon),
+		children: [
+			/* @__PURE__ */ _("label", {
+				id: M,
+				children: [d.label ?? "LABEL SHOULD BE SET", /* @__PURE__ */ g("select", {
+					role: "none",
+					hidden: !0,
+					id: Te,
+					tabIndex: -1,
+					ref: b,
+					form: d.form,
+					name: d.name,
+					"data-custom-validity": N,
+					multiple: i(d.multiple, "multiple"),
+					disabled: i(d.disabled, "disabled"),
+					required: i(d.required, "required"),
+					onChange: (e) => Tt(e),
+					children: d.options?.length ? /* @__PURE__ */ g(h, { children: d.options?.map((e) => /* @__PURE__ */ g("option", {
+						disabled: e.disabled,
+						value: e.value,
+						children: K(e)
+					}, o(e, "native-select-option-"))) }) : null
+				})]
+			}),
+			/* @__PURE__ */ _("details", {
+				ref: y,
+				open: d.open,
+				onToggle: (e) => ct(e),
+				onKeyDown: (e) => ht(e),
+				children: [d.children, d.options ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("summary", {
+					className: "db-custom-select-form-field",
+					id: De,
+					"aria-disabled": a(d.disabled),
+					tabIndex: d.disabled ? -1 : void 0,
+					"aria-labelledby": M,
+					children: [F?.length ? /* @__PURE__ */ _("span", {
+						"data-visually-hidden": a(d.selectedType === "tag"),
+						id: L,
+						children: [d.selectedPrefix ? /* @__PURE__ */ g("span", {
+							"data-visually-hidden": "true",
+							children: d.selectedPrefix
+						}) : null, F]
+					}) : null, d.selectedType === "tag" ? /* @__PURE__ */ g("div", { children: z?.map((e) => /* @__PURE__ */ g(ye, {
+						emphasis: "strong",
+						behavior: "removable",
+						removeButton: ft(e),
+						onRemove: (t) => pt(e, t),
+						children: K(e)
+					}, o(e, "tag-"))) }) : null]
+				}), /* @__PURE__ */ _(me, {
+					width: d.dropdownWidth,
+					children: [
+						We ? /* @__PURE__ */ g("div", { children: /* @__PURE__ */ g(_e, {
+							type: "search",
+							ref: S,
+							name: C,
+							form: C,
+							showLabel: !1,
+							value: it,
+							label: d.searchLabel ?? "LABEL SHOULD BE SET",
+							placeholder: d.searchPlaceholder ?? d.searchLabel,
+							ariaDescribedBy: qe || d.showLoading ? je : void 0,
+							onInput: (e) => yt(e)
+						}) }) : null,
+						qe || d.showLoading ? /* @__PURE__ */ g(l, {
+							id: je,
+							icon: d.showLoading ? "circular_arrows" : void 0,
+							semantic: d.showLoading ? "informational" : "warning",
+							children: (d.showLoading ? d.loadingText : d.noResultsText) ?? "MESSAGE SHOULD BE SET"
+						}) : /* @__PURE__ */ g(h, { children: /* @__PURE__ */ _(h, { children: [He ? /* @__PURE__ */ g("div", { children: /* @__PURE__ */ g("div", {
+							className: "db-checkbox db-custom-select-list-item",
+							children: /* @__PURE__ */ _("label", { children: [/* @__PURE__ */ g("input", {
+								type: "checkbox",
+								value: "select-all",
+								ref: x,
+								form: C,
+								checked: xt,
+								onChange: (e) => _t(e)
+							}), ut()] })
+						}) }) : null, /* @__PURE__ */ g(ge, {
+							multiple: i(d.multiple, "multiple"),
+							label: d.listLabel ?? d.label ?? "LABEL SHOULD BE SET",
+							children: U?.map((e) => /* @__PURE__ */ g(he, {
+								type: d.multiple ? "checkbox" : "radio",
+								showDivider: e.showDivider,
+								icon: e.icon,
+								isGroupTitle: e.isGroupTitle,
+								groupTitle: K(e),
+								name: C,
+								checked: dt(e.value),
+								disabled: e.disabled,
+								value: e.value,
+								onChange: (t) => X(e.value),
+								children: e.isGroupTitle ? null : /* @__PURE__ */ g(h, { children: K(e) })
+							}, o(e, "custom-select-list-item-")))
+						})] }) }),
+						/* @__PURE__ */ g("div", { children: /* @__PURE__ */ g(ue, {
+							variant: "ghost",
+							width: "full",
+							icon: "cross",
+							size: "small",
+							name: C,
+							form: C,
+							onClick: (e) => J(void 0, !0),
+							children: d.mobileCloseButtonText ?? "Close"
+						}) })
+					]
+				})] }) : null]
+			}),
+			(d.showClearSelection ?? !0) && V?.length ? /* @__PURE__ */ _(ue, {
+				icon: "cross",
+				variant: "ghost",
+				size: "small",
+				noText: !0,
+				name: C,
+				form: C,
+				disabled: i(d.disabled, "disabled"),
+				onClick: (e) => bt(e),
+				children: [d.clearSelectionText, /* @__PURE__ */ g(ve, {
+					placement: "top",
+					children: d.clearSelectionText
+				})]
+			}) : null,
+			/* @__PURE__ */ g("span", {
+				className: "db-custom-select-placeholder",
+				"aria-hidden": a(!0),
+				id: ke,
+				children: d.placeholder ?? d.label
+			}),
+			s(d.message, d.showMessage) ? /* @__PURE__ */ g(l, {
+				size: "small",
+				icon: d.messageIcon,
+				id: w,
+				children: d.message
+			}) : null,
+			ot() ? /* @__PURE__ */ g(l, {
+				size: "small",
+				semantic: "successful",
+				id: T,
+				children: d.validMessage || "TODO: Add a validMessage"
+			}) : null,
+			/* @__PURE__ */ g(l, {
+				size: "small",
+				semantic: "critical",
+				id: D,
+				children: k
+			}),
+			/* @__PURE__ */ g("span", {
+				"data-visually-hidden": "true",
+				role: "status",
+				children: Be
+			})
+		]
+	});
 }
-const DBCustomSelect = forwardRef(DBCustomSelectFn);
-export default DBCustomSelect;
+var xe = d(v);
+//#endregion
+export { xe as default };