@db-ux/react-core-components 4.11.1 → 4.12.1

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

@@ -1,30 +1,38 @@
-import { uuid as e } from "./index.js";
-//#region src/utils/document-scroll-listener.ts
-var t = class t {
-	static {
-		this.callbacks = {};
-	}
-	static {
-		this._instance = null;
-	}
-	static runCallbacks(e) {
-		for (let n of Object.values(t.callbacks)) typeof n == "function" && n(e);
-	}
-	constructor() {
-		if (this.ticking = !1, t._instance) return t._instance;
-		t._instance = this, self.document && self.document.addEventListener("scroll", (e) => {
-			this.ticking ||= (window.requestAnimationFrame(() => {
-				t.runCallbacks(e), this.ticking = !1;
-			}), !0);
-		}, !0);
-	}
-	addCallback(n) {
-		let r = e();
-		return t.callbacks[r] = n, r;
-	}
-	removeCallback(e) {
-		delete t.callbacks[e];
-	}
-};
-//#endregion
-export { t as DocumentScrollListener };
+import { uuid } from './index.js';
+export class DocumentScrollListener {
+    static callbacks = {};
+    static _instance = null;
+    static runCallbacks(event) {
+        for (const callback of Object.values(DocumentScrollListener.callbacks)) {
+            if (typeof callback === 'function') {
+                callback(event);
+            }
+        }
+    }
+    ticking = false;
+    constructor() {
+        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];
+    }
+}

package/dist/utils/floating-components.js

