@db-ux/react-core-components 4.11.1 → 4.12.1

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

@@ -1,511 +1,690 @@
 "use client";
-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, "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, "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, "disabled"),
-					tabIndex: d.disabled ? -1 : void 0,
-					"aria-labelledby": M,
-					children: [F?.length ? /* @__PURE__ */ _("span", {
-						"data-visually-hidden": a(d.selectedType === "tag", "selectedType"),
-						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": "true",
-				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
-			})
-		]
-	});
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+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.js";
+import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getOptionKey, getSearchInput, hasVoiceOver, stringPropVisible, } from "../../utils/index.js";
+import { DocumentClickListener } from "../../utils/document-click-listener.js";
+import { DocumentScrollListener } from "../../utils/document-scroll-listener.js";
+import { handleFixedDropdown } from "../../utils/floating-components.js";
+import { addResetEventListener, } from "../../utils/form-components.js";
+import DBButton from "../button/button.js";
+import DBCustomSelectDropdown from "../custom-select-dropdown/custom-select-dropdown.js";
+import DBCustomSelectListItem from "../custom-select-list-item/custom-select-list-item.js";
+import DBCustomSelectList from "../custom-select-list/custom-select-list.js";
+import DBInfotext from "../infotext/infotext.js";
+import DBInput from "../input/input.js";
+import DBTag from "../tag/tag.js";
+import DBTooltip from "../tooltip/tooltip.js";
+import { useId } from "react";
+function DBCustomSelectFn(props, component) {
+    props = {
+        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) {
+        if (event?.target?.contains &&
+            event?.target?.contains(detailsRef.current)) {
+            handleAutoPlacement();
+        }
+    }
+    const [_searchValue, set_searchValue] = useState(() => undefined);
+    function hasValidState() {
+        return !!(props.validMessage ?? props.validation === "valid");
+    }
+    function handleValidation() {
+        if (selectRef.current) {
+            selectRef.current.value = getNativeSelectValue();
+        }
+        /* For a11y reasons we need to map the correct message with the select */
+        if (!selectRef.current?.validity.valid || props.validation === "invalid") {
+            setDescById(_invalidMessageId);
+            set_invalidMessage(props.invalidMessage ||
+                selectRef.current?.validationMessage ||
+                DEFAULT_INVALID_MESSAGE);
+            if (hasVoiceOver()) {
+                set_voiceOverFallback(_invalidMessage);
+                void delay(() => set_voiceOverFallback(""), 1000);
+            }
+            if (_userInteraction) {
+                set_validity(props.validation ?? "invalid");
+            }
+        }
+        else if (hasValidState() &&
+            selectRef.current?.validity.valid &&
+            props.required) {
+            setDescById(_validMessageId);
+            if (hasVoiceOver()) {
+                set_voiceOverFallback(props.validMessage ?? DEFAULT_VALID_MESSAGE);
+                void delay(() => set_voiceOverFallback(""), 1000);
+            }
+            set_validity(props.validation ?? "valid");
+        }
+        else if (stringPropVisible(props.message, props.showMessage)) {
+            setDescById(_messageId);
+            set_validity(props.validation ?? "no-validation");
+        }
+        else {
+            setDescById(_placeholderId);
+            set_validity(props.validation ?? "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?.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?.unobserve(detailsRef.current);
+        }
+    }
+    function getNativeSelectValue() {
+        if (_values?.length) {
+            return _values.at(0) ?? "";
+        }
+        return "";
+    }
+    function setDescById(descId) {
+        const descByIds = [];
+        if (descId) {
+            descByIds.push(descId);
+        }
+        if (_selectedLabelsId && _selectedLabels?.length) {
+            descByIds.push(_selectedLabelsId);
+        }
+        set_descByIds(descByIds.join(" "));
+    }
+    function getSelectAllLabel() {
+        return props.selectAllLabel ?? DEFAULT_LABEL;
+    }
+    function getOptionLabel(option) {
+        return option.label ?? option.value?.toString() ?? "";
+    }
+    function getOptionChecked(value) {
+        if (value && _values?.includes) {
+            return _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
+                void delay(() => {
+                    handleFixedDropdown(dropdown, detailsRef.current, props.placement ?? "bottom");
+                }, 1);
+            }
+        }
+    }
+    function handleArrowDownUp(event) {
+        if (detailsRef.current?.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?.closest("li");
+                        if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+                            // Find next element with input, skipping group titles
+                            let nextElement = 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?.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) {
+                                        void delay(() => {
+                                            search.focus();
+                                        }, 100);
+                                    }
+                                    else {
+                                        const checkboxList = Array.from(detailsRef.current?.querySelectorAll(`input[type="checkbox"],input[type="radio"]`));
+                                        if (checkboxList.length) {
+                                            checkboxList.at(-1)?.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) {
+        event.stopPropagation();
+        if (event.key === "Escape" && detailsRef.current?.open) {
+            handleClose(undefined, true);
+            handleSummaryFocus();
+        }
+        else if (event.key === "Enter" && detailsRef.current?.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?.find((opt) => !opt.isGroupTitle && !opt.disabled);
+                    if (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) {
+        if (event) {
+            // stencil is sending a custom event which wraps the pointer event into details
+            const target = event.target;
+            if (detailsRef.current?.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 ?? []);
+        }
+        set_internalChangeTimestamp(new Date().getTime());
+    }
+    function handleSelect(value) {
+        if (value) {
+            if (props.multiple) {
+                if (_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?.length === amountOptions) {
+            handleOptionSelected([]);
+        }
+        else {
+            const searchValue = searchEnabled && searchInputRef.current
+                ? searchInputRef.current.value
+                : undefined;
+            handleOptionSelected(props.options
+                ? props
+                    .options.filter((option) => !option.isGroupTitle &&
+                    (!searchValue ||
+                        option.value
+                            ?.toLowerCase()
+                            .includes(searchValue.toLowerCase())))
+                    .map((option) => option.value ?? "")
+                : []);
+        }
+    }
+    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) {
+                    void 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) {
+                void 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())));
+        }
+        if (detailsRef.current?.open) {
+            handleAutoPlacement();
+        }
+    }
+    function handleClearAll(event) {
+        event.stopPropagation();
+        handleOptionSelected([]);
+        handleSummaryFocus();
+    }
+    function handleSummaryFocus() {
+        if (detailsRef.current) {
+            detailsRef.current
+                .querySelector("summary")
+                ?.focus();
+        }
+    }
+    const [selectAllChecked, setSelectAllChecked] = useState(() => false);
+    const [selectAllIndeterminate, setSelectAllIndeterminate] = useState(() => false);
+    function resetIds() {
+        const mId = props.id ?? props.propOverrides?.id ?? `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(() => {
+        if (props.id ?? props.propOverrides?.id) {
+            resetIds();
+        }
+    }, [props.id, props.propOverrides?.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(() => {
+        if (detailsRef.current) {
+            const summary = detailsRef.current.querySelector("summary");
+            if (summary) {
+                summary.setAttribute("aria-describedby", props.ariaDescribedBy ?? (_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(() => {
+        setSelectAllEnabled(Boolean(props.multiple && (props.showSelectAll ?? amountOptions > 5)));
+    }, [props.showSelectAll, amountOptions, props.multiple]);
+    useEffect(() => {
+        setSearchEnabled(props.showSearch ?? 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?.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?.length === 0) {
+            setSelectAllChecked(false);
+            setSelectAllIndeterminate(false);
+        }
+        else if (_values?.length === amountOptions) {
+            setSelectAllIndeterminate(false);
+            setSelectAllChecked(true);
+        }
+        else if (_values) {
+            setSelectAllIndeterminate(true);
+        }
+    }, [_values, amountOptions]);
+    useEffect(() => {
+        set_options(props.options);
+        setAmountOptions(props.options?.filter((option) => !option.isGroupTitle).length ?? 0);
+        // Reposition open auto-width dropdowns: replacing options can change their content width.
+        if (detailsRef.current?.open) {
+            handleAutoPlacement();
+        }
+    }, [props.options]);
+    useEffect(() => {
+        set_searchValue(props.searchValue);
+        if (props.searchValue) {
+            const sValue = props.searchValue; // <- workaround for Angular
+            handleSearch(sValue);
+        }
+    }, [props.searchValue]);
+    useEffect(() => {
+        if (props.options?.length) {
+            set_selectedOptions(props.options?.filter((option) => {
+                if (!option.value || !_values?.["includes"]) {
+                    return false;
+                }
+                return !option.isGroupTitle && _values?.includes(option.value);
+            }));
+        }
+    }, [props.options, _values]);
+    useEffect(() => {
+        if (props.selectedLabels) {
+            set_selectedLabels(props.selectedLabels);
+            return;
+        }
+        if (_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?.length} ${DEFAULT_SELECTED}`);
+            }
+            else {
+                set_selectedLabels(_selectedOptions
+                    ?.map((option) => getOptionLabel(option))
+                    .join(", "));
+            }
+        }
+        else {
+            set_selectedLabels("");
+        }
+    }, [
+        _selectedOptions,
+        props.selectedType,
+        props.amountText,
+        props.selectedLabels,
+        props.transformSelectedLabels,
+    ]);
+    useEffect(() => {
+        if (props.onAmountChange) {
+            props.onAmountChange(_selectedOptions?.length ?? 0);
+        }
+    }, [_selectedOptions]);
+    useEffect(() => {
+        if (selectAllRef.current) {
+            selectAllRef.current.indeterminate = Boolean(selectAllIndeterminate);
+        }
+    }, [selectAllIndeterminate, selectAllRef.current]);
+    useEffect(() => {
+        set_invalidMessage(props.invalidMessage ||
+            selectRef.current?.validationMessage ||
+            DEFAULT_INVALID_MESSAGE);
+    }, [selectRef.current, props.invalidMessage]);
+    useEffect(() => {
+        return () => {
+            abortController?.abort();
+        };
+    }, []);
+    return (_jsxs("div", { 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, "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, "showIcon"), children: [_jsxs("label", { id: _labelId, children: [props.label ?? DEFAULT_LABEL, _jsx("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), children: props.options?.length ? (_jsx(_Fragment, { children: props.options?.map((option) => (_jsx("option", { disabled: option.disabled, value: option.value, children: getOptionLabel(option) }, getOptionKey(option, "native-select-option-")))) })) : null })] }), _jsxs("details", { ref: detailsRef, open: props.open, onToggle: (event) => handleDropdownToggle(event), onKeyDown: (event) => handleKeyboardPress(event), children: [props.children, props.options ? (_jsxs(_Fragment, { children: [_jsxs("summary", { className: "db-custom-select-form-field", id: _summaryId, "aria-disabled": getBooleanAsString(props.disabled, "disabled"), tabIndex: props.disabled ? -1 : undefined, "aria-labelledby": _labelId, children: [_selectedLabels?.length ? (_jsxs("span", { "data-visually-hidden": getBooleanAsString(props.selectedType === "tag", "selectedType"), id: _selectedLabelsId, children: [props.selectedPrefix ? (_jsx("span", { "data-visually-hidden": "true", children: props.selectedPrefix })) : null, _selectedLabels] })) : null, props.selectedType === "tag" ? (_jsx("div", { children: _selectedOptions?.map((option) => (_jsx(DBTag, { emphasis: "strong", behavior: "removable", removeButton: getTagRemoveLabel(option), onRemove: (event) => handleTagRemove(option, event), children: getOptionLabel(option) }, getOptionKey(option, "tag-")))) })) : null] }), _jsxs(DBCustomSelectDropdown, { width: props.dropdownWidth, children: [searchEnabled ? (_jsx("div", { children: _jsx(DBInput, { type: "search", ref: searchInputRef, name: _id, form: _id, showLabel: false, value: _searchValue, label: props.searchLabel ?? DEFAULT_LABEL, placeholder: props.searchPlaceholder ?? props.searchLabel, ariaDescribedBy: _hasNoOptions || props.showLoading
+                                                ? _infoTextId
+                                                : undefined, onInput: (event) => handleSearch(event) }) })) : null, _hasNoOptions || props.showLoading ? (_jsx(DBInfotext, { id: _infoTextId, icon: props.showLoading ? "circular_arrows" : undefined, semantic: props.showLoading ? "informational" : "warning", children: (props.showLoading
+                                            ? props.loadingText
+                                            : props.noResultsText) ?? DEFAULT_MESSAGE })) : (_jsx(_Fragment, { children: _jsxs(_Fragment, { children: [selectAllEnabled ? (_jsx("div", { children: _jsx("div", { className: "db-checkbox db-custom-select-list-item", children: _jsxs("label", { children: [_jsx("input", { type: "checkbox", value: "select-all", ref: selectAllRef, form: _id, checked: selectAllChecked, onChange: (event) => handleSelectAll(event) }), getSelectAllLabel()] }) }) })) : null, _jsx(DBCustomSelectList, { multiple: getBoolean(props.multiple, "multiple"), label: props.listLabel ?? props.label ?? DEFAULT_LABEL, children: _options?.map((option) => (_jsx(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), children: !option.isGroupTitle ? (_jsx(_Fragment, { children: getOptionLabel(option) })) : null }, getOptionKey(option, "custom-select-list-item-")))) })] }) })), _jsx("div", { children: _jsx(DBButton, { variant: "ghost", width: "full", icon: "cross", size: "small", name: _id, form: _id, onClick: (event) => handleClose(undefined, true), children: props.mobileCloseButtonText ?? DEFAULT_CLOSE_BUTTON }) })] })] })) : null] }), (props.showClearSelection ?? true) && _values?.length ? (_jsxs(DBButton, { icon: "cross", variant: "ghost", size: "small", noText: true, name: _id, form: _id, disabled: getBoolean(props.disabled, "disabled"), onClick: (event) => handleClearAll(event), children: [props.clearSelectionText, _jsx(DBTooltip, { placement: "top", children: props.clearSelectionText })] })) : null, _jsx("span", { className: "db-custom-select-placeholder", "aria-hidden": "true", id: _placeholderId, children: props.placeholder ?? props.label }), stringPropVisible(props.message, props.showMessage) ? (_jsx(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId, children: props.message })) : null, hasValidState() ? (_jsx(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId, children: props.validMessage || DEFAULT_VALID_MESSAGE })) : null, _jsx(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId, children: _invalidMessage }), _jsx("span", { "data-visually-hidden": "true", role: "status", children: _voiceOverFallback })] }));
 }
-var xe = d(v);
-//#endregion
-export { xe as default };
+const DBCustomSelect = forwardRef(DBCustomSelectFn);
+export default DBCustomSelect;