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

package/dist/mobileSheet/mobileSheet.js

@@ -76,7 +76,7 @@ const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const useUniqueId_1 = require("../commonHelpers/useUniqueId");
 const useFadeComponent_1 = require("../utils/useFadeComponent");
-// ...existing code...
+const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const MobileSheet = ({
@@ -140,12 +140,15 @@ const MobileSheet = ({
       return;
     }
   }, [onHidePanel, dataShieldId]);
-  // ...existing code...
+  const isClientReady = (0, useClientReady_1.useClientReady)();
   (0, react_1.useEffect)(() => {
     setIsOpen(isOpen);
   }, [isOpen, setIsOpen]);
   (0, react_1.useEffect)(() => {
     var _a, _b, _c, _d;
+    if (!isClientReady) {
+      return;
+    }
     if (useTrapFocusWithTrigger) {
       return;
     }
@@ -153,7 +156,7 @@ const MobileSheet = ({
       return;
     }
     showContent && !preventFirstFocus && ((_d = (_c = ref.current) === null || _c === void 0 ? void 0 : _c.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR)) === null || _d === void 0 ? void 0 : _d.focus());
-  }, [content, showContent, readyForFocus, useTrapFocusWithTrigger, preventFirstFocus]);
+  }, [content, showContent, readyForFocus, useTrapFocusWithTrigger, preventFirstFocus, isClientReady]);
   (0, react_1.useEffect)(() => {
     var _a;
     if (triggerRef && !renderComponent && !readyForFocus && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute("aria-expanded")) === "true") {
@@ -161,6 +164,9 @@ const MobileSheet = ({
       triggerRef.current.focus();
     }
   }, [triggerRef, renderComponent, readyForFocus]);
+  if (!isClientReady) {
+    return null;
+  }
   if (!renderComponent && !isOpen) {
     return null;
   }

package/dist/modal/modal.js

@@ -84,6 +84,7 @@ const dialogHelpers_1 = require("../dialog/dialogHelpers");
 const themeContext_1 = require("../utils/theme/themeContext");
 const modalHelpers_1 = require("./modalHelpers");
 const textIconButton_1 = require("../textIconButton/textIconButton");
+const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
 const react_dom_1 = require("react-dom");
 const Modal = ({
@@ -100,26 +101,34 @@ const Modal = ({
 }) => {
   var _a, _b, _c;
   const lastActiveOutsideElement = (0, react_1.useRef)((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
-  // eslint-disable-next-line
-  const modalRoot = ((_b = zen_1.zen === null || zen_1.zen === void 0 ? void 0 : zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen_1.zen === null || zen_1.zen === void 0 ? void 0 : zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body);
   const [top, setTop] = (0, react_1.useState)(`${zen_1.zen.pageYOffset || 0}px`);
   const {
     dark
   } = (0, react_1.useContext)(themeContext_1.themeContext);
+  const isClientReady = (0, useClientReady_1.useClientReady)();
   const onOutSideClick = (0, react_1.useCallback)(() => {
+    if (!isClientReady) {
+      return;
+    }
     if (!isOpen || !closeOnClickOutside || !onClose) {
       return;
     }
     onClose();
-  }, [isOpen, closeOnClickOutside, onClose]);
+  }, [isClientReady, isOpen, closeOnClickOutside, onClose]);
   (0, react_1.useEffect)(() => {
+    if (!isClientReady) {
+      return undefined;
+    }
     const copyActive = lastActiveOutsideElement.current;
     return () => {
       (0, dialogHelpers_1.isFocusable)(copyActive) && copyActive.focus();
     };
-  }, []);
+  }, [isClientReady]);
   (0, react_1.useEffect)(() => {
     var _a, _b;
+    if (!isClientReady) {
+      return undefined;
+    }
     (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body.classList.remove("zen-modal-content--hidden-overflow");
     if (isOpen) {
       (_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body.classList.add("zen-modal-content--hidden-overflow");
@@ -128,9 +137,12 @@ const Modal = ({
       var _a;
       (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body.classList.remove("zen-modal-content--hidden-overflow");
     };
-  }, [isOpen]);
+  }, [isClientReady, isOpen]);
   (0, react_1.useEffect)(() => {
     var _a, _b;
+    if (!isClientReady) {
+      return undefined;
+    }
     const changeTopSpace = () => {
       setTop(`${zen_1.zen.pageYOffset || 0}px`);
     };
@@ -141,7 +153,7 @@ const Modal = ({
       (_a = zen_1.zen.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, "resize", changeTopSpace);
       (_b = zen_1.zen.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(zen_1.zen, "scroll", changeTopSpace);
     };
-  }, []);
+  }, [isClientReady]);
   const labeledId = (0, react_1.useId)();
   const darkClass = dark ? "zen-dark" : "";
   const modalContent = (0, react_1.useMemo)(() => {
@@ -176,10 +188,11 @@ const Modal = ({
       onClick: onOutSideClick
     })]
   }), [darkClass, modalContainerClassName, labeledId, top, onClose, maxWidth, title, className, type, focus, modalContent, onOutSideClick]);
-  if (!isOpen) {
+  if (!isOpen || !isClientReady) {
     return null;
   }
-  return (0, react_dom_1.createPortal)(dialogHTML(labeledId), modalRoot, "ModalPortal" + labeledId);
+  const modalRoot = ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body);
+  return (0, react_dom_1.createPortal)(dialogHTML(labeledId), modalRoot);
 };
 exports.Modal = Modal;
 const dummyOnClose = () => {};
@@ -202,10 +215,10 @@ const DialogContentNew = ({
   const lastActiveOutsideElement = (0, react_1.useRef)((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
   const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
   const iconsByType = (0, react_1.useMemo)(() => ({
-    "error": iconException_1.IconException,
-    "success": iconCheckRadio_1.IconCheckRadio,
-    "warning": iconWarning_1.IconWarning,
-    "info": iconInfoCircle_1.IconInfoCircle
+    error: iconException_1.IconException,
+    success: iconCheckRadio_1.IconCheckRadio,
+    warning: iconWarning_1.IconWarning,
+    info: iconInfoCircle_1.IconInfoCircle
   }), []);
   const subscriptionCondition = (0, react_1.useCallback)(trigger => trigger.current !== null, []);
   (0, useTrapFocus_1.useTrapFocus)(contentRef, undefined, contentRef, subscriptionCondition);

package/dist/pageHeader/pageHeaderActions.js

@@ -14,10 +14,8 @@ const collapsedItemsControl_1 = require("../header/components/collapsedItemsCont
 const pageHeaderButton_1 = require("./pageHeaderButton");
 const pageHeaderMenu_1 = require("./pageHeaderMenu");
 const pageHeaderHelpers_1 = require("./pageHeaderHelpers");
-const react_dom_1 = require("react-dom");
-const zen_1 = require("../utils/zen");
+const usePortal_1 = require("../commonHelpers/hooks/usePortal");
 const PageHeaderActions = ({ className = "", children }) => {
-    var _a;
     const isMobile = (0, useMobile_1.useMobile)();
     const childrenArray = (0, react_1.useMemo)(() => (0, pageHeaderHelpers_1.getItemsFromFragments)(
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -34,9 +32,10 @@ const PageHeaderActions = ({ className = "", children }) => {
     }), [childrenArray]);
     const moreButton = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(collapsedItemsControl_1.PageToolbarCollapsedItemsControl, { className: "zen-page-header-component__actions-more", children: nonFittingElements }, "page-header-more-actions-key")), [nonFittingElements]);
     const actionsContent = childrenArray.length ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.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 = (0, usePortal_1.usePortal)(actionsContent);
     // For mobile, render actions in a portal at the bottom center of viewport
     if (isMobile && actionsContent) {
-        return (0, react_dom_1.createPortal)(actionsContent, (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body);
+        return portal;
     }
     return actionsContent;
 };

package/dist/sidePanel/sidePanel.js

@@ -11,13 +11,14 @@ const useTrapFocus_1 = require("../commonHelpers/hooks/useTrapFocus");
 const isChildOf_1 = require("../utils/isChildOf");
 const getParentByClass_1 = require("../utils/getParentByClass");
 const sidePanelCell_1 = require("./sidePanelCell/sidePanelCell");
-const react_dom_1 = require("react-dom");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const themeContext_1 = require("../utils/theme/themeContext");
 const useFadeComponent_1 = require("../utils/useFadeComponent");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const isAlertTarget_1 = require("../alert/utils/isAlertTarget");
 const isToastTarget_1 = require("../toast/utils/isToastTarget");
+const usePortal_1 = require("../commonHelpers/hooks/usePortal");
+const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
 /* eslint-enable @typescript-eslint/naming-convention */
 const isChildPopup = (target, stopElement) => {
@@ -65,15 +66,16 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
     const autoId = (0, react_1.useId)();
     const popupId = id || autoId;
     const prevReadyForFocus = (0, react_1.useRef)(false);
+    const isClientReady = (0, useClientReady_1.useClientReady)();
     (0, react_1.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) {
@@ -86,10 +88,13 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
         const focusable = Array.from(triggerRef.current.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR));
         (focusable[0] || triggerRef.current).focus();
     }
-    (0, useTrapFocus_1.useTrapFocus)(sidePanelRef, useTrapFocusWithTrigger ? triggerRef : undefined, showContent);
-    (0, useEscape_1.useEscape)(sidePanelRef, handleEscape, renderComponent);
+    (0, useTrapFocus_1.useTrapFocus)(sidePanelRef, useTrapFocusWithTrigger ? triggerRef : undefined, showContent && isClientReady);
+    (0, useEscape_1.useEscape)(sidePanelRef, handleEscape, renderComponent && isClientReady);
     (0, react_1.useEffect)(() => {
         var _a, _b, _c;
+        if (!isClientReady) {
+            return undefined;
+        }
         // eslint-disable-next-line complexity
         const closeOnClickOutside = (e) => {
             var _a, _b, _c, _d, _e, _f;
@@ -117,7 +122,7 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
                 || isOpenPeriodPicker && (0, isChildOf_1.isChildOf)(e.target, isOpenPeriodPicker)
                 || isOpenPeriodPicker && isOpenTimePicker && (0, isChildOf_1.isChildOf)(e.target, isOpenTimePicker)
                 || isOpenPeriodPicker && isOpenYearPicker && (0, isChildOf_1.isChildOf)(e.target, isOpenYearPicker)
-                || openedCustomComponents.length && Array.from(openedCustomComponents).some(el => (0, isChildOf_1.isChildOf)(e.target, el));
+                || (openedCustomComponents === null || openedCustomComponents === void 0 ? void 0 : openedCustomComponents.length) && Array.from(openedCustomComponents).some(el => (0, isChildOf_1.isChildOf)(e.target, el));
             const isClickInPopup = !isClickInChildPopup
                 ? false
                 : isClickInChildPopup;
@@ -147,7 +152,7 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
             prevReadyForFocus.current = false;
         }
         return () => { var _a; return (_a = zen_1.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]);
     (0, react_1.useEffect)(() => {
         setIsOpen(isOpen);
     }, [isOpen, setIsOpen]);
@@ -161,17 +166,22 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
         }
         return {};
     }, [width, isMobile, panelPosition]);
-    if (!renderComponent && !isOpen) {
-        return null;
-    }
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, { role: "dialog", "aria-label": label, onTransitionEnd: handleTransitionEnd, className: (0, classNames_1.classNames)([
+    const portalContainer = ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body);
+    const portal = (0, usePortal_1.usePortal)((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: sidePanelRef, id: popupId }, memoizedStyles, { role: "dialog", "aria-label": label, onTransitionEnd: handleTransitionEnd, className: (0, classNames_1.classNames)([
             "zen-side-panel",
             driveClassName || "",
             dark ? "zen-dark" : "",
             showContent ? "zen-side-panel--shown" : "",
             positioningClass,
             className !== null && className !== void 0 ? className : ""
-        ]), children: memoizedChildForRender })), ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body));
+        ]), children: memoizedChildForRender })), portalContainer);
+    if (!renderComponent && !isOpen) {
+        return null;
+    }
+    if (!isClientReady) {
+        return undefined;
+    }
+    return portal;
 };
 exports.SidePanel = SidePanel;
 exports.SidePanel.Cell = sidePanelCell_1.SidePanelCell;

