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

package/esm/layout/layout.js

@@ -20,7 +20,7 @@ import { SummaryTileDisplayName } from "../summaryTile/summaryTile";
 import { FullScreenButton } from "../dataGrid/entitiesListActions/actions/fullscreenButton";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { PageHeaderDisplayName } from "../pageHeader/pageHeader";
-// ...existing code...
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
 export const getContentPaddings = (isMobile, startWithToolbar) => {
     const paddingsCount = startWithToolbar ? 1 : 2;
@@ -36,7 +36,7 @@ const LayoutInner = ({ id, className, pageScrolling = true, children }) => {
     const [minHeight, setMinHeight] = useState(zen.innerHeight || 0);
     const [startWithToolbar, setStartWithToolbar] = useState(false);
     const isFullScreen = useCallback(() => fullScreenElement !== undefined, [fullScreenElement]);
-    // ...existing code...
+    const isClientReady = useClientReady();
     const [header, banners, summaryTileBar, content] = useMemo(() => {
         const h = [];
         const b = [];
@@ -149,16 +149,22 @@ const LayoutInner = ({ id, className, pageScrolling = true, children }) => {
     useResize(resizeCallBack, true);
     const isFullScreenCurrent = isFullScreen();
     useEffect(() => {
+        if (!isClientReady) {
+            return;
+        }
         calculateLayoutParams(layoutRef.current, middleRef.current);
-    }, [calculateLayoutParams, layoutRef, middleRef]);
+    }, [calculateLayoutParams, isClientReady, layoutRef, middleRef]);
     useEffect(() => {
         var _a;
+        if (!isClientReady) {
+            return undefined;
+        }
         const timeoutId = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
             const isStartWithToolbar = checkIsStartWithToolbar(isFullScreenCurrent);
             setStartWithToolbar(isStartWithToolbar);
         }, 0);
         return () => { var _a; return (_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timeoutId); };
-    }, [isFullScreenCurrent, checkIsStartWithToolbar]);
+    }, [isFullScreenCurrent, checkIsStartWithToolbar, isClientReady]);
     const memoizedHeader = useMemo(() => header, [header]);
     const memoizedBanners = useMemo(() => banners, [banners]);
     const memoizedContent = useMemo(() => content, [content]);
@@ -182,6 +188,9 @@ const LayoutInner = ({ id, className, pageScrolling = true, children }) => {
     }, [isFullScreenCurrent, minHeight, pageScrolling]);
     useEffect(() => {
         var _a, _b;
+        if (!isClientReady) {
+            return;
+        }
         if (isFullScreenCurrent) {
             const fullscreenEl = (_a = layoutRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".zen-layout__full-screen-element--visible");
             if (fullscreenEl) {
@@ -200,7 +209,10 @@ const LayoutInner = ({ id, className, pageScrolling = true, children }) => {
                 });
             }
         }
-    }, [isFullScreenCurrent, layoutRef]);
+    }, [isClientReady, isFullScreenCurrent, layoutRef]);
+    if (!isClientReady) {
+        return null;
+    }
     return (_jsx("section", Object.assign({ id: id || layoutId, ref: layoutRef, className: classNames(["zen-layout", !pageScrolling ? "zen-layout--no-scroll" : "", className || ""]) }, heightStyle, { children: _jsx(LayoutFullScreenProvider, { isFullScreen: isFullScreen, setFullScreenElement: handleSetFullScreenElement, fullScreenElement: fullScreenElement, children: _jsxs(LayoutSizeProvider, { contentHeight: memoizedContentHeight, outerContentHeight: memoizedOuterContentHeight, isSetHeight: !pageScrolling, children: [isFullScreenCurrent ? null : memoizedHeader, isFullScreenCurrent ? null : memoizedBanners, isFullScreenCurrent ? null : memoizedSummaryTileBar, memoizedContent] }) }) })));
 };
 export const Layout = memo(LayoutInner);

package/esm/mobileSheet/mobileSheet.js

@@ -16,7 +16,7 @@ import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { useUniqueId } from "../commonHelpers/useUniqueId";
 import { useFadeComponent } from "../utils/useFadeComponent";
-// ...existing code...
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 injectString("cs", "Back", "Zp\u011Bt");
@@ -132,12 +132,15 @@ export const MobileSheet = ({
       return;
     }
   }, [onHidePanel, dataShieldId]);
