@geneui/components 2.12.1 → 2.12.2

package/PopoverV2/index.js

@@ -1,989 +1,18 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
-import React__default, { forwardRef, useContext, useRef, useState, useMemo, useEffect, useCallback } from 'react';
-import { c as commonjsGlobal } from '../_commonjsHelpers-24198af3.js';
-import { j as jsxRuntimeExports } from '../jsx-runtime-57b40d9e.js';
-import ReactDOM__default from 'react-dom';
-import { u as useSwipeable } from '../index-122432cd.js';
-import { c as classnames } from '../index-6ff23041.js';
-import PropTypes from 'prop-types';
-import { n as noop, s as stopEvent } from '../index-a0e4e333.js';
-import useDeviceType from '../hooks/useDeviceType.js';
-import useClickOutside from '../hooks/useClickOutside.js';
-import { g as popoverV2Config, s as screenTypes } from '../configs-fed6ac34.js';
-import CustomScrollbar from '../Scrollbar/index.js';
-import { GeneUIDesignSystemContext } from '../GeneUIProvider/index.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import { d as debounce } from '../debounce-4419bc2f.js';
+import '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+import 'react';
+export { P as default } from '../index-462461c0.js';
+import '../index-122432cd.js';
+import '../index-6ff23041.js';
+import 'prop-types';
+import '../index-a0e4e333.js';
+import '../hooks/useDeviceType.js';
+import '../hooks/useClickOutside.js';
+import '../configs-fed6ac34.js';
+import '../Scrollbar/index.js';
+import '../GeneUIProvider/index.js';
+import '../debounce-4419bc2f.js';
+import '../_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import '../style-inject.es-746bb8ed.js';
 import '../dateValidation-67caec66.js';
 import '../hooks/useWindowSize.js';