package/esm/absolute/absolute.d.ts

@@ -24,4 +24,4 @@ export interface IAbsolute extends IZenComponentProps {
     recalculateOnScroll?: boolean;
     recalculateTrigger?: boolean;
 }
-export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "";
+export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "" | null;

package/esm/absolute/absolute.js

@@ -14,13 +14,13 @@ import { useArrowKey } from "../commonHelpers/hooks/useArrowKey";
 import { themeContext } from "../utils/theme/themeContext";
 import { useScroll } from "../commonHelpers/hooks/useScroll";
 import { getScrollableParent } from "../utils/getScrollableParent";
-// ...existing code...
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
 export const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger = true }) => {
     const popupRef = useRef(null);
     const prevScroll = useRef(0);
     const { dark } = useContext(themeContext);
-    // ...existing code...
+    const isClientReady = useClientReady();
     const onScrollHandler = e => {
         var _a;
         prevScroll.current = (_a = e.target) === null || _a === void 0 ? void 0 : _a.scrollTop;
@@ -113,7 +113,7 @@ export const Absolute = ({ isOpen, id, paddingX, paddingY, className, children,
             calculatePosition();
         }
         return () => { };
-    }, [calculatePosition, children, isOpen]);
+    }, [calculatePosition, children, isOpen, isClientReady]);
     useEffect(() => {
         if (isOpen) {
             if (popupRef.current && prevScroll.current && shouldHoldScroll) {
@@ -124,5 +124,8 @@ export const Absolute = ({ isOpen, id, paddingX, paddingY, className, children,
             prevScroll.current = 0;
         }
     }, [children, isOpen, shouldHoldScroll]);
+    if (!isClientReady) {
+        return null;
+    }
     return renderPopup();
 };

package/esm/controlledPopup/controlledPopup.js

@@ -2,11 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useId } from "react";
 import { Absolute } from "../absolute/absolute";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet }) => {
     const autoId = useId();
     const popupId = id || autoId;
+    const isClientReady = useClientReady();
     useEffect(() => {
-        if (!triggerRef.current) {
+        if (!triggerRef.current || !isClientReady) {
             return;
         }
         triggerRef.current.setAttribute("data-popup-id", popupId);
@@ -18,6 +20,6 @@ export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, cl
         triggerRef.current.setAttribute("aria-haspopup", triggerRole ? triggerRole : refTriggerRole === "menuitem" ? "menu" : "true");
         triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
         triggerRef.current.setAttribute("aria-controls", popupId);
-    }, [triggerRef, isOpen, popupId, preventAttributesAutoSet]);
+    }, [triggerRef, isOpen, popupId, preventAttributesAutoSet, isClientReady]);
     return (_jsx(Absolute, { triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: classNames(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll, role: "dialog", ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, recalculateOnScroll: recalculateOnScroll, children: children }));
 };

