@geotab/zenith 3.6.0-ssr.beta.0 → 3.6.0

package/esm/modal/modal.js

@@ -19,8 +19,9 @@ import { isFocusable } from "../dialog/dialogHelpers";
 import { themeContext } from "../utils/theme/themeContext";
 import { getPredefinedFocusableItem } from "./modalHelpers";
 import { TextIconButton } from "../textIconButton/textIconButton";
-import { usePortal } from "../commonHelpers/hooks/usePortal";
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
+import { createPortal } from "react-dom";
 injectString("cs", "Close", "Zav\u0159\xEDt");
 injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
@@ -61,26 +62,34 @@ export const Modal = ({
 }) => {
   var _a, _b, _c;
   const lastActiveOutsideElement = useRef((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
-  // eslint-disable-next-line
-  const modalRoot = ((_b = zen === null || zen === void 0 ? void 0 : zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen === null || zen === void 0 ? void 0 : zen.document) === null || _c === void 0 ? void 0 : _c.body);
   const [top, setTop] = useState(`${zen.pageYOffset || 0}px`);
   const {
     dark
   } = useContext(themeContext);
+  const isClientReady = useClientReady();
   const onOutSideClick = useCallback(() => {
+    if (!isClientReady) {
+      return;
+    }
     if (!isOpen || !closeOnClickOutside || !onClose) {
       return;
     }
     onClose();
-  }, [isOpen, closeOnClickOutside, onClose]);
+  }, [isClientReady, isOpen, closeOnClickOutside, onClose]);
   useEffect(() => {
+    if (!isClientReady) {
+      return undefined;
+    }
     const copyActive = lastActiveOutsideElement.current;
     return () => {
       isFocusable(copyActive) && copyActive.focus();
     };
-  }, []);
+  }, [isClientReady]);
   useEffect(() => {
     var _a, _b;
+    if (!isClientReady) {
+      return undefined;
+    }
     (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body.classList.remove("zen-modal-content--hidden-overflow");
     if (isOpen) {
       (_b = zen.document) === null || _b === void 0 ? void 0 : _b.body.classList.add("zen-modal-content--hidden-overflow");
@@ -89,9 +98,12 @@ export const Modal = ({
       var _a;
       (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body.classList.remove("zen-modal-content--hidden-overflow");
     };
-  }, [isOpen]);
+  }, [isClientReady, isOpen]);
   useEffect(() => {
     var _a, _b;
+    if (!isClientReady) {
+      return undefined;
+    }
     const changeTopSpace = () => {
       setTop(`${zen.pageYOffset || 0}px`);
     };
@@ -102,7 +114,7 @@ export const Modal = ({
       (_a = zen.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(zen, "resize", changeTopSpace);
       (_b = zen.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(zen, "scroll", changeTopSpace);
     };
-  }, []);
+  }, [isClientReady]);
   const labeledId = useId();
   const darkClass = dark ? "zen-dark" : "";
   const modalContent = useMemo(() => {
@@ -137,11 +149,11 @@ export const Modal = ({
       onClick: onOutSideClick
     })]
   }), [darkClass, modalContainerClassName, labeledId, top, onClose, maxWidth, title, className, type, focus, modalContent, onOutSideClick]);
-  const modalPortal = usePortal(dialogHTML(labeledId), isOpen ? modalRoot : undefined);
-  if (!isOpen) {
+  if (!isOpen || !isClientReady) {
     return null;
   }
-  return modalPortal;
+  const modalRoot = ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen.document) === null || _c === void 0 ? void 0 : _c.body);
+  return createPortal(dialogHTML(labeledId), modalRoot);
 };
 const dummyOnClose = () => {};
 export const DialogContentNew = ({
@@ -163,10 +175,10 @@ export const DialogContentNew = ({
   const lastActiveOutsideElement = useRef((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
   const iconDriveClassName = useDriveClassName("icon");
   const iconsByType = useMemo(() => ({
-    "error": IconException,
-    "success": IconCheckRadio,
-    "warning": IconWarning,
-    "info": IconInfoCircle
+    error: IconException,
+    success: IconCheckRadio,
+    warning: IconWarning,
+    info: IconInfoCircle
   }), []);
   const subscriptionCondition = useCallback(trigger => trigger.current !== null, []);
   useTrapFocus(contentRef, undefined, contentRef, subscriptionCondition);

package/esm/sidePanel/sidePanel.js

@@ -15,6 +15,7 @@ import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { isAlertTarget } from "../alert/utils/isAlertTarget";
 import { isToastTarget } from "../toast/utils/isToastTarget";
 import { usePortal } from "../commonHelpers/hooks/usePortal";
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
 /* eslint-enable @typescript-eslint/naming-convention */
 export const isChildPopup = (target, stopElement) => {
@@ -60,16 +61,16 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
     const autoId = useId();
     const popupId = id || autoId;
     const prevReadyForFocus = useRef(false);
-    // ...existing code...
+    const isClientReady = useClientReady();
     useEffect(() => {
-        if (triggerRef && triggerRef.current) {
+        if (triggerRef && triggerRef.current && isClientReady) {
             const triggerRole = triggerRef.current.dataset.role;
             triggerRef.current.setAttribute("aria-haspopup", triggerRole ? triggerRole : "true");
             triggerRef.current.setAttribute("aria-expanded", renderComponent ? "true" : "false");
             triggerRef.current.setAttribute("aria-controls", popupId);
             triggerRef.current.setAttribute("data-popup-id", popupId);
         }
-    }, [triggerRef, renderComponent, popupId]);
+    }, [triggerRef, renderComponent, popupId, isClientReady]);
     function handleEscape() {
         onHidePanel(SidePanelCloseReason.Escape);
         if (!triggerRef || !triggerRef.current) {
@@ -82,10 +83,13 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
         const focusable = Array.from(triggerRef.current.querySelectorAll(FOCUSABLE_SELECTOR));
         (focusable[0] || triggerRef.current).focus();
     }
-    useTrapFocus(sidePanelRef, useTrapFocusWithTrigger ? triggerRef : undefined, showContent);
-    useEscape(sidePanelRef, handleEscape, renderComponent);
+    useTrapFocus(sidePanelRef, useTrapFocusWithTrigger ? triggerRef : undefined, showContent && isClientReady);
+    useEscape(sidePanelRef, handleEscape, renderComponent && isClientReady);
     useEffect(() => {
         var _a, _b, _c;
+        if (!isClientReady) {
+            return undefined;
+        }
         // eslint-disable-next-line complexity
         const closeOnClickOutside = (e) => {
             var _a, _b, _c, _d, _e, _f;
@@ -143,7 +147,7 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
             prevReadyForFocus.current = false;
         }
         return () => { var _a; return (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body.removeEventListener("click", closeOnClickOutside, true); };
-    }, [renderComponent, readyForFocus, onHidePanel, triggerRef, useTrapFocusWithTrigger, preventFirstFocus]);
+    }, [renderComponent, readyForFocus, onHidePanel, triggerRef, useTrapFocusWithTrigger, preventFirstFocus, isClientReady]);
     useEffect(() => {
         setIsOpen(isOpen);
     }, [isOpen, setIsOpen]);
@@ -169,6 +173,9 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
     if (!renderComponent && !isOpen) {
         return null;
     }
+    if (!isClientReady) {
+        return undefined;
+    }
     return portal;
 };
 SidePanel.Cell = SidePanelCell;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.6.0-ssr.beta.0",
+    "version": "3.6.0",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",
@@ -98,6 +98,9 @@
         "react": "^19.2.0",
         "react-dom": "^19.2.0"
     },
+    "overrides": {
+        "serialize-javascript": "^7.0.3"
+    },
     "files": [
         "./dist/",
         "./esm"