@db-ux/react-core-components 2.1.2 → 2.2.1

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, getOptionKey, 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,6 +13,8 @@ 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, _k, _l;
     props = Object.assign({ clearSelectionText: "Clear selection", showClearSelection: true }, props);
@@ -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();
+        }
+    }
     const [_searchValue, set_searchValue] = useState(() => undefined);
     function hasValidState() {
         var _a;
@@ -93,7 +104,9 @@ function DBCustomSelectFn(props, component) {
         }
         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();
@@ -103,6 +116,10 @@ function DBCustomSelectFn(props, component) {
             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() {
@@ -136,10 +153,6 @@ function DBCustomSelectFn(props, component) {
         }
         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) {
         if (props.removeTagsTexts && props.removeTagsTexts.length > index) {
             return props.removeTagsTexts.at(index);
@@ -157,8 +170,10 @@ function DBCustomSelectFn(props, component) {
         if (detailsRef.current) {
             const dropdown = detailsRef.current.querySelector("article");
             if (dropdown) {
+                // This is a workaround for Angular
                 delay(() => {
-                    handleDataOutside(dropdown);
+                    var _a;
+                    handleFixedDropdown(dropdown, detailsRef.current, (_a = props.placement) !== null && _a !== void 0 ? _a : "bottom");
                 }, 1);
             }
         }
@@ -414,6 +429,14 @@ 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) {
@@ -566,13 +589,13 @@ 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(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("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: getOptionKey(option, "native-select-option-") }, getOptionLabel(option)))))) : null)),
         React.createElement("details", { ref: detailsRef, open: props.open, onToggle: (event) => handleDropdownToggle(event), onKeyDown: (event) => handleKeyboardPress(event) },
             props.children,
             props.options ? (React.createElement(React.Fragment, null,
                 React.createElement("summary", { className: "db-custom-select-form-field", id: _summaryId, "aria-disabled": getBooleanAsString(props.disabled), "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),
+                    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: getOptionKey(option, "tag-") }, getOptionLabel(option)))))) : null),
                 React.createElement(DBCustomSelectDropdown, { width: props.dropdownWidth },
                     searchEnabled ? (React.createElement("div", null,
                         React.createElement(DBInput, { type: "search", ref: searchInputRef, name: _id, form: _id, showLabel: false, value: _searchValue, label: (_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
@@ -585,7 +608,7 @@ function DBCustomSelectFn(props, component) {
                                     React.createElement("label", null,
                                         React.createElement("input", { type: "checkbox", value: "select-all", ref: selectAllRef, form: _id, checked: selectAllChecked, onChange: (event) => handleSelectAll(event) }),
                                         getSelectAllLabel())))) : null,
-                            React.createElement(DBCustomSelectList, { multiple: getBoolean(props.multiple, "multiple"), label: (_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(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: getOptionKey(option, "custom-select-list-item-") }, !option.isGroupTitle ? (React.createElement(React.Fragment, null, getOptionLabel(option))) : null))))))),
                     React.createElement("div", null,
                         React.createElement(DBButton, { variant: "ghost", width: "full", icon: "cross", size: "small", name: _id, form: _id, onClick: (event) => handleClose("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) },

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';
@@ -193,7 +193,6 @@ export type DBCustomSelectDefaultState = {
     getNativeSelectValue: () => string;
     getOptionLabel: (option: CustomSelectOptionType) => string;
     getOptionChecked: (value?: string) => boolean;
-    getOptionKey: (option: CustomSelectOptionType) => string;
     getTagRemoveLabel: (index: number) => string;
     selectAllEnabled: boolean;
     searchEnabled: boolean;
@@ -215,5 +214,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/input/input.js

@@ -115,7 +115,7 @@ function DBInputFn(props, component) {
     }, [props.value]);
     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-input", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-hide-icon": getHideProp(props.showIcon), "data-icon": props.icon, "data-icon-after": props.iconAfter, "data-hide-icon-after": getHideProp(props.showIcon) }),
         React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
-        React.createElement("input", Object.assign({ "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, type: props.type || "text", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), step: getNumber(props.step), value: props.value, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), max: getInputValue(props.max, props.type), min: getInputValue(props.min, props.type), readOnly: getBoolean(props.readOnly, "readOnly") ||
+        React.createElement("input", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, "data-field-sizing": props.fieldSizing, 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, type: props.type || "text", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), step: getNumber(props.step), value: props.value, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), max: getInputValue(props.max, props.type), min: getInputValue(props.min, props.type), readOnly: getBoolean(props.readOnly, "readOnly") ||
                 getBoolean(props.readonly, "readonly"), form: props.form, pattern: props.pattern, size: props.size, autoComplete: props.autocomplete, autoFocus: getBoolean(props.autofocus, "autofocus"), onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), list: props.dataList && _dataListId, "aria-describedby": (_c = props.ariaDescribedBy) !== null && _c !== void 0 ? _c : _descByIds })),
         props.dataList ? (React.createElement("datalist", { id: _dataListId }, (_d = getDataList()) === null || _d === void 0 ? void 0 : _d.map((option) => (React.createElement("option", { key: _dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null,
         props.children,

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/select/select.js

@@ -2,11 +2,11 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, delay, getBoolean, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { cls, delay, getBoolean, getHideProp, getOptionKey, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 import DBInfotext from "../infotext/infotext";
 function DBSelectFn(props, component) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => undefined);
     const [_messageId, set_messageId] = useState(() => undefined);
@@ -123,11 +123,11 @@ function DBSelectFn(props, component) {
         React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
         React.createElement("select", Object.assign({ "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"]), { required: getBoolean(props.required, "required"), disabled: getBoolean(props.disabled, "disabled"), id: _id, name: props.name, size: props.size, value: props.value, autoComplete: props.autocomplete, multiple: props.multiple, onInput: (event) => handleInput(event), onClick: (event) => handleClick(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": (_b = props.ariaDescribedBy) !== null && _b !== void 0 ? _b : _descByIds }),
             React.createElement("option", { hidden: true }),
-            props.options ? (React.createElement(React.Fragment, null, (_c = props.options) === null || _c === void 0 ? void 0 : _c.map((option) => {
+            ((_c = props.options) === null || _c === void 0 ? void 0 : _c.length) ? (React.createElement(React.Fragment, null, (_d = props.options) === null || _d === void 0 ? void 0 : _d.map((option) => {
                 var _a;
-                return option.options ? (React.createElement("optgroup", { label: getOptionLabel(option) }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (React.createElement("option", { key: optgroupOption.value.toString(), value: optgroupOption.value, disabled: optgroupOption.disabled }, getOptionLabel(optgroupOption)))))) : (React.createElement("option", { value: option.value, disabled: option.disabled }, getOptionLabel(option)));
+                return option.options ? (React.createElement("optgroup", { label: getOptionLabel(option), key: getOptionKey(option, "select-optgroup-") }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (React.createElement("option", { value: optgroupOption.value, disabled: optgroupOption.disabled, key: getOptionKey(optgroupOption, "select-optgroup-option-") }, getOptionLabel(optgroupOption)))))) : (React.createElement("option", { value: option.value, disabled: option.disabled, key: getOptionKey(option, "select-option-") }, getOptionLabel(option)));
             }))) : (React.createElement(React.Fragment, null, props.children))),
-        React.createElement("span", { id: _placeholderId }, (_d = props.placeholder) !== null && _d !== void 0 ? _d : props.label),
+        React.createElement("span", { id: _placeholderId }, (_e = props.placeholder) !== null && _e !== void 0 ? _e : 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/textarea/model.d.ts

@@ -12,6 +12,10 @@ export type DBTextareaDefaultProps = {
      * In most browsers, textareas are resizable — you'll notice the drag handle in the right-hand corner, you can control it with this
      */
     resize?: TextareaResizeType;
+    /**
+     * Show/Hides drag handle in the right-hand corner - default: true
+     */
+    showResizer?: boolean | string;
     /**
      * The number of visible text lines for the control. If it is specified, it must be a positive integer
      */

package/dist/components/textarea/textarea.js

@@ -6,7 +6,7 @@ import DBInfotext from "../infotext/infotext";
 import { cls, delay, getBoolean, getHideProp, getNumber, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_ROWS, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 function DBTextareaFn(props, component) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => undefined);
     const [_messageId, set_messageId] = useState(() => undefined);
@@ -102,8 +102,8 @@ function DBTextareaFn(props, component) {
     }, [props.value]);
     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-textarea", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel) }),
         React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
-        React.createElement("textarea", Object.assign({ "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, "data-resize": props.resize, disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), readOnly: getBoolean(props.readOnly, "readOnly") ||
-                getBoolean(props.readonly, "readonly"), form: props.form, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), name: props.name, wrap: props.wrap, spellCheck: props.spellCheck, autoComplete: props.autocomplete, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), value: props.value, "aria-describedby": (_b = props.ariaDescribedBy) !== null && _b !== void 0 ? _b : _descByIds, placeholder: (_c = props.placeholder) !== null && _c !== void 0 ? _c : DEFAULT_PLACEHOLDER, rows: getNumber(props.rows, DEFAULT_ROWS), cols: getNumber(props.cols) })),
+        React.createElement("textarea", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, "data-field-sizing": props.fieldSizing, 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, "data-resize": props.resize, "data-hide-resizer": getHideProp((_b = props.showResizer) !== null && _b !== void 0 ? _b : true), disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), readOnly: getBoolean(props.readOnly, "readOnly") ||
+                getBoolean(props.readonly, "readonly"), form: props.form, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), name: props.name, wrap: props.wrap, spellCheck: props.spellCheck, autoComplete: props.autocomplete, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), value: props.value, "aria-describedby": (_c = props.ariaDescribedBy) !== null && _c !== void 0 ? _c : _descByIds, placeholder: (_d = props.placeholder) !== null && _d !== void 0 ? _d : DEFAULT_PLACEHOLDER, rows: getNumber(props.rows, DEFAULT_ROWS), cols: getNumber(props.cols) })),
         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/tooltip/model.d.ts

@@ -1,4 +1,4 @@
-import { ClickEventState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState } from '../../shared/model';
+import { ClickEventState, DocumentScrollState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState } from '../../shared/model';
 export declare const TooltipVariantList: readonly ["description", "label"];
 export type TooltipVariantType = (typeof TooltipVariantList)[number];
 export type DBTooltipDefaultProps = {
@@ -14,5 +14,7 @@ export type DBTooltipDefaultProps = {
     variant?: TooltipVariantType;
 };
 export type DBTooltipProps = DBTooltipDefaultProps & GlobalProps & EmphasisProps & PlacementProps & PopoverProps;
-export type DBTooltipDefaultState = {};
-export type DBTooltipState = DBTooltipDefaultState & GlobalState & ClickEventState<HTMLElement> & PopoverState & InitializedState;
+export type DBTooltipDefaultState = {
+    getParent: () => HTMLElement;
+};
+export type DBTooltipState = DBTooltipDefaultState & GlobalState & ClickEventState<HTMLElement> & PopoverState & InitializedState & DocumentScrollState;

package/dist/components/tooltip/tooltip.js

@@ -2,19 +2,62 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBooleanAsString, handleDataOutside, uuid } from "../../utils";
+import { cls, delay as utilsDelay, getBooleanAsString, uuid, } from "../../utils";
 import { DEFAULT_ID } from "../../shared/constants";
+import { handleFixedPopover } from "../../utils/floating-components";
+import { DocumentScrollListener } from "../../utils/document-scroll-listener";
 function DBTooltipFn(props, component) {
     var _a, _b;
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => DEFAULT_ID);
     const [initialized, setInitialized] = useState(() => false);
+    const [_documentScrollListenerCallbackId, set_documentScrollListenerCallbackId,] = useState(() => undefined);
+    const [_observer, set_observer] = useState(() => undefined);
     function handleClick(event) {
         event.stopPropagation();
     }
-    function handleAutoPlacement() {
-        if (_ref.current)
-            handleDataOutside(_ref.current);
+    function handleEscape(event) {
+        if ((!event || event.key === "Escape") &&
+            _ref.current &&
+            getComputedStyle(_ref.current).visibility === "visible") {
+            getParent().blur();
+        }
+    }
+    function getParent() {
+        let parent = _ref.current.parentElement;
+        if (parent && parent.localName.includes("tooltip")) {
+            // Angular workaround
+            parent = parent.parentElement;
+        }
+        return parent;
+    }
+    function handleAutoPlacement(parent) {
+        if (!parent)
+            return;
+        if (_ref.current) {
+            // This is a workaround for angular
+            utilsDelay(() => {
+                var _a;
+                handleFixedPopover(_ref.current, parent, (_a = props.placement) !== null && _a !== void 0 ? _a : "bottom");
+            }, 1);
+        }
+    }
+    function handleDocumentScroll(event, parent) {
+        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(parent);
+        }
+    }
+    function handleLeave() {
+        if (_documentScrollListenerCallbackId) {
+            new DocumentScrollListener().removeCallback(_documentScrollListenerCallbackId);
+        }
+        _observer === null || _observer === void 0 ? void 0 : _observer.unobserve(getParent());
+    }
+    function handleEnter(parent) {
+        set_documentScrollListenerCallbackId(new DocumentScrollListener().addCallback((event) => handleDocumentScroll(event, parent)));
+        handleAutoPlacement(parent);
+        _observer === null || _observer === void 0 ? void 0 : _observer.observe(getParent());
     }
     useEffect(() => {
         set_id(props.id || "tooltip-" + uuid());
@@ -22,14 +65,14 @@ function DBTooltipFn(props, component) {
     }, []);
     useEffect(() => {
         if (_ref.current && initialized && _id) {
-            let parent = _ref.current.parentElement;
-            if (parent && parent.localName.includes("tooltip")) {
-                // Angular workaround
-                parent = parent.parentElement;
-            }
+            const parent = getParent();
             if (parent) {
-                ["mouseenter", "focus"].forEach((event) => {
-                    parent.addEventListener(event, () => handleAutoPlacement());
+                ["mouseenter", "focusin"].forEach((event) => {
+                    parent.addEventListener(event, () => handleEnter(parent));
+                });
+                parent.addEventListener("keydown", (event) => handleEscape(event));
+                ["mouseleave", "focusout"].forEach((event) => {
+                    parent.addEventListener(event, () => handleLeave());
                 });
                 parent.setAttribute("data-has-tooltip", "true");
                 if (props.variant === "label") {
@@ -39,6 +82,12 @@ function DBTooltipFn(props, component) {
                     parent.setAttribute("aria-describedby", _id);
                 }
             }
+            set_observer(new IntersectionObserver((payload) => {
+                const entry = payload.find(({ target }) => target === getParent());
+                if (entry && !entry.isIntersecting) {
+                    handleEscape(false);
+                }
+            }));
             setInitialized(false);
         }
     }, [_ref.current, initialized]);

package/dist/shared/model.d.ts

@@ -150,9 +150,6 @@ export type PopoverProps = {
      */
     width?: PopoverWidthType;
 };
-export type PopoverState = {
-    handleAutoPlacement: () => void;
-};
 export type NameProps = {
     /**
      * The name attribute gives the name of the element to group it.
@@ -234,6 +231,8 @@ export type CustomFormProps = {
     validation?: ValidationType;
 };
 export type FormProps = CustomFormProps & BaseFormProps & RequiredProps & ShowLabelProps & ValueProps;
+export declare const FieldSizingList: readonly ["fixed", "content"];
+export type FieldSizingType = (typeof FieldSizingList)[number];
 export type FormTextProps = {
     /**
      * Maximum length (number of characters) of value
@@ -259,6 +258,11 @@ export type FormTextProps = {
      * The disabled attribute can be set to keep a user from edit on the form element
      */
     readonly?: boolean | string;
+    /**
+     * Adds shrinkwrap for input and textarea: https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing
+     * Note: Only supported in Chromium browsers so far
+     */
+    fieldSizing?: FieldSizingType;
 };
 export type FormSizeProps = {
     /**
@@ -493,3 +497,14 @@ export type ValueLabelType = {
     value: string;
     label?: string;
 };
+export type DocumentScrollState = {
+    _documentScrollListenerCallbackId?: string;
+    handleDocumentScroll: (event: any, parent?: HTMLElement) => void;
+    _observer?: IntersectionObserver;
+};
+export type PopoverState = {
+    handleEscape: (event: any) => void;
+    handleAutoPlacement: (parent?: HTMLElement) => void;
+    handleEnter: (parent?: HTMLElement) => void;
+    handleLeave: (event?: any) => void;
+} & DocumentScrollState;

package/dist/shared/model.js

@@ -13,6 +13,7 @@ export const PopoverWidthList = ['auto', 'fixed'];
 export const SizeList = ['small', 'medium'];
 export const EmphasisList = ['weak', 'strong'];
 export const ValidationList = ['invalid', 'valid', 'no-validation'];
+export const FieldSizingList = ['fixed', 'content'];
 export const LabelVariantList = ['above', 'floating'];
 export const AutoCompleteList = ['off', 'on', 'name', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'email', 'username', 'new-password', 'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address', 'shipping', 'billing', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year', 'sex', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension', 'impp', 'url', 'photo', 'webauthn'];
 export const LinkCurrentList = ['time', 'true', 'false', 'date', 'page', 'step', 'location'];

package/dist/utils/document-scroll-listener.d.ts

@@ -0,0 +1,9 @@
+export declare class DocumentScrollListener {
+    private static callbacks;
+    private static _instance;
+    private static runCallbacks;
+    private ticking;
+    constructor();
+    addCallback(callback: (event: any) => void): string;
+    removeCallback(id: string): void;
+}

package/dist/utils/document-scroll-listener.js

@@ -0,0 +1,38 @@
+import { uuid } from './index';
+export class DocumentScrollListener {
+    static runCallbacks(event) {
+        for (const callback of Object.values(DocumentScrollListener.callbacks)) {
+            if (typeof callback === 'function') {
+                callback(event);
+            }
+        }
+    }
+    constructor() {
+        this.ticking = false;
+        if (DocumentScrollListener._instance) {
+            return DocumentScrollListener._instance;
+        }
+        DocumentScrollListener._instance = this;
+        if (self.document) {
+            self.document.addEventListener('scroll', event => {
+                if (!this.ticking) {
+                    window.requestAnimationFrame(() => {
+                        DocumentScrollListener.runCallbacks(event);
+                        this.ticking = false;
+                    });
+                    this.ticking = true;
+                }
+            }, true);
+        }
+    }
+    addCallback(callback) {
+        const callbackID = uuid();
+        DocumentScrollListener.callbacks[callbackID] = callback;
+        return callbackID;
+    }
+    removeCallback(id) {
+        delete DocumentScrollListener.callbacks[id];
+    }
+}
+DocumentScrollListener.callbacks = {};
+DocumentScrollListener._instance = null;

package/dist/utils/floating-components.d.ts

@@ -0,0 +1,7 @@
+export interface DBDataOutsidePair {
+    vx?: 'left' | 'right';
+    vy?: 'top' | 'bottom';
+}
+export declare const handleDataOutside: (el: HTMLElement) => DBDataOutsidePair;
+export declare const handleFixedDropdown: (element: HTMLElement, parent: HTMLElement, placement: string) => void;
+export declare const handleFixedPopover: (element: HTMLElement, parent: HTMLElement, placement: string) => void;

package/dist/utils/floating-components.js

@@ -0,0 +1,290 @@
+// TODO: We should reevaluate this as soon as CSS Anchor Positioning is supported in all relevant browsers
+const isInView = (el) => {
+    var _a;
+    const { top, bottom, left, right } = el.getBoundingClientRect();
+    const { innerHeight, innerWidth } = window;
+    let outTop = top < 0;
+    let outBottom = bottom > innerHeight;
+    let outLeft = left < 0;
+    let outRight = right > innerWidth;
+    // We need to check if it was already outside
+    const outsideY = el.dataset['outsideVy'];
+    const outsideX = el.dataset['outsideVx'];
+    const parentRect = (_a = el === null || el === void 0 ? void 0 : el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (parentRect) {
+        if (outsideY) {
+            const position = el.dataset['outsideVy'];
+            if (position === 'top') {
+                outTop = parentRect.top - (bottom - parentRect.bottom) < 0;
+            }
+            else {
+                outBottom = parentRect.bottom + (parentRect.top - top) > innerHeight;
+            }
+        }
+        if (outsideX) {
+            const position = el.dataset['outsideVx'];
+            if (position === 'left') {
+                outLeft = parentRect.left - (right - parentRect.right) < 0;
+            }
+            else {
+                outRight = parentRect.right + (parentRect.left - left) > innerWidth;
+            }
+        }
+    }
+    return {
+        outTop,
+        outBottom,
+        outLeft,
+        outRight
+    };
+};
+export const handleDataOutside = (el) => {
+    const { outTop, outBottom, outLeft, outRight } = isInView(el);
+    let dataOutsidePair = {};
+    if (outTop || outBottom) {
+        dataOutsidePair = {
+            vy: outTop ? 'top' : 'bottom'
+        };
+        el.dataset['outsideVy'] = dataOutsidePair.vy;
+    }
+    else {
+        delete el.dataset['outsideVy'];
+    }
+    if (outLeft || outRight) {
+        dataOutsidePair = Object.assign(Object.assign({}, dataOutsidePair), { vx: outRight ? 'right' : 'left' });
+        el.dataset['outsideVx'] = dataOutsidePair.vx;
+    }
+    else {
+        delete el.dataset['outsideVx'];
+    }
+    return dataOutsidePair;
+};
+export const handleFixedDropdown = (element, parent, placement) => {
+    // We skip this if we are in mobile it's already fixed
+    if (getComputedStyle(element).zIndex === '9999')
+        return;
+    const { top, bottom, childHeight, childWidth, width, right, left, correctedPlacement } = getFloatingProps(element, parent, placement);
+    const fullWidth = element.dataset['width'] === 'full';
+    if (fullWidth) {
+        element.style.inlineSize = `${width}px`;
+    }
+    if (correctedPlacement === 'top' || correctedPlacement === 'bottom' || correctedPlacement === 'top-start' || correctedPlacement === 'bottom-start') {
+        element.style.insetInlineStart = `${left}px`;
+    }
+    else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
+        element.style.insetInlineStart = `${right - childWidth}px`;
+    }
+    if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('top')) {
+        element.style.insetBlockStart = `${top - childHeight}px`;
+    }
+    else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('bottom')) {
+        element.style.insetBlockStart = `${bottom}px`;
+    }
+    element.style.position = 'fixed';
+};
+const getFloatingProps = (element, parent, placement) => {
+    const childRect = element.getBoundingClientRect();
+    const { top, height, bottom, right, left, width } = parent.getBoundingClientRect();
+    const { innerHeight, innerWidth } = window;
+    let childHeight = childRect.height;
+    let childWidth = childRect.width;
+    if (placement === 'bottom' || placement === 'top') {
+        childWidth = childWidth / 2;
+    }
+    if (placement === 'left' || placement === 'right') {
+        childHeight = childHeight / 2;
+    }
+    const outsideBottom = bottom + childHeight > innerHeight;
+    const outsideTop = top - childHeight < 0;
+    const outsideLeft = left - childWidth < 0;
+    const outsideRight = right + childWidth > innerWidth;
+    let correctedPlacement = placement;
+    if (placement.startsWith('bottom')) {
+        if (outsideBottom) {
+            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('bottom', 'top');
+            if (outsideLeft && outsideRight) {
+                correctedPlacement = 'top';
+            }
+            else if (outsideLeft) {
+                correctedPlacement = 'top-start';
+            }
+            else if (outsideRight) {
+                correctedPlacement = 'top-end';
+            }
+        }
+        else {
+            if (outsideLeft && outsideRight) {
+                correctedPlacement = 'bottom';
+            }
+            else if (outsideLeft) {
+                correctedPlacement = 'bottom-start';
+            }
+            else if (outsideRight) {
+                correctedPlacement = 'bottom-end';
+            }
+        }
+    }
+    else if (placement.startsWith('top')) {
+        if (outsideTop) {
+            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('top', 'bottom');
+            if (outsideLeft && outsideRight) {
+                correctedPlacement = 'bottom';
+            }
+            else if (outsideLeft) {
+                correctedPlacement = 'bottom-start';
+            }
+            else if (outsideRight) {
+                correctedPlacement = 'bottom-end';
+            }
+        }
+        else {
+            if (outsideLeft && outsideRight) {
+                correctedPlacement = 'top';
+            }
+            else if (outsideLeft) {
+                correctedPlacement = 'top-start';
+            }
+            else if (outsideRight) {
+                correctedPlacement = 'top-end';
+            }
+        }
+    }
+    else if (placement.startsWith('left')) {
+        if (outsideLeft) {
+            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('left', 'right');
+            if (outsideBottom && outsideTop) {
+                correctedPlacement = 'right';
+            }
+            else if (outsideBottom) {
+                correctedPlacement = 'right-end';
+            }
+            else if (outsideTop) {
+                correctedPlacement = 'right-start';
+            }
+        }
+        else {
+            if (outsideBottom && outsideTop) {
+                correctedPlacement = 'left';
+            }
+            else if (outsideBottom) {
+                correctedPlacement = 'left-end';
+            }
+            else if (outsideTop) {
+                correctedPlacement = 'left-start';
+            }
+        }
+    }
+    else if (correctedPlacement.startsWith('right')) {
+        if (outsideRight) {
+            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('right', 'left');
+            if (outsideBottom && outsideTop) {
+                correctedPlacement = 'left';
+            }
+            else if (outsideBottom) {
+                correctedPlacement = 'left-end';
+            }
+            else if (outsideTop) {
+                correctedPlacement = 'left-start';
+            }
+        }
+        else {
+            if (outsideBottom && outsideTop) {
+                correctedPlacement = 'right';
+            }
+            else if (outsideBottom) {
+                correctedPlacement = 'right-end';
+            }
+            else if (outsideTop) {
+                correctedPlacement = 'right-start';
+            }
+        }
+    }
+    return {
+        top,
+        bottom,
+        right,
+        height,
+        width,
+        left,
+        childHeight: childRect.height,
+        childWidth: childRect.width,
+        correctedPlacement,
+        innerWidth,
+        innerHeight
+    };
+};
+export const handleFixedPopover = (element, parent, placement) => {
+    var _a;
+    const distance = (_a = getComputedStyle(element).getPropertyValue('--db-popover-distance')) !== null && _a !== void 0 ? _a : '0px';
+    const { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
+    // Tooltip arrow position
+    if (childWidth > width && (correctedPlacement.startsWith('bottom') || correctedPlacement.startsWith('top'))) {
+        const diff = width / 2 / childWidth * 100;
+        if (correctedPlacement.endsWith('start')) {
+            element.style.setProperty('--db-tooltip-arrow-inline-start', `${diff}%`);
+        }
+        else if (correctedPlacement.endsWith('end')) {
+            element.style.setProperty('--db-tooltip-arrow-inline-start', `${100 - diff}%`);
+        }
+    }
+    if (childHeight > height && (correctedPlacement.startsWith('left') || correctedPlacement.startsWith('bottom'))) {
+        const diff = height / 2 / childHeight * 100;
+        if (correctedPlacement.endsWith('start')) {
+            element.style.setProperty('--db-tooltip-arrow-block-start', `${diff}%`);
+        }
+        else if (correctedPlacement.endsWith('end')) {
+            element.style.setProperty('--db-tooltip-arrow-block-start', `${100 - diff}%`);
+        }
+    }
+    // Popover position
+    if (correctedPlacement === 'right' || correctedPlacement === 'left') {
+        // center horizontally
+        element.style.insetBlockStart = `${top + height / 2}px`;
+    }
+    else if (correctedPlacement === 'right-start' || correctedPlacement === 'left-start') {
+        const end = top + childHeight;
+        element.style.insetBlockStart = `${top}px`;
+        element.style.insetBlockEnd = `${end > innerHeight ? innerHeight : end}px`;
+    }
+    else if (correctedPlacement === 'right-end' || correctedPlacement === 'left-end') {
+        const start = bottom - childHeight;
+        element.style.insetBlockStart = `${start < 0 ? 0 : start}px`;
+        element.style.insetBlockEnd = `${bottom}px`;
+    }
+    else if (correctedPlacement === 'top' || correctedPlacement === 'bottom') {
+        // center vertically
+        element.style.insetInlineStart = `${left + width / 2}px`;
+    }
+    else if (correctedPlacement === 'top-start' || correctedPlacement === 'bottom-start') {
+        const end = left + childWidth;
+        element.style.insetInlineStart = `${left}px`;
+        element.style.insetInlineEnd = `${end > innerWidth ? innerWidth : end}px`;
+    }
+    else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
+        const start = left - childWidth;
+        element.style.insetInlineStart = `${right - childWidth}px`;
+        element.style.insetInlineEnd = `${start < 0 ? 0 : start}px`;
+    }
+    if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('right')) {
+        const end = right + childWidth;
+        element.style.insetInlineStart = `calc(${right}px + ${distance})`;
+        element.style.insetInlineEnd = `calc(${end > innerWidth ? innerWidth : end}px + ${distance})`;
+    }
+    else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('left')) {
+        const start = left - childWidth;
+        element.style.insetInlineStart = `calc(${start < 0 ? 0 : start}px - ${distance})`;
+        element.style.insetInlineEnd = `calc(${right}px - ${distance})`;
+    }
+    else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('top')) {
+        const start = top - childHeight;
+        element.style.insetBlockStart = `calc(${start < 0 ? 0 : start}px - ${distance})`;
+        element.style.insetBlockEnd = `calc(${bottom}px - ${distance})`;
+    }
+    else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('bottom')) {
+        const end = bottom + childHeight;
+        element.style.insetBlockStart = `calc(${bottom}px + ${distance})`;
+        element.style.insetBlockEnd = `calc(${end > innerHeight ? innerHeight : end}px + ${distance})`;
+    }
+    element.style.position = 'fixed';
+    element.setAttribute('data-corrected-placement', correctedPlacement);
+};

package/dist/utils/index.d.ts

@@ -7,19 +7,6 @@ export type ClassNameArg = string | {
     [key: string]: boolean | undefined;
 } | undefined;
 export declare const cls: (...args: ClassNameArg[]) => string;
-export declare const visibleInVX: (el: Element) => boolean;
-export declare const visibleInVY: (el: Element) => boolean;
-export declare const isInView: (el: Element) => {
-    outTop: boolean;
-    outBottom: boolean;
-    outLeft: boolean;
-    outRight: boolean;
-};
-export interface DBDataOutsidePair {
-    vx?: 'left' | 'right';
-    vy?: 'top' | 'bottom';
-}
-export declare const handleDataOutside: (el: Element) => DBDataOutsidePair;
 export declare const isArrayOfStrings: (value: unknown) => value is string[];
 export declare const hasVoiceOver: () => boolean;
 export declare const delay: (fn: () => void, ms: number) => Promise<unknown>;
@@ -45,3 +32,7 @@ export declare const getInputValue: (value?: number | string, inputType?: string
 export declare const getHideProp: (show?: boolean | string) => any;
 export declare const stringPropVisible: (givenString?: string, showString?: boolean | string) => boolean;
 export declare const getSearchInput: (element: HTMLElement) => HTMLInputElement | null;
+export declare const getOptionKey: (option: {
+    id?: string;
+    value?: string | number | string[] | undefined;
+}, prefix: string) => string;

package/dist/utils/index.js

@@ -37,76 +37,6 @@ export const cls = (...args) => {
     }
     return result.trim();
 };
-export const visibleInVX = (el) => {
-    const { left, right } = el.getBoundingClientRect();
-    const { innerWidth } = window;
-    return left >= 0 && right <= innerWidth;
-};
-export const visibleInVY = (el) => {
-    const { top, bottom } = el.getBoundingClientRect();
-    const { innerHeight } = window;
-    return top >= 0 && bottom <= innerHeight;
-};
-export const isInView = (el) => {
-    var _a;
-    const { top, bottom, left, right } = el.getBoundingClientRect();
-    const { innerHeight, innerWidth } = window;
-    let outTop = top < 0;
-    let outBottom = bottom > innerHeight;
-    let outLeft = left < 0;
-    let outRight = right > innerWidth;
-    // We need to check if it was already outside
-    const outsideY = el.hasAttribute('data-outside-vy');
-    const outsideX = el.hasAttribute('data-outside-vx');
-    const parentRect = (_a = el === null || el === void 0 ? void 0 : el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    if (parentRect) {
-        if (outsideY) {
-            const position = el.getAttribute('data-outside-vy');
-            if (position === 'top') {
-                outTop = parentRect.top - (bottom - parentRect.bottom) < 0;
-            }
-            else {
-                outBottom = parentRect.bottom + (parentRect.top - top) > innerHeight;
-            }
-        }
-        if (outsideX) {
-            const position = el.getAttribute('data-outside-vx');
-            if (position === 'left') {
-                outLeft = parentRect.left - (right - parentRect.right) < 0;
-            }
-            else {
-                outRight = parentRect.right + (parentRect.left - left) > innerWidth;
-            }
-        }
-    }
-    return {
-        outTop,
-        outBottom,
-        outLeft,
-        outRight
-    };
-};
-export const handleDataOutside = (el) => {
-    const { outTop, outBottom, outLeft, outRight } = isInView(el);
-    let dataOutsidePair = {};
-    if (outTop || outBottom) {
-        dataOutsidePair = {
-            vy: outTop ? 'top' : 'bottom'
-        };
-        el.setAttribute('data-outside-vy', dataOutsidePair.vy);
-    }
-    else {
-        el.removeAttribute('data-outside-vy');
-    }
-    if (outLeft || outRight) {
-        dataOutsidePair = Object.assign(Object.assign({}, dataOutsidePair), { vx: outRight ? 'right' : 'left' });
-        el.setAttribute('data-outside-vx', dataOutsidePair.vx);
-    }
-    else {
-        el.removeAttribute('data-outside-vx');
-    }
-    return dataOutsidePair;
-};
 export const isArrayOfStrings = (value) => Array.isArray(value) && value.every(item => typeof item === 'string');
 const appleOs = ['Mac', 'iPhone', 'iPad', 'iPod'];
 export const hasVoiceOver = () => typeof window !== 'undefined' && appleOs.some(os => window.navigator.userAgent.includes(os));
@@ -168,3 +98,8 @@ export const stringPropVisible = (givenString, showString) => {
     }
 };
 export const getSearchInput = (element) => element.querySelector(`input[type="search"]`);
+export const getOptionKey = (option, prefix) => {
+    var _a, _b;
+    const key = (_b = (_a = option.id) !== null && _a !== void 0 ? _a : option.value) !== null && _b !== void 0 ? _b : uuid();
+    return `${prefix}${key}`;
+};

package/dist/utils/navigation.d.ts

@@ -15,7 +15,7 @@ export declare class NavigationItemSafeTriangle {
     private initialized;
     private mouseX;
     private mouseY;
-    constructor(element: HTMLElement | null, subNavigation: Element | null);
+    constructor(element: HTMLElement | null, subNavigation: HTMLElement | null);
     private init;
     enableFollow(): void;
     disableFollow(): void;

package/dist/utils/navigation.js

@@ -1,4 +1,4 @@
-import { handleDataOutside } from './index';
+import { handleDataOutside } from './floating-components';
 export const isEventTargetNavigationItem = (event) => {
     var _a, _b;
     const { target } = event;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "2.1.2",
+  "version": "2.2.1",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "2.1.2",
-    "@db-ux/core-foundations": "2.1.2"
+    "@db-ux/core-components": "2.2.1",
+    "@db-ux/core-foundations": "2.2.1"
   }
 }