SSR support fixes [prerelease]

mondaycom · Oct 6, 2024 · 3378b5c · 3378b5c
1 parent 290b29c
commit 3378b5c
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 102 deletions.
diff --git a/packages/core/src/components/Dialog/Dialog.tsx b/packages/core/src/components/Dialog/Dialog.tsx
@@ -280,9 +280,6 @@ export default class Dialog extends PureComponent<DialogProps, DialogState> {
   }
 
   getContainer() {
-    if (!isClient()) {
-      return null;
-    }
     const { containerSelector } = this.props;
     if (!containerSelector) {
       return document.body;
@@ -552,98 +549,99 @@ export default class Dialog extends PureComponent<DialogProps, DialogState> {
             );
           }}
         </Reference>
-        {createPortal(
-          <Popper
-            placement={position as unknown as PopperJS.Placement}
-            modifiers={[
-              {
-                name: "offset",
-                options: {
-                  offset: [moveBy.secondary, moveBy.main]
-                }
-              },
-              {
-                name: "zIndex",
-                enabled: true,
-                phase: "write",
-                fn({ state }) {
-                  if (zIndex) {
-                    state.styles.popper.zIndex = String(zIndex);
+        {isClient() &&
+          createPortal(
+            <Popper
+              placement={position as unknown as PopperJS.Placement}
+              modifiers={[
+                {
+                  name: "offset",
+                  options: {
+                    offset: [moveBy.secondary, moveBy.main]
                   }
-                  return state;
-                }
-              },
-              {
-                name: "rotator",
-                enabled: true,
-                phase: "write",
-                fn({ state }) {
-                  // eslint-disable-next-line no-param-reassign
-                  if (!state.styles.arrow) {
+                },
+                {
+                  name: "zIndex",
+                  enabled: true,
+                  phase: "write",
+                  fn({ state }) {
+                    if (zIndex) {
+                      state.styles.popper.zIndex = String(zIndex);
+                    }
+                    return state;
+                  }
+                },
+                {
+                  name: "rotator",
+                  enabled: true,
+                  phase: "write",
+                  fn({ state }) {
+                    // eslint-disable-next-line no-param-reassign
+                    if (!state.styles.arrow) {
+                      return state;
+                    }
+                    // const reg = new RegExp(
+                    //   /translate\(([0-9].*)px, ([0-9].*)px\)/
+                    // );
+                    // const transform = state.styles.arrow.transform;
+                    // const res = reg.exec(transform);
+                    // state.styles.popper.transformOrigin = `${100 -
+                    //   res[1]}% ${100 - res[2]}%`;
+                    state.styles.arrow.transform = `${state.styles.arrow.transform} rotate(45deg)`;
                     return state;
                   }
-                  // const reg = new RegExp(
-                  //   /translate\(([0-9].*)px, ([0-9].*)px\)/
-                  // );
-                  // const transform = state.styles.arrow.transform;
-                  // const res = reg.exec(transform);
-                  // state.styles.popper.transformOrigin = `${100 -
-                  //   res[1]}% ${100 - res[2]}%`;
-                  state.styles.arrow.transform = `${state.styles.arrow.transform} rotate(45deg)`;
-                  return state;
+                },
+                ...modifiers
+              ]}
+            >
+              {({ placement, style, ref, arrowProps, isReferenceHidden }) => {
+                if (!this.isShown() && placement) {
+                  return null;
+                }
+
+                if (hideWhenReferenceHidden && isReferenceHidden) {
+                  const event = new CustomEvent("onReferenceHidden");
+                  this.hideDialog(event, "onReferenceHidden");
                 }
-              },
-              ...modifiers
-            ]}
-          >
-            {({ placement, style, ref, arrowProps, isReferenceHidden }) => {
-              if (!this.isShown() && placement) {
-                return null;
-              }
-
-              if (hideWhenReferenceHidden && isReferenceHidden) {
-                const event = new CustomEvent("onReferenceHidden");
-                this.hideDialog(event, "onReferenceHidden");
-              }
-
-              return (
-                <DialogContent
-                  data-testid={overrideDataTestId}
-                  isReferenceHidden={hideWhenReferenceHidden && isReferenceHidden}
-                  onMouseEnter={this.onDialogEnter}
-                  onMouseLeave={this.onDialogLeave}
-                  disableOnClickOutside={disableOnClickOutside}
-                  onClickOutside={this.onClickOutside}
-                  onContextMenu={this.onContextMenu}
-                  onEsc={this.onEsc}
-                  animationType={animationTypeCalculated}
-                  position={placement}
-                  wrapperClassName={wrapperClassName}
-                  startingEdge={startingEdge}
-                  isOpen={this.isShown()}
-                  showDelay={showDelay}
-                  styleObject={style}
-                  ref={ref}
-                  onClick={this.onContentClick}
-                  hasTooltip={!!tooltip}
-                  containerSelector={containerSelector}
-                  disableContainerScroll={disableContainerScroll}
-                >
-                  {contentRendered}
-                  {tooltip && (
-                    <div
-                      style={arrowProps.style}
-                      ref={arrowProps.ref}
-                      className={cx(styles.arrow, tooltipClassName)}
-                      data-placement={placement}
-                    />
-                  )}
-                </DialogContent>
-              );
-            }}
-          </Popper>,
-          this.getContainer()
-        )}
+
+                return (
+                  <DialogContent
+                    data-testid={overrideDataTestId}
+                    isReferenceHidden={hideWhenReferenceHidden && isReferenceHidden}
+                    onMouseEnter={this.onDialogEnter}
+                    onMouseLeave={this.onDialogLeave}
+                    disableOnClickOutside={disableOnClickOutside}
+                    onClickOutside={this.onClickOutside}
+                    onContextMenu={this.onContextMenu}
+                    onEsc={this.onEsc}
+                    animationType={animationTypeCalculated}
+                    position={placement}
+                    wrapperClassName={wrapperClassName}
+                    startingEdge={startingEdge}
+                    isOpen={this.isShown()}
+                    showDelay={showDelay}
+                    styleObject={style}
+                    ref={ref}
+                    onClick={this.onContentClick}
+                    hasTooltip={!!tooltip}
+                    containerSelector={containerSelector}
+                    disableContainerScroll={disableContainerScroll}
+                  >
+                    {contentRendered}
+                    {tooltip && (
+                      <div
+                        style={arrowProps.style}
+                        ref={arrowProps.ref}
+                        className={cx(styles.arrow, tooltipClassName)}
+                        data-placement={placement}
+                      />
+                    )}
+                  </DialogContent>
+                );
+              }}
+            </Popper>,
+            this.getContainer()
+          )}
       </Manager>
     );
   }

diff --git a/packages/core/src/components/Menu/Menu/Menu.tsx b/packages/core/src/components/Menu/Menu/Menu.tsx
@@ -1,16 +1,8 @@
 import cx from "classnames";
 import { SIZES } from "../../../constants/sizes";
-import React, {
-  forwardRef,
-  ReactElement,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
+import React, { forwardRef, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import useMergeRef from "../../../hooks/useMergeRef";
+import useIsomorphicLayoutEffect from "../../../hooks/ssr/useIsomorphicLayoutEffect";
 import useClickOutside from "../../../hooks/useClickOutside";
 import { backwardCompatibilityForProperties } from "../../../helpers/backwardCompatibilityForProperties";
 import useSubMenuIndex from "./hooks/useSubMenuIndex";
@@ -181,7 +173,7 @@ const Menu: VibeComponent<MenuProps> & {
       }
     }, [activeItemIndex, hasOpenSubMenu, previousHasOpenSubMenu, useDocumentEventListeners]);
 
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       if (!focusOnMount || useDocumentEventListeners) return;
       requestAnimationFrame(() => {
         ref && ref.current && ref.current.focus();