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

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

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getSearchInput, handleDataOutside, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getSearchInput, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import { DEFAULT_CLOSE_BUTTON, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_SELECTED, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 import DBCustomSelectList from "../custom-select-list/custom-select-list";
 import DBCustomSelectListItem from "../custom-select-list-item/custom-select-list-item";
@@ -13,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();
+        }
+    }
     function hasValidState() {
         var _a;
         return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
@@ -92,7 +103,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();
@@ -102,6 +115,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() {
@@ -156,8 +173,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);
             }
         }
@@ -400,6 +419,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) {

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';
@@ -189,5 +189,6 @@ export type DBCustomSelectDefaultState = {
     getSelectAllLabel: () => string;
     selectAllChecked: boolean;
     selectAllIndeterminate: boolean;
+    handleAutoPlacement: () => void;
 };
-export type DBCustomSelectState = DBCustomSelectDefaultState & GlobalState & FormState & FromValidState & CloseEventState & PopoverState;
+export type DBCustomSelectState = DBCustomSelectDefaultState & GlobalState & FormState & FromValidState & CloseEventState & DocumentScrollState;

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

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

package/dist/components/icon/model.js

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

package/dist/components/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/model.d.ts

@@ -1,7 +1,8 @@
 import { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FromValidState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model';
 export type DBSelectDefaultProps = {
     /**
-     * Enable multiple select -> use DBCustomSelect/db-custom-select for a better look
+     * @deprecated
+     * Enables multiple select, but it isn't styled, please use DBCustomSelect/db-custom-select instead
      */
     multiple?: boolean;
     /**

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

@@ -1,7 +1,9 @@
-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 type DBTooltipDefaultProps = {
     showArrow?: boolean | string;
 };
 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,18 +65,24 @@ 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");
                 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.
@@ -493,3 +490,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/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>;

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));

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.0.9",
+  "version": "2.0.10-popover-d7e8b9a",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "2.0.9",
-    "@db-ux/core-foundations": "2.0.9"
+    "@db-ux/core-components": "2.0.10-popover-d7e8b9a",
+    "@db-ux/core-foundations": "2.0.10-popover-d7e8b9a"
   }
 }