@db-ux/react-core-components 2.0.0-0-6589a60 → 2.0.0-0-custom-select-16b8cce

package/dist/components/checkbox/checkbox.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBCheckbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "checked" | keyof import("../../shared/model").GlobalProps | "indeterminate" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").FormProps | keyof import("../../shared/model").FormMessageProps> & import("./model").DBCheckboxDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").FormProps & import("../../shared/model").FormCheckProps & import("../../shared/model").FormMessageProps & import("../../shared/model").SizeProps & React.RefAttributes<HTMLInputElement>>;
+declare const DBCheckbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "required" | "value" | "size" | "checked" | keyof import("../../shared/model").GlobalProps | "indeterminate" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | "showLabel" | keyof import("../../shared/model").FormMessageProps> & import("./model").DBCheckboxDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").FormCheckProps & import("../../shared/model").FormMessageProps & import("../../shared/model").SizeProps & React.RefAttributes<HTMLInputElement>>;
 export default DBCheckbox;

package/dist/components/checkbox/checkbox.js

@@ -6,7 +6,7 @@ import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_MES
 import DBInfotext from "../infotext/infotext";
 import { cls, delay, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 function DBCheckboxFn(props, component) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
     const [_id, set_id] = useState(() => undefined);
@@ -106,7 +106,7 @@ function DBCheckboxFn(props, component) {
             props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)),
         stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
         React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, (_a = props.validMessage) !== null && _a !== void 0 ? _a : DEFAULT_VALID_MESSAGE),
-        React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, (_d = (_b = props.invalidMessage) !== null && _b !== void 0 ? _b : (_c = _ref.current) === null || _c === void 0 ? void 0 : _c.validationMessage) !== null && _d !== void 0 ? _d : DEFAULT_INVALID_MESSAGE),
+        React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, (_b = props.invalidMessage) !== null && _b !== void 0 ? _b : (((_c = _ref.current) === null || _c === void 0 ? void 0 : _c.validationMessage) || DEFAULT_INVALID_MESSAGE)),
         React.createElement("span", { "data-visually-hidden": "true", role: "status" }, _voiceOverFallback)));
 }
 const DBCheckbox = forwardRef(DBCheckboxFn);

package/dist/components/custom-select/custom-select.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBCustomSelect: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "required" | "width" | "icon" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | "showLabel" | keyof import("../../shared/model").FormMessageProps | keyof import("./model").DBCustomSelectDefaultProps> & import("../../shared/model").GlobalProps & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").FormMessageProps & import("./model").DBCustomSelectDefaultProps & import("../../shared/model").WidthProps & import("../../shared/model").IconProps & import("../../shared/model").ShowIconProps & import("../../shared/model").ShowLabelProps & React.RefAttributes<HTMLDivElement>>;
+export default DBCustomSelect;

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