package/esm/dialog/dialog.d.ts

@@ -9,4 +9,4 @@ export interface IDialog {
 /**
  * @deprecated - use Modal instead
 */
-export declare const Dialog: ({ isOpen, children, isElementVisible }: IDialog) => import("react").ReactPortal;
+export declare const Dialog: ({ isOpen, children, isElementVisible }: IDialog) => import("react").ReactPortal | null;

package/esm/dialog/dialog.js

@@ -5,8 +5,9 @@ import { isFocusable } from "./dialogHelpers";
 import { themeContext } from "../utils/theme/themeContext";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useBodyScroll } from "../utils/useBodyScroll";
+import { usePortal } from "../commonHelpers/hooks/usePortal";
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
-import { createPortal } from "react-dom";
 /**
  * @deprecated - use Modal instead
 */
@@ -16,14 +17,21 @@ export const Dialog = ({ isOpen, children, isElementVisible }) => {
     const modalRoot = ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen.document) === null || _c === void 0 ? void 0 : _c.body);
     const { dark } = useContext(themeContext);
     const { resetScroll } = useBodyScroll();
+    const isClientReady = useClientReady();
     useEffect(() => {
+        if (!isClientReady) {
+            return () => { };
+        }
         const copyActive = lastActiveOutsideElement.current;
         return () => {
             isFocusable(copyActive) && copyActive.focus();
         };
-    }, []);
+    }, [isClientReady]);
     useEffect(() => {
         var _a;
+        if (!isClientReady) {
+            return;
+        }
         if (isOpen) {
             return;
         }
@@ -31,9 +39,13 @@ export const Dialog = ({ isOpen, children, isElementVisible }) => {
         if (!(modalCont === null || modalCont === void 0 ? void 0 : modalCont.length)) {
             resetScroll();
         }
-    }, [isOpen, resetScroll]);
+    }, [isClientReady, isOpen, resetScroll]);
     const labeledId = useId();
     const darkClass = dark ? "zen-dark" : "";
     const createDialog = (id) => _jsxs("div", { className: classNames(["zen-dialog", darkClass]), "aria-modal": "true", role: "dialog", "aria-labelledby": labeledId, style: { top: `${zen.pageYOffset || 0}px` }, children: [_jsx(DialogContent, Object.assign({}, children.props, { labeledId: id, isElementVisible: isElementVisible })), _jsx("div", { className: "zen-dialog__shield" })] });
