@banzamel/mineralui 2.1.3 → 2.1.4

package/dist/MPopover-DT3vclV1.js

@@ -1,98 +0,0 @@
-import { t as e } from "./cn-YER3QsV1.js";
-import { t } from "./MPortal-Ba2Sxset.js";
-import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
-//#region src/components/primitives/MPopover/MPopover.tsx
-function s({ open: s, anchorRef: c, onClose: l, placement: u = "bottom-start", matchWidth: d = !1, offset: f = 4, zIndex: p, children: m, className: h, style: g }) {
-	let _ = i(null), [v, y] = a(null), [b, x] = a(!1), [S, C] = a(null), w = n(() => {
-		if (p !== void 0) {
-			C(p);
-			return;
-		}
-		let e = c.current;
-		if (!e || typeof window > "u") {
-			C(null);
-			return;
-		}
-		let t = e.closest(".drawer-backdrop, .modal-backdrop, .sheet-backdrop, .sidebar.mobile-open, .popover");
-		if (!t) {
-			C(null);
-			return;
-		}
-		let n = window.getComputedStyle(t).zIndex, r = Number.parseInt(n, 10);
-		C(Number.isFinite(r) ? r + 1 : null);
-	}, [c, p]), T = n(() => {
-		if (!c.current || !_.current) return;
-		let e = c.current.getBoundingClientRect(), t = _.current.getBoundingClientRect(), n = {
-			width: window.innerWidth,
-			height: window.innerHeight
-		}, r = u.startsWith("top"), i = u.startsWith("right"), a = u.startsWith("left"), o = i || a, s = u.endsWith("end"), l, p;
-		if (o) {
-			let r = n.width - e.right - f, a = e.left - f, o = i ? r < t.width && a > r : a < t.width && r > a;
-			x(o), p = (i ? !o : o) ? e.right + f + window.scrollX : e.left - t.width - f + window.scrollX, l = s ? e.bottom - t.height + window.scrollY : e.top + window.scrollY;
-		} else {
-			let i = n.height - e.bottom - f, a = e.top - f, o = r ? a < t.height && i > a : i < t.height && a > i;
-			x(o), l = (r ? !o : o) ? e.top - t.height - f + window.scrollY : e.bottom + f + window.scrollY, p = s ? e.right - t.width + window.scrollX : e.left + window.scrollX;
-		}
-		p = Math.max(8, Math.min(p, n.width - t.width - 8)), l = Math.max(8 + window.scrollY, l), y({
-			top: l,
-			left: p,
-			width: d ? e.width : void 0
-		});
-	}, [
-		c,
-		u,
-		f,
-		d
-	]);
-	return r(() => {
-		if (!s) {
-			y(null), C(null);
-			return;
-		}
-		return w(), requestAnimationFrame(T), document.addEventListener("scroll", T, {
-			capture: !0,
-			passive: !0
-		}), window.addEventListener("resize", T, { passive: !0 }), () => {
-			document.removeEventListener("scroll", T, { capture: !0 }), window.removeEventListener("resize", T);
-		};
-	}, [
-		s,
-		w,
-		T
-	]), r(() => {
-		if (!s) return;
-		let e = (e) => {
-			e.key === "Escape" && l();
-		};
-		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, [s, l]), r(() => {
-		if (!s) return;
-		let e = (e) => {
-			_.current && !_.current.contains(e.target) && c.current && !c.current.contains(e.target) && l();
-		};
-		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [
-		s,
-		l,
-		c
-	]), s ? /* @__PURE__ */ o(t, { children: /* @__PURE__ */ o("div", {
-		ref: _,
-		className: e("popover", b ? "flipped" : "normal", h),
-		style: {
-			position: "absolute",
-			top: v?.top ?? 0,
-			left: v?.left ?? 0,
-			width: v?.width,
-			zIndex: S ?? void 0,
-			visibility: v ? "visible" : "hidden",
-			...g
-		},
-		role: "listbox",
-		children: m
-	}) }) : null;
-}
-//#endregion
-export { s as t };
-
-//# sourceMappingURL=MPopover-DT3vclV1.js.map

package/dist/MPopover-DT3vclV1.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MPopover-DT3vclV1.js","names":[],"sources":["../src/components/primitives/MPopover/MPopover.tsx"],"sourcesContent":["import {useState, useEffect, useRef, useCallback} from 'react'\nimport {MPortal} from '../MPortal'\nimport {cn} from '../../../utils/cn'\nimport type {MPopoverProps} from './MPopover.types'\nimport './MPopover.css'\n\n// Position floating content relative to an anchor with viewport-aware flipping.\nexport function MPopover({\n    open,\n    anchorRef,\n    onClose,\n    placement = 'bottom-start',\n    matchWidth = false,\n    offset = 4,\n    zIndex,\n    children,\n    className,\n    style,\n}: MPopoverProps) {\n    const popoverRef = useRef<HTMLDivElement>(null)\n    const [position, setPosition] = useState<{top: number; left: number; width?: number} | null>(null)\n    const [flipped, setFlipped] = useState(false)\n    const [layerZ, setLayerZ] = useState<number | string | null>(null)\n\n    // Lift popovers above drawers, modals and mobile sidebars when the anchor sits inside them.\n    const updateLayer = useCallback(() => {\n        if (zIndex !== undefined) {\n            setLayerZ(zIndex)\n            return\n        }\n\n        const anchor = anchorRef.current\n        if (!anchor || typeof window === 'undefined') {\n            setLayerZ(null)\n            return\n        }\n\n        const layerHost = anchor.closest(\n            '.drawer-backdrop, .modal-backdrop, .sheet-backdrop, .sidebar.mobile-open, .popover'\n        )\n        if (!layerHost) {\n            setLayerZ(null)\n            return\n        }\n\n        const computedZ = window.getComputedStyle(layerHost).zIndex\n        const parsedZ = Number.parseInt(computedZ, 10)\n        setLayerZ(Number.isFinite(parsedZ) ? parsedZ + 1 : null)\n    }, [anchorRef, zIndex])\n\n    // Recalculate popover position whenever layout or viewport constraints change.\n    const updatePosition = useCallback(() => {\n        if (!anchorRef.current || !popoverRef.current) return\n\n        const anchor = anchorRef.current.getBoundingClientRect()\n        const popover = popoverRef.current.getBoundingClientRect()\n        const viewport = {\n            width: window.innerWidth,\n            height: window.innerHeight,\n        }\n\n        const isTop = placement.startsWith('top')\n        const isRight = placement.startsWith('right')\n        const isLeft = placement.startsWith('left')\n        const isHorizontal = isRight || isLeft\n        const isEnd = placement.endsWith('end')\n\n        let top: number\n        let left: number\n\n        if (isHorizontal) {\n            // Horizontal placement: position to the right or left of the anchor\n            const spaceRight = viewport.width - anchor.right - offset\n            const spaceLeft = anchor.left - offset\n            const shouldFlip = isRight\n                ? spaceRight < popover.width && spaceLeft > spaceRight\n                : spaceLeft < popover.width && spaceRight > spaceLeft\n\n            setFlipped(shouldFlip)\n\n            const showOnRight = isRight ? !shouldFlip : shouldFlip\n\n            if (showOnRight) {\n                left = anchor.right + offset + window.scrollX\n            } else {\n                left = anchor.left - popover.width - offset + window.scrollX\n            }\n\n            if (isEnd) {\n                top = anchor.bottom - popover.height + window.scrollY\n            } else {\n                top = anchor.top + window.scrollY\n            }\n        } else {\n            // Vertical placement: position above or below the anchor\n            const spaceBelow = viewport.height - anchor.bottom - offset\n            const spaceAbove = anchor.top - offset\n            const shouldFlip = isTop\n                ? spaceAbove < popover.height && spaceBelow > spaceAbove\n                : spaceBelow < popover.height && spaceAbove > spaceBelow\n\n            setFlipped(shouldFlip)\n\n            const showOnTop = isTop ? !shouldFlip : shouldFlip\n\n            if (showOnTop) {\n                top = anchor.top - popover.height - offset + window.scrollY\n            } else {\n                top = anchor.bottom + offset + window.scrollY\n            }\n\n            if (isEnd) {\n                left = anchor.right - popover.width + window.scrollX\n            } else {\n                left = anchor.left + window.scrollX\n            }\n        }\n\n        // Clamp to viewport\n        left = Math.max(8, Math.min(left, viewport.width - popover.width - 8))\n        top = Math.max(8 + window.scrollY, top)\n\n        setPosition({\n            top,\n            left,\n            width: matchWidth ? anchor.width : undefined,\n        })\n    }, [anchorRef, placement, offset, matchWidth])\n\n    useEffect(() => {\n        if (!open) {\n            setPosition(null)\n            setLayerZ(null)\n            return\n        }\n\n        updateLayer()\n        // Wait one frame so the rendered popover can be measured accurately.\n        requestAnimationFrame(updatePosition)\n\n        // `scroll` does not bubble, so a window listener only ever sees the\n        // document scrolling. Anchors living inside a scrollable ancestor — an\n        // app shell with a scrolling main region, MStickyPanel, an overflowing\n        // card — would leave the popover stranded at its opening coordinates\n        // while the anchor moved away underneath it. Scroll events do capture,\n        // so a capture-phase listener on the document catches scrolling from\n        // ANY container, including the document itself.\n        document.addEventListener('scroll', updatePosition, {capture: true, passive: true})\n        window.addEventListener('resize', updatePosition, {passive: true})\n        return () => {\n            document.removeEventListener('scroll', updatePosition, {capture: true})\n            window.removeEventListener('resize', updatePosition)\n        }\n    }, [open, updateLayer, updatePosition])\n\n    // Close the popover with the standard Escape key interaction.\n    useEffect(() => {\n        if (!open) return\n        const handleKey = (e: KeyboardEvent) => {\n            if (e.key === 'Escape') onClose()\n        }\n        document.addEventListener('keydown', handleKey)\n        return () => document.removeEventListener('keydown', handleKey)\n    }, [open, onClose])\n\n    // Close when the user interacts outside both the popover and its anchor.\n    useEffect(() => {\n        if (!open) return\n        const handleClick = (e: MouseEvent) => {\n            if (\n                popoverRef.current &&\n                !popoverRef.current.contains(e.target as Node) &&\n                anchorRef.current &&\n                !anchorRef.current.contains(e.target as Node)\n            ) {\n                onClose()\n            }\n        }\n        document.addEventListener('mousedown', handleClick)\n        return () => document.removeEventListener('mousedown', handleClick)\n    }, [open, onClose, anchorRef])\n\n    if (!open) return null\n\n    return (\n        <MPortal>\n            <div\n                ref={popoverRef}\n                className={cn('popover', flipped ? 'flipped' : 'normal', className)}\n                style={{\n                    position: 'absolute',\n                    top: position?.top ?? 0,\n                    left: position?.left ?? 0,\n                    width: position?.width,\n                    zIndex: layerZ ?? undefined,\n                    visibility: position ? 'visible' : 'hidden',\n                    ...style,\n                }}\n                role=\"listbox\"\n            >\n                {children}\n            </div>\n        </MPortal>\n    )\n}\n"],"mappings":"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"}