@@ -0,0 +1,543 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, delay, getBooleanAsString, getHideProp, getSearchInput, handleDataOutside, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+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 DBCustomSelectList from "../custom-select-list/custom-select-list";
+import DBCustomSelectListItem from "../custom-select-list-item/custom-select-list-item";
+import DBCustomSelectDropdown from "../custom-select-dropdown/custom-select-dropdown";
+import DBInfotext from "../infotext/infotext";
+import DBTag from "../tag/tag";
+import DBButton from "../button/button";
+import DBTooltip from "../tooltip/tooltip";
+import DBInput from "../input/input";
+function DBCustomSelectFn(props, component) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    props = Object.assign({ clearSelectionLabel: "Clear selection", showClearSelection: true }, props);
+    const _ref = component || useRef(component);
+    const detailsRef = useRef(null);
+    const selectRef = useRef(null);
+    const selectAllRef = useRef(null);
+    const [_name, set_name] = useState(() => undefined);
+    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 [_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 [_descByIds, set_descByIds] = useState(() => "");
+    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 [_internalChangeTimestamp, set_internalChangeTimestamp] = useState(() => -1);
+    const [_externalChangeTimestamp, set_externalChangeTimestamp] = useState(() => -1);
+    function handleDropdownToggle(event) {
+        if (props.onDropdownToggle) {
+            props.onDropdownToggle(event);
+        }
+    }
+    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, _b, _c;
+        if (!selectAllRef.current)
+            return (_a = props.selectAllLabel) !== null && _a !== void 0 ? _a : DEFAULT_LABEL;
+        if (selectAllRef.current.indeterminate || !selectAllChecked) {
+            return (_b = props.selectAllLabel) !== null && _b !== void 0 ? _b : DEFAULT_LABEL;
+        }
+        else {
+            return (_c = props.deSelectAllLabel) !== null && _c !== void 0 ? _c : 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 && _values.includes) {
+            return _values === null || _values === void 0 ? void 0 : _values.includes(value);
+        }
+        return false;
+    }
+    function getOptionKey(option) {
+        var _a, _b;
+        return ((_b = (_a = option.id) !== null && _a !== void 0 ? _a : option.value) !== null && _b !== void 0 ? _b : uuid()).toString();
+    }
+    function getTagRemoveLabel(index) {
+        return props.removeTagsTexts && props.removeTagsTexts.length > index
+            ? props.removeTagsTexts.at(index)
+            : `${DEFAULT_REMOVE} ${_selectedOptions ? getOptionLabel(_selectedOptions[index]) : ""}`;
+    }
+    function handleTagRemove(option, event) {
+        event.stopPropagation();
+        handleSelect(option.value);
+        handleSummaryFocus();
+    }
+    function handleAutoPlacement() {
+        if (detailsRef.current) {
+            const dropdown = detailsRef.current.querySelector("article");
+            if (dropdown) {
+                delay(() => {
+                    handleDataOutside(dropdown);
+                }, 100);
+            }
+        }
+    }
+    function handleArrowDownUp(event) {
+        var _a, _b, _c, _d, _e;
+        if ((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open) {
+            if (document) {
+                const activeElement = 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") {
+                            if (listElement === null || listElement === void 0 ? void 0 : listElement.nextElementSibling) {
+                                (_b = listElement === null || listElement === void 0 ? void 0 : listElement.nextElementSibling.querySelector("input")) === null || _b === void 0 ? void 0 : _b.focus();
+                            }
+                            else {
+                                // We are on the last checkbox we move to the top checkbox
+                                handleFocusFirstDropdownCheckbox(activeElement);
+                            }
+                        }
+                        else {
+                            if (listElement === null || listElement === void 0 ? void 0 : listElement.previousElementSibling) {
+                                (_c = listElement === null || listElement === void 0 ? void 0 : listElement.previousElementSibling.querySelector("input")) === null || _c === void 0 ? void 0 : _c.focus();
+                            }
+                            else if (detailsRef.current.querySelector(`input[type="checkbox"]`) !==
+                                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((_d = detailsRef.current) === null || _d === void 0 ? void 0 : _d.querySelectorAll(`input[type="checkbox"],input[type="radio"]`));
+                                    if (checkboxList.length) {
+                                        (_e = checkboxList.at(-1)) === null || _e === void 0 ? void 0 : _e.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("close");
+                            handleSummaryFocus();
+                        }
+                        else {
+                            // 3. Otherwise, we need to move to the first checkbox
+                            handleFocusFirstDropdownCheckbox(activeElement);
+                        }
+                    }
+                }
+            }
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        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;
+        if (event.key === "Escape" &&
+            detailsRef.current &&
+            ((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open)) {
+            handleClose("close");
+            handleSummaryFocus();
+        }
+        else if (event.key === "ArrowDown" ||
+            event.key === "ArrowUp" ||
+            event.key === "ArrowLeft" ||
+            event.key === "ArrowRight") {
+            handleArrowDownUp(event);
+        }
+    }
+    function handleClose(event) {
+        if (detailsRef.current) {
+            if (event === "close") {
+                detailsRef.current.open = false;
+                handleSummaryFocus();
+            }
+            else if (detailsRef.current.open && (event === null || event === void 0 ? void 0 : event.relatedTarget)) {
+                const relatedTarget = event.relatedTarget;
+                if (!detailsRef.current.contains(relatedTarget)) {
+                    detailsRef.current.open = false;
+                }
+            }
+        }
+    }
+    function handleDocumentClose(event) {
+        var _a;
+        if (((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open) &&
+            !detailsRef.current.contains(event.target)) {
+            detailsRef.current.open = false;
+        }
+    }
+    function handleSelect(value) {
+        if (value) {
+            if (props.multiple) {
+                if (_values === null || _values === void 0 ? void 0 : _values.includes(value)) {
+                    set_values(_values === null || _values === void 0 ? void 0 : _values.filter((v) => v !== value));
+                }
+                else {
+                    set_values([...(_values || []), value]);
+                }
+            }
+            else {
+                set_values([value]);
+                handleClose("close");
+            }
+            set_internalChangeTimestamp(new Date().getTime());
+        }
+    }
+    function handleSelectAll() {
+        if ((_values === null || _values === void 0 ? void 0 : _values.length) === amountOptions) {
+            set_values([]);
+        }
+        else {
+            set_values(props.options
+                ? props.options
+                    .filter((option) => !option.isGroupTitle)
+                    .map((option) => { var _a; return (_a = option.value) !== null && _a !== void 0 ? _a : ""; })
+                : []);
+        }
+        set_internalChangeTimestamp(new Date().getTime());
+    }
+    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();
+                    }, 100);
+                }
+            }
+        }
+    }
+    function handleOpenByKeyboardFocus(onlySearch) {
+        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();
+                }, 100);
+            }
+            else if (!onlySearch) {
+                // Focus first checkbox otherwise
+                handleFocusFirstDropdownCheckbox();
+            }
+        }
+    }
+    function handleSearch(event) {
+        const filterText = event.target.value;
+        set_options(!props.options || !filterText || filterText.length === 0
+            ? props.options
+            : props.options.filter((option) => !option.isGroupTitle &&
+                getOptionLabel(option)
+                    .toLowerCase()
+                    .includes(filterText.toLowerCase())));
+    }
+    function handleClearAll() {
+        set_values([]);
+        handleSummaryFocus();
+    }
+    function handleSummaryFocus() {
+        var _a, _b;
+        (_b = (_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("summary")) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+    const [selectAllChecked, setSelectAllChecked] = useState(() => false);
+    const [selectAllIndeterminate, setSelectAllIndeterminate] = useState(() => false);
+    useEffect(() => {
+        var _a;
+        const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `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");
+        if (document) {
+            document.addEventListener("click", handleDocumentClose);
+        }
+    }, []);
+    useEffect(() => {
+        var _a;
+        set_name((_a = props.name) !== null && _a !== void 0 ? _a : _id);
+    }, [props.name, _id]);
+    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", _descByIds || "");
+            }
+        }
+    }, [detailsRef.current, _descByIds]);
+    useEffect(() => {
+        if (detailsRef.current) {
+            const summary = detailsRef.current.querySelector("summary");
+            if (summary) {
+                summary.addEventListener("click", () => {
+                    handleAutoPlacement();
+                    handleOpenByKeyboardFocus(true);
+                });
+                summary.addEventListener("keydown", (event) => {
+                    var _a;
+                    if (event.code === "Space" && !((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open)) {
+                        handleOpenByKeyboardFocus();
+                    }
+                });
+            }
+            detailsRef.current.addEventListener("focusout", (event) => handleClose(event));
+        }
+    }, [detailsRef.current]);
+    useEffect(() => {
+        if (props.showNoResults !== undefined) {
+            set_hasNoOptions(props.showNoResults);
+        }
+        else if (_options) {
+            set_hasNoOptions(_options.length === 0);
+        }
+    }, [props.showNoResults, _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(() => {
+        if (props.onSelect &&
+            (_externalChangeTimestamp || _internalChangeTimestamp)) {
+            const onlyInternalChange = _internalChangeTimestamp && !_externalChangeTimestamp;
+            const bothChangeButInternalNew = _internalChangeTimestamp &&
+                _externalChangeTimestamp &&
+                _internalChangeTimestamp > _externalChangeTimestamp;
+            if (onlyInternalChange || bothChangeButInternalNew) {
+                props.onSelect(_values !== null && _values !== void 0 ? _values : []);
+                const fakeEvent = {
+                    target: {
+                        values: _values,
+                    },
+                };
+            }
+        }
+    }, [_externalChangeTimestamp, _internalChangeTimestamp, props.onSelect]);
+    useEffect(() => {
+        var _a;
+        if (props.values && Array.isArray(props.values)) {
+            set_values((_a = props.values) !== null && _a !== void 0 ? _a : []);
+            set_externalChangeTimestamp(new Date().getTime());
+        }
+    }, [props.values]);
+    useEffect(() => {
+        var _a, _b, _c, _d, _e, _f;
+        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") {
+            set_validity("invalid");
+            setDescById(_invalidMessageId);
+            if (hasVoiceOver()) {
+                set_voiceOverFallback((_d = (_b = props.invalidMessage) !== null && _b !== void 0 ? _b : (_c = selectRef.current) === null || _c === void 0 ? void 0 : _c.validationMessage) !== null && _d !== void 0 ? _d : DEFAULT_INVALID_MESSAGE);
+                delay(() => set_voiceOverFallback(""), 1000);
+            }
+        }
+        else if (props.validation === "valid" ||
+            (((_e = selectRef.current) === null || _e === void 0 ? void 0 : _e.validity.valid) && props.required)) {
+            set_validity("valid");
+            setDescById(_validMessageId);
+            if (hasVoiceOver()) {
+                set_voiceOverFallback((_f = props.validMessage) !== null && _f !== void 0 ? _f : DEFAULT_VALID_MESSAGE);
+                delay(() => set_voiceOverFallback(""), 1000);
+            }
+        }
+        else if (props.message) {
+            set_validity("no-validation");
+            setDescById(_messageId);
+        }
+        else {
+            set_validity("no-validation");
+            setDescById(_placeholderId);
+        }
+    }, [_values]);
+    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(() => {
+        if (_options === null || _options === void 0 ? void 0 : _options.length) {
+            set_selectedOptions(_options === null || _options === void 0 ? void 0 : _options.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));
+            }));
+        }
+    }, [_options, _values]);
+    useEffect(() => {
+        if (_selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.length) {
+            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]);
+    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(() => {
+        return () => {
+            if (document) {
+                document.removeEventListener("click", handleDocumentClose);
+            }
+        };
+    }, []);
+    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"]), 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"]), { className: cls("db-custom-select", props.className), "aria-invalid": _validity === "invalid", "data-custom-validity": _validity, "data-width": props.width, "data-variant": props.variant, "data-required": getBooleanAsString(props.required), "data-placement": props.placement, "data-selected-type": props.multiple ? props.selectedType : "text", "data-hide-label": getHideProp(props.showLabel), "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon) }),
+        React.createElement("label", { id: _labelId }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL,
+            React.createElement("select", { role: "none", hidden: true, id: _selectId, tabIndex: -1, ref: selectRef, form: props.form, disabled: props.disabled, multiple: props.multiple, required: props.required, onChange: (event) => { } }, _options === null || _options === void 0 ? void 0 : _options.map((option) => (React.createElement("option", { disabled: option.disabled, value: option.value, key: getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option) }, getOptionLabel(option)))))),
+        React.createElement("details", { ref: detailsRef, open: props.open, "aria-disabled": props.disabled, 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-labelledby": _labelId },
+                    (_selectedLabels === null || _selectedLabels === void 0 ? void 0 : _selectedLabels.length) ? (React.createElement("span", { "data-visually-hidden": getBooleanAsString(props.selectedType === "tag"), id: _selectedLabelsId }, _selectedLabels)) : null,
+                    props.selectedType === "tag" ? (React.createElement("div", null, _selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.map((option, index) => (React.createElement(DBTag, { emphasis: "strong", behavior: "removable", removeButton: getTagRemoveLabel(index), onRemove: (event) => {
+                            handleTagRemove(option, event);
+                        }, key: "tag-" + getOptionKey(option) }, getOptionLabel(option)))))) : null),
+                React.createElement(DBCustomSelectDropdown, { width: props.dropdownWidth },
+                    searchEnabled ? (React.createElement("div", null,
+                        React.createElement(DBInput, { type: "search", showLabel: false, label: (_b = props.searchLabel) !== null && _b !== void 0 ? _b : DEFAULT_LABEL, placeholder: (_c = props.searchPlaceholder) !== null && _c !== void 0 ? _c : props.searchLabel, ariaDescribedBy: _hasNoOptions || props.showLoading
+                                ? _infoTextId
+                                : undefined, onInput: (event) => handleSearch(event) }))) : null,
+                    _hasNoOptions || props.showLoading ? (React.createElement(DBInfotext, { id: _infoTextId, icon: _hasNoOptions ? undefined : "circular_arrows", semantic: _hasNoOptions ? "warning" : "informational" }, (_d = (_hasNoOptions ? props.noResultsText : props.loadingText)) !== null && _d !== void 0 ? _d : 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() }),
+                                        getSelectAllLabel())))) : null,
+                            React.createElement(DBCustomSelectList, { multiple: props.multiple, label: (_e = props.label) !== null && _e !== void 0 ? _e : 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: _name, checked: getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: (event) => {
+                                    handleSelect(option.value);
+                                }, key: getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option) }, !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", onClick: (event) => {
+                                handleClose("close");
+                            } }, (_f = props.mobileCloseButtonText) !== null && _f !== void 0 ? _f : DEFAULT_CLOSE_BUTTON))))) : null),
+        ((_g = props.showClearSelection) !== null && _g !== void 0 ? _g : true) && (_values === null || _values === void 0 ? void 0 : _values.length) ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", noText: true, onClick: (event) => handleClearAll() },
+            props.clearSelectionLabel,
+            React.createElement(DBTooltip, { placement: "top" }, props.clearSelectionLabel))) : null,
+        React.createElement("span", { "aria-hidden": getBooleanAsString(true), id: _placeholderId }, (_h = props.placeholder) !== null && _h !== void 0 ? _h : props.label),
+        props.message ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
+        React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, (_j = props.validMessage) !== null && _j !== void 0 ? _j : DEFAULT_VALID_MESSAGE),
+        React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, (_k = props.invalidMessage) !== null && _k !== void 0 ? _k : (((_l = selectRef.current) === null || _l === void 0 ? void 0 : _l.validationMessage) || DEFAULT_INVALID_MESSAGE)),
+        React.createElement("span", { "data-visually-hidden": "true", role: "status" }, _voiceOverFallback)));
+}
+const DBCustomSelect = forwardRef(DBCustomSelectFn);
+export default DBCustomSelect;

package/dist/components/custom-select/index.d.ts

@@ -0,0 +1 @@
+export { default as DBCustomSelect } from './custom-select';

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

@@ -0,0 +1 @@
+export { default as DBCustomSelect } from './custom-select';