-    return createPortal(isOpen && isValidElement(children) ? createDialog(labeledId) : null, modalRoot, "ModalPortal");
+    const portal = usePortal(isOpen && isValidElement(children) ? createDialog(labeledId) : null, modalRoot, "ModalPortal");
+    if (!isClientReady) {
+        return null;
+    }
+    return portal;
 };

package/esm/feedbackContainer/feedbackContainer.js

@@ -2,18 +2,21 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React, { useMemo } from "react";
 import { FeedbackContext } from "./feedbackContext";
 import { AlertRaw } from "../alertRaw/alertRaw";
-import { createPortal } from "react-dom";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { ToastRaw } from "../toastRaw/toastRaw";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { getAlertAnimation } from "./utils/getAlertAnimation";
 import { getToastAnimation } from "./utils/getToastAnimation";
+import { usePortal } from "../commonHelpers/hooks/usePortal";
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
 export const FeedbackContainer = () => {
+    var _a, _b;
     const { alerts, removeAlert, toasts, removeToast, activeFeedback, removedAlertId, removedToastId, mode } = React.useContext(FeedbackContext);
     const prevAlertsLength = React.useRef(alerts.length);
     const prevToastsLength = React.useRef(toasts.length);
     const isAPIMode = mode === "api";
+    const isClientReady = useClientReady();
     const isMobile = useMobile();
     const isAlertAdded = alerts.length > prevAlertsLength.current;
     const isToastAdded = toasts.length > prevToastsLength.current;
@@ -34,18 +37,15 @@ export const FeedbackContainer = () => {
         }, type: alert.type, animation: alert.animation || (sameAlertsLength ? null : getAlertAnimation(isAlertAdded, indx, removedAlertId.current, isMobile, activeFeedback)), buttons: alert.buttons, className: alert.className }, alert.id)), [alerts, isMobile, isAlertAdded, removeAlert, activeFeedback, sameAlertsLength, removedAlertId]);
     const alertClasses = useMemo(() => classNames(["zen-alerts", isMobile ? "zen-alerts--mobile" : ""]), [isMobile]);
     const toastClasses = useMemo(() => classNames(["zen-toasts", isMobile ? "zen-toasts--mobile" : ""]), [isMobile]);
