@feathery/react 2.6.8 → 2.8.0

package/dist/fthry_Overlay.X0blINpo.js

@@ -0,0 +1,228 @@
+import { t as __rest, b as jsx, a as __assign, k as FORM_Z_INDEX, _ as __read, s as featheryDoc, l as featheryWindow, m as Fragment } from './fthry_index.F6BXSHA5.js';
+import { useRef, useState, useCallback, useLayoutEffect, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+var Tooltip = function (_a) {
+    var children = _a.children, css = _a.css, props = __rest(_a, ["children", "css"]);
+    return (jsx("div", __assign({ css: __assign({ zIndex: FORM_Z_INDEX + 1, padding: '.4rem 0', transition: 'opacity .10s linear', '.tooltip-inner': {
+                maxWidth: '200px',
+                padding: '.25rem .5rem',
+                color: '#fff',
+                textAlign: 'center',
+                backgroundColor: '#000',
+                borderRadius: '.25rem',
+                fontSize: 'smaller'
+            } }, css) }, props, { children: jsx("div", __assign({ className: 'tooltip-inner' }, { children: children })) })));
+};
+
+var Overlay = function (_a) {
+    var show = _a.show, targetRef = _a.targetRef, children = _a.children, onHide = _a.onHide, _b = _a.placement, placement = _b === void 0 ? 'bottom-start' : _b, _c = _a.offset, offset = _c === void 0 ? 0 : _c, _d = _a.zIndex, zIndex = _d === void 0 ? 1000 : _d, containerRef = _a.containerRef;
+    var ref = useRef(null);
+    var _e = __read(useState(null), 2), position = _e[0], setPosition = _e[1];
+    var getContainer = useCallback(function () {
+        return (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || featheryDoc().body;
+    }, [containerRef]);
+    var recalcPosition = useCallback(function () {
+        var _a;
+        if (!show || !targetRef.current || !ref.current)
+            return;
+        var window = featheryWindow();
+        var container = getContainer();
+        if (!container)
+            return;
+        var targetRect = targetRef.current.getBoundingClientRect();
+        var overlayRect = ref.current.getBoundingClientRect();
+        var containerRect = container.getBoundingClientRect();
+        var _b = calcPosition(placement, targetRect, overlayRect, offset), top = _b.top, left = _b.left;
+        // Flip if it doesn’t fit
+        var overlayBottom = top + overlayRect.height;
+        var overlayRight = left + overlayRect.width;
+        var fitsVertically = top >= 0 && overlayBottom <= window.innerHeight;
+        var fitsHorizontally = left >= 0 && overlayRight <= window.innerWidth;
+        if (!fitsVertically || !fitsHorizontally) {
+            var flipped = getFlippedPlacement(placement, !fitsVertically, !fitsHorizontally);
+            if (flipped !== placement) {
+                (_a = calcPosition(flipped, targetRect, overlayRect, offset), top = _a.top, left = _a.left);
+            }
+        }
+        var isBodyContainer = container === featheryDoc().body;
+        var finalTop = isBodyContainer
+            ? top + window.scrollY
+            : top - containerRect.top;
+        var finalLeft = isBodyContainer
+            ? left + window.scrollX
+            : left - containerRect.left;
+        setPosition(function (prev) {
+            if (!prev || prev.top !== finalTop || prev.left !== finalLeft) {
+                return { top: finalTop, left: finalLeft };
+            }
+            return prev;
+        });
+    }, [show, placement, offset, getContainer, targetRef]);
+    var throttledRecalc = useCallback(function () {
+        var ticking = false;
+        return function () {
+            if (!ticking) {
+                ticking = true;
+                requestAnimationFrame(function () {
+                    recalcPosition();
+                    ticking = false;
+                });
+            }
+        };
+    }, [recalcPosition])();
+    useLayoutEffect(function () {
+        if (show)
+            recalcPosition();
+    }, [show, recalcPosition]);
+    useEffect(function () {
+        if (!show)
+            return;
+        var window = featheryWindow();
+        var container = getContainer();
+        if (!container)
+            return;
+        window.addEventListener('resize', throttledRecalc);
+        window.addEventListener('scroll', throttledRecalc, true);
+        if (container !== featheryDoc().body) {
+            container.addEventListener('scroll', throttledRecalc);
+        }
+        var resizeObserver = new ResizeObserver(function () { return throttledRecalc(); });
+        if (targetRef.current)
+            resizeObserver.observe(targetRef.current);
+        if (container !== featheryDoc().body)
+            resizeObserver.observe(container);
+        return function () {
+            window.removeEventListener('resize', throttledRecalc);
+            window.removeEventListener('scroll', throttledRecalc, true);
+            if (container !== featheryDoc().body) {
+                container.removeEventListener('scroll', throttledRecalc);
+            }
+            resizeObserver.disconnect();
+        };
+    }, [show, throttledRecalc, getContainer, targetRef]);
+    useEffect(function () {
+        if (!show)
+            return;
+        var handleKeyDown = function (event) {
+            if (event.key === 'Escape') {
+                setPosition(null);
+                onHide === null || onHide === void 0 ? void 0 : onHide();
+            }
+        };
+        var handleClickOutside = function (event) {
+            var target = event.target;
+            if (ref.current &&
+                !ref.current.contains(target) &&
+                targetRef.current &&
+                !targetRef.current.contains(target)) {
+                setPosition(null);
+                onHide === null || onHide === void 0 ? void 0 : onHide();
+            }
+        };
+        var doc = featheryDoc();
+        doc.addEventListener('mousedown', handleClickOutside);
+        doc.addEventListener('keydown', handleKeyDown);
+        return function () {
+            doc.removeEventListener('mousedown', handleClickOutside);
+            doc.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [show, onHide, targetRef]);
+    if (!show)
+        return null;
+    var container = getContainer();
+    if (!container)
+        return jsx(Fragment, { children: children });
+    return createPortal(jsx("div", __assign({ ref: ref, style: __assign(__assign({ position: 'absolute' }, (position || { top: -9999, left: -9999 })), { zIndex: zIndex }) }, { children: children })), container);
+};
+var getFlippedPlacement = function (original, needsVerticalFlip, needsHorizontalFlip) {
+    if (needsVerticalFlip) {
+        if (original.includes('top')) {
+            return original.replace('top', 'bottom');
+        }
+        if (original.includes('bottom')) {
+            return original.replace('bottom', 'top');
+        }
+    }
+    if (needsHorizontalFlip) {
+        if (original.includes('left')) {
+            return original.replace('left', 'right');
+        }
+        if (original.includes('right')) {
+            return original.replace('right', 'left');
+        }
+    }
+    return original;
+};
+var calcPosition = function (pl, targetRect, overlayRect, offset) {
+    if (offset === void 0) { offset = 0; }
+    switch (pl) {
+        case 'top':
+            return {
+                top: targetRect.top - overlayRect.height - offset,
+                left: targetRect.left + (targetRect.width - overlayRect.width) / 2
+            };
+        case 'top-start':
+            return {
+                top: targetRect.top - overlayRect.height - offset,
+                left: targetRect.left
+            };
+        case 'top-end':
+            return {
+                top: targetRect.top - overlayRect.height - offset,
+                left: targetRect.right - overlayRect.width
+            };
+        case 'left':
+            return {
+                top: targetRect.top + (targetRect.height - overlayRect.height) / 2,
+                left: targetRect.left - overlayRect.width - offset
+            };
+        case 'left-start':
+            return {
+                top: targetRect.top,
+                left: targetRect.left - overlayRect.width - offset
+            };
+        case 'left-end':
+            return {
+                top: targetRect.bottom - overlayRect.height,
+                left: targetRect.left - overlayRect.width - offset
+            };
+        case 'bottom':
+            return {
+                top: targetRect.bottom + offset,
+                left: targetRect.left + (targetRect.width - overlayRect.width) / 2
+            };
+        case 'bottom-start':
+            return {
+                top: targetRect.bottom + offset,
+                left: targetRect.left
+            };
+        case 'bottom-end':
+            return {
+                top: targetRect.bottom + offset,
+                left: targetRect.right - overlayRect.width
+            };
+        case 'right':
+            return {
+                top: targetRect.top + (targetRect.height - overlayRect.height) / 2,
+                left: targetRect.right + offset
+            };
+        case 'right-start':
+            return {
+                top: targetRect.top,
+                left: targetRect.right + offset
+            };
+        case 'right-end':
+            return {
+                top: targetRect.bottom - overlayRect.height,
+                left: targetRect.right + offset
+            };
+        default:
+            return {
+                top: targetRect.bottom + offset,
+                left: targetRect.left + (targetRect.width - overlayRect.width) / 2
+            };
+    }
+};
+
+export { Overlay as O, Tooltip as T };