Fix ssr issues

packages/core/src/components/List/utils/ListUtils.ts

@@ -1,6 +1,7 @@
-import { MutableRefObject, useLayoutEffect, useState } from "react";
+import { MutableRefObject, useState } from "react";
 import { ListWrapperComponentStringType, ListWrapperComponentType } from "../ListConstants";
 import { ListItemComponentType } from "../../ListItem/ListItemConstants";
+import useIsomorphicLayoutEffect from "../../../hooks/ssr/useIsomorphicLayoutEffect";
 
 let listIdCounter = 0;
 export const generateListId = () => {
@@ -9,7 +10,7 @@ export const generateListId = () => {
 
 export const useListId = (id: string) => {
   const [listId, setListId] = useState<string>();
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setListId(id || generateListId());
   }, [id]);
   return listId;

packages/core/src/components/Menu/Menu/hooks/useMenuId.tsx

@@ -1,4 +1,5 @@
-import { useLayoutEffect, useState } from "react";
+import { useState } from "react";
+import useIsomorphicLayoutEffect from "../../../../hooks/ssr/useIsomorphicLayoutEffect";
 
 let menuIdCounter = 0;
 export const generateMenuId = () => {
@@ -7,7 +8,7 @@ export const generateMenuId = () => {
 
 export const useMenuId = (id: string) => {
   const [menuId, setMenuId] = useState<string>();
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setMenuId(id || generateMenuId());
   }, [id]);
   return menuId;

packages/core/src/components/Menu/Menu/hooks/useMouseLeave.tsx

@@ -1,6 +1,7 @@
-import React, { useLayoutEffect } from "react";
+import React from "react";
 import useIsMouseEnter from "../../../../hooks/useIsMouseEnter";
 import usePrevious from "../../../../hooks/usePrevious";
+import useIsomorphicLayoutEffect from "../../../../hooks/ssr/useIsomorphicLayoutEffect";
 
 export default function useMouseLeave({
   resetOpenSubMenuIndex,
@@ -16,7 +17,7 @@ export default function useMouseLeave({
   const isMouseEnter = useIsMouseEnter({ ref });
   const prevIsMouseEnter = usePrevious(isMouseEnter);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (isMouseEnter) return;
     if (isMouseEnter === prevIsMouseEnter) return;
     if (hasOpenSubMenu) return;

packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.tsx

@@ -1,9 +1,10 @@
-import React, { useLayoutEffect, useMemo, useRef } from "react";
+import React, { useMemo, useRef } from "react";
 import DialogContentContainer from "../../../../DialogContentContainer/DialogContentContainer";
 import usePopover from "../../../../../hooks/usePopover";
 import { MenuChild } from "../../../Menu/MenuConstants";
 import { MenuItemSubMenuProps } from "./MenuItemSubMenu.types";
 import { Placement } from "../../../../../hooks/popoverConstants";
+import useIsomorphicLayoutEffect from "../../../../../hooks/ssr/useIsomorphicLayoutEffect";
 
 const MenuItemSubMenu = ({
   anchorRef,
@@ -16,7 +17,7 @@ const MenuItemSubMenu = ({
   const childRef = useRef<HTMLDivElement>(null);
   const popperElementRef = useRef<HTMLDivElement>(null);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!autoFocusOnMount || !open || !childRef?.current) {
       return;
     }

packages/core/src/components/Menu/MenuItem/hooks/useMenuItemMouseEvents.ts

@@ -1,6 +1,7 @@
-import { RefObject, useLayoutEffect } from "react";
+import { RefObject } from "react";
 import useIsMouseEnter from "../../../../hooks/useIsMouseEnter";
 import usePrevious from "../../../../hooks/usePrevious";
+import useIsomorphicLayoutEffect from "../../../../hooks/ssr/useIsomorphicLayoutEffect";
 
 export default function useMenuItemMouseEvents({
   ref,
@@ -28,7 +29,7 @@ export default function useMenuItemMouseEvents({
   const prevIsMouseEnter = usePrevious(isMouseEnter);
   const prevIsMouseEnterOnIconButton = usePrevious(isMouseEnterOnIconButton);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!isMouseEnterOnIconButton) return;
 
     if (isMouseEnterOnIconButton === prevIsMouseEnterOnIconButton) return;
@@ -47,7 +48,7 @@ export default function useMenuItemMouseEvents({
     resetOpenSubMenuIndex
   ]);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!isMouseEnter) return;
     if (isMouseEnter === prevIsMouseEnter) return;
 

packages/core/src/components/MenuButton/MenuButton.tsx

@@ -1,10 +1,11 @@
-import React, { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from "react";
 import cx from "classnames";
 import { camelCase } from "lodash-es";
 import { isForwardRef } from "react-is";
 import Dialog, { DialogEvent } from "../Dialog/Dialog";
 import DialogContentContainer from "../DialogContentContainer/DialogContentContainer";
 import Tooltip, { TooltipProps } from "../Tooltip/Tooltip";
+import useIsomorphicLayoutEffect from "../../hooks/ssr/useIsomorphicLayoutEffect";
 import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
 import useMergeRef from "../../hooks/useMergeRef";
 import { BUTTON_ICON_SIZE } from "../Button/ButtonConstants";
@@ -307,7 +308,7 @@ const MenuButton: VibeComponent<MenuButtonProps> & {
     }, [size]);
     const icon = Icon ? <Icon size={iconSize.toString()} role="img" aria-hidden="true" /> : null;
 
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       setIsOpen(open);
     }, [open, setIsOpen]);
 

packages/core/src/components/Modal/Modal.tsx

@@ -13,6 +13,7 @@ import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
 import styles from "./Modal.module.scss";
 import { useWarnDeprecated } from "../../utils/warn-deprecated";
+import { isClient } from "../../utils/ssr-utils";
 
 export interface ModalProps {
   /**
@@ -170,7 +171,7 @@ const Modal: FC<ModalProps> & { width?: typeof ModalWidth } = ({
 
   const customWidth = width !== ModalWidth.DEFAULT && width !== ModalWidth.FULL_WIDTH;
 
-  const dialog = ReactDOM.createPortal(
+  const dialog = (
     <div
       {...attr.container}
       className={cx(styles.container, classNames.container)}
@@ -196,14 +197,13 @@ const Modal: FC<ModalProps> & { width?: typeof ModalWidth } = ({
         {content}
         {footer}
       </div>
-    </div>,
-    document.body
+    </div>
   );
 
   if (unmountOnClose && !shouldShow) {
     return null;
   }
-  return ReactDOM.createPortal(dialog, document.body);
+  return isClient() ? ReactDOM.createPortal(dialog, document.body) : null;
 };
 
 export default withStaticProps(Modal, {

packages/core/src/components/TextWithHighlight/TextWithHighlight.tsx

@@ -1,8 +1,9 @@
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import cx from "classnames";
-import React, { forwardRef, useLayoutEffect, useMemo, useRef } from "react";
+import React, { forwardRef, useMemo, useRef } from "react";
 import Tooltip from "../../components/Tooltip/Tooltip";
 import useIsOverflowing from "../../hooks/useIsOverflowing/useIsOverflowing";
+import useIsomorphicLayoutEffect from "../../hooks/ssr/useIsomorphicLayoutEffect";
 import useMergeRef from "../../hooks/useMergeRef";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import { DialogPosition } from "../../constants";
@@ -97,7 +98,7 @@ const TextWithHighlight: React.FC<TextWithHighlightProps> = forwardRef(
 
     const isOverflowing = useIsOverflowing({ ref: useEllipsis && componentRef });
 
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       if (componentRef.current) {
         componentRef.current.style.setProperty("--heading-clamp-lines", linesToClamp.toString());
       }

packages/core/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,5 +1,5 @@
 import cx from "classnames";
-import React, { FC, ReactElement, useEffect, useLayoutEffect, useMemo, useState } from "react";
+import React, { FC, ReactElement, useEffect, useMemo, useState } from "react";
 import { SystemTheme, Theme, ThemeColor } from "./ThemeProviderConstants";
 import {
   addSystemThemeClassNameToBody,
@@ -9,6 +9,7 @@ import {
   removeSystemThemeClassNameFromBody,
   shouldGenerateTheme
 } from "./ThemeProviderUtils";
+import useIsomorphicLayoutEffect from "../../hooks/ssr/useIsomorphicLayoutEffect";
 import { withStaticProps } from "../../types";
 import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
 
@@ -60,7 +61,7 @@ const ThemeProvider: FC<ThemeProviderProps> & {
   }, [theme]);
 
   // Add the systemTheme class name to the body on mount
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!systemTheme) {
       return;
     }

packages/core/src/hooks/useClickOutside/index.ts

@@ -1,6 +1,7 @@
 import { useCallback, useRef, RefObject } from "react";
 import useEventListener from "../useEventListener";
 import { GenericEventCallback } from "../../types/events";
+import { isClient } from "../../utils/ssr-utils";
 
 export default function useClickOutside({
   ref,
@@ -27,10 +28,10 @@ export default function useClickOutside({
       callback(event);
     },
 
-    [ref, callback]
+    [ref, callback, ignoreClasses]
   );
 
-  const documentRef = useRef(document.body);
+  const documentRef = useRef(isClient() ? document.body : null);
 
   useEventListener({
     eventName,

packages/core/src/hooks/useKeyEvent/index.ts

@@ -1,6 +1,7 @@
 import { RefObject, useCallback, useRef } from "react";
 import useEventListener from "../useEventListener";
 import { GenericEventCallback } from "../../types/events";
+import { isClient } from "../../utils/ssr-utils";
 
 const CTRL_OR_META = "ctrlOrMetaKey";
 
@@ -53,7 +54,7 @@ export default function useKeyEvent({
   stopPropagation = false,
   keyEventName = "keydown" // need keydown and not keyup to prevent scrolling with prevent default, for example during menu keyboard navigation
 }: UseKeyEventArgs) {
-  const documentRef = useRef(document.body);
+  const documentRef = useRef(isClient() ? document.body : null);
   const onKeyUpPress = useCallback(
     (event: KeyboardEvent) => {
       const { key } = event;

packages/core/src/hooks/useMediaQuery/index.ts

@@ -1,4 +1,5 @@
-import { useLayoutEffect, useState, useMemo } from "react";
+import { useState, useMemo } from "react";
+import useIsomorphicLayoutEffect from "../ssr/useIsomorphicLayoutEffect";
 
 export function useMediaQuery(query: string | string[]) {
   const queries = useMemo(() => {
@@ -7,7 +8,7 @@ export function useMediaQuery(query: string | string[]) {
 
   const [matches, setMatches] = useState(queries.map(query => !!window.matchMedia(query).matches));
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const mediaQueryList = queries.map(query => window.matchMedia(query));
     const updated: [MediaQueryList, (event: MediaQueryListEvent) => void][] = mediaQueryList.map((query, index) => {
       // we save the callback function so when we unmount we could remove the listener

packages/core/src/hooks/usePopover.ts

@@ -1,6 +1,7 @@
-import { useMemo, useLayoutEffect } from "react";
+import { useMemo } from "react";
 import { usePopper } from "react-popper";
 import { Placement } from "./popoverConstants";
+import useIsomorphicLayoutEffect from "./ssr/useIsomorphicLayoutEffect";
 import useForceUpdate from "./useForceUpdate";
 import type { Options, State } from "@popperjs/core";
 
@@ -28,7 +29,7 @@ export default function usePopover(
 
   // we have to use forceUpdate because
   // usePopper need to run again after any refs changes, even after the first render.
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     forceUpdate();
   }, [referenceElement, popperElement, forceUpdate]);
 

packages/core/src/hooks/usePrevious/index.ts

@@ -1,8 +1,9 @@
-import { useLayoutEffect, useRef } from "react";
+import { useRef } from "react";
+import useIsomorphicLayoutEffect from "../ssr/useIsomorphicLayoutEffect";
 
 export default function usePrevious<Type>(value: Type): Type {
   const ref = useRef(undefined);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     ref.current = value;
   });
   return ref.current;

packages/core/src/hooks/useVibeMediaQuery/index.ts

@@ -1,5 +1,6 @@
-import { useLayoutEffect, useState } from "react";
-import useMediaQuery from "../../hooks/useMediaQuery";
+import { useState } from "react";
+import useIsomorphicLayoutEffect from "../ssr/useIsomorphicLayoutEffect";
+import useMediaQuery from "../useMediaQuery";
 import {
   VIBE_MEDIA_QUERIES,
   LARGE,
@@ -15,7 +16,7 @@ export default function useVibeMediaQuery() {
   const [mediaSize, setMediaSize] = useState(SMALL1);
   const [isSmall1, isSmall2, isMedium1, isMedium2, isLarge, isXLarge] = useMediaQuery(VIBE_MEDIA_QUERIES);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (isSmall1) setMediaSize(SMALL1);
     if (isSmall2) setMediaSize(SMALL2);
     if (isMedium1) setMediaSize(MEDIUM1);