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

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, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getSearchInput, handleDataOutside, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import { DEFAULT_CLOSE_BUTTON, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_SELECTED, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 import DBCustomSelectList from "../custom-select-list/custom-select-list";
 import DBCustomSelectListItem from "../custom-select-list-item/custom-select-list-item";
@@ -13,8 +13,6 @@ 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);
@@ -47,15 +45,7 @@ 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;
         return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
@@ -103,9 +93,7 @@ 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();
@@ -115,10 +103,6 @@ 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() {
@@ -173,10 +157,8 @@ function DBCustomSelectFn(props, component) {
         if (detailsRef.current) {
             const dropdown = detailsRef.current.querySelector("article");
             if (dropdown) {
-                // This is a workaround for Angular
                 delay(() => {
-                    var _a;
-                    handleFixedDropdown(dropdown, detailsRef.current, (_a = props.placement) !== null && _a !== void 0 ? _a : "bottom");
+                    handleDataOutside(dropdown);
                 }, 1);
             }
         }
@@ -375,11 +357,24 @@ function DBCustomSelectFn(props, component) {
         }
     }
     function handleSearch(event) {
-        event.stopPropagation();
-        const filterText = event.target.value;
+        let filterText;
+        if (typeof event === "string") {
+            filterText = event;
+        }
+        else {
+            event.stopPropagation();
+            if (props.onSearch) {
+                props.onSearch(event);
+            }
+            filterText = event.target.value;
+            set_searchValue(filterText);
+        }
         if (!props.options || !filterText || filterText.length === 0) {
             set_options(props.options);
         }
+        else if (props.searchFilter) {
+            set_options(props.options.filter((option) => props.searchFilter(option, filterText)));
+        }
         else {
             set_options(props.options.filter((option) => !option.isGroupTitle &&
                 getOptionLabel(option)
@@ -419,14 +414,6 @@ 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) {
@@ -506,6 +493,13 @@ function DBCustomSelectFn(props, component) {
         set_options(props.options);
         setAmountOptions((_b = (_a = props.options) === null || _a === void 0 ? void 0 : _a.filter((option) => !option.isGroupTitle).length) !== null && _b !== void 0 ? _b : 0);
     }, [props.options]);
+    useEffect(() => {
+        set_searchValue(props.searchValue);
+        if (props.searchValue) {
+            const sValue = props.searchValue; // <- workaround for Angular
+            handleSearch(sValue);
+        }
+    }, [props.searchValue]);
     useEffect(() => {
         var _a, _b;
         if ((_a = props.options) === null || _a === void 0 ? void 0 : _a.length) {
@@ -518,7 +512,18 @@ function DBCustomSelectFn(props, component) {
         }
     }, [props.options, _values]);
     useEffect(() => {
+        if (props.selectedLabels) {
+            set_selectedLabels(props.selectedLabels);
+            return;
+        }
         if (_selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.length) {
+            if (props.transformSelectedLabels) {
+                // We need to add this to another ``const`` for Angular generated output to work
+                const selectedOptions = _selectedOptions;
+                const transformFn = props.transformSelectedLabels;
+                set_selectedLabels(transformFn(selectedOptions));
+                return;
+            }
             if (props.selectedType === "amount") {
                 set_selectedLabels(props.amountText
                     ? props.amountText
@@ -531,7 +536,13 @@ function DBCustomSelectFn(props, component) {
         else {
             set_selectedLabels("");
         }
-    }, [_selectedOptions, props.selectedType, props.amountText]);
+    }, [
+        _selectedOptions,
+        props.selectedType,
+        props.amountText,
+        props.selectedLabels,
+        props.transformSelectedLabels,
+    ]);
     useEffect(() => {
         var _a;
         if (props.onAmountChange) {
@@ -564,7 +575,7 @@ 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: (_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
+                        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
                                 ? _infoTextId
                                 : undefined, onInput: (event) => handleSearch(event) }))) : 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,

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

@@ -1,4 +1,4 @@
-import { BaseFormProps, CloseEventState, CustomFormProps, DocumentScrollState, FormMessageProps, FormState, FromValidState, GlobalProps, GlobalState, IconProps, PlacementVerticalType, RequiredProps, ShowIconProps, ShowLabelProps, ValidationType, WidthType } from '../../shared/model';
+import { BaseFormProps, CloseEventState, CustomFormProps, FormMessageProps, FormState, FromValidState, GlobalProps, GlobalState, IconProps, PlacementVerticalType, PopoverState, 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';
@@ -51,16 +51,24 @@ export type DBCustomSelectEvents = {
      * Informs the user when dropdown was toggled.
      */
     dropdownToggle?: (event: any) => void;
-};
-export type DBCustomSelectDefaultProps = {
     /**
-     * Overwrite the default aria-label (props.label) for the custom-select-list
+     * Informs the user when a search was performed.
      */
-    ariaListLabel?: string;
+    onSearch?: (event: any) => void;
+    /**
+     * Informs the user when a search was performed.
+     */
+    search?: (event: any) => void;
+};
+export type DBCustomSelectDefaultProps = {
     /**
      * Optional: if select-type="amount" change the shown text
      */
     amountText?: string;
+    /**
+     * Overwrite the default aria-label (props.label) for the custom-select-list
+     */
+    ariaListLabel?: string;
     /**
      * Label for the clear selection button
      */
@@ -107,6 +115,10 @@ export type DBCustomSelectDefaultProps = {
      * Optional: if you use selectedType=tag and options, you need to set the removeTagsTexts for screen reader users
      */
     removeTagsTexts?: string[];
+    /**
+     * Optional: Change the filter function for the search input
+     */
+    searchFilter?: (option: CustomSelectOptionType, filterText: string) => boolean;
     /**
      * Search label
      */
@@ -115,10 +127,19 @@ export type DBCustomSelectDefaultProps = {
      * Search placeholder
      */
     searchPlaceholder?: string;
+    /**
+     * Optional: Prefill the value of the search input
+     */
+    searchValue?: string;
     /**
      * Select all checkbox label
      */
     selectAllLabel?: string;
+    /**
+     * Optional: If you want to show a custom label for the selected values.
+     * You need to define the empty state as well based on selected options.
+     */
+    selectedLabels?: string;
     /**
      * Change the selected type for values shown in multi select
      */
@@ -143,6 +164,10 @@ export type DBCustomSelectDefaultProps = {
      * Forces select all checkbox (only for multiple).
      */
     showSelectAll?: boolean;
+    /**
+     * Optional: If you want to show a custom label based on the selected options.
+     */
+    transformSelectedLabels?: (selectedOptions?: CustomSelectOptionType[]) => string;
     /**
      * Initial value for multi select
      */
@@ -164,6 +189,7 @@ export type DBCustomSelectDefaultState = {
     _infoTextId?: string;
     _internalChangeTimestamp: number;
     _documentClickListenerCallbackId?: string;
+    _searchValue?: string;
     getNativeSelectValue: () => string;
     getOptionLabel: (option: CustomSelectOptionType) => string;
     getOptionChecked: (value?: string) => boolean;
@@ -189,6 +215,5 @@ export type DBCustomSelectDefaultState = {
     getSelectAllLabel: () => string;
     selectAllChecked: boolean;
     selectAllIndeterminate: boolean;
-    handleAutoPlacement: () => void;
 };
-export type DBCustomSelectState = DBCustomSelectDefaultState & GlobalState & FormState & FromValidState & CloseEventState & DocumentScrollState;
+export type DBCustomSelectState = DBCustomSelectDefaultState & GlobalState & FormState & FromValidState & CloseEventState & PopoverState;

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

@@ -13,5 +13,6 @@ 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,66 +2,29 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, delay as utilsDelay, getBooleanAsString } from "../../utils";
-import { handleFixedPopover } from "../../utils/floating-components";
-import { DocumentScrollListener } from "../../utils/document-scroll-listener";
+import { cls, getBooleanAsString, handleDataOutside } from "../../utils";
 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) {
-            // 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);
-        }
+        if (!article)
+            return;
+        handleDataOutside(article);
     }
     function handleLeave(event) {
-        const element = event === null || event === void 0 ? void 0 : event.target;
-        const parent = element === null || element === void 0 ? void 0 : element.parentNode;
+        const element = event.target;
+        const parent = 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() {
@@ -88,25 +51,11 @@ function DBPopoverFn(props, component) {
     }, []);
     useEffect(() => {
         if (_ref.current && initialized) {
-            setInitialized(false);
             const child = getTrigger();
             if (child) {
                 child.ariaHasPopup = "true";
             }
-            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);
-                }
-            }));
+            setInitialized(false);
         }
     }, [_ref.current, initialized]);
     useEffect(() => {
@@ -117,7 +66,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) }),
+    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) }),
         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/tag/tag.js

@@ -4,6 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { cls, getBooleanAsString, getHideProp } from "../../utils";
 import { DEFAULT_REMOVE } from "../../shared/constants";
+import DBTooltip from "../tooltip/tooltip";
 function DBTagFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
@@ -42,7 +43,8 @@ function DBTagFn(props, component) {
         React.createElement(React.Fragment, null, props.content),
         props.children,
         props.text ? React.createElement(React.Fragment, null, props.text) : null,
-        props.behavior === "removable" ? (React.createElement("button", { className: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", onClick: (event) => handleRemove(event), title: getRemoveButtonText() }, getRemoveButtonText())) : null));
+        props.behavior === "removable" ? (React.createElement("button", { className: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", type: "button", onClick: (event) => handleRemove(event) },
+            React.createElement(DBTooltip, { variant: "label" }, getRemoveButtonText()))) : null));
 }
 const DBTag = forwardRef(DBTagFn);
 export default DBTag;

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

@@ -1,9 +1,18 @@
-import { ClickEventState, DocumentScrollState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState } from '../../shared/model';
+import { ClickEventState, 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 = {
+    /**
+     * Show/Hides arrow
+     */
     showArrow?: boolean | string;
+    /**
+     * Change the behavior of the tooltip:
+     * - description: Adds `aria-describedby` to parent
+     * - label: Adds `aria-labelledby` to parent
+     */
+    variant?: TooltipVariantType;
 };
 export type DBTooltipProps = DBTooltipDefaultProps & GlobalProps & EmphasisProps & PlacementProps & PopoverProps;
-export type DBTooltipDefaultState = {
-    getParent: () => HTMLElement;
-};
-export type DBTooltipState = DBTooltipDefaultState & GlobalState & ClickEventState<HTMLElement> & PopoverState & InitializedState & DocumentScrollState;
+export type DBTooltipDefaultState = {};
+export type DBTooltipState = DBTooltipDefaultState & GlobalState & ClickEventState<HTMLElement> & PopoverState & InitializedState;

package/dist/components/tooltip/model.js

@@ -1 +1 @@
-export {};
+export const TooltipVariantList = ['description', 'label'];

package/dist/components/tooltip/tooltip.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").PopoverProps | "placement" | "emphasis" | "showArrow"> & import("./model").DBTooltipDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").EmphasisProps & import("../../shared/model").PlacementProps & import("../../shared/model").PopoverProps & React.RefAttributes<any>>;
+declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").PopoverProps | "placement" | "emphasis" | keyof import("./model").DBTooltipDefaultProps> & import("./model").DBTooltipDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").EmphasisProps & import("../../shared/model").PlacementProps & import("../../shared/model").PopoverProps & React.RefAttributes<any>>;
 export default DBTooltip;

package/dist/components/tooltip/tooltip.js

@@ -2,62 +2,19 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, delay as utilsDelay, getBooleanAsString, uuid, } from "../../utils";
+import { cls, getBooleanAsString, handleDataOutside, 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 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());
+    function handleAutoPlacement() {
+        if (_ref.current)
+            handleDataOutside(_ref.current);
     }
     useEffect(() => {
         set_id(props.id || "tooltip-" + uuid());
@@ -65,24 +22,23 @@ function DBTooltipFn(props, component) {
     }, []);
     useEffect(() => {
         if (_ref.current && initialized && _id) {
-            const parent = getParent();
+            let parent = _ref.current.parentElement;
+            if (parent && parent.localName.includes("tooltip")) {
+                // Angular workaround
+                parent = parent.parentElement;
+            }
             if (parent) {
-                ["mouseenter", "focusin"].forEach((event) => {
-                    parent.addEventListener(event, () => handleEnter(parent));
-                });
-                parent.addEventListener("keydown", (event) => handleEscape(event));
-                ["mouseleave", "focusout"].forEach((event) => {
-                    parent.addEventListener(event, () => handleLeave());
+                ["mouseenter", "focus"].forEach((event) => {
+                    parent.addEventListener(event, () => handleAutoPlacement());
                 });
                 parent.setAttribute("data-has-tooltip", "true");
-                parent.setAttribute("aria-describedby", _id);
-            }
-            set_observer(new IntersectionObserver((payload) => {
-                const entry = payload.find(({ target }) => target === getParent());
-                if (entry && !entry.isIntersecting) {
-                    handleEscape(false);
+                if (props.variant === "label") {
+                    parent.setAttribute("aria-labelledby", _id);
+                }
+                else {
+                    parent.setAttribute("aria-describedby", _id);
                 }
-            }));
+            }
             setInitialized(false);
         }
     }, [_ref.current, initialized]);

package/dist/shared/model.d.ts

@@ -150,6 +150,9 @@ 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.
@@ -490,14 +493,3 @@ 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/utils/index.d.ts

@@ -7,6 +7,19 @@ 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>;

package/dist/utils/index.js

@@ -37,6 +37,76 @@ 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));

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: HTMLElement | null);
+    constructor(element: HTMLElement | null, subNavigation: Element | null);
     private init;
     enableFollow(): void;
     disableFollow(): void;

package/dist/utils/navigation.js

@@ -1,4 +1,4 @@
-import { handleDataOutside } from './floating-components';
+import { handleDataOutside } from './index';
 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.0.10-popover-d7e8b9a",
+  "version": "2.1.0",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "2.0.10-popover-d7e8b9a",
-    "@db-ux/core-foundations": "2.0.10-popover-d7e8b9a"
+    "@db-ux/core-components": "2.1.0",
+    "@db-ux/core-foundations": "2.1.0"
   }
 }

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

@@ -1,9 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,290 +0,0 @@
-// 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);
-};