-  // ...existing code...
+  const isClientReady = useClientReady();
   useEffect(() => {
     setIsOpen(isOpen);
   }, [isOpen, setIsOpen]);
   useEffect(() => {
     var _a, _b, _c, _d;
+    if (!isClientReady) {
+      return;
+    }
     if (useTrapFocusWithTrigger) {
       return;
     }
@@ -145,7 +148,7 @@ export const MobileSheet = ({
       return;
     }
     showContent && !preventFirstFocus && ((_d = (_c = ref.current) === null || _c === void 0 ? void 0 : _c.querySelector(FOCUSABLE_SELECTOR)) === null || _d === void 0 ? void 0 : _d.focus());
-  }, [content, showContent, readyForFocus, useTrapFocusWithTrigger, preventFirstFocus]);
+  }, [content, showContent, readyForFocus, useTrapFocusWithTrigger, preventFirstFocus, isClientReady]);
   useEffect(() => {
     var _a;
     if (triggerRef && !renderComponent && !readyForFocus && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute("aria-expanded")) === "true") {
@@ -153,6 +156,9 @@ export const MobileSheet = ({
       triggerRef.current.focus();
     }
   }, [triggerRef, renderComponent, readyForFocus]);
+  if (!isClientReady) {
+    return null;
+  }
   if (!renderComponent && !isOpen) {
     return null;
   }

package/esm/modal/modal.js

@@ -19,6 +19,7 @@ import { isFocusable } from "../dialog/dialogHelpers";
 import { themeContext } from "../utils/theme/themeContext";
 import { getPredefinedFocusableItem } from "./modalHelpers";
 import { TextIconButton } from "../textIconButton/textIconButton";
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
 import { createPortal } from "react-dom";
 injectString("cs", "Close", "Zav\u0159\xEDt");
@@ -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,10 +149,11 @@ export const Modal = ({
       onClick: onOutSideClick
     })]
   }), [darkClass, modalContainerClassName, labeledId, top, onClose, maxWidth, title, className, type, focus, modalContent, onOutSideClick]);
-  if (!isOpen) {
+  if (!isOpen || !isClientReady) {
     return null;
   }
-  return createPortal(dialogHTML(labeledId), modalRoot, "ModalPortal" + labeledId);
+  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 = ({
@@ -162,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/pageHeader/pageHeaderActions.js

@@ -8,10 +8,8 @@ import { PageToolbarCollapsedItemsControl } from "../header/components/collapsed
 import { PageHeaderButtonDisplayName } from "./pageHeaderButton";
 import { PageHeaderMenuDisplayName } from "./pageHeaderMenu";
 import { getItemsFromFragments } from "./pageHeaderHelpers";
-import { createPortal } from "react-dom";
-import { zen } from "../utils/zen";
+import { usePortal } from "../commonHelpers/hooks/usePortal";
 export const PageHeaderActions = ({ className = "", children }) => {
-    var _a;
     const isMobile = useMobile();
     const childrenArray = useMemo(() => getItemsFromFragments(
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -28,9 +26,10 @@ export const PageHeaderActions = ({ className = "", children }) => {
     }), [childrenArray]);
     const moreButton = useMemo(() => (_jsx(PageToolbarCollapsedItemsControl, { className: "zen-page-header-component__actions-more", children: nonFittingElements }, "page-header-more-actions-key")), [nonFittingElements]);
     const actionsContent = childrenArray.length ? (_jsxs("div", { className: classNames(["zen-page-header-component__actions", isMobile ? "zen-page-header-component__actions--mobile-portal" : "", className]), children: [nonFittingElements.length > 0 ? moreButton : null, fittingElements] })) : null;
+    const portal = usePortal(actionsContent);
     // For mobile, render actions in a portal at the bottom center of viewport
     if (isMobile && actionsContent) {
-        return createPortal(actionsContent, (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body);
+        return portal;
     }
     return actionsContent;
 };

package/esm/sidePanel/sidePanel.js

@@ -8,13 +8,14 @@ import { useTrapFocus } from "../commonHelpers/hooks/useTrapFocus";
 import { isChildOf } from "../utils/isChildOf";
 import { getParentByClass } from "../utils/getParentByClass";
 import { SidePanelCell } from "./sidePanelCell/sidePanelCell";
-import { createPortal } from "react-dom";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { themeContext } from "../utils/theme/themeContext";
 import { useFadeComponent } from "../utils/useFadeComponent";
 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,15 +61,16 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
     const autoId = useId();
     const popupId = id || autoId;
     const prevReadyForFocus = useRef(false);
+    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) {
@@ -81,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;
@@ -112,7 +117,7 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
                 || isOpenPeriodPicker && isChildOf(e.target, isOpenPeriodPicker)
                 || isOpenPeriodPicker && isOpenTimePicker && isChildOf(e.target, isOpenTimePicker)
                 || isOpenPeriodPicker && isOpenYearPicker && isChildOf(e.target, isOpenYearPicker)
-                || openedCustomComponents.length && Array.from(openedCustomComponents).some(el => isChildOf(e.target, el));
+                || (openedCustomComponents === null || openedCustomComponents === void 0 ? void 0 : openedCustomComponents.length) && Array.from(openedCustomComponents).some(el => isChildOf(e.target, el));
             const isClickInPopup = !isClickInChildPopup
                 ? false
                 : isClickInChildPopup;
@@ -142,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]);
@@ -156,16 +161,21 @@ export const SidePanel = ({ label, className, id, isOpen, onHidePanel, children,
         }
         return {};
     }, [width, isMobile, panelPosition]);
-    if (!renderComponent && !isOpen) {
-        return null;
-    }
-    return createPortal(_jsx("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, { role: "dialog", "aria-label": label, onTransitionEnd: handleTransitionEnd, className: classNames([
+    const portalContainer = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);
+    const portal = usePortal(_jsx("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, { role: "dialog", "aria-label": label, onTransitionEnd: handleTransitionEnd, className: classNames([
             "zen-side-panel",
             driveClassName || "",
             dark ? "zen-dark" : "",
             showContent ? "zen-side-panel--shown" : "",
             positioningClass,
             className !== null && className !== void 0 ? className : ""
-        ]), children: memoizedChildForRender })), ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.body));
+        ]), children: memoizedChildForRender })), portalContainer);
+    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.1",
+    "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"