-
-var Popover = {};
-
-var PopoverPortal$1 = {};
-
-Object.defineProperty(PopoverPortal$1, "__esModule", { value: true });
-PopoverPortal$1.PopoverPortal = void 0;
-var react_1$5 = React__default;
-var react_dom_1 = ReactDOM__default;
-var PopoverPortal = function (_a) {
-    var container = _a.container, element = _a.element, children = _a.children;
-    react_1$5.useLayoutEffect(function () {
-        container.appendChild(element);
-        return function () {
-            container.removeChild(element);
-        };
-    }, [container, element]);
-    return react_dom_1.createPortal(children, element);
-};
-PopoverPortal$1.PopoverPortal = PopoverPortal;
-
-var util = {};
-
-(function (exports) {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.getNudgedPopoverRect = exports.getNewPopoverRect = exports.popoverRectForPosition = exports.createContainer = exports.targetPositionHasChanged = exports.popoverStatesAreEqual = exports.rectsAreEqual = exports.arrayUnique = exports.Constants = void 0;
-	exports.Constants = {
-	    POPOVER_CONTAINER_CLASS_NAME: 'react-tiny-popover-container',
-	    DEFAULT_ALIGN: 'center',
-	    OBSERVER_THRESHOLDS: Array(1000)
-	        .fill(null)
-	        .map(function (_, i) { return i / 1000; })
-	        .reverse(),
-	    DEFAULT_POSITIONS: ['top', 'left', 'right', 'bottom'],
-	    EMPTY_CLIENT_RECT: {
-	        top: 0,
-	        left: 0,
-	        bottom: 0,
-	        height: 0,
-	        right: 0,
-	        width: 0,
-	    },
-	};
-	var arrayUnique = function (array) {
-	    return array.filter(function (value, index, self) { return self.indexOf(value) === index; });
-	};
-	exports.arrayUnique = arrayUnique;
-	var rectsAreEqual = function (rectA, rectB) {
-	    return rectA === rectB ||
-	        ((rectA === null || rectA === void 0 ? void 0 : rectA.bottom) === (rectB === null || rectB === void 0 ? void 0 : rectB.bottom) &&
-	            (rectA === null || rectA === void 0 ? void 0 : rectA.height) === (rectB === null || rectB === void 0 ? void 0 : rectB.height) &&
-	            (rectA === null || rectA === void 0 ? void 0 : rectA.left) === (rectB === null || rectB === void 0 ? void 0 : rectB.left) &&
-	            (rectA === null || rectA === void 0 ? void 0 : rectA.right) === (rectB === null || rectB === void 0 ? void 0 : rectB.right) &&
-	            (rectA === null || rectA === void 0 ? void 0 : rectA.top) === (rectB === null || rectB === void 0 ? void 0 : rectB.top) &&
-	            (rectA === null || rectA === void 0 ? void 0 : rectA.width) === (rectB === null || rectB === void 0 ? void 0 : rectB.width));
-	};
-	exports.rectsAreEqual = rectsAreEqual;
-	var popoverStatesAreEqual = function (stateA, stateB) {
-	    return stateA === stateB ||
-	        ((stateA === null || stateA === void 0 ? void 0 : stateA.align) === (stateB === null || stateB === void 0 ? void 0 : stateB.align) &&
-	            (stateA === null || stateA === void 0 ? void 0 : stateA.nudgedLeft) === (stateB === null || stateB === void 0 ? void 0 : stateB.nudgedLeft) &&
-	            (stateA === null || stateA === void 0 ? void 0 : stateA.nudgedTop) === (stateB === null || stateB === void 0 ? void 0 : stateB.nudgedTop) &&
-	            stateA.padding === stateB.padding &&
-	            exports.rectsAreEqual(stateA === null || stateA === void 0 ? void 0 : stateA.popoverRect, stateB === null || stateB === void 0 ? void 0 : stateB.popoverRect) &&
-	            exports.rectsAreEqual(stateA === null || stateA === void 0 ? void 0 : stateA.childRect, stateB === null || stateB === void 0 ? void 0 : stateB.childRect) &&
-	            (stateA === null || stateA === void 0 ? void 0 : stateA.position) === (stateB === null || stateB === void 0 ? void 0 : stateB.position));
-	};
-	exports.popoverStatesAreEqual = popoverStatesAreEqual;
-	var targetPositionHasChanged = function (oldRect, newRect) {
-	    return oldRect === undefined ||
-	        oldRect.left !== newRect.left ||
-	        oldRect.top !== newRect.top ||
-	        oldRect.width !== newRect.width ||
-	        oldRect.height !== newRect.height;
-	};
-	exports.targetPositionHasChanged = targetPositionHasChanged;
-	var createContainer = function (containerStyle, containerClassName) {
-	    var container = window.document.createElement('div');
-	    if (containerClassName)
-	        container.className = containerClassName;
-	    Object.assign(container.style, containerStyle);
-	    return container;
-	};
-	exports.createContainer = createContainer;
-	var popoverRectForPosition = function (position, childRect, popoverRect, padding, align) {
-	    var targetMidX = childRect.left + childRect.width / 2;
-	    var targetMidY = childRect.top + childRect.height / 2;
-	    var width = popoverRect.width, height = popoverRect.height;
-	    var top;
-	    var left;
-	    switch (position) {
-	        case 'left':
-	            top = targetMidY - height / 2;
-	            left = childRect.left - padding - width;
-	            if (align === 'start') {
-	                top = childRect.top;
-	            }
-	            if (align === 'end') {
-	                top = childRect.bottom - height;
-	            }
-	            break;
-	        case 'bottom':
-	            top = childRect.bottom + padding;
-	            left = targetMidX - width / 2;
-	            if (align === 'start') {
-	                left = childRect.left;
-	            }
-	            if (align === 'end') {
-	                left = childRect.right - width;
-	            }
-	            break;
-	        case 'right':
-	            top = targetMidY - height / 2;
-	            left = childRect.right + padding;
-	            if (align === 'start') {
-	                top = childRect.top;
-	            }
-	            if (align === 'end') {
-	                top = childRect.bottom - height;
-	            }
-	            break;
-	        default:
-	            top = childRect.top - height - padding;
-	            left = targetMidX - width / 2;
-	            if (align === 'start') {
-	                left = childRect.left;
-	            }
-	            if (align === 'end') {
-	                left = childRect.right - width;
-	            }
-	            break;
-	    }
-	    return { top: top, left: left, width: width, height: height, right: left + width, bottom: top + height };
-	};
-	exports.popoverRectForPosition = popoverRectForPosition;
-	var getNewPopoverRect = function (_a, boundaryInset) {
-	    var position = _a.position, align = _a.align, childRect = _a.childRect, popoverRect = _a.popoverRect, parentRect = _a.parentRect, padding = _a.padding, reposition = _a.reposition;
-	    var rect = exports.popoverRectForPosition(position, childRect, popoverRect, padding, align);
-	    var boundaryViolation = reposition &&
-	        ((position === 'top' && rect.top < parentRect.top + boundaryInset) ||
-	            (position === 'left' && rect.left < parentRect.left + boundaryInset) ||
-	            (position === 'right' && rect.right > parentRect.right - boundaryInset) ||
-	            (position === 'bottom' && rect.bottom > parentRect.bottom - boundaryInset));
-	    return {
-	        rect: rect,
-	        boundaryViolation: boundaryViolation,
-	    };
-	};
-	exports.getNewPopoverRect = getNewPopoverRect;
-	var getNudgedPopoverRect = function (popoverRect, parentRect, boundaryInset) {
-	    var topBoundary = parentRect.top + boundaryInset;
-	    var leftBoundary = parentRect.left + boundaryInset;
-	    var rightBoundary = parentRect.right - boundaryInset;
-	    var bottomBoundary = parentRect.bottom - boundaryInset;
-	    var top = popoverRect.top < topBoundary ? topBoundary : popoverRect.top;
-	    top = top + popoverRect.height > bottomBoundary ? bottomBoundary - popoverRect.height : top;
-	    var left = popoverRect.left < leftBoundary ? leftBoundary : popoverRect.left;
-	    left = left + popoverRect.width > rightBoundary ? rightBoundary - popoverRect.width : left;
-	    return {
-	        top: top,
-	        left: left,
-	        width: popoverRect.width,
-	        height: popoverRect.height,
-	        right: left + popoverRect.width,
-	        bottom: top + popoverRect.height,
-	    };
-	};
-	exports.getNudgedPopoverRect = getNudgedPopoverRect;
-	
-} (util));
-
-var usePopover$1 = {};
-
-var useElementRef$1 = {};
-
-Object.defineProperty(useElementRef$1, "__esModule", { value: true });
-useElementRef$1.useElementRef = void 0;
-var react_1$4 = React__default;
-var util_1$1 = util;
-var useElementRef = function (containerClassName, containerStyle) {
-    var element = react_1$4.useMemo(function () { return util_1$1.createContainer(containerStyle, containerClassName); }, [containerClassName, containerStyle]);
-    return react_1$4.useRef(element);
-};
-useElementRef$1.useElementRef = useElementRef;
-
-Object.defineProperty(usePopover$1, "__esModule", { value: true });
-usePopover$1.usePopover = void 0;
-var react_1$3 = React__default;
-var util_1 = util;
-var useElementRef_1 = useElementRef$1;
-var usePopover = function (_a) {
-    var childRef = _a.childRef, positions = _a.positions, containerClassName = _a.containerClassName, containerParent = _a.containerParent, contentLocation = _a.contentLocation, align = _a.align, padding = _a.padding, reposition = _a.reposition, boundaryInset = _a.boundaryInset, onPositionPopover = _a.onPositionPopover;
-    var popoverRef = useElementRef_1.useElementRef(containerClassName, {
-        position: 'fixed',
-        overflow: 'visible',
-        top: '0px',
-        left: '0px',
-    });
-    var positionPopover = react_1$3.useCallback(function (positionIndex, childRect, popoverRect, parentRect) {
-        var _a;
-        if (positionIndex === void 0) { positionIndex = 0; }
-        if (childRect === void 0) { childRect = (_a = childRef === null || childRef === void 0 ? void 0 : childRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); }
-        if (popoverRect === void 0) { popoverRect = popoverRef.current.getBoundingClientRect(); }
-        if (parentRect === void 0) { parentRect = containerParent === null || containerParent === void 0 ? void 0 : containerParent.getBoundingClientRect(); }
-        if (!childRect || !parentRect) {
-            return;
-        }
-        if (contentLocation) {
-            var _b = typeof contentLocation === 'function'
-                ? contentLocation({
-                    childRect: childRect,
-                    popoverRect: popoverRect,
-                    parentRect: parentRect,
-                    padding: padding,
-                    nudgedTop: 0,
-                    nudgedLeft: 0,
-                    boundaryInset: boundaryInset,
-                })
-                : contentLocation, inputTop = _b.top, inputLeft = _b.left;
-            var left_1 = parentRect.left + inputLeft;
-            var top_1 = parentRect.top + inputTop;
-            popoverRef.current.style.transform = "translate(" + left_1 + "px, " + top_1 + "px)";
-            onPositionPopover({
-                childRect: childRect,
-                popoverRect: popoverRect,
-                parentRect: parentRect,
-                padding: padding,
-                nudgedTop: 0,
-                nudgedLeft: 0,
-                boundaryInset: boundaryInset,
-            });
-            return;
-        }
-        var isExhausted = positionIndex === positions.length;
-        var position = isExhausted ? positions[0] : positions[positionIndex];
-        var _c = util_1.getNewPopoverRect({
-            childRect: childRect,
-            popoverRect: popoverRect,
-            parentRect: parentRect,
-            position: position,
-            align: align,
-            padding: padding,
-            reposition: reposition,
-        }, boundaryInset), rect = _c.rect, boundaryViolation = _c.boundaryViolation;
-        if (boundaryViolation && reposition && !isExhausted) {
-            positionPopover(positionIndex + 1, childRect, popoverRect, parentRect);
-            return;
-        }
-        var top = rect.top, left = rect.left, width = rect.width, height = rect.height;
-        var shouldNudge = reposition && !isExhausted;
-        var _d = util_1.getNudgedPopoverRect(rect, parentRect, boundaryInset), nudgedLeft = _d.left, nudgedTop = _d.top;
-        var finalTop = top;
-        var finalLeft = left;
-        if (shouldNudge) {
-            finalTop = nudgedTop;
-            finalLeft = nudgedLeft;
-        }
-        popoverRef.current.style.transform = "translate(" + finalLeft + "px, " + finalTop + "px)";
-        onPositionPopover({
-            childRect: childRect,
-            popoverRect: {
-                top: finalTop,
-                left: finalLeft,
-                width: width,
-                height: height,
-                right: finalLeft + width,
-                bottom: finalTop + height,
-            },
-            parentRect: parentRect,
-            position: position,
-            align: align,
-            padding: padding,
-            nudgedTop: nudgedTop - top,
-            nudgedLeft: nudgedLeft - left,
-            boundaryInset: boundaryInset,
-        });
-    }, [
-        childRef,
-        popoverRef,
-        positions,
-        align,
-        padding,
-        reposition,
-        boundaryInset,
-        containerParent,
-        contentLocation,
-        onPositionPopover,
-    ]);
-    return [positionPopover, popoverRef];
-};
-usePopover$1.usePopover = usePopover;
-
-var useMemoizedArray$1 = {};
-
-Object.defineProperty(useMemoizedArray$1, "__esModule", { value: true });
-useMemoizedArray$1.useMemoizedArray = void 0;
-var react_1$2 = React__default;
-var useMemoizedArray = function (externalArray) {
-    var prevArrayRef = react_1$2.useRef(externalArray);
-    var array = react_1$2.useMemo(function () {
-        if (prevArrayRef.current === externalArray)
-            return prevArrayRef.current;
-        if (prevArrayRef.current.length !== externalArray.length) {
-            prevArrayRef.current = externalArray;
-            return externalArray;
-        }
-        for (var i = 0; i < externalArray.length; i += 1) {
-            if (externalArray[i] !== prevArrayRef.current[i]) {
-                prevArrayRef.current = externalArray;
-                return externalArray;
-            }
-        }
-        return prevArrayRef.current;
-    }, [externalArray]);
-    return array;
-};
-useMemoizedArray$1.useMemoizedArray = useMemoizedArray;
-
-var useArrowContainer$1 = {};
-
-var __assign$1 = (commonjsGlobal && commonjsGlobal.__assign) || function () {
-    __assign$1 = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign$1.apply(this, arguments);
-};
-Object.defineProperty(useArrowContainer$1, "__esModule", { value: true });
-useArrowContainer$1.useArrowContainer = void 0;
-var react_1$1 = React__default;
-var useArrowContainer = function (_a) {
-    var childRect = _a.childRect, popoverRect = _a.popoverRect, position = _a.position, arrowSize = _a.arrowSize, arrowColor = _a.arrowColor;
-    var arrowContainerStyle = react_1$1.useMemo(function () {
-        return ({
-            padding: arrowSize,
-        });
-    }, [arrowSize]);
-    var arrowStyle = react_1$1.useMemo(function () {
-        return (__assign$1({ position: 'absolute' }, (function () {
-            var arrowWidth = arrowSize * 2;
-            var top = childRect.top - popoverRect.top + childRect.height / 2 - arrowWidth / 2;
-            var left = childRect.left - popoverRect.left + childRect.width / 2 - arrowWidth / 2;
-            var lowerBound = arrowSize;
-            var leftUpperBound = popoverRect.width - arrowSize;
-            var topUpperBound = popoverRect.height - arrowSize;
-            left = left < lowerBound ? lowerBound : left;
-            left = left + arrowWidth > leftUpperBound ? leftUpperBound - arrowWidth : left;
-            top = top < lowerBound ? lowerBound : top;
-            top = top + arrowWidth > topUpperBound ? topUpperBound - arrowWidth : top;
-            top = Number.isNaN(top) ? 0 : top;
-            left = Number.isNaN(left) ? 0 : left;
-            switch (position) {
-                case 'right':
-                    return {
-                        borderTop: arrowSize + "px solid transparent",
-                        borderBottom: arrowSize + "px solid transparent",
-                        borderRight: arrowSize + "px solid " + arrowColor,
-                        left: 0,
-                        top: top,
-                    };
-                case 'left':
-                    return {
-                        borderTop: arrowSize + "px solid transparent",
-                        borderBottom: arrowSize + "px solid transparent",
-                        borderLeft: arrowSize + "px solid " + arrowColor,
-                        right: 0,
-                        top: top,
-                    };
-                case 'bottom':
-                    return {
-                        borderLeft: arrowSize + "px solid transparent",
-                        borderRight: arrowSize + "px solid transparent",
-                        borderBottom: arrowSize + "px solid " + arrowColor,
-                        top: 0,
-                        left: left,
-                    };
-                case 'top':
-                    return {
-                        borderLeft: arrowSize + "px solid transparent",
-                        borderRight: arrowSize + "px solid transparent",
-                        borderTop: arrowSize + "px solid " + arrowColor,
-                        bottom: 0,
-                        left: left,
-                    };
-                default:
-                    return {
-                        display: 'hidden',
-                    };
-            }
-        })()));
-    }, [
-        arrowColor,
-        arrowSize,
-        childRect.height,
-        childRect.left,
-        childRect.top,
-        childRect.width,
-        popoverRect.height,
-        popoverRect.left,
-        popoverRect.top,
-        popoverRect.width,
-        position,
-    ]);
-    return {
-        arrowContainerStyle: arrowContainerStyle,
-        arrowStyle: arrowStyle,
-    };
-};
-useArrowContainer$1.useArrowContainer = useArrowContainer;
-
-var ArrowContainer$1 = {};
-
-var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(ArrowContainer$1, "__esModule", { value: true });
-ArrowContainer$1.ArrowContainer = void 0;
-var jsx_runtime_1 = jsxRuntimeExports;
-var react_1 = React__default;
-var useArrowContainer_1 = useArrowContainer$1;
-var ArrowContainer = function (_a) {
-    var childRect = _a.childRect, popoverRect = _a.popoverRect, position = _a.position, arrowColor = _a.arrowColor, arrowSize = _a.arrowSize, arrowClassName = _a.arrowClassName, externalArrowStyle = _a.arrowStyle, className = _a.className, children = _a.children, externalArrowContainerStyle = _a.style;
-    var _b = useArrowContainer_1.useArrowContainer({
-        childRect: childRect,
-        popoverRect: popoverRect,
-        position: position,
-        arrowColor: arrowColor,
-        arrowSize: arrowSize,
-    }), arrowContainerStyle = _b.arrowContainerStyle, arrowStyle = _b.arrowStyle;
-    var mergedContainerStyle = react_1.useMemo(function () { return (__assign(__assign({}, arrowContainerStyle), externalArrowContainerStyle)); }, [arrowContainerStyle, externalArrowContainerStyle]);
-    var mergedArrowStyle = react_1.useMemo(function () { return (__assign(__assign({}, arrowStyle), externalArrowStyle)); }, [arrowStyle, externalArrowStyle]);
-    return (jsx_runtime_1.jsxs("div", __assign({ className: className, style: mergedContainerStyle }, { children: [jsx_runtime_1.jsx("div", { style: mergedArrowStyle, className: arrowClassName }, void 0), children] }), void 0));
-};
-ArrowContainer$1.ArrowContainer = ArrowContainer;
-
-(function (exports) {
-	var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
-	    __assign = Object.assign || function(t) {
-	        for (var s, i = 1, n = arguments.length; i < n; i++) {
-	            s = arguments[i];
-	            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-	                t[p] = s[p];
-	        }
-	        return t;
-	    };
-	    return __assign.apply(this, arguments);
-	};
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.Popover = exports.usePopover = exports.ArrowContainer = exports.useArrowContainer = void 0;
-	var jsx_runtime_1 = jsxRuntimeExports;
-	var react_1 = React__default;
-	var PopoverPortal_1 = PopoverPortal$1;
-	var util_1 = util;
-	var usePopover_1 = usePopover$1;
-	Object.defineProperty(exports, "usePopover", { enumerable: true, get: function () { return usePopover_1.usePopover; } });
-	var useMemoizedArray_1 = useMemoizedArray$1;
-	var useArrowContainer_1 = useArrowContainer$1;
-	Object.defineProperty(exports, "useArrowContainer", { enumerable: true, get: function () { return useArrowContainer_1.useArrowContainer; } });
-	var ArrowContainer_1 = ArrowContainer$1;
-	Object.defineProperty(exports, "ArrowContainer", { enumerable: true, get: function () { return ArrowContainer_1.ArrowContainer; } });
-	exports.Popover = react_1.forwardRef(function (_a, externalRef) {
-	    var isOpen = _a.isOpen, children = _a.children, content = _a.content, _b = _a.positions, externalPositions = _b === void 0 ? util_1.Constants.DEFAULT_POSITIONS : _b, _c = _a.align, align = _c === void 0 ? util_1.Constants.DEFAULT_ALIGN : _c, _d = _a.padding, padding = _d === void 0 ? 0 : _d, _e = _a.reposition, reposition = _e === void 0 ? true : _e, _f = _a.containerParent, containerParent = _f === void 0 ? window.document.body : _f, _g = _a.containerClassName, containerClassName = _g === void 0 ? 'react-tiny-popover-container' : _g, containerStyle = _a.containerStyle, contentLocation = _a.contentLocation, _h = _a.boundaryInset, boundaryInset = _h === void 0 ? 0 : _h, onClickOutside = _a.onClickOutside;
-	    var positions = useMemoizedArray_1.useMemoizedArray(externalPositions);
-	    // TODO: factor prevs out into a custom prevs hook
-	    var prevIsOpen = react_1.useRef(false);
-	    var prevPositions = react_1.useRef();
-	    var prevContentLocation = react_1.useRef();
-	    var prevReposition = react_1.useRef(reposition);
-	    var childRef = react_1.useRef();
-	    var _j = react_1.useState({
-	        align: align,
-	        nudgedLeft: 0,
-	        nudgedTop: 0,
-	        position: positions[0],
-	        padding: padding,
-	        childRect: util_1.Constants.EMPTY_CLIENT_RECT,
-	        popoverRect: util_1.Constants.EMPTY_CLIENT_RECT,
-	        parentRect: util_1.Constants.EMPTY_CLIENT_RECT,
-	        boundaryInset: boundaryInset,
-	    }), popoverState = _j[0], setPopoverState = _j[1];
-	    var onPositionPopover = react_1.useCallback(function (popoverState) { return setPopoverState(popoverState); }, []);
-	    var _k = usePopover_1.usePopover({
-	        childRef: childRef,
-	        containerClassName: containerClassName,
-	        containerParent: containerParent,
-	        contentLocation: contentLocation,
-	        positions: positions,
-	        align: align,
-	        padding: padding,
-	        boundaryInset: boundaryInset,
-	        reposition: reposition,
-	        onPositionPopover: onPositionPopover,
-	    }), positionPopover = _k[0], popoverRef = _k[1];
-	    react_1.useLayoutEffect(function () {
-	        var shouldUpdate = true;
-	        var updatePopover = function () {
-	            var _a, _b;
-	            if (isOpen && shouldUpdate) {
-	                var childRect = (_a = childRef === null || childRef === void 0 ? void 0 : childRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-	                var popoverRect = (_b = popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-	                if (childRect != null &&
-	                    popoverRect != null &&
-	                    (!util_1.rectsAreEqual(childRect, {
-	                        top: popoverState.childRect.top,
-	                        left: popoverState.childRect.left,
-	                        width: popoverState.childRect.width,
-	                        height: popoverState.childRect.height,
-	                        bottom: popoverState.childRect.top + popoverState.childRect.height,
-	                        right: popoverState.childRect.left + popoverState.childRect.width,
-	                    }) ||
-	                        popoverRect.width !== popoverState.popoverRect.width ||
-	                        popoverRect.height !== popoverState.popoverRect.height ||
-	                        popoverState.padding !== padding ||
-	                        popoverState.align !== align ||
-	                        positions !== prevPositions.current ||
-	                        contentLocation !== prevContentLocation.current ||
-	                        reposition !== prevReposition.current)) {
-	                    positionPopover();
-	                }
-	                // TODO: factor prev checks out into the custom prevs hook
-	                if (positions !== prevPositions.current) {
-	                    prevPositions.current = positions;
-	                }
-	                if (contentLocation !== prevContentLocation.current) {
-	                    prevContentLocation.current = contentLocation;
-	                }
-	                if (reposition !== prevReposition.current) {
-	                    prevReposition.current = reposition;
-	                }
-	                if (shouldUpdate) {
-	                    window.requestAnimationFrame(updatePopover);
-	                }
-	            }
-	            prevIsOpen.current = isOpen;
-	        };
-	        window.requestAnimationFrame(updatePopover);
-	        return function () {
-	            shouldUpdate = false;
-	        };
-	    }, [
-	        align,
-	        contentLocation,
-	        isOpen,
-	        padding,
-	        popoverRef,
-	        popoverState.align,
-	        popoverState.childRect.height,
-	        popoverState.childRect.left,
-	        popoverState.childRect.top,
-	        popoverState.childRect.width,
-	        popoverState.padding,
-	        popoverState.popoverRect.height,
-	        popoverState.popoverRect.width,
-	        positionPopover,
-	        positions,
-	        reposition,
-	    ]);
-	    react_1.useEffect(function () {
-	        var popoverElement = popoverRef.current;
-	        Object.assign(popoverElement.style, containerStyle);
-	        return function () {
-	            Object.keys(containerStyle !== null && containerStyle !== void 0 ? containerStyle : {}).forEach(function (key) {
-	                return delete popoverElement.style[key];
-	            });
-	        };
-	    }, [containerStyle, isOpen, popoverRef]);
-	    var handleOnClickOutside = react_1.useCallback(function (e) {
-	        var _a, _b;
-	        if (isOpen &&
-	            !((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) &&
-	            !((_b = childRef.current) === null || _b === void 0 ? void 0 : _b.contains(e.target))) {
-	            onClickOutside === null || onClickOutside === void 0 ? void 0 : onClickOutside(e);
-	        }
-	    }, [isOpen, onClickOutside, popoverRef]);
-	    var handleWindowResize = react_1.useCallback(function () {
-	        if (childRef.current) {
-	            window.requestAnimationFrame(function () { return positionPopover(); });
-	        }
-	    }, [positionPopover]);
-	    react_1.useEffect(function () {
-	        window.addEventListener('click', handleOnClickOutside);
-	        window.addEventListener('resize', handleWindowResize);
-	        return function () {
-	            window.removeEventListener('click', handleOnClickOutside);
-	            window.removeEventListener('resize', handleWindowResize);
-	        };
-	    }, [handleOnClickOutside, handleWindowResize]);
-	    var handleRef = react_1.useCallback(function (node) {
-	        childRef.current = node;
-	        if (externalRef != null) {
-	            if (typeof externalRef === 'object') {
-	                externalRef.current = node;
-	            }
-	            else if (typeof externalRef === 'function') {
-	                externalRef(node);
-	            }
-	        }
-	    }, [externalRef]);
-	    var renderChild = function () {
-	        return react_1.cloneElement(children, {
-	            ref: handleRef,
-	        });
-	    };
-	    var renderPopover = function () {
-	        if (!isOpen)
-	            return null;
-	        return (jsx_runtime_1.jsx(PopoverPortal_1.PopoverPortal, __assign({ element: popoverRef.current, container: containerParent }, { children: typeof content === 'function' ? content(popoverState) : content }), void 0));
-	    };
-	    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderChild(), renderPopover()] }, void 0));
-	});
-	
-} (Popover));
-
-var css_248z = "[data-gene-ui-version=\"2.12.1\"] .popover-positioner{--popover-border-radius:1rem;--popover-shadow:0 0.2rem 0.4rem 0 #0000000d,0 0 0 1px rgba(var(--background-sc-rgb),0.08);z-index:400}[data-gene-ui-version=\"2.12.1\"] .popover-positioner.cr-smooth-radius{--popover-border-radius:0.4rem}[data-gene-ui-version=\"2.12.1\"] .popover-positioner.mobile-view{--popover-border-radius:0.8rem 0.8rem 0 0;--popover-shadow:0 -1px 0.2rem 0 #0000000d;bottom:0;left:0!important;overflow:hidden;position:fixed!important;top:0!important;transform:translate(0)!important;width:100%}[data-gene-ui-version=\"2.12.1\"] .popover-positioner .popover-top-bottom-padding{padding:1rem 0;width:100%}[data-gene-ui-version=\"2.12.1\"] .popover-positioner .popover-top-bottom-padding>div[style*=width]{width:100%!important}[data-gene-ui-version=\"2.12.1\"] .popover{width:100%}[data-gene-ui-version=\"2.12.1\"] .popover-positioner.mobile-view .popover{height:100%;position:relative}[data-gene-ui-version=\"2.12.1\"] .popover-positioner-disable{margin-top:5px;position:inherit!important;transform:none!important}[data-gene-ui-version=\"2.12.1\"] .popover-track{width:100%}[data-gene-ui-version=\"2.12.1\"] .popover-content{background:var(--background);border-radius:var(--popover-border-radius);box-shadow:var(--popover-shadow);overflow:hidden;padding:0 0 env(safe-area-inset-bottom);transition:padding .4s;width:100%}[data-gene-ui-version=\"2.12.1\"] .popover-positioner.mobile-view .popover-content{-webkit-overflow-scrolling:auto;bottom:0;left:0;max-height:calc(100% - 10rem);overflow-x:hidden;overflow-y:auto;position:absolute;z-index:1}[data-gene-ui-version=\"2.12.1\"] .popover-positioner.mobile-view[style*=\"opacity: 0\"] .popover-content{transform:translateY(100%)}[data-gene-ui-version=\"2.12.1\"] .popover-positioner.mobile-view .popover-content{transform:translateY(0)}[data-gene-ui-version=\"2.12.1\"] .popover-mobile-backdrop{background:#0003;height:100%;left:0;opacity:1;position:absolute;top:0;width:100%;z-index:0}[data-gene-ui-version=\"2.12.1\"] .popover-footer,[data-gene-ui-version=\"2.12.1\"] .popover-header{background:var(--background);position:-webkit-sticky;position:sticky;z-index:1}[data-gene-ui-version=\"2.12.1\"] .popover-header{border-bottom:1px solid rgba(var(--background-sc-rgb),.1);top:0}[data-gene-ui-version=\"2.12.1\"] .popover-footer{align-items:stretch;border-top:1px solid rgba(var(--background-sc-rgb),.1);bottom:calc(env(safe-area-inset-bottom)*-1);display:flex;padding:0 0 env(safe-area-inset-bottom);transition:padding .4s}[data-gene-ui-version=\"2.12.1\"] .popover-body{position:relative;z-index:0}[data-gene-ui-version=\"2.12.1\"] .popover-search{padding:1.4rem 1.5rem}[data-gene-ui-version=\"2.12.1\"] .empty-data-holder{align-items:center;display:flex;height:19rem;justify-content:center;width:100%}[data-gene-ui-version=\"2.12.1\"] .popover-disabled{opacity:.5;pointer-events:none;transition:opacity .5s}";
-styleInject(css_248z);
-
-const PopoverV2 = /*#__PURE__*/forwardRef((props, ref) => {
-  var _popoverRef$current4;
-  const {
-    nativeOutsideClick,
-    extendTargetWidth,
-    disableReposition,
-    disableTransform,
-    containerParent,
-    scrollbarNeeded,
-    onClickOutside,
-    trackClassName,
-    toggleHandler,
-    cornerRadius,
-    getScrollRef,
-    onSwipedDown,
-    contentRef,
-    screenType,
-    minHeight,
-    maxHeight,
-    className,
-    swipeable,
-    children,
-    position,
-    disabled,
-    Content,
-    padding,
-    behave,
-    Header,
-    Footer,
-    isOpen,
-    align,
-    scrollbarProps,
-    ...restProps
-  } = props;
-  const {
-    geneUIProviderRef
-  } = useContext(GeneUIDesignSystemContext);
-  const popoverRef = useRef(null);
-  const popoverBodyRef = useRef(null);
-  const popoverTrackRef = useRef(null);
-  const [updateKey, setUpdateKey] = useState(0);
-  const [targetWidth, setTargetWidth] = useState(null);
-  const [popoverOpened, setPopoverOpened] = useState(false);
-  const [swipingPosition, setSwipingPosition] = useState(0);
-  const {
-    isMobile
-  } = useDeviceType(screenType);
-  const isControlled = ('isOpen' in props);
-  const popoverState = isControlled ? isOpen : popoverOpened;
-  const positions = useMemo(() => Array.isArray(position) ? position : [position], [position]);
-  useEffect(() => {
-    document.documentElement.classList[popoverState ? 'add' : 'remove'](popoverV2Config.onOpenClassName);
-  }, [popoverState]);
-  useEffect(() => {
-    setUpdateKey(Date.now());
-  }, [isMobile, cornerRadius]);
-  useEffect(() => {
-    var _popoverRef$current;
-    if (popoverRef.current && (_popoverRef$current = popoverRef.current) !== null && _popoverRef$current !== void 0 && _popoverRef$current.offsetWidth) {
-      var _popoverRef$current2;
-      setTargetWidth((_popoverRef$current2 = popoverRef.current) === null || _popoverRef$current2 === void 0 ? void 0 : _popoverRef$current2.offsetWidth);
-      const debouncedHandleResize = debounce(() => {
-        var _popoverRef$current3;
-        setTargetWidth((_popoverRef$current3 = popoverRef.current) === null || _popoverRef$current3 === void 0 ? void 0 : _popoverRef$current3.offsetWidth);
-      }, 20);
-      window.addEventListener('resize', debouncedHandleResize);
-      return () => window.removeEventListener('resize', debouncedHandleResize);
-    }
-  }, [(_popoverRef$current4 = popoverRef.current) === null || _popoverRef$current4 === void 0 ? void 0 : _popoverRef$current4.offsetWidth]);
-
-  /* *** START SWIPE FUNCTIONALITY *** */
-  const checkBodyContains = event => popoverBodyRef.current.contains(event.target);
-  const handleSwiped = event => setSwipingPosition(0);
-  const handleSwipedDown = touchEvent => {
-    !checkBodyContains(touchEvent.event) && onSwipedDown(touchEvent);
-  };
-  const handleSwiping = useCallback(_ref => {
-    let {
-      deltaY,
-      event
-    } = _ref;
-    if (checkBodyContains(event)) {
-      stopEvent(event);
-    } else if (deltaY >= 0) {
-      setSwipingPosition(deltaY * -1);
-    }
-  }, [popoverBodyRef, setSwipingPosition]);
-  const swipeHandlers = useSwipeable(useMemo(() => swipeable ? {
-    onSwipedDown: handleSwipedDown,
-    onSwiping: handleSwiping,
-    onSwiped: handleSwiped
-  } : {}, [swipeable, handleSwipedDown, handleSwiping, handleSwiped]));
-  /* *** END SWIPE FUNCTIONALITY *** */
-
-  /* *** START OPEN/CLOSE FUNCTIONALITY *** */
-  const togglePopupOpened = useCallback(event => {
-    stopEvent(event);
-    if (isControlled) {
-      toggleHandler(event, isOpen);
-    } else {
-      setPopoverOpened(status => {
-        toggleHandler(event, !status);
-        return !status;
-      });
-    }
-  }, [isControlled, toggleHandler, isOpen]);
-  const handleTrackClick = useCallback(event => {
-    if (!disabled) {
-      if (behave === 'toggle') {
-        togglePopupOpened(event);
-      } else if (!isControlled && behave === 'open') {
-        setPopoverOpened(true);
-      }
-    }
-  }, [disabled, isControlled, behave, togglePopupOpened]);
-  const handleOutsideClick = useClickOutside(event => {
-    if (popoverRef && !popoverRef.current.contains(event.target)) {
-      onClickOutside(event);
-      if (!isControlled) {
-        setPopoverOpened(false);
-      }
-    }
-  });
-  /* *** END OPEN/CLOSE FUNCTIONALITY *** */
-
-  /* *** START GENERATE REFS *** */
-  const generatePopoverRef = useCallback(element => {
-    popoverRef && (popoverRef.current = element);
-    ref && (ref.current = element);
-  }, [ref]);
-  const generateContentRef = useCallback(element => {
-    isMobile && getScrollRef(element);
-    handleOutsideClick(element);
-    if (contentRef) {
-      typeof contentRef === 'function' ? contentRef(element) : contentRef.current = element;
-    }
-  }, [isMobile, contentRef, getScrollRef]);
-  /* *** END GENERATE REFS *** */
-  const portalContent = /*#__PURE__*/React__default.createElement("div", swipeHandlers, /*#__PURE__*/React__default.createElement("ul", {
-    onClick: stopEvent,
-    ref: generateContentRef,
-    className: "popover-content",
-    style: {
-      bottom: swipingPosition,
-      width: extendTargetWidth && !isMobile && targetWidth || null
-    }
-  }, Header && /*#__PURE__*/React__default.createElement("li", {
-    className: "popover-header"
-  }, Header), /*#__PURE__*/React__default.createElement("li", {
-    ref: popoverBodyRef,
-    className: "popover-body"
-  }, scrollbarNeeded && !isMobile ? /*#__PURE__*/React__default.createElement(CustomScrollbar, _extends({
-    ref: scrollbar => {
-      scrollbar && getScrollRef(scrollbar.view);
-    },
-    autoHeight: true,
-    autoHeightMax: maxHeight,
-    autoHeightMin: minHeight
-  }, scrollbarProps), Content) : Content), Footer && /*#__PURE__*/React__default.createElement("li", {
-    className: "popover-footer"
-  }, Footer)), isMobile && /*#__PURE__*/React__default.createElement("div", {
-    className: "popover-mobile-backdrop",
-    onClick: togglePopupOpened
-  }));
-  const childElement = useMemo(() => /*#__PURE__*/React__default.createElement("div", {
-    onClick: handleTrackClick,
-    className: classnames('popover-track cursor-pointer', trackClassName, {
-      'popover-opened': popoverState,
-      'popover-disabled': disabled
-    })
-  }, children), [popoverTrackRef, children, trackClassName, popoverState, disabled, handleTrackClick]);
-  if (!Content) {
-    return childElement;
-  }
-  const containerParentMemo = useMemo(() => ({
-    containerParent: containerParent || geneUIProviderRef.current
-  }), [containerParent]);
-  return /*#__PURE__*/React__default.createElement(Popover.Popover, _extends({
-    key: updateKey,
-    ref: generatePopoverRef,
-    align: align,
-    positions: positions,
-    padding: padding,
-    onClickOutside: nativeOutsideClick,
-    isOpen: popoverState,
-    content: portalContent,
-    reposition: !isMobile && disableReposition,
-    containerStyle: {
-      overflow: null
-    },
-    containerClassName: classnames('popover-positioner', "cr-".concat(cornerRadius), className, {
-      'mobile-view': isMobile,
-      'popover-positioner-disable': disableTransform && containerParent && !isMobile
-    }),
-    children: childElement
-  }, containerParentMemo, restProps));
-});
-PopoverV2.propTypes = {
-  /**
-   * The component that need to be displayed in the Popover. Any valid React node
-   */
-  Content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  /**
-   * The component that need to be displayed as Popover header. Any valid React node
-   */
-  Header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  /**
-   * The component that need to be displayed as Popover footer. Any valid React node
-   */
-  Footer: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  /**
-   * The component which click needs to trigger the Popover to open. Need to passed as child to Popover. Any valid React node
-   */
-  children: PropTypes.node,
-  /**
-   * The Popover will get the width of its child. The property will not work when "width" prop is specified
-   */
-  extendTargetWidth: PropTypes.bool,
-  /**
-   * The Popover "Content" minimum scroll height
-   */
-  minHeight: PropTypes.number,
-  /**
-   * The Popover "Content" maximum scroll height. Will not work when the "screenType" is "mobile"
-   */
-  maxHeight: PropTypes.number,
-  /**
-   * Use this prop to control the Popover. Note the component will start not to open and close automatically
-   */
-  isOpen: PropTypes.bool,
-  /**
-   * Popover position to be displayed
-   */
-  position: PropTypes.oneOfType([PropTypes.oneOf(popoverV2Config.position), PropTypes.arrayOf(PropTypes.oneOf(popoverV2Config.position))]),
-  /**
-   * Will called each time the popover need to be toggled(child click, close button click, backdrop click).
-   * (event: Event, isOpen: bool) => void
-   */
-  toggleHandler: PropTypes.func,
-  /**
-   * Possible values are start, center, and end.
-   * If start is specified, the popover content's top or left location is aligned with its target's.
-   * With end specified, the content's bottom or right location is aligned with its target's.
-   * If center is specified, the popover content and target's centers are aligned.
-   */
-  align: PropTypes.oneOf(popoverV2Config.align),
-  /**
-   * If you'd like to apply styles to the single container div that your popover content is rendered within via stylesheets,
-   * you can specify a custom className for the container here.
-   */
-  className: PropTypes.string,
-  /**
-   * This number determines the gap, in pixels, between your target content and your popover content
-   */
-  padding: PropTypes.number,
-  /**
-   * If this property is enabled, rather than the popover content repositioning on a boundary collision,
-   * the popover content container will move beyond the window's bounds.
-   * You are, however, supplied with nudgedLeft and nudgedTop values, so you may choose to handle content overflow as you wish.
-   */
-  disableReposition: PropTypes.bool,
-  /**
-   * Popover corner radius
-   */
-  cornerRadius: PropTypes.oneOf(popoverV2Config.cornerRadius),
-  /**
-   * The switch between mobile and desktop version of Popover will be applied automatically, when the prop is not specified.
-   * When the prop is present it must be changed from outside.
-   */
-  screenType: PropTypes.oneOf(screenTypes),
-  /**
-   * Specify does Popover needs to be toggled on child click
-   */
-  behave: PropTypes.oneOf(popoverV2Config.behave),
-  /**
-   * Given content prop can have its own scroll, and with this props we can use/not use default scroll that has popover
-   */
-  scrollbarNeeded: PropTypes.bool,
-  /**
-   * Popover content ref
-   */
-  contentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]),
-  disabled: PropTypes.bool,
-  getScrollRef: PropTypes.func,
-  /**
-   * This number specifies the inset around your containerParent's border
-   * that boundary violations are determined at. Defaults to 0. Can be negative.
-   */
-  boundaryInset: PropTypes.number,
-  /**
-   * If you want to apply styles to the popup tracker div where your children are using
-   * stylesheets, you can provide a custom class name for the container here.
-   */
-  trackClassName: PropTypes.string,
-  /*
-   * After DOWN swipe  (SwipeEventData) => void
-   */
-  onSwipedDown: PropTypes.func,
-  swipeable: PropTypes.bool,
-  /*
-   * If react-tiny-popover detects a click event outside of the target and outside
-   * of the popover, you may handle this event here, in the form of (e: MouseEvent) => void.
-   */
-  onClickOutside: PropTypes.func,
-  nativeOutsideClick: PropTypes.func,
-  /*
-   * props for scrollbar
-   */
-  scrollbarProps: PropTypes.shape({
-    ...CustomScrollbar.propTypes
-  }),
-  /*
-   * When disableTransform is true and containerParent has ref.current, the popover generates in a dropdown wrapper instead of closing the body tag, and the position will not calculate.
-   */
-  disableTransform: PropTypes.bool,
-  /*
-   * Provide an HTML element ref here to have your popover content appended to that element rather than document.body. This is useful if you'd like your popover to sit at a particular place within the DOM.
-   */
-  containerParent: PropTypes.object
-};
-PopoverV2.defaultProps = {
-  cornerRadius: popoverV2Config.cornerRadius[0],
-  position: popoverV2Config.position,
-  align: popoverV2Config.align[0],
-  toggleHandler: noop,
-  behave: popoverV2Config.behave[0],
-  extendTargetWidth: true,
-  disableReposition: true,
-  disableTransform: false,
-  minHeight: 0,
-  maxHeight: 510,
-  padding: 10,
-  getScrollRef: noop,
-  scrollbarNeeded: true,
-  swipeable: false,
-  onSwipedDown: noop,
-  onClickOutside: noop,
-  nativeOutsideClick: noop
-};
-
-export { PopoverV2 as default };