pge-front-common 14.0.44 → 14.0.46

package/lib/index.esm.js

@@ -774,7 +774,7 @@ var css_248z$s = ".header-module__separator_background___lYfCd {\r\n  background
 var styles$p = {"separator_background":"header-module__separator_background___lYfCd","container":"header-module__container___eaqPg","wrapperMenu":"header-module__wrapperMenu___m5rLa","iconLogo":"header-module__iconLogo___pcEoN","verticalDivider":"header-module__verticalDivider___4JMWc","containerHeaderIndex":"header-module__containerHeaderIndex___ueqa-","set_shadow":"header-module__set_shadow___UUN7Y","limitedWidth":"header-module__limitedWidth___fsCel","iconLogoCASC":"header-module__iconLogoCASC___3YUG6","iconLogoPGE":"header-module__iconLogoPGE___HK3gX","responsiveCASC":"header-module__responsiveCASC___KL8jM","IconMenu":"header-module__IconMenu___7JWj-"};
 styleInject(css_248z$s);
 
-var css_248z$r = ".dropdown-module__dropdown___EIaq- {\r\n  position: absolute;\r\n  border: 1px solid rgb(197, 197, 197);\r\n  background: var(--header-bg-dropdown);\r\n  padding: 8px 0;\r\n  color: #0062cc;\r\n  border-radius: 4px;\r\n  z-index: 400;\r\n  min-width: 280px;\r\n  box-shadow: rgba(197, 164, 164, 0.35) 0px 5px 15px;\r\n  cursor: pointer;\r\n}\r\n\r\n.dropdown-module__primaryDropdown___I7kas {\r\n  margin: 0;\r\n  padding: 0.375rem 0.88rem 0.88rem 0.88rem;\r\n  min-width: 280px;\r\n  color: var(--header-font-dropdown);\r\n  font-size: var(--font-size-16, 16px);\r\n  font-weight: 600;\r\n  text-align: left;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  cursor: pointer;\r\n  min-height: 50px;\r\n  border: none;\r\n\r\n  -webkit-appearance: button;\r\n  background-color: transparent;\r\n  background-image: none;\r\n}\r\n\r\n.dropdown-module__primaryDropdown___I7kas:hover {\r\n  background-color: var(--header-hover-dropdown);\r\n  width: 100%;\r\n}\r\n\r\n.dropdown-module__primaryDropdown__disabled___McFgs {\r\n  color: #c3c3c3;\r\n}\r\n\r\n.dropdown-module__primaryDropdown__home___4Odwr {\r\n  font-weight: 700;\r\n}\r\n\r\n.dropdown-module__primaryDropdown__submenu___eXCiN {\r\n  font-size: var(--font-size-16, 16px);\r\n  line-height: 24px;\r\n  text-align: left;\r\n  padding-left: 30px;\r\n  font-weight: 100;\r\n}\r\n\r\n.dropdown-module__contentIcon___aqI89 {\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.dropdown-module__contentIcon___aqI89.dropdown-module__active___RRrmk {\r\n  transform: rotate(0deg);\r\n}\r\n\r\n.dropdown-module__contentIcon___aqI89.dropdown-module__inactive___AQdLm {\r\n  transform: rotate(180deg);\r\n}\r\n";
+var css_248z$r = ".dropdown-module__dropdown___EIaq- {\r\n  position: absolute;\r\n  border: 1px solid rgb(197, 197, 197);\r\n  background: var(--header-bg-dropdown);\r\n  padding: 8px 0;\r\n  color: #0062cc;\r\n  border-radius: 4px;\r\n  z-index: 400;\r\n  min-width: 280px;\r\n  box-shadow: rgba(197, 164, 164, 0.35) 0px 5px 15px;\r\n  cursor: pointer;\r\n  margin-right: 5px;\r\n}\r\n\r\n.dropdown-module__primaryDropdown___I7kas {\r\n  margin: 0;\r\n  padding: 0.375rem 0.88rem 0.88rem 0.88rem;\r\n  min-width: 280px;\r\n  color: var(--header-font-dropdown);\r\n  font-size: var(--font-size-16, 16px);\r\n  font-weight: 600;\r\n  text-align: left;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  cursor: pointer;\r\n  min-height: 50px;\r\n  border: none;\r\n\r\n  -webkit-appearance: button;\r\n  background-color: transparent;\r\n  background-image: none;\r\n}\r\n\r\n.dropdown-module__primaryDropdown___I7kas:hover {\r\n  background-color: var(--header-hover-dropdown);\r\n  width: 100%;\r\n}\r\n\r\n.dropdown-module__primaryDropdown__disabled___McFgs {\r\n  color: #c3c3c3;\r\n}\r\n\r\n.dropdown-module__primaryDropdown__home___4Odwr {\r\n  font-weight: 700;\r\n}\r\n\r\n.dropdown-module__primaryDropdown__submenu___eXCiN {\r\n  font-size: var(--font-size-16, 16px);\r\n  line-height: 24px;\r\n  text-align: left;\r\n  padding-left: 30px;\r\n  font-weight: 100;\r\n}\r\n\r\n.dropdown-module__contentIcon___aqI89 {\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.dropdown-module__contentIcon___aqI89.dropdown-module__active___RRrmk {\r\n  transform: rotate(0deg);\r\n}\r\n\r\n.dropdown-module__contentIcon___aqI89.dropdown-module__inactive___AQdLm {\r\n  transform: rotate(180deg);\r\n}\r\n";
 var styles$o = {"dropdown":"dropdown-module__dropdown___EIaq-","primaryDropdown":"dropdown-module__primaryDropdown___I7kas","primaryDropdown__disabled":"dropdown-module__primaryDropdown__disabled___McFgs","primaryDropdown__home":"dropdown-module__primaryDropdown__home___4Odwr","primaryDropdown__submenu":"dropdown-module__primaryDropdown__submenu___eXCiN","contentIcon":"dropdown-module__contentIcon___aqI89","active":"dropdown-module__active___RRrmk","inactive":"dropdown-module__inactive___AQdLm"};
 styleInject(css_248z$r);
 