-    const alertsPortal = useMemo(() => {
-        var _a;
-        return createPortal(_jsx("div", { className: alertClasses, children: alertsToRender }), (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body);
-    }, [alertsToRender, alertClasses]);
     const toastsToRender = useMemo(() => toasts.map((toast, indx, arr) => _jsx(ToastRaw, { id: toast.id, animation: toast.animation || (sameToastsLength ? null : getToastAnimation(isToastAdded, indx, removedToastId.current, arr.length, isMobile, activeFeedback)), header: toast.header, showSeconds: toast.showSeconds, className: toast.className, isOpen: true, onClose: () => {
             removeToast(toast.id);
             removedToastId.current = indx;
             toast.onClose();
         }, type: toast.type, hasIcon: toast.hasIcon, action: toast.action }, toast.id)), [toasts, sameToastsLength, isToastAdded, removedToastId, isMobile, activeFeedback, removeToast]);
-    const toastsPortal = useMemo(() => {
-        var _a;
-        return createPortal(_jsx("div", { className: toastClasses, children: toastsToRender }), (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body);
-    }, [toastsToRender, toastClasses]);
+    const alertsPortal = usePortal(_jsx("div", { className: alertClasses, children: alertsToRender }), (_a = zen.document) === null || _a === void 0 ? void 0 : _a.body);
+    const toastsPortal = usePortal(_jsx("div", { className: toastClasses, children: toastsToRender }), (_b = zen.document) === null || _b === void 0 ? void 0 : _b.body);
+    if (!isClientReady) {
+        return null;
+    }
     return _jsxs(_Fragment, { children: [!isAPIMode && alertsPortal, !isAPIMode && toastsPortal] });
 };

package/esm/filtersBar/filtersBar.js

@@ -21,6 +21,7 @@ import { useSearchComponent } from "./filtersBarProviderSearch";
 import { useMobileTrigger } from "./filtersBarProviderTrigger";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
 import { FiltersBarDateInput } from "./components/filtersBarDateInput/filtersBarDateInput";
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 /* eslint-enable @typescript-eslint/naming-convention */
 export const FiltersBarDisplayName = "FiltersBar";
 const getChildren = (children) => (!children
@@ -83,7 +84,7 @@ export const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFi
     const stateFromChildren = useMemo(() => getCurrentFiltersState(filterBarChildren), [filterBarChildren]);
     const [filtersBarState, dispatchFiltersBarState] = useReducer(filtersBarReducer, getInitialFiltersBarState(stateFromChildren, getDefaultFiltersState, onApplyAllFilters === undefined));
     const [sidePanelState, dispatchSidePanelState] = useReducer(sidePanelReducer, stateFromChildren);
-    // ...existing code...
+    const isClientReady = useClientReady();
     useEffect(() => {
         // need for dynamic items loading
         if (Object.keys(stateFromChildren).length > Object.keys(sidePanelState).length) {
@@ -195,6 +196,9 @@ export const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFi
         pillName, pillIcon, pillType, sidePanelState, filterBarChildren]);
     const noActions = useMemo(() => isAllFiltersButtonHidden && (selectedQuantity === undefined && filtersBarState.currentNumberOfChangedFilters === 0 || selectedQuantity === 0)
         && (!isApplyButtonShown || onApplyAllFilters === undefined), [isAllFiltersButtonHidden, selectedQuantity, filtersBarState.currentNumberOfChangedFilters, isApplyButtonShown, onApplyAllFilters]);
+    if (!isClientReady) {
+        return null;
+    }
     return _jsxs(_Fragment, { children: [!isMobile && _jsxs("div", { ref: toolbarRef, className: classNames(["zen-filters-toolbar", noActions ? "zen-filters-toolbar--no-actions" : "", className !== null && className !== void 0 ? className : ""]), children: [_jsx(FiltersContainer, { children: filterBarChildren }), _jsx(FiltersBarActions, { allFiltersRef: allFiltersRef, onShowAllFilters: () => toggleAllFiltersCallback(true), onClearFilters: handleClearClick, selectedQuantity: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.currentNumberOfChangedFilters, selectedQuantityToDisplay: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.numberOfChangedFilters, hideAllFiltersButton: isAllFiltersButtonHidden, onApplyButtonClick: onApplyAllFilters ? handleApplyAllFilters(false) : undefined, isApplyButtonShown: isApplyButtonShown })] }), !isAllFiltersButtonHidden ? sidePanel : null] });
 };
 FiltersBar.Search = FiltersBarSearch;

package/esm/groupsFilterRaw/groupsFilterRaw.js

@@ -295,8 +295,13 @@ export const GroupsFilterRaw = props => {
   const prevSearchField = useRef("");
   const groupsFilterId = useId();
   const popupId = useId();
-  const isDataLoadedRef = useRef(false);
   const blocksMap = useMemo(() => [["builtInGroups", "userGroups"], ["advancedGroups", "builtInGroups", "userGroups"], ["builtInGroups", "userGroups"]], []);
+  const onOptionsToggle = useCallback(() => {
+    dispatchUiState({
+      type: UiStateActionType.ToggleOpen,
+      payload: undefined
+    });
+  }, []);
   const handleSetStep = useCallback(newStep => {
     var _a;
     uiState.step !== FilterMenuStep.CurrentlySelected && dispatchUiState({
@@ -545,8 +550,7 @@ export const GroupsFilterRaw = props => {
     errorHandler(e);
     return [];
   }), [dataLoader, errorHandler]);
-  const loadData = useCallback(() => {
-    isDataLoadedRef.current = true;
+  useEffect(() => {
     dispatchUiState({
       type: UiStateActionType.SetLoadWithError,
       payload: {
@@ -575,32 +579,9 @@ export const GroupsFilterRaw = props => {
           isLoading: false
         }
       });
-      isDataLoadedRef.current = false;
       errorHandler(e);
     });
   }, [dataLoader, errorHandler]);
-  useEffect(() => {
-    if (isDataLoadedRef.current) {
-      return;
-    }
-    loadData();
-  }, [loadData]);
-  const onOptionsToggle = useCallback(() => {
-    const willBeOpen = !uiState.isOpen;
-    dispatchUiState({
-      type: UiStateActionType.ToggleOpen,
-      payload: undefined
-    });
-    if (willBeOpen && !isDataLoadedRef.current && !uiState.isLoading) {
-      loadData();
-    }
-  }, [uiState.isOpen, uiState.isLoading, loadData]);
-  const isEmptyMap = dataItems.length === 0;
-  useEffect(() => {
-    if (isEmptyMap && uiState.isOpen && !uiState.isLoading && !uiState.hasError) {
-      loadData();
-    }
-  }, [uiState.isOpen, isEmptyMap, uiState.isLoading, uiState.hasError, loadData]);
   useEffect(() => {
     const step = uiState.step;
     if (step !== FilterMenuStep.CurrentlySelected) {
@@ -841,6 +822,41 @@ export const GroupsFilterRaw = props => {
       children: translate("Clear")
     })]
   }), [handleApply, handleCancel, handleReset, isApplyDisabled, translate]);
+  const isEmptyMap = dataItems.length === 0;
+  useEffect(() => {
+    if (isEmptyMap && uiState.isOpen && !uiState.isLoading && !uiState.hasError) {
+      dispatchUiState({
+        type: UiStateActionType.SetLoadWithError,
+        payload: {
+          hasError: false,
+          isLoading: true
+        }
+      });
+      dataLoader().then(groups => {
+        dispatchState({
+          type: StateActionType.CreateGroupsMap,
+          payload: groups
+        });
+        dispatchUiState({
+          type: UiStateActionType.SetLoadWithError,
+          payload: {
+            hasError: false,
+            isLoading: false
+          }
+        });
+        setDataItems(groups);
+      }).catch(e => {
+        dispatchUiState({
+          type: UiStateActionType.SetLoadWithError,
+          payload: {
+            hasError: true,
+            isLoading: false
+          }
+        });
+        errorHandler(e);
+      });
+    }
+  }, [uiState.isOpen, isEmptyMap, uiState.isLoading, uiState.hasError, dataLoader, errorHandler]);
   const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, {
     label: translate("Organization groups filter"),
     triggerRef: triggerRef,

package/esm/header/header.js

@@ -23,7 +23,7 @@ import { SearchContextProvider } from "../filtersBar/filtersBarProviderSearch";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { TriggerContextProvider } from "../filtersBar/filtersBarProviderTrigger";
 import { useHeaderButtons } from "../utils/headerButtons/headerButtonsProvider";
-// ...existing code...
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
 export var HeaderType;
 (function (HeaderType) {
@@ -35,7 +35,7 @@ export const Header = ({ children, className, onFiltersBarOpen
 // eslint-disable-next-line complexity
  }) => {
     var _a, _b;
-    // ...existing code...
+    const isClientReady = useClientReady();
     const toolbarRef = useRef(null);
     const leftElementsRef = useRef(null);
     const rightElementsRef = useRef(null);
@@ -168,7 +168,7 @@ export const Header = ({ children, className, onFiltersBarOpen
     }, [result === null || result === void 0 ? void 0 : result.contentRect.width, calculateMiddleWidth]);
     useEffect(() => {
         calculateMiddleWidth();
-    }, [calculateMiddleWidth]);
+    }, [calculateMiddleWidth, isClientReady]);
     const moreButton = useMemo(() => _jsx(PageToolbarCollapsedItemsControl, { children: nonFittingElements }, "pageCollapsedToolbar"), [nonFittingElements]);
     const mobileSearch = useMemo(() => searchComponent && memoizedFiltersBar ? (_jsx(MobileSearchControl, { state: searchExpandedState, searchInput: searchComponent, onClick: (state) => setSearchExpandedState(state) })) : null, [memoizedFiltersBar, searchComponent, searchExpandedState]);
     const mobileFilterButton = useMemo(() => (isMobile && memoizedFiltersBar ? _jsx(MobileFilterControl, { count: numberOfChangedFilters, onClick: filtersBarToggler, ref: mobileFilterControlRef }) : null), [filtersBarToggler, isMobile, memoizedFiltersBar, numberOfChangedFilters]);
@@ -253,6 +253,9 @@ export const Header = ({ children, className, onFiltersBarOpen
             return;
         }
     }, [mobileFilterControlRef, mobileFilterNewLineControlRef, isMobileFilterButtonExists, mobileFilterTrigger, isFilterInNewLine]);
+    if (!isClientReady) {
+        return null;
+    }
     return (_jsx(HeaderMenuProvider, { alignment: "left-top", children: _jsx(HeaderCustomContent.Provider, { value: { content, setContent }, children: _jsx(FiltersBarContextProvider, { value: { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn: setNumberOfChangedFilters }, children: _jsx(SearchContextProvider, { value: { setSearchComponent: handleSearchChange }, children: _jsx(TriggerContextProvider, { value: { triggerComponent: mobileFilterTrigger }, children: _jsxs("div", { className: fullClassName, ref: headerRef, children: [mainLineContainer, newLineContainer, tabs ? (_jsxs("div", { className: classNames(["zen-main-header__tabs", "zen-main-header--border", isMobile ? "zen-main-header__tabs--mobile" : "", driveClassnameTab || ""]), children: [" ", tabs, " "] })) : null, memoizedFiltersBar ? _jsx("div", { className: "zen-main-header__filtersBar", children: memoizedFiltersBar }) : null, _jsx("div", { className: "zen-main-header__section zen-main-header__section--hidden", ref: hiddenContainerRef, children: hiddenItemForRender }), _jsx("div", { className: "zen-main-header__section zen-main-header__section--hidden", children: _jsx("div", { className: "zen-main-header__section--inline", ref: moreButtonRef, children: moreButton }) })] }) }) }) }) }) }));
 };
 export const HeaderDisplayName = "Header";

package/esm/index.d.ts

@@ -50,7 +50,6 @@ export { type IEntityWithId } from "./commonHelpers/entity";
 export { generateId } from "./commonHelpers/generateId";
 export { DeviceContext, DeviceProvider } from "./commonHelpers/hooks/deviceProvider";
 export { DeviceType } from "./commonHelpers/hooks/deviceType";
-export { useClientReady } from "./commonHelpers/hooks/useClientReady";
 export { useDebounce } from "./commonHelpers/hooks/useDebounce";
 export { useDebouncedMemo } from "./commonHelpers/hooks/useDebouncedMemo";
 export { useDeviceType } from "./commonHelpers/hooks/useDeviceType";

package/esm/index.js

@@ -50,7 +50,6 @@ export { hexToRGBA } from "./commonHelpers/colorUtils";
 export { generateId } from "./commonHelpers/generateId";
 export { DeviceContext, DeviceProvider } from "./commonHelpers/hooks/deviceProvider";
 export { DeviceType } from "./commonHelpers/hooks/deviceType";
-export { useClientReady } from "./commonHelpers/hooks/useClientReady";
 export { useDebounce } from "./commonHelpers/hooks/useDebounce";
 export { useDebouncedMemo } from "./commonHelpers/hooks/useDebouncedMemo";
 export { useDeviceType } from "./commonHelpers/hooks/useDeviceType";

package/esm/layout/layout.d.ts

@@ -22,5 +22,5 @@ interface ILayoutComponents {
     FullScreenButton: React.FC<IFullScreenButton>;
 }
 export declare const getContentPaddings: (isMobile: boolean, startWithToolbar: boolean) => number;
-export declare const Layout: (({ id, className, pageScrolling, children }: ILayout) => import("react/jsx-runtime").JSX.Element) & ILayoutComponents;
+export declare const Layout: (({ id, className, pageScrolling, children }: ILayout) => import("react/jsx-runtime").JSX.Element | null) & ILayoutComponents;
 export {};