@@ -1,108 +1,405 @@
-//#region src/utils/floating-components.ts
-var e = (e) => {
-	let { top: t, bottom: n, left: r, right: i } = e.getBoundingClientRect(), { innerHeight: a, innerWidth: o } = window, s = t < 0, c = n > a, l = r < 0, u = i > o, d = e.dataset.outsideVy, f = e.dataset.outsideVx, p = e?.parentElement?.getBoundingClientRect();
-	return p && (d && (e.dataset.outsideVy === "top" ? s = p.top - (n - p.bottom) < 0 : c = p.bottom + (p.top - t) > a), f && (e.dataset.outsideVx === "left" ? l = p.left - (i - p.right) < 0 : u = p.right + (p.left - r) > o)), {
-		outTop: s,
-		outBottom: c,
-		outLeft: l,
-		outRight: u
-	};
-}, t = (t) => {
-	let { outTop: n, outBottom: r, outLeft: i, outRight: a } = e(t), o = {};
-	return n || r ? (o = { vy: n ? "top" : "bottom" }, t.dataset.outsideVy = o.vy) : delete t.dataset.outsideVy, i || a ? (o = {
-		...o,
-		vx: a ? "right" : "left"
-	}, t.dataset.outsideVx = o.vx) : delete t.dataset.outsideVx, o;
-}, n = (e, t, n) => {
-	if (!e || !t || getComputedStyle(e).zIndex === "9999") return;
-	let { top: i, bottom: a, childHeight: o, childWidth: s, width: c, right: l, left: u, correctedPlacement: d } = r(e, t, n);
-	e.dataset.width === "full" && (e.style.inlineSize = `${c}px`), d === "top" || d === "bottom" || d === "top-start" || d === "bottom-start" ? e.style.insetInlineStart = `${u}px` : (d === "top-end" || d === "bottom-end") && (e.style.insetInlineStart = `${l - s}px`), d?.startsWith("top") ? e.style.insetBlockStart = `${i - o}px` : d?.startsWith("bottom") && (e.style.insetBlockStart = `${a}px`), e.style.position = "fixed";
-}, r = (e, t, n) => {
-	if (!e || !t) return {
-		top: 0,
-		bottom: 0,
-		right: 0,
-		height: 0,
-		width: 0,
-		left: 0,
-		childHeight: 0,
-		childWidth: 0,
-		correctedPlacement: n,
-		innerWidth: window.innerWidth,
-		innerHeight: window.innerHeight
-	};
-	let r = e.getBoundingClientRect(), { top: i, height: a, bottom: o, right: s, left: c, width: l } = t.getBoundingClientRect(), { innerHeight: u, innerWidth: d } = window, f = r.height, p = r.width;
-	(n === "bottom" || n === "top") && (p /= 2), (n === "left" || n === "right") && (f /= 2);
-	let m = o + f > u, h = i - f < 0, g = c - p < 0, _ = s + p > d, v = n;
-	return n.startsWith("bottom") ? m ? (v = n?.replace("bottom", "top"), g && _ ? v = "top" : g ? v = "top-start" : _ && (v = "top-end")) : g && _ ? v = "bottom" : g ? v = "bottom-start" : _ && (v = "bottom-end") : n.startsWith("top") ? h ? (v = n?.replace("top", "bottom"), g && _ ? v = "bottom" : g ? v = "bottom-start" : _ && (v = "bottom-end")) : g && _ ? v = "top" : g ? v = "top-start" : _ && (v = "top-end") : n.startsWith("left") ? g ? (v = n?.replace("left", "right"), m && h ? v = "right" : m ? v = "right-end" : h && (v = "right-start")) : m && h ? v = "left" : m ? v = "left-end" : h && (v = "left-start") : v.startsWith("right") && (_ ? (v = n?.replace("right", "left"), m && h ? v = "left" : m ? v = "left-end" : h && (v = "left-start")) : m && h ? v = "right" : m ? v = "right-end" : h && (v = "right-start")), {
-		top: i,
-		bottom: o,
-		right: s,
-		height: a,
-		width: l,
-		left: c,
-		childHeight: r.height,
-		childWidth: r.width,
-		correctedPlacement: v,
-		innerWidth: d,
-		innerHeight: u
-	};
-}, i = 10, a = /* @__PURE__ */ new WeakMap(), o = (e) => {
-	if (a.has(e)) return a.get(e);
-	let t = e.parentElement, n = 0;
-	for (; t && n < i;) {
-		if (t.dataset.correctedPlacement) return a.set(e, t), t;
-		t = t.parentElement, n += 1;
-	}
-	return a.set(e, null), null;
-}, s = (e, t, n) => {
-	if (!e || !t) return;
-	let i = getComputedStyle(t), a = ["absolute", "fixed"].includes(i.position), s = o(e), c = !s && !a, l = getComputedStyle(e)?.getPropertyValue("--db-popover-distance") ?? "0px", { top: u, height: d, width: f, childHeight: p, childWidth: m, right: h, left: g, bottom: _, correctedPlacement: v, innerWidth: y, innerHeight: b } = r(e, t, n);
-	if (s) {
-		let e = s.getBoundingClientRect();
-		g = Math.abs(g - e.left), h = (f + Math.abs(h - e.right)) * 1.5, u = Math.abs(u - e.top), _ = (d + Math.abs(_ - e.bottom)) * 1.5;
-	}
-	if (a && (g = 0, h = f, u = 0, _ = d, [
-		"auto",
-		"inherit",
-		"0"
-	].includes(i.zIndex) && (t.style.zIndex = "1")), m > f && (v.startsWith("bottom") || v.startsWith("top"))) {
-		let t = f / 2 / m * 100;
-		v.endsWith("start") ? e.style.setProperty("--db-tooltip-arrow-inline-start", `${t}%`) : v.endsWith("end") ? e.style.setProperty("--db-tooltip-arrow-inline-start", `${100 - t}%`) : e.style.setProperty("--db-tooltip-arrow-inline-start", "50%");
-	}
-	if (p > d && (v.startsWith("left") || v.startsWith("bottom"))) {
-		let t = d / 2 / p * 100;
-		v.endsWith("start") ? e.style.setProperty("--db-tooltip-arrow-block-start", `${t}%`) : v.endsWith("end") ? e.style.setProperty("--db-tooltip-arrow-block-start", `${100 - t}%`) : e.style.setProperty("--db-tooltip-arrow-block-start", "50%");
-	}
-	if (v === "right" || v === "left") e.style.insetBlockStart = `${u + d / 2}px`;
-	else if (v === "right-start" || v === "left-start") {
-		let t = u + p;
-		e.style.insetBlockStart = `${u}px`, e.style.insetBlockEnd = `${!a && t > b ? b : t}px`;
-	} else if (v === "right-end" || v === "left-end") {
-		let t = _ - p;
-		e.style.insetBlockStart = `${!a && t < 0 ? 0 : t}px`, e.style.insetBlockEnd = `${_}px`;
-	} else if (v === "top" || v === "bottom") e.style.insetInlineStart = `${g + f / 2}px`;
-	else if (v === "top-start" || v === "bottom-start") {
-		let t = g + m;
-		e.style.insetInlineStart = `${g}px`, e.style.insetInlineEnd = `${!a && t > y ? y : t}px`;
-	} else if (v === "top-end" || v === "bottom-end") {
-		let t = h - m;
-		e.style.insetInlineStart = `${!a && t < 0 ? 0 : t}px`, e.style.insetInlineEnd = `${h}px`;
-	}
-	if (v?.startsWith("right")) {
-		let t = h + m;
-		e.style.insetInlineStart = `calc(${h}px + ${l})`, e.style.insetInlineEnd = `calc(${c && t > y ? y : t}px + ${l})`;
-	} else if (v?.startsWith("left")) {
-		let t = g - m;
-		e.style.insetInlineStart = `calc(${c && t < 0 ? 0 : t}px - ${l})`, e.style.insetInlineEnd = `calc(${h}px - ${l})`;
-	} else if (v?.startsWith("top")) {
-		let t = u - p;
-		e.style.insetBlockStart = `calc(${c && t < 0 ? 0 : t}px - ${l})`, e.style.insetBlockEnd = `calc(${a ? t : _}px - ${l})`;
-	} else if (v?.startsWith("bottom")) {
-		let t = _ + p;
-		e.style.insetBlockStart = `calc(${a ? t : _}px + ${l})`, e.style.insetBlockEnd = `calc(${c && t > b ? b : t}px + ${l})`;
-	}
-	e.style.position = "fixed", e.dataset.correctedPlacement = v;
+// TODO: We should reevaluate this as soon as CSS Anchor Positioning is supported in all relevant browsers
+const isInView = (el) => {
+    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 = el?.parentElement?.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 = {
+            ...dataOutsidePair,
+            vx: outRight ? 'right' : 'left'
+        };
+        el.dataset['outsideVx'] = dataOutsidePair.vx;
+    }
+    else {
+        delete el.dataset['outsideVx'];
+    }
+    return dataOutsidePair;
+};
+export const handleFixedDropdown = (element, parent, placement) => {
+    if (!element || !parent)
+        return;
+    const fullWidth = element.dataset['width'] === 'full';
+    const autoWidth = element.dataset['width'] === 'auto';
+    // Reset width-specific inline styles first so a previous mode (e.g. "auto")
+    // doesn't leave a stale minInlineSize/inlineSize behind when the dropdown
+    // width changes at runtime. This must happen before getFloatingProps
+    // measures the element, otherwise the dropdown would be measured with a
+    // width it no longer has and positioned incorrectly. It also has to run
+    // before the mobile bailout below: otherwise a desktop minInlineSize would
+    // survive into the mobile sheet, where CSS min-inline-size beats the
+    // mobile max-inline-size guard and overflows the viewport.
+    element.style.inlineSize = '';
+    element.style.minInlineSize = '';
+    // We skip the rest if we are in mobile, it's already fixed via CSS.
+    if (getComputedStyle(element).zIndex === '9999')
+        return;
+    const { top, bottom, childHeight, childWidth, width, right, left, correctedPlacement, innerWidth } = getFloatingProps(element, parent, placement);
+    // For auto width the dropdown is forced to be at least as wide as the trigger,
+    // but clamped to its own max-inline-size: CSS lets a min-inline-size override
+    // the max when the minimum is larger, so a trigger wider than the viewport
+    // limit would otherwise drop the side margins or overflow horizontally.
+    let autoMinWidth = width;
+    if (autoWidth) {
+        const maxInlineSize = parseFloat(getComputedStyle(element).maxInlineSize);
+        if (!isNaN(maxInlineSize) && maxInlineSize > 0) {
+            autoMinWidth = Math.min(width, maxInlineSize);
+        }
+    }
+    if (fullWidth) {
+        element.style.inlineSize = `${width}px`;
+    }
+    else if (autoWidth) {
+        element.style.minInlineSize = `${autoMinWidth}px`;
+    }
+    // getFloatingProps measured childWidth before the inline styles were
+    // (re)applied, so use the width the dropdown will actually have:
+    // - auto: the clamped minimum, so end-aligned dropdowns don't extend past
+    //   the trigger's right edge.
+    // - full: the trigger width (the reset above drops it to content width).
+    let effectiveChildWidth = childWidth;
+    if (autoWidth) {
+        effectiveChildWidth = Math.max(childWidth, autoMinWidth);
+    }
+    else if (fullWidth) {
+        effectiveChildWidth = width;
+    }
+    // getFloatingProps detects horizontal overflow assuming a centered element
+    // (it halves childWidth). The dropdown is actually start-aligned (inset =
+    // left), so for the wider auto dropdown re-check overflow against its full
+    // width and flip to end-alignment when it would extend past the viewport.
+    let dropdownPlacement = correctedPlacement;
+    if (autoWidth && (dropdownPlacement === 'top' || dropdownPlacement === 'bottom' || dropdownPlacement === 'top-start' || dropdownPlacement === 'bottom-start') && left + effectiveChildWidth > innerWidth) {
+        dropdownPlacement = dropdownPlacement.startsWith('top') ? 'top-end' : 'bottom-end';
+    }
+    if (dropdownPlacement === 'top' || dropdownPlacement === 'bottom' || dropdownPlacement === 'top-start' || dropdownPlacement === 'bottom-start') {
+        element.style.insetInlineStart = `${left}px`;
+    }
+    else if (dropdownPlacement === 'top-end' || dropdownPlacement === 'bottom-end') {
+        element.style.insetInlineStart = `${Math.max(right - effectiveChildWidth, 0)}px`;
+    }
+    if (dropdownPlacement?.startsWith('top')) {
+        element.style.insetBlockStart = `${top - childHeight}px`;
+    }
+    else if (dropdownPlacement?.startsWith('bottom')) {
+        element.style.insetBlockStart = `${bottom}px`;
+    }
+    element.style.position = 'fixed';
+};
+export const getFloatingProps = (element, parent, placement) => {
+    if (!element || !parent) {
+        return {
+            top: 0,
+            bottom: 0,
+            right: 0,
+            height: 0,
+            width: 0,
+            left: 0,
+            childHeight: 0,
+            childWidth: 0,
+            correctedPlacement: placement,
+            innerWidth: window.innerWidth,
+            innerHeight: window.innerHeight
+        };
+    }
+    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?.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?.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?.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?.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
+    };
+};
+const MAX_ANCESTOR_DEPTH = 10;
+const ancestorCache = new WeakMap();
+const getAncestorHasCorrectedPlacement = (element) => {
+    if (ancestorCache.has(element)) {
+        return ancestorCache.get(element);
+    }
+    let current = element.parentElement;
+    let anchor = 0;
+    while (current && anchor < MAX_ANCESTOR_DEPTH) {
+        if (current.dataset['correctedPlacement']) {
+            ancestorCache.set(element, current);
+            return current;
+        }
+        current = current.parentElement;
+        anchor += 1;
+    }
+    ancestorCache.set(element, null);
+    return null;
+};
+export const handleFixedPopover = (element, parent, placement) => {
+    if (!element || !parent)
+        return;
+    const parentComputedStyles = getComputedStyle(parent);
+    const parentHasFloatingPosition = ['absolute', 'fixed'].includes(parentComputedStyles.position);
+    const ancestorWithCorrectedPlacement = getAncestorHasCorrectedPlacement(element);
+    const noFloatingAncestor = !ancestorWithCorrectedPlacement && !parentHasFloatingPosition;
+    const distance = getComputedStyle(element)?.getPropertyValue('--db-popover-distance') ?? '0px';
+    let { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
+    if (ancestorWithCorrectedPlacement) {
+        const ancestorRect = ancestorWithCorrectedPlacement.getBoundingClientRect();
+        left = Math.abs(left - ancestorRect.left);
+        right = (width + Math.abs(right - ancestorRect.right)) * 1.5; // We add a transform -50% later
+        top = Math.abs(top - ancestorRect.top);
+        bottom = (height + Math.abs(bottom - ancestorRect.bottom)) * 1.5; // We add a transform -50% later
+    }
+    if (parentHasFloatingPosition) {
+        /*
+         * If we have a floating element inside an element with position:absolute/fixed
+         * we need to calculate with relative values
+         * */
+        left = 0;
+        right = width;
+        top = 0;
+        bottom = height;
+        if (['auto', 'inherit', '0'].includes(parentComputedStyles.zIndex)) {
+            // We need the default zIndex for floating elements on the parent
+            parent.style.zIndex = '1';
+        }
+    }
+    // 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}%`);
+        }
+        else {
+            element.style.setProperty('--db-tooltip-arrow-inline-start', `50%`);
+        }
+    }
+    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}%`);
+        }
+        else {
+            element.style.setProperty('--db-tooltip-arrow-block-start', `50%`);
+        }
+    }
+    // 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 = `${!parentHasFloatingPosition && end > innerHeight ? innerHeight : end}px`;
+    }
+    else if (correctedPlacement === 'right-end' || correctedPlacement === 'left-end') {
+        const start = bottom - childHeight;
+        element.style.insetBlockStart = `${!parentHasFloatingPosition && 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 = `${!parentHasFloatingPosition && end > innerWidth ? innerWidth : end}px`;
+    }
+    else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
+        const start = right - childWidth;
+        element.style.insetInlineStart = `${!parentHasFloatingPosition && start < 0 ? 0 : start}px`;
+        element.style.insetInlineEnd = `${right}px`;
+    }
+    if (correctedPlacement?.startsWith('right')) {
+        const end = right + childWidth;
+        element.style.insetInlineStart = `calc(${right}px + ${distance})`;
+        element.style.insetInlineEnd = `calc(${noFloatingAncestor && end > innerWidth ? innerWidth : end}px + ${distance})`;
+    }
+    else if (correctedPlacement?.startsWith('left')) {
+        const start = left - childWidth;
+        element.style.insetInlineStart = `calc(${noFloatingAncestor && start < 0 ? 0 : start}px - ${distance})`;
+        element.style.insetInlineEnd = `calc(${right}px - ${distance})`;
+    }
+    else if (correctedPlacement?.startsWith('top')) {
+        const start = top - childHeight;
+        element.style.insetBlockStart = `calc(${noFloatingAncestor && start < 0 ? 0 : start}px - ${distance})`;
+        element.style.insetBlockEnd = `calc(${parentHasFloatingPosition ? start : bottom}px - ${distance})`;
+    }
+    else if (correctedPlacement?.startsWith('bottom')) {
+        const end = bottom + childHeight;
+        element.style.insetBlockStart = `calc(${parentHasFloatingPosition ? end : bottom}px + ${distance})`;
+        element.style.insetBlockEnd = `calc(${noFloatingAncestor && end > innerHeight ? innerHeight : end}px + ${distance})`;
+    }
+    element.style.position = 'fixed';
+    element.dataset['correctedPlacement'] = correctedPlacement;
 };
-//#endregion
-export { r as getFloatingProps, t as handleDataOutside, n as handleFixedDropdown, s as handleFixedPopover };