@@ -23723,73 +23723,108 @@ var TooltipWithPortal = function (_a) {
     var visible = internalVisible || forceVisible;
     var PADDING = 8;
     useEffect(function () {
-        var handleResize = function () { return setIsMobile(window.innerWidth <= 480); };
+        var handleResize = function () {
+            setIsMobile(window.innerWidth <= 480);
+        };
         handleResize();
         window.addEventListener("resize", handleResize);
-        return function () { return window.removeEventListener("resize", handleResize); };
+        return function () {
+            window.removeEventListener("resize", handleResize);
+        };
     }, []);
     useEffect(function () {
         if (!visible || !targetRef.current || !tooltipRef.current)
             return;
-        var rect = targetRef.current.getBoundingClientRect();
-        var tipRect = tooltipRef.current.getBoundingClientRect();
-        var scrollY = window.scrollY || window.pageYOffset;
-        var scrollX = window.scrollX || window.pageXOffset;
-        var vw = window.innerWidth;
-        var vh = window.innerHeight;
-        var top;
-        var left;
-        if (isMobile) {
-            var tooltipHeight = tipRect.height;
-            var availableBelow = vh - rect.bottom;
-            var availableAbove = rect.top;
-            if (availableBelow < tooltipHeight + PADDING && availableAbove > tooltipHeight + PADDING) {
-                top = rect.top + scrollY - tooltipHeight - PADDING;
+        var updatePosition = function () {
+            var rect = targetRef.current.getBoundingClientRect();
+            var tipRect = tooltipRef.current.getBoundingClientRect();
+            var scrollY = window.scrollY || window.pageYOffset;
+            var scrollX = window.scrollX || window.pageXOffset;
+            var vw = window.innerWidth;
+            var vh = window.innerHeight;
+            var top;
+            var left;
+            if (isMobile) {
+                var tooltipHeight = tipRect.height;
+                var availableBelow = vh - rect.bottom;
+                var availableAbove = rect.top;
+                if (availableBelow < tooltipHeight + PADDING && availableAbove > tooltipHeight + PADDING) {
+                    top = rect.top + scrollY - tooltipHeight - PADDING;
+                }
+                else {
+                    top = rect.bottom + scrollY + PADDING;
+                }
+                left = rect.left + scrollX + rect.width / 2 - tipRect.width / 2;
             }
             else {
-                top = rect.bottom + scrollY + PADDING;
-            }
-            left = rect.left + scrollX + rect.width / 2 - tipRect.width / 2;
-        }
-        else {
-            var tooltipHeight = tipRect.height;
-            var availableBelow = vh - rect.bottom;
-            if (availableBelow < tooltipHeight + PADDING && rect.top > tooltipHeight + PADDING) {
-                top = rect.top + scrollY - tooltipHeight - PADDING;
+                var tooltipHeight = tipRect.height;
+                var availableBelow = vh - rect.bottom;
+                if (availableBelow < tooltipHeight + PADDING && rect.top > tooltipHeight + PADDING) {
+                    top = rect.top + scrollY - tooltipHeight - PADDING;
+                }
+                else {
+                    top = rect.bottom + scrollY + PADDING;
+                }
+                left = rect.left + scrollX;
             }
-            else {
-                top = rect.bottom + scrollY + PADDING;
+            left = Math.max(PADDING + scrollX, left);
+            if (left + tipRect.width + PADDING > scrollX + vw) {
+                left = scrollX + vw - tipRect.width - PADDING;
             }
-            left = rect.left + scrollX;
-        }
-        left = Math.max(PADDING + scrollX, left);
-        if (left + tipRect.width + PADDING > scrollX + vw) {
-            left = scrollX + vw - tipRect.width - PADDING;
-        }
-        var minTop = PADDING + scrollY;
-        var maxTop = scrollY + vh - tipRect.height - PADDING;
-        top = Math.min(Math.max(top, minTop), maxTop);
-        setTooltipStyle({
-            position: "absolute",
-            top: top,
-            left: left,
-            zIndex: 2000,
-            maxWidth: isMobile ? "92vw" : 480,
-            width: isMobile ? "auto" : undefined,
-            padding: isMobile ? "14px 12px" : undefined,
-            overflowY: isMobile ? "auto" : undefined,
-            borderRadius: isMobile ? 10 : undefined,
-            maxHeight: isMobile ? vh * 0.6 : undefined,
-            transform: isMobile ? "none" : undefined,
-        });
+            var minTop = PADDING + scrollY;
+            var maxTop = scrollY + vh - tipRect.height - PADDING;
+            top = Math.min(Math.max(top, minTop), maxTop);
+            setTooltipStyle({
+                position: "absolute",
+                top: top,
+                left: left,
+                zIndex: 2000,
+                maxWidth: isMobile ? "92vw" : 480,
+                width: isMobile ? "auto" : undefined,
+                padding: isMobile ? "14px 12px" : undefined,
+                overflowY: isMobile ? "auto" : undefined,
+                borderRadius: isMobile ? 10 : undefined,
+                maxHeight: isMobile ? vh * 0.6 : undefined,
+                transform: isMobile ? "none" : undefined,
+            });
+        };
+        updatePosition();
+        window.addEventListener("scroll", updatePosition);
+        document.addEventListener("scroll", updatePosition, true);
+        document.addEventListener("touchmove", updatePosition, { passive: true });
+        return function () {
+            window.removeEventListener("scroll", updatePosition);
+            document.removeEventListener("scroll", updatePosition, true);
+            document.removeEventListener("touchmove", updatePosition);
+        };
     }, [visible, isMobile, text]);
+    useEffect(function () {
+        if (!visible)
+            return;
+        var handleClickOutside = function (e) {
+            var targetNode = e.target;
+            if (targetRef.current &&
+                tooltipRef.current &&
+                !targetRef.current.contains(targetNode) &&
+                !tooltipRef.current.contains(targetNode)) {
+                setInternalVisible(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        document.addEventListener("touchstart", handleClickOutside);
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("touchstart", handleClickOutside);
+        };
+    }, [visible]);
     var onMouseEnter = function () { return !isMobile && setInternalVisible(true); };
     var onMouseLeave = function () { return !isMobile && setInternalVisible(false); };
     var onTouch = function () { return isMobile && setInternalVisible(function (v) { return !v; }); };
     var onClick = function () { return !isMobile && setInternalVisible(function (v) { return !v; }); };
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { ref: targetRef, className: styles$2.container, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onTouchStart: onTouch, onClick: onClick, role: "button", "aria-haspopup": "true", "aria-expanded": visible }, children),
-        visible && typeof window !== "undefined" &&
+        visible &&
+            typeof window !== "undefined" &&
             ReactDOM__default.createPortal(React__default.createElement("div", { ref: tooltipRef, className: styles$2.tooltip, style: tooltipStyle, "aria-hidden": !visible },
                 React__default.createElement("span", { className: styles$2.textContent }, text)), document.body)));
 };