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

package/dist/modal/modal.js

@@ -84,8 +84,9 @@ 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 usePortal_1 = require("../commonHelpers/hooks/usePortal");
+const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
+const react_dom_1 = require("react-dom");
 const Modal = ({
   isOpen,
   children,
@@ -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,11 +188,11 @@ const Modal = ({
       onClick: onOutSideClick
     })]
   }), [darkClass, modalContainerClassName, labeledId, top, onClose, maxWidth, title, className, type, focus, modalContent, onOutSideClick]);
-  const modalPortal = (0, usePortal_1.usePortal)(dialogHTML(labeledId), isOpen ? modalRoot : undefined);
-  if (!isOpen) {
+  if (!isOpen || !isClientReady) {
     return null;
   }
-  return modalPortal;
+  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 = () => {};
@@ -203,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/sidePanel/sidePanel.js

@@ -18,6 +18,7 @@ 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,16 +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);
-    // ...existing code...
+    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) {
@@ -87,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;
@@ -148,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]);
@@ -174,6 +178,9 @@ const SidePanel = ({ label, className, id, isOpen, onHidePanel, children, trigge
     if (!renderComponent && !isOpen) {
         return null;
     }
+    if (!isClientReady) {
+        return undefined;
+    }
     return portal;
 };
 exports.SidePanel = SidePanel;

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.js

@@ -6,7 +6,7 @@ import { themeContext } from "../utils/theme/themeContext";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useBodyScroll } from "../utils/useBodyScroll";
 import { usePortal } from "../commonHelpers/hooks/usePortal";
-// ...existing code...
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
 /**
  * @deprecated - use Modal instead
@@ -17,15 +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();
-    // ...existing code...
+    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;
         }
@@ -33,11 +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" })] });
     const portal = usePortal(isOpen && isValidElement(children) ? createDialog(labeledId) : null, modalRoot, "ModalPortal");
-    // ...existing code...
+    if (!isClientReady) {
+        return null;
+    }
     return portal;
 };

package/esm/feedbackContainer/feedbackContainer.js

@@ -8,7 +8,7 @@ import { classNames } from "../commonHelpers/classNames/classNames";
 import { getAlertAnimation } from "./utils/getAlertAnimation";
 import { getToastAnimation } from "./utils/getToastAnimation";
 import { usePortal } from "../commonHelpers/hooks/usePortal";
-// ...existing code...
+import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
 export const FeedbackContainer = () => {
     var _a, _b;
@@ -16,7 +16,7 @@ export const FeedbackContainer = () => {
     const prevAlertsLength = React.useRef(alerts.length);
     const prevToastsLength = React.useRef(toasts.length);
     const isAPIMode = mode === "api";
-    // ...existing code...
+    const isClientReady = useClientReady();
     const isMobile = useMobile();
     const isAlertAdded = alerts.length > prevAlertsLength.current;
     const isToastAdded = toasts.length > prevToastsLength.current;
@@ -44,5 +44,8 @@ export const FeedbackContainer = () => {
         }, type: toast.type, hasIcon: toast.hasIcon, action: toast.action }, toast.id)), [toasts, sameToastsLength, isToastAdded, removedToastId, isMobile, activeFeedback, removeToast]);
     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 {};

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;
   }