[♻️]: Refactor to defer opening state of poppers to client-side

lib/Menu/Menu.tsx

@@ -26,13 +26,16 @@ type OwnProps = {
    */
   className?: string | ((ctx: { open: boolean }) => string);
   /**
-   * The anchor element for the menu.
+   * A function that will resolve the anchor element for the menu.
+   *
+   * It has to return `HTMLElement`, or a `VirtualElement`, or `null`.
+   * A VirtualElement is an object that implements `getBoundingClientRect(): ClientRect`.
+   *
+   * If nothing is resolved, the menu won't show up.
+   *
+   * Please note that this function is only called on the client-side.
    */
-  anchorElement:
-    | React.RefObject<HTMLElement>
-    | HTMLElement
-    | VirtualElement
-    | string;
+  resolveAnchor: () => HTMLElement | VirtualElement | null;
   /**
    * The menu positioning alignment.
    * @default "start"
@@ -82,7 +85,7 @@ const MenuBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
     className: classNameProp,
     children: childrenProp,
     alignment = "start",
-    anchorElement,
+    resolveAnchor,
     keepMounted: keepMountedProp,
     disabledKeySearch = false,
     open = false,
@@ -362,14 +365,12 @@ const MenuBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
       ? classNameProp({ open })
       : classNameProp;
 
-  if (!anchorElement) return null;
-
   return (
     <Popper
       autoPlacement
       keepMounted={keepMounted}
       open={open}
-      anchorElement={anchorElement}
+      resolveAnchor={resolveAnchor}
       computationMiddlewareOrder="afterAutoPlacement"
       computationMiddleware={popperComputationMiddleware}
       offset={0}

lib/Menu/components/Sub.tsx

@@ -31,6 +31,8 @@ const SubBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
 
   if (!menuItemCtx) return null;
 
+  const resolveAnchor = () => document.getElementById(menuItemCtx.id);
+
   menuItemCtx.registerSubMenu(rootRef, id);
 
   return (
@@ -40,7 +42,7 @@ const SubBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
       id={id}
       ref={handleRootRef}
       className={className}
-      anchorElement={menuItemCtx.id}
+      resolveAnchor={resolveAnchor}
       data-slot={SubRootSlot}
       data-submenu
     >

lib/Popper/Popper.tsx

@@ -1,18 +1,18 @@
 import * as React from "react";
 import Portal from "../Portal";
-import { SystemError } from "../internals";
 import type { MergeElementProps, RequireOnlyOne } from "../types";
 import {
   componentWithForwardedRef,
   useDeterministicId,
   useDirection,
   useForkedRefs,
   useIsomorphicLayoutEffect,
+  useIsomorphicValue,
   useRegisterNodeRef,
   type ClientRect,
 } from "../utils";
 import * as Slots from "./slots";
-import { computePosition, getAnchor, translate } from "./utils";
+import { computePosition, translate } from "./utils";
 
 export type Alignment = "start" | "end";
 export type Side = "top" | "right" | "bottom" | "left";
@@ -162,14 +162,16 @@ type OwnProps = {
     recompute: () => void;
   }>;
   /**
-   * Works as an anchor for the popper.\
-   * This enables things like positioning context menus or following the cursor.
+   * A function that will resolve the anchor element for the popper.
+   *
+   * It has to return `HTMLElement`, or a `VirtualElement`, or `null`.
+   * A VirtualElement is an object that implements `getBoundingClientRect(): ClientRect`.
+   *
+   * If nothing is resolved, the popper won't show up.
+   *
+   * Please note that this function is only called on the client-side.
    */
-  anchorElement:
-    | React.RefObject<HTMLElement>
-    | HTMLElement
-    | VirtualElement
-    | string;
+  resolveAnchor: () => HTMLElement | VirtualElement | null;
   /**
    * Used to keep mounting when more control is needed.\
    * Useful when controlling animation with React animation libraries.
@@ -189,14 +191,14 @@ export type Props = Omit<
 
 const PopperBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
   const {
-    open,
+    open: openProp,
     actions,
     style: styleProp,
     id: idProp,
     className: classNameProp,
     children: childrenProp,
     computationMiddleware,
-    anchorElement,
+    resolveAnchor,
     offset = 8,
     side = "top",
     keepMounted = false,
@@ -207,18 +209,7 @@ const PopperBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
     ...otherProps
   } = props;
 
-  if (!anchorElement) {
-    throw new SystemError(
-      [
-        "Invalid `anchorElement` property.",
-        "The `anchorElement` property must be either a `id (string)`, " +
-          "`HTMLElement`, " +
-          "`RefObject<HTMLElement>`, or in shape of " +
-          "`VirtualElement { getBoundingClientRect(): ClientRect }`",
-      ].join("\n"),
-      "Popper",
-    );
-  }
+  const open = useIsomorphicValue(openProp, false);
 
   const isRtl = useDirection() === "rtl";
   const id = useDeterministicId(idProp, "styleless-ui__popper");
@@ -248,7 +239,7 @@ const PopperBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
   };
 
   const updatePosition = () => {
-    const anchor = getAnchor(anchorElement);
+    const anchor = resolveAnchor();
 
     if (anchor && popperRef.current) {
       const position = computePosition(anchor, popperRef.current, config);
@@ -267,9 +258,8 @@ const PopperBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
   }));
 
   useIsomorphicLayoutEffect(() => {
-    const anchor = getAnchor(anchorElement);
+    const anchor = resolveAnchor();
 
-    if (!anchor) return;
     if (id && anchor instanceof HTMLElement) {
       anchor.setAttribute("aria-describedby", id);
     }
@@ -312,12 +302,12 @@ const PopperBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
       >
         <div
           {...otherProps}
-          tabIndex={-1}
-          data-slot={Slots.Root}
           id={id}
-          className={className}
           ref={registerRef}
           style={style}
+          className={className}
+          tabIndex={-1}
+          data-slot={Slots.Root}
           data-open={open ? "" : undefined}
         >
           {children}

lib/Popper/utils.ts

@@ -28,7 +28,6 @@ import {
   type MiddlewareResult,
   type OffsetMiddleware,
   type Placement,
-  type Props,
   type Rect,
   type Side,
   type Strategy,
@@ -762,17 +761,3 @@ export const translate = ({ x, y }: Coordinates) => {
     msTransform: transformValue,
   };
 };
-
-export const getAnchor = (anchorElement: Props["anchorElement"]) => {
-  const isServer = typeof document !== "undefined";
-
-  if (typeof anchorElement === "string") {
-    if (isServer) return null;
-
-    return document.getElementById(anchorElement);
-  }
-
-  if ("current" in anchorElement) return anchorElement.current;
-
-  return anchorElement;
-};

lib/Portal/Portal.tsx

@@ -1,16 +1,15 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { usePortalConfig } from "../PortalConfigProvider";
-import { useIsServerHandoffComplete } from "../utils";
-import { getContainer } from "./utils";
+import { useIsomorphicValue } from "../utils";
 
 export type Props = {
   /**
-   * A string containing one selector to match.
-   * This string must be a valid CSS selector string;
-   * if it isn't, a `SyntaxError` exception is thrown.
+   * A function that will resolve the container element for the portal.
+   *
+   * Please note that this function is only called on the client-side.
    */
-  containerQuerySelector?: string;
+  resolveContainer?: () => HTMLElement | null;
   /**
    * The children to render into the container.
    */
@@ -23,17 +22,14 @@ export type Props = {
 };
 
 const Portal = (props: Props) => {
-  const { containerQuerySelector, children, disabled = false } = props;
+  const { resolveContainer, children, disabled = false } = props;
 
-  const { destinationQuery } = usePortalConfig();
-  const isServerHandoffComplete = useIsServerHandoffComplete();
+  const portalConfig = usePortalConfig();
 
-  const containerQuery = containerQuerySelector || destinationQuery;
+  const containerResolver =
+    resolveContainer ?? portalConfig?.resolveContainer ?? (() => document.body);
 
-  const container: HTMLElement | null = React.useMemo(
-    () => (isServerHandoffComplete ? getContainer(containerQuery) : null),
-    [containerQuery, isServerHandoffComplete],
-  );
+  const container = useIsomorphicValue(containerResolver, null);
 
   if (disabled) return <>{children}</>;
   if (!container) return null;

lib/PortalConfigProvider/context.ts

@@ -1,12 +1,15 @@
 import * as React from "react";
 
 type ContextValue = {
-  destinationQuery?: string;
+  /**
+   * A function that will resolve the container element for the portals.
+   *
+   * Please note that this function is only called on the client-side.
+   */
+  resolveContainer: () => HTMLElement | null;
 };
 
-const Context = React.createContext<ContextValue>({
-  destinationQuery: undefined,
-});
+const Context = React.createContext<ContextValue | null>(null);
 
 if (process.env.NODE_ENV !== "production")
   Context.displayName = "PortalConfigContext";

lib/Tooltip/Tooltip.test.tsx

@@ -7,11 +7,13 @@ import Tooltip from "./Tooltip";
 describe("Tooltip", () => {
   afterEach(jest.clearAllMocks);
 
+  const anchorResolver = () => document.getElementById("anchor");
+
   it(`component could be updated and unmounted without errors`, () => {
     const Component = (
       <>
         <div id="anchor">Anchor</div>
-        <Tooltip anchorElement="anchor">
+        <Tooltip resolveAnchor={anchorResolver}>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
           magnam ad excepturi ipsa exercitationem cum?
         </Tooltip>
@@ -30,7 +32,7 @@ describe("Tooltip", () => {
       <>
         <div id="anchor">Anchor</div>
         <Tooltip
-          anchorElement="anchor"
+          resolveAnchor={anchorResolver}
           defaultOpen={true}
           ref={ref}
         >
@@ -64,7 +66,7 @@ describe("Tooltip", () => {
       <>
         <div id="anchor">Anchor</div>
         <Tooltip
-          anchorElement="anchor"
+          resolveAnchor={anchorResolver}
           defaultOpen={true}
           style={style}
         >
@@ -96,7 +98,7 @@ describe("Tooltip", () => {
       <>
         <div id="anchor">Anchor</div>
         <Tooltip
-          anchorElement="anchor"
+          resolveAnchor={anchorResolver}
           defaultOpen={true}
           data-other-attribute="test"
         >
@@ -117,7 +119,7 @@ describe("Tooltip", () => {
       <>
         <div id="anchor">Anchor</div>
         <Tooltip
-          anchorElement="anchor"
+          resolveAnchor={anchorResolver}
           defaultOpen={true}
           data-other-attribute="test"
           className={({ placement, openState }) =>
@@ -145,7 +147,7 @@ describe("Tooltip", () => {
           Anchor
         </div>
         <Tooltip
-          anchorElement="anchor"
+          resolveAnchor={anchorResolver}
           defaultOpen={true}
           data-other-attribute="test"
           className={({ placement, openState }) =>