@db-ux/react-core-components 2.0.8 → 2.0.10-popover-d7e8b9a

package/dist/components/button/button.js

@@ -6,8 +6,8 @@ import { cls, getBoolean, getBooleanAsString, getHideProp } from "../../utils";
 function DBButtonFn(props, component) {
     const _ref = component || useRef(component);
     function handleClick(event) {
-        event.stopPropagation();
         if (props.onClick) {
+            event.stopPropagation();
             props.onClick(event);
         }
     }

package/dist/components/card/card.js

@@ -6,8 +6,8 @@ import { cls } from "../../utils";
 function DBCardFn(props, component) {
     const _ref = component || useRef(component);
     function handleClick(event) {
-        event.stopPropagation();
         if (props.onClick) {
+            event.stopPropagation();
             props.onClick(event);
         }
     }

package/dist/components/checkbox/checkbox.js

@@ -6,6 +6,7 @@ import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_MES
 import DBInfotext from "../infotext/infotext";
 import { cls, delay, getBoolean, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 function DBCheckboxFn(props, component) {
+    var _a;
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
     const [_id, set_id] = useState(() => undefined);
@@ -114,7 +115,7 @@ function DBCheckboxFn(props, component) {
     }, [initialized, _ref.current, props.checked]);
     return (React.createElement("div", Object.assign({}, 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-checkbox", props.className), "data-size": props.size, "data-hide-label": getHideProp(props.showLabel) }),
         React.createElement("label", { htmlFor: _id },
-            React.createElement("input", Object.assign({ type: "checkbox", "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, 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"]), { id: _id, name: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, required: getBoolean(props.required, "required"), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": _descByIds })),
+            React.createElement("input", Object.assign({ type: "checkbox", "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, 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"]), { id: _id, name: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, required: getBoolean(props.required, "required"), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": (_a = props.ariaDescribedBy) !== null && _a !== void 0 ? _a : _descByIds })),
             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,
         hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,

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

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getSearchInput, handleDataOutside, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getSearchInput, 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";
@@ -13,8 +13,10 @@ import DBButton from "../button/button";
 import DBTooltip from "../tooltip/tooltip";
 import DBInput from "../input/input";
 import { DocumentClickListener } from "../../utils/document-click-listener";
+import { DocumentScrollListener } from "../../utils/document-scroll-listener";
+import { handleFixedDropdown } from "../../utils/floating-components";
 function DBCustomSelectFn(props, component) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     props = Object.assign({ clearSelectionText: "Clear selection", showClearSelection: true }, props);
     const _ref = component || useRef(component);
     const detailsRef = useRef(null);
@@ -45,6 +47,15 @@ function DBCustomSelectFn(props, component) {
     const [_hasNoOptions, set_hasNoOptions] = useState(() => false);
     const [_documentClickListenerCallbackId, set_documentClickListenerCallbackId,] = useState(() => undefined);
     const [_internalChangeTimestamp, set_internalChangeTimestamp] = useState(() => 0);
+    const [_documentScrollListenerCallbackId, set_documentScrollListenerCallbackId,] = useState(() => undefined);
+    const [_observer, set_observer] = useState(() => undefined);
+    function handleDocumentScroll(event) {
+        var _a, _b;
+        if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.contains) &&
+            ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.contains(detailsRef.current))) {
+            handleAutoPlacement();
+        }
+    }
     function hasValidState() {
         var _a;
         return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
@@ -87,15 +98,27 @@ function DBCustomSelectFn(props, component) {
     }
     function handleDropdownToggle(event) {
         if (props.onDropdownToggle) {
+            event.stopPropagation();
             props.onDropdownToggle(event);
         }
         if (event.target.open) {
             set_documentClickListenerCallbackId(new DocumentClickListener().addCallback((event) => handleDocumentClose(event)));
+            set_documentScrollListenerCallbackId(new DocumentScrollListener().addCallback((event) => handleDocumentScroll(event)));
+            handleAutoPlacement();
+            _observer === null || _observer === void 0 ? void 0 : _observer.observe(detailsRef.current);
+            if (!event.target.dataset.test) {
+                // We need this workaround for snapshot testing
+                handleOpenByKeyboardFocus();
+            }
         }
         else {
             if (_documentClickListenerCallbackId) {
                 new DocumentClickListener().removeCallback(_documentClickListenerCallbackId);
             }
+            if (_documentScrollListenerCallbackId) {
+                new DocumentScrollListener().removeCallback(_documentScrollListenerCallbackId);
+            }
+            _observer === null || _observer === void 0 ? void 0 : _observer.unobserve(detailsRef.current);
         }
     }
     function getNativeSelectValue() {
@@ -134,9 +157,12 @@ function DBCustomSelectFn(props, component) {
         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]) : ""}`;
+        if (props.removeTagsTexts && props.removeTagsTexts.length > index) {
+            return props.removeTagsTexts.at(index);
+        }
+        else {
+            return `${DEFAULT_REMOVE} ${_selectedOptions ? getOptionLabel(_selectedOptions[index]) : ""}`;
+        }
     }
     function handleTagRemove(option, event) {
         event.stopPropagation();
@@ -147,17 +173,19 @@ function DBCustomSelectFn(props, component) {
         if (detailsRef.current) {
             const dropdown = detailsRef.current.querySelector("article");
             if (dropdown) {
+                // This is a workaround for Angular
                 delay(() => {
-                    handleDataOutside(dropdown);
-                }, 100);
+                    var _a;
+                    handleFixedDropdown(dropdown, detailsRef.current, (_a = props.placement) !== null && _a !== void 0 ? _a : "bottom");
+                }, 1);
             }
         }
     }
     function handleArrowDownUp(event) {
         var _a, _b, _c, _d, _e, _f, _g;
         if ((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open) {
-            if (document) {
-                const activeElement = document.activeElement;
+            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" ||
@@ -214,8 +242,6 @@ function DBCustomSelectFn(props, component) {
                     }
                 }
             }
-            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
@@ -224,15 +250,14 @@ function DBCustomSelectFn(props, component) {
                 detailsRef.current.open = true;
             }
             handleOpenByKeyboardFocus();
-            event.stopPropagation();
-            event.preventDefault();
         }
+        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)) {
+        event.stopPropagation();
+        if (event.key === "Escape" && ((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open)) {
             handleClose("close");
             handleSummaryFocus();
         }
@@ -252,25 +277,29 @@ function DBCustomSelectFn(props, component) {
             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;
+                    // We need to use delay here because the combination of `contains`
+                    // and changing the DOM element causes a race condition inside browser
+                    delay(() => (detailsRef.current.open = false), 1);
                 }
             }
         }
     }
     function handleDocumentClose(event) {
         var _a;
-        // stencil is sending a custom event which wraps the pointer event into details
-        const target = event.target;
-        if (((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open) && !detailsRef.current.contains(target)) {
-            detailsRef.current.open = false;
+        if (event) {
+            // stencil is sending a custom event which wraps the pointer event into details
+            const target = event.target;
+            if (((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open) && !detailsRef.current.contains(target)) {
+                detailsRef.current.open = false;
+            }
         }
     }
     function handleOptionSelected(values) {
         const skip = new Date().getTime() - _internalChangeTimestamp < 200;
         if (skip)
             return;
+        set_values(values);
         if (props.onOptionSelected) {
-            set_values(values);
             props.onOptionSelected(values !== null && values !== void 0 ? values : []);
         }
         set_internalChangeTimestamp(new Date().getTime());
@@ -291,7 +320,8 @@ function DBCustomSelectFn(props, component) {
             }
         }
     }
-    function handleSelectAll() {
+    function handleSelectAll(event) {
+        event.stopPropagation();
         if ((_values === null || _values === void 0 ? void 0 : _values.length) === amountOptions) {
             handleOptionSelected([]);
         }
@@ -323,12 +353,12 @@ function DBCustomSelectFn(props, component) {
                     delay(() => {
                         // Takes some time until element can be focused
                         checkbox.focus();
-                    }, 100);
+                    }, 1);
                 }
             }
         }
     }
-    function handleOpenByKeyboardFocus(onlySearch) {
+    function handleOpenByKeyboardFocus() {
         if (detailsRef.current) {
             // Focus search if possible
             const search = getSearchInput(detailsRef.current);
@@ -336,9 +366,9 @@ function DBCustomSelectFn(props, component) {
                 delay(() => {
                     // Takes some time until element can be focused
                     search.focus();
-                }, 100);
+                }, 1);
             }
-            else if (!onlySearch) {
+            else {
                 // Focus first checkbox otherwise
                 handleFocusFirstDropdownCheckbox();
             }
@@ -347,25 +377,33 @@ function DBCustomSelectFn(props, component) {
     function handleSearch(event) {
         event.stopPropagation();
         const filterText = event.target.value;
-        set_options(!props.options || !filterText || filterText.length === 0
-            ? props.options
-            : props.options.filter((option) => !option.isGroupTitle &&
+        if (!props.options || !filterText || filterText.length === 0) {
+            set_options(props.options);
+        }
+        else {
+            set_options(props.options.filter((option) => !option.isGroupTitle &&
                 getOptionLabel(option)
                     .toLowerCase()
                     .includes(filterText.toLowerCase())));
+        }
     }
-    function handleClearAll() {
+    function handleClearAll(event) {
+        event.stopPropagation();
         handleOptionSelected([]);
         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();
+        var _a;
+        if (detailsRef.current) {
+            (_a = detailsRef.current
+                .querySelector("summary")) === null || _a === void 0 ? void 0 : _a.focus();
+        }
     }
     const [selectAllChecked, setSelectAllChecked] = useState(() => false);
     const [selectAllIndeterminate, setSelectAllIndeterminate] = useState(() => false);
-    function satisfyReact() {
-        // This is an empty function to satisfy React
+    function satisfyReact(event) {
+        // This is a function to satisfy React
+        event.stopPropagation();
     }
     useEffect(() => {
         var _a;
@@ -381,22 +419,17 @@ function DBCustomSelectFn(props, component) {
         set_selectedLabelsId(mId + "-selected-labels");
         set_infoTextId(mId + "-info");
         set_invalidMessage(props.invalidMessage || DEFAULT_INVALID_MESSAGE);
+        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 (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]);
@@ -417,10 +450,11 @@ function DBCustomSelectFn(props, component) {
         }
     }, [_id]);
     useEffect(() => {
+        var _a;
         if (detailsRef.current) {
             const summary = detailsRef.current.querySelector("summary");
             if (summary) {
-                summary.setAttribute("aria-describedby", _descByIds || "");
+                summary.setAttribute("aria-describedby", (_a = props.ariaDescribedBy) !== null && _a !== void 0 ? _a : (_descByIds || ""));
             }
         }
     }, [detailsRef.current, _descByIds]);
@@ -433,10 +467,12 @@ function DBCustomSelectFn(props, component) {
         }
     }, [props.showNoResults, _options]);
     useEffect(() => {
-        setSelectAllEnabled(Boolean(props.multiple && (props.showSelectAll || amountOptions > 5)));
+        var _a;
+        setSelectAllEnabled(Boolean(props.multiple && ((_a = props.showSelectAll) !== null && _a !== void 0 ? _a : amountOptions > 5)));
     }, [props.showSelectAll, amountOptions, props.multiple]);
     useEffect(() => {
-        setSearchEnabled(props.showSearch || amountOptions > 9);
+        var _a;
+        setSearchEnabled((_a = props.showSearch) !== null && _a !== void 0 ? _a : amountOptions > 9);
     }, [props.showSearch, amountOptions]);
     useEffect(() => {
         var _a;
@@ -471,15 +507,16 @@ function DBCustomSelectFn(props, component) {
         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) => {
+        var _a, _b;
+        if ((_a = props.options) === null || _a === void 0 ? void 0 : _a.length) {
+            set_selectedOptions((_b = props.options) === null || _b === void 0 ? void 0 : _b.filter((option) => {
                 if (!option.value || !(_values === null || _values === void 0 ? void 0 : _values["includes"])) {
                     return false;
                 }
                 return !option.isGroupTitle && (_values === null || _values === void 0 ? void 0 : _values.includes(option.value));
             }));
         }
-    }, [_options, _values]);
+    }, [props.options, _values]);
     useEffect(() => {
         if (_selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.length) {
             if (props.selectedType === "amount") {
@@ -518,7 +555,7 @@ function DBCustomSelectFn(props, component) {
             ? "above"
             : 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, name: props.name, multiple: getBoolean(props.multiple, "multiple"), disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), onChange: (event) => satisfyReact() }, (_options === null || _options === void 0 ? void 0 : _options.length) ? (React.createElement(React.Fragment, null, _options === null || _options === void 0 ? void 0 : _options.map((option) => (React.createElement("option", { disabled: option.disabled, value: option.value, key: "native-select-option-" + getOptionKey(option) }, getOptionLabel(option)))))) : null)),
+            React.createElement("select", { role: "none", hidden: true, id: _selectId, tabIndex: -1, ref: selectRef, form: props.form, name: props.name, multiple: getBoolean(props.multiple, "multiple"), disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), onChange: (event) => satisfyReact(event) }, ((_b = props.options) === null || _b === void 0 ? void 0 : _b.length) ? (React.createElement(React.Fragment, null, (_c = props.options) === null || _c === void 0 ? void 0 : _c.map((option) => (React.createElement("option", { disabled: option.disabled, value: option.value, key: "native-select-option-" + getOptionKey(option) }, getOptionLabel(option)))))) : null)),
         React.createElement("details", { ref: detailsRef, open: props.open, onToggle: (event) => handleDropdownToggle(event), onKeyDown: (event) => handleKeyboardPress(event) },
             props.children,
             props.options ? (React.createElement(React.Fragment, null,
@@ -527,23 +564,23 @@ function DBCustomSelectFn(props, component) {
                     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", ref: searchInputRef, name: _id, form: _id, 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
+                        React.createElement(DBInput, { type: "search", ref: searchInputRef, name: _id, form: _id, showLabel: false, label: (_d = props.searchLabel) !== null && _d !== void 0 ? _d : DEFAULT_LABEL, placeholder: (_e = props.searchPlaceholder) !== null && _e !== void 0 ? _e : 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,
+                    _hasNoOptions || props.showLoading ? (React.createElement(DBInfotext, { id: _infoTextId, icon: _hasNoOptions ? undefined : "circular_arrows", semantic: _hasNoOptions ? "warning" : "informational" }, (_f = (_hasNoOptions ? props.noResultsText : props.loadingText)) !== null && _f !== void 0 ? _f : 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() }),
+                                        React.createElement("input", { type: "checkbox", value: "select-all", ref: selectAllRef, form: _id, checked: selectAllChecked, onChange: (event) => handleSelectAll(event) }),
                                         getSelectAllLabel())))) : null,
-                            React.createElement(DBCustomSelectList, { multiple: getBoolean(props.multiple, "multiple"), label: (_f = (_e = props.ariaListLabel) !== null && _e !== void 0 ? _e : props.label) !== null && _f !== void 0 ? _f : DEFAULT_LABEL }, _options === null || _options === void 0 ? void 0 : _options.map((option) => (React.createElement(DBCustomSelectListItem, { type: props.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: getOptionLabel(option), name: _id, checked: getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: (event) => handleSelect(option.value), key: "custom-select-list-item-" + getOptionKey(option) }, !option.isGroupTitle ? (React.createElement(React.Fragment, null, getOptionLabel(option))) : null))))))),
+                            React.createElement(DBCustomSelectList, { multiple: getBoolean(props.multiple, "multiple"), label: (_h = (_g = props.ariaListLabel) !== null && _g !== void 0 ? _g : props.label) !== null && _h !== void 0 ? _h : DEFAULT_LABEL }, _options === null || _options === void 0 ? void 0 : _options.map((option) => (React.createElement(DBCustomSelectListItem, { type: props.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: getOptionLabel(option), name: _id, checked: getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: (event) => handleSelect(option.value), key: "custom-select-list-item-" + 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", name: _id, form: _id, onClick: (event) => handleClose("close") }, (_g = props.mobileCloseButtonText) !== null && _g !== void 0 ? _g : DEFAULT_CLOSE_BUTTON))))) : null),
-        ((_h = props.showClearSelection) !== null && _h !== void 0 ? _h : true) && (_values === null || _values === void 0 ? void 0 : _values.length) ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", noText: true, name: _id, form: _id, onClick: (event) => handleClearAll() },
+                        React.createElement(DBButton, { variant: "ghost", width: "full", icon: "cross", size: "small", name: _id, form: _id, onClick: (event) => handleClose("close") }, (_j = props.mobileCloseButtonText) !== null && _j !== void 0 ? _j : DEFAULT_CLOSE_BUTTON))))) : null),
+        ((_k = props.showClearSelection) !== null && _k !== void 0 ? _k : true) && (_values === null || _values === void 0 ? void 0 : _values.length) ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", noText: true, name: _id, form: _id, onClick: (event) => handleClearAll(event) },
             props.clearSelectionText,
             React.createElement(DBTooltip, { placement: "top" }, props.clearSelectionText))) : null,
-        React.createElement("span", { "aria-hidden": getBooleanAsString(true), id: _placeholderId }, (_j = props.placeholder) !== null && _j !== void 0 ? _j : props.label),
+        React.createElement("span", { "aria-hidden": getBooleanAsString(true), id: _placeholderId }, (_l = props.placeholder) !== null && _l !== void 0 ? _l : props.label),
         stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
         hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
         React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _invalidMessage),

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

@@ -1,4 +1,4 @@
-import { BaseFormProps, CloseEventState, CustomFormProps, FormMessageProps, FormState, FromValidState, GlobalProps, GlobalState, IconProps, PlacementVerticalType, PopoverState, RequiredProps, ShowIconProps, ShowLabelProps, ValidationType, WidthType } from '../../shared/model';
+import { BaseFormProps, CloseEventState, CustomFormProps, DocumentScrollState, FormMessageProps, FormState, FromValidState, GlobalProps, GlobalState, IconProps, PlacementVerticalType, RequiredProps, ShowIconProps, ShowLabelProps, ValidationType, WidthType } from '../../shared/model';
 import { DBCustomSelectFormFieldDefaultProps } from '../custom-select-form-field/model';
 import { CustomSelectDropdownWidthType } from '../custom-select-dropdown/model';
 import { DBCustomSelectListItemExtraProps } from '../custom-select-list-item/model';
@@ -176,11 +176,11 @@ export type DBCustomSelectDefaultState = {
     handleTagRemove: (option: CustomSelectOptionType, event?: any) => void;
     handleSummaryFocus: () => void;
     handleSelect: (value?: string) => void;
-    handleSelectAll: () => void;
-    handleClearAll: () => void;
+    handleSelectAll: (event: any) => void;
+    handleClearAll: (event: any) => void;
     handleDropdownToggle: (event: any) => void;
     handleDocumentClose: (event: any) => void;
-    handleOpenByKeyboardFocus: (onlySearch?: boolean) => void;
+    handleOpenByKeyboardFocus: () => void;
     handleFocusFirstDropdownCheckbox: (activeElement?: Element) => void;
     handleKeyboardPress: (event: any) => void;
     handleArrowDownUp: (event: any) => void;
@@ -189,5 +189,6 @@ export type DBCustomSelectDefaultState = {
     getSelectAllLabel: () => string;
     selectAllChecked: boolean;
     selectAllIndeterminate: boolean;
+    handleAutoPlacement: () => void;
 };
-export type DBCustomSelectState = DBCustomSelectDefaultState & GlobalState & FormState & FromValidState & CloseEventState & PopoverState;
+export type DBCustomSelectState = DBCustomSelectDefaultState & GlobalState & FormState & FromValidState & CloseEventState & DocumentScrollState;

package/dist/components/icon/model.d.ts

@@ -1,10 +1,8 @@
 import { GlobalProps, GlobalState, IconProps, TextProps } from '../../shared/model';
-export declare const IconVariantList: readonly ["default", "inverted", "filled"];
-export type IconVariantType = (typeof IconVariantList)[number];
 export declare const IconWeightList: readonly ["16", "20", "24", "32", "48", "64"];
 export type IconWeightType = (typeof IconWeightList)[number];
 export type DBIconDefaultProps = {
-    variant?: IconVariantType;
+    variant?: string;
     weight?: IconWeightType;
 };
 export type DBIconProps = DBIconDefaultProps & GlobalProps & IconProps & TextProps;

package/dist/components/icon/model.js

@@ -1,2 +1 @@
-export const IconVariantList = ['default', 'inverted', 'filled'];
 export const IconWeightList = ['16', '20', '24', '32', '48', '64'];

package/dist/components/link/link.js

@@ -7,8 +7,8 @@ function DBLinkFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
     function handleClick(event) {
-        event.stopPropagation();
         if (props.onClick) {
+            event.stopPropagation();
             props.onClick(event);
         }
     }

package/dist/components/navigation-item/navigation-item.js

@@ -25,8 +25,8 @@ function DBNavigationItemFn(props, component) {
         }
     }
     function handleClick(event) {
-        event.stopPropagation();
         if (props.onClick) {
+            event.stopPropagation();
             props.onClick(event);
         }
         if (hasAreaPopup) {

package/dist/components/popover/model.d.ts

@@ -13,6 +13,5 @@ export type DBPopoverProps = DBPopoverDefaultProps & GlobalProps & SpacingProps
 export type DBPopoverDefaultState = {
     isExpanded?: boolean;
     getTrigger: () => Element | null;
-    handleLeave: (event: any) => void;
 };
 export type DBPopoverState = DBPopoverDefaultState & GlobalState & PopoverState & InitializedState;

package/dist/components/popover/popover.js

@@ -2,29 +2,66 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBooleanAsString, handleDataOutside } from "../../utils";
+import { cls, delay as utilsDelay, getBooleanAsString } from "../../utils";
+import { handleFixedPopover } from "../../utils/floating-components";
+import { DocumentScrollListener } from "../../utils/document-scroll-listener";
 function DBPopoverFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
     const [isExpanded, setIsExpanded] = useState(() => false);
+    const [_documentScrollListenerCallbackId, set_documentScrollListenerCallbackId,] = useState(() => undefined);
+    const [_observer, set_observer] = useState(() => undefined);
+    function handleEscape(event) {
+        if (!event || event.key === "Escape") {
+            // TODO: Recursive for any child
+            for (const child of Array.from(_ref.current.children)) {
+                child.blur();
+            }
+        }
+    }
     function handleAutoPlacement() {
-        setIsExpanded(true);
         if (!_ref.current)
             return;
         const article = _ref.current.querySelector("article");
-        if (!article)
-            return;
-        handleDataOutside(article);
+        if (article) {
+            // This is a workaround for angular
+            utilsDelay(() => {
+                var _a;
+                handleFixedPopover(article, _ref.current, (_a = props.placement) !== null && _a !== void 0 ? _a : "bottom");
+            }, 1);
+        }
+    }
+    function handleDocumentScroll(event) {
+        var _a, _b;
+        if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.contains) && ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.contains(_ref.current))) {
+            handleAutoPlacement();
+        }
+    }
+    function handleEnter() {
+        setIsExpanded(true);
+        set_documentScrollListenerCallbackId(new DocumentScrollListener().addCallback((event) => handleDocumentScroll(event)));
+        handleAutoPlacement();
+        const child = getTrigger();
+        if (child) {
+            _observer === null || _observer === void 0 ? void 0 : _observer.observe(child);
+        }
     }
     function handleLeave(event) {
-        const element = event.target;
-        const parent = element.parentNode;
+        const element = event === null || event === void 0 ? void 0 : event.target;
+        const parent = element === null || element === void 0 ? void 0 : element.parentNode;
         if (!parent ||
             (element.parentNode.querySelector(":focus") !== element &&
                 element.parentNode.querySelector(":focus-within") !== element &&
                 element.parentNode.querySelector(":hover") !== element)) {
             setIsExpanded(false);
+            if (_documentScrollListenerCallbackId) {
+                new DocumentScrollListener().removeCallback(_documentScrollListenerCallbackId);
+            }
+            const child = getTrigger();
+            if (child) {
+                _observer === null || _observer === void 0 ? void 0 : _observer.unobserve(child);
+            }
         }
     }
     function getTrigger() {
@@ -51,11 +88,25 @@ function DBPopoverFn(props, component) {
     }, []);
     useEffect(() => {
         if (_ref.current && initialized) {
+            setInitialized(false);
             const child = getTrigger();
             if (child) {
                 child.ariaHasPopup = "true";
             }
-            setInitialized(false);
+            handleAutoPlacement();
+            _ref.current.addEventListener("keydown", (event) => handleEscape(event));
+            ["mouseenter", "focusin"].forEach((event) => {
+                _ref.current.addEventListener(event, () => handleEnter());
+            });
+            ["mouseleave", "focusout"].forEach((event) => {
+                _ref.current.addEventListener(event, () => handleLeave());
+            });
+            set_observer(new IntersectionObserver((payload) => {
+                const entry = payload.find(({ target }) => target === getTrigger());
+                if (entry && !entry.isIntersecting) {
+                    handleEscape(false);
+                }
+            }));
         }
     }, [_ref.current, initialized]);
     useEffect(() => {
@@ -66,7 +117,7 @@ function DBPopoverFn(props, component) {
             }
         }
     }, [_ref.current, isExpanded]);
-    return (React.createElement("div", Object.assign({ 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"]), { id: props.id }, 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-popover", props.className), onFocus: (event) => handleAutoPlacement(), onBlur: (event) => handleLeave(event), onMouseEnter: (event) => handleAutoPlacement(), onMouseLeave: (event) => handleLeave(event) }),
+    return (React.createElement("div", Object.assign({ 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"]), { id: props.id }, 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-popover", props.className) }),
         React.createElement(React.Fragment, null, props.trigger),
         React.createElement("article", { className: "db-popover-content", "data-spacing": props.spacing, "data-gap": getBooleanAsString(props.gap), "data-animation": getBooleanAsString((_a = props.animation) !== null && _a !== void 0 ? _a : true), "data-open": getBooleanAsString(props.open), "data-delay": props.delay, "data-width": props.width, "data-placement": props.placement }, props.children)));
 }

package/dist/components/radio/model.d.ts

@@ -1,7 +1,5 @@
 import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, InitializedState, SizeProps } from '../../shared/model';
-export type DBRadioDefaultProps = {
-    describedbyid?: string;
-};
+export type DBRadioDefaultProps = {};
 export type DBRadioProps = DBRadioDefaultProps & GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & SizeProps;
 export type DBRadioDefaultState = {};
 export type DBRadioState = DBRadioDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState;

package/dist/components/radio/radio.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBRadio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, "required" | "value" | "size" | "checked" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | "showLabel"> & import("./model").DBRadioDefaultProps & 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").SizeProps & React.RefAttributes<any>>;
+declare const DBRadio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, "required" | "value" | "size" | "checked" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | "showLabel"> & 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").SizeProps & React.RefAttributes<any>>;
 export default DBRadio;